From 8820544319439a5d8b7248641c32926224cccc3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?=
 <codingzhang@126.com>
Date: Fri, 21 Feb 2025 00:13:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9E=84=E5=BB=BA=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E6=A1=86=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.mts                    | 10 ++-
 docs/.vitepress/theme/custom.css              |  3 +
 docs/.vitepress/theme/index.ts                |  1 +
 docs/components/contents.vue                  | 47 ++++++++++++
 .../database/mysql/install-on-ubuntu.md       |  3 +
 .../database/mysql/install-on-windows.md      |  3 +
 docs/how-to/index.md                          | 10 +++
 docs/index.md                                 |  3 +
 docs/nav.mts                                  | 15 +++-
 docs/sidebar.mts                              | 75 +++++++++++++++++--
 10 files changed, 159 insertions(+), 11 deletions(-)
 create mode 100644 docs/.vitepress/theme/custom.css
 create mode 100644 docs/components/contents.vue
 create mode 100644 docs/how-to/database/mysql/install-on-ubuntu.md
 create mode 100644 docs/how-to/database/mysql/install-on-windows.md
 create mode 100644 docs/how-to/index.md

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index e8ce54d..8ad73b7 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -23,6 +23,14 @@ export default defineConfig({
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ]
+    ],
+
+    search: {
+      provider: 'local'
+    },
+
+    lastUpdated: {
+      text: '最近更新',
+    },
   }
 })
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
new file mode 100644
index 0000000..b69468b
--- /dev/null
+++ b/docs/.vitepress/theme/custom.css
@@ -0,0 +1,3 @@
+:root {
+  --vp-sidebar-width: 320px;
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index def4cfc..01b88b6 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import './custom.css'
 
 export default {
   extends: DefaultTheme,
diff --git a/docs/components/contents.vue b/docs/components/contents.vue
new file mode 100644
index 0000000..9194fa9
--- /dev/null
+++ b/docs/components/contents.vue
@@ -0,0 +1,47 @@
+<template>
+    <!-- ------------------- -->
+    <!--
+    <br>
+    props.base: {{ props.base }}
+    <br>
+    props.sidebarItem.base: {{ props.sidebarItem.base }}
+    <br>
+-->
+    <p v-if="props.sidebarItem.text">
+        <a v-if="props.sidebarItem.link" @click="goTo(props.sidebarItem.link)" style="cursor: pointer;">
+            {{ props.sidebarItem.text }}
+        </a>
+        <span style="font-weight: bold;" v-else>
+            {{ props.sidebarItem.text }}
+        </span>
+    </p>
+    <!-- ------------------- -->
+
+    <!-- <pre>{{ page }}</pre> -->
+
+    <div v-if="props.sidebarItem.items" :style="props.sidebarItem.text ? 'margin-left: 25px;' : undefined">
+        <contents v-for="item in props.sidebarItem.items" :base="props.sidebarItem.base || props.base"
+            :sidebar-item="item" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useData, useRouter, DefaultTheme } from 'vitepress';
+
+const props = defineProps<{
+    base?: string,
+    sidebarItem: DefaultTheme.SidebarItem
+}>()
+
+const { page } = useData()
+
+const router = useRouter()
+
+function goTo(link: string) {
+    const target = (props.base || '') + link?.replace('.md', '.html')
+    console.log('base', props.base)
+    console.log('link', link)
+    console.log('target', target)
+    router.go(target)
+}
+</script>
\ No newline at end of file
diff --git a/docs/how-to/database/mysql/install-on-ubuntu.md b/docs/how-to/database/mysql/install-on-ubuntu.md
new file mode 100644
index 0000000..05daa0c
--- /dev/null
+++ b/docs/how-to/database/mysql/install-on-ubuntu.md
@@ -0,0 +1,3 @@
+# MySQL 8.x 数据库安装配置 (Ubuntu 系统)
+
+待完善
diff --git a/docs/how-to/database/mysql/install-on-windows.md b/docs/how-to/database/mysql/install-on-windows.md
new file mode 100644
index 0000000..15958bc
--- /dev/null
+++ b/docs/how-to/database/mysql/install-on-windows.md
@@ -0,0 +1,3 @@
+# MySQL 8.x 数据库安装配置 (Windows 系统)
+
+待完善
diff --git a/docs/how-to/index.md b/docs/how-to/index.md
new file mode 100644
index 0000000..699e696
--- /dev/null
+++ b/docs/how-to/index.md
@@ -0,0 +1,10 @@
+# How to ... ? 如何做系列教程
+
+请在左侧选择教程。
+
+<contents :sidebar-item="sidebar['/how-to/']" />
+
+<script setup>
+import contents from '/components/contents.vue'
+import { sidebar } from '/sidebar.mts';
+</script>
diff --git a/docs/index.md b/docs/index.md
index 2fd6189..67d4955 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -12,6 +12,9 @@ hero:
   tagline: My great project tagline
   actions:
     - theme: brand
+      text: 进入教程
+      link: /how-to
+    - theme: alt
       text: Markdown Examples
       link: /markdown-examples
     - theme: alt
diff --git a/docs/nav.mts b/docs/nav.mts
index f75a75c..644f5f5 100644
--- a/docs/nav.mts
+++ b/docs/nav.mts
@@ -1,6 +1,17 @@
 import { DefaultTheme } from 'vitepress'
 
 export const nav: DefaultTheme.NavItem[] = [
-    { text: 'Home', link: '/' },
-    { text: 'Examples', link: '/markdown-examples' }
+    {
+        text: 'Home',
+        link: '/',
+    },
+    {
+        text: 'Home2',
+        link: '/how-to/index',
+        activeMatch: '/how-to/',
+    },
+    {
+        text: 'Examples',
+        link: '/markdown-examples',
+    },
 ]
\ No newline at end of file
diff --git a/docs/sidebar.mts b/docs/sidebar.mts
index 5d58af3..8db9f63 100644
--- a/docs/sidebar.mts
+++ b/docs/sidebar.mts
@@ -1,11 +1,70 @@
 import { DefaultTheme } from 'vitepress'
 
-export const sidebar: DefaultTheme.Sidebar = [
-    {
-        text: 'Examples',
-        items: [
-            { text: 'Markdown Examples', link: '/markdown-examples' },
-            { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
+const serialNumberMap = {}
+
+function serial(key) {
+    if (!serialNumberMap[key]) {
+        serialNumberMap[key] = 0
     }
-]
\ No newline at end of file
+    const serialNumber = ++serialNumberMap[key] // `${++serialNumberMap[key]}. `
+    // return
+    if (!key.includes('.')) {
+        return `🌟 `
+    }
+    return `✨ `
+}
+
+export const sidebar: DefaultTheme.Sidebar = {
+    '/how-to/': {
+        base: '/how-to/',
+        items: [
+            {
+                text: '开始',
+                items: [
+                    {
+                        text: '教程简介',
+                        link: '/index.md',
+                    },
+                ]
+            },
+            {
+                text: 'Linux 系统如何 ... ?',
+                items: [
+                    {
+                        text: `${serial('linux')}安装数据库`,
+                        items: [
+                            {
+                                text: `${serial('linux.db')}MySQL 8.x 安装 & 配置 (Ubuntu)`,
+                                link: 'database/mysql/install-on-ubuntu.md',
+                            }
+                        ]
+                    },
+                ]
+            },
+            {
+                text: 'Windows 系统如何 ... ?',
+                items: [
+                    {
+                        text: `${serial('win')}安装数据库`,
+                        items: [
+                            {
+                                text: `${serial('win.db')}MySQL 8.x 安装 & 配置`,
+                                link: 'database/mysql/install-on-windows.md',
+                            }
+                        ]
+                    },
+                ]
+            },
+        ]
+    },
+    '/': [
+
+        {
+            text: 'Examples',
+            items: [
+                { text: 'Markdown Examples', link: '/markdown-examples' },
+                { text: 'Runtime API Examples', link: '/api-examples' }
+            ]
+        }
+    ]
+}
\ No newline at end of file