添加登录功能

src/components/Editors.vue

@@ -67,8 +67,10 @@
       </n-flex>
     </n-tab-pane>
     <template #suffix>
-      <n-flex class="suffix">
-        <!-- <n-button>登录</n-button> -->
+      <n-flex align="center" class="suffix">
+        <!-- <span>{{ username }}</span>
+        <n-button v-if="!authed" @click="handleLogin">登录</n-button>
+        <n-button v-else @click="handleLogout">退出</n-button> -->
       </n-flex>
     </template>
   </n-tabs>
@@ -76,7 +78,10 @@
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
 import Editor from "./Editor.vue"
-import { css, html, js, reset, size, tab } from "../store"
+import { html, css, js, tab, size, reset } from "../store/editors"
+import { username, authed } from "../store/user"
+import { loginModal } from "../store/modal"
+import { logout } from "../api"
 
 function changeTab(name: string) {
   tab.value = name
@@ -85,6 +90,15 @@ function changeTab(name: string) {
 function changeSize(num: number) {
   size.value = num
 }
+
+function handleLogin() {
+  loginModal.value = true
+}
+
+async function handleLogout() {
+  await logout()
+  username.value = ""
+}
 </script>
 <style scoped>
 .pane {

src/components/Login.vue

@@ -0,0 +1,52 @@
+<template>
+  <n-modal
+    preset="card"
+    title="登录"
+    style="width: 400px"
+    v-model:show="loginModal"
+  >
+    <n-form>
+      <n-form-item label="用户名">
+        <n-input v-model:value="name"></n-input>
+      </n-form-item>
+      <n-form-item label="密码">
+        <n-input v-model:value="password"></n-input>
+      </n-form-item>
+      <n-alert
+        type="error"
+        v-if="showMeesage"
+        class="message"
+        title="登录失败"
+      ></n-alert>
+      <n-flex>
+        <n-button @click="submit">登录</n-button>
+      </n-flex>
+    </n-form>
+  </n-modal>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue"
+import { login } from "../api"
+import { loginModal } from "../store/modal"
+import { username } from "../store/user"
+
+const name = ref("")
+const password = ref("")
+
+const showMeesage = ref(false)
+
+async function submit() {
+  try {
+    const data = await login(name.value, password.value)
+    username.value = data
+    loginModal.value = false
+  } catch (err) {
+    showMeesage.value = true
+  }
+}
+</script>
+<style scoped>
+.message {
+  margin-bottom: 20px;
+}
+</style>

src/components/Preview.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import { watchDebounced } from "@vueuse/core"
-import { css, html, js } from "../store"
+import { html, css, js } from "../store/editors"
 import { onMounted, useTemplateRef } from "vue"
 import { Icon } from "@iconify/vue"
 

src/components/Tutorial.vue

@@ -17,7 +17,7 @@
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { css, html, js, tab } from "../store"
+import { html, css, js, tab } from "../store/editors"
 import { onMounted, ref, useTemplateRef, watch } from "vue"
 import { marked } from "marked"
 import { useStorage } from "@vueuse/core"
@@ -61,7 +61,7 @@ function addButton() {
     const btn = copy.children[1] as HTMLDivElement
     btn.onclick = () => {
       tab.value = lang
-      const content = pre.children[1].textContent
+      const content = pre.children[1].textContent!
       if (lang === "html") html.value = content
       if (lang === "css") css.value = content
       if (lang === "js") js.value = content