ai-front-base 0.2.3 → 0.2.6

package/dist/layouts/government.md

@@ -1,223 +0,0 @@
-# 政务服务布局规则（PC端）
-
-## 场景概述
-
-**适用场景**：政务服务平台、行政审批系统、公共服务门户
-**平台**：PC端
-**核心特点**：现代专业、清晰透明、高效便捷
-
-## 颜色方案
-
-**默认主题**：`blue`
-
-**推荐主题**：
-- `blue` - 蓝色专业主题
-- `dark` - 深色科技主题
-
-## 整体布局结构
-
-### 标准后台布局
-```
-┌─────────────────────────────────────┐
-│          Header (60px)              │
-├──────┬──────────────────────────────┤
-│      │                              │
-│ Aside│         Main                 │
-│(200px│       Content                │
-│      │                              │
-├──────┴──────────────────────────────┤
-│          Footer (60px)              │
-└─────────────────────────────────────┘
-```
-
-**布局规范**：
-- Header高度：60px，固定定位
-- Aside宽度：200px（收起时64px）
-- Main内边距：24px
-- Footer高度：60px
-
-### 页面内容区布局
-```
-┌─────────────────────────────────────┐
-│  面包屑导航 (margin-bottom: 16px)    │
-├─────────────────────────────────────┤
-│  页面标题 + 操作按钮                 │
-│  (margin-bottom: 24px)              │
-├─────────────────────────────────────┤
-│                                     │
-│  主内容区                            │
-│  (padding: 24px)                    │
-│                                     │
-└─────────────────────────────────────┘
-```
-
-## 页面类型布局指导
-
-### 1. 列表页
-
-**结构**：
-- 搜索区：padding 24px，背景色 bg-light
-- 表格区：margin-top 16px
-- 分页器：margin-top 16px，居右对齐
-
-**间距规范**：
-- 搜索表单项间距：16px
-- 表格行高：48px
-- 操作按钮间距：8px
-
-**组件使用**：
-```vue
-<AiContainer>
-  <AiMain>
-    <!-- 搜索区 -->
-    <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-light)">
-      <AiForm :inline="true">
-        <AiInput placeholder="搜索" />
-        <AiSelect placeholder="状态" />
-      </AiForm>
-    </div>
-
-    <!-- 表格区 -->
-    <AiTable :data="list" style="margin-top: var(--ai-margin-md)" />
-
-    <!-- 分页 -->
-    <AiPagination style="margin-top: var(--ai-margin-md)" />
-  </AiMain>
-</AiContainer>
-```
-
-### 2. 详情页
-
-**结构**：
-- 基本信息卡片：margin-bottom 16px
-- 详细信息卡片：margin-bottom 16px
-- 操作历史：margin-bottom 16px
-
-**间距规范**：
-- 卡片内边距：24px
-- 信息项间距：16px
-- 标签与值间距：8px
-
-**组件使用**：
-```vue
-<AiContainer>
-  <AiMain>
-    <!-- 基本信息 -->
-    <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-base); border-radius: var(--ai-radius-base); margin-bottom: var(--ai-margin-md)">
-      <h3>基本信息</h3>
-      <div style="margin-top: var(--ai-margin-md)">
-        <div style="margin-bottom: var(--ai-margin-md)">
-          <span>姓名：</span><span>张三</span>
-        </div>
-      </div>
-    </div>
-  </AiMain>
-</AiContainer>
-```
-
-### 3. 表单页
-
-**结构**：
-- 表单容器：padding 24px
-- 表单项：margin-bottom 24px
-- 按钮组：margin-top 32px，居中或居右
-
-**间距规范**：
-- 表单项间距：24px
-- 标签宽度：120px
-- 按钮间距：16px
-
-**组件使用**：
-```vue
-<AiContainer>
-  <AiMain>
-    <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-base)">
-      <AiForm :label-width="120">
-        <AiInput label="姓名" />
-        <AiSelect label="部门" />
-        <div style="margin-top: var(--ai-margin-xl); text-align: center">
-          <el-button type="primary">提交</el-button>
-          <el-button>取消</el-button>
-        </div>
-      </AiForm>
-    </div>
-  </AiMain>
-</AiContainer>
-```
-
-### 4. 看板页
-
-**结构**：
-- 统计卡片行：margin-bottom 16px
-- 图表区：2列或3列布局
-- 卡片间距：16px
-
-**间距规范**：
-- 卡片内边距：20px
-- 卡片间距：16px
-- 标题与内容间距：16px
-
-**组件使用**：
-```vue
-<AiContainer>
-  <AiMain>
-    <!-- 统计卡片 -->
-    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ai-spacing-md); margin-bottom: var(--ai-margin-md)">
-      <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-base)">
-        <AiStatistic title="总数" :value="1000" />
-      </div>
-    </div>
-
-    <!-- 图表区 -->
-    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ai-spacing-md)">
-      <div style="padding: var(--ai-padding-lg); background: var(--ai-bg-base)">
-        图表内容
-      </div>
-    </div>
-  </AiMain>
-</AiContainer>
-```
-
-### 5. 弹窗
-
-**间距规范**：
-- 弹窗内边距：24px
-- 标题与内容间距：20px
-- 按钮组间距：16px
-
-**组件使用**：
-```vue
-<AiDialog title="标题" width="600px">
-  <div style="padding: var(--ai-padding-lg)">
-    内容区
-  </div>
-  <template #footer>
-    <el-button type="primary">确定</el-button>
-    <el-button>取消</el-button>
-  </template>
-</AiDialog>
-```
-
-## 间距规范总结
-
-| 场景 | 间距值 | CSS变量 |
-|------|--------|---------|
-| 页面内边距 | 24px | --ai-padding-lg |
-| 卡片间距 | 16px | --ai-margin-md |
-| 表单项间距 | 24px | --ai-margin-lg |
-| 按钮间距 | 8px | --ai-margin-sm |
-| 小元素间距 | 4px | --ai-margin-xs |
-
-## 响应式规则
-
-**断点**：
-- 大屏：>1920px
-- 标准：1440px-1920px
-- 小屏：1280px-1440px
-- 最小：<1280px
-
-**适配规则**：
-- 大屏：Main内边距增加到32px
-- 标准：使用默认24px
-- 小屏：Aside收起，Main内边距减少到16px
-- 最小：不支持，提示使用更大屏幕

