20261008173212

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

code/g3soft-libs/docs/content/ui/2.general/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" />