20261008173212

code/g3soft-libs/docs/content/api/.navigation.yml

@@ -0,0 +1,2 @@
+title: 接口文档
+icon: i-lucide-cable

code/g3soft-libs/docs/content/api/getting-started.md

@@ -0,0 +1,10 @@
+---
+title: 快速开始
+description: 前后端接口的接入说明
+---
+
+# 快速开始
+
+本页说明前后端接口的接入方式，内容包括接口约定、鉴权与联调步骤。
+
+> 内容待补充。

code/g3soft-libs/docs/content/guide/.navigation.yml

@@ -0,0 +1,2 @@
+title: 指南
+icon: i-lucide-rocket

code/g3soft-libs/docs/content/guide/getting-started.md

@@ -1,68 +1,22 @@
 ---
 title: 快速开始
-description: 安装组件库并在项目中用起来
+description: 认识 G3Soft 技术文档站，快速找到需要的内容
 ---
 
 # 快速开始
 
-## 安装
+G3Soft 技术文档站汇总前端基础设施的文档：自研 Vue 3 组件库、设计变量、前后端接口，以及工程规范与设计决策。
 
-```bash
-pnpm add @g3soft/ui @g3soft/tokens
-```
+这一页帮你先建立整体认知，再快速跳到对应板块。
 
-`vue` 由宿主项目提供（`peerDependencies`），请确保已安装 Vue 3。
+## 站点结构
 
-## 引入设计变量
+- **指南** —— 站点总览与工程规范，帮助你了解全局约定。
+- **UI 组件库** —— 自研 Vue 3 组件库的安装、使用与组件 API。
+- **接口文档** —— 前后端接口约定与联调说明。
 
-在应用入口引入一次，组件样式全部依赖这套变量：
+## 快速导航
 
-```ts
-// main.ts
-import '@g3soft/tokens'
-```
-
-## 使用组件
-
-按需引入：
-
-```vue
-<script setup lang="ts">
-import { G3Button } from '@g3soft/ui'
-</script>
-
-<template>
-  <G3Button type="primary" @click="handleClick">主要按钮</G3Button>
-</template>
-```
-
-或全量注册：
-
-```ts
-import { G3UI } from '@g3soft/ui'
-import { createApp } from 'vue'
-
-createApp(App).use(G3UI).mount('#app')
-```
-
-## 换肤
-
-组件的颜色与尺寸一律引用 `--g3-*` 变量，定制只需覆盖同名变量，不必改组件代码：
-
-```css
-:root {
-  --g3-color-primary: #1677ff;
-  --g3-radius: 6px;
-}
-```
-
-暗色主题由 `html[data-g3-theme='dark']` 触发：
-
-```ts
-document.documentElement.dataset.g3Theme = 'dark'
-```
-
-## 下一步
-
-- 浏览[组件参考](/reference/ui/button)
-- 了解[设计变量](/explain/why-tokens)的设计取舍
+- 想用组件库？从 [UI 组件库 · 快速上手](/ui/usage/getting-started) 开始。
+- 想看某个组件？见 [通用组件 · Button 按钮](/ui/general/button)。
+- 要对接接口？看 [接口文档 · 快速开始](/api/getting-started)。

code/g3soft-libs/docs/content/index.md

@@ -28,7 +28,7 @@ color: neutral
 variant: outline
 size: xl
 icon: i-lucide-book-open
-to: /reference/ui/button
+to: /ui/general/button
 ---
 浏览组件
 :::
@@ -48,13 +48,13 @@ to: /guide/getting-started
 指南
 
 #description
-从安装到上手，以及版本升级与迁移说明。
+文档站总览与快速导航，帮你先建立整体认知。
 :::
 
 :::u-page-feature
 ---
 icon: i-lucide-component
-to: /reference/ui/button
+to: /ui/general/button
 ---
 #title
 参考

code/g3soft-libs/docs/content/ui/.navigation.yml

@@ -0,0 +1,2 @@
+title: UI 组件库
+icon: i-lucide-component

code/g3soft-libs/docs/content/ui/1.usage/.navigation.yml

@@ -0,0 +1,2 @@
+title: 使用
+icon: i-lucide-book-open

code/g3soft-libs/docs/content/ui/1.usage/getting-started.md

@@ -0,0 +1,70 @@
+---
+title: 快速上手
+description: 安装、引入并在项目中使用 UI 组件库
+---
+
+# 快速上手
+
+本节介绍如何在项目中安装、引入并使用 UI 组件库。
+
+## 安装
+
+```bash
+pnpm add @g3soft/ui @g3soft/tokens
+```
+
+`vue` 由宿主项目提供（`peerDependencies`），请确保已安装 Vue 3。
+
+## 引入设计变量
+
+在应用入口引入一次，组件样式全部依赖这套变量：
+
+```ts
+// main.ts
+import '@g3soft/tokens'
+```
+
+## 使用组件
+
+按需引入：
+
+```vue
+<script setup lang="ts">
+import { G3Button } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Button type="primary" @click="handleClick">主要按钮</G3Button>
+</template>
+```
+
+或全量注册：
+
+```ts
+import { G3UI } from '@g3soft/ui'
+import { createApp } from 'vue'
+
+createApp(App).use(G3UI).mount('#app')
+```
+
+## 换肤
+
+组件的颜色与尺寸一律引用 `--g3-*` 变量，定制只需覆盖同名变量，不必改组件代码：
+
+```css
+:root {
+  --g3-color-primary: #18181b;
+  --g3-radius: 6px;
+}
+```
+
+暗色主题由 `html[data-g3-theme='dark']` 触发：
+
+```ts
+document.documentElement.dataset.g3Theme = 'dark'
+```
+
+## 下一步
+
+- 浏览[组件参考](/ui/general/button)
+- 了解[设计变量](/explain/why-tokens)的设计取舍

code/g3soft-libs/docs/content/ui/2.general/.navigation.yml

@@ -0,0 +1,2 @@
+title: 通用组件
+icon: i-lucide-boxes