@kine-design/crud 0.0.1-beta.14 → 0.0.1-beta.16

package/components/crudPage/KCrudPage.tsx

@@ -67,7 +67,19 @@ export default defineComponent({
         case 'date': return formatDate(val);
         case 'datetime': return formatDateTime(val);
         case 'image': {
-          if (!val) return '';
+          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;

package/components/crudPage/crudPage.css

@@ -34,3 +34,31 @@
   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/editableTable/KEditableTable.tsx

@@ -2,16 +2,14 @@
  * @description KEditableTable — 可编辑行表格组件
  * @author 阿怪
  * @date 2026/3/22
- * @version v0.0.1
+ * @version v0.1.0
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  *
- * 支持行内编辑、添加行、删除行、汇总行。
- * 设计参考 AIDesigner 的 EditableDataTable 规范：
- * - 正常行：纯展示
- * - 编辑行：左侧靛蓝竖线，cell 变为 input
- * - 删除确认行：红色高亮 + 内联确认
- * - 新增行：底部空行带搜索输入
+ * 所有行永远可编辑，不区分查看/编辑态。
+ * - 每个 cell 直接渲染为 input
+ * - 删除：内联确认
+ * - 新增：底部按钮
  * - 汇总行：底部加粗合计
  */
 import { defineComponent, ref, type PropType } from 'vue';
@@ -31,7 +29,7 @@ export interface EditableColumn {
   label: string;
   /** 列宽 */
   width?: string;
-  /** 编辑态下的输入类型 */
+  /** 输入类型 */
   editType?: 'text' | 'number' | 'select' | 'search' | 'readonly';
   /** select 类型的选项 */
   options?: Array<{ label: string; value: string | number }>;
@@ -78,43 +76,22 @@ export default defineComponent({
     /** 币种前缀（用于金额汇总展示） */
     currencyPrefix: { type: String, default: '' },
   },
-  emits: ['update:modelValue', 'add', 'edit', 'save', 'cancel', 'remove'],
+  emits: ['update:modelValue', 'add', '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 updateCell = (rowIdx: number, param: string, value: unknown) => {
       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 = {};
+      rows[rowIdx] = { ...rows[rowIdx], [param]: value };
+      emit('update:modelValue', rows);
     };
 
-    const cancelEdit = () => {
-      editingId.value = null;
-      editingData.value = {};
-      emit('cancel');
-    };
+    // ── 删除 ────────────────────────────────────────
 
     const startDelete = (row: EditableTableRow) => {
       deletingId.value = row._id;
-      editingId.value = null;
     };
 
     const confirmDelete = () => {
@@ -145,37 +122,30 @@ export default defineComponent({
       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 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>;
+        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={editingData.value[col.param]}
+            modelValue={row[col.param]}
             options={col.options}
             optionParam="label"
             valueParam="value"
-            onUpdate:modelValue={(v: unknown) => { editingData.value[col.param] = v; }}
+            onUpdate:modelValue={(v: unknown) => updateCell(rowIdx, col.param, v)}
           />
         );
       }
@@ -184,8 +154,8 @@ export default defineComponent({
         <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; }}
+          modelValue={row[col.param] as string | number}
+          onUpdate:modelValue={(v: string) => updateCell(rowIdx, col.param, v)}
         />
       );
     };
@@ -233,58 +203,34 @@ export default defineComponent({
 
             <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} />
+                          <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>
                   );
                 }
 
-                // 编辑行
-                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">
+                  <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)}
+                        {renderCell(col, row, i)}
                       </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>
                     )}

package/components/formPage/formPage.css

@@ -585,3 +585,45 @@
   color: var(--kine-color-text-primary, #e5e5e5);
 }
 
