@das-fed/upf-ui 6.4.0-dev.248 → 6.4.0-dev.250

package/packages/components/tree-v2/style.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";.das-icon{--color: inherit;height:1em;width:1em;line-height:1em;display:inline-flex;justify-content:center;align-items:center;position:relative;flex-shrink:0;vertical-align:middle;fill:currentColor;color:var(--color);font-size:inherit;font-style:normal}.das-icon svg{height:1em!important;width:1em!important}.das-ui-tooltip-popper.el-popper{max-width:360px;box-shadow:0 4px 10px 0 var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16));border:1px solid var(--upf-text-tooltip-border, var(--upf-border-color, #d9d9d9));font-size:var(--das-ui-font-size-sm);padding:0;border-radius:var(--upf-border-radius, 4px)}.das-ui-tooltip-popper.el-popper .el-popper__arrow{width:10px;height:10px}.das-ui-tooltip-popper.el-popper[data-popper-placement^=top]>.el-popper__arrow{bottom:-5px!important}.das-ui-tooltip-popper.el-popper[data-popper-placement^=bottom]>.el-popper__arrow{top:-5px!important}.das-ui-tooltip-popper.el-popper[data-popper-placement^=left]>.el-popper__arrow{right:-5px!important}.das-ui-tooltip-popper.el-popper[data-popper-placement^=right]>.el-popper__arrow{left:-5px!important}.das-ui-tooltip-popper.el-popper .das-popper-content{padding:7px 12px}.das-ui-tooltip-popper.el-popper .max-height{max-height:298px}.das-ui-tooltip-popper.el-popper.is-light{color:var(--upf-text-tooltip-text, var(--upf-text-primary, #212121));background-color:var(--upf-text-tooltip-bg, var(--upf-bg-elevated, #ffffff))}.das-ui-tooltip-popper.el-popper.is-light:after{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;content:"";background:var(--upf-text-tooltip-bg, var(--upf-bg-elevated, #ffffff));border-radius:inherit}.das-ui-tooltip-popper.el-popper.is-light .el-popper__arrow:before{height:10px;width:10px;background-color:var(--upf-text-tooltip-bg, var(--upf-bg-elevated, #ffffff));border-color:var(--upf-text-tooltip-border, var(--upf-border-color, #d9d9d9));border-radius:0!important}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=top] .el-popper__arrow:before{box-shadow:2px 2px 5px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16))}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=bottom] .el-popper__arrow:before{box-shadow:-2px -2px 5px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16))}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=left] .el-popper__arrow:before{box-shadow:3px 0 6px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16)),0 -2px 6px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16))}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=right] .el-popper__arrow:before{box-shadow:0 3px 6px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16)),-2px 0 6px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16))}.das-tooltip-text-wrap[data-v-e1652f58]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--v65704ba4);-webkit-line-clamp:var(--v65704ba4)}.das-tooltip-virtual-placeholder[data-v-e1652f58]{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}/*! 
+@charset "UTF-8";.das-icon{--color: inherit;height:1em;width:1em;line-height:1em;display:inline-flex;justify-content:center;align-items:center;position:relative;flex-shrink:0;fill:currentColor;color:var(--color);font-size:inherit;font-style:normal}.das-icon svg{height:1em!important;width:1em!important}.das-ui-tooltip-popper.el-popper{max-width:360px;box-shadow:0 4px 10px 0 var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16));border:1px solid var(--upf-text-tooltip-border, var(--upf-border-color, #d9d9d9));font-size:var(--das-ui-font-size-sm);padding:0;border-radius:var(--upf-border-radius, 4px)}.das-ui-tooltip-popper.el-popper .el-popper__arrow{width:10px;height:10px}.das-ui-tooltip-popper.el-popper[data-popper-placement^=top]>.el-popper__arrow{bottom:-5px!important}.das-ui-tooltip-popper.el-popper[data-popper-placement^=bottom]>.el-popper__arrow{top:-5px!important}.das-ui-tooltip-popper.el-popper[data-popper-placement^=left]>.el-popper__arrow{right:-5px!important}.das-ui-tooltip-popper.el-popper[data-popper-placement^=right]>.el-popper__arrow{left:-5px!important}.das-ui-tooltip-popper.el-popper .das-popper-content{padding:7px 12px}.das-ui-tooltip-popper.el-popper .max-height{max-height:298px}.das-ui-tooltip-popper.el-popper.is-light{color:var(--upf-text-tooltip-text, var(--upf-text-primary, #212121));background-color:var(--upf-text-tooltip-bg, var(--upf-bg-elevated, #ffffff))}.das-ui-tooltip-popper.el-popper.is-light:after{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;content:"";background:var(--upf-text-tooltip-bg, var(--upf-bg-elevated, #ffffff));border-radius:inherit}.das-ui-tooltip-popper.el-popper.is-light .el-popper__arrow:before{height:10px;width:10px;background-color:var(--upf-text-tooltip-bg, var(--upf-bg-elevated, #ffffff));border-color:var(--upf-text-tooltip-border, var(--upf-border-color, #d9d9d9));border-radius:0!important}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=top] .el-popper__arrow:before{box-shadow:2px 2px 5px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16))}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=bottom] .el-popper__arrow:before{box-shadow:-2px -2px 5px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16))}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=left] .el-popper__arrow:before{box-shadow:3px 0 6px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16)),0 -2px 6px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16))}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=right] .el-popper__arrow:before{box-shadow:0 3px 6px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16)),-2px 0 6px var(--upf-text-tooltip-shadow-color, rgba(38, 38, 38, .16))}.das-tooltip-text-wrap[data-v-e1652f58]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--v65704ba4);-webkit-line-clamp:var(--v65704ba4)}.das-tooltip-virtual-placeholder[data-v-e1652f58]{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}/*! 
 * OverlayScrollbars
 * Version: 2.6.1
 * 

package/packages/components/virtual-tree/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as k, openBlock as d, createElementBlock as f, createElementVNode as v, renderSlot as x, createTextVNode as H, toDisplayString as B, createStaticVNode as A, ref as u, useAttrs as P, watch as h, h as y, normalizeClass as J, createVNode as K, unref as $, mergeProps as L, withCtx as g, createBlock as T, computed as m, onMounted as W, onBeforeUnmount as U, normalizeStyle as j, Fragment as E, createCommentVNode as D, createSlots as q, nextTick as G } from "vue";
+import { defineComponent as x, openBlock as i, createElementBlock as l, createElementVNode as h, renderSlot as g, createTextVNode as H, toDisplayString as B, createStaticVNode as A, useAttrs as P, computed as u, h as y, normalizeClass as J, createVNode as w, unref as T, mergeProps as K, withCtx as _, createBlock as z, ref as p, watch as C, onMounted as W, onBeforeUnmount as U, normalizeStyle as j, Fragment as E, createCommentVNode as D, createSlots as q, nextTick as G } from "vue";
 import { withInstall as Q } from "@das-fed/upf-utils/with-install/index";
 import { ElTreeV2 as X } from "element-plus";
 import "element-plus/es/components/tree-v2/style/css";
@@ -9,20 +9,20 @@ import { DasIconLoad as te } from "@das-fed/upf-ui/packages/icons/load/index";
 import "@das-fed/upf-ui/packages/components/icon/index";
 import { DasIconCaretRight as ae } from "@das-fed/upf-ui/packages/icons/caret-right/index";
 import { SizeWatcher as ne } from "@das-fed/upf-utils/size-watcher";
-import { flatTree as z } from "@das-fed/upf-utils/common-tools"
+import { flatTree as N } from "@das-fed/upf-utils/common-tools"
 import '@das-fed/upf-ui/packages/components/virtual-tree/style.css';
 ;
-const se = { class: "tree-empty-block" }, ie = { class: "tree-empty-text" }, oe = /* @__PURE__ */ k({
+const se = { class: "tree-empty-block" }, oe = { class: "tree-empty-text" }, ie = /* @__PURE__ */ x({
   __name: "empty",
   props: {
     emptyText: {}
   },
-  setup(t) {
-    return (a, s) => (d(), f("div", se, [
-      v("div", ie, [
-        x(a.$slots, "default", {}, () => [
+  setup(a) {
+    return (t, d) => (i(), l("div", se, [
+      h("div", oe, [
+        g(t.$slots, "default", {}, () => [
           H(
-            B(t.emptyText),
+            B(a.emptyText),
             1
             /* TEXT */
           )
@@ -30,38 +30,38 @@ const se = { class: "tree-empty-block" }, ie = { class: "tree-empty-text" }, oe
       ])
     ]));
   }
-}), _ = (t, a) => {
-  const s = t.__vccOpts || t;
-  for (const [r, o] of a)
-    s[r] = o;
-  return s;
-}, le = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-507e2bf9"]]), de = {}, re = { class: "das-spin-container das-spin-page" };
-function ce(t, a) {
-  return d(), f("div", re, [...a[0] || (a[0] = [
+}), v = (a, t) => {
+  const d = a.__vccOpts || a;
+  for (const [c, f] of t)
+    d[c] = f;
+  return d;
+}, de = /* @__PURE__ */ v(ie, [["__scopeId", "data-v-507e2bf9"]]), re = {}, le = { class: "das-spin-container das-spin-page" };
+function ce(a, t) {
+  return i(), l("div", le, [...t[0] || (t[0] = [
     A('<div class="das-spin-dot-spin" data-v-323f37a9><i class="das-spin-dot-item" data-v-323f37a9></i><i class="das-spin-dot-item" data-v-323f37a9></i><i class="das-spin-dot-item" data-v-323f37a9></i><i class="das-spin-dot-item" data-v-323f37a9></i></div>', 1)
   ])]);
 }
-const fe = /* @__PURE__ */ _(de, [["render", ce], ["__scopeId", "data-v-323f37a9"]]), ue = {}, pe = { class: "das-spin-container das-spin-component" };
-function me(t, a) {
-  return d(), f("div", pe, [...a[0] || (a[0] = [
-    v(
+const fe = /* @__PURE__ */ v(re, [["render", ce], ["__scopeId", "data-v-323f37a9"]]), ue = {}, pe = { class: "das-spin-container das-spin-component" };
+function me(a, t) {
+  return i(), l("div", pe, [...t[0] || (t[0] = [
+    h(
       "div",
       { class: "das-spin-dot-spin" },
       [
-        v("i", { class: "das-spin-dot-item" })
+        h("i", { class: "das-spin-dot-item" })
       ],
       -1
       /* CACHED */
     )
   ])]);
 }
-const he = /* @__PURE__ */ _(ue, [["render", me], ["__scopeId", "data-v-f47a1ae6"]]), ve = {}, _e = { class: "das-spin-container das-spin-containerload" };
-function ye(t, a) {
-  return d(), f("div", _e, [...a[0] || (a[0] = [
+const he = /* @__PURE__ */ v(ue, [["render", me], ["__scopeId", "data-v-f47a1ae6"]]), ve = {}, ye = { class: "das-spin-container das-spin-containerload" };
+function _e(a, t) {
+  return i(), l("div", ye, [...t[0] || (t[0] = [
     A('<div class="das-spin-dot-spin" data-v-f7548f22><i class="das-spin-dot-item" data-v-f7548f22></i><i class="das-spin-dot-item" data-v-f7548f22></i><i class="das-spin-dot-item" data-v-f7548f22></i><i class="das-spin-dot-item" data-v-f7548f22></i></div>', 1)
   ])]);
 }
-const ge = /* @__PURE__ */ _(ve, [["render", ye], ["__scopeId", "data-v-f7548f22"]]), xe = /* @__PURE__ */ k({
+const ge = /* @__PURE__ */ v(ve, [["render", _e], ["__scopeId", "data-v-f7548f22"]]), xe = /* @__PURE__ */ x({
   __name: "index",
   props: {
     type: { default: "page" },
@@ -70,35 +70,29 @@ const ge = /* @__PURE__ */ _(ve, [["render", ye], ["__scopeId", "data-v-f7548f22
     iconColor: { default: "var(--upf-loading-color-5, var(--upf-color-primary))" },
     full: { type: Boolean, default: !0 }
   },
-  setup(t) {
-    let a = t, s = u("");
-    const r = P();
-    return h(
-      () => a.type,
-      (o, e) => {
-        o == "page" && (s.value = y(fe)), o == "container" && (s.value = y(ge)), o == "component" && (s.value = y(he)), o == "load" && (s.value = y(te, {
-          iconColor: a.iconColor,
-          customSize: a.customSize
-        }));
-      },
-      { immediate: !0 }
-    ), h(
-      () => r,
-      (o, e) => {
-        r.indicator && (s.value = r.indicator);
-      },
-      { immediate: !0 }
-    ), (o, e) => (d(), f(
+  setup(a) {
+    const t = a, d = P(), c = u(() => {
+      if (d.indicator) return d.indicator;
+      if (t.type == "page") return y(fe);
+      if (t.type == "container") return y(ge);
+      if (t.type == "component") return y(he);
+      if (t.type == "load")
+        return y(te, {
+          iconColor: t.iconColor,
+          customSize: t.customSize
+        });
+    });
+    return (f, e) => (i(), l(
       "div",
       {
-        class: J({ "das-spin-container": !0, full: t.full })
+        class: J({ "das-spin-container": !0, full: a.full })
       },
       [
-        K($(ee), L({
-          class: `das-slef-spin ${t.size} ${t.type} `
-        }, o.$attrs, { indicator: $(s) }), {
-          default: g(() => [
-            x(o.$slots, "default")
+        w(T(ee), K({
+          class: `das-slef-spin ${a.size} ${a.type} `
+        }, f.$attrs, { indicator: c.value }), {
+          default: _(() => [
+            g(f.$slots, "default")
           ]),
           _: 3
           /* FORWARDED */
@@ -108,15 +102,15 @@ const ge = /* @__PURE__ */ _(ve, [["render", ye], ["__scopeId", "data-v-f7548f22
       /* CLASS */
     ));
   }
-}), $e = /* @__PURE__ */ k({
+}), $e = /* @__PURE__ */ x({
   __name: "expand-icon",
-  setup(t) {
-    return (a, s) => (d(), T($(ae), {
+  setup(a) {
+    return (t, d) => (i(), z(T(ae), {
       class: "das-tree__expand-icon",
       size: "medium"
     }));
   }
-}), ke = /* @__PURE__ */ _($e, [["__scopeId", "data-v-e225c8a8"]]), Ce = { class: "tree-normal-node" }, Ne = /* @__PURE__ */ k({
+}), ke = /* @__PURE__ */ v($e, [["__scopeId", "data-v-e225c8a8"]]), Ce = { class: "tree-normal-node" }, Ne = /* @__PURE__ */ x({
   name: "DasVirtualTree",
   inheritAttrs: !1,
   __name: "App",
@@ -133,90 +127,90 @@ const ge = /* @__PURE__ */ _(ve, [["render", ye], ["__scopeId", "data-v-f7548f22
     emptyText: { default: "" },
     filterMethod: {}
   },
-  setup(t, { expose: a }) {
-    const s = u(), r = u(), o = u(0), e = t, I = m(() => e.emptyText || Y("暂无数据")), c = m(() => ({ label: "name", children: "children", disabled: "disabled", ...e.props, value: e.nodeKey })), O = m(() => e != null && e.height ? e.height + "px" : "100%"), R = m(() => e != null && e.height ? e.height : o.value), V = (n, l) => l[c.value.label].toLowerCase().includes(n.toLowerCase()), M = m(() => (e == null ? void 0 : e.filterMethod) ?? V), S = () => {
+  setup(a, { expose: t }) {
+    const d = p(), c = p(), f = p(0), e = a, I = u(() => e.emptyText || Y("暂无数据")), r = u(() => ({ label: "name", children: "children", disabled: "disabled", ...e.props, value: e.nodeKey })), L = u(() => e != null && e.height ? e.height + "px" : "100%"), O = u(() => e != null && e.height ? e.height : f.value), R = (n, o) => o[r.value.label].toLowerCase().includes(n.toLowerCase()), V = u(() => (e == null ? void 0 : e.filterMethod) ?? R), S = () => {
       if (e.data && e.data.length) {
-        const l = z(e.data, c.value.children, !1).filter((i) => i[c.value.children] && i[c.value.children].length).map((i) => i[e.nodeKey]);
+        const o = N(e.data, r.value.children, !1).filter((s) => s[r.value.children] && s[r.value.children].length).map((s) => s[e.nodeKey]);
         G(() => {
-          var i;
-          (i = r.value) == null || i.setExpandedKeys(l);
+          var s;
+          (s = c.value) == null || s.setExpandedKeys(o);
         });
       }
     };
-    h(
+    C(
       () => e.defaultExpandAll,
       (n) => {
         n && S();
       },
       { immediate: !0 }
-    ), h(
+    ), C(
       () => e.data,
-      (n, l) => {
+      (n, o) => {
         if (!e.defaultExpandAll) return;
-        const i = n && n.length ? n : [], p = l && l.length ? l : [], w = z(i).map((N) => N[e.nodeKey]), F = z(p).map((N) => N[e.nodeKey]);
-        p.length && JSON.stringify(w) === JSON.stringify(F) || S();
+        const s = n && n.length ? n : [], m = o && o.length ? o : [], M = N(s).map((k) => k[e.nodeKey]), F = N(m).map((k) => k[e.nodeKey]);
+        m.length && JSON.stringify(M) === JSON.stringify(F) || S();
       }
     );
-    const C = u(!1);
-    h(
+    const $ = p(!1);
+    C(
       () => e.data,
       (n) => {
         if (n && n.length) {
-          const l = n.find(
-            (i) => i[c.value.children] && i[c.value.children].length
+          const o = n.find(
+            (s) => s[r.value.children] && s[r.value.children].length
           );
-          C.value = !l;
+          $.value = !o;
         } else
-          C.value = !1;
+          $.value = !1;
       },
       { immediate: !0, deep: !0 }
     );
-    const b = u();
+    const b = p();
     return W(() => {
       b.value = ne(
         (n) => {
-          o.value = n.height;
+          f.value = n.height;
         },
-        s.value.parentElement
+        d.value.parentElement
       );
     }), U(() => {
       b.value.disconnect();
-    }), a({
-      treeRef: r
-    }), (n, l) => (d(), f(
+    }), t({
+      treeRef: c
+    }), (n, o) => (i(), l(
       "div",
       {
         ref_key: "cotainerRef",
-        ref: s,
+        ref: d,
         class: "das-ui-tree das-ui-virtual-tree",
-        style: j({ height: O.value })
+        style: j({ height: L.value })
       },
       [
-        t.data && t.data.length ? (d(), T($(X), L({
+        a.data && a.data.length ? (i(), z(T(X), K({
           key: 0,
           ref_key: "treeRef",
-          ref: r,
-          data: t.data,
-          class: { "is-root-all-left": C.value },
+          ref: c,
+          data: a.data,
+          class: { "is-root-all-left": $.value },
           icon: ke,
-          props: c.value,
+          props: r.value,
           "show-checkbox": !1,
-          "expand-on-click-node": t.expandOnClickNode,
-          height: R.value,
+          "expand-on-click-node": a.expandOnClickNode,
+          height: O.value,
           "item-size": 32,
           "default-expand-all": "",
-          "filter-method": M.value,
+          "filter-method": V.value,
           "empty-text": I.value
         }, n.$attrs), {
-          default: g(({ node: i, data: p }) => [
-            x(n.$slots, "default", {
-              node: i,
-              data: p
+          default: _(({ node: s, data: m }) => [
+            g(n.$slots, "default", {
+              node: s,
+              data: m
             }, () => [
-              v(
+              h(
                 "div",
                 Ce,
-                B(p[c.value.label]),
+                B(m[r.value.label]),
                 1
                 /* TEXT */
               )
@@ -224,22 +218,22 @@ const ge = /* @__PURE__ */ _(ve, [["render", ye], ["__scopeId", "data-v-f7548f22
           ]),
           _: 3
           /* FORWARDED */
-        }, 16, ["data", "class", "props", "expand-on-click-node", "height", "filter-method", "empty-text"])) : (d(), f(
+        }, 16, ["data", "class", "props", "expand-on-click-node", "height", "filter-method", "empty-text"])) : (i(), l(
           E,
           { key: 1 },
           [
             D(" 空状态 "),
-            t.loading ? (d(), f(
+            a.loading ? (i(), l(
               E,
               { key: 1 },
               [
                 D(" 加载状态 "),
-                K(xe, {
+                w(xe, {
                   size: "small",
-                  spinning: t.loading
+                  spinning: a.loading
                 }, {
-                  default: g(() => [...l[0] || (l[0] = [
-                    v(
+                  default: _(() => [...o[0] || (o[0] = [
+                    h(
                       "div",
                       { style: { width: "100%", height: "100%" } },
                       null,
@@ -253,7 +247,7 @@ const ge = /* @__PURE__ */ _(ve, [["render", ye], ["__scopeId", "data-v-f7548f22
               ],
               2112
               /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-            )) : (d(), T(le, {
+            )) : (i(), z(de, {
               key: 0,
               "empty-text": I.value
             }, q({
@@ -262,8 +256,8 @@ const ge = /* @__PURE__ */ _(ve, [["render", ye], ["__scopeId", "data-v-f7548f22
             }, [
               n.$slots["empty-text"] ? {
                 name: "default",
-                fn: g(() => [
-                  x(n.$slots, "empty-text")
+                fn: _(() => [
+                  g(n.$slots, "empty-text")
                 ]),
                 key: "0"
               } : void 0
@@ -279,9 +273,9 @@ const ge = /* @__PURE__ */ _(ve, [["render", ye], ["__scopeId", "data-v-f7548f22
   }
 }), ze = { 暂无数据: { "zh-CN": "暂无数据", en: "No Data", "zh-MO": "暫無數據", _appCode: "framework" } };
 Z(ze);
-const Ve = Q(Ne), Me = () => u(null), we = { title: "virtual-tree 虚拟树" };
+const Re = Q(Ne), Ve = () => p(null), Me = { title: "virtual-tree 虚拟树" };
 export {
-  Ve as DasVirtualTree,
-  Me as DasVirtualTreeRef,
-  we as default
+  Re as DasVirtualTree,
+  Ve as DasVirtualTreeRef,
+  Me as default
 };

package/presets/theme-cjb.css

@@ -1,21 +1,26 @@
 :root {
-  --upf-brand-primary: #ffffff;
-  --upf-brand-secondary: #f2f6ff;
   --upf-color-primary: #5582f3;
   --upf-color-primary-bg: #ebf1fe;
   --upf-color-success: #52c41a;
   --upf-color-warning: #faad14;
   --upf-color-error: #ff4d4f;
   --upf-color-info: #1890ff;
-  --upf-text-primary: #212121;
-  --upf-text-secondary: #666666;
   --upf-text-disabled: #B2B2B2;
-  --upf-text-placeholder: #bfbfbf;
   --upf-bg-primary: #ffffff;
   --upf-bg-secondary: #F2F2F2;
   --upf-bg-elevated: #ffffff;
-  --upf-bg-mask: rgba(0, 0, 0, 0.45);
   --upf-border-color: #D9D9D9;
+  --upf-nav-border-color: rgba(235, 239, 245, 1);
+  --upf-tab-bg: #ffffff;
+  --upf-tab-text: #666666;
+  --upf-tab-active-bg: #ffffff;
+  --upf-border-radius: 4px;
+  --upf-brand-primary: #ffffff;
+  --upf-brand-secondary: #f2f6ff;
+  --upf-text-primary: #212121;
+  --upf-text-secondary: #666666;
+  --upf-text-placeholder: #bfbfbf;
+  --upf-bg-mask: rgba(0, 0, 0, 0.45);
   --upf-divider-color: #ebeff5;
   --upf-nav-bg: #ffffff;
   --upf-nav-text: #212121;
@@ -28,12 +33,8 @@
   --upf-menu-active-bg: #f2f6ff;
   --upf-menu-active-text: #5582f3;
   --upf-menu-submenu-bg: #ffffff;
-  --upf-tab-bg: #ffffff;
-  --upf-tab-text: #666666;
   --upf-tab-hover-bg: #f2f6ff;
-  --upf-tab-active-bg: #ffffff;
   --upf-tab-active-text: #5582f3;
-  --upf-border-radius: 4px;
   --upf-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   --upf-box-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.12);
   --upf-button-primary: #5582f3;
@@ -218,6 +219,8 @@
   --das-user-manage-white: #ffffff;
   --das-user-manage-shadow-color: rgba(38, 38, 38, 0.1);
   --das-user-manage-border-color: rgba(38, 38, 38, 0.1);
+  --das-layout-micro-container-bg-color: #e2e7ef;
+  --das-layout-breadcrumb-bg-color: #ffffff;
   --das-ui-font-size-sm: 12px;
   --das-ui-font-size-md: 14px;
   --das-ui-font-size-lg: 16px;
@@ -268,7 +271,7 @@
   --das-ui-upload-border-color: #D9D9D9;
   --das-ui-upload-bgcolor: #F2F2F2;
   --das-ui-search-form-tip-color: #666666;
-  --das-ui-layout-header-menu-border-color: #D9D9D9;
+  --das-ui-layout-header-menu-border-color: rgba(235, 239, 245, 1);
   --das-ui-layout-header-menu-background-color: #ffffff;
   --das-ui-layout-header-menu-color: #212121;
   --das-ui-layout-header-menu-hover-background-color: #f2f6ff;

package/presets/theme-default.css

@@ -1,21 +1,26 @@
 :root {
-  --upf-brand-primary: #0e5fd8;
-  --upf-brand-secondary: #3579de;
   --upf-color-primary: #5582f3;
   --upf-color-primary-bg: #ebf1fe;
   --upf-color-success: #52c41a;
   --upf-color-warning: #faad14;
   --upf-color-error: #ff4d4f;
   --upf-color-info: #1890ff;
-  --upf-text-primary: #231815;
-  --upf-text-secondary: #666666;
   --upf-text-disabled: #B2B2B2;
-  --upf-text-placeholder: #bfbfbf;
   --upf-bg-primary: #ffffff;
   --upf-bg-secondary: #F2F2F2;
   --upf-bg-elevated: #ffffff;
-  --upf-bg-mask: rgba(0, 0, 0, 0.45);
   --upf-border-color: #D9D9D9;
+  --upf-nav-border-color: rgba(235, 239, 245, 1);
+  --upf-tab-bg: #ffffff;
+  --upf-tab-text: #666666;
+  --upf-tab-active-bg: #ffffff;
+  --upf-border-radius: 4px;
+  --upf-brand-primary: #0e5fd8;
+  --upf-brand-secondary: #3579de;
+  --upf-text-primary: #231815;
+  --upf-text-secondary: #666666;
+  --upf-text-placeholder: #bfbfbf;
+  --upf-bg-mask: rgba(0, 0, 0, 0.45);
   --upf-divider-color: #ebeff5;
   --upf-nav-bg: #0e5fd8;
   --upf-nav-text: #ffffff;
@@ -28,12 +33,8 @@
   --upf-menu-active-bg: #eef3fe;
   --upf-menu-active-text: #5582f3;
   --upf-menu-submenu-bg: #ffffff;
-  --upf-tab-bg: #ffffff;
-  --upf-tab-text: #666666;
   --upf-tab-hover-bg: #eef3fe;
-  --upf-tab-active-bg: #ffffff;
   --upf-tab-active-text: #5582f3;
-  --upf-border-radius: 4px;
   --upf-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   --upf-box-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.15);
   --upf-button-primary: #5582f3;
@@ -218,6 +219,8 @@
   --das-user-manage-white: #ffffff;
   --das-user-manage-shadow-color: rgba(38, 38, 38, 0.1);
   --das-user-manage-border-color: rgba(38, 38, 38, 0.1);
+  --das-layout-micro-container-bg-color: #e2e7ef;
+  --das-layout-breadcrumb-bg-color: #ffffff;
   --das-ui-font-size-sm: 12px;
   --das-ui-font-size-md: 14px;
   --das-ui-font-size-lg: 16px;
@@ -268,7 +271,7 @@
   --das-ui-upload-border-color: #D9D9D9;
   --das-ui-upload-bgcolor: #F2F2F2;
   --das-ui-search-form-tip-color: #666666;
-  --das-ui-layout-header-menu-border-color: #D9D9D9;
+  --das-ui-layout-header-menu-border-color: rgba(235, 239, 245, 1);
   --das-ui-layout-header-menu-background-color: #0e5fd8;
   --das-ui-layout-header-menu-color: #ffffff;
   --das-ui-layout-header-menu-hover-background-color: #3579de;

package/presets/theme-dkh.css

@@ -1,21 +1,26 @@
 :root {
-  --upf-brand-primary: #eb0e1b;
-  --upf-brand-secondary: #f15760;
   --upf-color-primary: #e63946;
   --upf-color-primary-bg: #fce8ea;
   --upf-color-success: #52c41a;
   --upf-color-warning: #faad14;
   --upf-color-error: #ff4d4f;
   --upf-color-info: #1890ff;
-  --upf-text-primary: #231815;
-  --upf-text-secondary: #666666;
   --upf-text-disabled: #B2B2B2;
-  --upf-text-placeholder: #bfbfbf;
   --upf-bg-primary: #ffffff;
   --upf-bg-secondary: #F2F2F2;
   --upf-bg-elevated: #ffffff;
-  --upf-bg-mask: rgba(0, 0, 0, 0.45);
   --upf-border-color: #D9D9D9;
+  --upf-nav-border-color: rgba(235, 239, 245, 1);
+  --upf-tab-bg: #ffffff;
+  --upf-tab-text: #666666;
+  --upf-tab-active-bg: #ffffff;
+  --upf-border-radius: 4px;
+  --upf-brand-primary: #eb0e1b;
+  --upf-brand-secondary: #f15760;
+  --upf-text-primary: #231815;
+  --upf-text-secondary: #666666;
+  --upf-text-placeholder: #bfbfbf;
+  --upf-bg-mask: rgba(0, 0, 0, 0.45);
   --upf-divider-color: #ebeff5;
   --upf-nav-bg: #eb0e1b;
   --upf-nav-text: #ffffff;
@@ -28,12 +33,8 @@
   --upf-menu-active-bg: #fce8ea;
   --upf-menu-active-text: #e63946;
   --upf-menu-submenu-bg: #ffffff;
-  --upf-tab-bg: #ffffff;
-  --upf-tab-text: #666666;
   --upf-tab-hover-bg: #fce8ea;
-  --upf-tab-active-bg: #ffffff;
   --upf-tab-active-text: #e63946;
-  --upf-border-radius: 4px;
   --upf-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   --upf-box-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.12);
   --upf-button-primary: #e63946;
@@ -218,6 +219,8 @@
   --das-user-manage-white: #ffffff;
   --das-user-manage-shadow-color: rgba(38, 38, 38, 0.1);
   --das-user-manage-border-color: rgba(38, 38, 38, 0.1);
+  --das-layout-micro-container-bg-color: #e2e7ef;
+  --das-layout-breadcrumb-bg-color: #ffffff;
   --das-ui-font-size-sm: 12px;
   --das-ui-font-size-md: 14px;
   --das-ui-font-size-lg: 16px;
@@ -268,7 +271,7 @@
   --das-ui-upload-border-color: #D9D9D9;
   --das-ui-upload-bgcolor: #F2F2F2;
   --das-ui-search-form-tip-color: #666666;
-  --das-ui-layout-header-menu-border-color: #D9D9D9;
+  --das-ui-layout-header-menu-border-color: rgba(235, 239, 245, 1);
   --das-ui-layout-header-menu-background-color: #eb0e1b;
   --das-ui-layout-header-menu-color: #ffffff;
   --das-ui-layout-header-menu-hover-background-color: rgba(255, 255, 255, 0.3);