20261007220117

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

@@ -0,0 +1,68 @@
+---
+title: 快速开始
+description: 安装组件库并在项目中用起来
+---
+
+# 快速开始
+
+## 安装
+
+```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: #1677ff;
+  --g3-radius: 6px;
+}
+```
+
+暗色主题由 `html[data-g3-theme='dark']` 触发：
+
+```ts
+document.documentElement.dataset.g3Theme = 'dark'
+```
+
+## 下一步
+
+- 浏览[组件参考](/reference/ui/button)
+- 了解[设计变量](/explain/why-tokens)的设计取舍

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

@@ -0,0 +1,89 @@
+---
+seo:
+  title: G3Soft 前端技术文档
+  description: G3Soft 自研 Vue 3 组件库、设计变量与前端工程规范。
+---
+
+:::u-page-hero
+#title
+自研组件，一套规范
+
+#description
+G3Soft 前端技术文档站：组件库 API、设计变量、工程规范与设计决策，全部集中在这里。
+
+#links
+:::u-button
+---
+color: primary
+size: xl
+to: /guide/getting-started
+trailing-icon: i-lucide-arrow-right
+---
+快速开始
+:::
+
+:::u-button
+---
+color: neutral
+variant: outline
+size: xl
+icon: i-lucide-book-open
+to: /reference/ui/button
+---
+浏览组件
+:::
+:::
+
+:::u-page-section
+#title
+四个内容域
+
+#features
+:::u-page-feature
+---
+icon: i-lucide-rocket
+to: /guide/getting-started
+---
+#title
+指南
+
+#description
+从安装到上手，以及版本升级与迁移说明。
+:::
+
+:::u-page-feature
+---
+icon: i-lucide-component
+to: /reference/ui/button
+---
+#title
+参考
+
+#description
+组件库 API 自动生成，另有 Hooks 与后端接口文档。
+:::
+
+:::u-page-feature
+---
+icon: i-lucide-ruler
+to: /standard/code-style
+---
+#title
+规范
+
+#description
+代码风格、命名约定、Git 与发布流程等团队工程规范。
+:::
+
+:::u-page-feature
+---
+icon: i-lucide-lightbulb
+to: /explain/why-tokens
+---
+#title
+解释
+
+#description
+设计决策背后的取舍与常见问题解答。
+:::
+:::

code/g3soft-libs/docs/content/reference/ui/button.md

@@ -0,0 +1,42 @@
+---
+title: Button 按钮
+description: 常用的操作按钮，支持多种视觉类型与状态
+---
+
+# Button 按钮
+
+常用的操作按钮，支持 7 种视觉类型、3 种尺寸与加载、禁用等状态。
+
+## 基础用法
+
+::demo{name="button/basic"}
+::
+
+## 视觉类型
+
+语义化类型用于表达操作的风险等级。
+
+::demo{name="button/type"}
+::
+
+## 尺寸
+
+::demo{name="button/size"}
+::
+
+## 状态
+
+::demo{name="button/state"}
+::
+
+## 图标与撑满
+
+::demo{name="button/icon"}
+::
+
+::demo{name="button/block"}
+::
+
+## API
+
+<ApiTable name="button" />