ai-front-base 0.1.11 → 0.2.0

package/dist/layouts/union.md

@@ -13,66 +13,217 @@
 **推荐主题**：
 - `light-blue` - 浅蓝温馨主题
 - `blue` - 蓝色专业主题
-- `minimal` - 极简清爽主题
 
-## 页面类型布局指导
-
-### 1. 列表检索页
+## 整体布局结构
+
+### 标准后台布局
+```
+┌─────────────────────────────────────┐
+│          Header (64px)              │
+├──────┬──────────────────────────────┤
+│      │                              │
+│ Aside│         Main                 │
+│(220px│       Content                │
+│      │                              │
+├──────┴──────────────────────────────┤
+│          Footer (64px)              │
+└─────────────────────────────────────┘
+```
+
+**布局规范**：
+- Header高度：64px，固定定位
+- Aside宽度：220px（收起时80px）
+- Main内边距：24px
+- Footer高度：64px
+- 圆角：使用较大圆角（8px-12px）
+
+### 页面内容区布局
+```
+┌─────────────────────────────────────┐
+│  面包屑导航 (margin-bottom: 20px)    │
+├─────────────────────────────────────┤
+│  页面标题 + 操作按钮                 │
+│  (margin-bottom: 24px)              │
+├─────────────────────────────────────┤
+│                                     │
+│  主内容区                            │
+│  (padding: 24px)                    │
+│                                     │
+└─────────────────────────────────────┘
+```
 
-**布局准则**：
-- 搜索框使用凹陷效果（inset shadow）
-- 列表项使用轻微凸起效果
-- 筛选按钮组使用分段控制器样式
-- 避免使用传统边框，用阴影区分区域
+## 页面类型布局指导
 
-**推荐组件**：
-- 组件库: `AiSearchBar`, `AiListItem`, `AiFilterGroup`
-- 备选: `ElInput`, `ElCard`, `ElSegmented`
+### 1. 列表页
+
+**结构**：
+- 搜索区：padding 24px，背景色 bg-base，圆角 8px
+- 表格区：margin-top 20px
+- 分页器：margin-top 20px，居中对齐
+
+**间距规范**：
+- 搜索表单项间距：20px
+- 表格行高：52px
+- 操作按钮间距：12px
+
+**组件使用**：
+```vue
+<AiContainer>
+  <AiMain>
+    <!-- 搜索区 -->
+    <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-base); border-radius: var(--ai-radius-lg)">
+      <AiForm :inline="true">
+        <AiInput placeholder="搜索" />
+        <AiSelect placeholder="状态" />
+      </AiForm>
+    </div>
+
+    <!-- 表格区 -->
+    <AiTable :data="list" style="margin-top: var(--ai-margin-lg)" />
+
+    <!-- 分页 -->
+    <div style="margin-top: var(--ai-margin-lg); text-align: center">
+      <AiPagination />
+    </div>
+  </AiMain>
+</AiContainer>
+```
 
 ### 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`
