djm-ui 0.67.4 → 0.72.0

package/dist/djm-ui.css

@@ -1,4 +1,4 @@
-/*! DJM UI v0.67.4 · MIT · 2026-10-26 */
+/*! DJM UI v0.72.0 · MIT · 2026-10-26 */
 
 /* ---- tokens.css ---- */
 
@@ -19,6 +19,11 @@
 :root {
   color-scheme: light;
 
+  /* 字体族：宿主页面可通过覆盖这两个变量统一换字体 */
+  --djm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  --djm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
   --djm-brand-50: #eef6fe;
   --djm-brand-100: #dcebfb;
   --djm-brand-200: #b9d7f6;
@@ -70,6 +75,9 @@
   /* 彩色底上的文字（两主题均为白色） */
   --djm-text-inverse: #fff;
 
+  /* 文字提示的深底：暗色主题改用略亮的灰，避免和页面背景糊在一起 */
+  --djm-tooltip-bg: #1f2a37;
+
   /* 盖在图片等媒体内容上的蒙层，不随主题变化 */
   --djm-media-mask: rgba(9, 20, 33, 0.55);
 
@@ -155,6 +163,8 @@
   --djm-text-side: #c2ccd8;
   --djm-text-2: #a6b2c0;
   --djm-text-3: #8492a1;
+  /* 暗色下提示框比页面背景亮一档，白字仍有足够对比 */
+  --djm-tooltip-bg: #3a4652;
   /* 暗色下水印改用浅色，保持可辨识 */
   --djm-watermark: rgba(232, 237, 243, 0.12);
 
@@ -211,8 +221,7 @@ body {
 body {
   background: var(--djm-bg);
   color: var(--djm-text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
-    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  font-family: var(--djm-font-sans);
   font-size: 13px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
@@ -293,7 +302,7 @@ a {
 }
 
 .djm-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--djm-font-mono);
   font-size: 11.5px;
   font-variant-numeric: tabular-nums;
 }
@@ -2120,7 +2129,8 @@ button.djm-breadcrumb-text {
   height: 16px;
   padding: 0 4px;
   border-radius: 8px;
-  background: var(--djm-red);
+  /* 红点底色用实色档，暗色主题下白字才够清楚 */
+  background: var(--djm-red-strong);
   color: var(--djm-text-inverse);
   font-size: 10px;
   font-style: normal;
@@ -3484,7 +3494,8 @@ button.djm-breadcrumb-text {
   background: none;
   padding: 0;
   font-size: 12px;
-  color: var(--djm-brand-600);
+  /* 品牌深色档：浅色底与暗色底都能过 4.5:1 */
+  color: var(--djm-brand-700);
   white-space: nowrap;
 }
 
@@ -4015,6 +4026,11 @@ input[type="date"] {
   font-size: 11.5px;
   margin-right: 2px;
 }
+
+/* 表格工具栏的操作提示：选中行后自动隐藏 */
+.djm-toolbar-tip {
+  font-size: 11.5px;
+}
 /* ---------------- 表单 ---------------- */
 
 .djm-form-grid {
@@ -6704,6 +6720,8 @@ input[type="date"] {
 /* ---------------- 富文本编辑器 ---------------- */
 
 .djm-rich-editor {
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--djm-border-strong);
   border-radius: 4px;
   overflow: hidden;
@@ -6715,11 +6733,26 @@ input[type="date"] {
   box-shadow: var(--djm-ring);
 }
 
+/* 全屏：铺满视口，内容区自己滚动 */
+.djm-rich-editor.djm-is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  border: 0;
+  border-radius: 0;
+}
+
+.djm-rich-editor.djm-is-fullscreen .djm-rich-editor-content,
+.djm-rich-editor.djm-is-fullscreen .djm-rich-editor-source {
+  flex: 1;
+  max-height: none;
+}
+
 .djm-rich-editor-toolbar {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 2px;
   padding: 5px 6px;
   border-bottom: 1px solid var(--djm-border);
   background: var(--djm-surface-2);
@@ -6727,9 +6760,9 @@ input[type="date"] {
 
 .djm-rich-editor-group {
   display: flex;
-  gap: 2px;
-  padding-right: 5px;
-  margin-right: 3px;
+  gap: 1px;
+  padding-right: 4px;
+  margin-right: 2px;
   border-right: 1px solid var(--djm-border);
 }
 
@@ -6737,10 +6770,92 @@ input[type="date"] {
   border-right: 0;
 }
 
+/* 段落格式 / 字号下拉 */
+.djm-rich-editor-select {
+  height: 26px;
+  padding: 0 2px;
+  border: 1px solid var(--djm-border);
+  border-radius: 3px;
+  background: var(--djm-surface);
+  color: var(--djm-text-2);
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+}
+
+.djm-rich-editor-select-size {
+  width: 64px;
+}
+
+.djm-rich-editor-select:focus-visible {
+  outline: 2px solid var(--djm-brand-500);
+  outline-offset: -1px;
+}
+
+.djm-rich-editor-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 颜色按钮：字母底部带当前色，背景色按钮直接把颜色铺在字母上 */
+.djm-rich-editor-color {
+  position: relative;
+}
+
+.djm-rich-editor-letter {
+  display: inline-block;
+  padding-bottom: 1px;
+  border-bottom: 2px solid var(--djm-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.djm-rich-editor-letter-bg {
+  padding: 0 3px;
+  border-bottom: 0;
+  border-radius: 2px;
+  color: var(--djm-text);
+}
+
+.djm-rich-editor-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 5;
+  display: grid;
+  grid-template-columns: repeat(4, 20px);
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--djm-border);
+  border-radius: 6px;
+  background: var(--djm-surface);
+  box-shadow: var(--djm-shadow-md);
+}
+
+.djm-rich-editor-swatch {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid var(--djm-border);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.djm-rich-editor-swatch:hover {
+  border-color: var(--djm-brand-500);
+}
+
+/* 素材库按钮：媒体选择器默认是块级 span，塞进工具栏里要收成行内 */
+.djm-rich-editor-picker {
+  display: inline-flex;
+  align-items: center;
+}
+
 .djm-rich-editor-btn {
-  min-width: 26px;
+  min-width: 24px;
   height: 26px;
-  padding: 0 6px;
+  padding: 0 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6823,11 +6938,93 @@ input[type="date"] {
   color: var(--djm-text-3);
 }
 
-.djm-rich-editor-content h2 {
+.djm-rich-editor-content h1,
+.djm-rich-editor-content h2,
+.djm-rich-editor-content h3 {
   margin: 0 0 8px;
+  color: var(--djm-text);
+  line-height: 1.5;
+}
+
+.djm-rich-editor-content h1 {
+  font-size: 20px;
+}
+
+.djm-rich-editor-content h2 {
   font-size: 16px;
 }
 
+.djm-rich-editor-content h3 {
+  font-size: 14px;
+}
+
+.djm-rich-editor-content blockquote {
+  margin: 0 0 8px;
+  padding: 4px 10px;
+  border-left: 3px solid var(--djm-brand-500);
+  background: var(--djm-surface-2);
+  color: var(--djm-text-2);
+}
+
+.djm-rich-editor-content pre {
+  margin: 0 0 8px;
+  padding: 10px 12px;
+  overflow: auto;
+  border-radius: 4px;
+  background: var(--djm-surface-3);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.djm-rich-editor-content code {
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--djm-surface-3);
+  color: var(--djm-brand-700);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.djm-rich-editor-content pre code {
+  padding: 0;
+  background: none;
+  color: inherit;
+}
+
+.djm-rich-editor-content hr {
+  margin: 12px 0;
+  border: 0;
+  border-top: 1px solid var(--djm-border);
+}
+
+/* 图片：单图、多图统一限宽，避免撑破内容区 */
+.djm-rich-editor-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  vertical-align: bottom;
+}
+
+/* 上传插入的图片之间留一点间距，多图并排时不粘在一起 */
+.djm-rich-editor-img {
+  margin: 2px 4px 2px 0;
+}
+
+/* 上传中的占位块，上传完成后被图片替换 */
+.djm-rich-editor-uploading {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border: 1px dashed var(--djm-border-strong);
+  border-radius: 4px;
+  background: var(--djm-surface-2);
+  color: var(--djm-text-3);
+  font-size: 12px;
+}
+
 .djm-rich-editor-content p {
   margin: 0 0 8px;
 }
@@ -6855,6 +7052,24 @@ input[type="date"] {
   line-height: 1.7;
 }
 
+/* 底部状态：上传提示与字数 */
+.djm-rich-editor-foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 4px 12px;
+  border-top: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+  color: var(--djm-text-3);
+  font-size: 11px;
+}
+
+/* 文件选择框只作为上传入口，不显示 */
+.djm-rich-editor-file {
+  display: none;
+}
+
 .djm-editor-bar {
   display: flex;
   align-items: center;
@@ -7611,7 +7826,7 @@ input[type="date"] {
   /* 打开在弹窗 / 抽屉里时也要压在遮罩之上 */
   z-index: var(--djm-z-popper, 1450);
   border: 1px solid var(--djm-border);
-  border-radius: var(--djm-radius-md, 4px);
+  border-radius: var(--djm-radius);
   background: var(--djm-surface);
   box-shadow: var(--djm-shadow-md, 0 6px 20px rgba(0, 0, 0, 0.12));
 }
@@ -8232,7 +8447,7 @@ input[type="date"] {
   padding: 0 10px;
   height: 30px;
   border: 1px solid var(--djm-border);
-  border-radius: var(--djm-radius-md, 4px);
+  border-radius: var(--djm-radius);
   background: var(--djm-surface);
   color: var(--djm-text-3);
 }
@@ -8265,14 +8480,14 @@ input[type="date"] {
 
 .djm-media-item {
   border: 1px solid var(--djm-border);
-  border-radius: var(--djm-radius-md, 4px);
+  border-radius: var(--djm-radius);
   overflow: hidden;
   cursor: pointer;
   background: var(--djm-surface);
 }
 
 .djm-media-item:hover {
-  border-color: var(--djm-brand-400, #79a9d6);
+  border-color: var(--djm-brand-500);
 }
 
 .djm-media-item:focus-visible {
@@ -8356,6 +8571,526 @@ input[type="date"] {
   font-style: normal;
 }
 
+/* ---- components/content.css ---- */
+
+/* DJM UI · 内容管理：文件管理器 / 图片相册 */
+
+/* ---------------- 文件管理器 ---------------- */
+
+.djm-fm {
+  display: grid;
+  grid-template-columns: 208px minmax(0, 1fr);
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius-lg);
+  overflow: hidden;
+  background: var(--djm-surface);
+}
+
+.djm-fm-side {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px;
+  border-right: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+}
+
+.djm-fm-side-title {
+  padding: 4px 8px 8px;
+  color: var(--djm-text-3);
+  font-size: 10.5px;
+  letter-spacing: 0.5px;
+}
+
+.djm-fm-folder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--djm-text-2);
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.djm-fm-folder:hover {
+  background: var(--djm-brand-soft);
+  color: var(--djm-brand-700);
+}
+
+.djm-fm-folder.djm-is-active {
+  background: var(--djm-brand-50);
+  color: var(--djm-brand-700);
+  font-weight: 600;
+}
+
+.djm-fm-folder-count {
+  margin-left: auto;
+  color: var(--djm-text-3);
+  font-size: 10.5px;
+}
+
+.djm-fm-storage {
+  margin-top: auto;
+  padding: 12px 8px 4px;
+  border-top: 1px solid var(--djm-border);
+  color: var(--djm-text-3);
+  font-size: 11px;
+}
+
+.djm-fm-storage-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  margin-bottom: 6px;
+  color: var(--djm-text-2);
+}
+
+.djm-fm-bar {
+  height: 5px;
+  overflow: hidden;
+  border-radius: 3px;
+  background: var(--djm-surface-3);
+}
+
+.djm-fm-bar i {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, var(--djm-brand-500), var(--djm-brand-600));
+}
+
+.djm-fm-storage p {
+  margin: 8px 0 0;
+  line-height: 1.6;
+}
+
+.djm-fm-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.djm-fm-path {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+}
+
+.djm-fm-crumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--djm-text);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.djm-fm-crumb em {
+  color: var(--djm-text-3);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.djm-fm-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--djm-border);
+  border-radius: 4px;
+  background: var(--djm-surface);
+  color: var(--djm-text-3);
+}
+
+.djm-fm-search:focus-within {
+  border-color: var(--djm-brand-500);
+}
+
+.djm-fm-search input {
+  width: 160px;
+  border: 0;
+  outline: none;
+  background: none;
+  color: var(--djm-text-2);
+  font-size: 12px;
+}
+
+.djm-fm-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding-right: 2px;
+  color: var(--djm-text-2);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.djm-fm-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  gap: 12px;
+  padding: 14px;
+}
+
+.djm-fm-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border: 1px solid var(--djm-border);
+  border-radius: 6px;
+  background: var(--djm-surface);
+}
+
+.djm-fm-card.djm-is-selected {
+  border-color: var(--djm-brand-500);
+  box-shadow: 0 0 0 2px var(--djm-brand-soft);
+}
+
+.djm-fm-check {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 1;
+  padding: 2px;
+  border-radius: 4px;
+  background: var(--djm-surface);
+}
+
+.djm-fm-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 96px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 4px;
+  background: var(--djm-surface-3);
+  cursor: zoom-in;
+}
+
+.djm-fm-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.djm-fm-doc {
+  color: var(--djm-text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+
+.djm-fm-name {
+  margin-top: 2px;
+  overflow: hidden;
+  color: var(--djm-text);
+  font-size: 12.5px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.djm-fm-meta {
+  color: var(--djm-text-3);
+  font-size: 11px;
+}
+
+.djm-fm-empty {
+  margin: 40px 14px;
+}
+
+.djm-fm-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  color: var(--djm-text-3);
+  font-size: 12px;
+}
+
+/* 上传用的隐藏输入 */
+.djm-fm-file {
+  display: none;
+}
+
+.djm-fm-preview-img {
+  display: block;
+  width: 100%;
+  max-height: 420px;
+  border-radius: 6px;
+  background: var(--djm-surface-3);
+  object-fit: contain;
+}
+
+.djm-fm-preview-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px;
+  border-radius: 6px;
+  background: var(--djm-surface-2);
+  color: var(--djm-text-3);
+  font-size: 12px;
+}
+
+.djm-fm-preview-meta {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.djm-fm-preview-meta div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: var(--djm-text-3);
+  font-size: 11.5px;
+}
+
+.djm-fm-preview-meta b {
+  color: var(--djm-text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* ---------------- 图片相册 ---------------- */
+
+.djm-album-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+}
+
+.djm-album-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.djm-album-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--djm-border);
+  border-radius: 14px;
+  background: var(--djm-surface);
+  color: var(--djm-text-2);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.djm-album-tab span {
+  color: var(--djm-text-3);
+  font-size: 10.5px;
+}
+
+.djm-album-tab:hover {
+  border-color: var(--djm-brand-500);
+  color: var(--djm-brand-700);
+}
+
+.djm-album-tab.djm-is-active {
+  border-color: var(--djm-brand-500);
+  background: var(--djm-brand-soft);
+  color: var(--djm-brand-700);
+  font-weight: 600;
+}
+
+.djm-album-tab.djm-is-active span {
+  color: var(--djm-brand-700);
+}
+
+.djm-album-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.djm-album-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 14px;
+  padding: 14px;
+}
+
+.djm-album-card {
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--djm-border);
+  border-radius: 6px;
+  background: var(--djm-surface);
+}
+
+.djm-album-card.djm-is-selected {
+  border-color: var(--djm-brand-500);
+  box-shadow: 0 0 0 2px var(--djm-brand-soft);
+}
+
+.djm-album-thumb {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: var(--djm-surface-3);
+  cursor: zoom-in;
+}
+
+.djm-album-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.2s ease;
+}
+
+.djm-album-thumb:hover img {
+  transform: scale(1.04);
+}
+
+.djm-album-zoom {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  background: rgba(15, 23, 32, 0.62);
+  color: #fff;
+  font-size: 11px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.2s ease;
+}
+
+.djm-album-thumb:hover .djm-album-zoom {
+  opacity: 1;
+}
+
+.djm-album-check {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 3px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.djm-album-card figcaption {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px 10px;
+}
+
+.djm-album-card figcaption strong {
+  overflow: hidden;
+  font-size: 12.5px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.djm-album-card figcaption span {
+  color: var(--djm-text-3);
+  font-size: 11px;
+}
+
+.djm-album-empty {
+  padding: 60px 20px;
+}
+
+.djm-album-viewer img {
+  display: block;
+  width: 100%;
+  max-height: 520px;
+  border-radius: 6px;
+  background: var(--djm-surface-3);
+  object-fit: contain;
+}
+
+.djm-album-viewer-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 8px;
+  color: var(--djm-text-3);
+  font-size: 11.5px;
+}
+
+@media (max-width: 860px) {
+  .djm-fm {
+    grid-template-columns: 1fr;
+  }
+
+  .djm-fm-side {
+    border-right: 0;
+    border-bottom: 1px solid var(--djm-border);
+  }
+
+  .djm-fm-folder {
+    height: 30px;
+  }
+
+  /* 窄屏：路径与搜索各占一行，避免文字被挤成两行 */
+  .djm-fm-path {
+    flex-wrap: wrap;
+  }
+
+  .djm-fm-search {
+    flex: 1 1 100%;
+  }
+
+  .djm-fm-search input {
+    width: 100%;
+  }
+
+  .djm-fm-crumb em {
+    display: none;
+  }
+
+  .djm-fm-storage {
+    display: none;
+  }
+
+  .djm-fm-grid,
+  .djm-album-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
+
+  .djm-fm-preview-meta {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 /* ---- components/kanban.css ---- */
 
 /* 看板：横向列排布，列内纵向卡片流，超宽横向滚动 */