ai-front-base 0.2.3 → 0.2.6

package/dist/components/AiTable/index.mjs

@@ -1,4 +1,7 @@
-import f from "./index.vue.mjs";
+import o from "./index.vue.mjs";
+/* empty css            */
+import t from "../_virtual/_plugin-vue_export-helper.mjs";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-674d64bb"]]);
 export {
-  f as default
+  p as default
 };

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

@@ -1,30 +1,221 @@
-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({
+import { defineComponent as U, useSlots as W, ref as k, computed as z, resolveComponent as d, openBlock as a, createElementBlock as m, createVNode as N, mergeProps as P, withCtx as u, createBlock as r, createCommentVNode as g, createElementVNode as _, Fragment as q, renderList as G, createSlots as J, renderSlot as f, resolveDynamicComponent as C, toDisplayString as R, createTextVNode as Q, h as H } from "vue";
+const X = { class: "ai-table" }, Y = { key: 3 }, ee = /* @__PURE__ */ U({
   __name: "index",
   props: {
     columns: {},
-    data: {}
+    data: {},
+    fit: { type: Boolean },
+    selection: { type: [Boolean, String], default: "multiple" },
+    showIndex: { type: Boolean, default: !0 },
+    pagination: {},
+    size: {},
+    width: {},
+    height: {},
+    maxHeight: {},
+    stripe: { type: Boolean },
+    border: { type: Boolean },
+    rowKey: {},
+    context: {},
+    showHeader: { type: Boolean },
+    showSummary: { type: Boolean },
+    sumText: {},
+    summaryMethod: {},
+    rowClassName: {},
+    rowStyle: {},
+    cellClassName: {},
+    cellStyle: {},
+    headerRowClassName: {},
+    headerRowStyle: {},
+    headerCellClassName: {},
+    headerCellStyle: {},
+    highlightCurrentRow: { type: Boolean },
+    currentRowKey: {},
+    emptyText: {},
+    expandRowKeys: {},
+    defaultExpandAll: { type: Boolean },
+    rowExpandable: {},
+    defaultSort: {},
+    tooltipEffect: {},
+    tooltipOptions: {},
+    spanMethod: {},
+    selectOnIndeterminate: { type: Boolean },
+    indent: {},
+    treeProps: {},
+    lazy: { type: Boolean },
+    load: {},
+    className: {},
+    style: { type: [Boolean, null, String, Object, Array] },
+    tableLayout: {},
+    scrollbarAlwaysOn: { type: Boolean },
+    flexible: { type: Boolean },
+    showOverflowTooltip: { type: [Boolean, Object] },
+    tooltipFormatter: {},
+    appendFilterPanelTo: {},
+    scrollbarTabindex: {},
+    nativeScrollbar: { type: Boolean }
   },
-  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))
-      ])
-    ]));
+  emits: ["init", "selection-change", "sort-change"],
+  setup(l, { emit: O }) {
+    const s = l, y = O, p = W(), T = k(), S = k(), c = z({
+      get: () => {
+        var e;
+        return ((e = s.pagination) == null ? void 0 : e.currentPage) || 1;
+      },
+      set: (e) => {
+        s.pagination && (s.pagination.currentPage = e);
+      }
+    }), h = z({
+      get: () => {
+        var e;
+        return ((e = s.pagination) == null ? void 0 : e.pageSize) || 10;
+      },
+      set: (e) => {
+        s.pagination && (s.pagination.pageSize = e);
+      }
+    }), $ = (e) => {
+      if (e === "slot" || e === "slotHeader" || e === "slotBoth") return "div";
+      try {
+        return d(e);
+      } catch {
+        try {
+          return d("el-" + e.replace(/^Ai/, "").toLowerCase());
+        } catch {
+          return "span";
+        }
+      }
+    }, E = (e) => {
+      var o;
+      const n = (o = p[e]) == null ? void 0 : o.call(p);
+      return n && n[0] ? () => n[0] : () => H("span");
+    }, j = (e) => {
+      var o;
+      const n = (o = p[e]) == null ? void 0 : o.call(p);
+      return n && n[1] ? () => n[1] : () => H("span");
+    }, A = (e) => {
+      y("selection-change", e);
+    }, V = (e) => {
+      S.value = e, y("selection-change", [e]);
+    }, F = ({ prop: e, order: n }) => {
+      y("sort-change", { prop: e, order: n });
+    }, I = () => {
+      y("init", c.value, h.value);
+    }, K = () => {
+      y("init", c.value, h.value);
+    };
+    return (e, n) => {
+      var b, v, w, B;
+      const o = d("el-table-column"), L = d("el-radio"), D = d("el-table"), M = d("el-pagination");
+      return a(), m("div", X, [
+        N(D, P({
+          ref_key: "tableRef",
+          ref: T,
+          data: l.data
+        }, e.$attrs, {
+          onSelectionChange: A,
+          onSortChange: F
+        }), {
+          default: u(() => [
+            l.selection === "multiple" ? (a(), r(o, {
+              key: 0,
+              type: "selection",
+              width: "55",
+              fixed: "left"
+            })) : g("", !0),
+            l.selection === "single" ? (a(), r(o, {
+              key: 1,
+              width: "55",
+              fixed: "left"
+            }, {
+              default: u(({ row: t }) => [
+                N(L, {
+                  "model-value": S.value === t,
+                  onChange: (i) => V(t)
+                }, {
+                  default: u(() => [...n[2] || (n[2] = [
+                    _("span", null, null, -1)
+                  ])]),
+                  _: 1
+                }, 8, ["model-value", "onChange"])
+              ]),
+              _: 1
+            })) : g("", !0),
+            l.showIndex !== !1 ? (a(), r(o, {
+              key: 2,
+              type: "index",
+              label: "序号",
+              width: "60",
+              fixed: "left",
+              align: "center"
+            })) : g("", !0),
+            (a(!0), m(q, null, G(l.columns, (t) => (a(), r(o, {
+              key: t.prop,
+              prop: t.prop,
+              label: t.label,
+              width: t.width,
+              "min-width": t.minWidth,
+              sortable: t.sortable !== !1,
+              align: t.align || "center"
+            }, J({
+              default: u(({ row: i, $index: x }) => [
+                t.type === "slot" ? f(e.$slots, t.prop, {
+                  key: 0,
+                  row: i,
+                  index: x
+                }, void 0, !0) : t.type === "slotBoth" ? (a(), r(C(j(t.prop)), {
+                  key: 1,
+                  row: i,
+                  index: x
+                }, null, 8, ["row", "index"])) : t.type ? (a(), r(C($(t.type)), P({
+                  key: 2,
+                  "model-value": i[t.prop]
+                }, { ref_for: !0 }, t.attrs), null, 16, ["model-value"])) : (a(), m("span", Y, R(i[t.prop]), 1))
+              ]),
+              _: 2
+            }, [
+              t.type === "slotHeader" || t.type === "slotBoth" ? {
+                name: "header",
+                fn: u(() => [
+                  t.type === "slotHeader" ? f(e.$slots, `${t.prop}Header`, { key: 0 }, () => [
+                    Q(R(t.label), 1)
+                  ], !0) : t.type === "slotBoth" ? (a(), r(C(E(t.prop)), { key: 1 })) : g("", !0)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["prop", "label", "width", "min-width", "sortable", "align"]))), 128)),
+            e.$slots.action ? (a(), r(o, {
+              key: 3,
+              label: "操作",
+              fixed: "right",
+              align: "center"
+            }, {
+              default: u(({ row: t, $index: i }) => [
+                f(e.$slots, "action", {
+                  row: t,
+                  index: i
+                }, void 0, !0)
+              ]),
+              _: 3
+            })) : g("", !0)
+          ]),
+          _: 3
+        }, 16, ["data"]),
+        ((b = l.pagination) == null ? void 0 : b.show) !== !1 ? (a(), r(M, {
+          key: 0,
+          "current-page": c.value,
+          "onUpdate:currentPage": n[0] || (n[0] = (t) => c.value = t),
+          "page-size": h.value,
+          "onUpdate:pageSize": n[1] || (n[1] = (t) => h.value = t),
+          total: ((v = l.pagination) == null ? void 0 : v.total) || 0,
+          "page-sizes": ((w = l.pagination) == null ? void 0 : w.pageSizes) || [10, 20, 50, 100],
+          layout: ((B = l.pagination) == null ? void 0 : B.layout) || "total, sizes, prev, pager, next, jumper",
+          onCurrentChange: I,
+          onSizeChange: K,
+          style: { "margin-top": "16px", "justify-content": "flex-end" }
+        }, null, 8, ["current-page", "page-size", "total", "page-sizes", "layout"])) : g("", !0)
+      ]);
+    };
   }
 });
 export {
-  k as default
+  ee as default
 };

package/dist/components/AiTable/types.ts

@@ -1,27 +1,207 @@
 /**
- * AiTable - 表格组件
+ * AiTable - 动态表格组件
+ * 基于Element Plus el-table封装，支持JSON配置驱动
  *
- * 用法示例：
- * <AiTable :columns="columns" :data="tableData" />
+ * ==================== 重要说明 ====================
+ * 1. 表格宽度会自动充满容器
+ * 2. 建议至少一列不设置width，让其自动填充剩余空间
+ * 3. 分页默认显示，需传入pagination对象（包含total）
  *
- * 配置示例：
+ * ==================== 基础用法 ====================
+ * <AiTable
+ *   :columns="columns"
+ *   :data="tableData"
+ *   :pagination="pagination"
+ * />
+ *
+ * ==================== 完整示例 ====================
  * const columns = [
- *   { prop: 'name', label: '姓名', width: '100px' },
- *   { prop: 'age', label: '年龄' },
- *   { prop: 'address', label: '地址', width: '200px' }
- * ]
- * const tableData = [
- *   { name: '张三', age: 18, address: '北京' }
+ *   { prop: 'name', label: '姓名', width: 120 },
+ *   { prop: 'age', label: '年龄', width: 80 },
+ *   { prop: 'address', label: '地址' }  // 不设置width，自动填充
  * ]
+ *
+ * const tableData = ref([
+ *   { name: '张三', age: 20, address: '北京市朝阳区' }
+ * ])
+ *
+ * // 分页配置（必须包含total）
+ * const pagination = ref({
+ *   total: 100,           // 必填：总条数
+ *   currentPage: 1,       // 当前页
+ *   pageSize: 10          // 每页条数
+ * })
+ *
+ * ==================== 插槽用法 ====================
+ * <AiTable :columns="columns" :data="tableData">
+ *   <!-- slot: 自定义单元格内容 -->
+ *   <template #date="{ row }">
+ *     <span>{{ formatDate(row.date) }}</span>
+ *   </template>
+ *
+ *   <!-- slotHeader: 自定义表头 -->
+ *   <template #nameHeader>
+ *     <span style="color: red">姓名 *</span>
+ *   </template>
+ *
+ *   <!-- slotBoth: 同时自定义表头和内容 -->
+ *   <template #status>
+ *     <div><span>状态</span></div>
+ *     <div><el-tag>{{ row.status }}</el-tag></div>
+ *   </template>
+ *
+ *   <!-- 操作列插槽 -->
+ *   <template #action="{ row, $index }">
+ *     <el-button @click="handleEdit(row)">编辑</el-button>
+ *     <el-button @click="handleDelete(row)">删除</el-button>
+ *   </template>
+ * </AiTable>
  */
 
+import type { TableProps } from 'element-plus'
+
+/**
+ * 表格列配置接口
+ */
 export interface ITableColumn {
-  prop: string      // 列字段名
-  label: string     // 列标题
-  width?: string    // 列宽度
+  /**
+   * 列字段名
+   */
+  prop: string
+
+  /**
+   * 列标题
+   */
+  label: string
+
+  /**
+   * 列宽度（固定宽度）
+   */
+  width?: string | number
+
+  /**
+   * 列最小宽度（自动扩展以充满剩余空间）
+   */
+  minWidth?: string | number
+
+  /**
+   * 控件类型
+   * - 不传默认为普通文本
+   * - 支持：AiTag/AiInput/el-tag等
+   * - 支持：slot/slotHeader/slotBoth
+   */
+  type?: string
+
+  /**
+   * 透传给控件的属性
+   */
+  attrs?: Record<string, any>
+
+  /**
+   * 是否可排序
+   * - 默认true
+   */
+  sortable?: boolean
+
+  /**
+   * 对齐方式
+   * - 默认center
+   */
+  align?: 'left' | 'center' | 'right'
+}
+
+/**
+ * 分页配置接口
+ */
+export interface IPagination {
+  /**
+   * 是否显示分页
+   * - 默认true
+   */
+  show?: boolean
+
+  /**
+   * 当前页码（响应式）
+   */
+  currentPage?: number
+
+  /**
+   * 每页条数（响应式）
+   */
+  pageSize?: number
+
+  /**
+   * 总条数
+   */
+  total?: number
+
+  /**
+   * 每页条数选项
+   */
+  pageSizes?: number[]
+
+  /**
+   * 布局
+   */
+  layout?: string
+}
+
+/**
+ * 表格组件Props接口
+ */
+export interface IAiTableProps extends Omit<Partial<TableProps<any>>, 'data'> {
+  /**
+   * 列配置数组（必填）
+   */
+  columns: ITableColumn[]
+
+  /**
+   * 表格数据（必填）
+   */
+  data: Record<string, any>[]
+
+  /**
+   * 列宽是否自撑开（默认true）
+   */
+  fit?: boolean
+
+  /**
+   * 选择模式
+   * - false: 不显示选择列
+   * - 'multiple': 多选（默认）
+   * - 'single': 单选
+   */
+  selection?: false | 'multiple' | 'single'
+
+  /**
+   * 是否显示序号列
+   * - 默认true
+   */
+  showIndex?: boolean
+
+  /**
+   * 分页配置
+   */
+  pagination?: IPagination
 }
 
-export interface IAiTableProps {
-  columns: ITableColumn[]           // 列配置数组
-  data: Record<string, any>[]       // 表格数据数组
+/**
+ * 表格组件事件接口
+ */
+export interface IAiTableEmits {
+  /**
+   * 分页变化事件
+   * - 用于查询数据
+   */
+  (e: 'init', currentPage: number, pageSize: number): void
+
+  /**
+   * 选择变化事件
+   */
+  (e: 'selection-change', rows: Record<string, any>[]): void
+
+  /**
+   * 排序变化事件
+   */
+  (e: 'sort-change', data: { prop: string; order: string | null }): void
 }

package/dist/components/AiTag/types.ts

@@ -1,9 +1,8 @@
 /**
- * AiTag - 标签
+ * AiTag - 标签组件
+ * 基于Element Plus el-tag封装
  */
-export interface AiTagProps {
-  type?: 'success' | 'info' | 'warning' | 'danger'
-  closable?: boolean
-  size?: 'large' | 'default' | 'small'
-  effect?: 'dark' | 'light' | 'plain'
-}
+
+import type { TagProps } from 'element-plus'
+
+export interface IAiTagProps extends Partial<TagProps> {}

package/dist/components/README.md

@@ -42,37 +42,12 @@ import { AiForm } from 'ai-front-base'
 - **[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)** - 上传
+- **[AiDateRangePicker](AiDateRangePicker/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)** - 底部
 
 
 导入方式：

package/dist/components/_virtual/_plugin-vue_export-helper.mjs

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/components/install.mjs

@@ -0,0 +1,15 @@
+import m from "./AiForm/index.mjs";
+import i from "./AiTable/index.mjs";
+import n from "./AiInput/index.vue.mjs";
+import t from "./AiSelect/index.vue.mjs";
+import e from "./AiDatePicker/index.vue.mjs";
+import r from "./AiDateRangePicker/index.mjs";
+import c from "./AiTag/index.vue.mjs";
+const g = {
+  install(o) {
+    o.component("AiForm", m), o.component("AiTable", i), o.component("AiInput", n), o.component("AiSelect", t), o.component("AiDatePicker", e), o.component("AiDateRangePicker", r), o.component("AiTag", c);
+  }
+};
+export {
+  g as default
+};

package/dist/index.mjs

@@ -1,54 +1,18 @@
-import { default as a } from "./components/AiInput/index.vue.mjs";
-import { default as t } from "./components/AiSelect/index.vue.mjs";
+import { default as t } from "./components/AiInput/index.vue.mjs";
+import { default as o } 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";
+import { default as m } from "./components/AiDateRangePicker/index.mjs";
+import { default as s } from "./components/AiForm/index.mjs";
+import { default as d } from "./components/AiTable/index.mjs";
+import { default as A } from "./components/AiTag/index.vue.mjs";
+import { default as n } from "./components/install.mjs";
 export {
-  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
+  m as AiDateRangePicker,
+  s as AiForm,
+  n as AiFrontBase,
+  t as AiInput,
+  o as AiSelect,
+  d as AiTable,
+  A as AiTag
 };

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变量而非硬编码
+- ✅ 遵循命名和间距规范
+- ❌ 不要自创页面结构
+- ❌ 不要使用硬编码样式