+**结构**：
+- 基本信息卡片：margin-bottom 20px，圆角 12px
+- 详细信息卡片：margin-bottom 20px，圆角 12px
+- 操作历史：margin-bottom 20px
+
+**间距规范**：
+- 卡片内边距：24px
+- 信息项间距：20px
+- 标签与值间距：12px
+
+**组件使用**：
+```vue
+<AiContainer>
+  <AiMain>
+    <!-- 基本信息 -->
+    <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-base); border-radius: var(--ai-radius-xl); margin-bottom: var(--ai-margin-lg)">
+      <h3>基本信息</h3>
+      <div style="margin-top: var(--ai-margin-lg)">
+        <div style="margin-bottom: var(--ai-margin-lg)">
+          <span>姓名：</span><span>张三</span>
+        </div>
+      </div>
+    </div>
+  </AiMain>
+</AiContainer>
+```
+
+### 3. 表单页
+
+**结构**：
+- 表单容器：padding 24px，圆角 12px
+- 表单项：margin-bottom 24px
+- 按钮组：margin-top 32px，居中对齐
+
+**间距规范**：
+- 表单项间距：24px
+- 标签宽度：100px
+- 按钮间距：16px
+
+**组件使用**：
+```vue
+<AiContainer>
+  <AiMain>
+    <div style="padding: var(--ai-padding-xl); background: var(--ai-bg-base); border-radius: var(--ai-radius-xl)">
+      <AiForm :label-width="100">
+        <AiInput label="姓名" />
+        <AiSelect label="部门" />
+        <div style="margin-top: var(--ai-margin-xl); text-align: center">
+          <el-button type="primary" size="large">提交</el-button>
+          <el-button size="large">取消</el-button>
+        </div>
+      </AiForm>
+    </div>
+  </AiMain>
+</AiContainer>
+```
+
+### 4. 看板页
+
+**结构**：
+- 统计卡片行：margin-bottom 20px
+- 图表区：2列布局
+- 卡片间距：20px
+
+**间距规范**：
+- 卡片内边距：24px
+- 卡片间距：20px
+- 标题与内容间距：20px
+
+**组件使用**：
+```vue
+<AiContainer>
+  <AiMain>
+    <!-- 统计卡片 -->
+    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ai-spacing-lg); margin-bottom: var(--ai-margin-lg)">
+      <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-base); border-radius: var(--ai-radius-lg)">
+        <AiStatistic title="总数" :value="1000" />
+      </div>
+    </div>
+
+    <!-- 图表区 -->
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ai-spacing-lg)">
+      <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-base); border-radius: var(--ai-radius-lg)">
+        图表内容
+      </div>
+    </div>
+  </AiMain>
+</AiContainer>
+```
+
+### 5. 弹窗
+
+**间距规范**：
+- 弹窗内边距：24px
+- 标题与内容间距：20px
+- 按钮组间距：16px
+- 圆角：12px
+
+**组件使用**：
+```vue
+<AiDialog title="标题" width="600px">
+  <div style="padding: var(--ai-padding-lg)">
+    内容区
+  </div>
+  <template #footer>
+    <div style="text-align: center">
+      <el-button type="primary" size="large">确定</el-button>
+      <el-button size="large">取消</el-button>
+    </div>
+  </template>
+</AiDialog>
+```
+
+## 间距规范总结
+
+| 场景 | 间距值 | CSS变量 |
+|------|--------|---------|
+| 页面内边距 | 24px | --ai-padding-lg |
+| 卡片间距 | 20px | --ai-margin-lg |
+| 表单项间距 | 24px | --ai-margin-lg |
+| 按钮间距 | 12px | --ai-margin-md |
+| 小元素间距 | 8px | --ai-margin-sm |
+
+## 响应式规则
+
+**断点**：
+- 大屏：>1920px
+- 标准：1440px-1920px
+- 小屏：1280px-1440px
+- 最小：<1280px
+
+**适配规则**：
+- 大屏：Main内边距增加到32px，卡片间距增加到24px
+- 标准：使用默认24px
+- 小屏：Aside收起，Main内边距减少到16px
+- 最小：不支持，提示使用更大屏幕

package/dist/standards/README.md

@@ -27,6 +27,51 @@
 - 警告any类型
 - 要求组件名多单词
 
