ai-front-base 0.2.2 → 0.2.6

package/dist/layouts/README.md

@@ -1,23 +1,26 @@
 # Layouts布局规则
 
-AI组件库布局规则库
+AI组件库默认布局规则 - 确保页面风格统一、布局合理
 
-## 使用
+## 布局规则
 
-### 确定布局规则（必须）
+本组件库提供统一的默认布局规则，适用于所有企业级后台管理系统。
 
-**这是UI/UX的关键前置步骤**，必须先确定业务系统遵守的布局规则：
+详见：[default.md](default.md)
 
-### 可选布局规则
-- **government** - 政务服务布局规则（详见 [government.md](government.md)）**【默认】**
-- **union** - 工会系统布局规则（详见 [union.md](union.md)）
+## 核心要点
 
-**默认规则：** 如未指定布局规则，默认使用政务服务布局规则（government）
+1. **必须使用CSS变量** - 禁止硬编码颜色、圆角等样式
+2. **固定页面结构** - 使用标准的 `.page-container` + `.search-section` + `.table-section` 结构
+3. **统一命名规范** - 使用规定的class命名
+4. **统一间距** - 页面20px，卡片20-24px
 
-## 行业布局规则说明
+## 开发规范
 
-行业布局规则以Markdown格式提供，包含：
-- 场景概述和适用范围
-- 主题配色方案
-- 页面类型的详细布局指导
-- 推荐组件列表
+**开发任何页面前，必须先阅读 [default.md](default.md) 中的布局规则**
+
+- ✅ 使用规范中的页面结构模板
+- ✅ 使用CSS变量而非硬编码
+- ✅ 遵循命名和间距规范
+- ❌ 不要自创页面结构
+- ❌ 不要使用硬编码样式

package/dist/layouts/default.md

