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

package/components/editableTable/editableTable.css

@@ -0,0 +1,268 @@
+/**
+ * @description KEditableTable 样式 — 对标 AIDesigner 设计规范
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 设计要点：
+ * - 编辑行：左侧 3px 靛蓝竖线
+ * - 删除行：红色文字 + 删线 + 内联确认
+ * - 新增行：底部空行带 placeholder
+ * - 汇总行：加粗金额
+ */
+
+.k-editable-table {
+  width: 100%;
+}
+
+/* ── 标题栏 ──────────────────────────── */
+
+.k-et-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 var(--kine-spacing-6);
+}
+
+.k-et-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+}
+
+.k-et-title {
+  font-size: var(--kine-font-size-xl);
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-primary, #111827);
+}
+
+.k-et-count {
+  font-size: var(--kine-font-size-sm);
+  padding: 1px 7px;
+  border-radius: 100px;
+  background: var(--kine-color-bg-inset, #f3f4f6);
+  color: var(--kine-color-text-secondary, #6b7280);
+  font-weight: var(--kine-font-weight-medium);
+}
+
+.k-et-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+}
+
+/* ── 表格 ──────────────────────────── */
+
+.k-et-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.k-et-thead {
+  border-bottom: 1px solid var(--kine-color-border-default, #e5e7eb);
+}
+
+.k-et-th {
+  padding: var(--kine-spacing-4) var(--kine-spacing-6);
+  font-size: var(--kine-font-size-sm);
+  font-weight: var(--kine-font-weight-medium);
+  color: var(--kine-color-text-muted, #9ca3af);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.k-et-th-index {
+  width: 40px;
+}
+
+.k-et-th-actions {
+  width: 70px;
+}
+
+.k-et-td {
+  padding: var(--kine-spacing-5) var(--kine-spacing-6);
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-primary, #111827);
+  border-bottom: 1px solid var(--kine-color-border-subtle, #f3f4f6);
+  vertical-align: middle;
+}
+
+.k-et-td-index {
+  color: var(--kine-color-text-muted, #9ca3af);
+  font-size: var(--kine-font-size-md);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 对齐 */
+.k-et-align-center { text-align: center; }
+.k-et-align-right { text-align: right; }
+
+/* 行 hover */
+.k-et-tr {
+  transition: background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-et-tr:hover {
+  background: var(--kine-color-bg-hover, rgba(0, 0, 0, 0.02));
+}
+
+/* ── 编辑行 ──────────────────────────── */
+
+.k-et-tr--editing {
+  background: rgba(79, 70, 229, 0.02);
+  border-left: 3px solid var(--kine-color-accent-default, #4f46e5);
+}
+
+.k-et-tr--editing:hover {
+  background: rgba(79, 70, 229, 0.03);
+}
+
+.k-et-tr--editing .k-et-td:first-child {
+  padding-left: var(--kine-spacing-4); /* ~8px，视觉上约等于 12 - 3px border */
+}
+
+/* 行内编辑态 KInput / KSelect 包裹容器，宽度撑满单元格 */
+.k-et-input-wrap,
+.k-et-select-wrap {
+  width: 100%;
+}
+
+.k-et-cell-readonly {
+  color: var(--kine-color-text-muted, #9ca3af);
+}
+
+/* ── 删除确认行 ──────────────────────────── */
+
+.k-et-tr--deleting {
+  background: rgba(220, 38, 38, 0.02);
+}
+
+.k-et-tr--deleting:hover {
+  background: rgba(220, 38, 38, 0.03);
+}
+
+.k-et-delete-confirm {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-6);
+  font-size: var(--kine-font-size-lg);
+}
+
+.k-et-deleted-text {
+  color: var(--kine-color-semantic-error, #dc2626);
+  text-decoration: line-through;
+}
+
+.k-et-delete-ask {
+  color: var(--kine-color-semantic-error, #dc2626);
+  font-size: var(--kine-font-size-md);
+}
+
+/* ── 操作图标列 ──────────────────────────── */
+
+.k-et-td-actions {
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* ── 汇总行 ──────────────────────────── */
+
+.k-et-tfoot {
+  border-top: 1px solid var(--kine-color-border-default, #e5e7eb);
+}
+
+.k-et-tr--summary {
+  background: transparent;
+}
+
+.k-et-tr--summary:hover {
+  background: transparent;
+}
+
+.k-et-td-summary {
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-primary, #111827);
+  font-size: var(--kine-font-size-lg);
+}
+
+.k-et-summary-value {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+
+/* ── 空态 ──────────────────────────── */
+
+.k-et-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kine-spacing-6);
+  padding: var(--kine-spacing-24) var(--kine-spacing-12);
+}
+
+.k-et-empty-text {
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-muted, #9ca3af);
+}
+
+/* ================================================================
+   Dark Mode
+   ================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  .k-et-thead {
+    border-bottom-color: var(--kine-color-border-default, #2e2e3e);
+  }
+
+  .k-et-td {
+    color: var(--kine-color-text-primary, #e5e5e5);
+    border-bottom-color: var(--kine-color-border-subtle, #252535);
+  }
+
+  .k-et-tr:hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .k-et-tr--editing {
+    background: rgba(79, 70, 229, 0.06);
+  }
+
+  .k-et-tfoot {
+    border-top-color: var(--kine-color-border-default, #2e2e3e);
+  }
+
+  .k-et-td-summary {
+    color: var(--kine-color-text-primary, #e5e5e5);
+  }
+
+  .k-et-icon-btn:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  .k-et-count {
+    background: var(--kine-color-bg-inset, #252535);
+  }
+}
+
+.dark .k-et-thead,
+[data-theme="dark"] .k-et-thead {
+  border-bottom-color: var(--kine-color-border-default, #2e2e3e);
+}
+
+.dark .k-et-td,
+[data-theme="dark"] .k-et-td {
+  color: var(--kine-color-text-primary, #e5e5e5);
+  border-bottom-color: var(--kine-color-border-subtle, #252535);
+}
+
+.dark .k-et-tfoot,
+[data-theme="dark"] .k-et-tfoot {
+  border-top-color: var(--kine-color-border-default, #2e2e3e);
+}
+
+.dark .k-et-td-summary,
+[data-theme="dark"] .k-et-td-summary {
+  color: var(--kine-color-text-primary, #e5e5e5);
+}

package/components/editableTable/index.ts

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

package/components/formPage/KApprovalDialog.tsx

@@ -0,0 +1,142 @@
+/**
+ * @description KApprovalDialog — 审批操作弹窗（提交/通过/驳回）
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 配置驱动，传入 type 自动切换视觉风格：
+ * - submit: 靛蓝确认按钮
+ * - approve: 绿色确认按钮
+ * - reject: 红色确认按钮，备注必填
+ */
+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 './formPage.css';
+
+export type ApprovalType = 'submit' | 'approve' | 'reject';
+
+const CONFIG = {
+  submit: {
+    title: '提交审批',
+    confirmText: '确认提交',
+    btnType: 'primary' as const,
+  },
+  approve: {
+    title: '审批通过',
+    confirmText: '确认通过',
+    btnType: 'success' as const,
+  },
+  reject: {
+    title: '驳回申请',
+    confirmText: '确认驳回',
+    btnType: 'danger' as const,
+  },
+} as const;
+
+export default defineComponent({
+  name: 'KApprovalDialog',
+  props: {
+    /** 弹窗是否可见 */
+    visible: { type: Boolean, default: false },
+    /** 审批类型 */
+    type: { type: String as PropType<ApprovalType>, default: 'submit' },
+    /** 自定义标题，不传则使用默认 */
+    title: { type: String, default: '' },
+    /** 描述文字 */
+    description: { type: String, default: '' },
+    /** 摘要信息，如 "PO-2024-0087 | 供应商: 三星纺织 | ¥156,200" */
+    summary: { type: String, default: '' },
+    /** 备注输入框占位文本 */
+    remarkPlaceholder: { type: String, default: '' },
+    /** 备注是否必填（reject 默认必填） */
+    remarkRequired: { type: Boolean, default: undefined },
+    /** 确认中加载态 */
+    loading: { type: Boolean, default: false },
+  },
+  emits: ['update:visible', 'confirm', 'cancel'],
+  setup(props, { emit, slots }) {
+    const remark = ref('');
+
+    const close = () => {
+      emit('update:visible', false);
+      emit('cancel');
+    };
+
+    const confirm = () => {
+      emit('confirm', { remark: remark.value });
+    };
+
+    const isRemarkRequired = () => {
+      if (props.remarkRequired !== undefined) return props.remarkRequired;
+      return props.type === 'reject';
+    };
+
+    const canConfirm = () => {
+      if (isRemarkRequired() && !remark.value.trim()) return false;
+      return !props.loading;
+    };
+
+    return () => {
+      if (!props.visible) return null;
+
+      const cfg = CONFIG[props.type];
+      const displayTitle = props.title || cfg.title;
+      const placeholder = props.remarkPlaceholder
+        || (props.type === 'reject' ? '请输入驳回原因...' : '添加备注（可选）...');
+
+      return (
+        <div class="k-approval-overlay" onClick={close}>
+          <div class="k-approval-dialog" onClick={(e: Event) => e.stopPropagation()}>
+            {/* 头部 */}
+            <div class="k-approval-dialog-header">
+              <span class="k-approval-dialog-title">{displayTitle}</span>
+              <KButton plain text="×" onClick={close} />
+            </div>
+
+            {/* 内容 */}
+            <div class="k-approval-dialog-body">
+              {slots.default?.()}
+
+              {props.summary && (
+                <div class="k-approval-dialog-summary">{props.summary}</div>
+              )}
+
+              {props.description && (
+                <p class="k-approval-dialog-desc">{props.description}</p>
+              )}
+
+              <KInput
+                type="textarea"
+                class={[
+                  'k-approval-dialog-remark',
+                  isRemarkRequired() && 'k-approval-dialog-remark--required',
+                ].filter(Boolean)}
+                placeholder={placeholder}
+                modelValue={remark.value}
+                onUpdate:modelValue={(v: string) => { remark.value = v; }}
+              />
+              {isRemarkRequired() && (
+                <span class="k-approval-dialog-required-hint">* 必填</span>
+              )}
+            </div>
+
+            {/* 底部 */}
+            <div class="k-approval-dialog-footer">
+              <KButton text="取消" onClick={close} />
+              <KButton
+                type={cfg.btnType}
+                text={props.loading ? '处理中...' : cfg.confirmText}
+                disabled={!canConfirm()}
+                loading={props.loading}
+                onClick={confirm}
+              />
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/components/formPage/KFormCard.tsx

@@ -0,0 +1,65 @@
+/**
+ * @description KFormCard — 表单区块卡片容器，带标题和可选折叠
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 用于 SimpleFormPage / MasterDetailFormPage 中的分区展示。
+ * 提供标题、副标题、右侧操作区 slot、可折叠能力。
+ */
+import { defineComponent, ref } from 'vue';
+import './formPage.css';
+
+export default defineComponent({
+  name: 'KFormCard',
+  props: {
+    /** 区块标题 */
+    title: { type: String, default: '' },
+    /** 副标题 */
+    subtitle: { type: String, default: '' },
+    /** 是否可折叠 */
+    collapsible: { type: Boolean, default: false },
+    /** 初始是否折叠 */
+    defaultCollapsed: { type: Boolean, default: false },
+  },
+  setup(props, { slots }) {
+    const collapsed = ref(props.defaultCollapsed);
+
+    const toggle = () => {
+      if (props.collapsible) {
+        collapsed.value = !collapsed.value;
+      }
+    };
+
+    return () => (
+      <div class={['k-form-card', collapsed.value && 'k-form-card--collapsed']}>
+        {(props.title || slots.header) && (
+          <div
+            class={['k-form-card-header', props.collapsible && 'k-form-card-header--clickable']}
+            onClick={toggle}
+          >
+            <div class="k-form-card-header-left">
+              {props.title && <h3 class="k-form-card-title">{props.title}</h3>}
+              {props.subtitle && <span class="k-form-card-subtitle">{props.subtitle}</span>}
+            </div>
+            <div class="k-form-card-header-right">
+              {slots.extra?.()}
+              {props.collapsible && (
+                <span class={['k-form-card-collapse-icon', collapsed.value && 'k-form-card-collapse-icon--collapsed']}>
+                  ‹
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+        {!collapsed.value && (
+          <div class="k-form-card-body">
+            {slots.default?.()}
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/components/formPage/KFormPage.tsx

@@ -0,0 +1,128 @@
+/**
+ * @description KFormPage — 配置驱动的简单表单页组件
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 一个配置出一整个表单页：页头 + 字段网格 + 校验 + 底部操作栏。
+ * 业务页面只需 <KFormPage :config="config" /> 即可。
+ */
+import { defineComponent, type PropType } from 'vue';
+import { useFormPage, renderFormField } from '../../composables/form';
+import type { FormPageConfig } from '../../composables/form/types';
+import KFormCard from './KFormCard';
+import KStickyActionBar from './KStickyActionBar';
+import KButton from 'kine-ui/components/button/KButton.tsx';
+import './formPage.css';
+
+export default defineComponent({
+  name: 'KFormPage',
+  props: {
+    config: { type: Object as PropType<FormPageConfig>, required: true },
+  },
+  setup(props, { slots }) {
+    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 ?? 2;
+
+    // ── 渲染 ──────────────────────────────────────
+
+    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-wrapper">
+          <div class="k-form-page">
+            {/* 页头 */}
+            <div class="k-fp-header">
+              <div class="k-fp-header-left">
+                <KButton text="←" onClick={goBack} />
+                <h1 class="k-fp-title">{title}</h1>
+              </div>
+              <div class="k-fp-header-right">
+                {slots.headerExtra?.()}
+              </div>
+            </div>
+
+            {/* 表单 */}
+            <KFormCard>
+              {slots.beforeFields?.({ formData })}
+
+              <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>
+
+              {slots.afterFields?.({ formData })}
+            </KFormCard>
+
+            {slots.default?.({ formData })}
+          </div>
+
+          {/* 底部操作栏 — 在 max-width 容器外，撑满内容区 */}
+          <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>
+      );
+    };
+  },
+});