ai-front-base 0.1.0

package/README.md

@@ -0,0 +1,63 @@
+# AI Front Base
+
+企业级PC端AI组件库
+
+## 🤖 AI开发者必读
+
+### 开发前必读文档（按顺序）
+
+1. **[前端规范](src/standards/README.md)** - 必读，了解命名、代码风格、Git规范
+2. **[布局规则](src/layouts/README.md)** - 必读，确定业务系统遵守的布局规则
+3. **[样式主题](src/styles/README.md)** - 必读，选择并配置主题
+
+### 按需阅读
+
+4. **[组件库](src/components/README.md)** - 查看组件列表，按需查看各组件的types.ts了解用法
+
+### AI开发流程
+
+**重要：在开发新页面前，AI必须主动完成以下确认步骤**
+
+1. 阅读上述必读文档，了解项目规范
+2. 根据用户需求，明确以下配置：
+   - **布局规则**：政务系统 / 工会系统 / 其他
+   - **主题方案**：默认主题 / 自定义主题
+3. 向用户反馈确认信息，格式如下：
+   ```
+   📋 开发配置确认
+   - 布局规则：政务系统布局
+   - 主题方案：默认主题
+
+   请确认以上配置是否正确？
+   ```
+4. 等待用户确认后，再开始页面开发
+
+## 安装
+
+```bash
+npm install ai-front-base
+```
+
+## 快速开始
+
+```js
+// 1. 引入样式
+import 'ai-front-base/styles'
+
+// 2. 引入组件
+import { AiForm, AiTable } from 'ai-front-base'
+```
+
+## 技术栈
+
+- Vue 3 + Composition API
+- Element Plus
+- TypeScript
+- Vite
+
+## 开发
+
+```bash
+pnpm install
+pnpm build
+```

package/dist/README.md

@@ -0,0 +1,63 @@
+# AI Front Base
+
+企业级PC端AI组件库
+
+## 🤖 AI开发者必读
+
+### 开发前必读文档（按顺序）
+
+1. **[前端规范](standards/README.md)** - 必读，了解命名、代码风格、Git规范
+2. **[布局规则](layouts/README.md)** - 必读，确定业务系统遵守的布局规则
+3. **[样式主题](styles/README.md)** - 必读，选择并配置主题
+
+### 按需阅读
+
+4. **[组件库](components/README.md)** - 查看组件列表，按需查看各组件的types.ts了解用法
+
+### AI开发流程
+
+**重要：在开发新页面前，AI必须主动完成以下确认步骤**
+
+1. 阅读上述必读文档，了解项目规范
+2. 根据用户需求，明确以下配置：
+   - **布局规则**：政务系统 / 工会系统 / 其他
+   - **主题方案**：默认主题 / 自定义主题
+3. 向用户反馈确认信息，格式如下：
+   ```
+   📋 开发配置确认
+   - 布局规则：政务系统布局
+   - 主题方案：默认主题
+
+   请确认以上配置是否正确？
+   ```
+4. 等待用户确认后，再开始页面开发
+
+## 安装
+
+```bash
+npm install ai-front-base
+```
+
+## 快速开始
+
+```js
+// 1. 引入样式
+import 'ai-front-base/styles'
+
+// 2. 引入组件
+import { AiForm, AiTable } from 'ai-front-base'
+```
+
+## 技术栈
+
+- Vue 3 + Composition API
+- Element Plus
+- TypeScript
+- Vite
+
+## 开发
+
+```bash
+pnpm install
+pnpm build
+```

package/dist/components/AiForm/index.mjs

@@ -0,0 +1,4 @@
+import f from "./index.vue.mjs";
+export {
+  f as default
+};

package/dist/components/AiForm/index.vue.mjs

