ai-front-base 0.1.11 → 0.2.0

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

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

package/dist/components/AiTag/types.ts

@@ -0,0 +1,9 @@
+/**
+ * AiTag - 标签
+ */
+export interface AiTagProps {
+  type?: 'success' | 'info' | 'warning' | 'danger'
+  closable?: boolean
+  size?: 'large' | 'default' | 'small'
+  effect?: 'dark' | 'light' | 'plain'
+}

package/dist/components/AiTimePicker/index.mjs

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

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

@@ -0,0 +1,15 @@
+import { defineComponent as t, resolveComponent as n, openBlock as o, createBlock as i, normalizeProps as c, guardReactiveProps as p } from "vue";
+const _ = /* @__PURE__ */ t({
+  name: "AiTimePicker",
+  inheritAttrs: !0,
+  __name: "index",
+  setup(m) {
+    return (e, a) => {
+      const r = n("el-time-picker");
+      return o(), i(r, c(p(e.$attrs)), null, 16);
+    };
+  }
+});
+export {
+  _ as default
+};

package/dist/components/AiTimePicker/types.ts

@@ -0,0 +1,16 @@
+/**
+ * AiTimePicker - 时间选择器
+ * 基于 Element Plus TimePicker 封装
+ *
+ * @example
+ * <AiTimePicker v-model="time" placeholder="选择时间" />
+ */
+
+export interface AiTimePickerProps {
+  modelValue?: Date | string
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  format?: string
+  valueFormat?: string
+}

package/dist/components/AiUpload/index.mjs

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

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

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

package/dist/components/AiUpload/types.ts

@@ -0,0 +1,11 @@
+/**
+ * AiUpload - 上传
+ */
+export interface AiUploadProps {
+  action?: string
+  headers?: Record<string, any>
+  multiple?: boolean
+  accept?: string
+  limit?: number
+  disabled?: boolean
+}

package/dist/components/README.md

@@ -26,33 +26,41 @@ import { AiForm } from 'ai-front-base'
 
 ## 组件列表
 
-### 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)
+### 表单类组件
+- **[AiInput](AiInput/types.ts)** - 输入框
+- **[AiSelect](AiSelect/types.ts)** - 选择器
+- **[AiDatePicker](AiDatePicker/types.ts)** - 日期选择器
+- **[AiTimePicker](AiTimePicker/types.ts)** - 时间选择器
+- **[AiCheckbox](AiCheckbox/types.ts)** - 复选框
+- **[AiRadio](AiRadio/types.ts)** - 单选框
+- **[AiSwitch](AiSwitch/types.ts)** - 开关
+- **[AiUpload](AiUpload/types.ts)** - 上传
+- **[AiForm](AiForm/types.ts)** - 表单
+
+### 数据展示组件
+- **[AiTable](AiTable/types.ts)** - 表格
+- **[AiPagination](AiPagination/types.ts)** - 分页
+- **[AiTag](AiTag/types.ts)** - 标签
+- **[AiBadge](AiBadge/types.ts)** - 徽章
+- **[AiProgress](AiProgress/types.ts)** - 进度条
+
+### 导航组件
+- **[AiMenu](AiMenu/types.ts)** - 菜单
+- **[AiBreadcrumb](AiBreadcrumb/types.ts)** - 面包屑
+- **[AiTabs](AiTabs/types.ts)** - 标签页
+
+### 反馈组件
+- **[AiDialog](AiDialog/types.ts)** - 对话框
+- **[AiMessage](AiMessage/types.ts)** - 消息提示（函数式）
+- **[AiNotification](AiNotification/types.ts)** - 通知（函数式）
+- **[AiLoading](AiLoading/types.ts)** - 加载（指令式/函数式）
+
+### 布局组件
+- **[AiContainer](AiContainer/types.ts)** - 容器
+- **[AiHeader](AiHeader/types.ts)** - 头部
+- **[AiAside](AiAside/types.ts)** - 侧边栏
+- **[AiMain](AiMain/types.ts)** - 主体
+- **[AiFooter](AiFooter/types.ts)** - 底部
 
 ## 使用规范（强制）
 
