@kine-design/crud 0.0.1-beta.2 → 0.0.1-beta.21

package/.vlaude/last-session-id

@@ -0,0 +1 @@
+594292cc-8321-4629-97d9-91ad432e0646

package/components/crudPage/KCrudPage.tsx

@@ -0,0 +1,178 @@
+/**
+ * @description KCrudPage 配置驱动的 ERP 列表页组件
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 一个配置出一整个页面：标题 + 筛选 + 表格 + 分页 + 状态标签。
+ */
+import { defineComponent, type PropType } from 'vue';
+import KTableColumn from 'kine-ui/components/tableColumn/KTableColumn.tsx';
+import KTag from 'kine-ui/components/tag/KTag.tsx';
+import KImage from 'kine-ui/components/image/KImage.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 {
+      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);
+        case 'image': {
+          if (!val) {
+            return (
+              <div class="k-image" style={{ width: '40px', height: '40px' }}>
+                <div class="k-image-placeholder k-image-empty">
+                  <svg viewBox="0 0 24 24" fill="none" class="k-image-placeholder-icon">
+                    <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5" />
+                    <circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" opacity="0.5" />
+                    <path d="M3 15l5-5 4 4 3-3 6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                  </svg>
+                </div>
+              </div>
+            );
+          }
+          const raw = String(val);
+          const resolver = props.config.imageResolver;
+          const src = resolver ? resolver(raw) : raw;
+          return (
+            <KImage
+              src={src}
+              previewSrcList={[src]}
+              width={40}
+              height={40}
+              fit="cover"
+              lazy
+            />
+          );
+        }
+        default: return val != null ? String(val) : '';
+      }
+    };
+
+    /** 渲染筛选区表单项 */
+    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">
+        <KPageHeader title={props.config.title}>
+          {{ extra: slots.headerExtra }}
+        </KPageHeader>
+
+        <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>
+    );
+  },
+});

package/components/crudPage/crudPage.css

@@ -0,0 +1,64 @@
+/**
+ * @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 .k-image-placeholder {
+  min-width: unset;
+  min-height: unset;
+}
+
+.k-image-empty {
+  color: var(--kine-color-text-muted);
+  opacity: 0.4;
+}
+
+/* ================================================================
+   移动端（<768px）
+   ================================================================ */
+
+@media (max-width: 767px) {
+  .k-crud-page {
+    padding: var(--kine-spacing-4);
+    gap: var(--kine-spacing-4);
+  }
+
+  /* 筛选项自动换行，撑满宽度 */
+  .k-crud-page-filter-item {
+    min-width: 0;
+    flex: 1 1 100%;
+  }
+}
+

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,281 @@
+/**
+ * @description KEditableTable — 可编辑行表格组件
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.1.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 所有行永远可编辑，不区分查看/编辑态。
+ * - 每个 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', 'remove'],
+  setup(props, { emit, slots }) {
+    const deletingId = ref<string | number | null>(null);
+
+    // ── 更新某行某字段 ──────────────────────────────
+
+    const updateCell = (rowIdx: number, param: string, value: unknown) => {
+      const rows = [...props.modelValue];
+      rows[rowIdx] = { ...rows[rowIdx], [param]: value };
+      emit('update:modelValue', rows);
+    };
+
+    // ── 删除 ────────────────────────────────────────
+
+    const startDelete = (row: EditableTableRow) => {
+      deletingId.value = row._id;
+    };
+
+    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, rowIdx: number) => {
+      const editSlot = slots[`edit-${col.param}`];
+      if (editSlot) return editSlot({ row, value: row[col.param], update: (v: unknown) => updateCell(rowIdx, col.param, v) });
+
+      const customSlot = slots[`column-${col.param}`];
+      if (customSlot) return customSlot({ row, value: row[col.param] });
+
+      const type = col.editType ?? 'text';
+
+      if (type === 'readonly') {
+        return <span class="k-et-cell-readonly">{row[col.param] as string ?? ''}</span>;
+      }
+
+      if (type === 'select' && col.options) {
+        return (
+          <KSelect
+            class="k-et-select-wrap"
+            modelValue={row[col.param]}
+            options={col.options}
+            optionParam="label"
+            valueParam="value"
+            onUpdate:modelValue={(v: unknown) => updateCell(rowIdx, col.param, v)}
+          />
+        );
+      }
+
+      return (
+        <KInput
+          class="k-et-input-wrap"
+          type={type === 'number' ? 'number' : 'text'}
+          modelValue={row[col.param] as string | number}
+          onUpdate:modelValue={(v: string) => updateCell(rowIdx, 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 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">{row[cols[0].param] as string ?? ''}</s>
+                          <span class="k-et-delete-ask">确定删除这一行？</span>
+                          <KButton type="danger" size="small" text="删除" onClick={confirmDelete} />
+                          <KButton plain size="small" text="取消" onClick={cancelDelete} />
+                        </span>
+                      </td>
+                    </tr>
+                  );
+                }
+
+                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}`]}>
+                        {renderCell(col, row, i)}
+                      </td>
+                    ))}
+                    {props.showActions && (
+                      <td class="k-et-td k-et-td-actions">
+                        <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>
+      );
+    };
+  },
+});