后台教程

components.d.ts

@@ -13,11 +13,17 @@ declare module 'vue' {
     Login: typeof import('./src/components/Login.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
     NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDialog: typeof import('naive-ui')['NDialog']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NFlex: typeof import('naive-ui')['NFlex']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']

src/App.vue

@@ -2,11 +2,11 @@
 import { dateZhCN, zhCN } from "naive-ui"
 import Login from "./components/Login.vue"
 import { onMounted, watch } from "vue"
-import { getMyProfile } from "./api"
+import { Account } from "./api"
 import { authed, user } from "./store/user"
 
 onMounted(async () => {
-  const data = await getMyProfile()
+  const data = await Account.getMyProfile()
   user.loaded = true
   user.username = data.username
   user.role = data.role
@@ -25,8 +25,10 @@ watch(authed, (v) => {
   <n-config-provider class="myContainer" :locale="zhCN" :date-locale="dateZhCN">
     <n-modal-provider>
       <n-message-provider>
-        <router-view></router-view>
-        <Login />
+        <n-dialog-provider>
+          <router-view></router-view>
+          <Login />
+        </n-dialog-provider>
       </n-message-provider>
     </n-modal-provider>
   </n-config-provider>

src/api.ts

@@ -1,5 +1,6 @@
 import axios from "axios"
 import { router } from "./router"
+import type { TutorialIn } from "./utils/type"
 
 const http = axios.create({
   baseURL:
@@ -30,23 +31,46 @@ http.interceptors.response.use(
           console.error("出现错误：", err.response.status, err.response.data)
       }
     } else {
-      console.error("Network error:", err.message)
+      console.error("出现错误：", err.message)
     }
     return Promise.reject(err)
   },
 )
 
-export async function login(username: string, password: string) {
-  const res = await http.post("/account/login", { username, password })
-  return res.data
+export class Account {
+  static async login(username: string, password: string) {
+    const res = await http.post("/account/login", { username, password })
+    return res.data
+  }
+
+  static async logout() {
+    const res = await http.post("/account/logout")
+    return res.data
+  }
+
+  static async getMyProfile() {
+    const res = await http.get("/account/profile")
+    return res.data
+  }
 }
 
-export async function logout() {
-  const res = await http.post("/account/logout")
-  return res.data
-}
+export class Tutorial {
+  static async list() {
+    const res = await http.get("/tutorial/")
+    return res.data
+  }
 
-export async function getMyProfile() {
-  const res = await http.get("/account/profile")
-  return res.data
+  static async create(payload: TutorialIn) {
+    const res = await http.post("/tutorial/", payload)
+    return res.data
+  }
+
+  static async remove(display: string) {
+    await http.delete(`/tutorial/${display}`)
+  }
+
+  static async get(display: string) {
+    const res = await http.get(`/tutorial/${display}`)
+    return res.data
+  }
 }

src/components/Editors.vue

@@ -92,7 +92,7 @@ import Editor from "./Editor.vue"
 import { html, css, js, tab, size, reset } from "../store/editors"
 import { user, authed, roleNormal } from "../store/user"
 import { loginModal } from "../store/modal"
-import { logout } from "../api"
+import { Account } from "../api"
 import { Role } from "../utils/type"
 import { router } from "../router"
 import { computed, h } from "vue"
@@ -123,7 +123,7 @@ const menu = computed(() => [
 function clickMenu(name: string) {
   switch (name) {
     case "dashboard":
-      router.push({ name: "dashboard" })
+      router.push({ name: "tutorial" })
       break
     case "logout":
       handleLogout()
@@ -144,7 +144,7 @@ function handleLogin() {
 }
 
 async function handleLogout() {
-  await logout()
+  await Account.logout()
   user.username = ""
   user.role = Role.Normal
 }

src/components/Login.vue

@@ -30,7 +30,7 @@
 </template>
 <script lang="ts" setup>
 import { ref } from "vue"
-import { login } from "../api"
+import { Account } from "../api"
 import { loginModal } from "../store/modal"
 import { user } from "../store/user"
 
@@ -41,7 +41,7 @@ const showMeesage = ref(false)
 
 async function submit() {
   try {
-    const data = await login(name.value, password.value)
+    const data = await Account.login(name.value, password.value)
     user.username = data.username
     user.role = data.role
     user.loaded = true

src/pages/Dashboard.vue

@@ -1 +1,28 @@
-<template>秘密花园</template>
+<template>
+  <n-flex class="container" :wrap="false">
+    <n-flex vertical class="menu">
+      <n-button @click="$router.push({ name: 'home' })">返回</n-button>
+      <n-button @click="$router.push({ name: 'tutorial' })">教程</n-button>
+    </n-flex>
+    <n-flex class="content">
+      <router-view></router-view>
+    </n-flex>
+  </n-flex>
+</template>
+<script lang="ts" setup></script>
+<style scoped>
+.container {
+  height: 100vh;
+  width: 100vw;
+  box-sizing: border-box;
+}
+.menu {
+  width: 100px;
+  padding: 10px 0 10px 10px;
+}
+.content {
+  box-sizing: border-box;
+  width: calc(100vw - 100px);
+  overflow: hidden;
+}
+</style>

src/pages/Markdown.vue

@@ -0,0 +1,135 @@
+<template>
+  <n-grid x-gap="10" :cols="6">
+    <n-gi :span="1" style="padding-top: 10px">
+      <n-flex vertical>
+        <n-button @click="createNew">新建</n-button>
+        <n-card
+          style="cursor: pointer"
+          v-for="item in list"
+          :key="item.display"
+          @click="show(item.display)"
+        >
+          <template #header>({{ item.display }}) {{ item.title }}</template>
+          <template #header-extra>
+            <n-button text type="default" @click="remove(item.display)">
+              <Icon width="20" icon="material-symbols:close-rounded"></Icon>
+            </n-button>
+          </template>
+        </n-card>
+      </n-flex>
+    </n-gi>
+
+    <n-gi :span="2" style="padding-top: 10px">
+      <n-form>
+        <n-grid x-gap="10" :cols="3">
+          <n-gi :span="1">
+            <n-form-item label="序号">
+              <n-input v-model:value="tutorial.display" />
+            </n-form-item>
+          </n-gi>
+          <n-gi :span="2">
+            <n-form-item label="标题">
+              <n-input v-model:value="tutorial.title" />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+        <n-form-item label="内容">
+          <n-input v-model:value="tutorial.content" type="textarea" rows="30" />
+        </n-form-item>
+        <n-button block type="primary" @click="submit" :disabled="!canSubmit">
+          提交
+        </n-button>
+      </n-form>
+    </n-gi>
+
+    <n-gi :span="3" class="markdwon-body" v-html="content"></n-gi>
+  </n-grid>
+</template>
+<script lang="ts" setup>
+import { marked } from "marked"
+import { computed, onMounted, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { useStorage } from "@vueuse/core"
+import { Tutorial } from "../api"
+import type { TutorialSlim } from "../utils/type"
+import { useDialog, useMessage } from "naive-ui"
+
+const message = useMessage()
+const confirm = useDialog()
+
+const list = ref<TutorialSlim[]>([])
+const content = ref("")
+const tutorial = useStorage("web-tutorial", {
+  display: "",
+  title: "",
+  content: "",
+})
+
+const canSubmit = computed(
+  () =>
+    tutorial.value.display && tutorial.value.title && tutorial.value.content,
+)
+async function getContent() {
+  const res = await Tutorial.list()
+  list.value = res.list
+  const data = tutorial.value.content || res.first?.content
+  content.value = await marked.parse(data ?? "", { async: true })
+}
+
+function createNew() {
+  tutorial.value.display = ""
+  tutorial.value.title = ""
+  tutorial.value.content = ""
+  content.value = ""
+}
+
+async function submit() {
+  try {
+    await Tutorial.create(tutorial.value)
+    tutorial.value.display = ""
+    tutorial.value.title = ""
+    tutorial.value.content = ""
+    await getContent()
+    content.value = ""
+  } catch (error: any) {
+    message.error(error.response.data.detail)
+  }
+}
+
+async function remove(display: string) {
+  confirm.warning({
+    title: "警告",
+    content: "你确定要删除吗？",
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      await Tutorial.remove(display)
+      message.success("删除成功")
+      getContent()
+    },
+  })
+}
+
+async function show(display: string) {
+  const item = await Tutorial.get(display)
+  tutorial.value.display = item.display
+  tutorial.value.title = item.title
+  tutorial.value.content = item.content
+  content.value = await marked.parse(item.content, { async: true })
+}
+watch(
+  () => tutorial.value.content,
+  async (v: string) => {
+    content.value = await marked.parse(v, { async: true })
+  },
+)
+
+onMounted(getContent)
+</script>
+<style scoped>
+.markdwon-body {
+  box-sizing: border-box;
+  overflow: auto;
+  height: 100vh;
+}
+</style>

src/router.ts

@@ -4,12 +4,19 @@ import { loginModal } from "./store/modal"
 import Home from "./pages/Home.vue"
 
 const routes = [
-  { path: "/", component: Home },
+  { path: "/", name: "home", component: Home },
   {
     path: "/dashboard",
     name: "dashboard",
     component: () => import("./pages/Dashboard.vue"),
     meta: { auth: true },
+    children: [
+      {
+        path: "tutorial",
+        name: "tutorial",
+        component: () => import("./pages/Markdown.vue"),
+      },
+    ],
   },
 ]
 

src/utils/type.ts

@@ -3,3 +3,15 @@ export enum Role {
   Admin = "admin",
   Normal = "normal",
 }
+
+export interface TutorialSlim {
+  display: string
+  title: string
+  is_public: boolean
+}
+
+export interface TutorialIn {
+  display: string
+  title: string
+  content: string
+}