@@ -61,7 +69,7 @@ import { AiForm } from 'ai-front-base'
 导入方式：
 ```vue
 <script setup>
-import { AiInput, AiSelect, AiTable, AiForm } from '@/components'
+import { AiInput, AiSelect, AiTable, AiForm } from 'ai-front-base'
 </script>
 ```
 

package/dist/index.mjs

@@ -1,10 +1,54 @@
-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";
+import { default as a } from "./components/AiInput/index.vue.mjs";
+import { default as t } from "./components/AiSelect/index.vue.mjs";
+import { default as i } from "./components/AiDatePicker/index.vue.mjs";
+import { default as m } from "./components/AiTimePicker/index.vue.mjs";
+import { default as p } from "./components/AiCheckbox/index.vue.mjs";
+import { default as x } from "./components/AiRadio/index.vue.mjs";
+import { default as u } from "./components/AiSwitch/index.vue.mjs";
+import { default as c } from "./components/AiUpload/index.vue.mjs";
+import { default as b } from "./components/AiForm/index.vue.mjs";
+import { default as T } from "./components/AiTable/index.vue.mjs";
+import { default as M } from "./components/AiPagination/index.vue.mjs";
+import { default as B } from "./components/AiTag/index.vue.mjs";
+import { default as D } from "./components/AiBadge/index.vue.mjs";
+import { default as S } from "./components/AiProgress/index.vue.mjs";
+import { default as H } from "./components/AiMenu/index.vue.mjs";
+import { default as L } from "./components/AiBreadcrumb/index.vue.mjs";
+import { default as R } from "./components/AiTabs/index.vue.mjs";
+import { default as j } from "./components/AiDialog/index.vue.mjs";
+import { AiMessage as v } from "./components/AiMessage/index.mjs";
+import { AiNotification as z } from "./components/AiNotification/index.mjs";
+import { AiLoading as G } from "./components/AiLoading/index.mjs";
+import { default as K } from "./components/AiContainer/index.vue.mjs";
+import { default as Q } from "./components/AiHeader/index.vue.mjs";
+import { default as W } from "./components/AiAside/index.vue.mjs";
+import { default as Y } from "./components/AiMain/index.vue.mjs";
+import { default as _ } from "./components/AiFooter/index.vue.mjs";
 export {
-  a as AiForm,
-  l as AiInput,
-  p as AiSelect,
-  r as AiTable
+  W as AiAside,
+  D as AiBadge,
+  L as AiBreadcrumb,
+  p as AiCheckbox,
+  K as AiContainer,
+  i as AiDatePicker,
+  j as AiDialog,
+  _ as AiFooter,
+  b as AiForm,
+  Q as AiHeader,
+  a as AiInput,
+  G as AiLoading,
+  Y as AiMain,
+  H as AiMenu,
+  v as AiMessage,
+  z as AiNotification,
+  M as AiPagination,
+  S as AiProgress,
+  x as AiRadio,
+  t as AiSelect,
+  u as AiSwitch,
+  T as AiTable,
+  R as AiTabs,
+  B as AiTag,
+  m as AiTimePicker,
+  c as AiUpload
 };

package/dist/layouts/government.md

@@ -12,67 +12,212 @@
 
 **推荐主题**：
 - `blue` - 蓝色专业主题
-- `minimal` - 极简庄重主题
-- `tech` - 科技创新主题
+- `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. 列表检索页
-
-**布局准则**：
-- 搜索框使用高透明度（0.15-0.2）
-- 列表项使用低透明度（0.05-0.1）
-- 悬停时增加模糊度和透明度
-- 使用细边框（1px）增强层次
-
-**推荐组件**：
-- 组件库: `AiSearchBar`, `AiTable`, `AiListItem`
-- 备选: `ElInput`, `ElTable`, `ElCard`
+### 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. 详情页
 
-**布局准则**：
-- 主卡片使用中等透明度（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`
+**结构**：
+- 基本信息卡片：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
+- 最小：不支持，提示使用更大屏幕