x-next 1.10.1 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/AI_CODING.md +97 -0
  2. package/AI_USAGE/catalog.md +111 -0
  3. package/AI_USAGE/components/alert.md +33 -0
  4. package/AI_USAGE/components/bar-chart.md +46 -0
  5. package/AI_USAGE/components/button.md +35 -0
  6. package/AI_USAGE/components/checkbox.md +34 -0
  7. package/AI_USAGE/components/color-picker.md +36 -0
  8. package/AI_USAGE/components/config-provider.md +58 -0
  9. package/AI_USAGE/components/date-picker.md +34 -0
  10. package/AI_USAGE/components/dialog.md +37 -0
  11. package/AI_USAGE/components/dropdown.md +38 -0
  12. package/AI_USAGE/components/empty.md +30 -0
  13. package/AI_USAGE/components/input.md +32 -0
  14. package/AI_USAGE/components/line-chart.md +45 -0
  15. package/AI_USAGE/components/message-box.md +39 -0
  16. package/AI_USAGE/components/message.md +36 -0
  17. package/AI_USAGE/components/notification.md +37 -0
  18. package/AI_USAGE/components/pagination.md +32 -0
  19. package/AI_USAGE/components/pie-chart.md +55 -0
  20. package/AI_USAGE/components/popconfirm.md +33 -0
  21. package/AI_USAGE/components/popover.md +35 -0
  22. package/AI_USAGE/components/progress.md +32 -0
  23. package/AI_USAGE/components/radio.md +35 -0
  24. package/AI_USAGE/components/rate.md +30 -0
  25. package/AI_USAGE/components/select.md +38 -0
  26. package/AI_USAGE/components/slider.md +34 -0
  27. package/AI_USAGE/components/steps.md +33 -0
  28. package/AI_USAGE/components/switch.md +32 -0
  29. package/AI_USAGE/components/tabs.md +33 -0
  30. package/AI_USAGE/components/textarea.md +31 -0
  31. package/AI_USAGE/components/time-picker.md +34 -0
  32. package/AI_USAGE/components/upload.md +60 -0
  33. package/AI_USAGE/core.md +37 -0
  34. package/AI_USAGE/index.md +52 -0
  35. package/AI_USAGE/recipes/form-on-demand.md +42 -0
  36. package/AI_USAGE.md +171 -46
  37. package/CHANGELOG.md +23 -0
  38. package/README.md +15 -2
  39. package/dist/_container/resize-trigger.vue.d.ts +1 -1
  40. package/dist/_hooks/use-dialog-focus.d.ts +7 -0
  41. package/dist/_hooks/use-pointer-drag.d.ts +6 -0
  42. package/dist/_hooks/use-popup-close.d.ts +11 -0
  43. package/dist/_hooks/use-popup-theme.d.ts +5 -0
  44. package/dist/_utils/palette.d.ts +2 -0
  45. package/dist/components/_components/picker/input-range.vue.d.ts +1 -3
  46. package/dist/components/_components/picker/input.vue.d.ts +1 -3
  47. package/dist/components/alert/Alert.vue.d.ts +1 -1
  48. package/dist/components/alert/index.d.ts +3 -3
  49. package/dist/components/bar-chart/BarChart.d.ts +3 -3
  50. package/dist/components/bar-chart/index.d.ts +9 -9
  51. package/dist/components/color-picker/ColorPicker.d.ts +2 -1
  52. package/dist/components/color-picker/index.d.ts +2 -0
  53. package/dist/components/color-picker/panel.d.ts +6 -0
  54. package/dist/components/config-provider/context.d.ts +7 -1
  55. package/dist/components/date-picker/DatePicker.vue.d.ts +9 -12
  56. package/dist/components/date-picker/index.d.ts +19 -27
  57. package/dist/components/drawer/index.d.ts +51 -9
  58. package/dist/components/drawer/src/Drawer.vue.d.ts +19 -4
  59. package/dist/components/dropdown/Dropdown.vue.d.ts +6 -3
  60. package/dist/components/dropdown/DropdownButton.vue.d.ts +6 -3
  61. package/dist/components/dropdown/DropdownSubmenu.vue.d.ts +6 -3
  62. package/dist/components/dropdown/dropdown-panel.vue.d.ts +6 -3
  63. package/dist/components/dropdown/index.d.ts +36 -18
  64. package/dist/components/form-select/SelectDropdown.vue.d.ts +6 -3
  65. package/dist/components/form-select/SelectOption.vue.d.ts +1 -0
  66. package/dist/components/form-select/index.d.ts +15 -6
  67. package/dist/components/form-slider/Slider.vue.d.ts +1 -1
  68. package/dist/components/form-slider/index.d.ts +3 -3
  69. package/dist/components/form-textarea/Textarea.vue.d.ts +2 -4
  70. package/dist/components/form-textarea/index.d.ts +6 -12
  71. package/dist/components/image/Image.vue.d.ts +2 -4
  72. package/dist/components/image/index.d.ts +6 -12
  73. package/dist/components/layout/LayoutSidebar.vue.d.ts +5 -5
  74. package/dist/components/layout/index.d.ts +10 -10
  75. package/dist/components/line-chart/LineChart.d.ts +3 -3
  76. package/dist/components/line-chart/index.d.ts +9 -9
  77. package/dist/components/menu/Menu.d.ts +6 -3
  78. package/dist/components/menu/base-menu.vue.d.ts +6 -3
  79. package/dist/components/menu/index.d.ts +12 -6
  80. package/dist/components/menu/sub-menu-pop.vue.d.ts +6 -3
  81. package/dist/components/network/Network.vue.d.ts +1 -1
  82. package/dist/components/network/index.d.ts +3 -3
  83. package/dist/components/pie-chart/PieChart.d.ts +1 -1
  84. package/dist/components/pie-chart/index.d.ts +3 -3
  85. package/dist/components/resize-box/ResizeBox.vue.d.ts +2 -2
  86. package/dist/components/resize-box/index.d.ts +5 -5
  87. package/dist/components/scrollbar-v2/Scrollbar.vue.d.ts +2 -1
  88. package/dist/components/scrollbar-v2/index.d.ts +6 -3
  89. package/dist/components/table/Table.d.ts +1 -1
  90. package/dist/components/table/index.d.ts +3 -3
  91. package/dist/components/tabs/Tabs.d.ts +1 -1
  92. package/dist/components/tabs/index.d.ts +3 -3
  93. package/dist/components/time-picker/TimeColumn.vue.d.ts +6 -3
  94. package/dist/components/time-picker/TimePanel.vue.d.ts +6 -3
  95. package/dist/components/time-picker/TimePicker.vue.d.ts +9 -12
  96. package/dist/components/time-picker/index.d.ts +19 -27
  97. package/dist/components/trend-chart/components/TrendChart.d.ts +5 -5
  98. package/dist/components/trend-chart/components/trend-chart-curve.d.ts +1 -1
  99. package/dist/components/trend-chart/index.d.ts +14 -14
  100. package/dist/components/virtual-list-v2/virtual-list.vue.d.ts +7 -4
  101. package/dist/es/_hooks/use-dialog-focus.js +69 -0
  102. package/dist/es/_hooks/use-pointer-drag.js +18 -0
  103. package/dist/es/_hooks/use-popup-close.js +27 -0
  104. package/dist/es/_hooks/use-popup-manager.js +26 -24
  105. package/dist/es/_hooks/use-popup-theme.js +18 -0
  106. package/dist/es/_hooks/use-teleport-container.js +9 -10
  107. package/dist/es/_utils/palette.js +57 -52
  108. package/dist/es/components/color-picker/ColorPicker.js +131 -102
  109. package/dist/es/components/color-picker/gradient-slider.js +38 -40
  110. package/dist/es/components/color-picker/panel.js +221 -192
  111. package/dist/es/components/color-picker/sv-panel.js +51 -50
  112. package/dist/es/components/config-provider/ConfigProvider.js +58 -41
  113. package/dist/es/components/dialog/Dialog.js +133 -186
  114. package/dist/es/components/drawer/src/Drawer.vue.js +59 -51
  115. package/dist/es/components/drawer/src/Drawer.vue2.js +117 -107
  116. package/dist/es/components/form/FormItem.vue.js +12 -12
  117. package/dist/es/components/form-select/SelectDropdown.vue.js +7 -7
  118. package/dist/es/components/form-select/SelectOption.vue.js +20 -17
  119. package/dist/es/components/form-select/SelectOption.vue2.js +39 -36
  120. package/dist/es/components/form-switch/Switch.vue.js +24 -24
  121. package/dist/es/components/image/Image.vue.js +12 -12
  122. package/dist/es/components/link/Link.vue.js +6 -6
  123. package/dist/es/components/menu/sub-menu-inline.vue.js +11 -11
  124. package/dist/es/components/menu/sub-menu-pop.vue.js +12 -12
  125. package/dist/es/components/notification/Notification.js +59 -59
  126. package/dist/es/components/resize-box/ResizeBox.vue.js +19 -22
  127. package/dist/es/components/skeleton/Skeleton.vue.js +9 -9
  128. package/dist/es/components/tag/Tag.vue.js +7 -7
  129. package/dist/es/components/trigger/Trigger.js +171 -163
  130. package/dist/es/style.css +1 -1
  131. package/dist/index.cjs +3 -3
  132. package/dist/index.umd.js +3 -3
  133. package/dist/style/bar-chart.js +1 -0
  134. package/dist/style/base.css +1 -1
  135. package/dist/style/color-picker.css +1 -1
  136. package/dist/style/color-picker.js +4 -0
  137. package/dist/style/date-picker.js +4 -0
  138. package/dist/style/dependencies.json +296 -0
  139. package/dist/style/dialog.js +2 -0
  140. package/dist/style/drawer.js +3 -0
  141. package/dist/style/dropdown.js +5 -0
  142. package/dist/style/form-checkbox.css +1 -1
  143. package/dist/style/form-input-number.js +2 -0
  144. package/dist/style/form-input.css +1 -1
  145. package/dist/style/form-input.js +1 -0
  146. package/dist/style/form-select.css +1 -1
  147. package/dist/style/form-select.js +5 -0
  148. package/dist/style/form-slider.js +5 -0
  149. package/dist/style/form.js +3 -0
  150. package/dist/style/heatmap.js +1 -0
  151. package/dist/style/image.js +2 -0
  152. package/dist/style/layout.js +1 -0
  153. package/dist/style/line-chart.js +1 -0
  154. package/dist/style/menu.js +3 -0
  155. package/dist/style/message-box.js +3 -0
  156. package/dist/style/pagination.js +9 -0
  157. package/dist/style/pie-chart.js +1 -0
  158. package/dist/style/popconfirm.js +3 -0
  159. package/dist/style/popover.js +1 -0
  160. package/dist/style/popup.js +2 -0
  161. package/dist/style/table.js +12 -0
  162. package/dist/style/time-picker.js +3 -0
  163. package/dist/style/tooltip.js +1 -0
  164. package/dist/style/upload.js +4 -0
  165. package/dist/style.css +1 -1
  166. package/package.json +17 -7