@@ -0,0 +1,45 @@
+import { defineComponent as f, computed as h, openBlock as o, createElementBlock as t, withModifiers as V, Fragment as p, renderList as d, createElementVNode as _, toDisplayString as c, withDirectives as s, vModelText as b, vModelSelect as y, createCommentVNode as k } from "vue";
+const g = ["onUpdate:modelValue", "placeholder"], x = ["onUpdate:modelValue"], S = ["value"], M = /* @__PURE__ */ f({
+  __name: "index",
+  props: {
+    config: {},
+    modelValue: {}
+  },
+  emits: ["update:modelValue", "submit"],
+  setup(n, { emit: i }) {
+    const m = n, u = i, a = h({
+      get: () => m.modelValue,
+      set: (r) => u("update:modelValue", r)
+    }), v = () => u("submit", a.value);
+    return (r, U) => (o(), t("form", {
+      onSubmit: V(v, ["prevent"])
+    }, [
+      (o(!0), t(p, null, d(n.config, (e) => (o(), t("div", {
+        key: e.prop,
+        class: "form-item"
+      }, [
+        _("label", null, c(e.label), 1),
+        e.type === "input" ? s((o(), t("input", {
+          key: 0,
+          "onUpdate:modelValue": (l) => a.value[e.prop] = l,
+          placeholder: e.placeholder
+        }, null, 8, g)), [
+          [b, a.value[e.prop]]
+        ]) : e.type === "select" ? s((o(), t("select", {
+          key: 1,
+          "onUpdate:modelValue": (l) => a.value[e.prop] = l
+        }, [
+          (o(!0), t(p, null, d(e.options, (l) => (o(), t("option", {
+            key: l.value,
+            value: l.value
+          }, c(l.label), 9, S))), 128))
+        ], 8, x)), [
+          [y, a.value[e.prop]]
+        ]) : k("", !0)
+      ]))), 128))
+    ], 32));
+  }
+});
+export {
+  M as default
+};

package/dist/components/AiForm/types.ts

@@ -0,0 +1,35 @@
+/**
+ * AiForm - 表单组件
+ *
+ * 用法示例：
+ * <AiForm v-model="formData" :config="formConfig" @submit="handleSubmit" />
+ *
+ * 配置示例：
+ * const formConfig = [
+ *   { prop: 'name', label: '姓名', type: 'input', required: true },
+ *   { prop: 'age', label: '年龄', type: 'input' },
+ *   { prop: 'gender', label: '性别', type: 'select', options: [
+ *     { label: '男', value: 'male' },
+ *     { label: '女', value: 'female' }
+ *   ]}
+ * ]
+ */
+
+export interface IFormItem {
+  prop: string              // 字段名
+  label: string             // 标签文本
+  type: 'input' | 'select' | 'textarea'  // 表单项类型
+  placeholder?: string      // 占位符
+  required?: boolean        // 是否必填
+  options?: Array<{ label: string; value: any }>  // select选项
+}
+
+export interface IAiFormProps {
+  config: IFormItem[]                    // 表单配置数组
+  modelValue: Record<string, any>        // 表单数据对象
+}
+
+export interface IAiFormEmits {
+  (e: 'update:modelValue', value: Record<string, any>): void  // 数据更新
+  (e: 'submit', value: Record<string, any>): void             // 表单提交
+}

package/dist/components/AiInput/index.mjs

@@ -0,0 +1,4 @@
+import f from "./index.vue.mjs";
+export {
+  f as default
+};

package/dist/components/AiInput/index.vue.mjs

@@ -0,0 +1,21 @@
+import { defineComponent as n, openBlock as u, createElementBlock as d } from "vue";
+const r = ["value", "placeholder"], c = /* @__PURE__ */ n({
+  __name: "index",
+  props: {
+    modelValue: {},
+    placeholder: {},
+    clearable: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const o = t;
+    return (p, l) => (u(), d("input", {
+      value: e.modelValue,
+      placeholder: e.placeholder,
+      onInput: l[0] || (l[0] = (a) => o("update:modelValue", a.target.value))
+    }, null, 40, r));
+  }
+});
+export {
+  c as default
+};