+/* ================================================================
+   移动端（<768px）
+   ================================================================ */
+
+@media (max-width: 767px) {
+  .k-form-page {
+    padding: 0 0 var(--kine-spacing-6);
+  }
+
+  /* 多列网格在移动端强制单列 */
+  .k-fp-grid--2,
+  .k-fp-grid--3 {
+    grid-template-columns: 1fr;
+  }
+
+  /* 跨列字段在单列模式下不需要 span */
+  .k-fp-field[style*="grid-column"] {
+    grid-column: span 1 !important;
+  }
+
+  .k-form-card-body {
+    padding: var(--kine-spacing-6);
+  }
+
+  .k-form-card-header {
+    padding: var(--kine-spacing-6) var(--kine-spacing-6);
+  }
+
+  .k-fp-header {
+    margin-bottom: var(--kine-spacing-6);
+  }
+
+  .k-sticky-action-bar {
+    padding: var(--kine-spacing-4) var(--kine-spacing-6);
+    margin: 0 calc(-1 * var(--kine-spacing-6)) calc(-1 * var(--kine-spacing-6));
+  }
+
+  .k-approval-dialog {
+    width: calc(100vw - 32px);
+  }
+}
+

package/components/layout/KHeader.tsx

@@ -6,13 +6,21 @@
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
+import { LAYOUT_TOGGLE_DRAWER_KEY } from './KLayout';
 
 export default defineComponent({
   name: 'KHeader',
   setup(_, ctx) {
+    const toggleDrawer = inject(LAYOUT_TOGGLE_DRAWER_KEY, () => {});
+
     return () => (
       <header class="k-crud-header">
+        {/* 汉堡按钮（移动端可见，桌面端 CSS 隐藏） */}
+        <button class="k-crud-header-hamburger" onClick={toggleDrawer}>
+          <span class="k-crud-header-hamburger-icon" />
+        </button>
+
         {/* 左侧/默认内容区（面包屑等） */}
         <div class="k-crud-header-main">
           {ctx.slots.default?.()}

package/components/layout/KLayout.tsx

@@ -13,6 +13,8 @@ export const LAYOUT_COLLAPSED_KEY: InjectionKey<Ref<boolean>> = Symbol('kCrudLay
 export const LAYOUT_TOGGLE_KEY: InjectionKey<() => void> = Symbol('kCrudLayoutToggle');
 export const LAYOUT_SIDER_WIDTH_KEY: InjectionKey<string> = Symbol('kCrudLayoutSiderWidth');
 export const LAYOUT_COLLAPSED_WIDTH_KEY: InjectionKey<string> = Symbol('kCrudLayoutCollapsedWidth');
+export const LAYOUT_DRAWER_OPEN_KEY: InjectionKey<Ref<boolean>> = Symbol('kCrudLayoutDrawerOpen');
+export const LAYOUT_TOGGLE_DRAWER_KEY: InjectionKey<() => void> = Symbol('kCrudLayoutToggleDrawer');
 
 export default defineComponent({
   name: 'KLayout',
@@ -54,14 +56,25 @@ export default defineComponent({
       ctx.emit('update:collapsed', next);
     };
 
+    // 移动端抽屉开关状态
+    const drawerOpen = ref(false);
+    const toggleDrawer = () => { drawerOpen.value = !drawerOpen.value; };
+
     // 向子组件提供折叠状态、切换方法和宽度配置
     provide(LAYOUT_COLLAPSED_KEY, innerCollapsed);
     provide(LAYOUT_TOGGLE_KEY, toggleCollapsed);
     provide(LAYOUT_SIDER_WIDTH_KEY, props.siderWidth);
     provide(LAYOUT_COLLAPSED_WIDTH_KEY, props.collapsedWidth);
+    provide(LAYOUT_DRAWER_OPEN_KEY, drawerOpen);
+    provide(LAYOUT_TOGGLE_DRAWER_KEY, toggleDrawer);
 
     return () => (
       <div class="k-crud-layout">
+        {/* 移动端遮罩层，点击关闭抽屉 */}
+        <div
+          class={['k-crud-sider-overlay', drawerOpen.value && 'k-crud-sider-overlay--visible']}
+          onClick={toggleDrawer}
+        />
         {ctx.slots.default?.()}
       </div>
     );

package/components/layout/KSider.tsx

@@ -6,12 +6,13 @@
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
-import { computed, defineComponent, inject } from 'vue';
+import { computed, defineComponent, inject, ref } from 'vue';
 import {
   LAYOUT_COLLAPSED_KEY,
   LAYOUT_TOGGLE_KEY,
   LAYOUT_SIDER_WIDTH_KEY,
   LAYOUT_COLLAPSED_WIDTH_KEY,
+  LAYOUT_DRAWER_OPEN_KEY,
 } from './KLayout';
 
 export default defineComponent({
@@ -20,6 +21,7 @@ export default defineComponent({
     // 从 KLayout 注入折叠状态、切换方法和宽度配置
     const collapsed = inject(LAYOUT_COLLAPSED_KEY);
     const toggle = inject(LAYOUT_TOGGLE_KEY);
+    const drawerOpen = inject(LAYOUT_DRAWER_OPEN_KEY, ref(false));
     const siderWidth = inject(LAYOUT_SIDER_WIDTH_KEY, '240px');
     const collapsedWidth = inject(LAYOUT_COLLAPSED_WIDTH_KEY, '64px');
 
@@ -52,6 +54,7 @@ export default defineComponent({
         class={[
           'k-crud-sider',
           isCollapsed.value && 'k-crud-sider--collapsed',
+          drawerOpen.value && 'k-crud-sider--drawer-open',
         ]}
         style={{ width: currentWidth.value }}
       >

package/components/layout/layout.css

@@ -147,3 +147,116 @@
   padding: var(--kine-spacing-8);
   box-sizing: border-box;
 }
+
+/* ===== 遮罩层（桌面端隐藏） ===== */
+.k-crud-sider-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  transition: background 0.3s var(--kine-motion-easing-default);
+}
+
+.k-crud-sider-overlay--visible {
+  background: rgba(0, 0, 0, 0.45);
+  pointer-events: auto;
+}
+
+/* ===== 汉堡按钮 ===== */
+.k-crud-header-hamburger {
+  display: none; /* 桌面端隐藏 */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  margin-right: var(--kine-spacing-4);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--kine-spacing-2);
+  border-radius: var(--kine-radius-xs);
+  color: var(--kine-color-text-secondary);
+  transition: background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-crud-header-hamburger:hover {
+  background: var(--kine-color-bg-hover);
+  color: var(--kine-color-text-primary);
+}
+
+/* 三条横线图标 */
+.k-crud-header-hamburger-icon,
+.k-crud-header-hamburger-icon::before,
+.k-crud-header-hamburger-icon::after {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+}
+
+.k-crud-header-hamburger-icon {
+  position: relative;
+}
+
+.k-crud-header-hamburger-icon::before,
+.k-crud-header-hamburger-icon::after {
+  content: '';
+  position: absolute;
+  left: 0;
+}
+
+.k-crud-header-hamburger-icon::before { top: -5px; }
+.k-crud-header-hamburger-icon::after  { top: 5px; }
+
+/* ================================================================
+   移动端（<768px）
+   ================================================================ */
+
+@media (max-width: 767px) {
+  /* 汉堡按钮显示 */
+  .k-crud-header-hamburger {
+    display: flex;
+  }
+
+  /* 侧边栏变为 fixed 抽屉，默认隐藏 */
+  .k-crud-sider {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 240px !important; /* 覆盖 inline style */
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition:
+      transform 0.3s var(--kine-motion-easing-default),
+      box-shadow 0.3s var(--kine-motion-easing-default);
+    box-shadow: none;
+    border-right: none;
+  }
+
+  /* 抽屉打开 */
+  .k-crud-sider--drawer-open {
+    transform: translateX(0);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
+  }
+
+  /* 遮罩层 */
+  .k-crud-sider-overlay {
+    display: block;
+  }
+
+  /* 底部折叠 trigger 在移动端隐藏 */
+  .k-crud-sider-trigger {
+    display: none;
+  }
+
+  /* 内容区 padding 缩减 */
+  .k-crud-content {
+    padding: var(--kine-spacing-4);
+  }
+}

package/components/searchTable/searchTable.css

@@ -91,3 +91,31 @@
   flex-shrink: 0;
   padding: var(--kine-spacing-4) 0;
 }
+
+/* ================================================================
+   移动端（<768px）
+   ================================================================ */
+
+@media (max-width: 767px) {
+  /* 搜索区从横排改为纵排 */
+  .k-search-table-search {
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--kine-spacing-6);
+    gap: var(--kine-spacing-4);
+  }
+
+  .k-search-table-search-form {
+    flex-direction: column;
+  }
+
+  /* 搜索按钮区靠右 */
+  .k-search-table-search-actions {
+    justify-content: flex-end;
+  }
+
+  /* 表格区允许横向滚动 */
+  .k-search-table-body {
+    overflow-x: auto;
+  }
+}

package/composables/request/requestBuilder.ts

@@ -89,6 +89,20 @@ async function unwrapResponse<T>(
 ): Promise<T> {
   // HTTP 错误
   if (response.status < 200 || response.status >= 300) {
+    // 4xx：尝试解析 body，提取业务错误信息
+    if (response.status >= 400 && response.status < 500) {
+      const ct = response.headers['content-type'] ?? '';
+      if (ct.includes('application/json')) {
+        try {
+          const json = await response.json<WrappedResponse<unknown>>();
+          if (isWrappedResponse(json) && !json.success) {
+            throw new BusinessError(json.message || `请求失败（${response.status}）`);
+          }
+        } catch (e) {
+          if (e instanceof BusinessError) throw e;
+        }
+      }
+    }
     throw new NetworkRequestError({
       type: 'httpError',
       status: response.status,

package/dist/components/editableTable/KEditableTable.d.ts

@@ -6,7 +6,7 @@ export interface EditableColumn {
     label: string;
     /** 列宽 */
     width?: string;
-    /** 编辑态下的输入类型 */
+    /** 输入类型 */
     editType?: 'text' | 'number' | 'select' | 'search' | 'readonly';
     /** select 类型的选项 */
     options?: Array<{
@@ -77,7 +77,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add" | "update:modelValue" | "remove" | "cancel" | "edit" | "save")[], "add" | "update:modelValue" | "remove" | "cancel" | "edit" | "save", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add" | "update:modelValue" | "remove")[], "add" | "update:modelValue" | "remove", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 列定义 */
     columns: {
         type: PropType<EditableColumn[]>;
@@ -130,11 +130,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onCancel?: ((...args: any[]) => any) | undefined;
     onRemove?: ((...args: any[]) => any) | undefined;
     onAdd?: ((...args: any[]) => any) | undefined;
-    onEdit?: ((...args: any[]) => any) | undefined;
-    onSave?: ((...args: any[]) => any) | undefined;
 }>, {
     title: string;
     modelValue: EditableTableRow[];

package/dist/components/layout/KLayout.d.ts

@@ -3,6 +3,8 @@ export declare const LAYOUT_COLLAPSED_KEY: InjectionKey<Ref<boolean>>;
 export declare const LAYOUT_TOGGLE_KEY: InjectionKey<() => void>;
 export declare const LAYOUT_SIDER_WIDTH_KEY: InjectionKey<string>;
 export declare const LAYOUT_COLLAPSED_WIDTH_KEY: InjectionKey<string>;
+export declare const LAYOUT_DRAWER_OPEN_KEY: InjectionKey<Ref<boolean>>;
+export declare const LAYOUT_TOGGLE_DRAWER_KEY: InjectionKey<() => void>;
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     /** 受控模式：外部传入 collapsed 状态 */
     collapsed: {