x-next

X-Next 基于 Vue 3 与 TypeScript 构建，为中后台系统、业务平台与数据看板提供统一的界面基础。从表单录入、数据展示到交互反馈与图表，让团队专注于业务，也让应用保持一致的视觉与使用体验。

特性

• 覆盖业务常用场景 — 提供表单、表格、树选择、数据穿梭、日期时间、上传与反馈等组件，支持组合构建复杂界面。
• 统一的视觉语言 — 通过颜色、尺寸、间距与状态规范，保持组件之间的设计一致性。
• 灵活的主题能力 — 基于 CSS Variables，支持品牌色定制、亮暗主题与局部主题配置。
• TypeScript 支持 — 提供组件、事件与服务的类型声明，以及 Vue 模板类型提示。
• 按需加载 — 组件代码与样式均提供按需入口，按项目需要选择引入范围。
• 面向 AI 辅助开发 — 随包提供独立使用手册、API 约束与完整示例，让 AI 基于当前版本编写代码。

安装

在已有的 Vue 3 项目中安装：

pnpm add x-next

npm install x-next

需要 Vue 3.5 及以上的 3.x 版本，支持现代浏览器。

快速开始

按需引入

在 Vue 单文件组件中直接导入所需组件。样式入口会自动包含共享基础样式与组件的内部样式依赖。

<script setup lang="ts">
  import { ref } from 'vue';
  import { Button } from 'x-next';
  import 'x-next/style/button';

  const count = ref(0);
</script>

<template>
  <Button type="primary" @click="count++">已点击 {{ count }} 次</Button>
</template>

完整引入

在应用入口注册全部组件，并引入完整样式：

import { createApp } from 'vue';
import XNext from 'x-next';
import 'x-next/style.css';
import App from './App.vue';

createApp(App).use(XNext).mount('#app');

注册后，可在模板中使用全局组件：

<template>
  <x-button type="primary">开始构建</x-button>
</template>

更多接入方式与样式说明见快速开始。

探索组件

查看全部组件与交互示例。内置图表覆盖趋势、比较、占比与热力分布，无需额外安装图表库。

主题定制

使用 ConfigProvider 配置品牌色、组件尺寸与暗色模式，也可以通过公开的 CSS Variables 调整应用风格。

<script setup lang="ts">
  import { Button, ConfigProvider } from 'x-next';
  import 'x-next/style/button';
</script>

<template>
  <ConfigProvider theme-color="#0f766e" :dark="true">
    <Button type="primary">品牌主题</Button>
  </ConfigProvider>
</template>

了解样式与主题，查看全局配置、局部主题与运行时换色示例。

AI 辅助开发

X-Next 的 npm 包包含与版本配套的 AI 编程资料，覆盖接入规则、组件 API 与可运行的 Vue 示例。

从 AI_CODING.md 开始，将其中的使用规则合并到业务项目的 Agent 指令中；再读取 AI_USAGE/index.md 与 core.md，按任务查阅所需组件或场景。资料需要由项目规则显式引用。

查看AI 使用指南。

参与贡献

欢迎反馈使用问题、提出功能建议，以及参与组件开发与文档建设。

本地开发：

pnpm install
pnpm docs:dev

提交前请阅读 AGENTS.md，并运行相应检查：

pnpm build
pnpm docs:build
pnpm check

开源协议

MIT