package/dist/components/AiInput/types.ts

@@ -0,0 +1,16 @@
+/**
+ * AiInput - 输入框组件
+ *
+ * 用法示例：
+ * <AiInput v-model="value" placeholder="请输入" />
+ */
+
+export interface IAiInputProps {
+  modelValue: string        // 输入值
+  placeholder?: string      // 占位符
+  clearable?: boolean       // 是否可清空（默认true）
+}
+
+export interface IAiInputEmits {
+  (e: 'update:modelValue', value: string): void  // 值更新事件
+}

package/dist/components/AiSelect/index.mjs

@@ -0,0 +1,4 @@
+import f from "./index.vue.mjs";
+export {
+  f as default
+};

package/dist/components/AiSelect/index.vue.mjs

@@ -0,0 +1,27 @@
+import { defineComponent as r, openBlock as l, createElementBlock as o, createElementVNode as i, Fragment as d, renderList as m, toDisplayString as s } from "vue";
+const p = ["value"], v = ["value"], V = /* @__PURE__ */ r({
+  __name: "index",
+  props: {
+    modelValue: {},
+    options: {},
+    clearable: { type: Boolean, default: !0 },
+    filterable: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: n }) {
+    const u = n;
+    return (f, t) => (l(), o("select", {
+      value: a.modelValue,
+      onChange: t[0] || (t[0] = (e) => u("update:modelValue", e.target.value))
+    }, [
+      t[1] || (t[1] = i("option", { value: "" }, "请选择", -1)),
+      (l(!0), o(d, null, m(a.options, (e) => (l(), o("option", {
+        key: e.value,
+        value: e.value
+      }, s(e.label), 9, v))), 128))
+    ], 40, p));
+  }
+});
+export {
+  V as default
+};

package/dist/components/AiSelect/types.ts

@@ -0,0 +1,28 @@
+/**
+ * AiSelect - 选择器组件
+ *
+ * 用法示例：
+ * <AiSelect v-model="value" :options="options" />
+ *
+ * 配置示例：
+ * const options = [
+ *   { label: '选项1', value: 1 },
+ *   { label: '选项2', value: 2 }
+ * ]
+ */
+
+export interface ISelectOption {
+  label: string     // 选项文本
+  value: any        // 选项值
+}
+
+export interface IAiSelectProps {
+  modelValue: any               // 选中值
+  options: ISelectOption[]      // 选项数组
+  clearable?: boolean           // 是否可清空（默认true）
+  filterable?: boolean          // 是否可过滤（默认true）
+}
+
+export interface IAiSelectEmits {
+  (e: 'update:modelValue', value: any): void  // 值更新事件
+}

package/dist/components/AiTable/index.mjs

@@ -0,0 +1,4 @@
+import f from "./index.vue.mjs";
+export {
+  f as default
+};

package/dist/components/AiTable/index.vue.mjs

