@kine-design/crud 0.0.1-beta.5 → 0.0.1-beta.7

package/components/crudPage/KCrudPage.tsx

@@ -0,0 +1,149 @@
+/**
+ * @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 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);
+        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' ? (
+            <select
+              class="k-crud-page-filter-control"
+              value={(filters[f.param] as string) ?? ''}
+              onChange={(e: Event) => {
+                filters[f.param] = (e.target as HTMLSelectElement).value || undefined;
+              }}
+            >
+              <option value="">{f.placeholder ?? `全部`}</option>
+              {f.options?.map(opt => (
+                <option key={String(opt.value)} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          ) : (
+            <input
+              class="k-crud-page-filter-control"
+              type="text"
+              placeholder={f.placeholder ?? `请输入${f.label}`}
+              value={(filters[f.param] as string) ?? ''}
+              onInput={(e: Event) => {
+                filters[f.param] = (e.target as HTMLInputElement).value || 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,48 @@
+/**
+ * @description KCrudPage 样式
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ */
+
+/* ===== 根容器 ===== */
+.k-crud-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 12px;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+/* ===== 筛选项 ===== */
+.k-crud-page-filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 140px;
+}
+
+.k-crud-page-filter-label {
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-secondary);
+  line-height: 1;
+}
+
+.k-crud-page-filter-control {
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: var(--kine-radius-sm);
+  font-size: var(--kine-font-size-lg);
+  font-family: var(--kine-font-family-system);
+  background: var(--kine-color-bg-primary);
+  color: var(--kine-color-text-primary);
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-crud-page-filter-control:focus {
+  border-color: var(--kine-color-accent-default);
+}

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/composables/page/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @description CrudPage composable barrel export
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export { useCrudPage } from './useCrudPage';
+export type { CrudPageConfig, CrudColumnConfig, CrudFilterConfig, StatusMapItem } from './types';

package/composables/page/types.ts

@@ -0,0 +1,58 @@
+/**
+ * @description CrudPage 配置驱动页面类型定义
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/** 列配置 */
+export interface CrudColumnConfig {
+  /** 字段名，对应数据对象的 key */
+  param: string;
+  /** 列标题 */
+  label: string;
+  /** 列宽 */
+  width?: string;
+  /** 列类型，影响渲染方式 */
+  type?: 'text' | 'status' | 'date' | 'datetime';
+}
+
+/** 筛选项配置 */
+export interface CrudFilterConfig {
+  /** 字段名，作为请求参数的 key */
+  param: string;
+  /** 筛选项标签 */
+  label: string;
+  /** 筛选项类型 */
+  type: 'input' | 'select';
+  /** select 类型的选项列表 */
+  options?: { label: string; value: string | number }[];
+  /** 占位文本 */
+  placeholder?: string;
+}
+
+/** 状态映射：字段值 → KTag 的 label + type */
+export type StatusMapItem = {
+  label: string;
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+};
+
+/** CrudPage 完整配置 */
+export interface CrudPageConfig {
+  /** 页面标题 */
+  title: string;
+  /** API 路径（基于 createRequest 的 baseURL） */
+  api: string;
+  /** 列定义 */
+  columns: CrudColumnConfig[];
+  /** 筛选项定义，为空则不显示搜索区 */
+  filters?: CrudFilterConfig[];
+  /** 状态字段的值 → 显示文本 + 标签颜色 映射 */
+  statusMap?: Record<string, StatusMapItem>;
+  /** 每页条数，默认 20 */
+  pageSize?: number;
+  /** 行主键字段，默认 'id' */
+  rowKey?: string;
+}

package/composables/page/useCrudPage.ts

@@ -0,0 +1,88 @@
+/**
+ * @description CrudPage composable — 配置驱动的列表页数据层
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRequestClient } from '../../setup';
+import type { CrudPageConfig } from './types';
+
+export function useCrudPage(config: CrudPageConfig) {
+  const client = useRequestClient();
+
+  const page = ref(1);
+  const pageSize = ref(config.pageSize ?? 20);
+  const total = ref(0);
+  const list = ref<Record<string, unknown>[]>([]);
+  const loading = ref(false);
+
+  // 筛选表单状态
+  const filters = reactive<Record<string, unknown>>({});
+  if (config.filters) {
+    for (const f of config.filters) {
+      filters[f.param] = undefined;
+    }
+  }
+
+  const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
+
+  async function fetchData() {
+    loading.value = true;
+    try {
+      const params: Record<string, unknown> = {
+        page: page.value,
+        pageSize: pageSize.value,
+      };
+      for (const [k, v] of Object.entries(filters)) {
+        if (v !== undefined && v !== '' && v !== null) {
+          params[k] = v;
+        }
+      }
+      const res = await client.get<any>(config.api, params);
+      // 兼容包装格式 { success, data: { total, list } } 和裸格式 { total, list }
+      const payload = (res && typeof res === 'object' && 'success' in res) ? res.data : res;
+      list.value = payload?.items ?? payload?.list ?? [];
+      total.value = payload?.total ?? 0;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function onPageChange(p: number) {
+    page.value = p;
+    fetchData();
+  }
+
+  function onSearch() {
+    page.value = 1;
+    fetchData();
+  }
+
+  function onReset() {
+    for (const key of Object.keys(filters)) {
+      filters[key] = undefined;
+    }
+    page.value = 1;
+    fetchData();
+  }
+
+  onMounted(fetchData);
+
+  return {
+    page,
+    pageSize,
+    total,
+    totalPages,
+    list,
+    loading,
+    filters,
+    fetchData,
+    onPageChange,
+    onSearch,
+    onReset,
+  };
+}

package/dist/components/crudPage/KCrudPage.d.ts

@@ -0,0 +1,14 @@
+import { PropType } from 'vue';
+import { CrudPageConfig } from '../../composables/page/types';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<CrudPageConfig>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<CrudPageConfig>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/crudPage/index.d.ts

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

package/dist/composables/page/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description CrudPage composable barrel export
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { useCrudPage } from './useCrudPage';
+export type { CrudPageConfig, CrudColumnConfig, CrudFilterConfig, StatusMapItem } from './types';

package/dist/composables/page/types.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @description CrudPage 配置驱动页面类型定义
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+/** 列配置 */
+export interface CrudColumnConfig {
+    /** 字段名，对应数据对象的 key */
+    param: string;
+    /** 列标题 */
+    label: string;
+    /** 列宽 */
+    width?: string;
+    /** 列类型，影响渲染方式 */
+    type?: 'text' | 'status' | 'date' | 'datetime';
+}
+/** 筛选项配置 */
+export interface CrudFilterConfig {
+    /** 字段名，作为请求参数的 key */
+    param: string;
+    /** 筛选项标签 */
+    label: string;
+    /** 筛选项类型 */
+    type: 'input' | 'select';
+    /** select 类型的选项列表 */
+    options?: {
+        label: string;
+        value: string | number;
+    }[];
+    /** 占位文本 */
+    placeholder?: string;
+}
+/** 状态映射：字段值 → KTag 的 label + type */
+export type StatusMapItem = {
+    label: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+};
+/** CrudPage 完整配置 */
+export interface CrudPageConfig {
+    /** 页面标题 */
+    title: string;
+    /** API 路径（基于 createRequest 的 baseURL） */
+    api: string;
+    /** 列定义 */
+    columns: CrudColumnConfig[];
+    /** 筛选项定义，为空则不显示搜索区 */
+    filters?: CrudFilterConfig[];
+    /** 状态字段的值 → 显示文本 + 标签颜色 映射 */
+    statusMap?: Record<string, StatusMapItem>;
+    /** 每页条数，默认 20 */
+    pageSize?: number;
+    /** 行主键字段，默认 'id' */
+    rowKey?: string;
+}

package/dist/composables/page/useCrudPage.d.ts

@@ -0,0 +1,14 @@
+import { CrudPageConfig } from './types';
+export declare function useCrudPage(config: CrudPageConfig): {
+    page: import('vue').Ref<number, number>;
+    pageSize: import('vue').Ref<number, number>;
+    total: import('vue').Ref<number, number>;
+    totalPages: import('vue').ComputedRef<number>;
+    list: import('vue').Ref<Record<string, unknown>[], Record<string, unknown>[]>;
+    loading: import('vue').Ref<boolean, boolean>;
+    filters: Record<string, unknown>;
+    fetchData: () => Promise<void>;
+    onPageChange: (p: number) => void;
+    onSearch: () => void;
+    onReset: () => void;
+};