+## CSS样式规范
+
+### ⚠️ 强制规则
+
+**所有CSS样式必须使用主题变量，禁止硬编码**
+
+1. **禁止硬编码色值** - 所有颜色必须使用CSS变量
+2. **禁止硬编码间距** - 所有padding/margin必须使用间距变量
+3. **禁止硬编码尺寸** - 圆角、字号、行高必须使用对应变量
+
+### 可用变量
+
+查看 [样式主题文档](../styles/README.md) 了解完整变量列表
+
+### ✅ 正确示例
+```css
+.card {
+  color: var(--ai-text-primary);
+  background: var(--ai-bg-base);
+  padding: var(--ai-padding-md);
+  margin-bottom: var(--ai-margin-lg);
+  border: 1px solid var(--ai-border-base);
+  border-radius: var(--ai-radius-base);
+  font-size: var(--ai-font-base);
+  box-shadow: var(--ai-shadow-sm);
+  transition: all var(--ai-transition-base);
+}
+
+.card:hover {
+  background: var(--ai-hover);
+}
+```
+
+### ❌ 错误示例
+```css
+.card {
+  color: #333;              /* ❌ 硬编码色值 */
+  background: #fff;         /* ❌ 硬编码色值 */
+  padding: 16px;            /* ❌ 硬编码间距 */
+  margin-bottom: 24px;      /* ❌ 硬编码间距 */
+  border: 1px solid #ddd;   /* ❌ 硬编码色值 */
+  border-radius: 4px;       /* ❌ 硬编码圆角 */
+}
+```
+
 ## Vue开发规范
 
 ### 组件结构

package/dist/styles/README.md

@@ -19,33 +19,171 @@ AI组件库样式主题库
 import 'ai-front-base/styles'
 ```
 
-**默认主题：** `blue`（蓝色专业主题，每个业务系统MUST设置）
+**步骤2：设置主题（必须）**
 
-**步骤2：切换主题（可选）**
+⚠️ **重要：必须在HTML的body标签上设置data-theme属性**
+
+**方法1：在index.html中直接设置（推荐）**
+```html
+<!DOCTYPE html>
+<html>
+<head>...</head>
+<body data-theme="blue">
+  <div id="app"></div>
+</body>
+</html>
+```
+
+**方法2：在App.vue中动态设置**
 ```vue
-<template>
-  <body :data-theme="theme">
-    <div>内容</div>
-  </body>
-</template>
+<script setup>
+import { onMounted } from 'vue'
 
+onMounted(() => {
+  document.body.setAttribute('data-theme', 'blue')
+})
+</script>
+```
+
+**方法3：支持主题切换**
+```vue
 <script setup>
-import { ref } from 'vue'
-const theme = ref('light-blue')
+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` - 蓝色专业主题
+- `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样式规范
+
+### ⚠️ 强制规则
+
+1. **禁止硬编码色值** - 所有颜色必须使用CSS变量
+2. **禁止硬编码间距** - 所有padding/margin必须使用间距变量
+3. **禁止硬编码尺寸** - 圆角、字号、行高必须使用对应变量
+
+### ✅ 正确示例
+```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);
+}
+```
+
+### ❌ 错误示例
+```css
+.button {
+  color: #333;              /* ❌ 硬编码色值 */
+  background: #1890ff;      /* ❌ 硬编码色值 */
+  padding: 8px 16px;        /* ❌ 硬编码间距 */
+  border-radius: 4px;       /* ❌ 硬编码圆角 */
+}
+```
 
-所有主题提供统一的CSS变量：
-- `--ai-primary` - 主色调
-- `--ai-bg` - 背景色
-- `--ai-text` - 文字色
-- `--ai-border` - 边框色
-- `--ai-radius` - 圆角

package/dist/styles/blue.scss

