@kine-design/crud 0.0.1-beta.1 → 0.0.1-beta.10

package/components/crudPage/KCrudPage.tsx

@@ -0,0 +1,175 @@
+/**
+ * @description KCrudPage 配置驱动的 ERP 列表页组件
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 一个配置出一整个页面：标题 + 筛选 + 表格 + 分页 + 状态标签。
+ */
+import { defineComponent, type PropType } from 'vue';
+import { useRouter } from 'vue-router';
+import KTableColumn from 'kine-ui/components/tableColumn/KTableColumn.tsx';
+import KTag from 'kine-ui/components/tag/KTag.tsx';
+import KInput from 'kine-ui/components/input/KInput.tsx';
+import KSelect from 'kine-ui/components/select/KSelect.tsx';
+import KPageHeader from '../pageHeader/KPageHeader.tsx';
+import KSearchTable from '../searchTable/KSearchTable.tsx';
+import { useCrudPage } from '../../composables/page/useCrudPage';
+import type { CrudPageConfig, CrudColumnConfig } from '../../composables/page/types';
+import './crudPage.css';
+
+export default defineComponent({
+  name: 'KCrudPage',
+
+  props: {
+    config: {
+      type: Object as PropType<CrudPageConfig>,
+      required: true,
+    },
+  },
+
+  setup(props, { slots }) {
+    const router = useRouter();
+    const {
+      page, pageSize, total, list, loading,
+      filters, onPageChange, onSearch, onReset,
+    } = useCrudPage(props.config);
+
+    /** 格式化日期 */
+    const formatDate = (val: unknown) => {
+      if (!val) return '';
+      const d = new Date(val as string);
+      return isNaN(d.getTime()) ? String(val) : d.toLocaleDateString('zh-CN');
+    };
+
+    /** 格式化日期时间 */
+    const formatDateTime = (val: unknown) => {
+      if (!val) return '';
+      const d = new Date(val as string);
+      return isNaN(d.getTime()) ? String(val) : d.toLocaleString('zh-CN');
+    };
+
+    /** 渲染状态标签 */
+    const renderStatus = (val: unknown) => {
+      const statusMap = props.config.statusMap;
+      if (!statusMap || !val) return String(val ?? '');
+      const mapped = statusMap[val as string];
+      if (!mapped) return String(val);
+      return <KTag type={mapped.type ?? 'default'} size="small">{mapped.label}</KTag>;
+    };
+
+    /** 按列类型渲染单元格 */
+    const renderCell = (col: CrudColumnConfig, row: Record<string, unknown>) => {
+      const val = row[col.param];
+      switch (col.type) {
+        case 'status': return renderStatus(val);
+        case 'date': return formatDate(val);
+        case 'datetime': return formatDateTime(val);
+        default: return val != null ? String(val) : '';
+      }
+    };
+
+    /** 行点击 → 跳转详情 */
+    const onRowClick = (e: MouseEvent) => {
+      const detailPath = props.config.detailPath;
+      if (!detailPath) return;
+
+      const tr = (e.target as HTMLElement).closest?.('tr');
+      if (!tr) return;
+      const tbody = tr.closest('tbody');
+      if (!tbody || tbody.classList.contains('k-table-empty')) return;
+
+      const rows = Array.from(tbody.querySelectorAll('tr'));
+      const index = rows.indexOf(tr as HTMLTableRowElement);
+      if (index < 0 || index >= list.value.length) return;
+
+      const row = list.value[index];
+      const key = props.config.rowKey ?? 'id';
+      const id = row[key];
+      if (id != null) {
+        router.push(`${detailPath}/${id}`);
+      }
+    };
+
+    /** 渲染筛选区表单项 */
+    const renderFilters = () => {
+      if (!props.config.filters?.length) return null;
+      return props.config.filters.map(f => (
+        <div class="k-crud-page-filter-item" key={f.param}>
+          <label class="k-crud-page-filter-label">{f.label}</label>
+          {f.type === 'select' ? (
+            <KSelect
+              class="k-crud-page-filter-control"
+              modelValue={(filters[f.param] as string) ?? ''}
+              options={f.options ?? []}
+              optionParam="label"
+              valueParam="value"
+              placeholder={f.placeholder ?? '全部'}
+              onUpdate:modelValue={(v: unknown) => {
+                filters[f.param] = (v as string) || undefined;
+              }}
+            />
+          ) : (
+            <KInput
+              class="k-crud-page-filter-control"
+              placeholder={f.placeholder ?? `请输入${f.label}`}
+              modelValue={(filters[f.param] as string) ?? ''}
+              onUpdate:modelValue={(v: string) => {
+                filters[f.param] = v || undefined;
+              }}
+            />
+          )}
+        </div>
+      ));
+    };
+
+    return () => (
+      <div class={['k-crud-page', props.config.detailPath ? 'k-crud-page--clickable' : '']}>
+        <KPageHeader title={props.config.title}>
+          {{ extra: slots.headerExtra }}
+        </KPageHeader>
+
+        <div onClick={onRowClick}>
+          <KSearchTable
+            data={list.value}
+            loading={loading.value}
+            total={total.value}
+            page={page.value}
+            pageSize={pageSize.value}
+            searchable={!!props.config.filters?.length}
+            onUpdate:page={onPageChange}
+            onSearch={onSearch}
+            onReset={onReset}
+          >
+            {{
+              search: renderFilters,
+              toolbar: slots.toolbar,
+              default: () => props.config.columns.map(col => {
+                const customSlot = slots[`column-${col.param}`];
+                return (
+                  <KTableColumn
+                    key={col.param}
+                    param={col.param}
+                    label={col.label}
+                    width={col.width ?? ''}
+                  >
+                    {{
+                      default: customSlot
+                        ? (scope: { row: Record<string, unknown>; index: number }) => customSlot(scope)
+                        : col.type
+                          ? (scope: { row: Record<string, unknown> }) => renderCell(col, scope.row)
+                          : undefined,
+                    }}
+                  </KTableColumn>
+                );
+              }),
+              empty: slots.empty,
+            }}
+          </KSearchTable>
+        </div>
+      </div>
+    );
+  },
+});

