- Vue 3 与 TypeScript：基于 Composition API，提供组件属性、事件、插槽与实例的类型声明
- 常用组件：覆盖表单、表格、日期选择、分页、弹窗、通知与 Markdown 等场景，配套交互示例和 API 文档
- 主题定制：支持浅色、深色、预置配色和自定义主色，通过主题变量调整密度与组件外观，支持局部主题
- 表单校验：通过
FormRules<T>声明规则，支持异步校验、字段重置和标签左对齐、右对齐与顶部布局 - 按需导入：提供 ESM、静态具名导入和组件子路径，支持 JavaScript tree-shaking
- 国际化：内置简体中文、繁体中文与英文，可通过 ConfigProvider 设置或扩展组件文案
需要 Vue 3.5+、Node.js 24+
pnpm add https://github.com/zyycn/codex-proxy-ui/releases/download/v0.11.0/codex-proxy-ui-0.11.0.tgz包名为 @codex-proxy/ui，通过 GitHub Releases 分发，尚未发布到 npm registry。每个版本提供 .tgz 安装包与 .sha256 校验文件，提交应用锁文件以固定版本和完整性摘要
在 Vue 应用的客户端入口 src/main.ts 中初始化主题，再挂载应用
import {
applyTheme,
createTheme,
} from '@codex-proxy/ui/theme'
import { createApp } from 'vue'
import App from './App.vue'
import '@codex-proxy/ui/styles.css'
applyTheme(
document.documentElement,
createTheme({ scheme: 'light' }),
)
createApp(App).mount('#app')styles.css 包含基础样式与完整组件样式，使用组件无需安装 Tailwind。SSR 项目在客户端生命周期中初始化主题，详见安装指南
在 src/App.vue 中直接导入组件，无需全局注册
<script setup lang="ts">
import { ZButton, ZCard } from '@codex-proxy/ui'
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<ZCard title="开始使用">
<ZButton type="primary" @click="count++">
已点击 {{ count }} 次
</ZButton>
</ZCard>
</template>组件也提供独立入口，模板支持 ZButton 和 z-button 两种写法
import { ZButton } from '@codex-proxy/ui/button'JavaScript 可按需裁剪，styles.css 为完整样式，不随组件导入裁剪
在线文档与 Playground 提供可交互示例、源码和主题切换；固定版本的 API 可查看对应 Git 标签下的文档
| 主题 | 内容 |
|---|---|
| 安装与样式集成 | 包入口、按需使用与 Tailwind CSS 4 接入 |
| 组件目录 | 组件示例、属性、事件、插槽与实例方法 |
| 主题定制 | 预置配色、明暗模式、局部主题与组件变量 |
| 公开 API | 公开入口、服务、组合式函数与命名约定 |
| 国际化 | 语言包、ConfigProvider 与自定义文案 |
| 源码联调 | 在应用中使用组件源码与热更新 |
| 组件架构 | 目录组织、公开入口与组件职责 |
使用 Node.js 24+ 和 package.json 指定的 pnpm 版本
git clone https://github.com/zyycn/codex-proxy-ui.git
cd codex-proxy-ui
pnpm install --frozen-lockfile
pnpm dev打开 本地 Playground，组件与文档修改会自动热更新
pnpm lint
pnpm typecheck
pnpm build
pnpm build:playgroundpnpm pack 自动构建 JavaScript、CSS 和类型声明，并生成可安装的归档。正式版本的发布工作流同步更新在线 Playground