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

package/dist/crud.css

@@ -26,13 +26,13 @@
   color: var(--kine-color-text-primary);
   border-right: 1px solid var(--kine-color-border-default);
   /* 折叠/展开宽度过渡 */
-  transition: width 0.3s ease;
+  transition: width 0.3s var(--kine-motion-easing-default);
   will-change: width;
   box-sizing: border-box;
 }
 
 /* Logo 区域 */
-.k-crud-sider__logo {
+.k-crud-sider-logo {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -45,7 +45,7 @@
 }
 
 /* 菜单主体，占满剩余高度 */
-.k-crud-sider__body {
+.k-crud-sider-body {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -55,7 +55,7 @@
 }
 
 /* 折叠触发器（底部） */
-.k-crud-sider__trigger {
+.k-crud-sider-trigger {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -65,7 +65,7 @@
 }
 
 /* 默认折叠按钮 */
-.k-crud-sider__trigger-btn {
+.k-crud-sider-trigger-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -82,24 +82,24 @@
   padding: 0;
 }
 
-.k-crud-sider__trigger-btn:hover {
+.k-crud-sider-trigger-btn:hover {
   background-color: var(--kine-color-bg-hover);
   color: var(--kine-color-text-primary);
 }
 
 /* 折叠箭头图标：展开时朝左，折叠时朝右 */
-.k-crud-sider__trigger-icon {
+.k-crud-sider-trigger-icon {
   display: inline-flex;
   align-items: center;
-  font-size: 20px;
+  font-size: var(--kine-font-size-3xl);
   line-height: 1;
   font-style: normal;
-  transition: transform 0.3s ease;
+  transition: transform 0.3s var(--kine-motion-easing-default);
   /* 默认（展开态）：‹ 指向左侧，表示可以收起 */
   transform: rotate(0deg);
 }
 
-.k-crud-sider__trigger-icon--collapsed {
+.k-crud-sider-trigger-icon--collapsed {
   /* 折叠态：旋转 180deg，‹ 变成朝右，表示可以展开 */
   transform: rotate(180deg);
 }
@@ -112,13 +112,13 @@
   flex-shrink: 0;
   height: 56px;
   min-height: 56px;
-  padding: 0 16px;
+  padding: 0 var(--kine-spacing-8);
   box-sizing: border-box;
   background-color: var(--kine-color-bg-primary);
   border-bottom: 1px solid var(--kine-color-border-default);
 }
 
-.k-crud-header__main {
+.k-crud-header-main {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -126,12 +126,12 @@
   min-width: 0;
 }
 
-.k-crud-header__extra {
+.k-crud-header-extra {
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-shrink: 0;
-  gap: 8px;
+  gap: var(--kine-spacing-4);
 }
 
 /* ===== KContent ===== */
@@ -144,9 +144,122 @@
   overflow-y: auto;
   overflow-x: hidden;
   background-color: var(--kine-color-bg-primary);
-  padding: 16px;
+  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);
+  }
+}
 /**
  * @description kine-ui table 样式 — Phosphor 主题
  * @author 阿怪
@@ -179,9 +292,9 @@
 
 /* 表头单元格 */
 .k-th {
-  padding: 8px 12px;
+  padding: var(--kine-spacing-4) var(--kine-spacing-6);
   color: var(--kine-color-text-secondary);
-  font-weight: 500;
+  font-weight: var(--kine-font-weight-medium);
   font-size: var(--kine-font-size-sm);
   text-align: left;
   white-space: nowrap;
@@ -189,7 +302,7 @@
 
 /* 数据单元格 */
 .k-td {
-  padding: 8px 12px;
+  padding: var(--kine-spacing-4) var(--kine-spacing-6);
   border-bottom: 1px solid var(--kine-color-border-default);
   font-size: var(--kine-font-size-sm);
   color: var(--kine-color-text-primary);
@@ -211,7 +324,7 @@
 
 /* 空数据占位 */
 .k-table-empty th {
-  padding: 24px;
+  padding: var(--kine-spacing-12);
   text-align: center;
   color: var(--kine-color-text-muted);
   font-size: var(--kine-font-size-sm);
@@ -246,6 +359,16 @@
 @keyframes k-table-spin {
   to { transform: rotate(360deg); }
 }
+
+/* ================================================================
+   移动端（<768px）— 表格横向滚动保护
+   ================================================================ */
+
+@media (max-width: 767px) {
+  .k-table-inner {
+    min-width: 600px;
+  }
+}
 /**
  * @description kine-ui pagination 样式 — Phosphor 主题
  * @author 阿怪
@@ -259,7 +382,7 @@
   font-family: var(--kine-font-family-mono);
   font-size: var(--kine-font-size-md);
   color: var(--kine-color-text-secondary);
-  gap: 4px;
+  gap: var(--kine-spacing-2);
   user-select: none;
 }
 
@@ -315,7 +438,7 @@
   border-radius: var(--kine-radius-sm);
   border: 1px solid var(--kine-color-border-default);
   color: var(--kine-color-text-secondary);
-  font-size: 16px;
+  font-size: var(--kine-font-size-2xl);
   cursor: pointer;
   transition: background var(--kine-motion-duration-fast), color var(--kine-motion-duration-fast);
 }
@@ -337,12 +460,215 @@
 .k-page-total {
   font-size: var(--kine-font-size-sm);
   color: var(--kine-color-text-muted);
-  padding: 0 4px;
+  padding: 0 var(--kine-spacing-2);
 }
 
 .k-page-total span {
   color: var(--kine-color-text-secondary);
 }
+/**
+ * @description kine-ui button 样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.1.0
+ */
+
+.k-button {
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-control-font-size-md);
+  font-weight: var(--kine-font-weight-medium);
+  height: var(--kine-control-height-md);
+  padding: 0 var(--kine-control-padding-x-md);
+  border: 1px solid var(--kine-control-border-color);
+  border-radius: var(--kine-control-radius);
+  background: var(--kine-control-bg);
+  color: var(--kine-color-text-primary);
+  cursor: pointer;
+  outline: none;
+  transition: all var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kine-spacing-3);
+}
+
+/* === default hover/active === */
+.k-button:hover {
+  background: var(--kine-color-bg-hover);
+  border-color: var(--kine-color-text-secondary);
+  color: #ffffff;
+}
+
+.k-button:active {
+  background: var(--kine-color-border-subtle);
+}
+
+/* === primary === */
+.k-button-primary {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-tertiary));
+  border-color: var(--kine-color-accent-default);
+  color: var(--kine-color-accent-default);
+}
+
+.k-button-primary:hover {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 18%, var(--kine-color-bg-primary));
+  border-color: var(--kine-color-accent-hover);
+  color: var(--kine-color-accent-hover);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) 50%, transparent);
+}
+
+.k-button-primary:active {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 25%, var(--kine-color-bg-primary));
+}
+
+/* === success === */
+.k-button-success {
+  border-color: var(--kine-color-semantic-success);
+  color: var(--kine-color-semantic-success);
+}
+
+.k-button-success:hover {
+  background: color-mix(in srgb, var(--kine-color-semantic-success) 12%, var(--kine-color-bg-primary));
+  border-color: var(--kine-color-semantic-success-hover);
+  color: var(--kine-color-semantic-success-hover);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-success) 50%, transparent);
+}
+
+.k-button-success:active {
+  background: color-mix(in srgb, var(--kine-color-semantic-success) 20%, var(--kine-color-bg-primary));
+}
+
+/* === warning === */
+.k-button-warning {
+  border-color: var(--kine-color-semantic-warning);
+  color: var(--kine-color-semantic-warning);
+}
+
+.k-button-warning:hover {
+  background: color-mix(in srgb, var(--kine-color-semantic-warning) 12%, var(--kine-color-bg-primary));
+  border-color: var(--kine-color-semantic-warning-hover);
+  color: var(--kine-color-semantic-warning-hover);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-warning) 50%, transparent);
+}
+
+.k-button-warning:active {
+  background: color-mix(in srgb, var(--kine-color-semantic-warning) 20%, var(--kine-color-bg-primary));
+}
+
+/* === danger === */
+.k-button-danger {
+  border-color: var(--kine-color-semantic-error);
+  color: var(--kine-color-semantic-error);
+}
+
+.k-button-danger:hover {
+  background: color-mix(in srgb, var(--kine-color-semantic-error) 12%, var(--kine-color-bg-primary));
+  border-color: var(--kine-color-semantic-error-hover);
+  color: var(--kine-color-semantic-error-hover);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-error) 50%, transparent);
+}
+
+.k-button-danger:active {
+  background: color-mix(in srgb, var(--kine-color-semantic-error) 20%, var(--kine-color-bg-primary));
+}
+
+/* === info === */
+.k-button-info {
+  border-color: var(--kine-color-semantic-info, #64748b);
+  color: var(--kine-color-semantic-info, #64748b);
+}
+
+.k-button-info:hover {
+  background: color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 12%, var(--kine-color-bg-primary));
+  border-color: var(--kine-color-semantic-info-hover, #94a3b8);
+  color: var(--kine-color-semantic-info-hover, #94a3b8);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 50%, transparent);
+}
+
+.k-button-info:active {
+  background: color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 20%, var(--kine-color-bg-primary));
+}
+
+/* === disabled === */
+.k-button-disabled {
+  opacity: var(--kine-opacity-muted);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* === loading === */
+.k-button-loading {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: var(--kine-opacity-medium);
+}
+
+.k-button-loading .k-button-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: k-button-spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes k-button-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* === plain === */
+.k-button-plain {
+  background: transparent;
+  border-color: transparent;
+  color: var(--kine-color-text-primary);
+}
+
+.k-button-plain:hover {
+  background: var(--kine-color-bg-hover);
+  border-color: transparent;
+  color: #ffffff;
+}
+
+.k-button-plain:active {
+  background: var(--kine-color-border-subtle);
+}
+
+/* === link === */
+.k-button-link {
+  background: transparent;
+  border-color: transparent;
+  color: var(--kine-color-accent-default);
+  padding: 0;
+  text-decoration: none;
+}
+
+.k-button-link:hover {
+  color: var(--kine-color-accent-hover);
+  border-color: transparent;
+  background: transparent;
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) 50%, transparent);
+}
+
+/* === size variants === */
+.k-button-large {
+  height: var(--kine-control-height-lg);
+  font-size: var(--kine-control-font-size-lg);
+  padding: 0 var(--kine-control-padding-x-lg);
+}
+
+.k-button-medium {
+  height: var(--kine-control-height-md);
+  font-size: var(--kine-control-font-size-md);
+  padding: 0 var(--kine-control-padding-x-md);
+}
+
+.k-button-small {
+  height: var(--kine-control-height-sm);
+  font-size: var(--kine-control-font-size-sm);
+  padding: 0 var(--kine-control-padding-x-sm);
+}
 /**
  * @description KSearchTable 搜索表格组合组件样式 — Phosphor 主题
  * @author 阿怪
@@ -358,7 +684,7 @@
   width: 100%;
   box-sizing: border-box;
   background-color: transparent;
-  gap: 12px;
+  gap: var(--kine-spacing-6);
 }
 
 /* 加载态透明度 */
@@ -373,9 +699,9 @@
   flex-direction: row;
   align-items: flex-end;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--kine-spacing-6);
   flex-shrink: 0;
