feature: 文档引入

docs/.vitepress/config.ts

@@ -1,24 +1,9 @@
 import type { UserConfig } from 'vitepress';
 
 import { mdPlugin } from './config/plugins';
+import { sidebar } from './config/pageRoute';
 
-function getDemoSidebar() {
-  return [
-    {
-      text: '组件',
-      items: [
-        {
-          text: 'buttom',
-          link: '/components/button',
-        },
-        {
-          text: 'admin',
-          link: '/components/admin',
-        },
-      ],
-    },
-  ];
-}
+import nav from './router/nav.json';
 
 const config: UserConfig = {
   lang: 'zh-CN',
@@ -34,32 +19,13 @@ const config: UserConfig = {
         faeFilters: ['tags:guide,api'],
       },
     },
-    nav: [
-      {
-        text: '首页',
-        link: '/',
-      },
-      {
-        text: '组件',
-        link: '/components/button',
-        activeMatch: '/components/',
-      },
-      {
-        text: 'GitHub',
-        link: 'https://github.com/SuperCuteXiaoSi/xiaosiCommitLib',
-      },
-    ],
+    // 顶部标题栏
+    nav,
     // 侧边栏
-    sidebar: {
-      '/components/': getDemoSidebar(),
-    },
+    sidebar,
   },
   markdown: {
     config: (md: markdownit) => mdPlugin(md),
-    // config: (md) => {
-    // 	// const { demoBlockPlugin } = require('vitepress-theme-demoblock')
-    // 	// md.use(demoBlockPlugin)
-    // },
   },
 };
 

docs/.vitepress/config/pageRoute.ts

@@ -0,0 +1,47 @@
+import glob from 'fast-glob';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+type Item = {
+  text: string;
+  items?: Item[];
+  link?: string;
+};
+
+const handleSidebars = () => {
+  const file = glob.sync('*.json', {
+    cwd: resolve(__dirname, '..', 'router', 'pages'),
+    absolute: true,
+    objectMode: true,
+  });
+
+  let sidebars = {};
+
+  file.forEach((i) => {
+    const content = JSON.parse(readFileSync(i.path, 'utf-8'));
+    const newContent = Object.fromEntries(
+      Object.keys(content).map((i) => {
+        return [i, content[i].map((item: Item) => handlePrefix(item, i))];
+      }),
+    );
+    sidebars = Object.assign(sidebars, newContent);
+  });
+
+  return sidebars;
+};
+
+const handlePrefix = (item: Item, key: string) => {
+  if (item.items && item.items.length > 0) {
+    return {
+      ...item,
+      items: item.items.map((child) => handlePrefix(child, key)),
+    };
+  }
+
+  return {
+    ...item,
+    link: `${key}${item.link}`,
+  };
+};
+
+export const sidebar = handleSidebars();

docs/.vitepress/router/nav.json

@@ -0,0 +1,20 @@
+[
+  {
+    "text": "首页",
+    "link": "/"
+  },
+  {
+    "text": "指南",
+    "link": "/guide/getting-started",
+    "activeMatch": "/guide/"
+  },
+  {
+    "text": "组件",
+    "link": "/components/button",
+    "activeMatch": "/components/"
+  },
+  {
+    "text": "GitHub",
+    "link": "https://github.com/SuperCuteXiaoSi/xiaosiCommitLib"
+  }
+]

docs/.vitepress/router/pages/components.json

@@ -0,0 +1,13 @@
+{
+  "/components/": [
+    {
+      "text": "组件",
+      "items": [
+        {
+          "text": "Button",
+          "link": "button"
+        }
+      ]
+    }
+  ]
+}

docs/.vitepress/router/pages/guide.json

@@ -0,0 +1,18 @@
+{
+  "/guide/": [
+    {
+      "text": "入门",
+      "collapsible": true,
+      "items": [
+        {
+          "text": "介绍",
+          "link": "introduce"
+        },
+        {
+          "text": "开始",
+          "link": "getting-started"
+        }
+      ]
+    }
+  ]
+}

docs/.vitepress/styles/app.scss

@@ -1,2 +1,3 @@
+@use './vars.css';
 @use './code';
 @use './transition';

docs/.vitepress/styles/code.scss

