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

package/components/formPage/KMasterDetailPage.tsx

@@ -0,0 +1,205 @@
+/**
+ * @description KMasterDetailPage — 配置驱动的主从表单页组件
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 主表字段区 + 多个可编辑子表 + 底部操作栏。
+ * 业务页面只需 <KMasterDetailPage :config="config" /> 即可。
+ */
+import { defineComponent, ref, type PropType } from 'vue';
+import { useRouter } from 'vue-router';
+import { useFormPage, renderFormField } from '../../composables/form';
+import type { MasterDetailPageConfig, DetailTableConfig } from '../../composables/form/types';
+import type { EditableTableRow } from '../editableTable';
+import KFormCard from './KFormCard';
+import KStickyActionBar from './KStickyActionBar';
+import { KEditableTable } from '../editableTable';
+import KButton from 'kine-ui/components/button/KButton.tsx';
+import './formPage.css';
+
+export default defineComponent({
+  name: 'KMasterDetailPage',
+  props: {
+    config: { type: Object as PropType<MasterDetailPageConfig>, required: true },
+  },
+  setup(props, { slots }) {
+    const router = useRouter();
+
+    const {
+      formData,
+      isEdit,
+      loading,
+      submitting,
+      errors,
+      validateField,
+      submit,
+      saveDraft,
+      goBack,
+    } = useFormPage({
+      api: props.config.api,
+      fields: props.config.fields,
+      rowKey: props.config.rowKey,
+      redirectPath: props.config.redirectPath,
+    });
+
+    const cols = props.config.columns ?? 3;
+
+    // 子表 ID 计数器（按子表分）
+    const idCounters = ref<Record<string, number>>({});
+
+    const getNextId = (param: string): number => {
+      if (!idCounters.value[param]) {
+        // 从现有数据中找最大 _id
+        const rows = (formData[param] as EditableTableRow[]) ?? [];
+        const maxId = rows.reduce((max, r) => Math.max(max, Number(r._id) || 0), 0);
+        idCounters.value[param] = maxId;
+      }
+      idCounters.value[param]++;
+      return idCounters.value[param];
+    };
+
+    const handleAddRow = (tableConfig: DetailTableConfig) => {
+      const rows = (formData[tableConfig.param] as EditableTableRow[]) ?? [];
+      const newRow: EditableTableRow = { _id: getNextId(tableConfig.param) };
+      for (const col of tableConfig.columns) {
+        newRow[col.param] = col.editType === 'number' ? 0 : '';
+      }
+      formData[tableConfig.param] = [...rows, newRow];
+    };
+
+    const handleUpdateRows = (param: string, newRows: EditableTableRow[]) => {
+      formData[param] = newRows;
+    };
+
+    // ── 渲染 ──────────────────────────────────────
+
+    return () => {
+      if (loading.value) {
+        return <div class="k-fp-loading">加载中...</div>;
+      }
+
+      const title = isEdit.value
+        ? `${props.config.title}`
+        : `新建${props.config.title}`;
+
+      return (
+        <div class="k-form-page k-master-detail-page">
+          {/* 页头 */}
+          <div class="k-fp-header">
+            <div class="k-fp-header-left">
+              {props.config.breadcrumb ? (
+                <div class="k-fp-breadcrumb">
+                  {props.config.breadcrumb.map((item, i) => (
+                    <>
+                      {i > 0 && <span class="k-fp-breadcrumb-sep">›</span>}
+                      {item.path
+                        ? <a class="k-fp-breadcrumb-link" onClick={() => router.push(item.path!)}>{item.label}</a>
+                        : <span class="k-fp-breadcrumb-text">{item.label}</span>
+                      }
+                    </>
+                  ))}
+                </div>
+              ) : (
+                <>
+                  <KButton text="←" onClick={goBack} />
+                  <h1 class="k-fp-title">{title}</h1>
+                </>
+              )}
+            </div>
+            <div class="k-fp-header-right">
+              {slots.headerExtra?.({ formData })}
+            </div>
+          </div>
+
+          {/* 主表字段区 */}
+          <KFormCard title="基本信息">
+            {{
+              default: () => (
+                <div class={`k-fp-grid k-fp-grid--${cols}`}>
+                  {props.config.fields.map(field => {
+                    const span = field.span === 'full' ? cols : (field.span ?? 1);
+                    return (
+                      <div
+                        key={field.param}
+                        class="k-fp-field"
+                        style={span > 1 ? { gridColumn: `span ${span}` } : undefined}
+                      >
+                        <label class="k-fp-label">
+                          {field.label}
+                          {field.required && <span class="k-fp-required">*</span>}
+                        </label>
+                        {renderFormField(field, formData, errors.value, validateField, slots)}
+                        {errors.value[field.param] && (
+                          <span class="k-fp-error">{errors.value[field.param]}</span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              ),
+            }}
+          </KFormCard>
+
+          {/* 子表区 */}
+          {props.config.detailTables.map(tableConfig => (
+            <KFormCard key={tableConfig.param}>
+              {{
+                default: () => {
+                  const tableSlot = slots[`table-${tableConfig.param}`];
+                  if (tableSlot) {
+                    return tableSlot({ formData, rows: formData[tableConfig.param] as EditableTableRow[] });
+                  }
+
+                  return (
+                    <KEditableTable
+                      modelValue={(formData[tableConfig.param] as EditableTableRow[]) ?? []}
+                      onUpdate:modelValue={(rows: EditableTableRow[]) => handleUpdateRows(tableConfig.param, rows)}
+                      columns={tableConfig.columns}
+                      title={tableConfig.title}
+                      showSummary={tableConfig.showSummary}
+                      summaryLabel={tableConfig.summaryLabel}
+                      currencyPrefix={tableConfig.currencyPrefix}
+                      addText={tableConfig.addText}
+                      onAdd={() => handleAddRow(tableConfig)}
+                    />
+                  );
+                },
+              }}
+            </KFormCard>
+          ))}
+
+          {/* 额外内容 */}
+          {slots.default?.({ formData })}
+
+          {/* 底部操作栏 */}
+          <KStickyActionBar>
+            {{
+              default: () => slots.actions?.({ formData, submit, saveDraft, submitting }) ?? (
+                <>
+                  <KButton text="取消" onClick={goBack} />
+                  {props.config.showDraft && (
+                    <KButton
+                      text="保存草稿"
+                      disabled={submitting.value}
+                      onClick={() => saveDraft()}
+                    />
+                  )}
+                  <KButton
+                    type="primary"
+                    text={submitting.value ? '保存中...' : (props.config.submitText ?? '提交')}
+                    disabled={submitting.value}
+                    loading={submitting.value}
+                    onClick={() => submit()}
+                  />
+                </>
+              ),
+            }}
+          </KStickyActionBar>
+        </div>
+      );
+    };
+  },
+});

package/components/formPage/KStickyActionBar.tsx

@@ -0,0 +1,33 @@
+/**
+ * @description KStickyActionBar — 底部固定操作栏
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 用于表单页底部的固定操作栏（保存草稿 / 提交 / 取消等按钮）。
+ * 始终固定在视口底部，带顶部分割线和背景模糊。
+ */
+import { defineComponent } from 'vue';
+import './formPage.css';
+
+export default defineComponent({
+  name: 'KStickyActionBar',
+  props: {
+    /** 左侧辅助信息，如"最后保存: 今天 14:23" */
+    hint: { type: String, default: '' },
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div class="k-sticky-action-bar">
+        <div class="k-sticky-action-bar-hint">
+          {slots.hint?.() ?? (props.hint && <span>{props.hint}</span>)}
+        </div>
+        <div class="k-sticky-action-bar-actions">
+          {slots.default?.()}
+        </div>
+      </div>
+    );
+  },
+});