x-next 1.18.1 → 1.18.2
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.
- package/AI_USAGE/catalog.md +1 -1
- package/AI_USAGE/components/alert-api.md +1 -1
- package/AI_USAGE/components/alert.md +1 -1
- package/AI_USAGE/components/bar-chart-api.md +1 -1
- package/AI_USAGE/components/bar-chart.md +1 -1
- package/AI_USAGE/components/boxicons.md +1 -1
- package/AI_USAGE/components/button-api.md +1 -1
- package/AI_USAGE/components/button.md +1 -1
- package/AI_USAGE/components/charts.md +1 -1
- package/AI_USAGE/components/checkbox-api.md +1 -1
- package/AI_USAGE/components/checkbox.md +1 -1
- package/AI_USAGE/components/color-picker-api.md +1 -1
- package/AI_USAGE/components/color-picker.md +1 -1
- package/AI_USAGE/components/config-provider-api.md +1 -1
- package/AI_USAGE/components/config-provider.md +1 -1
- package/AI_USAGE/components/date-picker-api.md +1 -1
- package/AI_USAGE/components/date-picker.md +1 -1
- package/AI_USAGE/components/dialog-api.md +1 -1
- package/AI_USAGE/components/dialog.md +1 -1
- package/AI_USAGE/components/draggable-api.md +1 -1
- package/AI_USAGE/components/draggable.md +1 -1
- package/AI_USAGE/components/drawer-api.md +1 -1
- package/AI_USAGE/components/drawer.md +1 -1
- package/AI_USAGE/components/dropdown-api.md +1 -1
- package/AI_USAGE/components/dropdown.md +1 -1
- package/AI_USAGE/components/empty-api.md +1 -1
- package/AI_USAGE/components/empty.md +1 -1
- package/AI_USAGE/components/finicon.md +1 -1
- package/AI_USAGE/components/form-api.md +1 -1
- package/AI_USAGE/components/form.md +1 -1
- package/AI_USAGE/components/grid-api.md +1 -1
- package/AI_USAGE/components/grid.md +1 -1
- package/AI_USAGE/components/heatmap-api.md +1 -1
- package/AI_USAGE/components/heatmap.md +1 -1
- package/AI_USAGE/components/icon-api.md +1 -1
- package/AI_USAGE/components/icon.md +1 -1
- package/AI_USAGE/components/image-api.md +1 -1
- package/AI_USAGE/components/image.md +1 -1
- package/AI_USAGE/components/input-api.md +1 -1
- package/AI_USAGE/components/input-number-api.md +1 -1
- package/AI_USAGE/components/input-number.md +1 -1
- package/AI_USAGE/components/input-tag-api.md +1 -1
- package/AI_USAGE/components/input-tag.md +1 -1
- package/AI_USAGE/components/input.md +1 -1
- package/AI_USAGE/components/layout-api.md +1 -1
- package/AI_USAGE/components/layout.md +1 -1
- package/AI_USAGE/components/line-chart-api.md +1 -1
- package/AI_USAGE/components/line-chart.md +1 -1
- package/AI_USAGE/components/link-api.md +1 -1
- package/AI_USAGE/components/link.md +1 -1
- package/AI_USAGE/components/menu-api.md +1 -1
- package/AI_USAGE/components/menu.md +1 -1
- package/AI_USAGE/components/message-api.md +1 -1
- package/AI_USAGE/components/message-box-api.md +1 -1
- package/AI_USAGE/components/message-box.md +1 -1
- package/AI_USAGE/components/message.md +1 -1
- package/AI_USAGE/components/network-api.md +1 -1
- package/AI_USAGE/components/network.md +1 -1
- package/AI_USAGE/components/notification-api.md +1 -1
- package/AI_USAGE/components/notification.md +1 -1
- package/AI_USAGE/components/pagination-api.md +1 -1
- package/AI_USAGE/components/pagination.md +1 -1
- package/AI_USAGE/components/pie-chart-api.md +1 -1
- package/AI_USAGE/components/pie-chart.md +1 -1
- package/AI_USAGE/components/popconfirm-api.md +1 -1
- package/AI_USAGE/components/popconfirm.md +1 -1
- package/AI_USAGE/components/popover-api.md +1 -1
- package/AI_USAGE/components/popover.md +1 -1
- package/AI_USAGE/components/popup-api.md +1 -1
- package/AI_USAGE/components/popup.md +1 -1
- package/AI_USAGE/components/progress-api.md +1 -1
- package/AI_USAGE/components/progress.md +1 -1
- package/AI_USAGE/components/radio-api.md +1 -1
- package/AI_USAGE/components/radio.md +1 -1
- package/AI_USAGE/components/rate-api.md +1 -1
- package/AI_USAGE/components/rate.md +1 -1
- package/AI_USAGE/components/resize-box-api.md +1 -1
- package/AI_USAGE/components/resize-box.md +1 -1
- package/AI_USAGE/components/scrollbar-api.md +1 -1
- package/AI_USAGE/components/scrollbar.md +1 -1
- package/AI_USAGE/components/select-api.md +1 -1
- package/AI_USAGE/components/select.md +1 -1
- package/AI_USAGE/components/skeleton-api.md +1 -1
- package/AI_USAGE/components/skeleton.md +1 -1
- package/AI_USAGE/components/slider-api.md +1 -1
- package/AI_USAGE/components/slider.md +1 -1
- package/AI_USAGE/components/space-api.md +1 -1
- package/AI_USAGE/components/space.md +1 -1
- package/AI_USAGE/components/spin-api.md +1 -1
- package/AI_USAGE/components/spin.md +1 -1
- package/AI_USAGE/components/steps-api.md +1 -1
- package/AI_USAGE/components/steps.md +1 -1
- package/AI_USAGE/components/switch-api.md +1 -1
- package/AI_USAGE/components/switch.md +1 -1
- package/AI_USAGE/components/table-api.md +1 -1
- package/AI_USAGE/components/table.md +1 -1
- package/AI_USAGE/components/tabs-api.md +1 -1
- package/AI_USAGE/components/tabs.md +1 -1
- package/AI_USAGE/components/tag-api.md +1 -1
- package/AI_USAGE/components/tag.md +1 -1
- package/AI_USAGE/components/textarea-api.md +1 -1
- package/AI_USAGE/components/textarea.md +1 -1
- package/AI_USAGE/components/time-picker-api.md +1 -1
- package/AI_USAGE/components/time-picker.md +1 -1
- package/AI_USAGE/components/time-range-selector-api.md +1 -1
- package/AI_USAGE/components/time-range-selector.md +1 -1
- package/AI_USAGE/components/timeline-api.md +1 -1
- package/AI_USAGE/components/timeline.md +1 -1
- package/AI_USAGE/components/tooltip-api.md +1 -1
- package/AI_USAGE/components/tooltip.md +1 -1
- package/AI_USAGE/components/transfer-api.md +1 -1
- package/AI_USAGE/components/transfer.md +1 -1
- package/AI_USAGE/components/tree-select-api.md +1 -1
- package/AI_USAGE/components/tree-select.md +1 -1
- package/AI_USAGE/components/trend-chart-api.md +1 -1
- package/AI_USAGE/components/trend-chart.md +1 -1
- package/AI_USAGE/components/trigger-api.md +1 -1
- package/AI_USAGE/components/trigger.md +1 -1
- package/AI_USAGE/components/upload-api.md +1 -1
- package/AI_USAGE/components/upload.md +1 -1
- package/AI_USAGE/components/watermark-api.md +1 -1
- package/AI_USAGE/components/watermark.md +1 -1
- package/AI_USAGE/core.md +1 -1
- package/AI_USAGE/index.md +1 -1
- package/AI_USAGE/recipes/form-on-demand.md +1 -1
- package/AI_USAGE.md +2 -2
- package/CHANGELOG.md +12 -0
- package/README.md +108 -212
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# TrendChart 完整公开 API
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`,声明路径仅作定位。插槽类型未细化时,具体槽名与作用域见本地用法示例。
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# TrendChart AI 使用
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
先读 [通用接入](../core.md)。公开导出:`TrendChart`;主要模型:无。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./trend-chart-api.md),包含本组件族全部子组件和别名。
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# Trigger 完整公开 API
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`,声明路径仅作定位。插槽类型未细化时,具体槽名与作用域见本地用法示例。
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# Trigger AI 使用
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
先读 [通用接入](../core.md)。公开导出:`Trigger`;主要模型:v-model:popup-visible。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./trigger-api.md),包含本组件族全部子组件和别名。
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# Upload 完整公开 API
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`,声明路径仅作定位。插槽类型未细化时,具体槽名与作用域见本地用法示例。
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# Upload AI 使用
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
先读 [通用接入](../core.md)。公开导出:`Upload`;主要模型:v-model:file-list。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./upload-api.md),包含本组件族全部子组件和别名。
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# Watermark 完整公开 API
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`,声明路径仅作定位。插槽类型未细化时,具体槽名与作用域见本地用法示例。
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# Watermark AI 使用
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
先读 [通用接入](../core.md)。公开导出:`Watermark`;主要模型:无。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./watermark-api.md),包含本组件族全部子组件和别名。
|
|
7
7
|
|
package/AI_USAGE/core.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# x-next AI 通用接入
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
```sh
|
|
7
7
|
npm install x-next
|
package/AI_USAGE/index.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# x-next AI 按需入口
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
AI 专用资料,与文档站独立分发。先读 [core.md](./core.md),再只读本任务需要的组件页;各页含场景 SFC,完整 API 位于对应 `*-api.md`。全部公开组件与服务有本地导航,查本包用法优先包内文件,不默认网络搜索。
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# 按需样式与表单接入
|
|
3
3
|
|
|
4
|
-
适用版本:x-next@1.18.
|
|
4
|
+
适用版本:x-next@1.18.2;来源指纹:`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
5
5
|
|
|
6
6
|
先读 [通用接入](../core.md),相关组件规则:[config-provider](../components/config-provider.md)、[input](../components/input.md)、[textarea](../components/textarea.md)、[select](../components/select.md)、[checkbox](../components/checkbox.md)。
|
|
7
7
|
|
package/AI_USAGE.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
2
|
# x-next AI 使用手册
|
|
3
3
|
|
|
4
|
-
适用版本:**x-next@1.18.
|
|
4
|
+
适用版本:**x-next@1.18.2**。Vue:`^3.5.0`;Node:`>=20.19.0`。
|
|
5
5
|
|
|
6
|
-
来源指纹(AI 行为说明、docs 导入快照、映射、样式依赖、版本、公开类型和 API 参考):`
|
|
6
|
+
来源指纹(AI 行为说明、docs 导入快照、映射、样式依赖、版本、公开类型和 API 参考):`4974aabb559b27116f3ec133b2a22af9b77b4b87d576ff30e821018746eebd80`。
|
|
7
7
|
|
|
8
8
|
覆盖 59 个组件族与 106 个公开组件/服务导出。优先通过 [本地按需索引](./AI_USAGE/index.md) 读取组件页和 API,不为查本包用法默认搜索网络。
|
|
9
9
|
|
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,18 @@
|
|
|
4
4
|
|
|
5
5
|
## [Unreleased]
|
|
6
6
|
|
|
7
|
+
## [1.18.2] - 2026-10-17
|
|
8
|
+
|
|
9
|
+
### 文档
|
|
10
|
+
|
|
11
|
+
- 重新组织 README,加入品牌 Logo、产品口号、版本徽章与文档导航,突出产品定位与核心能力。
|
|
12
|
+
- 将组件长清单整理为分类导航,移除可选图标集的单独介绍,精简接入与维护细节。
|
|
13
|
+
- 更新按需样式、完整引入和局部主题示例,保留 AI 辅助开发与贡献入口。
|
|
14
|
+
|
|
15
|
+
### 维护
|
|
16
|
+
|
|
17
|
+
- 依据 npmjs 已发布的 1.18.1 产物校准主入口体积预算,运行产物保持一致,保留组件预算和图标泄漏检查。
|
|
18
|
+
|
|
7
19
|
## [1.18.1] - 2026-10-15
|
|
8
20
|
|
|
9
21
|
### 修复
|
package/README.md
CHANGED
|
@@ -1,269 +1,165 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://x-next.yjmf.com">
|
|
3
|
+
<img src="https://x-next.yjmf.com/logo.svg" width="88" height="88" alt="X-Next Logo" />
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<h1 align="center">X-Next</h1>
|
|
8
|
+
|
|
9
|
+
<p align="center"><strong>把想法,变成界面。</strong></p>
|
|
10
|
+
|
|
11
|
+
<p align="center">面向企业级应用的 Vue 3 组件库,讲究视觉、交互与开发体验。</p>
|
|
12
|
+
|
|
13
|
+
<p align="center">
|
|
14
|
+
<a href="https://www.npmjs.com/package/x-next">
|
|
15
|
+
<img src="https://img.shields.io/npm/v/x-next?color=1c61ff" alt="npm version" />
|
|
16
|
+
</a>
|
|
17
|
+
<a href="https://vuejs.org">
|
|
18
|
+
<img src="https://img.shields.io/badge/Vue-3.5%2B-42b883?logo=vuedotjs&logoColor=white" alt="Vue 3.5+" />
|
|
19
|
+
</a>
|
|
20
|
+
<a href="./LICENSE">
|
|
21
|
+
<img src="https://img.shields.io/badge/license-MIT-1c61ff" alt="MIT License" />
|
|
22
|
+
</a>
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
<p align="center">
|
|
26
|
+
<a href="https://x-next.yjmf.com"><strong>官方文档</strong></a> ·
|
|
27
|
+
<a href="https://x-next.yjmf.com/guide/getting-started">快速开始</a> ·
|
|
28
|
+
<a href="https://x-next.yjmf.com/components/">浏览组件</a> ·
|
|
29
|
+
<a href="./CHANGELOG.md">更新日志</a>
|
|
30
|
+
</p>
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
X-Next 基于 Vue 3 与 TypeScript 构建,为中后台系统、业务平台与数据看板提供统一的界面基础。从表单录入、数据展示到交互反馈与图表,让团队专注于业务,也让应用保持一致的视觉与使用体验。
|
|
35
|
+
|
|
36
|
+
## 特性
|
|
37
|
+
|
|
38
|
+
- **覆盖业务常用场景** — 提供表单、表格、树选择、数据穿梭、日期时间、上传与反馈等组件,支持组合构建复杂界面。
|
|
39
|
+
- **统一的视觉语言** — 通过颜色、尺寸、间距与状态规范,保持组件之间的设计一致性。
|
|
40
|
+
- **灵活的主题能力** — 基于 CSS Variables,支持品牌色定制、亮暗主题与局部主题配置。
|
|
41
|
+
- **TypeScript 支持** — 提供组件、事件与服务的类型声明,以及 Vue 模板类型提示。
|
|
42
|
+
- **按需加载** — 组件代码与样式均提供按需入口,按项目需要选择引入范围。
|
|
43
|
+
- **面向 AI 辅助开发** — 随包提供独立使用手册、API 约束与完整示例,让 AI 基于当前版本编写代码。
|
|
14
44
|
|
|
15
45
|
## 安装
|
|
16
46
|
|
|
47
|
+
在已有的 Vue 3 项目中安装:
|
|
48
|
+
|
|
17
49
|
```bash
|
|
18
50
|
pnpm add x-next
|
|
19
51
|
```
|
|
20
52
|
|
|
21
|
-
或使用 npm:
|
|
22
|
-
|
|
23
53
|
```bash
|
|
24
54
|
npm install x-next
|
|
25
55
|
```
|
|
26
56
|
|
|
57
|
+
需要 Vue **3.5 及以上的 3.x 版本**,支持现代浏览器。
|
|
58
|
+
|
|
27
59
|
## 快速开始
|
|
28
60
|
|
|
29
|
-
###
|
|
61
|
+
### 按需引入
|
|
30
62
|
|
|
31
|
-
|
|
32
|
-
import { createApp } from 'vue';
|
|
33
|
-
import XNext from 'x-next';
|
|
34
|
-
import 'x-next/dist/style.css';
|
|
35
|
-
import App from './App.vue';
|
|
63
|
+
在 Vue 单文件组件中直接导入所需组件。样式入口会自动包含共享基础样式与组件的内部样式依赖。
|
|
36
64
|
|
|
37
|
-
|
|
65
|
+
```vue
|
|
66
|
+
<script setup lang="ts">
|
|
67
|
+
import { ref } from 'vue';
|
|
68
|
+
import { Button } from 'x-next';
|
|
69
|
+
import 'x-next/style/button';
|
|
38
70
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
```
|
|
71
|
+
const count = ref(0);
|
|
72
|
+
</script>
|
|
42
73
|
|
|
43
|
-
```vue
|
|
44
74
|
<template>
|
|
45
|
-
<
|
|
75
|
+
<Button type="primary" @click="count++">已点击 {{ count }} 次</Button>
|
|
46
76
|
</template>
|
|
47
77
|
```
|
|
48
78
|
|
|
49
|
-
###
|
|
79
|
+
### 完整引入
|
|
80
|
+
|
|
81
|
+
在应用入口注册全部组件,并引入完整样式:
|
|
50
82
|
|
|
51
83
|
```ts
|
|
52
84
|
import { createApp } from 'vue';
|
|
53
|
-
import
|
|
54
|
-
import 'x-next/
|
|
85
|
+
import XNext from 'x-next';
|
|
86
|
+
import 'x-next/style.css';
|
|
55
87
|
import App from './App.vue';
|
|
56
88
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
app.use(Button);
|
|
60
|
-
app.use(Table);
|
|
61
|
-
app.mount('#app');
|
|
62
|
-
|
|
63
|
-
Message.success('保存成功');
|
|
89
|
+
createApp(App).use(XNext).mount('#app');
|
|
64
90
|
```
|
|
65
91
|
|
|
66
|
-
|
|
92
|
+
注册后,可在模板中使用全局组件:
|
|
67
93
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
registerFiniconIcons();
|
|
94
|
+
```vue
|
|
95
|
+
<template>
|
|
96
|
+
<x-button type="primary">开始构建</x-button>
|
|
97
|
+
</template>
|
|
74
98
|
```
|
|
75
99
|
|
|
76
|
-
|
|
100
|
+
更多接入方式与样式说明见[快速开始](https://x-next.yjmf.com/guide/getting-started)。
|
|
77
101
|
|
|
78
|
-
##
|
|
102
|
+
## 探索组件
|
|
79
103
|
|
|
80
|
-
|
|
104
|
+
| 分类 | 常用组件 |
|
|
105
|
+
| --- | --- |
|
|
106
|
+
| 通用 | [Button 按钮](https://x-next.yjmf.com/components/button) · [Link 链接](https://x-next.yjmf.com/components/link) · [Tag 标签](https://x-next.yjmf.com/components/tag) · [Icon 图标](https://x-next.yjmf.com/components/icon) |
|
|
107
|
+
| 布局 | [Layout 布局](https://x-next.yjmf.com/components/layout) · [Grid 栅格](https://x-next.yjmf.com/components/grid) · [Space 间距](https://x-next.yjmf.com/components/space) |
|
|
108
|
+
| 表单 | [Form 表单](https://x-next.yjmf.com/components/form) · [Input 输入框](https://x-next.yjmf.com/components/input) · [Select 选择器](https://x-next.yjmf.com/components/select) · [DatePicker 日期选择器](https://x-next.yjmf.com/components/date-picker) |
|
|
109
|
+
| 复杂选择 | [TreeSelect 树选择器](https://x-next.yjmf.com/components/tree-select) · [Transfer 数据穿梭框](https://x-next.yjmf.com/components/transfer) · [TimeRangeSelector 时间范围选择](https://x-next.yjmf.com/components/time-range-selector) |
|
|
110
|
+
| 数据展示 | [Table 表格](https://x-next.yjmf.com/components/table) · [Image 图片](https://x-next.yjmf.com/components/image) · [Upload 上传](https://x-next.yjmf.com/components/upload) · [Timeline 时间线](https://x-next.yjmf.com/components/timeline) |
|
|
111
|
+
| 导航 | [Menu 菜单](https://x-next.yjmf.com/components/menu) · [Tabs 标签页](https://x-next.yjmf.com/components/tabs) · [Pagination 分页](https://x-next.yjmf.com/components/pagination) · [Steps 步骤条](https://x-next.yjmf.com/components/steps) |
|
|
112
|
+
| 反馈 | [Dialog 对话框](https://x-next.yjmf.com/components/dialog) · [Drawer 抽屉](https://x-next.yjmf.com/components/drawer) · [Message 全局提示](https://x-next.yjmf.com/components/message) · [Notification 通知提醒](https://x-next.yjmf.com/components/notification) |
|
|
113
|
+
| 图表 | [LineChart 折线图](https://x-next.yjmf.com/components/line-chart) · [BarChart 柱状趋势图](https://x-next.yjmf.com/components/bar-chart) · [PieChart 饼图](https://x-next.yjmf.com/components/pie-chart) · [Heatmap 热力图](https://x-next.yjmf.com/components/heatmap) |
|
|
81
114
|
|
|
82
|
-
|
|
83
|
-
import 'x-next/dist/style.css';
|
|
84
|
-
```
|
|
115
|
+
查看[全部组件与交互示例](https://x-next.yjmf.com/components/)。内置图表覆盖趋势、比较、占比与热力分布,无需额外安装图表库。
|
|
85
116
|
|
|
86
117
|
## 主题定制
|
|
87
118
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
```css
|
|
91
|
-
:root {
|
|
92
|
-
--x-color-primary: #0f766e;
|
|
93
|
-
}
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
局部覆盖示例:
|
|
119
|
+
使用 `ConfigProvider` 配置品牌色、组件尺寸与暗色模式,也可以通过公开的 CSS Variables 调整应用风格。
|
|
97
120
|
|
|
98
121
|
```vue
|
|
122
|
+
<script setup lang="ts">
|
|
123
|
+
import { Button, ConfigProvider } from 'x-next';
|
|
124
|
+
import 'x-next/style/button';
|
|
125
|
+
</script>
|
|
126
|
+
|
|
99
127
|
<template>
|
|
100
|
-
<
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
</section>
|
|
128
|
+
<ConfigProvider theme-color="#0f766e" :dark="true">
|
|
129
|
+
<Button type="primary">品牌主题</Button>
|
|
130
|
+
</ConfigProvider>
|
|
104
131
|
</template>
|
|
105
|
-
|
|
106
|
-
<style scoped>
|
|
107
|
-
.brand-theme {
|
|
108
|
-
--x-color-primary: #0f766e;
|
|
109
|
-
--x-button-color-bg-primary-solid: var(--x-color-primary);
|
|
110
|
-
--x-button-color-border-primary: var(--x-color-primary);
|
|
111
|
-
--x-time-range-selector-color-default: var(--x-color-primary);
|
|
112
|
-
}
|
|
113
|
-
</style>
|
|
114
132
|
```
|
|
115
133
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
## 组件
|
|
119
|
-
|
|
120
|
-
### 通用
|
|
134
|
+
了解[样式与主题](https://x-next.yjmf.com/guide/theme),查看全局配置、局部主题与运行时换色示例。
|
|
121
135
|
|
|
122
|
-
|
|
123
|
-
- Icon 图标
|
|
124
|
-
- Finicon 金融图标
|
|
125
|
-
- Boxicons 图标
|
|
126
|
-
- Button 按钮
|
|
127
|
-
- Link 链接
|
|
128
|
-
- Tag 标签
|
|
129
|
-
|
|
130
|
-
### 布局
|
|
131
|
-
|
|
132
|
-
- Grid 栅格
|
|
133
|
-
- Layout 布局
|
|
134
|
-
- Space 间距
|
|
135
|
-
- ResizeBox 可调整区域
|
|
136
|
-
- Scrollbar 滚动条
|
|
137
|
-
|
|
138
|
-
### 表单
|
|
139
|
-
|
|
140
|
-
- Form 表单
|
|
141
|
-
- Input 输入框
|
|
142
|
-
- Textarea 文本域
|
|
143
|
-
- InputNumber 数字输入
|
|
144
|
-
- InputTag 标签输入
|
|
145
|
-
- Checkbox 复选框
|
|
146
|
-
- Radio 单选框
|
|
147
|
-
- Select 选择器
|
|
148
|
-
- Slider 滑块
|
|
149
|
-
- Rate 评分
|
|
150
|
-
- ColorPicker 颜色选择器
|
|
151
|
-
- Switch 开关
|
|
152
|
-
- DatePicker 日期选择器
|
|
153
|
-
- TimePicker 时间选择器
|
|
154
|
-
- TimeRangeSelector 时间范围选择
|
|
155
|
-
|
|
156
|
-
### 反馈
|
|
157
|
-
|
|
158
|
-
- Alert 警告提示
|
|
159
|
-
- Dialog 对话框
|
|
160
|
-
- Drawer 抽屉
|
|
161
|
-
- Message 全局提示
|
|
162
|
-
- MessageBox 消息框
|
|
163
|
-
- Notification 通知提醒
|
|
164
|
-
- Popconfirm 气泡确认
|
|
165
|
-
- Popover 气泡卡片
|
|
166
|
-
- Progress 进度条
|
|
167
|
-
- Spin 加载中
|
|
168
|
-
- Skeleton 骨架屏
|
|
169
|
-
|
|
170
|
-
### 导航
|
|
171
|
-
|
|
172
|
-
- Dropdown 下拉菜单
|
|
173
|
-
- Menu 菜单
|
|
174
|
-
- Pagination 分页
|
|
175
|
-
- Steps 步骤条
|
|
176
|
-
- Tabs 标签页
|
|
177
|
-
|
|
178
|
-
### 数据展示
|
|
179
|
-
|
|
180
|
-
- Empty 空状态
|
|
181
|
-
- Image 图片
|
|
182
|
-
- Table 表格
|
|
183
|
-
- Timeline 时间线
|
|
184
|
-
- Upload 上传
|
|
185
|
-
|
|
186
|
-
### 图表
|
|
187
|
-
|
|
188
|
-
内置手写 SVG 图表,不依赖外部图表库;选择指引见[图表总览](https://x-next.yjmf.com/components/charts)。
|
|
189
|
-
|
|
190
|
-
- LineChart 折线图
|
|
191
|
-
- BarChart 柱状趋势图
|
|
192
|
-
- PieChart 饼图
|
|
193
|
-
- TrendChart 迷你趋势图
|
|
194
|
-
- Heatmap 热力图
|
|
195
|
-
|
|
196
|
-
### 其他能力
|
|
197
|
-
|
|
198
|
-
- Draggable 拖拽
|
|
199
|
-
- Network 网络状态
|
|
200
|
-
- Tooltip 文字提示
|
|
201
|
-
- Watermark 水印
|
|
202
|
-
|
|
203
|
-
### 底层能力
|
|
204
|
-
|
|
205
|
-
主要供组件库内部和高级封装使用,业务优先选择上方语义组件。
|
|
206
|
-
|
|
207
|
-
- Trigger 触发器
|
|
136
|
+
## AI 辅助开发
|
|
208
137
|
|
|
209
|
-
|
|
138
|
+
X-Next 的 npm 包包含与版本配套的 AI 编程资料,覆盖接入规则、组件 API 与可运行的 Vue 示例。
|
|
210
139
|
|
|
211
|
-
|
|
212
|
-
import { Message, Notification, Dialog, MessageBox } from 'x-next';
|
|
140
|
+
从 [AI_CODING.md](./AI_CODING.md) 开始,将其中的使用规则合并到业务项目的 Agent 指令中;再读取 [AI_USAGE/index.md](./AI_USAGE/index.md) 与 [core.md](./AI_USAGE/core.md),按任务查阅所需组件或场景。资料需要由项目规则显式引用。
|
|
213
141
|
|
|
214
|
-
|
|
142
|
+
查看[AI 使用指南](https://x-next.yjmf.com/guide/ai-usage)。
|
|
215
143
|
|
|
216
|
-
|
|
217
|
-
title: '成功',
|
|
218
|
-
content: '数据已同步',
|
|
219
|
-
});
|
|
220
|
-
```
|
|
144
|
+
## 参与贡献
|
|
221
145
|
|
|
222
|
-
|
|
146
|
+
欢迎反馈使用问题、提出功能建议,以及参与组件开发与文档建设。
|
|
223
147
|
|
|
224
|
-
|
|
225
|
-
import {
|
|
226
|
-
useDraggable,
|
|
227
|
-
useResizeObserver,
|
|
228
|
-
vDraggable,
|
|
229
|
-
vWatermark,
|
|
230
|
-
type WatermarkOptions,
|
|
231
|
-
} from 'x-next';
|
|
232
|
-
```
|
|
148
|
+
本地开发:
|
|
233
149
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
```text
|
|
239
|
-
node_modules/x-next/AI_CODING.md
|
|
240
|
-
node_modules/x-next/AI_USAGE/index.md
|
|
241
|
-
node_modules/x-next/AI_USAGE/core.md
|
|
242
|
-
node_modules/x-next/AI_USAGE/components/select.md
|
|
150
|
+
```bash
|
|
151
|
+
pnpm install
|
|
152
|
+
pnpm docs:dev
|
|
243
153
|
```
|
|
244
154
|
|
|
245
|
-
|
|
155
|
+
提交前请阅读 [AGENTS.md](./AGENTS.md),并运行相应检查:
|
|
246
156
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
```text
|
|
252
|
-
node_modules/x-next/AI_USAGE.md
|
|
157
|
+
```bash
|
|
158
|
+
pnpm build
|
|
159
|
+
pnpm docs:build
|
|
160
|
+
pnpm check
|
|
253
161
|
```
|
|
254
162
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
## 类型提示
|
|
258
|
-
|
|
259
|
-
X-Next 提供 TypeScript 类型声明和 Vue 全局组件类型声明。安装后可直接在 Vue 3 + TypeScript 项目中获得组件类型提示。
|
|
260
|
-
|
|
261
|
-
如需生成或更新 Volar 全局组件声明,请查看文档站说明。
|
|
262
|
-
|
|
263
|
-
## 浏览器兼容性
|
|
264
|
-
|
|
265
|
-
推荐使用现代浏览器环境。主题能力依赖 CSS Variables,部分视觉效果会使用现代 CSS 能力。
|
|
266
|
-
|
|
267
|
-
## License
|
|
163
|
+
## 开源协议
|
|
268
164
|
|
|
269
|
-
MIT
|
|
165
|
+
[MIT](./LICENSE)
|