20261008173212

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)。