-  padding: 16px;
+  padding: var(--kine-spacing-8);
   background-color: var(--kine-color-bg-primary);
   border-radius: var(--kine-radius-md);
   border: 1px solid var(--kine-color-border-default);
@@ -387,7 +713,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--kine-spacing-6);
   flex: 1;
   min-width: 0;
 }
@@ -397,57 +723,16 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 8px;
+  gap: var(--kine-spacing-4);
   flex-shrink: 0;
 }
 
-/* ===== 搜索按钮基础样式（原生 button，业务可覆盖）===== */
-.k-search-table-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  padding: 0 16px;
-  font-size: var(--kine-font-size-lg);
-  border-radius: var(--kine-radius-sm);
-  border: 1px solid var(--kine-color-border-default);
-  background-color: var(--kine-color-bg-primary);
-  color: var(--kine-color-text-primary);
-  cursor: pointer;
-  white-space: nowrap;
-  transition:
-    background-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
-  box-sizing: border-box;
-  font-family: var(--kine-font-family-system);
-}
-
-.k-search-table-btn:hover {
-  background-color: var(--kine-color-bg-hover);
-  border-color: var(--kine-color-accent-default);
-  color: var(--kine-color-accent-default);
-}
-
-/* 主色按钮（搜索） */
-.k-search-table-btn--primary {
-  background-color: var(--kine-color-accent-default);
-  border-color: var(--kine-color-accent-default);
-  color: #ffffff;
-}
-
-.k-search-table-btn--primary:hover {
-  background-color: var(--kine-color-accent-hover);
-  border-color: var(--kine-color-accent-hover);
-  color: #ffffff;
-}
-
 /* ===== 工具栏：搜索区与表格之间 ===== */
 .k-search-table-toolbar {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 8px;
+  gap: var(--kine-spacing-4);
   flex-shrink: 0;
   min-height: 36px;
 }
@@ -475,834 +760,2385 @@
   justify-content: flex-end;
   align-items: center;
   flex-shrink: 0;
-  padding: 8px 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;
+  }
 }
 /**
- * @description KLoginPage 登录页样式 — Phosphor 主题
+ * @description kine-ui tag 样式 — Phosphor 主题
  * @author 阿怪
- * @date 2026/2/26
- * @version v0.0.2
+ * @date 2026/2/27
+ * @version v1.1.0
  */
 
-/* ===== 全屏容器 ===== */
-.k-login-page {
-  display: flex;
-  flex-direction: column;
+/* === 基础样式 === */
+.k-tag {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 24px;
-  background-color: var(--kine-color-bg-secondary);
+  gap: var(--kine-spacing-2);
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-xs);
+  padding: var(--kine-spacing-1) var(--kine-spacing-4);
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: var(--kine-radius-xs);
+  background: var(--kine-color-bg-tertiary);
+  color: var(--kine-color-text-secondary);
+  line-height: 1.4;
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
 }
 
-/* ===== 登录卡片 ===== */
-.k-login-card {
-  width: 100%;
-  max-width: 400px;
-  background-color: var(--kine-color-bg-primary);
-  border-radius: var(--kine-radius-md);
-  border: 1px solid var(--kine-color-border-default);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-  padding: 40px 36px 32px;
-  box-sizing: border-box;
+/* === 类型变体 === */
+.k-tag-primary {
+  border-color: var(--kine-color-accent-default);
+  color: var(--kine-color-accent-default);
+  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-tertiary));
 }
 