@@ -0,0 +1,238 @@
+# 默认布局规则（PC端）
+
+## 场景概述
+
+**适用场景**：企业级后台管理系统
+**平台**：PC端
+**核心特点**：现代专业、清晰透明、高效便捷
+
+## 颜色方案
+
+**默认主题**：使用项目CSS变量，自动适配主题切换
+
+## 页面结构规范
+
+### 1. 标准管理页面（列表+表单）
+
+```vue
+<template>
+  <div class="page-container">
+    <!-- 搜索区 -->
+    <div class="search-section">
+      <AiForm v-model="searchForm" :config="searchConfig">
+        <template #action>
+          <el-button type="primary">搜索</el-button>
+          <el-button>重置</el-button>
+          <el-button type="success">新增</el-button>
+        </template>
+      </AiForm>
+    </div>
+
+    <!-- 表格区 -->
+    <div class="table-section">
+      <AiTable :columns="columns" :data="tableData" :pagination="pagination">
+        <template #action="{ row }">
+          <el-button link type="primary">编辑</el-button>
+          <el-button link type="danger">删除</el-button>
+        </template>
+      </AiTable>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+  background: var(--el-bg-color-page);
+  min-height: 100vh;
+}
+
+.search-section {
+  background: var(--el-bg-color);
+  padding: 20px;
+  border-radius: var(--el-border-radius-base);
+  margin-bottom: 20px;
+}
+
+.table-section {
+  background: var(--el-bg-color);
+  padding: 20px;
+  border-radius: var(--el-border-radius-base);
+}
+</style>
+```
+
+### 2. 表单页面
+
+```vue
+<template>
+  <div class="page-container">
+    <div class="form-section">
+      <div class="form-header">
+        <h3>{{ title }}</h3>
+      </div>
+      <AiForm v-model="formData" :config="formConfig" :rules="rules" />
+      <div class="form-footer">
+        <el-button>取消</el-button>
+        <el-button type="primary">提交</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.form-section {
+  background: var(--el-bg-color);
+  padding: 24px;
+  border-radius: var(--el-border-radius-base);
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.form-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.form-footer {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--el-border-color);
+  text-align: right;
+}
+</style>
+```
+
+### 3. 详情页面
+
+```vue
+<template>
+  <div class="page-container">
+    <div class="detail-section">
+      <div class="detail-header">
+        <h3>{{ title }}</h3>
+        <div class="actions">
+          <el-button>编辑</el-button>
+          <el-button type="danger">删除</el-button>
+        </div>
+      </div>
+      <div class="detail-content">
+        <!-- 详情内容 -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.detail-section {
+  background: var(--el-bg-color);
+  padding: 24px;
+  border-radius: var(--el-border-radius-base);
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.detail-content {
+  line-height: 2;
+}
+</style>
+```
+
+## 样式规范
+
+### 必须使用的CSS变量
+
+```css
+/* 背景色 */
+--el-bg-color-page        /* 页面背景 */
+--el-bg-color             /* 组件背景（卡片、表格、表单） */
+
+/* 文字色 */
+--el-text-color-primary   /* 主要文字 */
+--el-text-color-regular   /* 常规文字 */
+--el-text-color-secondary /* 次要文字 */
+
+/* 边框 */
+--el-border-color         /* 边框颜色 */
+--el-border-radius-base   /* 圆角（8px） */
+
+/* 间距 */
+padding: 20px             /* 页面外边距 */
+padding: 24px             /* 卡片内边距 */
+margin-bottom: 20px       /* 区块间距 */
+```
+
+### 禁止使用硬编码
+
+❌ 错误示例：
+```css
+background: #ffffff;
+background: white;
+border-radius: 4px;
+color: #333;
+```
+
+✅ 正确示例：
+```css
+background: var(--el-bg-color);
+border-radius: var(--el-border-radius-base);
+color: var(--el-text-color-primary);
+```
+
+## 组件使用规范
+
+### 表单搜索区
+
+- 使用 `AiForm` 组件
+- 默认 `col: 6`（一行4个字段）
+- 操作按钮放在 `#action` 插槽
+- 按钮顺序：主操作 → 次要操作 → 新增操作
+
+### 表格区
+
+- 使用 `AiTable` 组件
+- 不要在 `columns` 中定义 `action` 列（组件自动添加）
+- 操作按钮使用 `link` 类型
+- 状态字段使用 `AiTag` 组件
+
+### 弹窗表单
+
+- 使用 `el-dialog` + `AiForm`
+- 宽度：`600px`（标准）/ `800px`（复杂表单）
+- 表单项 `col: 24`（独占一行）
+
+## 间距规范
+
+```
+页面容器 padding: 20px
+卡片内边距 padding: 20px（搜索区）/ 24px（表单、详情）
+卡片间距 margin-bottom: 20px
+表单项间距 由 AiForm 自动处理
+按钮间距 由 ElementPlus 自动处理
+```
+
+## 命名规范
+
+```
+.page-container    /* 页面容器 */
+.search-section    /* 搜索区 */
+.table-section     /* 表格区 */
+.form-section      /* 表单区 */
+.detail-section    /* 详情区 */
+.form-header       /* 表单头部 */
+.form-footer       /* 表单底部 */
+.detail-header     /* 详情头部 */
+.detail-content    /* 详情内容 */
+```
+
+## 响应式规则
+
+暂不支持响应式，仅适配PC端（最小宽度1280px）

package/dist/styles/README.md

@@ -2,15 +2,9 @@
 
 AI组件库样式主题库
 
-## 使用前必读
+## 默认主题
 
-**选择主题是UI开发的第一步**，必须根据业务场景选择并配置合适的主题。
-
-## 可选主题
-
-- **blue** - 蓝色专业主题（政务、企业）
-- **light-blue** - 浅蓝温馨主题（工会、服务）
-- **dark** - 深色主题（科技、数据）
+本组件库提供统一的**light浅色主题**，适用于所有企业级后台管理系统。
 
 ## 使用方式
 
@@ -19,161 +13,47 @@ AI组件库样式主题库
 import 'ai-front-base/styles'
 ```
 
-**步骤2：设置主题（必须）**
+**步骤2：设置主题**
 
-⚠️ **重要：必须在HTML的body标签上设置data-theme属性**
+在HTML的body标签上设置data-theme属性：
 
-**方法1：在index.html中直接设置（推荐）**
 ```html
 <!DOCTYPE html>
 <html>
 <head>...</head>
