-
撑满宽度
+
+
+ 占满整行
+ 占满整行（描边）
+
-
-
diff --git a/code/g3soft-libs/docs/examples/button/disabled.vue b/code/g3soft-libs/docs/examples/button/disabled.vue
new file mode 100644
index 00000000..51e8c690
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/button/disabled.vue
@@ -0,0 +1,14 @@
+
+
+
+
+ 主操作
+ 次要操作
+ 描边
+ 删除
+ 链接
+
+
diff --git a/code/g3soft-libs/docs/examples/button/event.vue b/code/g3soft-libs/docs/examples/button/event.vue
new file mode 100644
index 00000000..0678596d
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/button/event.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+ 点我（可按住 Ctrl）
+ 也是点我
+
+ 最近一次：{{ last }}
+
+
diff --git a/code/g3soft-libs/docs/examples/button/global-defaults.vue b/code/g3soft-libs/docs/examples/button/global-defaults.vue
new file mode 100644
index 00000000..c721d1f4
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/button/global-defaults.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ 默认变体
+
+
+
+
+
+ 继承全局默认
+ 显式 prop 优先
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/button/html-type.vue b/code/g3soft-libs/docs/examples/button/html-type.vue
new file mode 100644
index 00000000..e9f551f7
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/button/html-type.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+ 提交
+ 重置
+ 普通按钮
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/button/icon.vue b/code/g3soft-libs/docs/examples/button/icon.vue
index bdd036a9..dfe4226e 100644
--- a/code/g3soft-libs/docs/examples/button/icon.vue
+++ b/code/g3soft-libs/docs/examples/button/icon.vue
@@ -1,11 +1,27 @@
-
- +
- 新增
-
- 🔍
+
+
+
+ 新增
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/button/loading.vue b/code/g3soft-libs/docs/examples/button/loading.vue
new file mode 100644
index 00000000..bc6ef1d2
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/button/loading.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+ {{ submitting ? '提交中' : '提交' }}
+
+
+
+ 加载中
+ 加载中
+
+
diff --git a/code/g3soft-libs/docs/examples/button/size.vue b/code/g3soft-libs/docs/examples/button/size.vue
index ab356e50..48f15e03 100644
--- a/code/g3soft-libs/docs/examples/button/size.vue
+++ b/code/g3soft-libs/docs/examples/button/size.vue
@@ -1,9 +1,12 @@
- 小
- 中
- 大
+
+ 小号
+ 默认
+ 大号
+
diff --git a/code/g3soft-libs/docs/examples/button/state.vue b/code/g3soft-libs/docs/examples/button/state.vue
deleted file mode 100644
index 7f670dbe..00000000
--- a/code/g3soft-libs/docs/examples/button/state.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
- 点击加载
- 禁用
- 禁用（主要）
-
diff --git a/code/g3soft-libs/docs/examples/button/type.vue b/code/g3soft-libs/docs/examples/button/type.vue
deleted file mode 100644
index c707395b..00000000
--- a/code/g3soft-libs/docs/examples/button/type.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
- 成功按钮
- 警告按钮
- 危险按钮
- 文字按钮
- 链接按钮
-
diff --git a/code/g3soft-libs/docs/examples/button/variant.vue b/code/g3soft-libs/docs/examples/button/variant.vue
new file mode 100644
index 00000000..d7886e4b
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/button/variant.vue
@@ -0,0 +1,16 @@
+
+
+
+
+ 主操作
+ 次要操作
+ 描边
+ 低强调
+ 删除
+ 危险（描边）
+ 链接按钮
+
+
diff --git a/code/g3soft-libs/docs/examples/checkbox/basic.vue b/code/g3soft-libs/docs/examples/checkbox/basic.vue
new file mode 100644
index 00000000..ad995f31
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/checkbox/basic.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
我已阅读并同意服务条款
+
agreed = {{ agreed }}
+
diff --git a/code/g3soft-libs/docs/examples/checkbox/disabled.vue b/code/g3soft-libs/docs/examples/checkbox/disabled.vue
new file mode 100644
index 00000000..ab3f56b5
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/checkbox/disabled.vue
@@ -0,0 +1,12 @@
+
+
+
+
+ 未选中且禁用
+ 已选中且禁用
+ 半选且禁用
+
+
diff --git a/code/g3soft-libs/docs/examples/checkbox/indeterminate.vue b/code/g3soft-libs/docs/examples/checkbox/indeterminate.vue
new file mode 100644
index 00000000..0c7e03f4
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/checkbox/indeterminate.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ 全选（{{ checkedKeys.length }} / {{ options.length }}）
+
+
+
+
+
+ {{ option.label }}
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/checkbox/rich-label.vue b/code/g3soft-libs/docs/examples/checkbox/rich-label.vue
new file mode 100644
index 00000000..726c3306
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/checkbox/rich-label.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ 接收构建通知
+
+ 构建失败时通过邮件与站内信通知项目成员
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/date/date-basic.vue b/code/g3soft-libs/docs/examples/date/date-basic.vue
new file mode 100644
index 00000000..ada65e66
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/date/date-basic.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
绑定值：{{ date || '（空）' }}
+
diff --git a/code/g3soft-libs/docs/examples/date/date-disabled.vue b/code/g3soft-libs/docs/examples/date/date-disabled.vue
new file mode 100644
index 00000000..88f4ff03
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/date/date-disabled.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/date/date-format.vue b/code/g3soft-libs/docs/examples/date/date-format.vue
new file mode 100644
index 00000000..40429322
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/date/date-format.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/date/manual-input.vue b/code/g3soft-libs/docs/examples/date/manual-input.vue
new file mode 100644
index 00000000..68724045
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/date/manual-input.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ 支持的输入：2026-10-08、2026/10/08、2026年10月8日、
+ 2026-10-08 09:30。部分输入（如只写 2026-10）会被补全。
+
+
+
diff --git a/code/g3soft-libs/docs/examples/date/range-basic.vue b/code/g3soft-libs/docs/examples/date/range-basic.vue
new file mode 100644
index 00000000..2e58ceca
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/date/range-basic.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ 绑定值：{{ range[0] || '（空）' }} ~ {{ range[1] || '（空）' }}
+
+
change：{{ lastChange }}
+
diff --git a/code/g3soft-libs/docs/examples/date/time-select.vue b/code/g3soft-libs/docs/examples/date/time-select.vue
new file mode 100644
index 00000000..a234affd
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/date/time-select.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/drawer/basic.vue b/code/g3soft-libs/docs/examples/drawer/basic.vue
new file mode 100644
index 00000000..059c8a73
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/drawer/basic.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
打开抽屉
+
+
+ 抽屉内容区域可滚动，适合承载较长的表单或列表。
+ 拖动左边缘可以调整宽度。
+
+
diff --git a/code/g3soft-libs/docs/examples/drawer/footer.vue b/code/g3soft-libs/docs/examples/drawer/footer.vue
new file mode 100644
index 00000000..7f38f8ff
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/drawer/footer.vue
@@ -0,0 +1,32 @@
+
+
+
+
+ 带底部动作
+
+
+
+ 已选 2 个条件
+
+
+
+
+
+
+
+
+
+ 重置
+ 应用筛选
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/drawer/placement.vue b/code/g3soft-libs/docs/examples/drawer/placement.vue
new file mode 100644
index 00000000..e4c5a18b
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/drawer/placement.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+ {{ item }}
+
+
+
+ 左右方向用 width，上下方向用 height 控制尺寸。
+
+
+
diff --git a/code/g3soft-libs/docs/examples/drawer/size.vue b/code/g3soft-libs/docs/examples/drawer/size.vue
new file mode 100644
index 00000000..9b6cb72a
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/drawer/size.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+ 窄（360px）
+ 宽（640px）
+ 百分比（60%）
+
+ 拖拽：{{ resizable ? '开' : '关' }}
+
+
+
+
+ 打开（宽 {{ width }}）
+
+
+
+ 当前宽度：{{ width }}。拖拽左边缘时只会改变宽度，不会影响高度。
+
+
+
diff --git a/code/g3soft-libs/docs/examples/dropdown/basic.vue b/code/g3soft-libs/docs/examples/dropdown/basic.vue
new file mode 100644
index 00000000..3ed6b072
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/dropdown/basic.vue
@@ -0,0 +1,21 @@
+
+
+
+
+ 操作
+
+
diff --git a/code/g3soft-libs/docs/examples/dropdown/declarative.vue b/code/g3soft-libs/docs/examples/dropdown/declarative.vue
new file mode 100644
index 00000000..448b6709
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/dropdown/declarative.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ 声明式菜单
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/dropdown/header-slot.vue b/code/g3soft-libs/docs/examples/dropdown/header-slot.vue
new file mode 100644
index 00000000..8277e61d
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/dropdown/header-slot.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ 带头部的菜单
+
+
+
+
+
+
+ ZS
+
+
+
张三
+
zhangsan@g3soft.dev
+
+
+ 这里可以放任意结构
+ 关闭
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/dropdown/item-types.vue b/code/g3soft-libs/docs/examples/dropdown/item-types.vue
new file mode 100644
index 00000000..0ff2463e
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/dropdown/item-types.vue
@@ -0,0 +1,33 @@
+
+
+
+
+ 完整菜单
+
+
diff --git a/code/g3soft-libs/docs/examples/dropdown/keyboard.vue b/code/g3soft-libs/docs/examples/dropdown/keyboard.vue
new file mode 100644
index 00000000..1c6efb6c
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/dropdown/keyboard.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ 按键盘操作
+
+
+
+ 菜单打开后按 ↑↓ / Enter 试试（当前 {{ open ? '已打开' : '已关闭' }}）
+
+
+
diff --git a/code/g3soft-libs/docs/examples/dropdown/trigger.vue b/code/g3soft-libs/docs/examples/dropdown/trigger.vue
new file mode 100644
index 00000000..827d2c5f
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/dropdown/trigger.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+ hover 触发
+
+
+
+
+ 在此处右键
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/form/basic.vue b/code/g3soft-libs/docs/examples/form/basic.vue
new file mode 100644
index 00000000..602e39dd
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/form/basic.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+ 提交
+
+
+
diff --git a/code/g3soft-libs/docs/examples/form/grid.vue b/code/g3soft-libs/docs/examples/form/grid.vue
new file mode 100644
index 00000000..e1facfdb
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/form/grid.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 保存
+
+
+
diff --git a/code/g3soft-libs/docs/examples/form/group.vue b/code/g3soft-libs/docs/examples/form/group.vue
new file mode 100644
index 00000000..e3caddf4
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/form/group.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 连接
+
+
+
diff --git a/code/g3soft-libs/docs/examples/form/layout.vue b/code/g3soft-libs/docs/examples/form/layout.vue
new file mode 100644
index 00000000..829310b9
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/form/layout.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/form/rules.vue b/code/g3soft-libs/docs/examples/form/rules.vue
new file mode 100644
index 00000000..c0709706
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/form/rules.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
diff --git a/code/g3soft-libs/docs/examples/form/submit.vue b/code/g3soft-libs/docs/examples/form/submit.vue
new file mode 100644
index 00000000..d62d3a85
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/form/submit.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+ 重置
+ 手动校验
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/form/validate-trigger.vue b/code/g3soft-libs/docs/examples/form/validate-trigger.vue
new file mode 100644
index 00000000..2598803b
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/form/validate-trigger.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/grid/align.vue b/code/g3soft-libs/docs/examples/grid/align.vue
new file mode 100644
index 00000000..59c7b180
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/grid/align.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ span 6
+ span 6（更高）
+ span 6
+
+
+
+ 居中
+ 居中
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/grid/basic.vue b/code/g3soft-libs/docs/examples/grid/basic.vue
new file mode 100644
index 00000000..4afa64b4
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/grid/basic.vue
@@ -0,0 +1,25 @@
+
+
+
+
+ span 24
+ span 12
+ span 12
+ span 8
+ span 8
+ span 8
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/grid/flex.vue b/code/g3soft-libs/docs/examples/grid/flex.vue
new file mode 100644
index 00000000..ed389293
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/grid/flex.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+ 固定 200px
+ 自适应剩余空间
+
+
+
+ 1 份
+ 2 份
+ 1 份
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/grid/gutter.vue b/code/g3soft-libs/docs/examples/grid/gutter.vue
new file mode 100644
index 00000000..92201bcc
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/grid/gutter.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ gutter 16
+ gutter 16
+ gutter 16
+
+
+
+ 水平 32
+ 水平 32
+ 水平 32
+ 垂直 12
+ 垂直 12
+ 垂直 12
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/grid/no-wrap.vue b/code/g3soft-libs/docs/examples/grid/no-wrap.vue
new file mode 100644
index 00000000..96ef8f17
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/grid/no-wrap.vue
@@ -0,0 +1,24 @@
+
+
+
+
+ span 8
+ span 8
+ span 8
+ 超出 24，但不换行
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/grid/offset.vue b/code/g3soft-libs/docs/examples/grid/offset.vue
new file mode 100644
index 00000000..e4987041
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/grid/offset.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ span 8
+ span 8 / offset 8
+
+
+
+ push 6
+ pull 6
+
+
+
+ order 2
+ order 1
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/input/basic.vue b/code/g3soft-libs/docs/examples/input/basic.vue
new file mode 100644
index 00000000..6f136e3c
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/input/basic.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
值：{{ value || '（空）' }}
+
diff --git a/code/g3soft-libs/docs/examples/input/clearable.vue b/code/g3soft-libs/docs/examples/input/clearable.vue
new file mode 100644
index 00000000..c54c4d40
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/input/clearable.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/input/methods.vue b/code/g3soft-libs/docs/examples/input/methods.vue
new file mode 100644
index 00000000..cb98bf88
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/input/methods.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+ 聚焦并全选
+
+ 仅选中
+ 失焦
+
+
+
diff --git a/code/g3soft-libs/docs/examples/input/number.vue b/code/g3soft-libs/docs/examples/input/number.vue
new file mode 100644
index 00000000..495ab6da
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/input/number.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ 提交值：{{ amount }}，类型：{{ typeof amount }}
+
+
diff --git a/code/g3soft-libs/docs/examples/input/password.vue b/code/g3soft-libs/docs/examples/input/password.vue
new file mode 100644
index 00000000..eee90bc9
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/input/password.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/input/slots.vue b/code/g3soft-libs/docs/examples/input/slots.vue
new file mode 100644
index 00000000..02cd31a9
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/input/slots.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ kg
+
+
+
diff --git a/code/g3soft-libs/docs/examples/input/status.vue b/code/g3soft-libs/docs/examples/input/status.vue
new file mode 100644
index 00000000..24a3e46d
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/input/status.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/input/textarea.vue b/code/g3soft-libs/docs/examples/input/textarea.vue
new file mode 100644
index 00000000..2e6b3f2b
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/input/textarea.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/layout/basic.vue b/code/g3soft-libs/docs/examples/layout/basic.vue
new file mode 100644
index 00000000..e2536868
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/layout/basic.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
+
+
+
+
+ G3 FMS
+
+
+ admin
+
+
+ 当前路由：{{ activeKey }}
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/message/basic.vue b/code/g3soft-libs/docs/examples/message/basic.vue
new file mode 100644
index 00000000..2a5ec827
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/message/basic.vue
@@ -0,0 +1,13 @@
+
+
+
+
+ info
+ success
+ warning
+ error
+
+
diff --git a/code/g3soft-libs/docs/examples/message/options.vue b/code/g3soft-libs/docs/examples/message/options.vue
new file mode 100644
index 00000000..760f263a
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/message/options.vue
@@ -0,0 +1,23 @@
+
+
+
+
+ 不自动关闭
+ 代码关闭
+
+ 自定义时长
+
+
+
diff --git a/code/g3soft-libs/docs/examples/message/placement.vue b/code/g3soft-libs/docs/examples/message/placement.vue
new file mode 100644
index 00000000..248e08da
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/message/placement.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+ {{ placement }}
+
+
+
diff --git a/code/g3soft-libs/docs/examples/modal/basic.vue b/code/g3soft-libs/docs/examples/modal/basic.vue
new file mode 100644
index 00000000..da7e6f9f
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/modal/basic.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ 打开对话框
+
+
+
+
+
+
+ {{ log }}
+
+
diff --git a/code/g3soft-libs/docs/examples/modal/confirm-async.vue b/code/g3soft-libs/docs/examples/modal/confirm-async.vue
new file mode 100644
index 00000000..e9534818
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/modal/confirm-async.vue
@@ -0,0 +1,35 @@
+
+
+
+
+ 异步成功
+ 异步失败
+
+
diff --git a/code/g3soft-libs/docs/examples/modal/confirm.vue b/code/g3soft-libs/docs/examples/modal/confirm.vue
new file mode 100644
index 00000000..02c910f1
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/modal/confirm.vue
@@ -0,0 +1,34 @@
+
+
+
+
+ 删除确认
+ 演示 destroy()
+
+
diff --git a/code/g3soft-libs/docs/examples/modal/footer-slot.vue b/code/g3soft-libs/docs/examples/modal/footer-slot.vue
new file mode 100644
index 00000000..f2eaed67
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/modal/footer-slot.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ 自定义底部
+
+
+
+
+ 帮助
+
+
+ 底部可以放多个按钮、步骤指示器或协议勾选。
+
+
+
+ 第 1 / 3 步
+
+ 取消
+ 下一步
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/modal/form.vue b/code/g3soft-libs/docs/examples/modal/form.vue
new file mode 100644
index 00000000..90980001
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/modal/form.vue
@@ -0,0 +1,44 @@
+
+
+
+
+ 新建（表单弹窗）
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/modal/mask.vue b/code/g3soft-libs/docs/examples/modal/mask.vue
new file mode 100644
index 00000000..9dc19652
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/modal/mask.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+ 点击遮罩关闭
+ Esc 关闭
+ 显示关闭按钮
+ 显示底部按钮
+
+
+
+ 打开
+
+
+
+ 强制用户做出选择时，把 maskClosable / keyboard / closable 都设为 false。
+
+
+
diff --git a/code/g3soft-libs/docs/examples/modal/resize.vue b/code/g3soft-libs/docs/examples/modal/resize.vue
new file mode 100644
index 00000000..1d042fee
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/modal/resize.vue
@@ -0,0 +1,29 @@
+
+
+
+
+ 可拖动 / 缩放
+ 居中显示
+
+
+ 面板默认贴顶显示；开启 centered 后垂直居中，适合确认类与短表单。
+
+ 右上角的全屏按钮与拖动/缩放互斥：全屏时会自动复位位置。
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/notification/basic.vue b/code/g3soft-libs/docs/examples/notification/basic.vue
new file mode 100644
index 00000000..79f7c7f3
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/notification/basic.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+ 成功通知
+
+
+
+ 不自动关闭的错误通知
+
+
+
diff --git a/code/g3soft-libs/docs/examples/notification/close.vue b/code/g3soft-libs/docs/examples/notification/close.vue
new file mode 100644
index 00000000..fc22842d
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/notification/close.vue
@@ -0,0 +1,23 @@
+
+
+
+
+ 打开多条
+ 句柄关闭
+ 全部清空
+
+
diff --git a/code/g3soft-libs/docs/examples/notification/placement.vue b/code/g3soft-libs/docs/examples/notification/placement.vue
new file mode 100644
index 00000000..53126098
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/notification/placement.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+ {{ placement }}
+
+
+
diff --git a/code/g3soft-libs/docs/examples/pagination/basic.vue b/code/g3soft-libs/docs/examples/pagination/basic.vue
new file mode 100644
index 00000000..709c2a15
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/pagination/basic.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
当前第 {{ current }} 页
+
diff --git a/code/g3soft-libs/docs/examples/pagination/hide-on-single.vue b/code/g3soft-libs/docs/examples/pagination/hide-on-single.vue
new file mode 100644
index 00000000..47060629
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/pagination/hide-on-single.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+ 只有一页（8 条）
+ 切到 86 条可以看完整分页
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/pagination/quick-jumper.vue b/code/g3soft-libs/docs/examples/pagination/quick-jumper.vue
new file mode 100644
index 00000000..76ccba9c
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/pagination/quick-jumper.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/pagination/size-changer.vue b/code/g3soft-libs/docs/examples/pagination/size-changer.vue
new file mode 100644
index 00000000..c4158ce5
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/pagination/size-changer.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ 每页 {{ pageSize }} 条｜{{ lastEvent }}
+
+
diff --git a/code/g3soft-libs/docs/examples/pagination/total.vue b/code/g3soft-libs/docs/examples/pagination/total.vue
new file mode 100644
index 00000000..6ad990fb
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/pagination/total.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+ 第 {{ from }}-{{ to }} 条 / 共 {{ total }} 条
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/popover/arrow-width.vue b/code/g3soft-libs/docs/examples/popover/arrow-width.vue
new file mode 100644
index 00000000..7fb3d94e
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/popover/arrow-width.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+ 无箭头
+ arrow=false 时没有尖角，适合菜单类浮层
+
+
+
+
+
+
+ 触发器（320px 宽）
+
+
+ 浮层宽度跟随触发器，内容更长时会自动变宽
+
+
diff --git a/code/g3soft-libs/docs/examples/popover/basic.vue b/code/g3soft-libs/docs/examples/popover/basic.vue
new file mode 100644
index 00000000..f92e5b23
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/popover/basic.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+ 点击查看
+
+
+
+ 浮层内容可以直接写 HTML，也可以放任意组件。
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/popover/controlled.vue b/code/g3soft-libs/docs/examples/popover/controlled.vue
new file mode 100644
index 00000000..6cdb6e7b
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/popover/controlled.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+ 受控气泡
+
+
+
+
受控模式下，所有开关都经过 update:open。
+
知道了
+
diff --git a/code/g3soft-libs/docs/examples/popover/placement.vue b/code/g3soft-libs/docs/examples/popover/placement.vue
new file mode 100644
index 00000000..9044ba0d
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/popover/placement.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+ 方位：{{ placement }}
+
+ 当前方位 {{ placement }}，贴边时会自动翻到对面
+
+
+
diff --git a/code/g3soft-libs/docs/examples/popover/trigger.vue b/code/g3soft-libs/docs/examples/popover/trigger.vue
new file mode 100644
index 00000000..8c5d87d7
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/popover/trigger.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+ hover 触发
+ 鼠标移入即显示，移出后延迟关闭
+
+
+
+ focus 触发
+ Tab 聚焦时显示，焦点移出关闭
+
+
+
+
+
+ 在此处右键
+
+
+ 在鼠标位置弹出，超出视口会自动回退
+
+
+
+
+
+ manual 触发
+
+
+ 手动关闭
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/radio/basic.vue b/code/g3soft-libs/docs/examples/radio/basic.vue
new file mode 100644
index 00000000..5f869245
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/radio/basic.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+ 按月付费
+ 按年付费（省 2 个月）
+ 一次性买断（暂不可选）
+
+
选中：{{ value }}
+
diff --git a/code/g3soft-libs/docs/examples/radio/cards.vue b/code/g3soft-libs/docs/examples/radio/cards.vue
new file mode 100644
index 00000000..a6693c9c
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/radio/cards.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ 基础版
+ 单项目 · 1GB 存储
+
+
+
+
+
+ 专业版
+ 多项目 · 100GB 存储
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/radio/vertical.vue b/code/g3soft-libs/docs/examples/radio/vertical.vue
new file mode 100644
index 00000000..e0052a40
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/radio/vertical.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ 紧凑视图
+ 标准视图
+ 宽松视图
+
+
+
+ 整组禁用 A
+ 整组禁用 B
+
+
+
diff --git a/code/g3soft-libs/docs/examples/scrollbar/autohide.vue b/code/g3soft-libs/docs/examples/scrollbar/autohide.vue
new file mode 100644
index 00000000..87364b3e
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/scrollbar/autohide.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
{{ mode }}
+
+
+ 第 {{ index }} 行
+
+
+
diff --git a/code/g3soft-libs/docs/examples/scrollbar/basic.vue b/code/g3soft-libs/docs/examples/scrollbar/basic.vue
new file mode 100644
index 00000000..23fe8aa2
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/scrollbar/basic.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+ 第 {{ index }} 行内容
+
+
+
diff --git a/code/g3soft-libs/docs/examples/segmented/basic.vue b/code/g3soft-libs/docs/examples/segmented/basic.vue
new file mode 100644
index 00000000..2dca70a7
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/segmented/basic.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/segmented/block.vue b/code/g3soft-libs/docs/examples/segmented/block.vue
new file mode 100644
index 00000000..e4a10a19
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/segmented/block.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/segmented/custom-label.vue b/code/g3soft-libs/docs/examples/segmented/custom-label.vue
new file mode 100644
index 00000000..dfda8418
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/segmented/custom-label.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ {{ (option as { label: string }).label }}
+
+ {{ (option as { count: number }).count }}
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/segmented/options.vue b/code/g3soft-libs/docs/examples/segmented/options.vue
new file mode 100644
index 00000000..d997262f
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/segmented/options.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/segmented/shape.vue b/code/g3soft-libs/docs/examples/segmented/shape.vue
new file mode 100644
index 00000000..d91fab6a
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/segmented/shape.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/segmented/uncontrolled.vue b/code/g3soft-libs/docs/examples/segmented/uncontrolled.vue
new file mode 100644
index 00000000..907dd143
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/segmented/uncontrolled.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
change 收到：{{ current }}
+
diff --git a/code/g3soft-libs/docs/examples/segmented/vertical.vue b/code/g3soft-libs/docs/examples/segmented/vertical.vue
new file mode 100644
index 00000000..91db7859
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/segmented/vertical.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/select/basic.vue b/code/g3soft-libs/docs/examples/select/basic.vue
new file mode 100644
index 00000000..4d6084fd
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/select/basic.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
选中：{{ value ?? '（未选）' }}
+
diff --git a/code/g3soft-libs/docs/examples/select/custom-option.vue b/code/g3soft-libs/docs/examples/select/custom-option.vue
new file mode 100644
index 00000000..84b0130a
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/select/custom-option.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ size.label }}
+ {{ size.desc }}
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/select/field-names.vue b/code/g3soft-libs/docs/examples/select/field-names.vue
new file mode 100644
index 00000000..571eff72
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/select/field-names.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/select/filterable.vue b/code/g3soft-libs/docs/examples/select/filterable.vue
new file mode 100644
index 00000000..79b7cb99
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/select/filterable.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/select/load-more.vue b/code/g3soft-libs/docs/examples/select/load-more.vue
new file mode 100644
index 00000000..78193c32
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/select/load-more.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+ {{ isLoading ? '加载中…' : `已加载 ${options.length} 条` }}
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/select/multiple.vue b/code/g3soft-libs/docs/examples/select/multiple.vue
new file mode 100644
index 00000000..324f9f4a
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/select/multiple.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/select/remote.vue b/code/g3soft-libs/docs/examples/select/remote.vue
new file mode 100644
index 00000000..e03c54fc
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/select/remote.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/space/basic.vue b/code/g3soft-libs/docs/examples/space/basic.vue
new file mode 100644
index 00000000..6a6781f9
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/space/basic.vue
@@ -0,0 +1,12 @@
+
+
+
+
+ 按钮
+ 按钮
+ 文字
+
+
diff --git a/code/g3soft-libs/docs/examples/space/empty-children.vue b/code/g3soft-libs/docs/examples/space/empty-children.vue
new file mode 100644
index 00000000..f94b86ed
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/space/empty-children.vue
@@ -0,0 +1,19 @@
+
+
+
+
+ 显示「删除」按钮
+
+ 编辑
+ 复制
+
+ 删除
+
+
+
diff --git a/code/g3soft-libs/docs/examples/space/separator.vue b/code/g3soft-libs/docs/examples/space/separator.vue
new file mode 100644
index 00000000..36a1b16b
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/space/separator.vue
@@ -0,0 +1,16 @@
+
+
+
+
+ 编辑
+ 复制
+ 删除
+
+
+ |
+
+
+
diff --git a/code/g3soft-libs/docs/examples/space/size.vue b/code/g3soft-libs/docs/examples/space/size.vue
new file mode 100644
index 00000000..30c5708f
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/space/size.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+ small 8px
+ small 8px
+
+
+
+ middle 16px
+ middle 16px
+
+
+
+ large 24px
+ large 24px
+
+
+
+
+ 32px
+ 32px
+
+
+
diff --git a/code/g3soft-libs/docs/examples/space/vertical.vue b/code/g3soft-libs/docs/examples/space/vertical.vue
new file mode 100644
index 00000000..866122db
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/space/vertical.vue
@@ -0,0 +1,12 @@
+
+
+
+
+ 第一行
+ 第二行
+ 第三行
+
+
diff --git a/code/g3soft-libs/docs/examples/space/wrap.vue b/code/g3soft-libs/docs/examples/space/wrap.vue
new file mode 100644
index 00000000..6dc343d8
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/space/wrap.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ 按钮 {{ index }}
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/spin/basic.vue b/code/g3soft-libs/docs/examples/spin/basic.vue
new file mode 100644
index 00000000..20c8e148
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/spin/basic.vue
@@ -0,0 +1,25 @@
+
+
+
+
+ 重新加载
+
+
+
+ 被包裹的内容区域：加载中会被遮罩覆盖，并阻止点击。
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/spin/delay.vue b/code/g3soft-libs/docs/examples/spin/delay.vue
new file mode 100644
index 00000000..a2179788
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/spin/delay.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+ 200ms 请求
+ 1500ms 请求
+
+
+
+ 短请求：因为 delay=400ms，全程不会闪出加载态
+
+
+
+ 长请求：超过 400ms 后才显示加载态
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/spin/standalone.vue b/code/g3soft-libs/docs/examples/spin/standalone.vue
new file mode 100644
index 00000000..470fca4d
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/spin/standalone.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/splitter/basic.vue b/code/g3soft-libs/docs/examples/splitter/basic.vue
new file mode 100644
index 00000000..f6d3c8e1
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/splitter/basic.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+ 左侧 240px（可拖拽调整）
+
+
+ 右侧自动填充
+
+
+
+
+ 面板宽度：{{ lastSizes.join(' / ') || '（拖拽后显示）' }}
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/splitter/constraints.vue b/code/g3soft-libs/docs/examples/splitter/constraints.vue
new file mode 100644
index 00000000..6cd2898a
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/splitter/constraints.vue
@@ -0,0 +1,33 @@
+
+
+
+
+ 左侧不可拖动（resizable=false）
+
+
+
+ 左侧：最小 160px，最大 50%
+
+
+ 右侧：最小 200px
+
+
+
+
+ 拖到边界会被钳制住；键盘用户可 Tab 聚焦分割线后用 ← → 调整（Shift 加速）
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/splitter/nested.vue b/code/g3soft-libs/docs/examples/splitter/nested.vue
new file mode 100644
index 00000000..5c1f96a3
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/splitter/nested.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+ 侧栏（200px）
+
+
+
+
+
+ 编辑区
+
+
+ 输出 / 控制台（120px）
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/splitter/vertical.vue b/code/g3soft-libs/docs/examples/splitter/vertical.vue
new file mode 100644
index 00000000..350ad5bd
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/splitter/vertical.vue
@@ -0,0 +1,34 @@
+
+
+
+
+ 分割线仅在 hover / 拖拽时显示
+
+
+
+ 上：120px
+
+
+ 下：自动填充
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/switch/basic.vue b/code/g3soft-libs/docs/examples/switch/basic.vue
new file mode 100644
index 00000000..40ee38bd
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/switch/basic.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
启用通知
+
状态：{{ enabled ? '开' : '关' }}
+
diff --git a/code/g3soft-libs/docs/examples/switch/disabled.vue b/code/g3soft-libs/docs/examples/switch/disabled.vue
new file mode 100644
index 00000000..d0d24b12
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/switch/disabled.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ 禁用且带文字
+
+
diff --git a/code/g3soft-libs/docs/examples/switch/in-form.vue b/code/g3soft-libs/docs/examples/switch/in-form.vue
new file mode 100644
index 00000000..806bf421
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/switch/in-form.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+ 保存
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tabs/basic.vue b/code/g3soft-libs/docs/examples/tabs/basic.vue
new file mode 100644
index 00000000..ebd87da1
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tabs/basic.vue
@@ -0,0 +1,15 @@
+
+
+
+
+ 基本信息面板内容
+ 配置面板内容
+ 禁用项不可切换
+
+
diff --git a/code/g3soft-libs/docs/examples/tabs/items.vue b/code/g3soft-libs/docs/examples/tabs/items.vue
new file mode 100644
index 00000000..9139eb08
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tabs/items.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tabs/nav-only.vue b/code/g3soft-libs/docs/examples/tabs/nav-only.vue
new file mode 100644
index 00000000..007e48f2
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tabs/nav-only.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ 项目：
+
+
+
+ {{ item === 'a' ? '标签 A（自定义）' : '标签 B' }}
+
+
+
+ + 新建
+
+
+
+
+ 当前激活：{{ active }}（内容由外部渲染）
+
+
diff --git a/code/g3soft-libs/docs/examples/tabs/placement.vue b/code/g3soft-libs/docs/examples/tabs/placement.vue
new file mode 100644
index 00000000..436b0283
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tabs/placement.vue
@@ -0,0 +1,15 @@
+
+
+
+
+ 概览内容
+ 成员内容
+ 设置内容
+
+
diff --git a/code/g3soft-libs/docs/examples/tabs/type.vue b/code/g3soft-libs/docs/examples/tabs/type.vue
new file mode 100644
index 00000000..1264d936
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tabs/type.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tag/closable.vue b/code/g3soft-libs/docs/examples/tag/closable.vue
new file mode 100644
index 00000000..a474ee1e
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tag/closable.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+ {{ tag }}
+
+ 已全部移除
+
+
diff --git a/code/g3soft-libs/docs/examples/tag/icon.vue b/code/g3soft-libs/docs/examples/tag/icon.vue
new file mode 100644
index 00000000..b24cab9d
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tag/icon.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ 已完成
+
+
+
+
+ 等待中
+
+
+
+
+ 张三
+ ×
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tag/link.vue b/code/g3soft-libs/docs/examples/tag/link.vue
new file mode 100644
index 00000000..f6669475
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tag/link.vue
@@ -0,0 +1,11 @@
+
+
+
+
+ 可点击标签
+ 禁用标签
+
+
diff --git a/code/g3soft-libs/docs/examples/tag/prevent-close.vue b/code/g3soft-libs/docs/examples/tag/prevent-close.vue
new file mode 100644
index 00000000..9bc903f5
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tag/prevent-close.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+ {{ visible ? '受控标签' : '已关闭' }}
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tag/variant.vue b/code/g3soft-libs/docs/examples/tag/variant.vue
new file mode 100644
index 00000000..9f920553
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tag/variant.vue
@@ -0,0 +1,15 @@
+
+
+
+
+ 默认
+ 次要
+ 描边
+ 已完成
+ 失败
+ 幽灵
+
+
diff --git a/code/g3soft-libs/docs/examples/tooltip/basic.vue b/code/g3soft-libs/docs/examples/tooltip/basic.vue
new file mode 100644
index 00000000..8acb8b18
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tooltip/basic.vue
@@ -0,0 +1,10 @@
+
+
+
+
+ 悬停查看提示
+
+
diff --git a/code/g3soft-libs/docs/examples/tooltip/disabled.vue b/code/g3soft-libs/docs/examples/tooltip/disabled.vue
new file mode 100644
index 00000000..409b378f
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tooltip/disabled.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+ 启用提示
+
+ 悬停试试
+
+
+
+
+ 受控显示
+
+ 受控提示
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tooltip/placement.vue b/code/g3soft-libs/docs/examples/tooltip/placement.vue
new file mode 100644
index 00000000..fe4bf382
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tooltip/placement.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+ {{ placement }}
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tooltip/rich.vue b/code/g3soft-libs/docs/examples/tooltip/rich.vue
new file mode 100644
index 00000000..40960c5a
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tooltip/rich.vue
@@ -0,0 +1,20 @@
+
+
+
+
+ 富内容提示
+
+
+
+ 发布到生产环境
+
+ 会触发全量构建与灰度发布，平均耗时 3 分钟。快捷键
+ ⌘ + Shift + P
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tree/basic.vue b/code/g3soft-libs/docs/examples/tree/basic.vue
new file mode 100644
index 00000000..b3d268ee
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tree/basic.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
选中：{{ selectedKeys.join(', ') || '无' }}
+
diff --git a/code/g3soft-libs/docs/examples/tree/checkable.vue b/code/g3soft-libs/docs/examples/tree/checkable.vue
new file mode 100644
index 00000000..8ebe92d7
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tree/checkable.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
父子联动（半选会回传）
+
+
checked: {{ linked }}
+
+
checkStrictly（互不影响）
+
+
checked: {{ strict }}
+
diff --git a/code/g3soft-libs/docs/examples/tree/context-menu.vue b/code/g3soft-libs/docs/examples/tree/context-menu.vue
new file mode 100644
index 00000000..4885d603
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tree/context-menu.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tree/custom.vue b/code/g3soft-libs/docs/examples/tree/custom.vue
new file mode 100644
index 00000000..74dba292
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tree/custom.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+ {{ node.name }}
+ 当前
+
+ 选中
+
+
+
+
+
+
选中：{{ selectedKeys.join(', ') || '无' }}
+
diff --git a/code/g3soft-libs/docs/examples/tree/draggable.vue b/code/g3soft-libs/docs/examples/tree/draggable.vue
new file mode 100644
index 00000000..727098c7
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tree/draggable.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+
拖拽任意节点试试（子节点不能拖进自己的子树）
+
diff --git a/code/g3soft-libs/docs/examples/tree/expand.vue b/code/g3soft-libs/docs/examples/tree/expand.vue
new file mode 100644
index 00000000..f5e214ef
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tree/expand.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+ 全部展开
+ 全部收起
+
+
+
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tree/filter.vue b/code/g3soft-libs/docs/examples/tree/filter.vue
new file mode 100644
index 00000000..e650e24d
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tree/filter.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ 没有匹配的节点
+
+
+
diff --git a/code/g3soft-libs/docs/examples/tree/lazy.vue b/code/g3soft-libs/docs/examples/tree/lazy.vue
new file mode 100644
index 00000000..292dfade
--- /dev/null
+++ b/code/g3soft-libs/docs/examples/tree/lazy.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
已加载：{{ loadedKeys.join(', ') || '无' }}
+
diff --git a/code/g3soft-libs/docs/nuxt.config.ts b/code/g3soft-libs/docs/nuxt.config.ts
index a9db24e5..e3b689f5 100644
--- a/code/g3soft-libs/docs/nuxt.config.ts
+++ b/code/g3soft-libs/docs/nuxt.config.ts
@@ -35,6 +35,13 @@ export default defineNuxtConfig({
find: /^@g3soft\/ui$/,
replacement: fileURLToPath(new URL('../packages/ui/src/index.ts', import.meta.url)),
},
+ {
+ // framework 也直连源码：改布局 / 偏好即时热更
+ find: /^@g3soft\/framework$/,
+ replacement: fileURLToPath(
+ new URL('../packages/framework/src/index.ts', import.meta.url),
+ ),
+ },
{
// tokens 是 SCSS 编译产物：仅裸导入指向 dist/index.css（由 @g3soft/tokens 的 build 生成）
find: /^@g3soft\/tokens$/,
diff --git a/code/g3soft-libs/package.json b/code/g3soft-libs/package.json
index 5061bdc9..d616ea74 100644
--- a/code/g3soft-libs/package.json
+++ b/code/g3soft-libs/package.json
@@ -12,14 +12,16 @@
"build:docs": "pnpm --filter @g3soft/tokens build && pnpm --filter @g3soft/docs generate",
"preview:docs": "pnpm --filter @g3soft/docs preview",
"build": "pnpm -r --filter \"./packages/**\" build",
- "gen:api": "node scripts/gen-api.mjs",
"changeset": "changeset",
"version": "changeset version",
- "release": "pnpm build && changeset publish"
+ "release": "pnpm build && changeset publish",
+ "playground": "pnpm --filter @g3soft/ui playground",
+ "test": "pnpm --filter @g3soft/ui test:unit",
+ "test:e2e": "pnpm --filter @g3soft/ui test:e2e",
+ "verify": "pnpm --filter @g3soft/tokens build && pnpm --filter @g3soft/ui verify"
},
"devDependencies": {
"@changesets/cli": "^2.29.0",
- "typescript": "catalog:",
- "vue-docgen-api": "^4.79.0"
+ "typescript": "catalog:"
}
}
diff --git a/code/g3soft-libs/packages/framework/README.md b/code/g3soft-libs/packages/framework/README.md
new file mode 100644
index 00000000..d548af9a
--- /dev/null
+++ b/code/g3soft-libs/packages/framework/README.md
@@ -0,0 +1,83 @@
+# @g3soft/framework
+
+G3Soft 前端框架。目标：**基础架子一处维护，留好插槽和接口，业务项目引用方便，既不绑死又灵活。**
+
+## 设计原则
+
+> framework 提供「骨架 + 契约」，业务负责「填充」；依赖单向 `host → framework`，framework 永不 import 业务代码。
+
+- **三层契约**：配置契约（`G3FrameworkOptions`）/ 数据契约（`NavItem`、`G3RouteMeta`、`UserInfo`）/ UI 契约（slots + emits）。
+- **一切外部信息靠注入**：菜单、用户、token、跳转都由宿主提供，framework 内部零业务依赖。
+- **默认能跑**：零配置即可启动（默认 `sidebar-nav` + 浅色），配置与插槽均为可选增强。
+
+## 归属边界
+
+| 层 | 内容 | 说明 |
+|---|---|---|
+| `core` | 布局（7 种模式）、偏好模型、契约类型 | 后端无关，只依赖 `vue`(peer) + `@g3soft/ui` |
+| `presets/*` | 传输、`ApiResponse` 解包、`/data/*` client、默认菜单源 | **后续接入**，可选，import 才生效 |
+| 项目 | 业务接口、业务页面 | —— |
+
+**铁律**：`core` 里绝不出现具体后端名（如 `s_menu`、`/data/loaddata`、`ApiResponse`）；一旦出现，它就该在 `presets`。
+
+## 当前进度
+
+- [x] core 类型契约（数据 / 配置 / UI 三类）
+- [x] 偏好层：`defaultPreferences` / `usePreferences`（reactive 单例，无需 pinia）/ 持久化 / `applyThemeVars`
+- [x] `createG3Framework`（`app.use()` 一次初始化）
+- [x] 布局子组件：Logo / 递归 Menu（垂直+水平）/ Sidebar（单列+双列，含折叠按钮、拖拽调宽、悬浮展开）/ Header / Breadcrumb / Tabbar
+- [x] `G3Layout` 编排 7 种模式（模式配置表驱动）
+- [ ] 偏好抽屉面板
+- [ ] 接线层 `G3AdminLayout`（接 router / 页签状态 / 用户菜单）
+- [ ] 接口层 preset（`/request` + g3-backend + 默认菜单源）
+
+布局结构与交互对齐 [vben-admin](https://github.com/vbenjs/vue-vben-admin) 的 `layout-ui`，样式改写为 `--g3-*` 变量 + `g3-` 前缀（**不引入 Tailwind**，业务项目零额外配置）。
+
+## 使用
+
+```ts
+// main.ts —— 初始化（可选）
+import { createG3Framework } from '@g3soft/framework'
+app.use(
+ createG3Framework({
+ preferences: { app: { layout: 'sidebar-nav' }, theme: { colorPrimary: '#2563eb' } },
+ storageKey: 'g3-preferences',
+ }),
+)
+```
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+菜单数据由宿主注入（`:menus` 直接给数组，或 `:menu-source` 给函数），framework 不关心来源。
+
+## 偏好与主题
+
+- `usePreferences()`：读偏好（只读响应式）、`update(patch)` / `setLayout()` / `toggleSidebar()`。
+- 偏好状态是**模块级 reactive 单例**，不依赖 pinia；持久化用 `localStorage`（SSR 安全）。
+- 主题唯一输出仍是 `@g3soft/ui` 的 `ConfigProvider → derivePalette → --g3-*`；`radius` / `fontSize` / 布局尺寸写入 CSS 变量。
+
+## 归属边界
+
+| 层 | 内容 | 说明 |
+|---|---|---|
+| `core` | 布局（7 种模式）、偏好、契约类型 | 后端无关，只依赖 `vue`(peer) + `@g3soft/ui` |
+| `presets/*` | 传输、`ApiResponse` 解包、`/data/*` client、默认菜单源 | **后续接入**，可选，import 才生效 |
+| 项目 | 业务接口、业务页面 | —— |
+
+**铁律**：`core` 里绝不出现具体后端名（如 `s_menu`、`/data/loaddata`、`ApiResponse`）；一旦出现，它就该在 `presets`。
diff --git a/code/g3soft-libs/packages/framework/package.json b/code/g3soft-libs/packages/framework/package.json
new file mode 100644
index 00000000..db63acb7
--- /dev/null
+++ b/code/g3soft-libs/packages/framework/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "@g3soft/framework",
+ "version": "0.0.1",
+ "description": "G3Soft 前端框架：布局骨架 + 偏好设置，供业务项目引用（core 先行，接口层后续以 preset 形式接入）",
+ "license": "UNLICENSED",
+ "type": "module",
+ "files": [
+ "dist",
+ "README.md"
+ ],
+ "sideEffects": [
+ "**/*.css"
+ ],
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.js"
+ },
+ "./core": {
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.js"
+ },
+ "./style.css": "./dist/style.css",
+ "./package.json": "./package.json"
+ },
+ "scripts": {
+ "build": "vite build",
+ "prepublishOnly": "publint"
+ },
+ "peerDependencies": {
+ "vue": "^3.5.0"
+ },
+ "dependencies": {
+ "@g3soft/ui": "workspace:*"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^6.0.0",
+ "publint": "latest",
+ "vite": "^8.0.0",
+ "vite-plugin-dts": "latest",
+ "vue": "catalog:",
+ "vue-tsc": "^3.0.0"
+ },
+ "publishConfig": {
+ "access": "restricted"
+ }
+}
diff --git a/code/g3soft-libs/packages/framework/src/core/_utils/deep-merge.ts b/code/g3soft-libs/packages/framework/src/core/_utils/deep-merge.ts
new file mode 100644
index 00000000..6ad1f5d1
--- /dev/null
+++ b/code/g3soft-libs/packages/framework/src/core/_utils/deep-merge.ts
@@ -0,0 +1,38 @@
+/** 是否为「普通对象」（排除数组 / null） */
+export function isPlainObject(value: unknown): value is Record
{
+ return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+/**
+ * 深合并：把 source 递归覆盖到 target（就地修改并返回 target）。
+ * undefined 视为「未提供」，不覆盖；数组整体替换。
+ */
+export function deepMerge>(
+ target: T,
+ source?: Partial | Record,
+): T {
+ if (!isPlainObject(source)) return target
+ for (const key of Object.keys(source)) {
+ const next = (source as Record)[key]
+ if (next === undefined) continue
+ const current = (target as Record)[key]
+ if (isPlainObject(next) && isPlainObject(current)) {
+ deepMerge(current, next)
+ } else {
+ ;(target as Record)[key] = next
+ }
+ }
+ return target
+}
+
+/** 深克隆（结构化克隆优先，退回 JSON） */
+export function deepClone(value: T): T {
+ if (typeof structuredClone === 'function') {
+ try {
+ return structuredClone(value)
+ } catch {
+ /* 含不可克隆值时退回 JSON */
+ }
+ }
+ return JSON.parse(JSON.stringify(value)) as T
+}
diff --git a/code/g3soft-libs/packages/framework/src/core/index.ts b/code/g3soft-libs/packages/framework/src/core/index.ts
new file mode 100644
index 00000000..e5a23f8d
--- /dev/null
+++ b/code/g3soft-libs/packages/framework/src/core/index.ts
@@ -0,0 +1,75 @@
+// core：布局骨架 + 偏好 + 契约类型。后端无关，依赖仅 vue(peer) + @g3soft/ui。
+// 接口层（request / ApiResponse 解包 / 默认菜单源）不在 core，后续以 preset 形式接入。
+
+// —— 布局 ——
+export {
+ G3Layout,
+ G3LayoutBreadcrumb,
+ G3LayoutHeader,
+ G3LayoutLogo,
+ G3LayoutMenu,
+ G3LayoutSidebar,
+ G3LayoutTabbar,
+ layoutContextKey,
+ layoutLabels,
+ layoutModes,
+ useLayoutContext,
+} from './layout'
+export type { LayoutContext, LayoutModeConfig } from './layout'
+
+// —— 偏好 ——
+export {
+ DEFAULT_STORAGE_KEY,
+ applyDataTheme,
+ applyThemeVars,
+ builtinPalettes,
+ defaultPreferences,
+ defaultSizes,
+ resolveDark,
+ setupPreferences,
+ toCssLength,
+ usePreferences,
+} from './preferences'
+export type { G3PreferencesApi } from './preferences'
+
+// —— 安装 ——
+export { createG3Framework } from './install'
+export type { G3Framework } from './install'
+
+// —— 数据契约 ——
+export type {
+ G3LayoutProps,
+ G3RouteMeta,
+ G3TabItem,
+ LayoutComponentOverrides,
+ LayoutSizes,
+ LayoutType,
+ MenuSource,
+ NavItem,
+ UserInfo,
+} from './types/layout'
+
+// —— 配置契约 ——
+export type {
+ AppPreferences,
+ BreadcrumbPreferences,
+ BreadcrumbStyleType,
+ ContentPreferences,
+ DeepPartial,
+ FooterPreferences,
+ G3FrameworkOptions,
+ G3Preferences,
+ HeaderMode,
+ HeaderPreferences,
+ LogoPreferences,
+ NavigationPreferences,
+ NavigationStyleType,
+ SidebarPreferences,
+ TabbarPreferences,
+ TabbarStyleType,
+ ThemeMode,
+ ThemePreferences,
+} from './types/preferences'
+
+// —— UI 契约 ——
+export type { G3LayoutEmits, G3LayoutSlots } from './types/slots'
diff --git a/code/g3soft-libs/packages/framework/src/core/install.ts b/code/g3soft-libs/packages/framework/src/core/install.ts
new file mode 100644
index 00000000..9fe3d1c6
--- /dev/null
+++ b/code/g3soft-libs/packages/framework/src/core/install.ts
@@ -0,0 +1,39 @@
+import type { App } from 'vue'
+import type { G3FrameworkOptions } from './types/preferences'
+import { setupPreferences, usePreferences } from './preferences'
+import type { G3PreferencesApi } from './preferences'
+
+/** createG3Framework 的返回值：兼容 `app.use()` 协议，同时暴露偏好 API */
+export interface G3Framework {
+ install(app: App): void
+ readonly preferences: G3PreferencesApi
+}
+
+/**
+ * 初始化 G3 框架。宿主在 `main.ts` 里调用一次，其余按需 import。
+ *
+ * ```ts
+ * const g3 = createG3Framework({ preferences: { app: { layout: 'sidebar-nav' } } })
+ * app.use(g3)
+ * ```
+ *
+ * 说明：偏好为模块级单例，初始化在调用时即完成；`install` 仅用于满足 `app.use()` 协议。
+ */
+export function createG3Framework(options: G3FrameworkOptions = {}): G3Framework {
+ setupPreferences({
+ preferences: options.preferences,
+ sizes: options.sizes,
+ theme: options.theme,
+ storageKey: options.storageKey,
+ persist: options.persist,
+ })
+
+ return {
+ install() {
+ // no-op：单例已在 setupPreferences 中生效
+ },
+ get preferences() {
+ return usePreferences()
+ },
+ }
+}
diff --git a/code/g3soft-libs/packages/framework/src/core/layout/G3Layout.vue b/code/g3soft-libs/packages/framework/src/core/layout/G3Layout.vue
new file mode 100644
index 00000000..3e5432fa
--- /dev/null
+++ b/code/g3soft-libs/packages/framework/src/core/layout/G3Layout.vue
@@ -0,0 +1,312 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![logo]()
+
G3
+
{{ text }}
+
+
+
+
+
+
+
+ 基础：Button / Tag / Spin / Segmented / Space
+
+
主要
+
次要
+
描边
+
幽灵
+
危险
+
危险描边
+
链接
+
+
小
+
大
+
加载中
+
禁用
+
+
+ 左
+
+ 中
+
+ 右
+
+
+
+ 第一
+ 第二
+ 第三
+
+
+ 上
+ 中
+ 下
+
+ default
+ secondary
+ outline
+ success
+ danger
+ ghost
+ 可关闭
+
+
+
+
+ 间距测试
+
+
+
+
+
+
+
+
+ Tabs / Tree / Pagination / Splitter / Scrollbar / TimeSelect
+
+
+
+
+
+ 标签一的内容
+ 标签二的内容
+ 不可见
+
+
+
+ 左侧标签页内容
+ 第二个面板
+
+
+ 右侧标签页内容
+ 第二个面板
+
+
+
+
+
+
+
+
+
+
+
+ 左
+ 右
+
+
+
+ {{ longText }}
+
+
+
+
+ Dropdown / Tooltip / Popover（首两个挂载即展开，用于层级回归）
+
+
+ 下拉菜单
+ 编辑
+ 复制
+
+ 删除
+
+
+ 悬停提示
+
+
+ 初始展开 A
+ 浮层 A
+
+
+ 初始展开 B
+ 浮层 B
+
+
+
+
+ Modal / Drawer / Message / Notification
+
+ 打开 Modal
+ 右侧 Drawer
+ 左侧 Drawer
+ 上方 Drawer
+ 下方 Drawer
+ Modal.confirm
+ Message 默认
+ Message 左上
+ Message 右下
+ Notification
+
+
+
+ 第一段内容。
+
+ 第 {{ i }} 段内容，用于验证缩放时内容区是否内部滚动。
+
+
+
+ 抽屉内容
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/button-group/ButtonGroupSeparator.vue b/code/g3soft-libs/packages/ui/src/button-group/ButtonGroupSeparator.vue
new file mode 100644
index 00000000..992c33ce
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/button-group/ButtonGroupSeparator.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/button-group/index.ts b/code/g3soft-libs/packages/ui/src/button-group/index.ts
new file mode 100644
index 00000000..f258a9f1
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/button-group/index.ts
@@ -0,0 +1,7 @@
+export { default as G3ButtonGroup } from './ButtonGroup.vue'
+export { default as G3ButtonGroupSeparator } from './ButtonGroupSeparator.vue'
+export type {
+ ButtonGroupOrientation,
+ ButtonGroupProps,
+ ButtonGroupSeparatorProps,
+} from './types'
diff --git a/code/g3soft-libs/packages/ui/src/button-group/types.ts b/code/g3soft-libs/packages/ui/src/button-group/types.ts
new file mode 100644
index 00000000..6b69c6d3
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/button-group/types.ts
@@ -0,0 +1,12 @@
+/** 按钮组排列方向 */
+export type ButtonGroupOrientation = 'horizontal' | 'vertical'
+
+export interface ButtonGroupProps {
+ /** 排列方向 */
+ orientation?: ButtonGroupOrientation
+}
+
+export interface ButtonGroupSeparatorProps {
+ /** 分割线方向；应与所在按钮组的排列方向相反 */
+ orientation?: ButtonGroupOrientation
+}
diff --git a/code/g3soft-libs/packages/ui/src/button/Button.vue b/code/g3soft-libs/packages/ui/src/button/Button.vue
index 9fe67170..8622e528 100644
--- a/code/g3soft-libs/packages/ui/src/button/Button.vue
+++ b/code/g3soft-libs/packages/ui/src/button/Button.vue
@@ -1,47 +1,53 @@
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/checkbox/index.ts b/code/g3soft-libs/packages/ui/src/checkbox/index.ts
new file mode 100644
index 00000000..f8008d23
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/checkbox/index.ts
@@ -0,0 +1,2 @@
+export { default as G3Checkbox } from './Checkbox.vue'
+export type { CheckboxProps } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/checkbox/types.ts b/code/g3soft-libs/packages/ui/src/checkbox/types.ts
new file mode 100644
index 00000000..d0d2c6cb
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/checkbox/types.ts
@@ -0,0 +1,12 @@
+export interface CheckboxProps {
+ /** 双向绑定的选中状态 */
+ modelValue?: boolean
+ /** 半选状态，用于表格全选 / 部分选中场景 */
+ indeterminate?: boolean
+ /** 禁用态 */
+ disabled?: boolean
+ /** 原生 name，用于表单提交分组 */
+ name?: string
+ /** 原生 value，勾选时随表单提交的值 */
+ value?: string | number | boolean
+}
diff --git a/code/g3soft-libs/packages/ui/src/date/CalendarPanel.vue b/code/g3soft-libs/packages/ui/src/date/CalendarPanel.vue
new file mode 100644
index 00000000..97676e8a
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/date/CalendarPanel.vue
@@ -0,0 +1,825 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ weekday }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 开始
+
+
+
+ 结束
+
+
+
+
+
+
+
+
+ {{ locale.common.confirm }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/date/RangePicker.vue b/code/g3soft-libs/packages/ui/src/date/RangePicker.vue
new file mode 100644
index 00000000..2c88e8e9
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/date/RangePicker.vue
@@ -0,0 +1,372 @@
+
+
+
+
+
+
+
+
+ ~
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/date/TimeSelect.vue b/code/g3soft-libs/packages/ui/src/date/TimeSelect.vue
new file mode 100644
index 00000000..b49b2c0b
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/date/TimeSelect.vue
@@ -0,0 +1,242 @@
+
+
+
+
+
+
+
+ -
+ {{ optionLabel(value) }}
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.label }}
+ {{ item.shortcut }}
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/dropdown/context.ts b/code/g3soft-libs/packages/ui/src/dropdown/context.ts
new file mode 100644
index 00000000..37bc461f
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/dropdown/context.ts
@@ -0,0 +1,12 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { DropdownItemData } from './types'
+
+/** 主 Dropdown 注入给菜单 / 子菜单的选中回调 */
+export const dropdownSelectKey: InjectionKey<((item: DropdownItemData) => void) | null> = Symbol(
+ 'g3-dropdown-select',
+)
+
+/** 主 Dropdown 注入的键盘高亮索引；子菜单不参与联动 */
+export const dropdownActiveIndexKey: InjectionKey | null> = Symbol(
+ 'g3-dropdown-active',
+)
diff --git a/code/g3soft-libs/packages/ui/src/dropdown/index.ts b/code/g3soft-libs/packages/ui/src/dropdown/index.ts
new file mode 100644
index 00000000..08d060af
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/dropdown/index.ts
@@ -0,0 +1,8 @@
+export { default as G3Dropdown } from './Dropdown.vue'
+export { default as G3DropdownItem } from './DropdownItem.vue'
+export type {
+ DropdownClickPayload,
+ DropdownItemData,
+ DropdownProps,
+ DropdownTrigger,
+} from './types'
diff --git a/code/g3soft-libs/packages/ui/src/dropdown/types.ts b/code/g3soft-libs/packages/ui/src/dropdown/types.ts
new file mode 100644
index 00000000..ae0ac751
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/dropdown/types.ts
@@ -0,0 +1,58 @@
+import type { Component, VNode } from 'vue'
+import type { Placement } from '../_utils/position'
+
+/** 触发方式：下拉菜单只支持这三种 */
+export type DropdownTrigger = 'click' | 'hover' | 'contextmenu'
+
+/** 菜单项数据 */
+export interface DropdownItemData {
+ /** 标识，点击时随 click 事件回传 */
+ key?: string | number
+ /** 菜单文本 */
+ label?: string
+ /** 图标：组件或 VNode */
+ icon?: Component | VNode
+ /** 危险项（红色） */
+ danger?: boolean
+ /** 禁用项 */
+ disabled?: boolean
+ /** 快捷键提示文字 */
+ shortcut?: string
+ /** 渲染为分隔线（其余属性忽略） */
+ divider?: boolean
+ /** type='label' 时渲染为分组标签 */
+ type?: 'label'
+ /** 子菜单 */
+ children?: DropdownItemData[]
+ /** 项自带点击回调，命中时优先执行 */
+ onClick?: (item: DropdownItemData) => void
+}
+
+/** 菜单项点击事件载荷 */
+export interface DropdownClickPayload {
+ key?: string | number
+ item: DropdownItemData
+}
+
+export interface DropdownProps {
+ /** 菜单项数组；不传时若默认插槽含 G3DropdownItem 则由其收集渲染，否则用 #menu 插槽 */
+ items?: DropdownItemData[]
+ /** 受控打开状态；不传则非受控 */
+ open?: boolean
+ /** 非受控时的初始打开状态 */
+ defaultOpen?: boolean
+ /** 触发方式 */
+ trigger?: DropdownTrigger
+ /** 菜单浮层方位 */
+ placement?: Placement
+ /** 禁用态 */
+ disabled?: boolean
+ /** hover 触发打开延迟（ms） */
+ mouseEnterDelay?: number
+ /** hover 触发关闭延迟（ms） */
+ mouseLeaveDelay?: number
+ /** 与触发器的间距（px） */
+ offset?: number
+ /** 零包裹模式（默认开启）：把事件注入到触发器单根 vnode，不再包 span */
+ unwrapped?: boolean
+}
diff --git a/code/g3soft-libs/packages/ui/src/form/Form.vue b/code/g3soft-libs/packages/ui/src/form/Form.vue
new file mode 100644
index 00000000..90077ed0
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/form/Form.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/form/FormGroup.vue b/code/g3soft-libs/packages/ui/src/form/FormGroup.vue
new file mode 100644
index 00000000..6439e051
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/form/FormGroup.vue
@@ -0,0 +1,184 @@
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ helpText }}
+
+
{{ merged.extra }}
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/grid/Row.vue b/code/g3soft-libs/packages/ui/src/grid/Row.vue
new file mode 100644
index 00000000..dbd8a72c
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/grid/Row.vue
@@ -0,0 +1,174 @@
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/grid/index.ts b/code/g3soft-libs/packages/ui/src/grid/index.ts
new file mode 100644
index 00000000..364a86e0
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/grid/index.ts
@@ -0,0 +1,3 @@
+export { default as G3Row } from './Row.vue'
+export { default as G3Col } from './Col.vue'
+export type { ColProps, GridGutter, RowAlign, RowJustify, RowProps } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/grid/types.ts b/code/g3soft-libs/packages/ui/src/grid/types.ts
new file mode 100644
index 00000000..1ae11581
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/grid/types.ts
@@ -0,0 +1,40 @@
+/** 栅格间距：数字（水平=垂直）或 [水平, 垂直] */
+export type GridGutter = number | [number, number]
+
+/** 交叉轴对齐 */
+export type RowAlign = 'top' | 'middle' | 'bottom' | 'stretch'
+
+/** 主轴对齐 */
+export type RowJustify =
+ | 'start'
+ | 'end'
+ | 'center'
+ | 'space-around'
+ | 'space-between'
+ | 'space-evenly'
+
+export interface RowProps {
+ /** 栅格间距（px）：数字（水平=垂直）或 [水平, 垂直] */
+ gutter?: GridGutter
+ /** 交叉轴对齐 */
+ align?: RowAlign
+ /** 主轴对齐 */
+ justify?: RowJustify
+ /** 是否换行 */
+ wrap?: boolean
+}
+
+export interface ColProps {
+ /** 栅格占位格数 0-24 */
+ span?: number | string
+ /** 左侧偏移格数 */
+ offset?: number | string
+ /** 排序 */
+ order?: number | string
+ /** 右移格数 */
+ push?: number | string
+ /** 左移格数 */
+ pull?: number | string
+ /** flex 布局属性：数字（flex-grow）或 CSS flex 简写 */
+ flex?: number | string
+}
diff --git a/code/g3soft-libs/packages/ui/src/index.ts b/code/g3soft-libs/packages/ui/src/index.ts
index c67f819f..498d2400 100644
--- a/code/g3soft-libs/packages/ui/src/index.ts
+++ b/code/g3soft-libs/packages/ui/src/index.ts
@@ -1,14 +1,64 @@
import type { App, Plugin } from 'vue'
-import G3Button from './button/Button.vue'
-import G3ConfigProvider from './config-provider/ConfigProvider.vue'
import { setGlobalConfig, type GlobalConfig } from './_utils/global-config'
import { setBaseZIndex } from './_utils/z-index'
-export { G3Button }
-export { G3ConfigProvider }
-export type { ButtonProps, ButtonSize, ButtonType } from './button/types'
+// ---------------- 组件 ----------------
+import { G3Button } from './button'
+import { G3ButtonGroup, G3ButtonGroupSeparator } from './button-group'
+import { G3Checkbox } from './checkbox'
+import { G3CalendarPanel, G3DatePicker, G3RangePicker, G3TimeSelect } from './date'
+import { G3Drawer } from './drawer'
+import { G3Dropdown, G3DropdownItem } from './dropdown'
+import { G3Form, G3FormGroup, G3FormItem } from './form'
+import { G3Col, G3Row } from './grid'
+import { G3Input } from './input'
+import { G3MessageContainer } from './message'
+import { G3Modal } from './modal'
+import { G3NotificationContainer } from './notification'
+import { G3Pagination } from './pagination'
+import { G3Popover } from './popover'
+import { G3Radio, G3RadioGroup } from './radio'
+import { G3Scrollbar } from './scrollbar'
+import { G3Segmented } from './segmented'
+import { G3Select } from './select'
+import { G3Space } from './space'
+import { G3Spin } from './spin'
+import { G3Splitter, G3SplitterPanel } from './splitter'
+import { G3Switch } from './switch'
+import { G3TabPane, G3Tabs } from './tabs'
+import { G3Tag } from './tag'
+import { G3Tooltip } from './tooltip'
+import { G3Tree } from './tree'
-// ConfigProvider / config
+export * from './button'
+export * from './button-group'
+export * from './checkbox'
+export * from './date'
+export * from './drawer'
+export * from './dropdown'
+export * from './form'
+export * from './grid'
+export * from './input'
+export * from './message'
+export * from './modal'
+export * from './notification'
+export * from './pagination'
+export * from './popover'
+export * from './radio'
+export * from './scrollbar'
+export * from './segmented'
+export * from './select'
+export * from './space'
+export * from './spin'
+export * from './splitter'
+export * from './switch'
+export * from './tabs'
+export * from './tag'
+export * from './tooltip'
+export * from './tree'
+export * from './config-provider'
+
+// ConfigProvider / config（桶文件已导出，这里补齐历史具名出口）
export { configProviderKey, useConfig } from './config-provider/context'
export type { ConfigContext } from './config-provider/context'
export type { ConfigProviderProps, G3ThemeConfig, ThemeScope } from './config-provider/types'
@@ -17,12 +67,42 @@ export type { ConfigProviderProps, G3ThemeConfig, ThemeScope } from './config-pr
export { useNamespace, COMPILE_TIME_NAMESPACE, COMPILE_TIME_STATE_PREFIX } from './_composables/useNamespace'
export type { UseNamespaceReturn } from './_composables/useNamespace'
export { useLocale } from './_composables/useLocale'
+export { useComponentDefaults } from './_composables/useComponentDefaults'
+export { useFloating } from './_composables/useFloating'
+export type { UseFloatingOptions, UseFloatingReturn } from './_composables/useFloating'
+export { useUnwrappedTrigger } from './_composables/useUnwrappedTrigger'
+export type {
+ UseUnwrappedTriggerOptions,
+ UseUnwrappedTriggerReturn,
+} from './_composables/useUnwrappedTrigger'
+export { usePopupContainer, resolvePopupContainer } from './_composables/usePopupContainer'
// utils
export { getGlobalConfig, setGlobalConfig } from './_utils/global-config'
export type { GlobalConfig, PopupContainer } from './_utils/global-config'
-export { getBaseZIndex, nextZIndex, resetZIndex, setBaseZIndex } from './_utils/z-index'
+export {
+ getBaseZIndex,
+ nextZIndex,
+ releaseZIndex,
+ resetZIndex,
+ setBaseZIndex,
+} from './_utils/z-index'
+export type { ZIndexLayer } from './_utils/z-index'
export { derivePalette } from './_utils/color'
+export { computePosition, getViewport, PLACEMENTS, VIEWPORT_MARGIN } from './_utils/position'
+export type {
+ ComputePositionOptions,
+ ComputePositionResult,
+ Placement,
+ PlacementAlign,
+ PlacementBase,
+ RectLike,
+ SizeLike,
+} from './_utils/position'
+export { focusFirst, getFocusable, trapFocus } from './_utils/focus'
+export { getScrollLockCount, lockScroll, unlockScroll } from './_utils/scroll'
+export { bindDrag, bindResize } from './_utils/drag'
+export type { BindDragOptions, BindResizeOptions, DragHandle, ResizeHandle } from './_utils/drag'
// locale
export { enUS, zhCN } from './locale'
@@ -30,7 +110,45 @@ export type { Locale } from './locale'
export interface G3UIOptions extends GlobalConfig {}
-const components = { G3Button, G3ConfigProvider }
+const components = {
+ G3Button,
+ G3ButtonGroup,
+ G3ButtonGroupSeparator,
+ G3CalendarPanel,
+ G3Checkbox,
+ G3Col,
+ G3DatePicker,
+ G3Drawer,
+ G3Dropdown,
+ G3DropdownItem,
+ G3Form,
+ G3FormGroup,
+ G3FormItem,
+ G3Input,
+ G3MessageContainer,
+ G3Modal,
+ G3NotificationContainer,
+ G3Pagination,
+ G3Popover,
+ G3Radio,
+ G3RadioGroup,
+ G3RangePicker,
+ G3Row,
+ G3Scrollbar,
+ G3Segmented,
+ G3Select,
+ G3Space,
+ G3Spin,
+ G3Splitter,
+ G3SplitterPanel,
+ G3Switch,
+ G3TabPane,
+ G3Tabs,
+ G3Tag,
+ G3TimeSelect,
+ G3Tooltip,
+ G3Tree,
+}
function applyConfig(options: G3UIOptions): void {
setGlobalConfig(options)
@@ -41,7 +159,7 @@ function applyConfig(options: G3UIOptions): void {
* 可选的全量注册插件。
* 按需 import 是主路径；这里只是为不熟悉按需引入的团队提供便利入口。
*
- * 函数式调用（Message.xxx() 等组件树外实例）拿不到 inject 上下文，
+ * 函数式调用（G3Message.xxx() 等组件树外实例）拿不到 inject 上下文，
* 用 G3UI.config({ namespace }) 或 app.use(G3UI, { namespace }) 写入全局兜底。
*/
export const G3UI: Plugin & { config: (options?: G3UIOptions) => void } = {
diff --git a/code/g3soft-libs/packages/ui/src/input/Input.test.ts b/code/g3soft-libs/packages/ui/src/input/Input.test.ts
new file mode 100644
index 00000000..0b147841
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/input/Input.test.ts
@@ -0,0 +1,126 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import G3Input from './Input.vue'
+
+function mountInput(props: Record = {}) {
+ return mount(G3Input, { props: { modelValue: '', ...props } })
+}
+
+describe('Input 单行模式', () => {
+ it('输入即同步 v-model', async () => {
+ const wrapper = mountInput()
+ await wrapper.find('input').setValue('你好')
+
+ expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['你好'])
+ })
+
+ it('password 模式可切换明文，切换按钮带 aria 状态', async () => {
+ const wrapper = mountInput({ type: 'password', modelValue: '123456' })
+
+ expect(wrapper.find('input').attributes('type')).toBe('password')
+ const toggle = wrapper.find('.g3-input__password-toggle')
+ expect(toggle.attributes('aria-pressed')).toBe('false')
+
+ await toggle.trigger('click')
+ expect(wrapper.find('input').attributes('type')).toBe('text')
+ expect(wrapper.find('.g3-input__password-toggle').attributes('aria-pressed')).toBe('true')
+ })
+
+ it('number 模式输入时净化（只留一个小数点），失焦时才提交数字', async () => {
+ const wrapper = mountInput({ type: 'number', modelValue: '' })
+ const input = wrapper.find('input')
+
+ await input.setValue('12.3.4')
+ // 净化后的十进制值；setValue 可能同时触发 change（提交为 Number），故统一按字符串比对
+ expect(String(wrapper.emitted('update:modelValue')?.at(-1)?.[0])).toBe('12.34')
+
+ await input.setValue('12.5')
+ await input.trigger('blur')
+ expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([12.5])
+ })
+
+ it('number 模式的空值保持空串，不变成 0', async () => {
+ const wrapper = mountInput({ type: 'number', modelValue: 5 })
+ const input = wrapper.find('input')
+
+ await input.setValue('')
+ await input.trigger('blur')
+ expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([''])
+ })
+
+ it('status=error 输出 aria-invalid，禁用态使用 g3-input--disabled 修饰类', () => {
+ const wrapper = mountInput({ status: 'error' })
+ expect(wrapper.find('input').attributes('aria-invalid')).toBe('true')
+
+ const disabled = mountInput({ disabled: true })
+ expect(disabled.classes()).toContain('g3-input--disabled')
+ expect(disabled.find('input').attributes('disabled')).toBeDefined()
+ })
+})
+
+describe('Input 清除与计数', () => {
+ it('allowClear：聚焦且有值时出现清除按钮，点击后清空并 emit clear', async () => {
+ const wrapper = mountInput({ allowClear: true, modelValue: 'abc' })
+ expect(wrapper.find('.g3-input__clear').exists()).toBe(false)
+
+ await wrapper.find('input').trigger('focus')
+ const clear = wrapper.find('.g3-input__clear')
+ expect(clear.exists()).toBe(true)
+
+ await clear.trigger('click')
+ expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([''])
+ expect(wrapper.emitted('clear')).toHaveLength(1)
+ })
+
+ it('showCount 显示「当前 / 上限」，无上限时只显示当前', async () => {
+ const withMax = mountInput({ showCount: true, maxlength: 20, modelValue: 'abcd' })
+ expect(withMax.find('.g3-input__count').text()).toBe('4 / 20')
+
+ const noMax = mountInput({ showCount: true, modelValue: 'ab' })
+ expect(noMax.find('.g3-input__count').text()).toBe('2')
+ })
+})
+
+describe('Input 多行模式', () => {
+ it('渲染 textarea 并按 rows 设置行数', () => {
+ const wrapper = mountInput({ type: 'textarea', rows: 5 })
+ const textarea = wrapper.find('textarea')
+
+ expect(textarea.exists()).toBe(true)
+ expect(textarea.attributes('rows')).toBe('5')
+ expect(wrapper.find('input').exists()).toBe(false)
+ })
+
+ it('footer 内提供拖拽手柄（role=slider）与字数统计', () => {
+ const wrapper = mountInput({ type: 'textarea', showCount: true, maxlength: 100, modelValue: 'abc' })
+ const handle = wrapper.find('.g3-input__resize-handle')
+
+ expect(handle.attributes('role')).toBe('slider')
+ expect(handle.attributes('aria-orientation')).toBe('vertical')
+ expect(wrapper.find('.g3-input__count').text()).toBe('3 / 100')
+ })
+
+ it('多行模式不渲染单行的清除按钮与前缀插槽位置', () => {
+ const wrapper = mountInput({ type: 'textarea', allowClear: true, modelValue: 'abc' })
+ expect(wrapper.find('.g3-input__clear').exists()).toBe(false)
+ })
+
+ it('只读 / 禁用时不出现拖拽手柄', () => {
+ expect(mountInput({ type: 'textarea', readonly: true }).find('.g3-input__resize-handle').exists()).toBe(false)
+ expect(mountInput({ type: 'textarea', disabled: true }).find('.g3-input__resize-handle').exists()).toBe(false)
+ })
+})
+
+describe('Input 暴露的方法', () => {
+ it('focus / select / blur 可调用且不抛错', () => {
+ const wrapper = mountInput({ modelValue: 'abc' })
+ const vm = wrapper.vm as unknown as { focus: () => void; select: () => void; blur: () => void }
+
+ expect(() => vm.focus()).not.toThrow()
+ expect(() => vm.select()).not.toThrow()
+ expect(() => vm.blur()).not.toThrow()
+
+ const textarea = mountInput({ type: 'textarea', modelValue: 'abc' })
+ expect(() => (textarea.vm as unknown as { focus: () => void }).focus()).not.toThrow()
+ })
+})
diff --git a/code/g3soft-libs/packages/ui/src/input/Input.vue b/code/g3soft-libs/packages/ui/src/input/Input.vue
new file mode 100644
index 00000000..f07153af
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/input/Input.vue
@@ -0,0 +1,583 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ countText }}
+
+
+ {{ countText }}
+
+
+
+
+
+
+
+ {{ content }}
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/message/MessageContainer.test.ts b/code/g3soft-libs/packages/ui/src/message/MessageContainer.test.ts
new file mode 100644
index 00000000..106694aa
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/message/MessageContainer.test.ts
@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import G3MessageContainer from './MessageContainer.vue'
+import { messageState } from './store'
+
+/**
+ * 回归重点：方位对齐类曾经手写成 `g3-message-list--xxx`，而样式表里是
+ * `g3-message__list--xxx`（BEM 双下划线），导致 9 个方位的样式全部失效，
+ * 消息一律堆在左上角。这里同时锁住「类名形状」与「默认方位」。
+ */
+afterEach(() => {
+ messageState.items.splice(0, messageState.items.length)
+})
+
+function pushMessage(placement?: string) {
+ messageState.items.push({
+ id: `m-${messageState.items.length + 1}`,
+ type: 'info',
+ content: '提示内容',
+ duration: 3000,
+ closable: false,
+ placement: (placement ?? 'top-center') as never,
+ })
+}
+
+describe('MessageContainer 方位', () => {
+ it('方位类名使用 BEM 双下划线，且能对上 top / center-h', async () => {
+ pushMessage('top-center')
+ const wrapper = mount(G3MessageContainer, { props: { zIndex: 5001 } })
+ await nextTick()
+
+ // 九个方位容器常驻，要取「装着这条消息」的那个
+ const list = wrapper.findAll('.g3-message__list').find((item) => item.text().includes('提示内容'))
+ expect(list).toBeDefined()
+ expect(list!.classes()).toContain('g3-message__list--top')
+ expect(list!.classes()).toContain('g3-message__list--center-h')
+ // 反向锁：不允许再出现 'g3-message-list--*' 这种手写拼法
+ expect(list!.classes().some((name) => name.startsWith('g3-message-list--'))).toBe(false)
+ })
+
+ it('其他方位映射到对应的垂直 / 水平类', async () => {
+ pushMessage('bottom-right')
+ pushMessage('center-left')
+ const wrapper = mount(G3MessageContainer)
+ await nextTick()
+
+ const classNames = wrapper.findAll('.g3-message__list').flatMap((list) => list.classes())
+ expect(classNames).toContain('g3-message__list--bottom')
+ expect(classNames).toContain('g3-message__list--right')
+ expect(classNames).toContain('g3-message__list--center-v')
+ expect(classNames).toContain('g3-message__list--left')
+ })
+
+ it('九个方位容器常驻，保证进出场动画稳定触发', () => {
+ const wrapper = mount(G3MessageContainer)
+ expect(wrapper.findAll('.g3-message__list')).toHaveLength(9)
+ })
+
+ it('容器层级由管理器下发，消息项渲染在对应方位容器内', async () => {
+ pushMessage('top-center')
+ const wrapper = mount(G3MessageContainer, { props: { zIndex: 5001 } })
+ await nextTick()
+
+ expect(wrapper.find('.g3-message__container').attributes('style')).toContain('z-index: 5001')
+ const list = wrapper.findAll('.g3-message__list').find((item) => item.text().includes('提示内容'))
+ expect(list?.classes()).toContain('g3-message__list--top')
+ })
+
+ it('不同方位的消息互不串位', async () => {
+ pushMessage('top-left')
+ pushMessage('bottom-right')
+ const wrapper = mount(G3MessageContainer)
+ await nextTick()
+
+ const lists = wrapper.findAll('.g3-message__list').filter((list) => list.text().includes('提示内容'))
+ expect(lists).toHaveLength(2)
+ expect(lists[0].classes()).toContain('g3-message__list--top')
+ expect(lists[1].classes()).toContain('g3-message__list--bottom')
+ })
+})
diff --git a/code/g3soft-libs/packages/ui/src/message/MessageContainer.vue b/code/g3soft-libs/packages/ui/src/message/MessageContainer.vue
new file mode 100644
index 00000000..f196a21f
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/message/MessageContainer.vue
@@ -0,0 +1,155 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/message/index.ts b/code/g3soft-libs/packages/ui/src/message/index.ts
new file mode 100644
index 00000000..6c4e8084
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/message/index.ts
@@ -0,0 +1,12 @@
+export { default as G3MessageItem } from './Message.vue'
+export { default as G3MessageContainer } from './MessageContainer.vue'
+export { default as G3Message } from './manager'
+export { messageState } from './store'
+export type {
+ MessageConfig,
+ MessageHandle,
+ MessageItemState,
+ MessageOptions,
+ MessagePlacement,
+ MessageType,
+} from './types'
diff --git a/code/g3soft-libs/packages/ui/src/message/manager.ts b/code/g3soft-libs/packages/ui/src/message/manager.ts
new file mode 100644
index 00000000..0424eef1
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/message/manager.ts
@@ -0,0 +1,85 @@
+import { createVNode, render } from 'vue'
+import { nextZIndex, releaseZIndex } from '../_utils/z-index'
+import G3MessageContainer from './MessageContainer.vue'
+import { messageState } from './store'
+import type { MessageConfig, MessageHandle, MessageOptions } from './types'
+
+/* ---------- 单例容器 ---------- */
+let containerEl: HTMLElement | null = null
+let containerZIndex = 0
+let seed = 0
+
+function ensureContainer() {
+ if (containerEl || typeof document === 'undefined') return
+ containerEl = document.createElement('div')
+ document.body.appendChild(containerEl)
+ // 反馈类提示层级最高：必须浮于弹窗之上，弹窗内操作的成功 / 失败提示才可见
+ containerZIndex = nextZIndex('feedback')
+ render(createVNode(G3MessageContainer, { zIndex: containerZIndex }), containerEl)
+}
+
+/* ---------- 增删 ---------- */
+function remove(id: string) {
+ const index = messageState.items.findIndex((item) => item.id === id)
+ if (index !== -1) messageState.items.splice(index, 1)
+}
+
+function open(options: MessageOptions): MessageHandle {
+ ensureContainer()
+ const id = `g3-message-${++seed}`
+ // 逐项归一，避免 options 里显式的 undefined 覆盖掉全局默认值
+ messageState.items.push({
+ id,
+ type: options.type ?? 'info',
+ content: options.content ?? '',
+ duration: options.duration ?? messageState.duration,
+ closable: options.closable ?? false,
+ placement: options.placement ?? messageState.placement,
+ })
+ return { close: () => remove(id) }
+}
+
+type ShortcutOptions = Omit
+
+/**
+ * 轻提示 —— 命令式调用，组件树外挂载（自动读取全局配置的命名空间 / 语言包 / 容器）。
+ *
+ * ```ts
+ * G3Message.success('保存成功')
+ * G3Message.error('保存失败', { duration: 0 }) // duration <= 0 不自动关闭
+ * ```
+ */
+export const G3Message = {
+ /** 通用入口 */
+ open,
+ info: (content: string, options?: ShortcutOptions) => open({ ...options, content, type: 'info' }),
+ success: (content: string, options?: ShortcutOptions) =>
+ open({ ...options, content, type: 'success' }),
+ warning: (content: string, options?: ShortcutOptions) =>
+ open({ ...options, content, type: 'warning' }),
+ error: (content: string, options?: ShortcutOptions) =>
+ open({ ...options, content, type: 'error' }),
+ /** 关闭指定消息 */
+ close: (id: string) => remove(id),
+ /** 全局配置：默认方位与默认时长 */
+ config: (config: MessageConfig) => {
+ if (config.placement) messageState.placement = config.placement
+ if (config.duration != null) messageState.duration = config.duration
+ },
+ /** 清空全部消息并卸载容器（切换租户 / 登出时用） */
+ destroy: () => {
+ messageState.items.splice(0, messageState.items.length)
+ if (!containerEl) return
+ render(null, containerEl)
+ containerEl.remove()
+ containerEl = null
+ if (containerZIndex) {
+ releaseZIndex(containerZIndex)
+ containerZIndex = 0
+ }
+ },
+ /** 当前存活的消息条数（调试用） */
+ count: () => messageState.items.length,
+}
+
+export default G3Message
diff --git a/code/g3soft-libs/packages/ui/src/message/store.ts b/code/g3soft-libs/packages/ui/src/message/store.ts
new file mode 100644
index 00000000..b3b8105f
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/message/store.ts
@@ -0,0 +1,15 @@
+import { reactive } from 'vue'
+import type { MessageItemState, MessagePlacement } from './types'
+
+/** 全局共享的 Message 活跃列表：管理器写入、容器读取，保证响应式联动 */
+export const messageState = reactive<{
+ items: MessageItemState[]
+ /** 默认方位 */
+ placement: MessagePlacement
+ /** 默认自动关闭时长（ms） */
+ duration: number
+}>({
+ items: [],
+ placement: 'top-center',
+ duration: 3000,
+})
diff --git a/code/g3soft-libs/packages/ui/src/message/types.ts b/code/g3soft-libs/packages/ui/src/message/types.ts
new file mode 100644
index 00000000..294dd9af
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/message/types.ts
@@ -0,0 +1,51 @@
+/** 轻提示类型 */
+export type MessageType = 'info' | 'success' | 'warning' | 'error'
+
+/** 轻提示方位 */
+export type MessagePlacement =
+ | 'top-left'
+ | 'top-center'
+ | 'top-right'
+ | 'center-left'
+ | 'center'
+ | 'center-right'
+ | 'bottom-left'
+ | 'bottom-center'
+ | 'bottom-right'
+
+export interface MessageOptions {
+ /** 文案内容 */
+ content: string
+ /** 类型 */
+ type?: MessageType
+ /** 自动关闭时长（ms），<=0 时不自动关闭 */
+ duration?: number
+ /** 是否显示关闭按钮 */
+ closable?: boolean
+ /** 显示方位，默认取全局配置 */
+ placement?: MessagePlacement
+}
+
+/** 容器内单条消息的完整状态 */
+export interface MessageItemState {
+ id: string
+ content: string
+ type: MessageType
+ duration: number
+ closable: boolean
+ placement: MessagePlacement
+}
+
+/** 命令式调用的返回句柄 */
+export interface MessageHandle {
+ /** 关闭这一条 */
+ close: () => void
+}
+
+/** 全局配置项 */
+export interface MessageConfig {
+ /** 默认方位 */
+ placement?: MessagePlacement
+ /** 默认自动关闭时长 */
+ duration?: number
+}
diff --git a/code/g3soft-libs/packages/ui/src/modal/Modal.vue b/code/g3soft-libs/packages/ui/src/modal/Modal.vue
new file mode 100644
index 00000000..809e4047
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/modal/Modal.vue
@@ -0,0 +1,539 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ resolvedCancelText }}
+
+
+ {{ resolvedConfirmText }}
+
+
+
+
+
+
+
+
+
+
+
+
{{ content }}
+
+
+ {{ cancelText ?? locale.common.cancel }}
+
+
+ {{ confirmText ?? locale.common.confirm }}
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/modal/confirm.ts b/code/g3soft-libs/packages/ui/src/modal/confirm.ts
new file mode 100644
index 00000000..178b008a
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/modal/confirm.ts
@@ -0,0 +1,39 @@
+import { createVNode, render } from 'vue'
+import G3ModalConfirm from './ModalConfirm.vue'
+import type { ModalConfirmHandle, ModalConfirmOptions } from './types'
+
+/**
+ * 命令式确认对话框：自建容器挂到 body，关闭动画结束（Modal 的 closed 事件）
+ * 后才卸载容器，保证退场动画完整播放。
+ *
+ * 用法：
+ * ```ts
+ * G3Modal.confirm({
+ * title: '确定删除？',
+ * content: '此操作不可恢复',
+ * confirmText: '删除',
+ * confirmButtonProps: { danger: true },
+ * onConfirm: async () => { ... }, // 返回 Promise 时按钮进入 loading；reject 保持打开
+ * onCancel: () => {},
+ * })
+ * ```
+ */
+export function confirm(options: ModalConfirmOptions = {}): ModalConfirmHandle {
+ const container = document.createElement('div')
+ const host = typeof document === 'undefined' ? null : document.body
+ host?.appendChild(container)
+
+ let destroyed = false
+ function destroy() {
+ if (destroyed) return
+ destroyed = true
+ render(null, container)
+ container.remove()
+ }
+
+ render(createVNode(G3ModalConfirm, { ...options, onClosed: destroy }), container)
+
+ return { destroy }
+}
+
+export default confirm
diff --git a/code/g3soft-libs/packages/ui/src/modal/index.ts b/code/g3soft-libs/packages/ui/src/modal/index.ts
new file mode 100644
index 00000000..f37e3738
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/modal/index.ts
@@ -0,0 +1,8 @@
+import G3ModalComponent from './Modal.vue'
+import { confirm } from './confirm'
+
+/** 对话框组件（带命令式 `confirm` 方法） */
+export const G3Modal = Object.assign(G3ModalComponent, { confirm })
+
+export { confirm as modalConfirm }
+export type { ModalConfirmHandle, ModalConfirmOptions, ModalProps } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/modal/types.ts b/code/g3soft-libs/packages/ui/src/modal/types.ts
new file mode 100644
index 00000000..1644ee59
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/modal/types.ts
@@ -0,0 +1,61 @@
+import type { ButtonProps } from '../button/types'
+import type { PopupContainer } from '../_utils/global-config'
+
+export interface ModalProps {
+ /** 受控打开状态；不传则非受控，由 defaultOpen + 内部状态控制 */
+ open?: boolean
+ /** 非受控时的初始打开状态 */
+ defaultOpen?: boolean
+ /** 标题文字 */
+ title?: string
+ /** 面板宽度（px 数字或任意 CSS 宽度字符串） */
+ width?: number | string
+ /** 垂直居中显示 */
+ centered?: boolean
+ /** 是否显示遮罩 */
+ mask?: boolean
+ /** 点击遮罩关闭 */
+ maskClosable?: boolean
+ /** Esc 关闭 */
+ keyboard?: boolean
+ /** 显示右上角关闭按钮 */
+ closable?: boolean
+ /** 显示右上角全屏切换按钮 */
+ fullscreen?: boolean
+ /** 允许拖动右下角手柄调整宽高 */
+ resizable?: boolean
+ /** 显示底部按钮区（确定 / 取消）；配合 #footer 插槽自定义 */
+ footer?: boolean
+ /** 确认按钮文字 */
+ confirmText?: string
+ /** 取消按钮文字 */
+ cancelText?: string
+ /** 确认中：按钮 loading 且阻止一切关闭操作 */
+ confirmLoading?: boolean
+ /** 弹层挂载容器；不传时取 ConfigProvider.popupContainer，再退回 body */
+ popupContainer?: PopupContainer
+}
+
+/** 命令式确认对话框的参数 */
+export interface ModalConfirmOptions {
+ /** 标题 */
+ title?: string
+ /** 正文（纯文本）；也可用 content 插槽之外的富内容由 #content 提供 */
+ content?: string
+ /** 确认按钮文字 */
+ confirmText?: string
+ /** 取消按钮文字 */
+ cancelText?: string
+ /** 透传给确认按钮；`danger: true` 等价于 `type: 'danger'` */
+ confirmButtonProps?: Partial & { danger?: boolean }
+ /** 确认回调；返回 Promise 时按钮进入 loading（resolve 关闭、reject 保持打开） */
+ onConfirm?: () => void | Promise
+ /** 取消回调；只有点「取消」按钮才会触发（遮罩 / Esc / 关闭按钮为静默关闭） */
+ onCancel?: () => void
+}
+
+/** 命令式确认对话框的句柄 */
+export interface ModalConfirmHandle {
+ /** 立即关闭并卸载（不等退场动画） */
+ destroy: () => void
+}
diff --git a/code/g3soft-libs/packages/ui/src/notification/Notification.vue b/code/g3soft-libs/packages/ui/src/notification/Notification.vue
new file mode 100644
index 00000000..3b2bdd83
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/notification/Notification.vue
@@ -0,0 +1,157 @@
+
+
+
+
+
+
+
{{ title }}
+
{{ description }}
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/notification/index.ts b/code/g3soft-libs/packages/ui/src/notification/index.ts
new file mode 100644
index 00000000..797e68c6
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/notification/index.ts
@@ -0,0 +1,12 @@
+export { default as G3NotificationItem } from './Notification.vue'
+export { default as G3NotificationContainer } from './NotificationContainer.vue'
+export { default as G3Notification } from './manager'
+export { notificationState } from './store'
+export type {
+ NotificationConfig,
+ NotificationHandle,
+ NotificationItemState,
+ NotificationOptions,
+ NotificationPlacement,
+ NotificationType,
+} from './types'
diff --git a/code/g3soft-libs/packages/ui/src/notification/manager.ts b/code/g3soft-libs/packages/ui/src/notification/manager.ts
new file mode 100644
index 00000000..13791fb5
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/notification/manager.ts
@@ -0,0 +1,85 @@
+import { createVNode, render } from 'vue'
+import { nextZIndex, releaseZIndex } from '../_utils/z-index'
+import G3NotificationContainer from './NotificationContainer.vue'
+import { notificationState } from './store'
+import type {
+ NotificationConfig,
+ NotificationHandle,
+ NotificationOptions,
+} from './types'
+
+/* ---------- 单例容器 ---------- */
+let containerEl: HTMLElement | null = null
+let containerZIndex = 0
+let seed = 0
+
+function ensureContainer() {
+ if (containerEl || typeof document === 'undefined') return
+ containerEl = document.createElement('div')
+ document.body.appendChild(containerEl)
+ // 与轻提示同档（feedback）：必须浮于弹窗之上
+ containerZIndex = nextZIndex('feedback')
+ render(createVNode(G3NotificationContainer, { zIndex: containerZIndex }), containerEl)
+}
+
+function remove(id: string) {
+ const index = notificationState.items.findIndex((item) => item.id === id)
+ if (index !== -1) notificationState.items.splice(index, 1)
+}
+
+function open(options: NotificationOptions): NotificationHandle {
+ ensureContainer()
+ const id = `g3-notification-${++seed}`
+ // 逐项归一，避免 options 里显式的 undefined 覆盖掉全局默认值
+ notificationState.items.push({
+ id,
+ type: options.type ?? 'info',
+ title: options.title ?? '',
+ description: options.description ?? '',
+ duration: options.duration ?? notificationState.duration,
+ closable: options.closable ?? true,
+ placement: options.placement ?? notificationState.placement,
+ })
+ return { close: () => remove(id) }
+}
+
+type ShortcutOptions = Omit
+
+/**
+ * 通知提醒 —— 命令式调用，组件树外挂载（自动读取全局配置的命名空间 / 语言包 / 容器）。
+ *
+ * ```ts
+ * G3Notification.success({ title: '发布成功', description: '版本 1.2.0 已上线' })
+ * ```
+ */
+export const G3Notification = {
+ /** 通用入口 */
+ open,
+ info: (options: ShortcutOptions) => open({ ...options, type: 'info' }),
+ success: (options: ShortcutOptions) => open({ ...options, type: 'success' }),
+ warning: (options: ShortcutOptions) => open({ ...options, type: 'warning' }),
+ error: (options: ShortcutOptions) => open({ ...options, type: 'error' }),
+ /** 关闭指定通知 */
+ close: (id: string) => remove(id),
+ /** 全局配置：默认方位与默认时长 */
+ config: (config: NotificationConfig) => {
+ if (config.placement) notificationState.placement = config.placement
+ if (config.duration != null) notificationState.duration = config.duration
+ },
+ /** 清空全部通知并卸载容器 */
+ destroy: () => {
+ notificationState.items.splice(0, notificationState.items.length)
+ if (!containerEl) return
+ render(null, containerEl)
+ containerEl.remove()
+ containerEl = null
+ if (containerZIndex) {
+ releaseZIndex(containerZIndex)
+ containerZIndex = 0
+ }
+ },
+ /** 当前存活的通知条数（调试用） */
+ count: () => notificationState.items.length,
+}
+
+export default G3Notification
diff --git a/code/g3soft-libs/packages/ui/src/notification/store.ts b/code/g3soft-libs/packages/ui/src/notification/store.ts
new file mode 100644
index 00000000..4b2871c5
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/notification/store.ts
@@ -0,0 +1,15 @@
+import { reactive } from 'vue'
+import type { NotificationItemState, NotificationPlacement } from './types'
+
+/** 全局共享的 Notification 活跃列表：管理器写入、容器读取，保证响应式联动 */
+export const notificationState = reactive<{
+ items: NotificationItemState[]
+ /** 默认方位 */
+ placement: NotificationPlacement
+ /** 默认自动关闭时长（ms） */
+ duration: number
+}>({
+ items: [],
+ placement: 'top-right',
+ duration: 4500,
+})
diff --git a/code/g3soft-libs/packages/ui/src/notification/types.ts b/code/g3soft-libs/packages/ui/src/notification/types.ts
new file mode 100644
index 00000000..c80f2bc4
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/notification/types.ts
@@ -0,0 +1,47 @@
+import type { MessageType } from '../message/types'
+
+/** 通知类型 */
+export type NotificationType = MessageType
+
+/** 通知方位（通知只出现在四角） */
+export type NotificationPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+
+export interface NotificationOptions {
+ /** 标题 */
+ title?: string
+ /** 描述内容 */
+ description?: string
+ /** 类型 */
+ type?: NotificationType
+ /** 自动关闭时长（ms），<=0 时不自动关闭 */
+ duration?: number
+ /** 是否显示关闭按钮 */
+ closable?: boolean
+ /** 显示方位，默认取全局配置 */
+ placement?: NotificationPlacement
+}
+
+/** 容器内单条通知的完整状态 */
+export interface NotificationItemState {
+ id: string
+ title: string
+ description: string
+ type: NotificationType
+ duration: number
+ closable: boolean
+ placement: NotificationPlacement
+}
+
+/** 命令式调用的返回句柄 */
+export interface NotificationHandle {
+ /** 关闭这一条 */
+ close: () => void
+}
+
+/** 全局配置项 */
+export interface NotificationConfig {
+ /** 默认方位 */
+ placement?: NotificationPlacement
+ /** 默认自动关闭时长 */
+ duration?: number
+}
diff --git a/code/g3soft-libs/packages/ui/src/pagination/Pagination.vue b/code/g3soft-libs/packages/ui/src/pagination/Pagination.vue
new file mode 100644
index 00000000..82de3f38
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/pagination/Pagination.vue
@@ -0,0 +1,364 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/pagination/index.ts b/code/g3soft-libs/packages/ui/src/pagination/index.ts
new file mode 100644
index 00000000..08fa9bdb
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/pagination/index.ts
@@ -0,0 +1,2 @@
+export { default as G3Pagination } from './Pagination.vue'
+export type { PaginationProps, PaginationTotalScope } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/pagination/types.ts b/code/g3soft-libs/packages/ui/src/pagination/types.ts
new file mode 100644
index 00000000..f2f9ab37
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/pagination/types.ts
@@ -0,0 +1,29 @@
+export interface PaginationProps {
+ /** 当前页（v-model:current）；不传则内部维护，默认 1 */
+ current?: number
+ /** 每页条数（v-model:pageSize）；不传则内部维护，默认 10 */
+ pageSize?: number
+ /** 总条数 */
+ total?: number
+ /** 整组禁用 */
+ disabled?: boolean
+ /** 仅 1 页时隐藏整个分页器 */
+ hideOnSinglePage?: boolean
+ /** 显示每页条数选择器 */
+ showSizeChanger?: boolean
+ /** 每页条数选项 */
+ pageSizeOptions?: Array
+ /** 显示快速跳转输入框 */
+ showQuickJumper?: boolean
+ /** 显示「共 X 条」 */
+ showTotal?: boolean
+}
+
+/** #showTotal 插槽作用域 */
+export interface PaginationTotalScope {
+ total: number
+ /** 当前页第一条的序号（total 为 0 时是 0） */
+ from: number
+ /** 当前页最后一条的序号 */
+ to: number
+}
diff --git a/code/g3soft-libs/packages/ui/src/popover/Popover.vue b/code/g3soft-libs/packages/ui/src/popover/Popover.vue
new file mode 100644
index 00000000..45257dd6
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/popover/Popover.vue
@@ -0,0 +1,401 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/popover/index.ts b/code/g3soft-libs/packages/ui/src/popover/index.ts
new file mode 100644
index 00000000..da18f3e7
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/popover/index.ts
@@ -0,0 +1,2 @@
+export { default as G3Popover } from './Popover.vue'
+export type { PopoverProps, PopoverTrigger } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/popover/types.ts b/code/g3soft-libs/packages/ui/src/popover/types.ts
new file mode 100644
index 00000000..b8b9055e
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/popover/types.ts
@@ -0,0 +1,34 @@
+import type { PopupContainer } from '../_utils/global-config'
+import type { Placement } from '../_utils/position'
+
+/** 触发方式 */
+export type PopoverTrigger = 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual'
+
+export interface PopoverProps {
+ /** 受控打开状态；不传则非受控，由 defaultOpen + 内部状态控制 */
+ open?: boolean
+ /** 非受控时的初始打开状态 */
+ defaultOpen?: boolean
+ /** 触发方式 */
+ trigger?: PopoverTrigger
+ /** 期望方位 */
+ placement?: Placement
+ /** 与触发器的间距（px） */
+ offset?: number
+ /** 是否显示箭头 */
+ arrow?: boolean
+ /** 禁用态 */
+ disabled?: boolean
+ /** hover 触发打开延迟（ms） */
+ mouseEnterDelay?: number
+ /** hover 触发关闭延迟（ms） */
+ mouseLeaveDelay?: number
+ /** 透传到浮层内容盒子的额外 class，便于派生组件定制内容样式 */
+ contentClass?: string
+ /** 浮层宽度是否以触发器宽度为下限（Select / DatePicker 等需要对齐触发框） */
+ followTriggerWidth?: boolean
+ /** 零包裹模式：把事件直接注入触发器单根 vnode，不再包一层 span */
+ unwrapped?: boolean
+ /** 弹层挂载容器；不传时取 ConfigProvider.popupContainer，再退回 body */
+ popupContainer?: PopupContainer
+}
diff --git a/code/g3soft-libs/packages/ui/src/radio/Radio.vue b/code/g3soft-libs/packages/ui/src/radio/Radio.vue
new file mode 100644
index 00000000..9d961ff2
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/radio/Radio.vue
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/radio/RadioGroup.vue b/code/g3soft-libs/packages/ui/src/radio/RadioGroup.vue
new file mode 100644
index 00000000..6640a823
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/radio/RadioGroup.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/radio/context.ts b/code/g3soft-libs/packages/ui/src/radio/context.ts
new file mode 100644
index 00000000..fa83bd70
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/radio/context.ts
@@ -0,0 +1,18 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+/** 单选项的值 */
+export type RadioValue = string | number | boolean
+
+/** RadioGroup 通过 provide 下发的组上下文 */
+export interface RadioGroupContext {
+ /** 组的原生 name（同组互斥 + 方向键导航） */
+ name: ComputedRef
+ /** 当前选中值 */
+ modelValue: ComputedRef
+ /** 整组是否禁用 */
+ disabled: ComputedRef
+ /** 选中某项 */
+ select: (value: RadioValue) => void
+}
+
+export const radioGroupKey: InjectionKey = Symbol('g3-radio-group')
diff --git a/code/g3soft-libs/packages/ui/src/radio/index.ts b/code/g3soft-libs/packages/ui/src/radio/index.ts
new file mode 100644
index 00000000..c26f1fe7
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/radio/index.ts
@@ -0,0 +1,5 @@
+export { default as G3Radio } from './Radio.vue'
+export { default as G3RadioGroup } from './RadioGroup.vue'
+export type { RadioGroupContext, RadioValue } from './context'
+export { radioGroupKey } from './context'
+export type { RadioGroupProps, RadioProps } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/radio/types.ts b/code/g3soft-libs/packages/ui/src/radio/types.ts
new file mode 100644
index 00000000..f26063ed
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/radio/types.ts
@@ -0,0 +1,17 @@
+import type { RadioValue } from './context'
+
+export interface RadioProps {
+ /** 选项值，与 RadioGroup 的 modelValue 比较确定是否选中 */
+ value: RadioValue
+ /** 禁用态 */
+ disabled?: boolean
+}
+
+export interface RadioGroupProps {
+ /** 双向绑定的选中值 */
+ modelValue?: RadioValue
+ /** 禁用整组 */
+ disabled?: boolean
+ /** 组名，未设置时自动生成，避免多组之间互斥冲突 */
+ name?: string
+}
diff --git a/code/g3soft-libs/packages/ui/src/scrollbar/Scrollbar.vue b/code/g3soft-libs/packages/ui/src/scrollbar/Scrollbar.vue
new file mode 100644
index 00000000..b2766028
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/scrollbar/Scrollbar.vue
@@ -0,0 +1,329 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/scrollbar/index.ts b/code/g3soft-libs/packages/ui/src/scrollbar/index.ts
new file mode 100644
index 00000000..a818297a
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/scrollbar/index.ts
@@ -0,0 +1,2 @@
+export { default as G3Scrollbar } from './Scrollbar.vue'
+export type { ScrollbarAutoHide, ScrollbarProps, ScrollbarVisibility } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/scrollbar/types.ts b/code/g3soft-libs/packages/ui/src/scrollbar/types.ts
new file mode 100644
index 00000000..e4c3cf99
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/scrollbar/types.ts
@@ -0,0 +1,16 @@
+/** 滚动条显示策略：visible 常显 / auto 按 autoHide 规则显隐 / hidden 隐藏 */
+export type ScrollbarVisibility = 'visible' | 'auto' | 'hidden'
+
+/** 自动隐藏策略：never 永不 / scroll 滚动时显示 / move 鼠标移动或滚动时显示 / leave 鼠标移出后隐藏 */
+export type ScrollbarAutoHide = 'never' | 'scroll' | 'move' | 'leave'
+
+export interface ScrollbarProps {
+ /** 滚动条显示策略 */
+ visibility?: ScrollbarVisibility
+ /** 自动隐藏策略 */
+ autoHide?: ScrollbarAutoHide
+ /** 点击轨道时是否把滑块跳过去（false 时轨道只作视觉提示） */
+ clickScroll?: boolean
+ /** 无障碍标签 */
+ ariaLabel?: string
+}
diff --git a/code/g3soft-libs/packages/ui/src/segmented/Segmented.vue b/code/g3soft-libs/packages/ui/src/segmented/Segmented.vue
new file mode 100644
index 00000000..17fc3bf9
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/segmented/Segmented.vue
@@ -0,0 +1,330 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ option.label }}
+
+
+
{{ notFound }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ description }}
+
+
+
+
+
+
+
+
+ {{ description }}
+
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/splitter/Splitter.vue b/code/g3soft-libs/packages/ui/src/splitter/Splitter.vue
new file mode 100644
index 00000000..aa0710d5
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/splitter/Splitter.vue
@@ -0,0 +1,409 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/splitter/index.ts b/code/g3soft-libs/packages/ui/src/splitter/index.ts
new file mode 100644
index 00000000..1eab50fb
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/splitter/index.ts
@@ -0,0 +1,3 @@
+export { default as G3Splitter } from './Splitter.vue'
+export { default as G3SplitterPanel } from './Panel.vue'
+export type { SplitterDirection, SplitterPanelProps, SplitterProps, SplitterSize } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/splitter/types.ts b/code/g3soft-libs/packages/ui/src/splitter/types.ts
new file mode 100644
index 00000000..ead73cbd
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/splitter/types.ts
@@ -0,0 +1,25 @@
+/** 分割方向：horizontal 左右分栏 / vertical 上下分栏 */
+export type SplitterDirection = 'horizontal' | 'vertical'
+
+/** 尺寸：数字（px）或 CSS 长度（如 '30%'、'240px'） */
+export type SplitterSize = number | string
+
+export interface SplitterProps {
+ /** 分割方向 */
+ direction?: SplitterDirection
+ /** 分割线仅在 hover / 聚焦 / 拖拽时显示 */
+ barOnHover?: boolean
+}
+
+export interface SplitterPanelProps {
+ /** 最小尺寸，拖拽约束 */
+ min?: SplitterSize
+ /** 最大尺寸，拖拽约束 */
+ max?: SplitterSize
+ /** 受控尺寸（由 Splitter 注入或父级传入）；传入后拖拽不再内部接管显示 */
+ size?: SplitterSize
+ /** 非受控初始尺寸；拖拽后由内部接管 */
+ defaultSize?: SplitterSize
+ /** 是否允许被相邻分隔条调整（两侧都为 true 才可拖） */
+ resizable?: boolean
+}
diff --git a/code/g3soft-libs/packages/ui/src/switch/Switch.vue b/code/g3soft-libs/packages/ui/src/switch/Switch.vue
new file mode 100644
index 00000000..628c7429
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/switch/Switch.vue
@@ -0,0 +1,130 @@
+
+
+
+
+
+
+
diff --git a/code/g3soft-libs/packages/ui/src/switch/index.ts b/code/g3soft-libs/packages/ui/src/switch/index.ts
new file mode 100644
index 00000000..07706dac
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/switch/index.ts
@@ -0,0 +1,2 @@
+export { default as G3Switch } from './Switch.vue'
+export type { SwitchProps } from './types'
diff --git a/code/g3soft-libs/packages/ui/src/switch/types.ts b/code/g3soft-libs/packages/ui/src/switch/types.ts
new file mode 100644
index 00000000..d656a713
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/switch/types.ts
@@ -0,0 +1,6 @@
+export interface SwitchProps {
+ /** 双向绑定的开关状态 */
+ modelValue?: boolean
+ /** 禁用态 */
+ disabled?: boolean
+}
diff --git a/code/g3soft-libs/packages/ui/src/tabs/TabPane.vue b/code/g3soft-libs/packages/ui/src/tabs/TabPane.vue
new file mode 100644
index 00000000..5d7ee603
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/tabs/TabPane.vue
@@ -0,0 +1,17 @@
+
diff --git a/code/g3soft-libs/packages/ui/src/tabs/Tabs.test.ts b/code/g3soft-libs/packages/ui/src/tabs/Tabs.test.ts
new file mode 100644
index 00000000..6ffdd661
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/tabs/Tabs.test.ts
@@ -0,0 +1,114 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import G3TabPane from './TabPane.vue'
+import G3Tabs from './Tabs.vue'
+
+/**
+ * 回归重点：面板列表曾经把 `v-if` 与 `v-for` 写在同一元素上，
+ * Vue 3 里 `v-if` 先求值，`pane` 还是 undefined，直接抛
+ * 「Cannot read properties of undefined (reading 'key')」导致整个 Tabs 渲染不出来。
+ */
+function mountTabs(options: { modelValue?: string; disabledTab?: boolean } = {}) {
+ return mount({
+ components: { G3Tabs, G3TabPane },
+ data() {
+ return { active: options.modelValue ?? 'a' }
+ },
+ template: `
+
+ 内容一
+ 内容二
+ 内容三
+
+ `,
+ })
+}
+
+describe('Tabs 渲染', () => {
+ it('挂载含多个面板时不抛错，标签按声明顺序渲染', () => {
+ const wrapper = mountTabs()
+ const tabs = wrapper.findAll('.g3-tabs__tab')
+
+ expect(tabs).toHaveLength(3)
+ expect(tabs.map((tab) => tab.text())).toEqual(['标签一', '标签二', '禁用项'])
+ })
+
+ it('面板懒渲染：只挂载当前激活项，切换后旧面板保留（不丢表单状态）', async () => {
+ const wrapper = mountTabs()
+ expect(wrapper.findAll('.g3-tabs__pane')).toHaveLength(1)
+ expect(wrapper.find('.pane-a').exists()).toBe(true)
+ expect(wrapper.find('.pane-b').exists()).toBe(false)
+
+ const tabs = wrapper.findAll('.g3-tabs__tab')
+ await tabs[1].trigger('click')
+
+ expect(wrapper.findAll('.g3-tabs__pane')).toHaveLength(2)
+ expect(wrapper.find('.pane-b').exists()).toBe(true)
+ // 切走的面板用 v-show 隐藏而不是卸载（happy-dom 的 isVisible 不可靠，直接看内联样式）
+ const panes = wrapper.findAll('.g3-tabs__pane')
+ const hidden = panes.find((pane) => pane.attributes('style')?.includes('display: none'))
+ expect(hidden?.find('.pane-a').exists()).toBe(true)
+ })
+
+ it('无障碍属性：role / aria-selected / aria-controls 对应面板 id', async () => {
+ const wrapper = mountTabs()
+ const tabs = wrapper.findAll('.g3-tabs__tab')
+ const list = wrapper.find(`.${'g3-tabs__nav-list'}`)
+
+ expect(list.attributes('role')).toBe('tablist')
+ expect(tabs[0].attributes('role')).toBe('tab')
+ expect(tabs[0].attributes('aria-selected')).toBe('true')
+ expect(tabs[1].attributes('aria-selected')).toBe('false')
+
+ const firstPanelId = tabs[0].attributes('aria-controls')
+ const panel = wrapper.find('.g3-tabs__pane')
+ expect(panel.attributes('role')).toBe('tabpanel')
+ expect(panel.attributes('id')).toBe(firstPanelId)
+ expect(panel.attributes('aria-labelledby')).toBe(tabs[0].attributes('id'))
+ })
+
+ it('点击标签切换激活项', async () => {
+ const wrapper = mountTabs()
+ await wrapper.findAll('.g3-tabs__tab')[1].trigger('click')
+ expect(wrapper.find('.pane-b').isVisible()).toBe(true)
+ })
+
+ it('禁用项点击无效', async () => {
+ const wrapper = mountTabs({ disabledTab: true })
+ const disabled = wrapper.findAll('.g3-tabs__tab')[2]
+
+ expect(disabled.attributes('disabled')).toBeDefined()
+ expect(disabled.attributes('aria-disabled')).toBe('true')
+ await disabled.trigger('click')
+ expect(wrapper.find('.pane-c').exists()).toBe(false)
+ })
+
+ it('键盘左右键在可用标签间循环', async () => {
+ const wrapper = mountTabs()
+ const list = wrapper.find('.g3-tabs__nav-list')
+
+ await list.trigger('keydown', { key: 'ArrowRight' })
+ expect(wrapper.find('.pane-b').isVisible()).toBe(true)
+
+ await list.trigger('keydown', { key: 'ArrowRight' })
+ await list.trigger('keydown', { key: 'ArrowRight' })
+ // 只有两个可用项，循环回到第一个
+ expect(wrapper.find('.pane-a').isVisible()).toBe(true)
+ })
+})
+
+describe('Tabs items 数据源', () => {
+ it('提供 items 时优先于声明式子组件', async () => {
+ const wrapper = mount(G3Tabs, {
+ props: {
+ modelValue: 'x',
+ items: [
+ { key: 'x', label: 'X 标签' },
+ { key: 'y', label: 'Y 标签' },
+ ],
+ },
+ })
+
+ expect(wrapper.findAll('.g3-tabs__tab').map((tab) => tab.text())).toEqual(['X 标签', 'Y 标签'])
+ })
+})
diff --git a/code/g3soft-libs/packages/ui/src/tabs/Tabs.vue b/code/g3soft-libs/packages/ui/src/tabs/Tabs.vue
new file mode 100644
index 00000000..9bcbb3ee
--- /dev/null
+++ b/code/g3soft-libs/packages/ui/src/tabs/Tabs.vue
@@ -0,0 +1,464 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ locale.empty.description }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ part.text }}
+
+
+
+
+
+
+
+
+