-@media (max-width: 480px) {
-  .k-login-card {
-    padding: 32px 20px 24px;
-    box-shadow: none;
-    border-radius: 0;
-    max-width: 100%;
-  }
+.k-tag-success {
+  border-color: var(--kine-color-semantic-success);
+  color: var(--kine-color-semantic-success);
+  background: color-mix(in srgb, var(--kine-color-semantic-success) 10%, var(--kine-color-bg-tertiary));
 }
 
-/* ===== Logo 区域 ===== */
-.k-login-logo {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 16px;
+.k-tag-warning {
+  border-color: var(--kine-color-semantic-warning);
+  color: var(--kine-color-semantic-warning);
+  background: color-mix(in srgb, var(--kine-color-semantic-warning) 10%, var(--kine-color-bg-tertiary));
 }
 
-/* ===== 标题 ===== */
-.k-login-title {
-  text-align: center;
-  font-size: 22px;
-  font-weight: 600;
-  color: var(--kine-color-text-primary);
-  margin: 0 0 28px;
-  line-height: 1.4;
-  font-family: var(--kine-font-family-system);
+.k-tag-danger {
+  border-color: var(--kine-color-semantic-error);
+  color: var(--kine-color-semantic-error);
+  background: color-mix(in srgb, var(--kine-color-semantic-error) 10%, var(--kine-color-bg-tertiary));
 }
 
-/* ===== 表单 ===== */
-.k-login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.k-tag-info {
+  border-color: var(--kine-color-semantic-info);
+  color: var(--kine-color-semantic-info);
+  background: color-mix(in srgb, var(--kine-color-semantic-info) 10%, var(--kine-color-bg-tertiary));
 }
 
-/* 表单项 */
-.k-login-form-item {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+/* === 尺寸变体 === */
+.k-tag-large {
+  font-size: var(--kine-font-size-md);
+  padding: var(--kine-spacing-2) var(--kine-spacing-6);
 }
 
-.k-login-form-item label {
-  font-size: 13px;
-  color: var(--kine-color-text-secondary);
-  font-weight: 500;
-  font-family: var(--kine-font-family-system);
+.k-tag-medium {
+  font-size: var(--kine-font-size-xs);
+  padding: var(--kine-spacing-1) var(--kine-spacing-4);
 }
 
-.k-login-form-item input[type='text'],
-.k-login-form-item input[type='password'] {
-  width: 100%;
-  height: 40px;
-  padding: 0 12px;
-  box-sizing: border-box;
-  border: 1px solid var(--kine-color-border-default);
-  border-radius: var(--kine-radius-sm);
-  font-size: 14px;
-  color: var(--kine-color-text-primary);
-  background-color: var(--kine-color-bg-primary);
-  outline: none;
-  font-family: var(--kine-font-family-system);
-  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
-}
-
-.k-login-form-item input[type='text']:focus,
-.k-login-form-item input[type='password']:focus {
-  border-color: var(--kine-color-accent-default);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kine-color-accent-default) 20%, transparent);
+.k-tag-small {
+  font-size: 8px;
+  padding: 1px var(--kine-spacing-3);
 }
 
-/* 记住我行 */
-.k-login-remember {
-  display: flex;
+/* === 可关闭 === */
+.k-tag-close {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--kine-color-text-secondary);
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  font-size: var(--kine-font-size-md);
+  line-height: 1;
   cursor: pointer;
-  user-select: none;
-  font-family: var(--kine-font-family-system);
+  opacity: 0.6;
+  border-radius: 50%;
+  transition: opacity var(--kine-motion-duration-fast), background var(--kine-motion-duration-fast);
 }
 
-.k-login-remember input[type='checkbox'] {
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
-  accent-color: var(--kine-color-accent-default);
+.k-tag-close:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+/* === 禁用状态 === */
+.k-tag-disabled {
+  opacity: var(--kine-opacity-muted);
+  pointer-events: none;
+  cursor: not-allowed;
 }
+/**
+ * @description kine-ui image 样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
 
-/* 提交按钮 */
-.k-login-submit {
+/* === 图片容器 === */
+.k-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
   width: 100%;
-  height: 42px;
-  margin-top: 4px;
-  border: none;
-  border-radius: var(--kine-radius-sm);
-  background-color: var(--kine-color-accent-default);
-  color: #ffffff;
-  font-size: 15px;
-  font-weight: 500;
-  cursor: pointer;
-  font-family: var(--kine-font-family-system);
-  transition:
-    background-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    opacity var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  height: 100%;
+  background: var(--kine-color-bg-secondary);
+  border-radius: var(--kine-radius-xs);
 }
 
-.k-login-submit:hover:not(:disabled) {
-  background-color: var(--kine-color-accent-hover);
+/* 有预览时鼠标变指针 */
+.k-image-previewable {
+  cursor: zoom-in;
 }
 
-.k-login-submit:active:not(:disabled) {
-  background-color: var(--kine-color-accent-alt);
+/* === 实际图片元素 === */
+.k-image-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: opacity var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
 }
 
-.k-login-submit:disabled,
-.k-login-submit--loading {
-  opacity: 0.65;
-  cursor: not-allowed;
+.k-image-inner-hidden {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
 }
 
-/* ===== 额外登录方式区域 ===== */
-.k-login-extra {
-  margin-top: 20px;
-  text-align: center;
+/* === 占位容器（loading / error 共用） === */
+.k-image-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kine-spacing-4);
+  min-width: 100px;
+  min-height: 100px;
+  width: 100%;
+  height: 100%;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
 }
 
-/* ===== 底部版权区域 ===== */
-.k-login-footer {
-  margin-top: 32px;
-  text-align: center;
-  font-size: 12px;
+.k-image-placeholder-icon {
+  width: 40px;
+  height: 40px;
+}
+
+/* loading 状态：accent 微光 + 动画 */
+.k-image-loading {
   color: var(--kine-color-text-muted);
-  font-family: var(--kine-font-family-system);
 }
-/**
- * @description KPageHeader 页面头部样式 — Phosphor 主题
- * @author 阿怪
- * @date 2026/2/26
- * @version v0.0.2
- */
 
-/* ===== 容器 ===== */
-.k-page-header {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 16px 0 12px;
-  border-bottom: 1px solid var(--kine-color-border-default);
-  background-color: transparent;
-  margin-bottom: 16px;
+.k-image-loading .k-image-placeholder-icon {
+  animation: k-image-pulse 1.6s ease-in-out infinite;
+  color: var(--kine-color-accent-default);
 }
 
-/* ===== 面包屑区域 ===== */
-.k-page-header-breadcrumb {
-  margin-bottom: 8px;
-  font-size: var(--kine-font-size-lg);
+@keyframes k-image-pulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+/* error 状态 */
+.k-image-error {
+  color: var(--kine-color-semantic-error);
+}
+
+.k-image-error-text {
   color: var(--kine-color-text-muted);
-  font-family: var(--kine-font-family-system);
-  min-height: 20px;
 }
 
-/* ===== 主行：标题 + 操作 ===== */
-.k-page-header-main {
+/* === 全屏预览遮罩层 === */
+.k-image-preview-mask {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--kine-color-bg-primary) 90%, transparent);
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 32px;
+  justify-content: center;
 }
 
-/* ===== 左侧：返回 + 标题区 ===== */
-.k-page-header-left {
+/* === 预览图片本体 === */
+.k-image-preview-img {
+  max-width: 90vw;
+  max-height: 85vh;
+  object-fit: contain;
+  border-radius: var(--kine-radius-xs);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--kine-color-accent-default) 20%, transparent);
+  transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  user-select: none;
+}
+
+/* === 工具栏 === */
+.k-image-preview-toolbar {
+  position: absolute;
+  top: var(--kine-spacing-8);
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 8px;
-  min-width: 0;
-  flex: 1;
+  gap: var(--kine-spacing-2);
+  background: var(--kine-color-bg-secondary);
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: var(--kine-radius-xs);
+  padding: var(--kine-spacing-2) var(--kine-spacing-4);
+  font-family: var(--kine-font-family-mono);
 }
 
-/* 返回按钮 */
-.k-page-header-back {
+/* === 工具按钮 === */
+.k-image-preview-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
-  flex-shrink: 0;
-  border: 1px solid var(--kine-color-border-default);
-  border-radius: var(--kine-radius-sm);
-  background-color: transparent;
-  cursor: pointer;
+  border: none;
+  border-radius: var(--kine-radius-xs);
+  background: transparent;
   color: var(--kine-color-text-secondary);
-  font-size: 14px;
-  line-height: 1;
+  font-size: 16px;
+  cursor: pointer;
   transition:
-    background-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
-  padding: 0;
-}
-
-.k-page-header-back:hover {
-  background-color: var(--kine-color-bg-hover);
-  border-color: var(--kine-color-accent-default);
-  color: var(--kine-color-accent-default);
+    color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
 }
 
-/* 标题文字区 */
-.k-page-header-heading {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
+.k-image-preview-btn:hover {
+  color: var(--kine-color-text-primary);
+  background: color-mix(in srgb, var(--kine-color-accent-default) 15%, transparent);
 }
 
-/* 主标题 */
-.k-page-header-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--kine-color-text-primary);
-  margin: 0;
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: var(--kine-font-family-system);
+.k-image-preview-close:hover {
+  color: var(--kine-color-semantic-error);
+  background: color-mix(in srgb, var(--kine-color-semantic-error) 15%, transparent);
 }
 
-/* 副标题 */
-.k-page-header-subtitle {
-  font-size: var(--kine-font-size-lg);
+/* 当前缩放比例显示 */
+.k-image-preview-scale {
+  font-size: var(--kine-font-size-sm);
   color: var(--kine-color-text-muted);
-  margin: 2px 0 0;
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: var(--kine-font-family-system);
+  min-width: 40px;
+  text-align: center;
 }
 
-/* ===== 右侧操作区 ===== */
-.k-page-header-extra {
+/* === 预览切换箭头 === */
+.k-image-preview-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  flex-direction: row;
   align-items: center;
-  flex-shrink: 0;
-  gap: 8px;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--kine-color-bg-secondary) 80%, transparent);
+  color: var(--kine-color-text-primary);
+  font-size: 26px;
+  cursor: pointer;
+  transition:
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
 }
 
-/* ===== 标题下方内容插槽 ===== */
-.k-page-header-content {
-  margin-top: 12px;
+.k-image-preview-arrow:hover {
+  background: var(--kine-color-bg-secondary);
+  border-color: var(--kine-color-accent-default);
+  color: var(--kine-color-accent-default);
+}
+
+.k-image-preview-arrow-prev {
+  left: 20px;
+}
+
+.k-image-preview-arrow-next {
+  right: 20px;
+}
+
+/* === 图片计数 === */
+.k-image-preview-counter {
+  position: absolute;
+  bottom: var(--kine-spacing-8);
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-muted);
+  background: var(--kine-color-bg-secondary);
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: var(--kine-radius-xs);
+  padding: var(--kine-spacing-1) var(--kine-spacing-5);
 }
 /**
- * @description KNavMenu 导航菜单样式 — Phosphor 主题
+ * @description kine-ui input 样式
  * @author 阿怪
  * @date 2026/2/26
  * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
-/* ===== 容器：撑满侧边栏，去掉 KMenu 默认边框 ===== */
-.k-nav-menu {
-  display: flex;
-  flex-direction: column;
+.k-input {
+  display: block;
   width: 100%;
-  padding: 4px 0;
-}
-
-/* 根级 li：无缩进 */
-.k-nav-menu > .k-menu-item-root {
-  list-style: none;
+  box-sizing: border-box;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-control-font-size-md);
+  height: var(--kine-control-height-md);
+  color: var(--kine-color-text-primary);
+  background-color: var(--kine-control-bg);
+  border: 1px solid var(--kine-control-border-color);
+  border-radius: var(--kine-control-radius);
+  padding: 0 var(--kine-control-padding-x-md);
+  outline: none;
+  transition: all var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
 }
 
-/* ===== 内容行通用 ===== */
-.k-nav-menu .k-menu-item-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 11px 18px;
-  color: var(--kine-color-text-secondary);
-  font-size: 15px;
-  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);
-  border-left: 2px solid transparent;
+.k-input::placeholder {
+  color: var(--kine-color-text-muted);
 }
 
-.k-nav-menu .k-menu-item-content:hover {
-  background: var(--kine-color-bg-hover);
-  color: var(--kine-color-text-primary);
+.k-input:focus {
+  border-color: var(--kine-color-accent-default);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) 30%, transparent);
 }
 
-/* ===== 分类父节点：小号标题风格 ===== */
-.k-nav-menu > .k-menu-item-root > .k-menu-item-content {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--kine-color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.8px;
-  padding: 14px 16px 6px;
-  border-left: none;
+.k-input-disabled {
+  opacity: var(--kine-opacity-muted);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
-.k-nav-menu > .k-menu-item-root > .k-menu-item-content:hover {
-  background: transparent;
-  color: var(--kine-color-text-secondary);
+.k-input-readonly {
+  cursor: default;
 }
 
-/* 分类节点不显示 active 样式 */
-.k-nav-menu > .k-menu-item-root.k-menu-item-active > .k-menu-item-content {
-  color: var(--kine-color-text-muted);
-  background: transparent;
-  border-left: none;
-  padding-left: 16px;
+/* === size variants === */
+.k-input-large {
+  height: var(--kine-control-height-lg);
+  font-size: var(--kine-control-font-size-lg);
+  padding: 0 var(--kine-control-padding-x-lg);
 }
 
-/* ===== 子节点（组件条目）===== */
-.k-nav-menu .k-menu-item-children {
-  padding-left: 0;
-  border-left: none;
-  margin-left: 0;
+.k-input-medium {
+  height: var(--kine-control-height-md);
+  font-size: var(--kine-control-font-size-md);
+  padding: 0 var(--kine-control-padding-x-md);
 }
 
-.k-nav-menu .k-menu-item-children .k-menu-item-content {
-  padding: 11px 18px 11px 26px;
-  font-size: 15px;
+.k-input-small {
+  height: var(--kine-control-height-sm);
+  font-size: var(--kine-control-font-size-sm);
+  padding: 0 var(--kine-control-padding-x-sm);
 }
 
-/* ===== active 叶子节点 ===== */
-.k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 12%, transparent);
-  color: var(--kine-color-accent-default);
-  font-weight: 500;
-  border-left: 2px solid var(--kine-color-accent-default);
-  padding-left: 22px; /* 24 - 2(border) */
+/* === word limit === */
+.k-input-word-limit {
+  position: absolute;
+  right: var(--kine-spacing-4);
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-xs);
+  color: var(--kine-color-text-muted);
+  pointer-events: none;
 }
 
-.k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content:hover {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 18%, transparent);
+.k-input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
 }
 
-/* ===== 展开箭头 ===== */
-.k-nav-menu .k-menu-item-arrow {
-  flex-shrink: 0;
-  width: 0;
-  height: 0;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  border-left: 4px solid currentColor;
-  opacity: 0.5;
-  transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+textarea.k-input {
+  height: auto;
+  padding: var(--kine-spacing-4) var(--kine-control-padding-x-md);
+  resize: vertical;
+  min-height: 80px;
 }
+/**
+ * @description kine-ui select 样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
 
-.k-nav-menu .k-menu-item-arrow-expand {
-  transform: rotate(90deg);
+/* ===== 容器 ===== */
+.k-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-/* ===== 禁用状态 ===== */
-.k-nav-menu .k-menu-item-disabled {
-  opacity: 0.4;
+.k-select-disabled {
+  opacity: var(--kine-opacity-muted);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-/* ===== 折叠状态：只显示图标 ===== */
-.k-crud-sider--collapsed .k-nav-menu-label {
-  display: none;
+/* ===== Trigger ===== */
+.k-select-trigger {
+  display: flex;
+  align-items: center;
+  height: var(--kine-control-height-md);
+  padding: 0 var(--kine-control-padding-x-md);
+  box-sizing: border-box;
+  background-color: var(--kine-control-bg);
+  border: 1px solid var(--kine-control-border-color);
+  border-radius: var(--kine-control-radius);
+  cursor: pointer;
+  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-crud-sider--collapsed .k-nav-menu .k-menu-item-content {
-  justify-content: center;
-  padding: 12px 0;
-  border-left: none;
-  gap: 0;
+.k-select-trigger:focus-within {
+  border-color: var(--kine-color-accent-default);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) 30%, transparent);
 }
 
-.k-crud-sider--collapsed .k-nav-menu-icon {
-  font-size: 20px;
-  width: 64px;
+.k-select-trigger-multiple {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: var(--kine-control-height-md);
+  gap: var(--kine-spacing-2);
+  padding: var(--kine-spacing-2) var(--kine-control-padding-x-md);
+}
+
+/* ===== Input ===== */
+.k-select-input {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-control-font-size-md);
+  color: var(--kine-color-text-primary);
+  cursor: pointer;
+  padding: 0;
+}
+
+.k-select-input::placeholder {
+  color: var(--kine-color-text-muted);
+}
+
+.k-select-input[readonly] {
+  cursor: pointer;
+}
+
+/* ===== Tags (多选) ===== */
+.k-select-tags {
   display: flex;
+  flex-wrap: wrap;
+  gap: var(--kine-spacing-2);
   align-items: center;
-  justify-content: center;
 }
 
-/* 折叠时根节点也用统一的居中样式（覆盖分类标题的特殊样式） */
-.k-crud-sider--collapsed .k-nav-menu > .k-menu-item-root > .k-menu-item-content {
-  font-size: inherit;
-  font-weight: normal;
-  text-transform: none;
-  letter-spacing: normal;
-  padding: 12px 0;
-  justify-content: center;
-  color: var(--kine-color-text-secondary);
-  border-left: none;
+.k-select-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kine-spacing-2);
+  padding: var(--kine-spacing-1) 7px;
+  background-color: var(--kine-color-bg-tertiary);
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: var(--kine-radius-xs);
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-xs);
+  color: var(--kine-color-text-primary);
+  user-select: none;
+  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
 }
 
-/* 折叠时隐藏展开箭头 */
-.k-crud-sider--collapsed .k-menu-item-arrow {
-  display: none;
+.k-select-tag:hover {
+  border-color: var(--kine-color-text-secondary);
 }
 
-/* 折叠时子菜单也对齐 */
-.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children .k-menu-item-content {
-  padding: 12px 0;
+.k-select-tag-text {
+  line-height: 1;
+}
+
+.k-select-tag-close {
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
+  color: var(--kine-color-text-muted);
+  font-size: var(--kine-font-size-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition: color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
 }
 
-/* 折叠时子菜单列表无缩进 */
-.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children {
-  padding-left: 0;
+.k-select-tag-close:hover {
+  color: var(--kine-color-text-primary);
 }
 
-/* 折叠时 active 样式调整 */
-.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content {
-  border-left: none;
-  padding-left: 0;
-  border-radius: 6px;
-  margin: 0 8px;
+/* ===== Dropdown ===== */
+.k-select-dropdown {
+  background-color: var(--kine-color-bg-secondary);
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: var(--kine-radius-sm);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  animation: k-select-dropdown-in var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
 }
 
-/* 折叠时 label 区域也隐藏 */
-.k-crud-sider--collapsed .k-menu-item-label {
-  display: none;
+@keyframes k-select-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-/* ===== label 溢出省略 ===== */
-.k-nav-menu .k-menu-item-label {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+/* ===== Options ===== */
+.k-select-options {
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--kine-spacing-2) 0;
 }
 
-/* ===== icon ===== */
-.k-nav-menu-icon {
-  flex-shrink: 0;
-  font-size: 18px;
-  width: 22px;
+/* 复写 headless .m-option 基础样式 */
+.k-select-dropdown .m-option {
+  padding: var(--kine-spacing-3) var(--kine-spacing-6);
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-select-dropdown .m-option:hover {
+  background-color: var(--kine-color-bg-hover);
+}
+
+.k-select-dropdown .m-option-selected {
+  color: var(--kine-color-accent-default);
+  background-color: color-mix(in srgb, var(--kine-color-accent-default) 10%, transparent);
+}
+
+.k-select-dropdown .m-option-selected:hover {
+  background-color: color-mix(in srgb, var(--kine-color-accent-default) 16%, transparent);
+}
+
+.k-select-dropdown .m-option-disabled {
+  opacity: var(--kine-opacity-muted);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ===== Empty & Loading ===== */
+.k-select-empty,
+.k-select-loading {
+  padding: var(--kine-spacing-6);
   text-align: center;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-muted);
 }
 
-.k-nav-menu-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+/* === size variants === */
+.k-select-large .k-select-trigger {
+  height: var(--kine-control-height-lg);
+  font-size: var(--kine-control-font-size-lg);
+  padding: 0 var(--kine-control-padding-x-lg);
+}
+
+.k-select-medium .k-select-trigger {
+  height: var(--kine-control-height-md);
+  font-size: var(--kine-control-font-size-md);
+  padding: 0 var(--kine-control-padding-x-md);
+}
+
+.k-select-small .k-select-trigger {
+  height: var(--kine-control-height-sm);
+  font-size: var(--kine-control-font-size-sm);
+  padding: 0 var(--kine-control-padding-x-sm);
+}
+
+.k-select-small .k-select-input {
+  font-size: var(--kine-control-font-size-sm);
+}
+
+.k-select-large .k-select-input {
+  font-size: var(--kine-control-font-size-lg);
+}
+
+/* === Clear button === */
+.k-select-clear {
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--kine-color-text-muted);
+  font-size: var(--kine-font-size-sm);
+  transition: color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-select-clear:hover {
+  color: var(--kine-color-text-primary);
+}
+
+/* === Loading icon in trigger === */
+.k-select-loading-icon {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--kine-color-text-muted);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: k-select-spin 0.6s linear infinite;
+}
+
+@keyframes k-select-spin {
+  to { transform: rotate(360deg); }
+}
+
+.k-select-loading-state .k-select-trigger {
+  pointer-events: none;
+  opacity: var(--kine-opacity-muted);
 }
 /**
- * @description 上传组件样式 — Phosphor sci-fi 暗色主题
+ * @description KPageHeader 页面头部样式 — Phosphor 主题
  * @author 阿怪
  * @date 2026/2/26
- * @version v0.0.1
+ * @version v0.0.2
  */
 
-/* ── 隐藏原生 input ── */
-.k-upload-input {
-  display: none;
+/* ===== 容器 ===== */
+.k-page-header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kine-spacing-8) 0 var(--kine-spacing-6);
+  border-bottom: 1px solid var(--kine-color-border-default);
+  background-color: transparent;
+  margin-bottom: var(--kine-spacing-8);
 }
 
-/* ══════════════════════════════════════════
-   KUpload — 基础上传区域
-══════════════════════════════════════════ */
+/* ===== 面包屑区域 ===== */
+.k-page-header-breadcrumb {
+  margin-bottom: var(--kine-spacing-4);
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-muted);
+  font-family: var(--kine-font-family-system);
+  min-height: 20px;
+}
 
-.k-upload {
-  position: relative;
-  display: inline-flex;
+/* ===== 主行：标题 + 操作 ===== */
+.k-page-header-main {
+  display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 80px;
-  border-radius: var(--kine-radius-sm);
-  background: var(--kine-color-bg-secondary);
-  cursor: pointer;
-  transition:
-    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
-  box-sizing: border-box;
+  justify-content: space-between;
+  gap: var(--kine-spacing-8);
+  min-height: 32px;
 }
 
-/* 拖拽模式：虚线边框 */
-.k-upload-drag {
-  border: 1px dashed var(--kine-color-border-default);
+/* ===== 左侧：返回 + 标题区 ===== */
+.k-page-header-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+  min-width: 0;
+  flex: 1;
 }
 
-.k-upload-drag:hover {
-  border-color: var(--kine-color-accent-default);
-  background: color-mix(in srgb, var(--kine-color-accent-default) 6%, var(--kine-color-bg-secondary));
+/* 标题文字区 */
+.k-page-header-heading {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 
-/* 拖拽悬停态 */
-.k-upload-drag-over {
-  border-color: var(--kine-color-accent-default) !important;
-  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-secondary)) !important;
-  box-shadow: inset 0 0 0 1px var(--kine-color-accent-default);
+/* 主标题 */
+.k-page-header-title {
+  font-size: 18px; /* 18px 无对应 token，保留 */
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-primary);
+  margin: 0;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--kine-font-family-system);
+}
+
+/* 副标题 */
+.k-page-header-subtitle {
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-muted);
+  margin: var(--kine-spacing-1) 0 0;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--kine-font-family-system);
+}
+
+/* ===== 右侧操作区 ===== */
+.k-page-header-extra {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--kine-spacing-4);
+}
+
+/* ===== 标题下方内容插槽 ===== */
+.k-page-header-content {
+  margin-top: var(--kine-spacing-6);
+}
+/**
+ * @description KCrudPage 样式
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ */
+
+/* ===== 根容器 ===== */
+.k-crud-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: var(--kine-spacing-6);
+  padding: var(--kine-spacing-8);
+  box-sizing: border-box;
+}
+
+/* ===== 筛选项 ===== */
+.k-crud-page-filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-2);
+  min-width: 140px;
+}
+
+.k-crud-page-filter-label {
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-secondary);
+  line-height: 1;
+}
+
+/* KInput / KSelect 筛选控件宽度适配 */
+.k-crud-page-filter-control {
+  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%;
+  }
+}
+
+/**
+ * @description KLoginPage 登录页样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.2
+ */
+
+/* ===== 全屏容器 ===== */
+.k-login-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kine-spacing-12);
+  background-color: var(--kine-color-bg-secondary);
+}
+
+/* ===== 登录卡片 ===== */
+.k-login-card {
+  width: 100%;
+  max-width: 400px;
+  background-color: var(--kine-color-bg-primary);
+  border-radius: var(--kine-radius-md);
+  border: 1px solid var(--kine-color-border-default);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  padding: var(--kine-spacing-20) 36px var(--kine-spacing-16);
+  box-sizing: border-box;
+}
+
+@media (max-width: 480px) {
+  .k-login-card {
+    padding: var(--kine-spacing-16) var(--kine-spacing-10) var(--kine-spacing-12);
+    box-shadow: none;
+    border-radius: 0;
+    max-width: 100%;
+  }
+}
+
+/* ===== Logo 区域 ===== */
+.k-login-logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--kine-spacing-8);
+}
+
+/* ===== 标题 ===== */
+.k-login-title {
+  text-align: center;
+  font-size: 22px; /* 22px 无精确 token，保留 */
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-primary);
+  margin: 0 0 var(--kine-spacing-14);
+  line-height: 1.4;
+  font-family: var(--kine-font-family-system);
+}
+
+/* ===== 表单 ===== */
+.k-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-8);
+}
+
+/* 表单项 */
+.k-login-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-3);
+}
+
+.k-login-form-item label {
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-secondary);
+  font-weight: var(--kine-font-weight-medium);
+  font-family: var(--kine-font-family-system);
+}
+
+/* KInput 宽度撑满表单项 */
+.k-login-form-item .k-input {
+  width: 100%;
+}
+
+/* 记住我行 */
+.k-login-remember {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--kine-font-family-system);
+}
+
+.k-login-remember input[type='checkbox'] {
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+  accent-color: var(--kine-color-accent-default);
+}
+
+/* ===== 额外登录方式区域 ===== */
+.k-login-extra {
+  margin-top: var(--kine-spacing-10);
+  text-align: center;
+}
+
+/* ===== 底部版权区域 ===== */
+.k-login-footer {
+  margin-top: var(--kine-spacing-16);
+  text-align: center;
+  font-size: var(--kine-font-size-md);
+  color: var(--kine-color-text-muted);
+  font-family: var(--kine-font-family-system);
+}
+/**
+ * @description KNavMenu 导航菜单样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ */
+
+/* ===== 容器：撑满侧边栏，去掉 KMenu 默认边框 ===== */
+.k-nav-menu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--kine-spacing-2) 0;
+}
+
+/* 根级 li：无缩进 */
+.k-nav-menu > .k-menu-item-root {
+  list-style: none;
+}
+
+/* ===== 内容行通用 ===== */
+.k-nav-menu .k-menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-5);
+  padding: 11px 18px; /* 11px/18px 无精确 token，保留 */
+  color: var(--kine-color-text-secondary);
+  font-size: 15px; /* 15px 无精确 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);
+  border-left: 2px solid transparent;
+}
+
+.k-nav-menu .k-menu-item-content:hover {
+  background: var(--kine-color-bg-hover);
+  color: var(--kine-color-text-primary);
+}
+
+/* ===== 分类父节点：小号标题风格 ===== */
+.k-nav-menu > .k-menu-item-root > .k-menu-item-content {
+  font-size: var(--kine-font-size-sm);
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  padding: var(--kine-spacing-7) var(--kine-spacing-8) var(--kine-spacing-3);
+  border-left: none;
+}
+
+.k-nav-menu > .k-menu-item-root > .k-menu-item-content:hover {
+  background: transparent;
+  color: var(--kine-color-text-secondary);
+}
+
+/* 分类节点不显示 active 样式 */
+.k-nav-menu > .k-menu-item-root.k-menu-item-active > .k-menu-item-content {
+  color: var(--kine-color-text-muted);
+  background: transparent;
+  border-left: none;
+  padding-left: var(--kine-spacing-8);
+}
+
+/* ===== 子节点（组件条目）===== */
+.k-nav-menu .k-menu-item-children {
+  padding-left: 0;
+  border-left: none;
+  margin-left: 0;
+}
+
+.k-nav-menu .k-menu-item-children .k-menu-item-content {
+  padding: 11px 18px 11px 26px; /* 11px/18px/26px 无精确 token，保留 */
+  font-size: 15px; /* 15px 无精确 token，保留 */
+}
+
+/* ===== active 叶子节点 ===== */
+.k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 12%, transparent);
+  color: var(--kine-color-accent-default);
+  font-weight: var(--kine-font-weight-medium);
+  border-left: 2px solid var(--kine-color-accent-default);
+  padding-left: 22px; /* 24 - 2(border) */
+}
+
+.k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content:hover {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 18%, transparent);
+}
+
+/* ===== 展开箭头 ===== */
+.k-nav-menu .k-menu-item-arrow {
+  flex-shrink: 0;
+  width: 0;
+  height: 0;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  border-left: 4px solid currentColor;
+  opacity: 0.5;
+  transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-nav-menu .k-menu-item-arrow-expand {
+  transform: rotate(90deg);
+}
+
+/* ===== 禁用状态 ===== */
+.k-nav-menu .k-menu-item-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ===== 折叠状态：只显示图标 ===== */
+.k-crud-sider--collapsed .k-nav-menu-label {
+  display: none;
+}
+
+.k-crud-sider--collapsed .k-nav-menu .k-menu-item-content {
+  justify-content: center;
+  padding: var(--kine-spacing-6) 0;
+  border-left: none;
+  gap: 0;
+}
+
+.k-crud-sider--collapsed .k-nav-menu-icon {
+  font-size: var(--kine-font-size-3xl);
+  width: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 折叠时根节点也用统一的居中样式（覆盖分类标题的特殊样式） */
+.k-crud-sider--collapsed .k-nav-menu > .k-menu-item-root > .k-menu-item-content {
+  font-size: inherit;
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  padding: var(--kine-spacing-6) 0;
+  justify-content: center;
+  color: var(--kine-color-text-secondary);
+  border-left: none;
+}
+
+/* 折叠时隐藏展开箭头 */
+.k-crud-sider--collapsed .k-menu-item-arrow {
+  display: none;
+}
+
+/* 折叠时子菜单也对齐 */
+.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children .k-menu-item-content {
+  padding: var(--kine-spacing-6) 0;
+  justify-content: center;
+}
+
+/* 折叠时子菜单列表无缩进 */
+.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children {
+  padding-left: 0;
+}
+
+/* 折叠时 active 样式调整 */
+.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content {
+  border-left: none;
+  padding-left: 0;
+  border-radius: var(--kine-radius-sm);
+  margin: 0 var(--kine-spacing-4);
+}
+
+/* 折叠时 label 区域也隐藏 */
+.k-crud-sider--collapsed .k-menu-item-label {
+  display: none;
+}
+
+/* ===== label 溢出省略 ===== */
+.k-nav-menu .k-menu-item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+}
+
+/* ===== icon ===== */
+.k-nav-menu-icon {
+  flex-shrink: 0;
+  font-size: 18px; /* 18px 无对应 token，保留 */
+  width: 22px;
+  text-align: center;
+}
+
+.k-nav-menu-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/**
+ * @description 上传组件样式 — Phosphor sci-fi 暗色主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ */
+
+/* ── 隐藏原生 input ── */
+.k-upload-input {
+  display: none;
+}
+
+/* ══════════════════════════════════════════
+   KUpload — 基础上传区域
+══════════════════════════════════════════ */
+
+.k-upload {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 80px;
+  border-radius: var(--kine-radius-sm);
+  background: var(--kine-color-bg-secondary);
+  cursor: pointer;
+  transition:
+    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  box-sizing: border-box;
+}
+
+/* 拖拽模式：虚线边框 */
+.k-upload-drag {
+  border: 1px dashed var(--kine-color-border-default);
+}
+
+.k-upload-drag:hover {
+  border-color: var(--kine-color-accent-default);
+  background: color-mix(in srgb, var(--kine-color-accent-default) 6%, var(--kine-color-bg-secondary));
+}
+
+/* 拖拽悬停态 */
+.k-upload-drag-over {
+  border-color: var(--kine-color-accent-default) !important;
+  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-secondary)) !important;
+  box-shadow: inset 0 0 0 1px var(--kine-color-accent-default);
+}
+
+/* 禁用态 */
+.k-upload-disabled {
+  opacity: var(--kine-opacity-muted);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 默认占位内容 */
+.k-upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kine-spacing-3);
+  pointer-events: none;
+}
+
+.k-upload-icon {
+  font-size: var(--kine-font-size-4xl);
+  color: var(--kine-color-text-secondary);
+  line-height: 1;
+}
+
+.k-upload-text {
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-secondary);
+}
+
+/* ══════════════════════════════════════════
+   KImageUpload — 图片网格
+══════════════════════════════════════════ */
+
+.k-image-upload {
+  display: block;
+}
+
+.k-image-upload-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kine-spacing-4);
+}
+
+/* 图片卡片（预览 + 添加占位共用） */
+.k-image-upload-card {
+  position: relative;
+  border-radius: var(--kine-radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--kine-color-border-default);
+  background: var(--kine-color-bg-secondary);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* 添加卡片 */
+.k-image-upload-card--add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-style: dashed;
+  cursor: pointer;
+  transition:
+    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-image-upload-card--add:hover {
+  border-color: var(--kine-color-accent-default);
+  background: color-mix(in srgb, var(--kine-color-accent-default) 6%, var(--kine-color-bg-secondary));
+}
+
+.k-image-upload-add-icon {
+  font-size: 28px; /* 28px 无精确 token，保留 */
+  color: var(--kine-color-text-secondary);
+  line-height: 1;
+  pointer-events: none;
+}
+
+/* 错误态卡片边框 */
+.k-image-upload-card--error {
+  border-color: var(--kine-color-semantic-error);
+}
+
+/* 预览图 */
+.k-image-upload-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 上传进度覆盖层 */
+.k-image-upload-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.k-image-upload-overlay--error {
+  justify-content: center;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-semantic-error);
+}
+
+.k-image-upload-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--kine-color-accent-default);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) var(--kine-color-accent-default);
+  transition: height var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  opacity: 0.6;
+}
+
+.k-image-upload-percent {
+  position: relative;
+  z-index: 1;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: #ffffff;
+  padding-bottom: var(--kine-spacing-2);
+}
+
+/* 删除按钮（悬停卡片时显示） */
+.k-image-upload-remove {
+  position: absolute;
+  top: var(--kine-spacing-1);
+  right: var(--kine-spacing-1);
+  width: 20px;
+  height: 20px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  border: none;
+  border-radius: var(--kine-radius-xs);
+  color: #ffffff;
+  font-size: var(--kine-font-size-xl);
+  cursor: pointer;
+  line-height: 1;
+  z-index: 10;
+  padding: 0;
+}
+
+.k-image-upload-card:hover .k-image-upload-remove {
+  display: flex;
+}
+
+.k-image-upload-remove:hover {
+  background: var(--kine-color-semantic-error);
+}
+
+/* ══════════════════════════════════════════
+   KFileList — 文件列表
+══════════════════════════════════════════ */
+
+.k-file-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-2);
+  width: 100%;
+}
+
+.k-file-list-item {
+  display: grid;
+  grid-template-columns: 20px 1fr auto;
+  align-items: center;
+  column-gap: var(--kine-spacing-4);
+  padding: var(--kine-spacing-3) var(--kine-spacing-4);
+  border-radius: var(--kine-radius-xs);
+  background: var(--kine-color-bg-secondary);
+  border: 1px solid var(--kine-color-border-default);
+  font-family: var(--kine-font-family-mono);
+  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  position: relative;
+}
+
+/* 上传中时需要显示进度条，需要多行 */
+.k-file-list-item--uploading {
+  grid-template-columns: 20px 1fr auto;
+  grid-template-rows: auto 4px;
+}
+
+/* 上传中删除按钮固定在第一行 */
+.k-file-list-item--uploading .k-file-list-remove {
+  grid-row: 1;
+  grid-column: 3;
+}
+
+.k-file-list-item--success {
+  border-color: color-mix(in srgb, var(--kine-color-semantic-success) 30%, var(--kine-color-border-default));
+}
+
+.k-file-list-item--error {
+  border-color: color-mix(in srgb, var(--kine-color-semantic-error) 40%, var(--kine-color-border-default));
+}
+
+/* 文件图标 */
+.k-file-list-icon {
+  font-size: var(--kine-font-size-md);
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.k-file-list-item--success .k-file-list-icon {
+  color: var(--kine-color-semantic-success);
+}
+
+.k-file-list-item--error .k-file-list-icon {
+  color: var(--kine-color-semantic-error);
+}
+
+.k-file-list-item--uploading .k-file-list-icon,
+.k-file-list-item--pending .k-file-list-icon {
+  color: var(--kine-color-text-secondary);
+}
+
+/* 文件信息 */
+.k-file-list-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-1);
+  overflow: hidden;
+}
+
+.k-file-list-name {
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.k-file-list-link {
+  color: var(--kine-color-accent-default);
+  text-decoration: none;
+}
+
+.k-file-list-link:hover {
+  color: var(--kine-color-accent-hover);
+  text-decoration: underline;
+}
+
+.k-file-list-meta {
+  font-size: calc(var(--kine-font-size-sm) - 1px);
+  color: var(--kine-color-text-secondary);
+}
+
+/* 进度条（位于第二行，跨满三列） */
+.k-file-list-progress-track {
+  grid-column: 1 / -1;
+  height: 3px;
+  border-radius: var(--kine-radius-xs);
+  background: var(--kine-color-bg-tertiary);
+  overflow: hidden;
+  margin-top: var(--kine-spacing-1);
+}
+
+.k-file-list-progress-fill {
+  height: 100%;
+  border-radius: var(--kine-radius-xs);
+  background: var(--kine-color-accent-default);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) var(--kine-color-accent-default);
+  transition: width var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+/* 删除按钮 */
+.k-file-list-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--kine-radius-xs);
+  color: var(--kine-color-text-secondary);
+  font-size: var(--kine-font-size-2xl);
+  cursor: pointer;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-file-list-remove:hover {
+  color: var(--kine-color-semantic-error);
+}
+/**
+ * @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);
+  }
+}
+
+/**
+ * @description KEditableTable 样式 — 对标 AIDesigner 设计规范
+ * @author 阿怪
+ * @date 2026/3/22
+ * @version v0.0.1
+ *
+ * 设计要点：
+ * - 编辑行：左侧 3px 靛蓝竖线
+ * - 删除行：红色文字 + 删线 + 内联确认
+ * - 新增行：底部空行带 placeholder
+ * - 汇总行：加粗金额
+ */
+
+.k-editable-table {
+  width: 100%;
 }
 