@@ -0,0 +1,30 @@
+import { defineComponent as i, openBlock as e, createElementBlock as t, createElementVNode as l, Fragment as a, renderList as u, normalizeStyle as m, toDisplayString as d } from "vue";
+const c = { class: "ai-table" }, k = /* @__PURE__ */ i({
+  __name: "index",
+  props: {
+    columns: {},
+    data: {}
+  },
+  setup(r) {
+    return (p, y) => (e(), t("table", c, [
+      l("thead", null, [
+        l("tr", null, [
+          (e(!0), t(a, null, u(r.columns, (n) => (e(), t("th", {
+            key: n.prop,
+            style: m({ width: n.width })
+          }, d(n.label), 5))), 128))
+        ])
+      ]),
+      l("tbody", null, [
+        (e(!0), t(a, null, u(r.data, (n, s) => (e(), t("tr", { key: s }, [
+          (e(!0), t(a, null, u(r.columns, (o) => (e(), t("td", {
+            key: o.prop
+          }, d(n[o.prop]), 1))), 128))
+        ]))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  k as default
+};

package/dist/components/AiTable/types.ts

@@ -0,0 +1,27 @@
+/**
+ * AiTable - 表格组件
+ *
+ * 用法示例：
+ * <AiTable :columns="columns" :data="tableData" />
+ *
+ * 配置示例：
+ * const columns = [
+ *   { prop: 'name', label: '姓名', width: '100px' },
+ *   { prop: 'age', label: '年龄' },
+ *   { prop: 'address', label: '地址', width: '200px' }
+ * ]
+ * const tableData = [
+ *   { name: '张三', age: 18, address: '北京' }
+ * ]
+ */
+
+export interface ITableColumn {
+  prop: string      // 列字段名
+  label: string     // 列标题
+  width?: string    // 列宽度
+}
+
+export interface IAiTableProps {
+  columns: ITableColumn[]           // 列配置数组
+  data: Record<string, any>[]       // 表格数据数组
+}

package/dist/components/README.md

@@ -0,0 +1,63 @@
+# Components组件库
+
+AI组件库 - 基于Vue3的可复用组件
+
+## 如何使用组件库
+
+### 步骤1：查看组件列表
+浏览下方组件列表，找到需要的组件
+
+### 步骤2：查看类型文件
+点击组件的 `types.ts` 链接，查看：
+- Props定义（组件接收的参数）
+- Emits定义（组件触发的事件）
+- 使用示例代码
+
+### 步骤3：导入使用
+```vue
+<script setup>
+import { AiForm } from 'ai-front-base'
+</script>
+
+<template>
+  <AiForm :config="config" v-model="formData" />
+</template>
+```
+
+## 组件列表
+
+### AiForm - 表单组件
+**适用场景：** 数据录入、编辑页面
+
+**特点：** JSON配置驱动，快速构建表单
+
+**快速了解：** 查看 [AiForm/types.ts](AiForm/types.ts) 了解配置结构
+
+### AiTable - 表格组件
+**适用场景：** 数据列表展示
+
+**特点：** JSON配置列定义
+
+**快速了解：** 查看 [AiTable/types.ts](AiTable/types.ts) 了解配置结构
+
+### AiInput - 输入框
+**适用场景：** 文本输入
+
+**特点：** 默认可清空
+
+**快速了解：** 查看 [AiInput/types.ts](AiInput/types.ts)
+
+### AiSelect - 选择器
+**适用场景：** 下拉选择
+
+**特点：** 默认可清空、可过滤
+
+**快速了解：** 查看 [AiSelect/types.ts](AiSelect/types.ts)
+
+## AI使用指引
+
+**如何快速了解组件？**
+
+1. 查看对应组件的 `types.ts` 文件
+2. 类型文件包含完整的Props、Emits定义
+3. 根据类型定义即可知道如何使用

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import { default as a } from "./components/AiForm/index.vue.mjs";
+import { default as r } from "./components/AiTable/index.vue.mjs";
+import { default as l } from "./components/AiInput/index.vue.mjs";
+import { default as p } from "./components/AiSelect/index.vue.mjs";
+export {
+  a as AiForm,
+  l as AiInput,
+  p as AiSelect,
+  r as AiTable
+};

package/dist/layouts/README.md

@@ -0,0 +1,23 @@
+# Layouts布局规则
+
+AI组件库布局规则库
+
+## 使用
+
+### 确定布局规则（必须）
+
+**这是UI/UX的关键前置步骤**，必须先确定业务系统遵守的布局规则：
+
+### 可选布局规则
+- **government** - 政务服务布局规则（详见 [government.md](government.md)）**【默认】**
+- **union** - 工会系统布局规则（详见 [union.md](union.md)）
+
+**默认规则：** 如未指定布局规则，默认使用政务服务布局规则（government）
+
+## 行业布局规则说明
+
+行业布局规则以Markdown格式提供，包含：
+- 场景概述和适用范围
+- 主题配色方案
+- 页面类型的详细布局指导
+- 推荐组件列表

package/dist/layouts/government.md

@@ -0,0 +1,78 @@
+# 政务服务布局规则（PC端）
+
+## 场景概述
+
+**适用场景**：政务服务平台、行政审批系统、公共服务门户
+**平台**：PC端
+**核心特点**：现代专业、清晰透明、高效便捷
+
+## 颜色方案
+
+**默认主题**：`blue`
+
+**推荐主题**：
+- `blue` - 蓝色专业主题
+- `minimal` - 极简庄重主题
+- `tech` - 科技创新主题
+
+## 页面类型布局指导
+
+### 1. 列表检索页
+
+**布局准则**：
+- 搜索框使用高透明度（0.15-0.2）
+- 列表项使用低透明度（0.05-0.1）
+- 悬停时增加模糊度和透明度
+- 使用细边框（1px）增强层次
+
+**推荐组件**：
+- 组件库: `AiSearchBar`, `AiTable`, `AiListItem`
+- 备选: `ElInput`, `ElTable`, `ElCard`
+
+### 2. 详情页
+
+**布局准则**：
+- 主卡片使用中等透明度（0.1）
+- 信息分组使用更低透明度（0.05）
+- 重要信息区域增加模糊度（blur 20px）
+- 图片/头像使用圆角+边框
+
+**推荐组件**：
+- 组件库: `AiCard`, `AiAvatar`, `AiDescriptions`
+- 备选: `ElCard`, `ElDescriptions`, `ElAvatar`
+
+### 3. 编辑页/表单页
+
+**布局准则**：
+- 表单容器使用中等透明度（0.1）
+- 输入框使用低透明度（0.05）
+- 聚焦时增加边框亮度
+- 提交按钮使用实色+玻璃效果叠加
+
+**推荐组件**：
+- 组件库: `AiForm`, `AiInput`, `AiButton`
+- 备选: `ElForm`, `ElInput`, `ElButton`
+
+### 4. 看板页/仪表盘
+
+**布局准则**：
+- 统计卡片使用渐变背景+玻璃效果
+- 图表容器使用深色透明背景（0.2）
+- 卡片间距适中（16px）
+- 使用彩色边框区分不同数据类型
+
+**推荐组件**：
+- 组件库: `AiStatistic`, `AiChart`, `AiGrid`
+- 备选: `ElCard`, `ElStatistic`, `ElRow`/`ElCol`
+
+### 5. 弹窗/对话框
+
+**布局准则**：
+- 遮罩层使用深色半透明（0.4-0.6）
+- 弹窗使用高透明度+强模糊（blur 30px）
+- 关闭按钮使用圆形+边框高亮
+- 内容区域可嵌套更低透明度
+
+**推荐组件**：
+- 组件库: `AiDialog`, `AiDrawer`, `AiModal`
+- 备选: `ElDialog`, `ElDrawer`

package/dist/layouts/union.md

@@ -0,0 +1,78 @@
+# 工会系统布局规则（PC端）
+
+## 场景概述
+
+**适用场景**：工会管理系统、职工服务平台、工会活动管理
+**平台**：PC端
+**核心特点**：柔和友好、易用性强、温馨服务导向
+
+## 颜色方案
+
+**默认主题**：`light-blue`
+
+**推荐主题**：
+- `light-blue` - 浅蓝温馨主题
+- `blue` - 蓝色专业主题
+- `minimal` - 极简清爽主题
+
+## 页面类型布局指导
+
+### 1. 列表检索页
+
+**布局准则**：
+- 搜索框使用凹陷效果（inset shadow）
+- 列表项使用轻微凸起效果
+- 筛选按钮组使用分段控制器样式
+- 避免使用传统边框，用阴影区分区域
+
+**推荐组件**：
+- 组件库: `AiSearchBar`, `AiListItem`, `AiFilterGroup`
+- 备选: `ElInput`, `ElCard`, `ElSegmented`
+
+### 2. 详情页
+
+**布局准则**：
+- 主内容卡片使用大圆角（20-24px）
+- 信息分组使用轻微凸起的卡片
+- 操作按钮使用凸起效果，点击时切换为凹陷
+- 头像/图片使用圆形+双层阴影
+
+**推荐组件**：
+- 组件库: `AiCard`, `AiAvatar`, `AiDescriptions`
+- 备选: `ElCard`, `ElDescriptions`, `ElButton`
+
+### 3. 编辑页/表单页
+
+**布局准则**：
+- 输入框使用凹陷效果
+- 表单容器使用轻微凸起
+- 提交按钮使用明显凸起，取消按钮使用平面
+- 表单项间距加大（20-24px）
+
+**推荐组件**：
+- 组件库: `AiForm`, `AiInput`, `AiButton`
+- 备选: `ElForm`, `ElInput`, `ElButton`
+
+### 4. 看板页/仪表盘
+
+**布局准则**：
+- 统计卡片使用中等凸起效果
+- 图表容器使用轻微凹陷（内嵌感）
+- 卡片间距统一（16-20px）
+- 避免过多层级，最多2层阴影
+
+**推荐组件**：
+- 组件库: `AiStatistic`, `AiChart`, `AiGrid`
+- 备选: `ElCard`, `ElStatistic`, `ElRow`/`ElCol`
+
+### 5. 弹窗/对话框
+
+**布局准则**：
+- 弹窗背景使用主色调
+- 弹窗本身使用强凸起效果
+- 关闭按钮使用圆形凸起
+- 避免使用传统边框和分割线
+
+**推荐组件**：
+- 组件库: `AiDialog`, `AiDrawer`, `AiModal`
+- 备选: `ElDialog`, `ElDrawer`

package/dist/standards/README.md

@@ -0,0 +1,103 @@
+# AI前端开发规范
+
+## 命名规范
+
+### 文件命名
+- 组件文件：PascalCase（如 `UserProfile.vue`）
+- 工具文件：camelCase（如 `formatDate.ts`）
+- 样式文件：kebab-case（如 `user-profile.scss`）
+
+### 变量命名
+- 常量：UPPER_SNAKE_CASE（如 `MAX_COUNT`）
+- 变量/函数：camelCase（如 `userName`, `getUserInfo`）
+- 组件名：PascalCase（如 `UserCard`）
+- 布尔值：is/has前缀（如 `isVisible`, `hasPermission`）
+
+## 代码风格
+
+### Prettier配置
+- 无分号
+- 单引号
+- 无尾逗号
+- 缩进：2空格
+
+### ESLint规则
+- 禁止使用var
+- 警告console使用
+- 警告any类型
+- 要求组件名多单词
+
+## Vue开发规范
+
+### 组件结构
+- 使用Composition API
+- script setup优先
+- 单文件组件顺序：template > script > style
+
+### Props定义
+- 必须定义类型
+- 必须设置默认值
+- 使用defineProps
+
+### 事件命名
+- 使用kebab-case（如 `@update-value`）
+- 使用动词开头（如 `@click`, `@change`）
+
+## TypeScript规范
+
+### 类型定义
+- 严格模式开启
+- 避免使用any
+- 接口命名：I前缀（如 `IUser`）
+- 类型命名：T前缀（如 `TStatus`）
+
+### 类型导出
+- 统一在types目录
+- 按模块分文件
+
+## Git提交规范
+
+### 提交格式
+```
+<type>: <subject>
+```
+
+### Type类型
+- feat: 新功能
+- fix: 修复bug
+- docs: 文档更新
+- style: 代码格式
+- refactor: 重构
+- test: 测试
+- chore: 构建/工具
+
+## 接口规范
+
+### 请求格式
+```typescript
+{
+  url: string
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE'
+  params?: object  // URL参数
+  data?: object    // 请求体
+}
+```
+
+### 响应格式
+```typescript
+{
+  code: number     // 200成功，其他失败
+  data: any        // 业务数据
+  message: string  // 提示信息
+}
+```
+
+### 接口命名
+- RESTful风格
+- 使用复数名词（如 `/users`, `/orders`）
+- 动作用HTTP方法表示
+
+## TypeScript
+- 严格模式
+- ES2020目标
+- ESNext模块

package/dist/styles/README.md

@@ -0,0 +1,51 @@
+# Styles样式主题
+
+AI组件库样式主题库
+
+## 使用前必读
+
+**选择主题是UI开发的第一步**，必须根据业务场景选择并配置合适的主题。
+
+## 可选主题
+
+- **blue** - 蓝色专业主题（政务、企业）
+- **light-blue** - 浅蓝温馨主题（工会、服务）
+- **dark** - 深色主题（科技、数据）
+
+## 使用方式
+
+**步骤1：引入样式**
+```js
+import 'ai-front-base/styles'
+```
+
+**默认主题：** `blue`（蓝色专业主题，每个业务系统MUST设置）
+
+**步骤2：切换主题（可选）**
+```vue
+<template>
+  <body :data-theme="theme">
+    <div>内容</div>
+  </body>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const theme = ref('light-blue')
+</script>
+```
+
+**可选主题值：**
+- `blue` - 蓝色专业主题
+- `light-blue` - 浅蓝温馨主题
+- `dark` - 深色主题
+
+
+## 主题变量
+
+所有主题提供统一的CSS变量：
+- `--ai-primary` - 主色调
+- `--ai-bg` - 背景色
+- `--ai-text` - 文字色
+- `--ai-border` - 边框色
+- `--ai-radius` - 圆角

package/dist/styles/blue.scss

@@ -0,0 +1,7 @@
+body[data-theme="blue"] {
+  --ai-primary: #1890ff;
+  --ai-bg: #ffffff;
+  --ai-text: #333333;
+  --ai-border: #d9d9d9;
+  --ai-radius: 4px;
+}

package/dist/styles/dark.scss

@@ -0,0 +1,7 @@
+body[data-theme="dark"] {
+  --ai-primary: #177ddc;
+  --ai-bg: #141414;
+  --ai-text: #ffffff;
+  --ai-border: #434343;
+  --ai-radius: 4px;
+}

package/dist/styles/index.css

@@ -0,0 +1,7 @@
+@import './blue.scss';
+@import './light-blue.scss';
+@import './dark.scss';
+
+* {
+  box-sizing: border-box;
+}

package/dist/styles/light-blue.scss

@@ -0,0 +1,7 @@
+body[data-theme="light-blue"] {
+  --ai-primary: #40a9ff;
+  --ai-bg: #f0f8ff;
+  --ai-text: #595959;
+  --ai-border: #d9e9f7;
+  --ai-radius: 8px;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "ai-front-base",
+  "version": "0.1.0",
+  "description": "企业级PC端AI组件库 - 基于Vue3和Element Plus",
+  "license": "ISC",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs"
+    },
+    "./styles": "./dist/styles/index.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build && node scripts/post-build.mjs",
+    "prepublishOnly": "pnpm build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zycprivate888/ai-components.git"
+  },
+  "keywords": [
+    "vue3",
+    "element-plus",
+    "components",
+    "ai",
+    "typescript",
+    "ui-library"
+  ],
+  "author": "zycprivate888",
+  "bugs": {
+    "url": "https://github.com/zycprivate888/ai-components/issues"
+  },
+  "homepage": "https://github.com/zycprivate888/ai-components#readme",
+  "peerDependencies": {
+    "element-plus": "^2.5.0",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "element-plus": "^2.5.0",
+    "sass": "^1.70.0",
+    "typescript": "^5.3.0",
+    "unbuild": "^3.6.1",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.4.0",
+    "vue-tsc": "^1.8.0"
+  }
+}