package/AI_CODING.md ADDED
@@ -0,0 +1,97 @@
1
+ # x-next AI Coding 使用规范
2
+
3
+ 本规范供业务仓库的 AI Coding Agent 与协作者使用。x-next 是 Vue 3 + TypeScript 组件库;模型没有预先学过它也可以通过已安装包的手册、公开类型和可运行示例完成接入。
4
+
5
+ 本文件规定查阅和交付流程,实际 API 与可复制 SFC 在独立的 `AI_USAGE/` 中。先读 `AI_USAGE/index.md` 与 `core.md`,再读目标组件/场景。内容从已校验的完整手册生成,保留同版本约束,不需要特定 MCP、插件或付费工具;文档站组件说明保持完整。
6
+
7
+ ## 建立项目入口
8
+
9
+ 将下方推荐段落合并到业务仓库根目录或前端目录的 `AGENTS.md`,保留项目既有端口、登录、验证与业务范围约定。Codex 按项目路径发现 AGENTS 指令;安装 npm 包不会自动把 `node_modules` 中的本规范加入所有 AI 工具的上下文。其他工具在其项目规则入口显式引用即可。
10
+
11
+ 在实际安装 x-next 的前端工作目录执行:
12
+
13
+ ```bash
14
+ node -p "require('x-next/package.json').version"
15
+ node -p "require.resolve('x-next/AI_CODING.md')"
16
+ node -p "require.resolve('x-next/AI_USAGE/index.md')"
17
+ node -p "require.resolve('x-next/AI_USAGE/components/select.md')"
18
+ ```
19
+
20
+ 旧版未提供独立目录时,定位其 `AI_USAGE.md` 后按章节读取;该完整文件继续兼容提供,新任务不默认读取。不要把仓库开发版本当成已安装版本,也不要在规则中固定手册覆盖数或个人机器绝对路径。模型无法读取本地文件时,由协作者提供安装版本和本任务所需组件页。
21
+
22
+ ## 可复制到 AGENTS.md 的推荐段落
23
+
24
+ 下面是一段独立可用的消费规则;本文件其余部分用于解释验证和同团队协作。
25
+
26
+ ```markdown
27
+ ## x-next 组件使用
28
+
29
+ - 修改 x-next 组件调用、命令式服务,或准备新增通用 UI 控件时,先从实际前端目录用 `require.resolve('x-next/AI_USAGE/index.md')` 定位独立 AI 入口,并读取 `x-next/package.json` 确认安装版本。纯后端、文案或不涉及组件 API 的改动无需读取。
30
+ - 初次接入读 AI_USAGE/index.md 和 core.md,再只读所需 components/*.md 或 recipes/*.md;组件页包含真实说明、模型/事件/样式和完整 SFC,要保留行为限制。不要把完整 AI_USAGE.md 或整个目录加入上下文,也不要把内容全集复制到 AGENTS.md。旧包没有独立目录时才按标题/行段读取原完整手册。
31
+ - 已读内容仍在当前上下文,且安装包及相关本地构建未变时,不重复读取;升级、软链 dist 重建、遇到新 API 或上下文压缩后丢失具体契约时,补读受影响章节。在任务交接中记录版本、相关组件和已查依据。
32
+ - 以同版本 AI 内容、公开 `.d.ts` 和实际加载实现为依据,不套用 Arco/AntDV/Element 的 prop、v-model、事件载荷或服务方法。精选页没有某组件时,查 AI_USAGE/catalog.md 中的公开导出/类型及组件文档,不能据此认定组件不存在;缺什么补查什么,不猜 API。
33
+ - 使用局部具名导入后,模板用对应局部名称;仅 import 不会全局注册 `<x-*>`。根 `Dialog` 是服务,模板组件为 `DialogComponent`。原生属性、受控值、清空值、事件、插槽和实例方法逐项查实际契约,不用未知 attrs、any、ts-ignore 或关闭严格模板检查掩盖错误。
34
+ - 样式遵循项目已有方案:全量样式或所需组件的公开按需入口。路径查手册,不按组件名猜;旧版的内部样式依赖按其版本核实。通过 props、slots、公开主题变量定制,不在业务侧 patch 组件内部实现,不依赖内部结构类名。
35
+ - 只在需求范围内选组件,不自动迁移既有原生 table、输入框或编辑器交互。手写通用控件前先查库现有能力;深度绑定编辑器状态的块手柄、斜杠菜单等保留在编辑器。
36
+ - 运行项目既有严格类型、构建及相关测试。UI 行为用可用的真实浏览器工具验证,先读页面结构/可访问性树,视觉问题再截图;鼠标、键盘等操作后检查事件和业务状态。不能用 HTTP 成功、脚本注入状态或单测通过代替宿主 UI 结论。
37
+ - 发现缺陷或通用能力缺口,记录消费版本、最小复现、源码/类型依据、期望行为、临时处理和验收步骤,按团队职责反馈或进入库侧修复。升级后逐项复测旧问题,说明实际消费内容和业务回归结果。
38
+ ```
39
+
40
+ 这段规则把模型的默认动作改成“定位当前版本 → 检索章节 → 核实 API → 写代码 → 验收”。它不要求模型事先知道 x-next,也不要求仅因规则存在就扩大组件迁移范围。
41
+
42
+ ## 按任务查阅和验证
43
+
44
+ 新包使用下面这几个独立路径:
45
+
46
+ | 文件 | 用途 | 读取时机 |
47
+ | --- | --- | --- |
48
+ | AI_USAGE/index.md | 短检索入口与路径 | 首次接入 / 新任务找能力 |
49
+ | AI_USAGE/core.md | 安装、样式、受控值、原生属性、弹层与服务规则 | 首次接入 / 规则遗失 |
50
+ | AI_USAGE/components/select.md 等 | 真实 API 约束、完整 SFC、样式依赖 | 任务涉及该组件 |
51
+ | AI_USAGE/recipes/form-on-demand.md | 完整组合代码 | 需要该组合 |
52
+ | AI_USAGE/catalog.md | 更多公共组件/服务和类型定位 | 精选页没有所需能力 |
53
+ | AI_USAGE.md | 完整兼容手册 | 旧版回退或有明确全文需求 |
54
+
55
+ 编辑用户弹窗通常读取 Dialog、Input、Select 的组件页;涉及精选内容未展开的 Form,再通过 catalog 查其公开类型和组件文档。API 不确定时先补查,避免先照熟悉的组件库写一遍再试错。
56
+
57
+ 只有旧包没有独立目录时,才检索完整手册标题并输出所需一节:
58
+
59
+ ```bash
60
+ x_next_ai_handbook="$(node -p "require.resolve('x-next/AI_USAGE.md')")"
61
+ rg -n '^## ' "$x_next_ai_handbook"
62
+ awk '$0 == "## Select" { reading = 1; print; next } reading && /^## / { exit } reading { print }' "$x_next_ai_handbook"
63
+ ```
64
+
65
+ 检索工具在本机扫描文件不等于把全文交给模型;上面只有标题和目标章节进入工具输出。提供给聊天模型的内容同样按目标页面裁剪,包含必要的通用规则。
66
+
67
+ 独立小文件让默认读取目标更明确,同时用项目 AGENTS 指明阅读顺序。规则仍不能保证所有 Agent 都遵守或 API 绝不出错;核对读取路径,保留通用与跨组件约束,并验证生成代码,不把“已读资料”代替验收。
68
+
69
+ 检查范围由行为决定:新增点击要追到回调和上层状态;表单检查原生属性落点、校验和提交;选择器检查打开/关闭、选择/取消、清空、禁用、空态与加载;弹层检查焦点、Escape、宿主、滚动与卸载;服务检查句柄和页面清理。无需为未涉及的组件跑全库 UI。
70
+
71
+ 真实浏览器验证优先用环境可用的浏览器连接器,缺失时使用可用的 Computer Use。区分通过浏览器 API 执行真实输入与直接修改 DOM/应用状态;也区分组件测试、独立生产消费页和宿主业务 E2E。工具缺失或某层未执行时写明范围,保留已完成的类型/构建结果。
72
+
73
+ Playwright 官方 `locator.fill()` 会触发 `input`;需要逐键事件时使用 `pressSequentially()`,或当前连接器支持的真实键盘输入。页面或连接器出现异常时,先检查输入值、事件、Vue 状态与实际工具行为,不能把“fill 不触发 Vue input”作为通用规则。无需用 `force` 或注入状态让验收表面通过。
74
+
75
+ ## 同团队维护库时的补充规则
76
+
77
+ YWiki、ycms 等明确由同团队维护 x-next 的项目,可再合并下面两段到自身 AGENTS.md:
78
+
79
+ ```markdown
80
+ x-next 是本团队维护的组件库。发现库缺陷或适合复用的能力缺口,在本项目 `x-next问题收集/` 记录后进入库仓库,先读库侧 AGENTS.md,修复、构建、更新手册并回归,再回业务仓库更新依赖和验收。交付说明两个仓库的改动;深度耦合编辑器/业务状态的能力保留在业务侧。
81
+
82
+ Git 提交 npm 依赖与锁文件;个人软链调试不提交相邻目录 link/override。联调先完成库构建再开浏览器;软链 dist 重建会触发消费端 reload。重建后按项目方式重启 Vite(需要时 --force),确认安装版本、包解析路径和实际加载来源,排除旧预构建缓存。升级后复测问题收集中的相关条目。
83
+ ```
84
+
85
+ 其他消费项目按自身权限反馈缺陷,不由“使用 x-next”推导出所有项目都有库源码修改权限。localhost/127.0.0.1、端口、登录与存储来源等实测信息写在各业务仓库,库规范不固定这些环境。
86
+
87
+ ## 交付与上下文
88
+
89
+ 交付说明改了哪些业务和库代码、消费版本/加载来源、验证命令与浏览器行为、遗留项。暂时绕过要记录原因和移除条件;发布后的状态仍需消费方实际验证。
90
+
91
+ 任务压缩/交接保留“版本、相关组件、重要契约、已验证结果、下一步”即可。上下文复用和提示缓存取决于具体工具与模型,不保证永久记忆、缓存命中或后续输入免费;精确 token/费用应使用实际 usage,不用文件 KB 或行数推算固定成本。
92
+
93
+ 官方机制参考:
94
+
95
+ - Codex AGENTS 发现规则:https://developers.openai.com/codex/guides/agents-md
96
+ - OpenAI 提示缓存:https://developers.openai.com/api/docs/guides/prompt-caching
97
+ - Playwright 输入行为:https://playwright.dev/docs/input
@@ -0,0 +1,111 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # 公开组件与服务导航
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 从当前构建的根公共声明生成,包含 100 个具名组件/服务导出(含子组件和别名,不等于组件族数量)。本页导航不宣称每项有精选示例。运行时仅从 `x-next` 导入,不深导入这些声明路径;未列出的 hooks、指令和类型继续查 [公共入口声明](../dist/index.d.ts)。
7
+
8
+ | 导出 | 形式 | 用法覆盖 | 类型导航 | 样式导航 | 完整文档 |
9
+ | --- | --- | --- | --- | --- | --- |
10
+ | Alert | 组件 | [精选用法](./components/alert.md) | [公开声明](../dist/components/alert/index.d.ts) | x-next/style/alert | [文档](https://x-next.yjmf.com/components/alert) |
11
+ | BarChart | 组件 | [精选用法](./components/bar-chart.md) | [公开声明](../dist/components/bar-chart/index.d.ts) | x-next/style/bar-chart | [文档](https://x-next.yjmf.com/components/bar-chart) |
12
+ | Button | 组件 | [精选用法](./components/button.md) | [公开声明](../dist/components/button/index.d.ts) | x-next/style/button | [文档](https://x-next.yjmf.com/components/button) |
13
+ | ButtonGroup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/button/index.d.ts) | x-next/style/button | [文档](https://x-next.yjmf.com/components/button) |
14
+ | Checkbox | 组件 | [精选用法](./components/checkbox.md) | [公开声明](../dist/components/form-checkbox/index.d.ts) | x-next/style/form-checkbox | [文档](https://x-next.yjmf.com/components/checkbox) |
15
+ | CheckboxGroup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-checkbox/index.d.ts) | x-next/style/form-checkbox | [文档](https://x-next.yjmf.com/components/checkbox) |
16
+ | Col | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/grid/index.d.ts) | x-next/style/grid | [文档](https://x-next.yjmf.com/components/grid) |
17
+ | ColorPicker | 组件 | [精选用法](./components/color-picker.md) | [公开声明](../dist/components/color-picker/index.d.ts) | x-next/style/color-picker | [文档](https://x-next.yjmf.com/components/color-picker) |
18
+ | ConfigProvider | 组件 | [精选用法](./components/config-provider.md) | [公开声明](../dist/components/config-provider/index.d.ts) | x-next/style/base.css | [文档](https://x-next.yjmf.com/components/config-provider) |
19
+ | DatePicker | 组件 | [精选用法](./components/date-picker.md) | [公开声明](../dist/components/date-picker/index.d.ts) | x-next/style/date-picker | [文档](https://x-next.yjmf.com/components/date-picker) |
20
+ | Dialog | 服务 | [精选用法](./components/dialog.md) | [公开声明](../dist/components/dialog/use.d.ts) | x-next/style/dialog | [文档](https://x-next.yjmf.com/components/dialog) |
21
+ | DialogComponent | 组件 | [精选用法](./components/dialog.md) | [公开声明](../dist/components/dialog/index.d.ts) | x-next/style/dialog | [文档](https://x-next.yjmf.com/components/dialog) |
22
+ | Draggable | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/draggable/index.d.ts) | 按同版本组件文档核实 | [文档](https://x-next.yjmf.com/components/draggable) |
23
+ | Drawer | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/drawer/index.d.ts) | x-next/style/drawer | [文档](https://x-next.yjmf.com/components/drawer) |
24
+ | Dropdown | 组件 | [精选用法](./components/dropdown.md) | [公开声明](../dist/components/dropdown/index.d.ts) | x-next/style/dropdown | [文档](https://x-next.yjmf.com/components/dropdown) |
25
+ | DropdownButton | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/dropdown/index.d.ts) | x-next/style/dropdown | [文档](https://x-next.yjmf.com/components/dropdown) |
26
+ | DropdownGroup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/dropdown/index.d.ts) | x-next/style/dropdown | [文档](https://x-next.yjmf.com/components/dropdown) |
27
+ | DropdownOption | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/dropdown/index.d.ts) | x-next/style/dropdown | [文档](https://x-next.yjmf.com/components/dropdown) |
28
+ | DropdownSubmenu | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/dropdown/index.d.ts) | x-next/style/dropdown | [文档](https://x-next.yjmf.com/components/dropdown) |
29
+ | Empty | 组件 | [精选用法](./components/empty.md) | [公开声明](../dist/components/empty/index.d.ts) | x-next/style/empty | [文档](https://x-next.yjmf.com/components/empty) |
30
+ | Form | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form/index.d.ts) | x-next/style/form | [文档](https://x-next.yjmf.com/components/form) |
31
+ | FormItem | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form/index.d.ts) | x-next/style/form | [文档](https://x-next.yjmf.com/components/form) |
32
+ | Grid | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/grid/index.d.ts) | x-next/style/grid | [文档](https://x-next.yjmf.com/components/grid) |
33
+ | GridItem | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/grid/index.d.ts) | x-next/style/grid | [文档](https://x-next.yjmf.com/components/grid) |
34
+ | Heatmap | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/heatmap/index.d.ts) | x-next/style/heatmap | [文档](https://x-next.yjmf.com/components/heatmap) |
35
+ | Icon | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/icons/index.d.ts) | 按同版本组件文档核实 | [文档](https://x-next.yjmf.com/components/icon) |
36
+ | Image | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/image/index.d.ts) | x-next/style/image | [文档](https://x-next.yjmf.com/components/image) |
37
+ | ImagePreview | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/image/index.d.ts) | x-next/style/image | [文档](https://x-next.yjmf.com/components/image) |
38
+ | ImagePreviewAction | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/image/index.d.ts) | x-next/style/image | [文档](https://x-next.yjmf.com/components/image) |
39
+ | ImagePreviewGroup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/image/index.d.ts) | x-next/style/image | [文档](https://x-next.yjmf.com/components/image) |
40
+ | Input | 组件 | [精选用法](./components/input.md) | [公开声明](../dist/components/form-input/index.d.ts) | x-next/style/form-input | [文档](https://x-next.yjmf.com/components/input) |
41
+ | InputGroup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-input/index.d.ts) | x-next/style/form-input | [文档](https://x-next.yjmf.com/components/input) |
42
+ | InputNumber | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-input-number/index.d.ts) | x-next/style/form-input-number | [文档](https://x-next.yjmf.com/components/input-number) |
43
+ | InputPassword | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-input/index.d.ts) | x-next/style/form-input | [文档](https://x-next.yjmf.com/components/input) |
44
+ | InputSearch | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-input/index.d.ts) | x-next/style/form-input | [文档](https://x-next.yjmf.com/components/input) |
45
+ | InputTag | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-input-tag/index.d.ts) | x-next/style/form-input-tag | [文档](https://x-next.yjmf.com/components/input-tag) |
46
+ | Layout | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/layout/index.d.ts) | x-next/style/layout | [文档](https://x-next.yjmf.com/components/layout) |
47
+ | LayoutSidebar | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/layout/index.d.ts) | x-next/style/layout | [文档](https://x-next.yjmf.com/components/layout) |
48
+ | LineChart | 组件 | [精选用法](./components/line-chart.md) | [公开声明](../dist/components/line-chart/index.d.ts) | x-next/style/line-chart | [文档](https://x-next.yjmf.com/components/line-chart) |
49
+ | Link | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/link/index.d.ts) | x-next/style/link | [文档](https://x-next.yjmf.com/components/link) |
50
+ | Menu | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/menu/index.d.ts) | x-next/style/menu | [文档](https://x-next.yjmf.com/components/menu) |
51
+ | MenuItem | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/menu/index.d.ts) | x-next/style/menu | [文档](https://x-next.yjmf.com/components/menu) |
52
+ | MenuItemGroup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/menu/index.d.ts) | x-next/style/menu | [文档](https://x-next.yjmf.com/components/menu) |
53
+ | MenuSubMenu | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/menu/index.d.ts) | x-next/style/menu | [文档](https://x-next.yjmf.com/components/menu) |
54
+ | Message | 服务 | [精选用法](./components/message.md) | [公开声明](../dist/components/message/warp.d.ts) | x-next/style/message | [文档](https://x-next.yjmf.com/components/message) |
55
+ | MessageBox | 服务 | [精选用法](./components/message-box.md) | [公开声明](../dist/components/message-box/MessageBox.d.ts) | x-next/style/message-box | [文档](https://x-next.yjmf.com/components/message-box) |
56
+ | MessageComponent | 组件 | [精选用法](./components/message.md) | [公开声明](../dist/components/message/index.d.ts) | x-next/style/message | [文档](https://x-next.yjmf.com/components/message) |
57
+ | MonthPicker | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/date-picker/index.d.ts) | x-next/style/date-picker | [文档](https://x-next.yjmf.com/components/date-picker) |
58
+ | Network | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/network/index.d.ts) | x-next/style/network | [文档](https://x-next.yjmf.com/components/network) |
59
+ | Notification | 服务 | [精选用法](./components/notification.md) | [公开声明](../dist/components/notification/warp.d.ts) | x-next/style/notification | [文档](https://x-next.yjmf.com/components/notification) |
60
+ | NotificationComponent | 组件 | [精选用法](./components/notification.md) | [公开声明](../dist/components/notification/index.d.ts) | x-next/style/notification | [文档](https://x-next.yjmf.com/components/notification) |
61
+ | Pagination | 组件 | [精选用法](./components/pagination.md) | [公开声明](../dist/components/pagination/index.d.ts) | x-next/style/pagination | [文档](https://x-next.yjmf.com/components/pagination) |
62
+ | PieChart | 组件 | [精选用法](./components/pie-chart.md) | [公开声明](../dist/components/pie-chart/index.d.ts) | x-next/style/pie-chart | [文档](https://x-next.yjmf.com/components/pie-chart) |
63
+ | Popconfirm | 组件 | [精选用法](./components/popconfirm.md) | [公开声明](../dist/components/popconfirm/index.d.ts) | x-next/style/popconfirm | [文档](https://x-next.yjmf.com/components/popconfirm) |
64
+ | Popover | 组件 | [精选用法](./components/popover.md) | [公开声明](../dist/components/popover/index.d.ts) | x-next/style/popover | [文档](https://x-next.yjmf.com/components/popover) |
65
+ | Popup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/popup/index.d.ts) | x-next/style/popup | [文档](https://x-next.yjmf.com/components/popup) |
66
+ | Progress | 组件 | [精选用法](./components/progress.md) | [公开声明](../dist/components/progress/index.d.ts) | x-next/style/progress | [文档](https://x-next.yjmf.com/components/progress) |
67
+ | QuarterPicker | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/date-picker/index.d.ts) | x-next/style/date-picker | [文档](https://x-next.yjmf.com/components/date-picker) |
68
+ | Radio | 组件 | [精选用法](./components/radio.md) | [公开声明](../dist/components/form-radio/index.d.ts) | x-next/style/form-radio | [文档](https://x-next.yjmf.com/components/radio) |
69
+ | RadioGroup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-radio/index.d.ts) | x-next/style/form-radio | [文档](https://x-next.yjmf.com/components/radio) |
70
+ | RangePicker | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/date-picker/index.d.ts) | x-next/style/date-picker | [文档](https://x-next.yjmf.com/components/date-picker) |
71
+ | Rate | 组件 | [精选用法](./components/rate.md) | [公开声明](../dist/components/rate/index.d.ts) | x-next/style/rate | [文档](https://x-next.yjmf.com/components/rate) |
72
+ | ResizeBox | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/resize-box/index.d.ts) | x-next/style/resize-box | [文档](https://x-next.yjmf.com/components/resize-box) |
73
+ | Row | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/grid/index.d.ts) | x-next/style/grid | [文档](https://x-next.yjmf.com/components/grid) |
74
+ | Scrollbar | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/scrollbar-v2/index.d.ts) | x-next/style/scrollbar-v2 | [文档](https://x-next.yjmf.com/components/scrollbar) |
75
+ | Select | 组件 | [精选用法](./components/select.md) | [公开声明](../dist/components/form-select/index.d.ts) | x-next/style/form-select | [文档](https://x-next.yjmf.com/components/select) |
76
+ | SelectDropdown | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-select/index.d.ts) | x-next/style/form-select | [文档](https://x-next.yjmf.com/components/select) |
77
+ | SelectOption | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-select/index.d.ts) | x-next/style/form-select | [文档](https://x-next.yjmf.com/components/select) |
78
+ | SelectOptionGroup | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/form-select/index.d.ts) | x-next/style/form-select | [文档](https://x-next.yjmf.com/components/select) |
79
+ | Skeleton | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/skeleton/index.d.ts) | x-next/style/skeleton | [文档](https://x-next.yjmf.com/components/skeleton) |
80
+ | SkeletonLine | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/skeleton/index.d.ts) | x-next/style/skeleton | [文档](https://x-next.yjmf.com/components/skeleton) |
81
+ | SkeletonShape | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/skeleton/index.d.ts) | x-next/style/skeleton | [文档](https://x-next.yjmf.com/components/skeleton) |
82
+ | Slider | 组件 | [精选用法](./components/slider.md) | [公开声明](../dist/components/form-slider/index.d.ts) | x-next/style/form-slider | [文档](https://x-next.yjmf.com/components/slider) |
83
+ | Space | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/space/index.d.ts) | x-next/style/space | [文档](https://x-next.yjmf.com/components/space) |
84
+ | Spin | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/spin/index.d.ts) | x-next/style/spin | [文档](https://x-next.yjmf.com/components/spin) |
85
+ | Step | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/steps/index.d.ts) | x-next/style/steps | [文档](https://x-next.yjmf.com/components/steps) |
86
+ | Steps | 组件 | [精选用法](./components/steps.md) | [公开声明](../dist/components/steps/index.d.ts) | x-next/style/steps | [文档](https://x-next.yjmf.com/components/steps) |
87
+ | Switch | 组件 | [精选用法](./components/switch.md) | [公开声明](../dist/components/form-switch/index.d.ts) | x-next/style/form-switch | [文档](https://x-next.yjmf.com/components/switch) |
88
+ | Table | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/table/index.d.ts) | x-next/style/table | [文档](https://x-next.yjmf.com/components/table) |
89
+ | TableColumn | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/table/index.d.ts) | x-next/style/table | [文档](https://x-next.yjmf.com/components/table) |
90
+ | TabPane | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/tabs/index.d.ts) | x-next/style/tabs | [文档](https://x-next.yjmf.com/components/tabs) |
91
+ | Tabs | 组件 | [精选用法](./components/tabs.md) | [公开声明](../dist/components/tabs/index.d.ts) | x-next/style/tabs | [文档](https://x-next.yjmf.com/components/tabs) |
92
+ | Tag | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/tag/index.d.ts) | x-next/style/tag | [文档](https://x-next.yjmf.com/components/tag) |
93
+ | Tbody | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/table/table-tbody.d.ts) | x-next/style/table | [文档](https://x-next.yjmf.com/components/table) |
94
+ | Td | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/table/table-td.d.ts) | x-next/style/table | [文档](https://x-next.yjmf.com/components/table) |
95
+ | Textarea | 组件 | [精选用法](./components/textarea.md) | [公开声明](../dist/components/form-textarea/index.d.ts) | x-next/style/form-textarea | [文档](https://x-next.yjmf.com/components/textarea) |
96
+ | Th | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/table/table-th.d.ts) | x-next/style/table | [文档](https://x-next.yjmf.com/components/table) |
97
+ | Thead | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/table/table-thead.d.ts) | x-next/style/table | [文档](https://x-next.yjmf.com/components/table) |
98
+ | Timeline | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/timeline/index.d.ts) | x-next/style/timeline | [文档](https://x-next.yjmf.com/components/timeline) |
99
+ | TimelineItem | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/timeline-item/index.d.ts) | 按同版本组件文档核实 | [文档](https://x-next.yjmf.com/components/timeline) |
100
+ | TimePicker | 组件 | [精选用法](./components/time-picker.md) | [公开声明](../dist/components/time-picker/index.d.ts) | x-next/style/time-picker | [文档](https://x-next.yjmf.com/components/time-picker) |
101
+ | TimeRangeSelector | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/time-range-selector/index.d.ts) | x-next/style/time-range-selector | [文档](https://x-next.yjmf.com/components/time-range-selector) |
102
+ | Tooltip | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/tooltip/index.d.ts) | x-next/style/tooltip | [文档](https://x-next.yjmf.com/components/tooltip) |
103
+ | Tr | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/table/table-tr.d.ts) | x-next/style/table | [文档](https://x-next.yjmf.com/components/table) |
104
+ | TrendChart | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/trend-chart/index.d.ts) | 按同版本组件文档核实 | [文档](https://x-next.yjmf.com/components/trend-chart) |
105
+ | Trigger | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/trigger/index.d.ts) | x-next/style/trigger | [文档](https://x-next.yjmf.com/components/trigger) |
106
+ | Upload | 组件 | [精选用法](./components/upload.md) | [公开声明](../dist/components/upload/index.d.ts) | x-next/style/upload | [文档](https://x-next.yjmf.com/components/upload) |
107
+ | Watermark | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/watermark/index.d.ts) | x-next/style/watermark | [文档](https://x-next.yjmf.com/components/watermark) |
108
+ | WeekPicker | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/date-picker/index.d.ts) | x-next/style/date-picker | [文档](https://x-next.yjmf.com/components/date-picker) |
109
+ | YearPicker | 组件 | 未展开精选用法;核对公开类型 | [公开声明](../dist/components/date-picker/index.d.ts) | x-next/style/date-picker | [文档](https://x-next.yjmf.com/components/date-picker) |
110
+
111
+ 服务/组件别名以根入口为准;Form、Table 等未展开能力存在于目录,先核对类型和对应文档,不套用其他库 API。
@@ -0,0 +1,33 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # Alert AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`Alert`;模型:v-model:visible;已核对事件:close。
7
+
8
+ 按需样式:`x-next/style/alert`(包含 base.css、alert.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ [组件文档与 live demo](https://x-next.yjmf.com/components/alert)。用 `v-model:visible` 控制显示;`defaultVisible=true`、`type='info'`、`showIcon=true`、`closable=false`。常用类型为 info、success、warning、error、normal。
11
+
12
+ `close(event)` 返回 `MouseEvent`,`after-close` 在关闭动画结束后触发且无参数。默认插槽放正文,`title` / `icon` / `action` / `close-element` 插槽可自定义对应内容。
13
+
14
+ ```vue
15
+ <script setup lang="ts">
16
+ import { ref } from 'vue';
17
+ import { Alert, Button } from 'x-next';
18
+ import 'x-next/dist/style.css';
19
+ const visible = ref(true);
20
+ const feedback = ref('提示显示中');
21
+ function closed(_event: MouseEvent) { feedback.value = '已点击关闭'; }
22
+ function restore() { visible.value = true; feedback.value = '提示显示中'; }
23
+ </script>
24
+ <template>
25
+ <Alert v-model:visible="visible" type="warning" title="检查待提交内容" closable @close="closed">
26
+ 提交前请核对所选日期。
27
+ </Alert>
28
+ <Button @click="restore">重新显示</Button>
29
+ <p role="status">{{ feedback }}</p>
30
+ </template>
31
+ ```
32
+
33
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。
@@ -0,0 +1,46 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # BarChart AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`BarChart`;模型:无;已核对事件:barClick、legendChange。
7
+
8
+ 按需样式:`x-next/style/bar-chart`(包含 base.css、bar-chart.css、spin.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ [组件文档与 live demo](https://x-next.yjmf.com/components/bar-chart)。按天 / 小时聚合的柱状趋势图:`categories` 是类目轴标签,`series` 是数据系列(`{ name, data, color }`),两者按下标对应。单系列就是普通柱状图;多系列默认并排,加 `stack` 变成堆叠并显示合计。轻量迷你走势用 TrendChart,需要坐标轴与读数用本组件。
11
+
12
+ 数值轴自动取 1/2/5 步长的整洁刻度(所以刻度行数可能少于 `grid.horizontalLinesNumber`);传 `max` 可锁定上界。`loading` 显示加载遮罩;数据全为 0 时显示空态,可用 `empty` 插槽替换。`null` / 负数按 0 处理且不画柱体。
13
+
14
+ `tooltip` 默认开启,`legend` 开启后点击图例可隐藏系列并触发 `legendChange`;点击柱体触发 `barClick`,命中具体柱体时带 `seriesIndex` / `value`,未命中时为 `null`。`valueFormatter` 统一控制提示、图例与数值轴的数字格式。
15
+
16
+ ```vue
17
+ <script setup lang="ts">
18
+ import { ref } from 'vue';
19
+ import { BarChart } from 'x-next';
20
+ import 'x-next/dist/style.css';
21
+ const categories = ref(['09-28', '09-29', '09-30', '10-01', '10-02']);
22
+ const series = ref([
23
+ { name: '浏览量', data: [86, 142, 98, 210, 176] },
24
+ { name: '访客数', data: [52, 88, 61, 120, 96] },
25
+ ]);
26
+ const picked = ref('尚未选择');
27
+ // 原生属性(含 aria-*)用对象 v-bind 传递,组件 props 与事件仍直接绑定
28
+ const chartAttrs = { 'aria-label': '每日浏览量与访客数' };
29
+ function onBarClick(data: { label: string; total: number; value: number | null }) {
30
+ picked.value = `${data.label}:合计 ${data.total}`;
31
+ }
32
+ </script>
33
+ <template>
34
+ <BarChart
35
+ v-bind="chartAttrs"
36
+ :categories="categories"
37
+ :series="series"
38
+ :height="240"
39
+ legend
40
+ @bar-click="onBarClick"
41
+ />
42
+ <p role="status">{{ picked }}</p>
43
+ </template>
44
+ ```
45
+
46
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。
@@ -0,0 +1,35 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # Button AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`Button`;模型:无;已核对事件:click。
7
+
8
+ 按需样式:`x-next/style/button`(包含 base.css、button.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ [组件文档与 live demo](https://x-next.yjmf.com/components/button)。`type` 默认 `'default'`,视觉主按钮用 `'primary'`;`htmlType` 默认 `'button'`,原生提交用 `'submit'`。独立使用时尺寸回退为 `'medium'`,`disabled` / `loading` 默认关闭。
11
+
12
+ `click` 载荷为 `MouseEvent`,禁用或加载中不会触发。`default`、`prefix`、`suffix`、`icon` 插槽可组合内容;异步业务自行维护 `loading`。
13
+
14
+ ```vue
15
+ <script setup lang="ts">
16
+ import { ref } from 'vue';
17
+ import { Button } from 'x-next';
18
+ import 'x-next/dist/style.css';
19
+ const loading = ref(false);
20
+ const result = ref('尚未保存');
21
+ async function save(_event: MouseEvent) {
22
+ loading.value = true;
23
+ try {
24
+ await Promise.resolve();
25
+ result.value = '保存完成';
26
+ } finally { loading.value = false; }
27
+ }
28
+ </script>
29
+ <template>
30
+ <Button type="primary" html-type="button" :loading="loading" @click="save">保存</Button>
31
+ <p role="status">{{ result }}</p>
32
+ </template>
33
+ ```
34
+
35
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。
@@ -0,0 +1,34 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # Checkbox AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`Checkbox`;模型:v-model;已核对事件:change。
7
+
8
+ 按需样式:`x-next/style/form-checkbox`(包含 base.css、form-checkbox.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ [组件文档与 live demo](https://x-next.yjmf.com/components/checkbox)。使用普通 `v-model`;模型支持 `boolean` 或 `(string | number | boolean)[]`,数组模式配合 `value`。`defaultChecked`、`disabled`、`indeterminate` 默认 `false`;半选状态不会替代模型值。
11
+
12
+ `change(value, event)` 返回新值和原生 `Event`。默认插槽是文案,`checkbox` 插槽提供 `checked` / `disabled`。`id`、`name`、`required`、`form`、`tabindex`、`autofocus`、`autocomplete` 和 `aria-*` 传给原生复选框。
13
+
14
+ ```vue
15
+ <script setup lang="ts">
16
+ import { ref } from 'vue';
17
+ import { Checkbox } from 'x-next';
18
+ import 'x-next/dist/style.css';
19
+ const accepted = ref(false);
20
+ const inputAttrs = { id: 'accept-terms', name: 'terms', required: true };
21
+ const feedback = ref('尚未选择');
22
+ function changed(value: boolean | (string | number | boolean)[], event: Event) {
23
+ feedback.value = `${value === true ? '已同意' : '未同意'}(${event.type})`;
24
+ }
25
+ </script>
26
+ <template>
27
+ <Checkbox v-model="accepted" v-bind="inputAttrs" @change="changed">
28
+ 我已阅读使用说明
29
+ </Checkbox>
30
+ <p role="status">{{ feedback }}</p>
31
+ </template>
32
+ ```
33
+
34
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。
@@ -0,0 +1,36 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # ColorPicker AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`ColorPicker`;模型:v-model、v-model:show;已核对事件:change、showChange、clear、confirm。
7
+
8
+ 按需样式:`x-next/style/color-picker`(包含 base.css、color-picker.css、button.css、form-input.css、form-input-number.css、trigger.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ [组件文档与 live demo](https://x-next.yjmf.com/components/color-picker)。`v-model` 输出 hex 字符串;`v-model:show` 控制面板。清除恢复显式 defaultValue,未提供则提交空字符串;change、clear、confirm 都通知 Form 的 change 通道。自定义触发器将 triggerAttrs 绑定到原生按钮,保留键盘、ARIA、禁用与焦点行为。
11
+
12
+ ```vue
13
+ <script setup lang="ts">
14
+ import { ref } from 'vue';
15
+ import { ColorPicker } from 'x-next';
16
+ const color = ref('#0f766e');
17
+ const show = ref(false);
18
+ const log = ref('等待操作');
19
+ const pickerAttrs = { id: 'brand-color', 'aria-label': '品牌色' };
20
+ </script>
21
+
22
+ <template>
23
+ <ColorPicker v-model="color" v-model:show="show" size="small" v-bind="pickerAttrs"
24
+ :swatches="['#0f766e', '#1c61ff']"
25
+ @change="(value) => log = `change: ${value}`"
26
+ @clear="log = '已清除'"
27
+ @confirm="(value) => log = `confirm: ${value}`">
28
+ <template #trigger="{ value, visible, triggerAttrs }">
29
+ <button v-bind="triggerAttrs">{{ visible ? '选择中' : value }}</button>
30
+ </template>
31
+ </ColorPicker>
32
+ <p role="status">{{ log }};保存值:{{ color || '空' }}</p>
33
+ </template>
34
+ ```
35
+
36
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。
@@ -0,0 +1,58 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # ConfigProvider AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`ConfigProvider`;模型:无;已核对事件:未在精选映射登记事件;其他 API 见下方用法。
7
+
8
+ 按需样式:`x-next/style/base.css`(包含 base.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ 局部品牌色用 `themeColor`,它一次生成色阶并重绑定组件别名;不必逐个覆盖 Button、Switch 的颜色。默认 body 浮层也会同步当前配置;更换 popupContainer 只用于业务定位和裁剪需要。Select 默认跟随祖先滚动;要滚动关闭可传 `triggerProps.scrollToClose`。
11
+
12
+ ```vue
13
+ <script setup lang="ts">
14
+ import { ref } from 'vue';
15
+ import { Button, ConfigProvider, Select, Switch } from 'x-next';
16
+
17
+ const brand = ref('#2f6feb');
18
+ const dark = ref(false);
19
+ const value = ref('day');
20
+ const switchAttrs = { 'aria-label': '局部暗色' };
21
+ const selectAttrs = { 'aria-label': '统计粒度' };
22
+ const options = [
23
+ { label: '按天', value: 'day' },
24
+ { label: '按周', value: 'week' },
25
+ ];
26
+ </script>
27
+
28
+ <template>
29
+ <ConfigProvider :theme-color="brand" :dark="dark" class="brand-scope">
30
+ <Button type="primary" @click="brand = brand === '#2f6feb' ? '#0f766e' : '#2f6feb'">
31
+ 切换品牌色
32
+ </Button>
33
+ <Switch v-model="dark" v-bind="switchAttrs" />
34
+ <Select
35
+ v-model="value"
36
+ :options="options"
37
+ v-bind="selectAttrs"
38
+ style="width: 160px"
39
+ />
40
+ </ConfigProvider>
41
+ </template>
42
+
43
+ <style scoped>
44
+ .brand-scope {
45
+ display: flex;
46
+ flex-wrap: wrap;
47
+ align-items: center;
48
+ gap: 12px;
49
+ padding: 16px;
50
+ color: var(--x-color-text-primary);
51
+ background: var(--x-color-bg-surface);
52
+ }
53
+ </style>
54
+ ```
55
+
56
+ 已有主题容器时,也可调用公开 `applyThemeColor(seed, { target, dark })`;切换暗色后需重新调用。只改后代的几条 semantic CSS 变量不会重算祖先 alias;`:tag="null"` 的 ConfigProvider 不创建本级主题边界,仍继承父级配置。
57
+
58
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。
@@ -0,0 +1,34 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # DatePicker AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`DatePicker`;模型:v-model、v-model:popup-visible;已核对事件:change。
7
+
8
+ 按需样式:`x-next/style/date-picker`(包含 base.css、button.css、date-picker.css、scrollbar-v2.css、time-picker.css、trigger.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ [组件文档与 live demo](https://x-next.yjmf.com/components/date-picker)。默认 `type='date'`、`allowClear=true`、`showToday=true`、`showTime=false`、`position='bl'`。`format` 控制显示,`valueFormat` 控制输出;本例使用 `'YYYY-MM-DD'` 字符串。公开 `DatePickerModelValue` 还包含数字、Date、数组和 `undefined`。
11
+
12
+ `change(value, date, dateString)` 为提交值,`select` 是面板选择;后两个参数声明为 `unknown`。清空返回 `undefined`,本例归一化为 `''` 保持受控。支持 `cell` / `extra` / `prefix` / `suffix-icon` 插槽;带时间选择需确认后提交。
13
+
14
+ ```vue
15
+ <script setup lang="ts">
16
+ import { ref } from 'vue';
17
+ import { DatePicker, type DatePickerModelValue } from 'x-next';
18
+ import 'x-next/dist/style.css';
19
+ const date = ref('');
20
+ const feedback = ref('尚未选择日期');
21
+ function update(value: DatePickerModelValue) { date.value = typeof value === 'string' ? value : ''; }
22
+ function changed(value: DatePickerModelValue, _date: unknown, _text: unknown) {
23
+ update(value);
24
+ feedback.value = date.value ? `日期:${date.value}` : '已清空日期';
25
+ }
26
+ </script>
27
+ <template>
28
+ <DatePicker :model-value="date" value-format="YYYY-MM-DD" placeholder="选择日期"
29
+ @update:model-value="update" @change="changed" />
30
+ <p role="status">{{ feedback }}</p>
31
+ </template>
32
+ ```
33
+
34
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。
@@ -0,0 +1,37 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # Dialog AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`DialogComponent, Dialog`;模型:v-model;已核对事件:close、closed。
7
+
8
+ 按需样式:`x-next/style/dialog`(包含 base.css、button.css、dialog.css、space.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ [组件文档与 live demo](https://x-next.yjmf.com/components/dialog)。从根入口导入 `DialogComponent as XDialog`,普通 `v-model` 为布尔值且默认 `false`。`renderTo='body'`、`mask=true`、`maskToClose=true`、`escToClose=true`、`destroyOnClosed=true`;`width` 支持数字或 CSS 长度。
11
+
12
+ `title`、默认正文、`footer` 是公开插槽,默认不生成业务按钮。`close(action, event?)` 的 action 为 `'cancel' | 'ok'`,`closed` 表示关闭动画结束;直接改模型不会调用业务取消逻辑。根入口服务 `Dialog(options)` 返回 `close()` / `update(options)` 句柄。
13
+
14
+ ```vue
15
+ <script setup lang="ts">
16
+ import { ref } from 'vue';
17
+ import { Button, DialogComponent as XDialog } from 'x-next';
18
+ import 'x-next/dist/style.css';
19
+ const visible = ref(false);
20
+ const feedback = ref('尚未确认');
21
+ function confirm() { feedback.value = '已确认'; visible.value = false; }
22
+ function cancel() { feedback.value = '已取消'; visible.value = false; }
23
+ </script>
24
+ <template>
25
+ <Button @click="visible = true">打开对话框</Button>
26
+ <XDialog v-model="visible" title="确认安排" :width="420">
27
+ <p>核对安排后确认。</p>
28
+ <template #footer>
29
+ <Button @click="cancel">取消</Button>
30
+ <Button type="primary" @click="confirm">确认</Button>
31
+ </template>
32
+ </XDialog>
33
+ <p role="status">{{ feedback }}</p>
34
+ </template>
35
+ ```
36
+
37
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。
@@ -0,0 +1,38 @@
1
+ <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/. -->
2
+ # Dropdown AI 使用
3
+
4
+ 适用版本:x-next@1.11.0;来源指纹:`eec9ec4e05970a1f3325c873b8858e1fcb84282fa4c09d4eda8d5044c833f82a`。
5
+
6
+ 先读 [通用接入](../core.md)。公开导出:`Dropdown`;模型:v-model:popup-visible;已核对事件:select、popupVisibleChange。
7
+
8
+ 按需样式:`x-next/style/dropdown`(包含 base.css、button.css、dropdown.css、empty.css、scrollbar-v2.css、spin.css、trigger.css)。代码块未单独引样式时在应用入口加载全量样式,或按实际所有组件加载 JS 入口;不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
9
+
10
+ [组件文档与 live demo](https://x-next.yjmf.com/components/dropdown)。使用 `v-model:popup-visible`,默认 `trigger='click'`、`position='bottom'`、`hideOnSelect=true`。根入口导出 `DropdownOption`、`DropdownGroup`、`DropdownSubmenu`;菜单内容放 `content` 插槽,另有 `empty` / `footer` 插槽。
11
+
12
+ `select(value, event)` 返回 `string | number | Record<string, any> | undefined` 和 `Event`,`popup-visible-change` 返回布尔值。选项支持 `disabled`;字符搜索 typeahead、自定义控件的通用键盘代理及 Tab 自动关闭仍有边界,不能据方向键导航推断这些能力已实现。
13
+
14
+ ```vue
15
+ <script setup lang="ts">
16
+ import { ref } from 'vue';
17
+ import { Button, Dropdown, DropdownOption } from 'x-next';
18
+ import 'x-next/dist/style.css';
19
+ const visible = ref(false);
20
+ const feedback = ref('尚未选择操作');
21
+ function select(value: unknown, _event: Event) {
22
+ feedback.value = value === 'copy' ? '已选择复制' : '已选择下载';
23
+ }
24
+ </script>
25
+ <template>
26
+ <Dropdown v-model:popup-visible="visible" @select="select">
27
+ <Button>更多操作</Button>
28
+ <template #content>
29
+ <DropdownOption value="copy">复制</DropdownOption>
30
+ <DropdownOption value="download">下载</DropdownOption>
31
+ <DropdownOption value="archive" disabled>归档暂不可用</DropdownOption>
32
+ </template>
33
+ </Dropdown>
34
+ <p role="status">{{ feedback }}</p>
35
+ </template>
36
+ ```
37
+
38
+ 返回 [AI 索引](../index.md)。精选示例不是完整 API 表,新能力先查同版本公开类型与组件文档。