@@ -41,7 +41,3 @@ html.dark {
 code {
   color: var(--vp-c-text-1) !important;
 }
-
-div[class*='language-'] {
-  background-color: var(--code-bg-color) !important;
-}

docs/.vitepress/theme/index.ts

@@ -1,9 +1,8 @@
 import DefaultTheme from 'vitepress/theme';
 import type { Theme } from 'vitepress';
 
-import Demo from '~/components/v-demo.vue';
-import '~/styles/vars.css';
-import '~/styles/app.scss';
+import Demo from '../components/v-demo.vue';
+import '../styles/app.scss';
 
 import xsComponents from '@xs-components/index';
 import '@xs-components/theme-default/index.scss';

docs/components/button.md

@@ -7,3 +7,11 @@
 button/basic
 
 :::
+
+
+```vue
+<template>
+  <IButton>超级简单的按钮实例</IButton>
+</template>
+
+```

docs/guide/getting-started.md

@@ -0,0 +1,46 @@
+# 开始
+
+## 开发环境
+
+首先得有 node，并确保 node 版本是 v16 或以上。
+
+``` sh
+node -v
+# v16+
+```
+
+## 代码拉取
+``` sh
+# （https or ssh）
+git clone https://github.com/jsxiaosi/xiaosiCommitLib.git
+
+git clone git@github.com:jsxiaosi/xiaosiCommitLib.git
+```
+
+## 使用
+- 安装依赖
+``` sh
+npm install
+```
+
+### Develop
+- 运行文档
+``` sh
+npm run docs:dev
+```
+
+- 运行组件开发调试模板
+``` sh
+npm run dev
+```
+
+### Production
+- 文档
+``` sh
+npm run docs:build
+```
+
+- 组件打包
+``` sh
+npm run build
+```

docs/guide/introduce.md

@@ -0,0 +1,16 @@
+# 介绍
+
+xs-components是一款为组件开发场景而生的模板，使用了最新的`Vue3` `Vite` `TypeScript` `Rollup`等主流技术开发，开箱即用的组件开发解决方案，也可用于学习参考。
+
+## 特性
+  - 📦 开箱即用 内置打包组件、Hooks、Utils，可按需引入，支持TypeScript，让所有注意力都能放在文档编写和组件开发上
+  - ⚡️ VitePress主题 内置VitePress主题，免去写样式的烦恼，自带夜间模式，可自定义主题，你的风格由你自己定义
+  - 🛠️ 代码块 内置代码块解析器，参考ElementPush文档实现代码块解析器，示例和文档内容分离，让你的文档结构更加整洁
+
+## 知识库
+
+开始前你需要了解：
+  - Vue3
+  - Vite
+  - VitePress
+  - Rollup

docs/index.md

@@ -13,14 +13,11 @@ hero:
     alt: Vite
   actions:
     - theme: brand
-      text: 组件
-      link: /guide/
-    - theme: alt
-      text: hooks
-      link: /hooks/
+      text: 开始使用
+      link: /guide/getting-started
     - theme: alt
-      text: utils
-      link: /utils/
+      text: 组件
+      link: /components/button
     - theme: alt
       text: View on GitHub
       link: https://github.com/vitejs/vite
@@ -34,6 +31,6 @@ features:
     details: 内置VitePress主题，免去写样式的烦恼，自带夜间模式，可自定义主题，你的风格由你自己定义
   - icon: 🛠️
     title: 代码块
-    details: 内置代码块解析器，参考element-pushw文档实现代码块解析器，示例和文档内容分离，让你的文档结构更加整洁
+    details: 内置代码块解析器，参考element-push文档实现代码块解析器，示例和文档内容分离，让你的文档结构更加整洁
 ---
 

docs/tsconfig.json

@@ -11,12 +11,14 @@
     "strict": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
-    "types": ["unplugin-vue-define-options/vite"],
-    "typeRoots": ["../typings/vue-shim"],
+    "types": ["unplugin-vue-define-options/vite", "vite/client"],
+    "typeRoots": ["./node_modules", "../typings/vue-shim.d.ts"],
+    "lib": ["esnext", "dom"],
     "paths": {
       "@xs-components/*": ["../packages/"],
-      "~/*": ["./.vitepress/"]
+      "@/*": ["./.vitepress/"]
     }
   },
-  "include": ["**/*", ".vitepress/**/*", "../build/paths/index.ts"]
+  "include": ["**/*", ".vitepress/**/*", "../build/paths/index.ts"],
+  "exclude": ["node_modules", "dist", "**/*.js"]
 }

docs/vite.config.ts

@@ -2,10 +2,8 @@ import path from 'path';
 import type { UserConfig } from 'vite';
 import Inspect from 'vite-plugin-inspect';
 import DefineOptions from 'unplugin-vue-define-options/vite';
-import { projRoot } from '../build/utils/paths';
 import { MarkdownTransform } from './.vitepress/plugins/markdown-transform';
 
-console.log(projRoot);
 export default (): UserConfig => {
   return {
     resolve: {

package.json

@@ -116,6 +116,7 @@
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "prism-theme-vars": "^0.2.4",
+    "shiki": "^0.11.1",
     "vue": "^3.2.37"
   },
   "config": {