djm-ui 0.67.3 → 0.72.0

package/src/styles/components/layout.css

@@ -324,7 +324,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  height: 36px;
+  height: 33px;
   padding-right: 8px;
   border-radius: var(--djm-radius-lg);
   color: var(--djm-text-side);
@@ -465,6 +465,15 @@
   align-items: center;
   gap: 6px;
   margin-bottom: 3px;
+  white-space: nowrap;
+}
+
+/* 版权：小一号，避免挤出侧栏宽度 */
+.djm-foot-legal {
+  display: block;
+  font-size: 10.5px;
+  line-height: 1.7;
+  color: var(--djm-text-3);
 }
 
 .djm-pulse {
@@ -478,11 +487,322 @@
 .djm-foot-version {
   font-size: 10.5px;
   color: var(--djm-text-3);
+  white-space: nowrap;
 }
 
 .djm-nav-mask {
   display: none;
 }
+
+/* ---------------- 侧栏导航的三种形态 ---------------- */
+
+/* 侧栏内容区：单列 / 双列两套导航共用同一块高度 */
+.djm-sidebar-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.djm-sidebar-body > .djm-nav {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 双列与混合布局下才出现的两列，默认不占位 */
+.djm-nav-primary,
+.djm-nav-secondary {
+  display: none;
+}
+
+/* 双列：左窄列放一级，右列放二级，侧栏整体加宽 */
+.djm-app.djm-menu-double {
+  /* 104 一级列 + 192 二级列，二级菜单文字够用又不占太多内容区 */
+  --djm-sidebar-w: 296px;
+}
+
+.djm-app.djm-menu-double .djm-nav-inline {
+  display: none;
+}
+
+.djm-app.djm-menu-double .djm-brand {
+  width: 104px;
+  /* 双列只留 logo，居中对齐下方一级列 */
+  justify-content: center;
+  padding: 0;
+}
+
+.djm-app.djm-menu-double .djm-brand-text {
+  display: none;
+}
+
+.djm-app.djm-menu-double .djm-nav-primary {
+  display: flex;
+  flex: 0 0 104px;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 6px;
+  overflow-y: auto;
+  background: var(--djm-surface-2);
+  border-right: 1px solid var(--djm-border);
+  scrollbar-width: thin;
+}
+
+.djm-nav-primary-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 9px 4px;
+  border: 0;
+  border-radius: var(--djm-radius-lg);
+  background: transparent;
+  color: var(--djm-text-side);
+  font-size: 11.5px;
+  line-height: 1.25;
+  text-align: center;
+  cursor: pointer;
+  transition: background 0.14s, color 0.14s;
+}
+
+.djm-nav-primary-item:hover {
+  background: var(--djm-hover);
+  color: var(--djm-text);
+}
+
+.djm-nav-primary-item.djm-is-active {
+  background: var(--djm-brand-soft);
+  color: var(--djm-brand-700);
+  font-weight: 600;
+}
+
+.djm-app.djm-menu-double .djm-nav-secondary,
+.djm-app.djm-layout-mix .djm-nav-secondary {
+  display: block;
+  padding: 10px 8px;
+}
+
+/* 二级栏里的分组标题与条目 */
+.djm-nav-group {
+  margin: 10px 0 4px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--djm-text-3);
+}
+
+.djm-nav-group:first-child {
+  margin-top: 0;
+}
+
+.djm-nav-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--djm-radius-lg);
+  background: transparent;
+  color: var(--djm-text-side);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.14s, color 0.14s;
+}
+
+.djm-nav-item:hover {
+  background: var(--djm-surface-3);
+  color: var(--djm-text);
+}
+
+.djm-nav-item.djm-is-active {
+  background: var(--djm-brand-soft);
+  color: var(--djm-brand-700);
+  font-weight: 600;
+}
+
+.djm-nav-item-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.djm-nav-item .djm-nav-count {
+  margin-left: auto;
+}
+
+/* 混合：顶部一级 + 侧栏二级 */
+.djm-app.djm-layout-mix {
+  --djm-sidebar-w: 216px;
+}
+
+.djm-app.djm-layout-mix .djm-nav-inline {
+  display: none;
+}
+
+.djm-app.djm-layout-mix .djm-hamburger {
+  display: none;
+}
+
+.djm-app.djm-layout-mix .djm-brand {
+  width: auto;
+  border-right: 0;
+  padding-right: 6px;
+}
+
+/* 顶栏一级导航（混合布局） */
+.djm-topnav {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.djm-topnav-item {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--djm-radius);
+  background: transparent;
+  color: var(--djm-text-2);
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.14s, color 0.14s;
+}
+
+.djm-topnav-item:hover {
+  background: var(--djm-surface-3);
+  color: var(--djm-text);
+}
+
+.djm-topnav-item.djm-is-active {
+  background: var(--djm-brand-soft);
+  color: var(--djm-brand-700);
+  font-weight: 600;
+}
+
+/* ---------------- 侧栏配色（与全局明暗解耦） ---------------- */
+
+/* 深色侧栏：浅色页面里也能左深右浅 */
+.djm-app.djm-sider-dark .djm-sidebar,
+.djm-app.djm-sider-dark.djm-layout-side .djm-brand {
+  --djm-surface: #1b232d;
+  --djm-surface-2: #171e27;
+  --djm-surface-3: #232c37;
+  --djm-hover: #26303c;
+  --djm-border: #2b3542;
+  --djm-text: #e8edf3;
+  --djm-text-nav: #d5dde6;
+  --djm-text-side: #c2ccd8;
+  --djm-text-2: #a6b2c0;
+  --djm-text-3: #8492a1;
+  background: var(--djm-surface);
+  border-color: var(--djm-border);
+  color: var(--djm-text);
+}
+
+/* 浅色侧栏：深色页面里也能左浅右深 */
+.djm-app.djm-sider-light .djm-sidebar,
+.djm-app.djm-sider-light.djm-layout-side .djm-brand {
+  --djm-surface: #ffffff;
+  --djm-surface-2: #f8fafd;
+  --djm-surface-3: #f5f8fc;
+  --djm-hover: #eef3f9;
+  --djm-border: #dde6f0;
+  --djm-text: #1e2b3a;
+  --djm-text-nav: #35475c;
+  --djm-text-side: #3a4b60;
+  --djm-text-2: #5a6b7d;
+  --djm-text-3: #5f7183;
+  background: var(--djm-surface);
+  border-color: var(--djm-border);
+  color: var(--djm-text);
+}
+
+/* 品牌色侧栏：整块用主色实底，条目靠白色透明度分层 */
+.djm-app.djm-sider-brand .djm-sidebar,
+.djm-app.djm-sider-brand.djm-layout-side .djm-brand {
+  --djm-surface: var(--djm-brand-solid);
+  --djm-surface-2: rgba(255, 255, 255, 0.06);
+  --djm-surface-3: rgba(255, 255, 255, 0.12);
+  --djm-hover: rgba(255, 255, 255, 0.1);
+  --djm-border: rgba(255, 255, 255, 0.16);
+  --djm-text: #ffffff;
+  --djm-text-nav: rgba(255, 255, 255, 0.94);
+  --djm-text-side: rgba(255, 255, 255, 0.82);
+  --djm-text-2: rgba(255, 255, 255, 0.9);
+  --djm-text-3: rgba(255, 255, 255, 0.8);
+  --djm-brand-soft: rgba(255, 255, 255, 0.18);
+  --djm-brand-100: rgba(255, 255, 255, 0.26);
+  --djm-brand-200: rgba(255, 255, 255, 0.4);
+  --djm-brand-600: #ffffff;
+  --djm-brand-700: #ffffff;
+  background: var(--djm-brand-solid);
+  border-color: rgba(255, 255, 255, 0.16);
+  color: var(--djm-text);
+}
+
+/* 品牌底上选中项用白字 + 白色描边，避免浅蓝字发虚 */
+.djm-app.djm-sider-brand .djm-tree-row.djm-is-active,
+.djm-app.djm-sider-brand .djm-tree-row.djm-is-active:hover,
+.djm-app.djm-sider-brand .djm-nav-item.djm-is-active,
+.djm-app.djm-sider-brand .djm-nav-primary-item.djm-is-active {
+  color: #ffffff;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
+}
+
+/* 深色侧栏的选中态：底色与文字都跟着主色色相走，
+   否则青碧、紫罗兰、朱砂红选出来都是一团近黑 */
+.djm-app.djm-sider-dark .djm-sidebar .djm-tree-row.djm-is-active,
+.djm-app.djm-sider-dark .djm-sidebar .djm-nav-item.djm-is-active,
+.djm-app.djm-sider-dark .djm-sidebar .djm-nav-primary-item.djm-is-active,
+:root[data-djm-theme='dark'] .djm-app.djm-sider-auto .djm-sidebar .djm-tree-row.djm-is-active,
+:root[data-djm-theme='dark'] .djm-app.djm-sider-auto .djm-sidebar .djm-nav-item.djm-is-active,
+:root[data-djm-theme='dark'] .djm-app.djm-sider-auto .djm-sidebar .djm-nav-primary-item.djm-is-active {
+  background: var(--djm-sider-active, var(--djm-brand-soft));
+  color: var(--djm-sider-active-text, var(--djm-brand-700));
+}
+
+/* 选中项 hover 再亮一档，不要掉回接近背景的深色 */
+.djm-app.djm-sider-dark .djm-sidebar .djm-tree-row.djm-is-active:hover,
+.djm-app.djm-sider-dark .djm-sidebar .djm-nav-item.djm-is-active:hover,
+.djm-app.djm-sider-dark .djm-sidebar .djm-nav-primary-item.djm-is-active:hover,
+:root[data-djm-theme='dark'] .djm-app.djm-sider-auto .djm-sidebar .djm-tree-row.djm-is-active:hover,
+:root[data-djm-theme='dark'] .djm-app.djm-sider-auto .djm-sidebar .djm-nav-item.djm-is-active:hover,
+:root[data-djm-theme='dark'] .djm-app.djm-sider-auto .djm-sidebar .djm-nav-primary-item.djm-is-active:hover {
+  background: var(--djm-sider-active-hover, var(--djm-brand-100));
+  color: var(--djm-sider-active-text, var(--djm-brand-700));
+}
+
+.djm-app.djm-sider-dark .djm-sidebar .djm-tree-row.djm-is-active .djm-tree-arrow,
+:root[data-djm-theme='dark'] .djm-app.djm-sider-auto .djm-sidebar .djm-tree-row.djm-is-active .djm-tree-arrow {
+  color: var(--djm-sider-active-text, var(--djm-brand-600));
+}
+
+.djm-app.djm-sider-brand .djm-brand-mark {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* 品牌底上的计数徽标：用深色半透明压出层次，白字才够对比 */
+.djm-app.djm-sider-brand .djm-tree-row.djm-is-active .djm-nav-count {
+  background: rgba(0, 0, 0, 0.22);
+  border-color: rgba(255, 255, 255, 0.24);
+  color: #ffffff;
+}
+
+.djm-app.djm-sider-brand .djm-brand-accent {
+  color: #ffffff;
+}
+
 /* ---------------- 主区域 ---------------- */
 
 /* 主区域固定视口高度，滚动交给内容区，避免整页上下跳 */
@@ -742,6 +1062,12 @@
   flex-wrap: nowrap;
 }
 