package/dist/layouts/union.md

@@ -1,229 +0,0 @@
-# 工会系统布局规则（PC端）
-
-## 场景概述
-
-**适用场景**：工会管理系统、职工服务平台、工会活动管理
-**平台**：PC端
-**核心特点**：柔和友好、易用性强、温馨服务导向
-
-## 颜色方案
-
-**默认主题**：`light-blue`
-
-**推荐主题**：
-- `light-blue` - 浅蓝温馨主题
-- `blue` - 蓝色专业主题
-
-## 整体布局结构
-
-### 标准后台布局
-```
-┌─────────────────────────────────────┐
-│          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)                    │
-│                                     │
-└─────────────────────────────────────┘
-```
-
-## 页面类型布局指导
-
-### 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. 详情页
-
-**结构**：
-- 基本信息卡片：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/styles/blue.scss

@@ -1,71 +0,0 @@
-body[data-theme="blue"] {
-  // 主色系
-  --ai-primary: #1890ff;
-  --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,71 +0,0 @@
-body[data-theme="dark"] {
-  // 主色系 - 深蓝暗黑主题
-  --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;
-}

package/dist/styles/element-plus-theme.css

@@ -1,52 +0,0 @@
-/* Element Plus 主题覆盖 - 使用ai-front-base主题变量 */
-
-:root {
-  /* 主色 */
-  --el-color-primary: var(--ai-primary);
-  --el-color-success: var(--ai-success);
-  --el-color-warning: var(--ai-warning);
-  --el-color-danger: var(--ai-danger);
-  --el-color-info: var(--ai-info);
-
-  /* 背景色 */
-  --el-bg-color: var(--ai-bg-base);
-  --el-bg-color-page: var(--ai-bg-light);
-  --el-bg-color-overlay: var(--ai-bg-overlay);
-
-  /* 文字色 */
-  --el-text-color-primary: var(--ai-text-primary);
-  --el-text-color-regular: var(--ai-text-regular);
-  --el-text-color-secondary: var(--ai-text-secondary);
-  --el-text-color-placeholder: var(--ai-text-placeholder);
-  --el-text-color-disabled: var(--ai-text-disabled);
-
-  /* 边框色 */
-  --el-border-color: var(--ai-border-base);
-  --el-border-color-light: var(--ai-border-light);
-  --el-border-color-lighter: var(--ai-border-light);
-  --el-border-color-extra-light: var(--ai-border-light);
-  --el-border-color-dark: var(--ai-border-dark);
-  --el-border-color-darker: var(--ai-border-dark);
-
-  /* 圆角 */
-  --el-border-radius-base: var(--ai-radius-base);
-  --el-border-radius-small: var(--ai-radius-sm);
-  --el-border-radius-round: var(--ai-radius-xl);
-
-  /* 字号 */
-  --el-font-size-extra-small: var(--ai-font-xs);
-  --el-font-size-small: var(--ai-font-sm);
-  --el-font-size-base: var(--ai-font-base);
-  --el-font-size-medium: var(--ai-font-base);
-  --el-font-size-large: var(--ai-font-lg);
-  --el-font-size-extra-large: var(--ai-font-xl);
-
-  /* 阴影 */
-  --el-box-shadow-light: var(--ai-shadow-sm);
-  --el-box-shadow: var(--ai-shadow-base);
-  --el-box-shadow-dark: var(--ai-shadow-lg);
-
-  /* 过渡 */
-  --el-transition-duration: var(--ai-transition-base);
-  --el-transition-duration-fast: var(--ai-transition-fast);
-}