package/components/crudPage/crudPage.css

@@ -0,0 +1,40 @@
+/**
+ * @description KCrudPage 样式
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ */
+
+/* ===== 根容器 ===== */
+.k-crud-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: var(--kine-spacing-6);
+  padding: var(--kine-spacing-8);
+  box-sizing: border-box;
+}
+
+/* ===== 筛选项 ===== */
+.k-crud-page-filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-2);
+  min-width: 140px;
+}
+
+.k-crud-page-filter-label {
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-secondary);
+  line-height: 1;
+}
+
+/* KInput / KSelect 筛选控件宽度适配 */
+.k-crud-page-filter-control {
+  width: 100%;
+}
+
+/* ===== 行可点击 ===== */
+.k-crud-page--clickable .k-tbody .k-tr {
+  cursor: pointer;
+}

package/components/crudPage/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @description KCrudPage barrel export
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export { default as KCrudPage } from './KCrudPage';

package/components/editableTable/KEditableTable.tsx

@@ -0,0 +1,335 @@
+/**
+ * @description KEditableTable — 可编辑行表格组件
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 支持行内编辑、添加行、删除行、汇总行。
+ * 设计参考 AIDesigner 的 EditableDataTable 规范：
+ * - 正常行：纯展示
+ * - 编辑行：左侧靛蓝竖线，cell 变为 input
+ * - 删除确认行：红色高亮 + 内联确认
+ * - 新增行：底部空行带搜索输入
+ * - 汇总行：底部加粗合计
+ */
+import { defineComponent, ref, type PropType } from 'vue';
+import KButton from 'kine-ui/components/button/KButton.tsx';
+import KInput from 'kine-ui/components/input/KInput.tsx';
+import KSelect from 'kine-ui/components/select/KSelect.tsx';
+import './editableTable.css';
+
+// ────────────────────────────────────────────────────────────────────────────
+// 类型
+// ────────────────────────────────────────────────────────────────────────────
+
+export interface EditableColumn {
+  /** 字段名 */
+  param: string;
+  /** 列标题 */
+  label: string;
+  /** 列宽 */
+  width?: string;
+  /** 编辑态下的输入类型 */
+  editType?: 'text' | 'number' | 'select' | 'search' | 'readonly';
+  /** select 类型的选项 */
+  options?: Array<{ label: string; value: string | number }>;
+  /** 对齐方式 */
+  align?: 'left' | 'center' | 'right';
+  /** 是否在汇总行中求和 */
+  summary?: boolean;
+  /** 汇总行格式化 */
+  summaryFormat?: (sum: number) => string;
+}
+
+export interface EditableTableRow {
+  /** 行唯一标识 */
+  _id: string | number;
+  /** 行数据 */
+  [key: string]: unknown;
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// 组件
+// ────────────────────────────────────────────────────────────────────────────
+
+export default defineComponent({
+  name: 'KEditableTable',
+  props: {
+    /** 列定义 */
+    columns: { type: Array as PropType<EditableColumn[]>, required: true },
+    /** 行数据（v-model） */
+    modelValue: { type: Array as PropType<EditableTableRow[]>, default: () => [] },
+    /** 标题 */
+    title: { type: String, default: '' },
+    /** 是否显示序号列 */
+    showIndex: { type: Boolean, default: true },
+    /** 是否显示操作列 */
+    showActions: { type: Boolean, default: true },
+    /** 是否显示汇总行 */
+    showSummary: { type: Boolean, default: false },
+    /** 汇总行标签 */
+    summaryLabel: { type: String, default: '合计' },
+    /** 新增行按钮文本 */
+    addText: { type: String, default: '+ 添加行' },
+    /** 是否可新增 */
+    addable: { type: Boolean, default: true },
+    /** 币种前缀（用于金额汇总展示） */
+    currencyPrefix: { type: String, default: '' },
+  },
+  emits: ['update:modelValue', 'add', 'edit', 'save', 'cancel', 'remove'],
+  setup(props, { emit, slots }) {
+    const editingId = ref<string | number | null>(null);
+    const deletingId = ref<string | number | null>(null);
+    const editingData = ref<Record<string, unknown>>({});
+
+    // ── 行操作 ────────────────────────────────────
+
+    const startEdit = (row: EditableTableRow) => {
+      editingId.value = row._id;
+      editingData.value = { ...row };
+      deletingId.value = null;
+      emit('edit', row);
+    };
+
+    const saveEdit = () => {
+      if (editingId.value === null) return;
+      const rows = [...props.modelValue];
+      const idx = rows.findIndex(r => r._id === editingId.value);
+      if (idx >= 0) {
+        rows[idx] = { ...editingData.value } as EditableTableRow;
+        emit('update:modelValue', rows);
+        emit('save', rows[idx]);
+      }
+      editingId.value = null;
+      editingData.value = {};
+    };
+
+    const cancelEdit = () => {
+      editingId.value = null;
+      editingData.value = {};
+      emit('cancel');
+    };
+
+    const startDelete = (row: EditableTableRow) => {
+      deletingId.value = row._id;
+      editingId.value = null;
+    };
+
+    const confirmDelete = () => {
+      if (deletingId.value === null) return;
+      const rows = props.modelValue.filter(r => r._id !== deletingId.value);
+      emit('update:modelValue', rows);
+      emit('remove', deletingId.value);
+      deletingId.value = null;
+    };
+
+    const cancelDelete = () => {
+      deletingId.value = null;
+    };
+
+    const addRow = () => {
+      emit('add');
+    };
+
+    // ── 汇总计算 ──────────────────────────────────
+
+    const getSummary = (col: EditableColumn): string => {
+      if (!col.summary) return '';
+      const sum = props.modelValue.reduce((acc, row) => {
+        const val = Number(row[col.param]);
+        return acc + (isNaN(val) ? 0 : val);
+      }, 0);
+      if (col.summaryFormat) return col.summaryFormat(sum);
+      return sum.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    };
+
+    // ── 渲染 ──────────────────────────────────────
+
+    /** 渲染普通单元格 */
+    const renderCell = (col: EditableColumn, row: EditableTableRow) => {
+      const customSlot = slots[`column-${col.param}`];
+      if (customSlot) return customSlot({ row, value: row[col.param] });
+
+      const val = row[col.param];
+      return val != null ? String(val) : '';
+    };
+
+    /** 渲染编辑态单元格 */
+    const renderEditCell = (col: EditableColumn) => {
+      const editSlot = slots[`edit-${col.param}`];
+      if (editSlot) return editSlot({ data: editingData.value });
+
+      const type = col.editType ?? 'text';
+
+      if (type === 'readonly') {
+        return <span class="k-et-cell-readonly">{editingData.value[col.param] as string ?? ''}</span>;
+      }
+
+      if (type === 'select' && col.options) {
+        return (
+          <KSelect
+            class="k-et-select-wrap"
+            modelValue={editingData.value[col.param]}
+            options={col.options}
+            optionParam="label"
+            valueParam="value"
+            onUpdate:modelValue={(v: unknown) => { editingData.value[col.param] = v; }}
+          />
+        );
+      }
+
+      return (
+        <KInput
+          class="k-et-input-wrap"
+          type={type === 'number' ? 'number' : 'text'}
+          modelValue={editingData.value[col.param] as string | number}
+          onUpdate:modelValue={(v: string) => { editingData.value[col.param] = v; }}
+        />
+      );
+    };
+
+    return () => {
+      const rows = props.modelValue;
+      const cols = props.columns;
+      const isEmpty = rows.length === 0;
+
+      return (
+        <div class="k-editable-table">
+          {/* 标题栏 */}
+          {(props.title || slots.header) && (
+            <div class="k-et-header">
+              <div class="k-et-header-left">
+                {props.title && <span class="k-et-title">{props.title}</span>}
+                {rows.length > 0 && <span class="k-et-count">{rows.length} items</span>}
+              </div>
+              <div class="k-et-header-right">
+                {slots.headerExtra?.()}
+                {props.addable && (
+                  <KButton plain text={props.addText} onClick={addRow} />
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* 表格 */}
+          <table class="k-et-table">
+            <thead class="k-et-thead">
+              <tr>
+                {props.showIndex && <th class="k-et-th k-et-th-index">#</th>}
+                {cols.map(col => (
+                  <th
+                    key={col.param}
+                    class={['k-et-th', col.align && `k-et-align-${col.align}`]}
+                    style={col.width ? { width: col.width } : undefined}
+                  >
+                    {col.label}
+                  </th>
+                ))}
+                {props.showActions && <th class="k-et-th k-et-th-actions" />}
+              </tr>
+            </thead>
+
+            <tbody class="k-et-tbody">
+              {rows.map((row, i) => {
+                const isEditing = editingId.value === row._id;
+                const isDeleting = deletingId.value === row._id;
+
+                // 删除确认行
+                if (isDeleting) {
+                  return (
+                    <tr key={row._id} class="k-et-tr k-et-tr--deleting">
+                      {props.showIndex && <td class="k-et-td k-et-td-index">{String(i + 1).padStart(2, '0')}</td>}
+                      <td class="k-et-td" colspan={cols.length + (props.showActions ? 1 : 0)}>
+                        <span class="k-et-delete-confirm">
+                          <s class="k-et-deleted-text">{renderCell(cols[0], row)}</s>
+                          <span class="k-et-delete-ask">Are you sure you want to delete this line?</span>
+                          <KButton type="danger" size="small" text="Delete" onClick={confirmDelete} />
+                          <KButton plain size="small" text="Cancel" onClick={cancelDelete} />
+                        </span>
+                      </td>
+                    </tr>
+                  );
+                }
+
+                // 编辑行
+                if (isEditing) {
+                  return (
+                    <tr key={row._id} class="k-et-tr k-et-tr--editing">
+                      {props.showIndex && <td class="k-et-td k-et-td-index">{String(i + 1).padStart(2, '0')}</td>}
+                      {cols.map(col => (
+                        <td key={col.param} class={['k-et-td', col.align && `k-et-align-${col.align}`]}>
+                          {renderEditCell(col)}
+                        </td>
+                      ))}
+                      {props.showActions && (
+                        <td class="k-et-td k-et-td-actions">
+                          <KButton plain size="small" text="✓" onClick={saveEdit} />
+                          <KButton plain size="small" text="×" onClick={cancelEdit} />
+                        </td>
+                      )}
+                    </tr>
+                  );
+                }
+
+                // 正常行
+                return (
+                  <tr key={row._id} class="k-et-tr">
+                    {props.showIndex && <td class="k-et-td k-et-td-index">{String(i + 1).padStart(2, '0')}</td>}
+                    {cols.map(col => (
+                      <td key={col.param} class={['k-et-td', col.align && `k-et-align-${col.align}`]}>
+                        {renderCell(col, row)}
+                      </td>
+                    ))}
+                    {props.showActions && (
+                      <td class="k-et-td k-et-td-actions">
+                        <KButton plain size="small" text="✎" onClick={() => startEdit(row)} />
+                        <KButton plain size="small" text="×" onClick={() => startDelete(row)} />
+                      </td>
+                    )}
+                  </tr>
+                );
+              })}
+            </tbody>
+
+            {/* 汇总行 */}
+            {props.showSummary && rows.length > 0 && (
+              <tfoot class="k-et-tfoot">
+                <tr class="k-et-tr k-et-tr--summary">
+                  {props.showIndex && <td class="k-et-td" />}
+                  {cols.map((col, ci) => (
+                    <td key={col.param} class={['k-et-td k-et-td-summary', col.align && `k-et-align-${col.align}`]}>
+                      {ci === 0 ? props.summaryLabel : ''}
+                      {col.summary ? (
+                        <span class="k-et-summary-value">
+                          {props.currencyPrefix && col.summaryFormat === undefined && ci === cols.length - 1 ? `${props.currencyPrefix} ` : ''}
+                          {getSummary(col)}
+                        </span>
+                      ) : ''}
+                    </td>
+                  ))}
+                  {props.showActions && <td class="k-et-td" />}
+                </tr>
+              </tfoot>
+            )}
+          </table>
+
+          {/* 空态 */}
+          {isEmpty && (
+            <div class="k-et-empty">
+              {slots.empty?.() ?? (
+                <>
+                  <span class="k-et-empty-text">暂无数据</span>
+                  {props.addable && (
+                    <KButton type="primary" text="添加第一行" onClick={addRow} />
+                  )}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    };
+  },
+});