+/* 顶部通栏的一级项多，收紧左右内边距，避免「系统管理」被省略成「系统…」 */
+.djm-app.djm-layout-top .djm-topbar-menu .djm-menu-link {
+  gap: 6px;
+  padding: 0 9px;
+}
+
 /* 顶部布局下没有抽屉菜单，汉堡按钮无意义 */
 .djm-app.djm-layout-top .djm-hamburger {
   display: none;

package/src/styles/components/media-picker.css

@@ -29,7 +29,7 @@
   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);
 }
@@ -62,14 +62,14 @@
 
 .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 {

package/src/styles/components/menu.css

@@ -94,7 +94,8 @@
   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;

package/src/styles/components/org-picker.css

@@ -120,7 +120,7 @@
   /* 打开在弹窗 / 抽屉里时也要压在遮罩之上 */
   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));
 }

package/src/styles/components/responsive.css

@@ -41,6 +41,48 @@
   }
 }
 
+/* 混合布局：屏幕不够宽时顶部一级菜单收起，改用完整树的抽屉 */
+@media (max-width: 1320px) {
+  .djm-app.djm-layout-mix {
+    --djm-sidebar-w: 232px;
+  }
+  .djm-app.djm-layout-mix .djm-topnav {
+    display: none;
+  }
+  .djm-app.djm-layout-mix .djm-sidebar {
+    display: flex;
+    transform: translateX(-100%);
+    transition: transform 0.22s ease;
+    box-shadow: var(--djm-shadow-lg);
+  }
+  .djm-app.djm-layout-mix .djm-sidebar.djm-is-open {
+    transform: none;
+  }
+  .djm-app.djm-layout-mix .djm-main {
+    margin-left: 0;
+  }
+  .djm-app.djm-layout-mix .djm-brand {
+    width: auto;
+    border-right: 0;
+  }
+  .djm-app.djm-layout-mix .djm-hamburger {
+    display: inline-flex;
+  }
+  .djm-app.djm-layout-mix .djm-nav-secondary {
+    display: none;
+  }
+  .djm-app.djm-layout-mix .djm-nav-inline {
+    display: block;
+  }
+  .djm-app.djm-layout-mix .djm-nav-mask {
+    display: block;
+    position: fixed;
+    inset: var(--djm-topbar-h) 0 0;
+    background: var(--djm-mask);
+    z-index: 29;
+  }
+}
+
 @media (max-width: 1024px) {
   .djm-dash-stats {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -50,6 +92,28 @@
   }
 }
 
