update

astro.config.mjs

@@ -5,16 +5,15 @@ import sitemap from '@astrojs/sitemap';
 import pkgs from './package.json';
 import tailwindcss from '@tailwindcss/vite';
 import dotenv from 'dotenv';
+// import vue from '@astrojs/vue';
 
 dotenv.config();
 const isDev = process.env.NODE_ENV === 'development';
 
-let target = process.env.VITE_API_URL || 'http://localhost:51015';
+let target = process.env.VITE_API_URL || 'http://localhost:51515';
 const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
 let proxy = {
-  '/root/': {
+  '/root/': apiProxy,
-    target: `${target}/root/`,
-  },
   '/api': apiProxy,
   '/client': apiProxy,
 };
@@ -25,18 +24,20 @@ export default defineConfig({
   integrations: [
     mdx(),
     react(), //
+    // vue(),
     // sitemap(), // sitemap must be site has a domain
   ],
-  
+  server: {
+    port: 7008,
+    host: '0.0.0.0',
+    allowedHosts: true,
+  },
   vite: {
     plugins: [tailwindcss()],
     define: {
       BASE_NAME: JSON.stringify(basename || ''),
     },
     server: {
-      port: 7008,
-      host: '0.0.0.0',
-      allowedHosts: true,
       proxy,
     },
   },

kevisual.json

@@ -0,0 +1,21 @@
+{
+  "metadata": {
+    "name": "kevisual",
+    "share": "public"
+  },
+  "registry": "https://kevisual.cn/root/ai/kevisual/frontend/simple-astro-template",
+  "clone": {
+    ".": {
+      "enabled": true
+    }
+  },
+  "syncd": [
+    {
+      "files": [
+        "**/*"
+      ],
+      "registry": ""
+    }
+  ],
+  "sync": {}
+}

package.json

@@ -1,14 +1,17 @@
 {
   "name": "@kevisual/astro-simplate-template",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
-  "basename": "/root/astro-simplate-template",
+  "basename": "/root/astro-simplate-template-docs",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "pub": "envision deploy ./dist -k astro-simplate-template -v 0.0.1 -u",
+    "pub": "envision deploy ./dist -k astro-simplate-template-docs -v 0.0.2 -u",
+    "slide:dev": "slidev --open slides/index.md",
+    "slide:build": "slidev build slides/index.md --base /root/astro-simplate-template-slide/",
+    "slide:pub": "envision deploy ./slides/dist -k astro-simplate-template-slide -v 0.0.2 -u",
     "ui": "pnpm dlx shadcn@latest add "
   },
   "keywords": [],
@@ -16,32 +19,35 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "@astrojs/mdx": "^4.3.12",
+    "@astrojs/mdx": "^4.3.13",
     "@astrojs/react": "^4.4.2",
     "@astrojs/sitemap": "^3.6.0",
-    "@kevisual/query": "^0.0.29",
+    "@astrojs/vue": "^5.1.3",
+    "@kevisual/context": "^0.0.4",
+    "@kevisual/query": "^0.0.35",
     "@kevisual/query-login": "^0.0.7",
     "@kevisual/registry": "^0.0.1",
     "@radix-ui/react-slot": "^1.2.4",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.18",
-    "@uiw/react-md-editor": "^4.0.8",
+    "@uiw/react-md-editor": "^4.0.11",
-    "antd": "^6.0.0",
+    "antd": "^6.1.3",
-    "astro": "^5.16.0",
+    "astro": "^5.16.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
-    "es-toolkit": "^1.42.0",
+    "es-toolkit": "^1.43.0",
     "github-markdown-css": "^5.8.1",
     "highlight.js": "^11.11.1",
-    "lucide-react": "^0.554.0",
+    "lucide-react": "^0.562.0",
     "marked": "^17.0.1",
     "marked-highlight": "^2.2.3",
     "nanoid": "^5.1.6",
-    "react": "^19.2.0",
+    "react": "^19.2.3",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.3",
     "react-toastify": "^11.0.5",
     "tailwind-merge": "^3.4.0",
-    "zustand": "^5.0.8"
+    "vue": "^3.5.26",
+    "zustand": "^5.0.9"
   },
   "publishConfig": {
     "access": "public"
@@ -51,10 +57,10 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "dotenv": "^17.2.3",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0"
   },
-  "packageManager": "pnpm@10.23.0",
+  "packageManager": "pnpm@10.27.0",
   "onlyBuiltDependencies": [
     "@tailwindcss/oxide",
     "esbuild",

readme.md

@@ -0,0 +1,17 @@
+# template
+
+在开发多项目的时候，实时创建的新的模块，界面，git 已经满足不了正常开发需求，文件随时更新。以最新为标准，进行同步和开发。
+
+## 使用方法
+
+### simple-lit-vite
+
+```sh
+ev sync clone -i https://kevisual.cn/root/ai/kevisual/frontend/simple-astro-template/kevisual.json
+```
+
+### simple-slide
+
+```sh
+ev sync clone -i https://kevisual.cn/root/ai/kevisual/frontend/simple-astro-template/kevisual.json
+```

slides/components/Counter.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div class="flex w-min border border-main rounded-md">
+    <button
+      class="border-r border-main p-2 font-mono outline-none hover:bg-gray-400 hover:bg-opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span class="m-auto p-2">{{ counter }}</span>
+    <button
+      class="border-l border-main p-2 font-mono outline-none hover:bg-gray-400 hover:bg-opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>

slides/demos/contents.md

@@ -0,0 +1,611 @@
+# Welcome to Slidev
+
+Presentation slides for developers
+
+<div @click="$slidev.nav.next" class="mt-12 py-1" hover:bg="white op-10">
+  Press Space for next page <carbon:arrow-right />
+</div>
+
+<div class="abs-br m-6 text-xl">
+  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="slidev-icon-btn">
+    <carbon:edit />
+  </button>
+  <a href="https://github.com/slidevjs/slidev" target="_blank" class="slidev-icon-btn">
+    <carbon:logo-github />
+  </a>
+</div>
+
+<!--
+The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
+-->
+
+---
+transition: fade-out
+---
+
+# What is Slidev?
+
+Slidev is a slides maker and presenter designed for developers, consist of the following features
+
+- 📝 **Text-based** - focus on the content with Markdown, and then style them later
+- 🎨 **Themable** - themes can be shared and re-used as npm packages
+- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
+- 🤹 **Interactive** - embed Vue components to enhance your expressions
+- 🎥 **Recording** - built-in recording and camera view
+- 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA
+- 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev
+<br>
+<br>
+
+Read more about [Why Slidev?](https://sli.dev/guide/why)
+
+<!--
+You can have `style` tag in markdown to override the style for the current page.
+Learn more: https://sli.dev/features/slide-scope-style
+-->
+
+<style>
+h1 {
+  background-color: #2B90B6;
+  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+}
+</style>
+
+<!--
+Here is another comment.
+-->
+
+---
+transition: slide-up
+level: 2
+---
+
+# Navigation
+
+Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/ui#navigation-bar)
+
+## Keyboard Shortcuts
+
+|                                                     |                             |
+| --------------------------------------------------- | --------------------------- |
+| <kbd>right</kbd> / <kbd>space</kbd>                 | next animation or slide     |
+| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
+| <kbd>up</kbd>                                       | previous slide              |
+| <kbd>down</kbd>                                     | next slide                  |
+
+<!-- https://sli.dev/guide/animations.html#click-animation -->
+<img
+  v-click
+  class="absolute -bottom-9 -left-7 w-80 opacity-50"
+  src="https://sli.dev/assets/arrow-bottom-left.svg"
+  alt=""
+/>
+<p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
+
+---
+layout: two-cols
+layoutClass: gap-16
+---
+
+# Table of contents
+
+You can use the `Toc` component to generate a table of contents for your slides:
+
+```html
+<Toc minDepth="1" maxDepth="1" />
+```
+
+The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter.
+
+::right::
+
+<Toc text-sm minDepth="1" maxDepth="2" />
+
+---
+layout: image-right
+image: https://cover.sli.dev
+---
+
+# Code
+
+Use code snippets and get the highlighting directly, and even types hover!
+
+```ts [filename-example.ts] {all|4|6|6-7|9|all} twoslash
+// TwoSlash enables TypeScript hover information
+// and errors in markdown code blocks
+// More at https://shiki.style/packages/twoslash
+import { computed, ref } from 'vue'
+
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+doubled.value = 2
+```
+
+<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="342" color="#953" width="2" arrowSize="1" />
+
+<!-- This allow you to embed external code blocks -->
+<!-- <<< @/snippets/external.ts#snippet -->
+
+<!-- Footer -->
+
+[Learn more](https://sli.dev/features/line-highlighting)
+
+<!-- Inline style -->
+<style>
+.footnotes-sep {
+  @apply mt-5 opacity-10;
+}
+.footnotes {
+  @apply text-sm opacity-75;
+}
+.footnote-backref {
+  display: none;
+}
+</style>
+
+<!--
+Notes can also sync with clicks
+
+[click] This will be highlighted after the first click
+
+[click] Highlighted with `count = ref(0)`
+
+[click:3] Last click (skip two clicks)
+-->
+
+---
+level: 2
+---
+
+# Shiki Magic Move
+
+Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets.
+
+Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example:
+
+````md magic-move {lines: true}
+```ts {*|2|*}
+// step 1
+const author = reactive({
+  name: 'John Doe',
+  books: [
+    'Vue 2 - Advanced Guide',
+    'Vue 3 - Basic Guide',
+    'Vue 4 - The Mystery'
+  ]
+})
+```
+
+```ts {*|1-2|3-4|3-4,8}
+// step 2
+export default {
+  data() {
+    return {
+      author: {
+        name: 'John Doe',
+        books: [
+          'Vue 2 - Advanced Guide',
+          'Vue 3 - Basic Guide',
+          'Vue 4 - The Mystery'
+        ]
+      }
+    }
+  }
+}
+```
+
+```ts
+// step 3
+export default {
+  data: () => ({
+    author: {
+      name: 'John Doe',
+      books: [
+        'Vue 2 - Advanced Guide',
+        'Vue 3 - Basic Guide',
+        'Vue 4 - The Mystery'
+      ]
+    }
+  })
+}
+```
+
+Non-code blocks are ignored.
+
+```vue
+<!-- step 4 -->
+<script setup>
+const author = {
+  name: 'John Doe',
+  books: [
+    'Vue 2 - Advanced Guide',
+    'Vue 3 - Basic Guide',
+    'Vue 4 - The Mystery'
+  ]
+}
+</script>
+```
+````
+
+---
+
+# Components
+
+<div grid="~ cols-2 gap-4">
+<div>
+
+You can use Vue components directly inside your slides.
+
+We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
+
+```html
+<Counter :count="10" />
+```
+
+<!-- ../components/Counter.vue -->
+<Counter :count="10" m="t-4" />
+
+Check out [the guides](https://sli.dev/builtin/components.html) for more.
+
+</div>
+<div>
+
+```html
+<Tweet id="1390115482657726468" />
+```
+
+<Tweet id="1390115482657726468" scale="0.65" />
+
+</div>
+</div>
+
+<!--
+Presenter note with **bold**, *italic*, and ~~striked~~ text.
+
+Also, HTML elements are valid:
+<div class="flex w-full">
+  <span style="flex-grow: 1;">Left content</span>
+  <span>Right content</span>
+</div>
+-->
+
+---
+class: px-20
+---
+
+# Themes
+
+Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
+
+<div grid="~ cols-2 gap-2" m="t-2">
+
+```yaml
+---
+theme: default
+---
+```
+
+```yaml
+---
+theme: seriph
+---
+```
+
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
+
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
+
+</div>
+
+Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
+check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
+
+---
+
+# Clicks Animations
+
+You can add `v-click` to elements to add a click animation.
+
+<div v-click>
+
+This shows up when you click the slide:
+
+```html
+<div v-click>This shows up when you click the slide.</div>
+```
+
+</div>
+
+<br>
+
+<v-click>
+
+The <span v-mark.red="3"><code>v-mark</code> directive</span>
+also allows you to add
+<span v-mark.circle.orange="4">inline marks</span>
+, powered by [Rough Notation](https://roughnotation.com/):
+
+```html
+<span v-mark.underline.orange>inline markers</span>
+```
+
+</v-click>
+
+<div mt-20 v-click>
+
+[Learn more](https://sli.dev/guide/animations#click-animation)
+
+</div>
+
+---
+
+# Motions
+
+Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive.
+
+```html
+<div
+  v-motion
+  :initial="{ x: -80 }"
+  :enter="{ x: 0 }"
+  :click-3="{ x: 80 }"
+  :leave="{ x: 1000 }"
+>
+  Slidev
+</div>
+```
+
+<div class="w-60 relative">
+  <div class="relative w-40 h-40">
+    <img
+      v-motion
+      :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
+      :enter="final"
+      class="absolute inset-0"
+      src="https://sli.dev/logo-square.png"
+      alt=""
+    />
+    <img
+      v-motion
+      :initial="{ y: 500, x: -100, scale: 2 }"
+      :enter="final"
+      class="absolute inset-0"
+      src="https://sli.dev/logo-circle.png"
+      alt=""
+    />
+    <img
+      v-motion
+      :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
+      :enter="final"
+      class="absolute inset-0"
+      src="https://sli.dev/logo-triangle.png"
+      alt=""
+    />
+  </div>
+
+  <div
+    class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
+    v-motion
+    :initial="{ x: -80, opacity: 0}"
+    :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
+    Slidev
+  </div>
+</div>
+
+<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
+<script setup lang="ts">
+const final = {
+  x: 0,
+  y: 0,
+  rotate: 0,
+  scale: 1,
+  transition: {
+    type: 'spring',
+    damping: 10,
+    stiffness: 20,
+    mass: 2
+  }
+}
+</script>
+
+<div
+  v-motion
+  :initial="{ x:35, y: 30, opacity: 0}"
+  :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
+
+[Learn more](https://sli.dev/guide/animations.html#motion)
+
+</div>
+
+---
+
+# LaTeX
+
+LaTeX is supported out-of-box. Powered by [KaTeX](https://katex.org/).
+
+<div h-3 />
+
+Inline $\sqrt{3x-1}+(1+x)^2$
+
+Block
+$$ {1|3|all}
+\begin{aligned}
+\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
+\nabla \cdot \vec{B} &= 0 \\
+\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
+\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
+\end{aligned}
+$$
+
+[Learn more](https://sli.dev/features/latex)
+
+---
+
+# Diagrams
+
+You can create diagrams / graphs from textual descriptions, directly in your Markdown.
+
+<div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
+
+```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
+sequenceDiagram
+    Alice->John: Hello John, how are you?
+    Note over Alice,John: A typical interaction
+```
+
+```mermaid {theme: 'neutral', scale: 0.8}
+graph TD
+B[Text] --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
+```mermaid
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+```
+
+```plantuml {scale: 0.7}
+@startuml
+
+package "Some Group" {
+  HTTP - [First Component]
+  [Another Component]
+}
+
+node "Other Groups" {
+  FTP - [Second Component]
+  [First Component] --> FTP
+}
+
+cloud {
+  [Example 1]
+}
+
+database "MySql" {
+  folder "This is my folder" {
+    [Folder 3]
+  }
+  frame "Foo" {
+    [Frame 4]
+  }
+}
+
+[Another Component] --> [Example 1]
+[Example 1] --> [Folder 3]
+[Folder 3] --> [Frame 4]
+
+@enduml
+```
+
+</div>
+
+Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml)
+
+---
+foo: bar
+dragPos:
+  square: 691,32,167,_,-16
+---
+
+# Draggable Elements
+
+Double-click on the draggable elements to edit their positions.
+
+<br>
+
+###### Directive Usage
+
+```md
+<img v-drag="'square'" src="https://sli.dev/logo.png">
+```
+
+<br>
+
+###### Component Usage
+
+```md
+<v-drag text-3xl>
+  <div class="i-carbon:arrow-up" />
+  Use the `v-drag` component to have a draggable container!
+</v-drag>
+```
+
+<v-drag pos="640,212,261,_,-15">
+  <div text-center text-3xl border border-main rounded>
+    Double-click me!
+  </div>
+</v-drag>
+
+<img v-drag="'square'" src="https://sli.dev/logo.png">
+
+###### Draggable Arrow
+
+```md
+<v-drag-arrow two-way />
+```
+
+<v-drag-arrow pos="360,319,253,46" two-way op70 />
+
+---
+src: ./pages/imported-slides.md
+hide: false
+---
+
+---
+
+# Monaco Editor
+
+Slidev provides built-in Monaco Editor support.
+
+Add `{monaco}` to the code block to turn it into an editor:
+
+```ts {monaco}
+import { ref } from 'vue'
+import { emptyArray } from './external'
+
+const arr = ref(emptyArray(10))
+```
+
+Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
+
+```ts {monaco-run}
+import { version } from 'vue'
+import { emptyArray, sayHello } from './external'
+
+sayHello()
+console.log(`vue ${version}`)
+console.log(emptyArray<number>(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1]))
+```
+
+---
+layout: center
+class: text-center
+---
+
+# Learn More
+
+[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases)
+
+<PoweredBySlidev mt-10 />

slides/index.md

@@ -0,0 +1,28 @@
+---
+theme: default
+# random image from a curated Unsplash collection by Anthony
+background: https://cover.sli.dev
+# 介绍文档： https://sli.dev
+title: Welcome to Slidev
+info: |
+  ## 关于Slidev的介绍
+  演示稿
+class: text-center
+# https://sli.dev/features/drawing
+drawings:
+  persist: false
+# slide transition: https://sli.dev/guide/animations.html#slide-transitions
+transition: slide-left
+# enable MDC Syntax: https://sli.dev/features/mdc
+mdc: true
+htmlAttrs:
+  dir: ltr
+  lang: zh-CN
+# duration of the presentation
+duration: 35min
+---
+# slide 是一个 所见即所得的幻灯片制作工具
+---
+src: ./demos/contents.md
+hide: false
+---

slides/pages/contents.md

@@ -0,0 +1,10 @@
+---
+title: '例子'
+---
+
+# 常用语法结构
+
+---
+---
+
+# 第二个

src/components/vue/Counter.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div class="flex w-min border border-main rounded-md">
+    <button
+      class="border-r border-main p-2 font-mono outline-none hover:bg-gray-400 hover:bg-opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span class="m-auto p-2">{{ counter }}</span>
+    <button
+      class="border-l border-main p-2 font-mono outline-none hover:bg-gray-400 hover:bg-opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>

src/data/docs/simpalte-template.md

@@ -1,10 +1,10 @@
 ---
-title: 'astro 例子'
+title: '想要模板做什么'
 tags: ['astro', 'simple', 'template']
 createdAt: '2025-11-25 20:00:00'
 hideInMenu: true
 ---
 
-## astro-simplate-template
+## 模板介绍
 
-astro 是一个非常好的
+合并文档内容和开发项目的模块

src/layouts/MDXPost.astro

@@ -0,0 +1,24 @@
+---
+import '../styles/global.css';
+export interface Props {
+	title?: string;
+	description?: string;
+}
+import 'github-markdown-css/github-markdown-light.css';
+import 'highlight.js/styles/github-dark.css';
+const { title, description } = Astro.props;
+---
+
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>{title || '文档'}</title>
+  </head>
+  <body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+      <article class="markdown-body bg-white rounded-lg shadow-lg p-8">
+        <slot />
+      </article>
+    </div>
+  </body>
+</html>

src/layouts/docs/pagination.astro

@@ -0,0 +1,4 @@
+---
+---
+
+分页组件

src/modules/basename.ts

@@ -4,8 +4,9 @@ export const basename = BASE_NAME;
 console.log(basename);
 
 export const wrapBasename = (path: string) => {
+  const hasEnd = path.endsWith('/')
   if (basename) {
-    return `${basename}${path}/`;
+    return `${basename}${path}` + (hasEnd ? '' : '/');
   } else {
     return path;
   }

src/pages/demos/vue.astro

@@ -0,0 +1,10 @@
+---
+import Html from '@/components/html.astro';
+// import Counter from '@/components/vue/Counter.vue';
+---
+
+<Html>
+  <main>
+    <!-- <Counter count={10} client:only/> -->
+  </main>
+</Html>

src/pages/docs/[...id].astro

@@ -22,6 +22,6 @@ const staticPaths = await getStaticPaths();
 const menu = staticPaths.map((item) => item.data);
 ---
 
-<Main showMenu={showMenu} menu={menu} basename={basename}>
+<Main showMenu={showMenu} menu={menu} basename={basename} title={post.data.title}>
   <Content />
 </Main>

src/pages/docs/index.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 const posts = await getCollection('docs');
-import { basename } from '@/modules/basename';
+import { basename, wrapBasename } from '@/modules/basename';
 import Blank from '@/layouts/blank.astro';
 ---
 
@@ -10,10 +10,7 @@ import Blank from '@/layouts/blank.astro';
     <div class='max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
       {/* 页面标题区域 */}
       <div class='mb-12'>
-        <h1
+        <h1 class='text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4 bg-clip-text bg-linear-to-r from-blue-600 to-purple-600'>📚 文档列表</h1>
-          class='text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4 bg-clip-text bg-linear-to-r from-blue-600 to-purple-600'>
-          📚 文档列表
-        </h1>
         <p class='text-slate-600 dark:text-slate-400 text-lg'>浏览所有可用的文档资源</p>
         <div class='mt-4 h-1 w-20 bg-linear-to-r from-blue-600 to-purple-600 rounded-full'></div>
       </div>
@@ -23,11 +20,12 @@ import Blank from '@/layouts/blank.astro';
         {
           posts.map((post) => {
             const tags = post.data.tags || [];
+            const postUrl = wrapBasename(`/docs/${post.id}`);
             return (
               <article class='group bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-400'>
                 <div class='p-6'>
                   {/* 文档标题 */}
-                  <a href={`${basename}/docs/${post.id}/`} class='block'>
+                  <a href={postUrl} class='block'>
                     <h2 class='text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 mb-3'>
                       {post.data.title}
                     </h2>
@@ -50,7 +48,7 @@ import Blank from '@/layouts/blank.astro';
 
                   {/* 阅读更多指示器 */}
                   <a
-                    href={`${basename}/docs/${post.id}/`}
+                    href={postUrl}
                     class='mt-4 flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
                     <span>阅读更多</span>
                     <svg

tsconfig.json

@@ -5,10 +5,14 @@
     "paths": {
       "@/*": [
         "./src/*"
+      ],
+      "@/agent": [
+        "./src/agent"
       ]
     },
   },
   "include": [
     "src/**/*",
+    "agent/**/*"
   ],
 }