@@ -1,7 +1,71 @@
 body[data-theme="blue"] {
+  // 主色系
   --ai-primary: #1890ff;
-  --ai-bg: #ffffff;
-  --ai-text: #333333;
-  --ai-border: #d9d9d9;
-  --ai-radius: 4px;
+  --ai-success: #52c41a;
+  --ai-warning: #faad14;
+  --ai-danger: #ff4d4f;
+  --ai-info: #1890ff;
+
+  // 背景色
+  --ai-bg-base: #ffffff;
+  --ai-bg-light: #fafafa;
+  --ai-bg-dark: #f5f5f5;
+  --ai-bg-overlay: rgba(0, 0, 0, 0.45);
+
+  // 文字色
+  --ai-text-primary: #262626;
+  --ai-text-regular: #595959;
+  --ai-text-secondary: #8c8c8c;
+  --ai-text-placeholder: #bfbfbf;
+  --ai-text-disabled: #d9d9d9;
+
+  // 边框色
+  --ai-border-base: #d9d9d9;
+  --ai-border-light: #e8e8e8;
+  --ai-border-dark: #bfbfbf;
+
+  // 功能色
+  --ai-link: #1890ff;
+  --ai-hover: #40a9ff;
+  --ai-active: #096dd9;
+  --ai-disabled: #f5f5f5;
+
+  // 间距
+  --ai-spacing-xs: 4px;
+  --ai-spacing-sm: 8px;
+  --ai-spacing-md: 16px;
+  --ai-spacing-lg: 24px;
+  --ai-spacing-xl: 32px;
+  --ai-padding-xs: 4px;
+  --ai-padding-sm: 8px;
+  --ai-padding-md: 16px;
+  --ai-padding-lg: 24px;
+  --ai-padding-xl: 32px;
+  --ai-margin-xs: 4px;
+  --ai-margin-sm: 8px;
+  --ai-margin-md: 16px;
+  --ai-margin-lg: 24px;
+  --ai-margin-xl: 32px;
+
+  // 尺寸
+  --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: 1.2;
+  --ai-line-height-base: 1.5;
+  --ai-line-height-lg: 1.8;
+  --ai-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --ai-shadow-base: 0 4px 8px rgba(0, 0, 0, 0.12);
+  --ai-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);
+
+  // 动画
+  --ai-transition-fast: 0.1s;
+  --ai-transition-base: 0.3s;
+  --ai-transition-slow: 0.5s;
 }

package/dist/styles/dark.scss

@@ -1,7 +1,71 @@
 body[data-theme="dark"] {
-  --ai-primary: #177ddc;
-  --ai-bg: #141414;
-  --ai-text: #ffffff;
-  --ai-border: #434343;
-  --ai-radius: 4px;
+  // 主色系 - 深蓝暗黑主题
+  --ai-primary: #1668dc;
+  --ai-success: #49aa19;
+  --ai-warning: #d89614;
+  --ai-danger: #d32029;
+  --ai-info: #1668dc;
+
+  // 背景色
+  --ai-bg-base: #141414;
+  --ai-bg-light: #1f1f1f;
+  --ai-bg-dark: #0a0a0a;
+  --ai-bg-overlay: rgba(0, 0, 0, 0.65);
+
+  // 文字色
+  --ai-text-primary: #ffffff;
+  --ai-text-regular: #d9d9d9;
+  --ai-text-secondary: #8c8c8c;
+  --ai-text-placeholder: #595959;
+  --ai-text-disabled: #434343;
+
+  // 边框色
+  --ai-border-base: #434343;
+  --ai-border-light: #303030;
+  --ai-border-dark: #595959;
+
+  // 功能色
+  --ai-link: #1668dc;
+  --ai-hover: #3c9ae8;
+  --ai-active: #0958d9;
+  --ai-disabled: #262626;
+
+  // 间距
+  --ai-spacing-xs: 4px;
+  --ai-spacing-sm: 8px;
+  --ai-spacing-md: 16px;
+  --ai-spacing-lg: 24px;
+  --ai-spacing-xl: 32px;
+  --ai-padding-xs: 4px;
+  --ai-padding-sm: 8px;
+  --ai-padding-md: 16px;
+  --ai-padding-lg: 24px;
+  --ai-padding-xl: 32px;
+  --ai-margin-xs: 4px;
+  --ai-margin-sm: 8px;
+  --ai-margin-md: 16px;
+  --ai-margin-lg: 24px;
+  --ai-margin-xl: 32px;
+
+  // 尺寸
+  --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: 1.2;
+  --ai-line-height-base: 1.5;
+  --ai-line-height-lg: 1.8;
+  --ai-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.24);
+  --ai-shadow-base: 0 4px 8px rgba(0, 0, 0, 0.32);
+  --ai-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.48);
+
+  // 动画
+  --ai-transition-fast: 0.1s;
+  --ai-transition-base: 0.3s;
+  --ai-transition-slow: 0.5s;
 }