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

package/components/formPage/formPage.css

@@ -0,0 +1,629 @@
+/**
+ * @description KFormCard + KStickyActionBar 样式
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ */
+
+/* ================================================================
+   KFormCard
+   ================================================================ */
+
+.k-form-card {
+  background: var(--kine-color-bg-tertiary, #fff);
+  border: 1px solid var(--kine-color-border-default, #e5e7eb);
+  border-radius: var(--kine-radius-md, 8px);
+  margin-bottom: var(--kine-spacing-8);
+}
+
+.k-form-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kine-spacing-8) var(--kine-spacing-10);
+  gap: var(--kine-spacing-6);
+  user-select: none;
+}
+
+.k-form-card-header--clickable {
+  cursor: pointer;
+}
+
+.k-form-card-header--clickable:hover {
+  background: var(--kine-color-bg-hover, rgba(0, 0, 0, 0.02));
+  border-radius: var(--kine-radius-md, 8px) var(--kine-radius-md, 8px) 0 0;
+}
+
+.k-form-card--collapsed .k-form-card-header--clickable:hover {
+  border-radius: var(--kine-radius-md, 8px);
+}
+
+.k-form-card-header-left {
+  display: flex;
+  align-items: baseline;
+  gap: var(--kine-spacing-4);
+  min-width: 0;
+}
+
+.k-form-card-title {
+  font-size: var(--kine-font-size-xl);
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-primary, #111827);
+  margin: 0;
+  white-space: nowrap;
+}
+
+.k-form-card-subtitle {
+  font-size: var(--kine-font-size-md);
+  color: var(--kine-color-text-muted, #9ca3af);
+}
+
+.k-form-card-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+  flex-shrink: 0;
+}
+
+.k-form-card-collapse-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--kine-font-size-2xl);
+  color: var(--kine-color-text-muted, #9ca3af);
+  transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  transform: rotate(-90deg);
+}
+
+.k-form-card-collapse-icon--collapsed {
+  transform: rotate(-180deg);
+}
+
+.k-form-card-body {
+  padding: var(--kine-spacing-10);
+}
+
+/* 有 header 时，body 顶部不需要额外间距（header 自带 padding-bottom） */
+.k-form-card-header + .k-form-card-body {
+  padding-top: 0;
+}
+
+/* ================================================================
+   KStickyActionBar
+   ================================================================ */
+
+.k-sticky-action-bar {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--kine-spacing-6) var(--kine-spacing-12);
+  background: var(--kine-color-bg-tertiary, #fff);
+  border-top: 1px solid var(--kine-color-border-default, #e5e7eb);
+  backdrop-filter: blur(8px);
+  margin: 0 calc(-1 * var(--kine-spacing-12)) calc(-1 * var(--kine-spacing-10));
+}
+
+.k-sticky-action-bar-hint {
+  font-size: var(--kine-font-size-md);
+  color: var(--kine-color-text-muted, #9ca3af);
+}
+
+.k-sticky-action-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+}
+
+/* ================================================================
+   KApprovalDialog
+   ================================================================ */
+
+.k-approval-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+}
+
+.k-approval-dialog {
+  width: 420px;
+  max-width: calc(100vw - 48px);
+  background: var(--kine-color-bg-tertiary, #fff);
+  border-radius: var(--kine-radius-lg, 12px);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.k-approval-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kine-spacing-10) var(--kine-spacing-12) 0;
+}
+
+.k-approval-dialog-title {
+  font-size: var(--kine-font-size-2xl);
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-primary, #111827);
+}
+
+.k-approval-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--kine-radius-sm, 6px);
+  background: transparent;
+  color: var(--kine-color-text-muted, #9ca3af);
+  font-size: 18px; /* 18px 无对应 token，保留 */
+  cursor: pointer;
+  transition: background var(--kine-motion-duration-fast) var(--kine-motion-easing-default), color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-approval-dialog-close:hover {
+  background: var(--kine-color-bg-hover, rgba(0, 0, 0, 0.04));
+  color: var(--kine-color-text-primary, #111827);
+}
+
+.k-approval-dialog-body {
+  padding: var(--kine-spacing-8) var(--kine-spacing-12);
+}
+
+.k-approval-dialog-summary {
+  padding: var(--kine-spacing-5) var(--kine-spacing-7);
+  background: var(--kine-color-bg-primary, #f8f9fb);
+  border-radius: var(--kine-radius-sm, 6px);
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-secondary, #6b7280);
+  margin-bottom: var(--kine-spacing-6);
+  font-variant-numeric: tabular-nums;
+}
+
+.k-approval-dialog-desc {
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-secondary, #6b7280);
+  line-height: 1.6;
+  margin: 0 0 var(--kine-spacing-6);
+}
+
+.k-approval-dialog-remark {
+  display: block;
+  width: 100%;
+  padding: var(--kine-spacing-5) var(--kine-spacing-6);
+  border: 1px solid var(--kine-color-border-default, #e5e7eb);
+  border-radius: var(--kine-radius-sm, 6px);
+  font-family: inherit;
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-primary, #111827);
+  resize: vertical;
+  min-height: 72px;
+  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default), box-shadow var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  box-sizing: border-box;
+}
+
+.k-approval-dialog-remark::placeholder {
+  color: var(--kine-color-text-muted, #9ca3af);
+}
+
+.k-approval-dialog-remark:focus {
+  outline: none;
+  border-color: var(--kine-color-accent-default, #4f46e5);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.06);
+}
+
+.k-approval-dialog-remark--required {
+  border-color: var(--kine-color-semantic-error, #dc2626);
+}
+
+.k-approval-dialog-remark--required:focus {
+  border-color: var(--kine-color-semantic-error, #dc2626);
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.06);
+}
+
+.k-approval-dialog-required-hint {
+  display: block;
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-semantic-error, #dc2626);
+  margin-top: var(--kine-spacing-2);
+}
+
+.k-approval-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kine-spacing-4);
+  padding: 0 var(--kine-spacing-12) var(--kine-spacing-10);
+}
+
+/* ================================================================
+   KFormPage / KMasterDetailPage — 表单页布局
+   ================================================================ */
+
+/* wrapper: 全宽容器，承载 sticky bar 出血 */
+.k-form-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.k-form-page {
+  max-width: 960px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 0 var(--kine-spacing-10);
+  flex: 1;
+}
+
+.k-master-detail-page {
+  max-width: 1120px;
+}
+
+/* 页头 */
+.k-fp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--kine-spacing-10);
+  gap: var(--kine-spacing-6);
+}
+
+.k-fp-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-5);
+  min-width: 0;
+}
+
+.k-fp-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+  flex-shrink: 0;
+}
+
+.k-fp-title {
+  font-size: var(--kine-font-size-3xl);
+  font-weight: 650;
+  color: var(--kine-color-text-primary, #111827);
+  margin: 0;
+  letter-spacing: -0.3px;
+}
+
+/* 面包屑 */
+.k-fp-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-2);
+  font-size: var(--kine-font-size-lg);
+}
+
+.k-fp-breadcrumb-sep {
+  color: var(--kine-color-text-muted, #9ca3af);
+  margin: 0 var(--kine-spacing-1);
+}
+
+.k-fp-breadcrumb-link {
+  color: var(--kine-color-text-secondary, #6b7280);
+  cursor: pointer;
+  text-decoration: none;
+  transition: color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-fp-breadcrumb-link:hover {
+  color: var(--kine-color-accent-default, #4f46e5);
+}
+
+.k-fp-breadcrumb-text {
+  color: var(--kine-color-text-primary, #111827);
+  font-weight: var(--kine-font-weight-medium);
+}
+
+/* 字段网格 */
+.k-fp-grid {
+  display: grid;
+  gap: var(--kine-spacing-8) var(--kine-spacing-10);
+}
+
+.k-fp-grid--1 { grid-template-columns: 1fr; }
+.k-fp-grid--2 { grid-template-columns: repeat(2, 1fr); }
+.k-fp-grid--3 { grid-template-columns: repeat(3, 1fr); }
+
+.k-fp-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-2);
+}
+
+.k-fp-label {
+  font-size: var(--kine-font-size-md);
+  font-weight: var(--kine-font-weight-medium);
+  color: var(--kine-color-text-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.k-fp-required {
+  color: var(--kine-color-semantic-error, #dc2626);
+  margin-left: var(--kine-spacing-1);
+}
+
+/* 输入框 */
+.k-fp-input {
+  height: 34px;
+  padding: 0 var(--kine-spacing-5);
+  border: 1px solid var(--kine-color-border-default, #e5e7eb);
+  border-radius: var(--kine-radius-sm, 6px);
+  font-size: var(--kine-font-size-lg);
+  font-family: inherit;
+  color: var(--kine-color-text-primary, #111827);
+  background: var(--kine-color-bg-tertiary, #fff);
+  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default), box-shadow var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.k-fp-input:focus {
+  outline: none;
+  border-color: var(--kine-color-accent-default, #4f46e5);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.06);
+}
+
+.k-fp-input::placeholder {
+  color: var(--kine-color-text-muted, #9ca3af);
+}
+
+.k-fp-input--error {
+  border-color: var(--kine-color-semantic-error, #dc2626);
+}
+
+.k-fp-input--error:focus {
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.06);
+}
+
+.k-fp-input--disabled {
+  background: var(--kine-color-bg-inset, #f3f4f6);
+  color: var(--kine-color-text-muted, #9ca3af);
+  cursor: not-allowed;
+}
+
+.k-fp-input--readonly {
+  background: transparent;
+  border-color: transparent;
+  padding-left: 0;
+}
+
+/* textarea */
+.k-fp-textarea {
+  height: auto;
+  min-height: 72px;
+  padding: var(--kine-spacing-4) var(--kine-spacing-5);
+  resize: vertical;
+}
+
+/* number input wrapper with prefix/suffix */
+.k-fp-input-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--kine-color-border-default, #e5e7eb);
+  border-radius: var(--kine-radius-sm, 6px);
+  overflow: hidden;
+  background: var(--kine-color-bg-tertiary, #fff);
+  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default), box-shadow var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-fp-input-wrapper:focus-within {
+  border-color: var(--kine-color-accent-default, #4f46e5);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.06);
+}
+
+.k-fp-input-wrapper .k-fp-input {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+}
+
+.k-fp-input-wrapper .k-fp-input:focus {
+  box-shadow: none;
+}
+
+.k-fp-input-prefix,
+.k-fp-input-suffix {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--kine-spacing-4);
+  font-size: var(--kine-font-size-md);
+  font-weight: var(--kine-font-weight-medium);
+  color: var(--kine-color-text-muted, #9ca3af);
+  background: var(--kine-color-bg-inset, #f3f4f6);
+  white-space: nowrap;
+  height: 32px;
+}
+
+/* switch */
+.k-fp-switch {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+}
+
+.k-fp-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.k-fp-switch-track {
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background: var(--kine-color-border-default, #d1d5db);
+  transition: background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  position: relative;
+}
+
+.k-fp-switch-track::after {
+  content: '';
+  position: absolute;
+  top: var(--kine-spacing-1);
+  left: var(--kine-spacing-1);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.k-fp-switch input:checked + .k-fp-switch-track {
+  background: var(--kine-color-accent-default, #4f46e5);
+}
+
+.k-fp-switch input:checked + .k-fp-switch-track::after {
+  transform: translateX(16px);
+}
+
+/* 错误提示 */
+.k-fp-error {
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-semantic-error, #dc2626);
+  margin-top: var(--kine-spacing-1);
+}
+
+/* 加载中 */
+.k-fp-loading {
+  padding: 64px var(--kine-spacing-12);
+  text-align: center;
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-muted, #9ca3af);
+}
+
+/* ================================================================
+   Dark Mode
+   ================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  .k-form-card {
+    background: var(--kine-color-bg-tertiary, #1e1e2e);
+    border-color: var(--kine-color-border-default, #2e2e3e);
+  }
+
+  .k-form-card-title {
+    color: var(--kine-color-text-primary, #e5e5e5);
+  }
+
+  .k-form-card-header--clickable:hover {
+    background: var(--kine-color-bg-hover, rgba(255, 255, 255, 0.04));
+  }
+
+  .k-sticky-action-bar {
+    background: var(--kine-color-bg-tertiary, #1e1e2e);
+    border-top-color: var(--kine-color-border-default, #2e2e3e);
+  }
+
+  .k-approval-overlay {
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  .k-approval-dialog {
+    background: var(--kine-color-bg-tertiary, #1e1e2e);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
+  }
+
+  .k-approval-dialog-title {
+    color: var(--kine-color-text-primary, #e5e5e5);
+  }
+
+  .k-approval-dialog-summary {
+    background: var(--kine-color-bg-primary, #161625);
+  }
+
+  .k-approval-dialog-remark {
+    background: var(--kine-color-bg-primary, #161625);
+    border-color: var(--kine-color-border-default, #2e2e3e);
+    color: var(--kine-color-text-primary, #e5e5e5);
+  }
+
+}
+
+/* 同时支持 class 切换暗色模式 */
+.dark .k-form-card,
+[data-theme="dark"] .k-form-card {
+  background: var(--kine-color-bg-tertiary, #1e1e2e);
+  border-color: var(--kine-color-border-default, #2e2e3e);
+}
+
+.dark .k-form-card-title,
+[data-theme="dark"] .k-form-card-title {
+  color: var(--kine-color-text-primary, #e5e5e5);
+}
+
+.dark .k-sticky-action-bar,
+[data-theme="dark"] .k-sticky-action-bar {
+  background: var(--kine-color-bg-tertiary, #1e1e2e);
+  border-top-color: var(--kine-color-border-default, #2e2e3e);
+}
+
+.dark .k-approval-dialog,
+[data-theme="dark"] .k-approval-dialog {
+  background: var(--kine-color-bg-tertiary, #1e1e2e);
+}
+
+.dark .k-approval-dialog-remark,
+[data-theme="dark"] .k-approval-dialog-remark {
+  background: var(--kine-color-bg-primary, #161625);
+  border-color: var(--kine-color-border-default, #2e2e3e);
+  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/formPage/index.ts

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

package/components/layout/KContent.tsx

@@ -0,0 +1,20 @@
+/**
+ * @description KContent 主内容区组件
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'KContent',
+  setup(_, ctx) {
+    return () => (
+      <main class="k-crud-content">
+        {ctx.slots.default?.()}
+      </main>
+    );
+  },
+});

package/components/layout/KHeader.tsx

@@ -0,0 +1,37 @@
+/**
+ * @description KHeader 顶部栏组件
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+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?.()}
+        </div>
+        {/* 右侧操作区（用户头像等） */}
+        {ctx.slots.extra && (
+          <div class="k-crud-header-extra">
+            {ctx.slots.extra()}
+          </div>
+        )}
+      </header>
+    );
+  },
+});