-<body data-theme="blue">
+<body data-theme="light">
   <div id="app"></div>
 </body>
 </html>
 ```
 
-**方法2：在App.vue中动态设置**
+或在App.vue中设置：
 ```vue
 <script setup>
 import { onMounted } from 'vue'
 
 onMounted(() => {
-  document.body.setAttribute('data-theme', 'blue')
+  document.body.setAttribute('data-theme', 'light')
 })
 </script>
 ```
 
-**方法3：支持主题切换**
-```vue
-<script setup>
-import { ref, watch } from 'vue'
-
-const theme = ref('blue')
-
-watch(theme, (newTheme) => {
-  document.body.setAttribute('data-theme', newTheme)
-}, { immediate: true })
-
-const changeTheme = (newTheme) => {
-  theme.value = newTheme
-}
-</script>
-
-<template>
-  <div>
-    <button @click="changeTheme('blue')">蓝色主题</button>
-    <button @click="changeTheme('light-blue')">浅蓝主题</button>
-    <button @click="changeTheme('dark')">深色主题</button>
-  </div>
-</template>
-```
-
-**可选主题值：**
-- `blue` - 蓝色专业主题（默认）
-- `light-blue` - 浅蓝温馨主题
-- `dark` - 深色主题
-
-
-## CSS变量体系
-
-### 色值变量
-```css
-/* 主色系 */
---ai-primary      /* 主色 */
---ai-success      /* 成功色 */
---ai-warning      /* 警告色 */
---ai-danger       /* 危险色 */
---ai-info         /* 信息色 */
-
-/* 背景色 */
---ai-bg-base      /* 基础背景 */
---ai-bg-light     /* 浅色背景 */
---ai-bg-dark      /* 深色背景 */
---ai-bg-overlay   /* 遮罩背景 */
-
-/* 文字色 */
---ai-text-primary     /* 主要文字 */
---ai-text-regular     /* 常规文字 */
---ai-text-secondary   /* 次要文字 */
---ai-text-placeholder /* 占位文字 */
---ai-text-disabled    /* 禁用文字 */
-
-/* 边框色 */
---ai-border-base  /* 基础边框 */
---ai-border-light /* 浅色边框 */
---ai-border-dark  /* 深色边框 */
-
-/* 功能色 */
---ai-link         /* 链接色 */
---ai-hover        /* 悬停色 */
---ai-active       /* 激活色 */
---ai-disabled     /* 禁用色 */
-```
-
-### 间距变量
-```css
-/* 基础间距 */
---ai-spacing-xs   /* 4px */
---ai-spacing-sm   /* 8px */
---ai-spacing-md   /* 16px */
---ai-spacing-lg   /* 24px */
---ai-spacing-xl   /* 32px */
-
-/* 内边距 */
---ai-padding-xs/sm/md/lg/xl
-
-/* 外边距 */
---ai-margin-xs/sm/md/lg/xl
-```
-
-### 尺寸变量
-```css
-/* 圆角 */
---ai-radius-sm    /* 2px */
---ai-radius-base  /* 4px */
---ai-radius-lg    /* 8px */
---ai-radius-xl    /* 12px */
-
-/* 字号 */
---ai-font-xs      /* 12px */
---ai-font-sm      /* 14px */
---ai-font-base    /* 16px */
---ai-font-lg      /* 18px */
---ai-font-xl      /* 20px */
-
-/* 行高 */
---ai-line-height-sm/base/lg
-
-/* 阴影 */
---ai-shadow-sm/base/lg
-```
-
-### 动画变量
-```css
---ai-transition-fast  /* 0.1s */
---ai-transition-base  /* 0.3s */
---ai-transition-slow  /* 0.5s */
-```
-
 ## CSS样式规范
 
-### ⚠️ 强制规则
+### ⚠️ 强制规则（MUST）
 
-1. **禁止硬编码色值** - 所有颜色必须使用CSS变量
-2. **禁止硬编码间距** - 所有padding/margin必须使用间距变量
-3. **禁止硬编码尺寸** - 圆角、字号、行高必须使用对应变量
+1. **MUST 禁止硬编码色值** - 所有颜色必须使用CSS变量
+2. **MUST 禁止硬编码间距** - 所有padding/margin必须使用间距变量
+3. **MUST 禁止硬编码尺寸** - 圆角、字号、行高必须使用对应变量
 
 ### ✅ 正确示例
 ```css
 .button {
-  color: var(--ai-text-primary);
-  background: var(--ai-primary);
-  padding: var(--ai-padding-sm) var(--ai-padding-md);
-  border-radius: var(--ai-radius-base);
-  font-size: var(--ai-font-base);
-  transition: all var(--ai-transition-base);
+  color: var(--el-text-color-primary);
+  background: var(--el-color-primary);
+  border-radius: var(--el-border-radius-base);
+  font-size: var(--el-font-size-base);
+  transition: all var(--el-transition-duration);
 }
 ```
 
@@ -181,9 +61,8 @@ const changeTheme = (newTheme) => {
 ```css
 .button {
   color: #333;              /* ❌ 硬编码色值 */
-  background: #1890ff;      /* ❌ 硬编码色值 */
+  background: #1677ff;      /* ❌ 硬编码色值 */
   padding: 8px 16px;        /* ❌ 硬编码间距 */
-  border-radius: 4px;       /* ❌ 硬编码圆角 */
+  border-radius: 8px;       /* ❌ 硬编码圆角 */
 }
 ```
-

package/dist/styles/index.scss

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

package/dist/styles/light.scss

@@ -0,0 +1,102 @@
+body[data-theme="light"] {
+  // ==================== 主色系 ====================
+  --el-color-primary: #1677ff;
+  --el-color-primary-light-3: #79bbff;
+  --el-color-primary-light-5: #a0cfff;
+  --el-color-primary-light-7: #c6e2ff;
+  --el-color-primary-light-8: #d9ecff;
+  --el-color-primary-light-9: #ecf5ff;
+  --el-color-primary-dark-2: #0958d9;
+
+  --el-color-success: #52c41a;
+  --el-color-success-light-3: #95d475;
+  --el-color-success-light-5: #b3e19d;
+  --el-color-success-light-7: #d1edc4;
+  --el-color-success-light-8: #e1f3d8;
+  --el-color-success-light-9: #f0f9eb;
+  --el-color-success-dark-2: #389e0d;
+
+  --el-color-warning: #faad14;
+  --el-color-warning-light-3: #fcd572;
+  --el-color-warning-light-5: #fde29a;
+  --el-color-warning-light-7: #fdefc2;
+  --el-color-warning-light-8: #fef5da;
+  --el-color-warning-light-9: #fefaec;
+  --el-color-warning-dark-2: #d48806;
+
+  --el-color-danger: #ff4d4f;
+  --el-color-danger-light-3: #ff9c9e;
+  --el-color-danger-light-5: #ffb8b8;
+  --el-color-danger-light-7: #ffd4d4;
+  --el-color-danger-light-8: #ffe3e3;
+  --el-color-danger-light-9: #fff1f0;
+  --el-color-danger-dark-2: #cf1322;
+
+  --el-color-info: #1677ff;
+  --el-color-info-light-3: #79bbff;
+  --el-color-info-light-5: #a0cfff;
+  --el-color-info-light-7: #c6e2ff;
+  --el-color-info-light-8: #d9ecff;
+  --el-color-info-light-9: #ecf5ff;
+  --el-color-info-dark-2: #0958d9;
+
+  // ==================== 背景色 ====================
+  // 基础背景色
+  --el-bg-color: #ffffff;                      // 组件基础背景：卡片、弹窗、表格等
+  --el-bg-color-page: #f5f7fa;                 // 页面背景色
+  --el-bg-color-overlay: #ffffff;              // 弹出层背景：下拉菜单、日期选择器面板
+
+  // 填充色（用于输入框、按钮等内部填充）
+  --el-fill-color-blank: #ffffff;              // 输入框背景、下拉选项背景
+  --el-fill-color: #f5f7fa;                    // 禁用状态背景
+  --el-fill-color-light: #fafafa;              // 悬停状态背景
+  --el-fill-color-lighter: #fafafa;            // 次要填充
+  --el-fill-color-extra-light: #fafafa;        // 最浅填充
+  --el-fill-color-dark: #e6e8eb;               // 深色填充
+  --el-fill-color-darker: #e6e8eb;             // 更深填充
+
+  // 遮罩层
+  --el-mask-color: rgba(0, 0, 0, 0.5);         // 弹窗遮罩
+
+  // ==================== 文字色 ====================
+  --el-text-color-primary: #1f2937;
+  --el-text-color-regular: #4b5563;
+  --el-text-color-secondary: #9ca3af;
+  --el-text-color-placeholder: #d1d5db;
+  --el-text-color-disabled: #e5e7eb;
+
+  // ==================== 边框色 ====================
+  --el-border-color: #e5e7eb;
+  --el-border-color-light: #f3f4f6;
+  --el-border-color-lighter: #f9fafb;
+  --el-border-color-extra-light: #f9fafb;
+  --el-border-color-dark: #d1d5db;
+  --el-border-color-darker: #9ca3af;
+
+  // ==================== 圆角 ====================
+  --el-border-radius-base: 8px;
+  --el-border-radius-small: 4px;
+  --el-border-radius-round: 16px;
+  --el-border-radius-circle: 50%;
+
+  // ==================== 字体 ====================
+  --el-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+  --el-font-size-extra-small: 12px;
+  --el-font-size-small: 13px;
+  --el-font-size-base: 14px;
+  --el-font-size-medium: 14px;
+  --el-font-size-large: 16px;
+  --el-font-size-extra-large: 18px;
+
+  --el-font-weight-primary: 500;
+
+  // ==================== 阴影 ====================
+  --el-box-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --el-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --el-box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.10);
+
+  // ==================== 动画 ====================
+  --el-transition-duration: 0.3s;
+  --el-transition-duration-fast: 0.15s;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-front-base",
-  "version": "0.2.2",
+  "version": "0.2.6",
   "description": "企业级PC端AI组件库 - 基于Vue3和Element Plus",
   "license": "ISC",
   "type": "module",
@@ -21,6 +21,7 @@
   ],
   "scripts": {
     "build": "vite build && node scripts/post-build.mjs",
+    "preview": "vite --config vite.preview.config.ts",
     "prepublishOnly": "pnpm build"
   },
   "repository": {

package/dist/components/AiAside/index.mjs

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

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

@@ -1,20 +0,0 @@
-import { defineComponent as o, resolveComponent as r, openBlock as n, createBlock as s, normalizeProps as a, guardReactiveProps as i, withCtx as l, renderSlot as p } from "vue";
-const m = /* @__PURE__ */ o({
-  name: "AiAside",
-  inheritAttrs: !0,
-  __name: "index",
-  setup(d) {
-    return (e, _) => {
-      const t = r("el-aside");
-      return n(), s(t, a(i(e.$attrs)), {
-        default: l(() => [
-          p(e.$slots, "default")
-        ]),
-        _: 3
-      }, 16);
-    };
-  }
-});
-export {
-  m as default
-};

package/dist/components/AiAside/types.ts

@@ -1,6 +0,0 @@
-/**
- * AiAside - 侧边栏
- */
-export interface AiAsideProps {
-  width?: string
-}

package/dist/components/AiBadge/index.mjs

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

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

@@ -1,20 +0,0 @@
-import { defineComponent as o, resolveComponent as r, openBlock as n, createBlock as a, normalizeProps as s, guardReactiveProps as l, withCtx as p, renderSlot as d } from "vue";
-const m = /* @__PURE__ */ o({
-  name: "AiBadge",
-  inheritAttrs: !0,
-  __name: "index",
-  setup(i) {
-    return (e, _) => {
-      const t = r("el-badge");
-      return n(), a(t, s(l(e.$attrs)), {
-        default: p(() => [
-          d(e.$slots, "default")
-        ]),
-        _: 3
-      }, 16);
-    };
-  }
-});
-export {
-  m as default
-};

package/dist/components/AiBadge/types.ts

@@ -1,10 +0,0 @@
-/**
- * AiBadge - 徽章
- */
-export interface AiBadgeProps {
-  value?: string | number
-  max?: number
-  isDot?: boolean
-  hidden?: boolean
-  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
-}

package/dist/components/AiBreadcrumb/index.mjs

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