-/* 禁用态 */
-.k-upload-disabled {
-  opacity: var(--kine-opacity-muted);
-  cursor: not-allowed;
-  pointer-events: none;
+/* ── 标题栏 ──────────────────────────── */
+
+.k-et-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 var(--kine-spacing-6);
 }
 
-/* 默认占位内容 */
-.k-upload-placeholder {
+.k-et-header-left {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 6px;
-  pointer-events: none;
+  gap: var(--kine-spacing-4);
 }
 
-.k-upload-icon {
-  font-size: 24px;
-  color: var(--kine-color-text-secondary);
-  line-height: 1;
+.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-upload-text {
-  font-family: var(--kine-font-family-mono);
+.k-et-count {
   font-size: var(--kine-font-size-sm);
-  color: var(--kine-color-text-secondary);
+  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);
 }
 
-/* ══════════════════════════════════════════
-   KImageUpload — 图片网格
-══════════════════════════════════════════ */
-
-.k-image-upload {
-  display: block;
+.k-et-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
 }
 
-.k-image-upload-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+/* ── 表格 ──────────────────────────── */
+
+.k-et-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-/* 图片卡片（预览 + 添加占位共用） */
-.k-image-upload-card {
-  position: relative;
-  border-radius: var(--kine-radius-sm);
-  overflow: hidden;
-  border: 1px solid var(--kine-color-border-default);
-  background: var(--kine-color-bg-secondary);
-  flex-shrink: 0;
-  box-sizing: border-box;
+.k-et-thead {
+  border-bottom: 1px solid var(--kine-color-border-default, #e5e7eb);
 }
 
-/* 添加卡片 */
-.k-image-upload-card--add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-style: dashed;
-  cursor: pointer;
-  transition:
-    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+.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-image-upload-card--add:hover {
-  border-color: var(--kine-color-accent-default);
-  background: color-mix(in srgb, var(--kine-color-accent-default) 6%, var(--kine-color-bg-secondary));
+.k-et-th-index {
+  width: 40px;
 }
 
-.k-image-upload-add-icon {
-  font-size: 28px;
-  color: var(--kine-color-text-secondary);
-  line-height: 1;
-  pointer-events: none;
+.k-et-th-actions {
+  width: 70px;
 }
 
-/* 错误态卡片边框 */
-.k-image-upload-card--error {
-  border-color: var(--kine-color-semantic-error);
+.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-image-upload-preview {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
+.k-et-td-index {
+  color: var(--kine-color-text-muted, #9ca3af);
+  font-size: var(--kine-font-size-md);
+  font-variant-numeric: tabular-nums;
 }
 
-/* 上传进度覆盖层 */
-.k-image-upload-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  background: rgba(0, 0, 0, 0.45);
+/* 对齐 */
+.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-image-upload-overlay--error {
-  justify-content: center;
-  font-family: var(--kine-font-family-mono);
-  font-size: var(--kine-font-size-sm);
-  color: var(--kine-color-semantic-error);
+.k-et-tr:hover {
+  background: var(--kine-color-bg-hover, rgba(0, 0, 0, 0.02));
 }
 
-.k-image-upload-progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: var(--kine-color-accent-default);
-  box-shadow: 0 0 var(--kine-shadow-glow-radius) var(--kine-color-accent-default);
-  transition: height var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
-  opacity: 0.6;
+/* ── 编辑行 ──────────────────────────── */
+
+.k-et-tr--editing {
+  background: rgba(79, 70, 229, 0.02);
+  border-left: 3px solid var(--kine-color-accent-default, #4f46e5);
 }
 
-.k-image-upload-percent {
-  position: relative;
-  z-index: 1;
-  font-family: var(--kine-font-family-mono);
-  font-size: var(--kine-font-size-sm);
-  color: #ffffff;
-  padding-bottom: 4px;
+.k-et-tr--editing:hover {
+  background: rgba(79, 70, 229, 0.03);
 }
 
-/* 删除按钮（悬停卡片时显示） */
-.k-image-upload-remove {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 20px;
-  height: 20px;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.6);
-  border: none;
-  border-radius: var(--kine-radius-xs);
-  color: #ffffff;
-  font-size: 14px;
-  cursor: pointer;
-  line-height: 1;
-  z-index: 10;
-  padding: 0;
+.k-et-tr--editing .k-et-td:first-child {
+  padding-left: var(--kine-spacing-4); /* ~8px，视觉上约等于 12 - 3px border */
 }
 
-.k-image-upload-card:hover .k-image-upload-remove {
-  display: flex;
+/* 行内编辑态 KInput / KSelect 包裹容器，宽度撑满单元格 */
+.k-et-input-wrap,
+.k-et-select-wrap {
+  width: 100%;
 }
 
-.k-image-upload-remove:hover {
-  background: var(--kine-color-semantic-error);
+.k-et-cell-readonly {
+  color: var(--kine-color-text-muted, #9ca3af);
 }
 
-/* ══════════════════════════════════════════
-   KFileList — 文件列表
-══════════════════════════════════════════ */
+/* ── 删除确认行 ──────────────────────────── */
 
-.k-file-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
+.k-et-tr--deleting {
+  background: rgba(220, 38, 38, 0.02);
 }
 
-.k-file-list-item {
-  display: grid;
-  grid-template-columns: 20px 1fr auto;
+.k-et-tr--deleting:hover {
+  background: rgba(220, 38, 38, 0.03);
+}
+
+.k-et-delete-confirm {
+  display: flex;
   align-items: center;
-  column-gap: 8px;
-  padding: 6px 8px;
-  border-radius: var(--kine-radius-xs);
-  background: var(--kine-color-bg-secondary);
-  border: 1px solid var(--kine-color-border-default);
-  font-family: var(--kine-font-family-mono);
-  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
-  position: relative;
+  gap: var(--kine-spacing-6);
+  font-size: var(--kine-font-size-lg);
 }
 
-/* 上传中时需要显示进度条，需要多行 */
-.k-file-list-item--uploading {
-  grid-template-columns: 20px 1fr auto;
-  grid-template-rows: auto 4px;
+.k-et-deleted-text {
+  color: var(--kine-color-semantic-error, #dc2626);
+  text-decoration: line-through;
 }
 
-/* 上传中删除按钮固定在第一行 */
-.k-file-list-item--uploading .k-file-list-remove {
-  grid-row: 1;
-  grid-column: 3;
+.k-et-delete-ask {
+  color: var(--kine-color-semantic-error, #dc2626);
+  font-size: var(--kine-font-size-md);
 }
 
-.k-file-list-item--success {
-  border-color: color-mix(in srgb, var(--kine-color-semantic-success) 30%, var(--kine-color-border-default));
+/* ── 操作图标列 ──────────────────────────── */
+
+.k-et-td-actions {
+  text-align: right;
+  white-space: nowrap;
 }
 
-.k-file-list-item--error {
-  border-color: color-mix(in srgb, var(--kine-color-semantic-error) 40%, var(--kine-color-border-default));
+/* ── 汇总行 ──────────────────────────── */
+
+.k-et-tfoot {
+  border-top: 1px solid var(--kine-color-border-default, #e5e7eb);
 }
 
-/* 文件图标 */
-.k-file-list-icon {
-  font-size: 12px;
-  text-align: center;
-  flex-shrink: 0;
+.k-et-tr--summary {
+  background: transparent;
 }
 
-.k-file-list-item--success .k-file-list-icon {
-  color: var(--kine-color-semantic-success);
+.k-et-tr--summary:hover {
+  background: transparent;
 }
 
-.k-file-list-item--error .k-file-list-icon {
-  color: var(--kine-color-semantic-error);
+.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-file-list-item--uploading .k-file-list-icon,
-.k-file-list-item--pending .k-file-list-icon {
-  color: var(--kine-color-text-secondary);
+.k-et-summary-value {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
 }
 
-/* 文件信息 */
-.k-file-list-info {
+/* ── 空态 ──────────────────────────── */
+
+.k-et-empty {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  overflow: hidden;
+  align-items: center;
+  gap: var(--kine-spacing-6);
+  padding: var(--kine-spacing-24) var(--kine-spacing-12);
 }
 
-.k-file-list-name {
-  font-size: var(--kine-font-size-sm);
-  color: var(--kine-color-text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.k-et-empty-text {
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-muted, #9ca3af);
 }
 
-.k-file-list-link {
-  color: var(--kine-color-accent-default);
-  text-decoration: none;
-}
+/* ================================================================
+   Dark Mode
+   ================================================================ */
 
-.k-file-list-link:hover {
-  color: var(--kine-color-accent-hover);
-  text-decoration: underline;
-}
+@media (prefers-color-scheme: dark) {
+  .k-et-thead {
+    border-bottom-color: var(--kine-color-border-default, #2e2e3e);
+  }
 
-.k-file-list-meta {
-  font-size: calc(var(--kine-font-size-sm) - 1px);
-  color: var(--kine-color-text-secondary);
+  .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);
+  }
 }
 
-/* 进度条（位于第二行，跨满三列） */
-.k-file-list-progress-track {
-  grid-column: 1 / -1;
-  height: 3px;
-  border-radius: var(--kine-radius-xs);
-  background: var(--kine-color-bg-tertiary);
-  overflow: hidden;
-  margin-top: 2px;
+.dark .k-et-thead,
+[data-theme="dark"] .k-et-thead {
+  border-bottom-color: var(--kine-color-border-default, #2e2e3e);
 }
 
-.k-file-list-progress-fill {
-  height: 100%;
-  border-radius: var(--kine-radius-xs);
-  background: var(--kine-color-accent-default);
-  box-shadow: 0 0 var(--kine-shadow-glow-radius) var(--kine-color-accent-default);
-  transition: width var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+.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);
 }
 
-/* 删除按钮 */
-.k-file-list-remove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: var(--kine-radius-xs);
-  color: var(--kine-color-text-secondary);
-  font-size: 16px;
-  cursor: pointer;
-  line-height: 1;
-  flex-shrink: 0;
-  transition: color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+.dark .k-et-tfoot,
+[data-theme="dark"] .k-et-tfoot {
+  border-top-color: var(--kine-color-border-default, #2e2e3e);
 }
 
-.k-file-list-remove:hover {
-  color: var(--kine-color-semantic-error);
+.dark .k-et-td-summary,
+[data-theme="dark"] .k-et-td-summary {
+  color: var(--kine-color-text-primary, #e5e5e5);
 }
+/*$vite$:1*/