@kine-design/crud 0.0.1-beta.15 → 0.0.1-beta.17

package/.vlaude/last-session-id

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

package/components/crudPage/crudPage.css

@@ -34,9 +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/auth/useAuth.ts

@@ -134,11 +134,24 @@ function buildAuthReturn(
     clearStorage();
   }
 
+  let restoring: Promise<void> | null = null;
+
   async function restore(): Promise<void> {
     if (!adapter) return;
+    // 防止并发调用（如 mount + tab 激活同时触发）
+    if (restoring) return restoring;
 
-    const storedToken = adapter.get<string>(STORAGE_KEY_TOKEN);
-    const storedUser = adapter.get<AuthState['user']>(STORAGE_KEY_USER);
+    restoring = doRestore();
+    try {
+      await restoring;
+    } finally {
+      restoring = null;
+    }
+  }
+
+  async function doRestore(): Promise<void> {
+    const storedToken = adapter!.get<string>(STORAGE_KEY_TOKEN);
+    const storedUser = adapter!.get<AuthState['user']>(STORAGE_KEY_USER);
 
     // storage 中没有有效数据，跳过
     if (!storedToken || !storedUser) return;
@@ -213,6 +226,13 @@ export function createAuth(app: App, options: AuthOptions): AuthReturn {
       }
     };
     window.addEventListener('storage', onStorageChange);
+
+    // app.unmount 时清理监听器，防止泄漏
+    const origUnmount = app.unmount.bind(app);
+    app.unmount = () => {
+      window.removeEventListener('storage', onStorageChange);
+      origUnmount();
+    };
   }
 
   // 将 auth 实例注入 Vue 组件树，同时挂载 onUnauthorized 回调供 authGuard 使用

package/composables/request/createRequest.ts

@@ -58,6 +58,7 @@ export function createRequest(options: RequestOptions = {}): RequestClient {
     getToken: options.getToken,
     onUnauthorized: options.onUnauthorized,
     responseInterceptor: options.responseInterceptor,
+    feedback: options.feedback,
     registerAbort: (controller: AbortController) => {
       abortControllers.add(controller);
       // 完成后自动移除

package/composables/request/requestBuilder.ts

@@ -11,10 +11,12 @@ import type {
   CachePolicy,
   ControlPolicy,
   Lifecycle,
+  NetworkError,
   RequestConfig,
   RequestMethod,
   RetryPolicy,
   Transport,
+  TransportResponse,
   WrappedResponse,
 } from './types';
 import { BusinessError, NetworkRequestError } from './types';
@@ -89,6 +91,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,
@@ -180,6 +196,8 @@ export interface RequestBuilderContext {
   getToken?: () => string | null | undefined;
   onUnauthorized?: () => void;
   responseInterceptor?: <T>(data: T) => T;
+  /** 用户反馈处理器（写操作成功后自动 showSuccess） */
+  feedback?: import('./types').UserFeedbackHandler;
   /** 注册 abort controller，供生命周期管理 */
   registerAbort?: (controller: AbortController) => void;
 }
@@ -344,6 +362,11 @@ export class RequestBuilder {
       // 响应拦截器
       const finalResult = responseInterceptor ? responseInterceptor(result) : result;
 
+      // 写操作成功后自动反馈
+      if (this.context.feedback && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(this.method)) {
+        this.context.feedback.showSuccess('操作成功');
+      }
+
       return finalResult as T;
     } catch (error) {
       // 401 检测
@@ -365,14 +388,23 @@ export class RequestBuilder {
     body: BodyInit | null,
     signal: AbortSignal,
   ): Promise<T> {
-    const response = await transport.send({
-      url,
-      method: this.method,
-      headers,
-      body,
-      signal,
-      timeout: this.config.timeout,
-    });
+    let response: TransportResponse;
+    try {
+      response = await transport.send({
+        url,
+        method: this.method,
+        headers,
+        body,
+        signal,
+        timeout: this.config.timeout,
+      });
+    } catch (error) {
+      // transport 层抛出的是 NetworkError 裸对象，统一包装为 NetworkRequestError
+      if (error && typeof error === 'object' && 'type' in error) {
+        throw new NetworkRequestError(error as NetworkError);
+      }
+      throw new NetworkRequestError({ type: 'unknown', error });
+    }
 
     return unwrapResponse<T>(response);
   }

package/composables/request/transport/xhrTransport.ts

@@ -72,7 +72,10 @@ export class XhrTransport implements Transport {
           headers,
           body: null,
           text: () => Promise.resolve(responseText),
-          json: <T>() => Promise.resolve(JSON.parse(responseText) as T),
+          json: <T>() => {
+            try { return Promise.resolve(JSON.parse(responseText) as T); }
+            catch (e) { return Promise.reject(e); }
+          },
           blob: () => Promise.resolve(new Blob([responseText])),
         };