+/* 平板宽度下双列菜单太占地方，退回单列完整树 */
+@media (max-width: 1100px) {
+  .djm-app.djm-menu-double {
+    --djm-sidebar-w: 228px;
+  }
+  .djm-app.djm-menu-double .djm-nav-primary,
+  .djm-app.djm-menu-double .djm-nav-secondary {
+    display: none;
+  }
+  .djm-app.djm-menu-double .djm-nav-inline {
+    display: block;
+  }
+  .djm-app.djm-menu-double .djm-brand {
+    width: var(--djm-sidebar-w);
+    justify-content: flex-start;
+    padding: 0 14px;
+  }
+  .djm-app.djm-menu-double .djm-brand-text {
+    display: flex;
+  }
+}
+
 @media (max-width: 960px) {
   .djm-sidebar {
     transform: translateX(-100%);
@@ -62,6 +126,24 @@
   .djm-main {
     margin-left: 0;
   }
+  /* 双列菜单在手机端退回单列完整树，抽屉才放得下 */
+  .djm-app.djm-menu-double {
+    --djm-sidebar-w: 232px;
+  }
+  .djm-app.djm-menu-double .djm-nav-primary,
+  .djm-app.djm-menu-double .djm-nav-secondary {
+    display: none;
+  }
+  .djm-app.djm-menu-double .djm-nav-inline {
+    display: block;
+  }
+  .djm-app.djm-menu-double .djm-brand {
+    width: auto;
+    padding: 0 8px;
+  }
+  .djm-app.djm-menu-double .djm-brand-text {
+    display: flex;
+  }
   .djm-brand {
     width: auto;
     border-right: 0;
@@ -279,6 +361,10 @@
   .djm-table-tools-right {
     flex-wrap: wrap;
   }
+  /* 工具栏提示在窄屏只会多占一行 */
+  .djm-toolbar-tip {
+    display: none;
+  }
   /* 表格在手机上收紧内边距，能多露出一列信息 */
   .djm-data-table th,
   .djm-data-table td {