@oneflowui/ui 0.5.9 → 0.7.0

package/README.en.md

@@ -110,6 +110,25 @@ import '@oneflowui/ui/styles'
 
 Note: starting from `0.5.4`, the plugin entry is separated from the root entry. Use `@oneflowui/ui/plugin` for `app.use(...)`, and keep named imports on `@oneflowui/ui`.
 
+### Theme Layers
+
+OneUI now ships with a neutral default theme and an optional product skin without changing component logic.
+
+- Default theme: `neutral`
+- Optional skin: `ops-console`
+
+Recommended usage is to keep components on shared tokens and switch the theme at the app layer instead of overriding component internals.
+
+```ts
+import '@oneflowui/ui/styles'
+
+document.documentElement.dataset.ofTheme = 'neutral'
+// or
+document.documentElement.dataset.ofTheme = 'ops-console'
+```
+
+This structure is meant to keep the component layer reusable while letting product-specific styling live above it.
+
 ---
 
 ## Usage Examples

package/README.md

@@ -97,6 +97,29 @@ import '@oneflowui/ui/styles'
 
 说明：从 `0.5.4` 开始，`plugin` 入口与根入口解耦。全局注册走 `@oneflowui/ui/plugin`，命名导入继续走 `@oneflowui/ui`。
 
+### 主题层
+
+OneUI 当前默认提供一套中性主题，并允许在不改组件逻辑的前提下切换到上层产品皮肤。
+
+- 默认主题：`neutral`
+- 可选皮肤：`ops-console`
+
+推荐做法是让组件继续消费统一 token，然后由应用层切换主题，而不是直接覆盖组件内部样式。
+
+```ts
+import '@oneflowui/ui/styles'
+
+document.documentElement.dataset.ofTheme = 'neutral'
+// 或
+document.documentElement.dataset.ofTheme = 'ops-console'
+```
+
+这套结构的目标是：
+
+1. 组件默认保持中性、可复用
+2. 业务系统通过主题皮肤注入品牌感或中控台气质
+3. 后续可继续扩展更多主题，而不需要修改组件 API
+
 ---
 
 ## 页面级方案

package/dist/components/Dashboard/charts/BarChart.vue.js

@@ -1,7 +1,7 @@
 import o from "./BarChart.vue2.js";
 /* empty css              */
 import r from "../../../_virtual/_plugin-vue_export-helper.js";
-const d = /* @__PURE__ */ r(o, [["__scopeId", "data-v-dfd12dfa"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-7cbf158c"]]);
 export {
-  d as default
+  f as default
 };

package/dist/components/Dashboard/charts/BarChart.vue2.js

@@ -1,39 +1,72 @@
-import { defineComponent as s, ref as l, onMounted as n, onUnmounted as d, watch as c, openBlock as u, createElementBlock as f, createElementVNode as p } from "vue";
-import * as m from "echarts/core";
+import { defineComponent as d, ref as c, onMounted as u, onUnmounted as f, watch as p, openBlock as m, createElementBlock as x, createElementVNode as y } from "vue";
+import * as h from "echarts/core";
 import "echarts/charts";
 import "echarts/components";
 import "echarts/renderers";
-const x = { class: "of-dashboard-chart" }, A = /* @__PURE__ */ s({
+const v = { class: "of-dashboard-chart" }, w = /* @__PURE__ */ d({
   __name: "BarChart",
   props: {
     title: { default: "" },
     xAxisData: { default: () => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
     seriesName: { default: "Value" },
     data: { default: () => [120, 200, 150, 80, 70, 110, 130] },
-    colors: { default: () => ["#3b82f6"] }
+    colors: { default: () => ["var(--of-chart-series-1)"] }
   },
-  setup(i) {
-    const e = i, a = l(null);
-    let t = null, o = null;
-    const r = () => {
-      a.value && (t || (t = m.init(a.value)), t.setOption({
-        color: e.colors,
-        title: e.title ? { text: e.title, left: "center", textStyle: { fontSize: 14, fontWeight: 600 } } : void 0,
+  setup(n) {
+    const e = n, a = c(null);
+    let t = null, i = null;
+    function o(r) {
+      if (typeof window > "u" || !r.startsWith("var(")) return r;
+      const s = r.slice(4, -1).trim();
+      return getComputedStyle(document.documentElement).getPropertyValue(s).trim() || r;
+    }
+    const l = () => {
+      if (!a.value) return;
+      t || (t = h.init(a.value));
+      const r = e.colors.map(o);
+      t.setOption({
+        color: r,
+        title: e.title ? {
+          text: e.title,
+          left: "center",
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 600,
+            color: o("var(--of-text-primary)")
+          }
+        } : void 0,
         tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
         grid: { left: 12, right: 12, top: e.title ? 42 : 16, bottom: 8, containLabel: !0 },
-        xAxis: { type: "category", data: e.xAxisData },
-        yAxis: { type: "value" },
-        series: [{ name: e.seriesName, type: "bar", barMaxWidth: 36, data: e.data }]
-      }));
+        xAxis: {
+          type: "category",
+          data: e.xAxisData,
+          axisLabel: { color: o("var(--of-text-tertiary)") },
+          axisLine: { lineStyle: { color: o("var(--of-border-subtle)") } }
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: { color: o("var(--of-text-tertiary)") },
+          splitLine: { lineStyle: { color: o("var(--of-border-subtle)") } }
+        },
+        series: [
+          {
+            name: e.seriesName,
+            type: "bar",
+            barMaxWidth: 36,
+            data: e.data,
+            itemStyle: { borderRadius: [8, 8, 0, 0] }
+          }
+        ]
+      });
     };
-    return n(() => {
-      r(), a.value && (o = new ResizeObserver(() => t == null ? void 0 : t.resize()), o.observe(a.value));
-    }), d(() => {
-      o == null || o.disconnect(), t == null || t.dispose();
-    }), c(() => [e.title, e.xAxisData, e.seriesName, e.data, e.colors], r, {
+    return u(() => {
+      l(), a.value && (i = new ResizeObserver(() => t == null ? void 0 : t.resize()), i.observe(a.value));
+    }), f(() => {
+      i == null || i.disconnect(), t == null || t.dispose();
+    }), p(() => [e.title, e.xAxisData, e.seriesName, e.data, e.colors], l, {
       deep: !0
-    }), (h, _) => (u(), f("div", x, [
-      p("div", {
+    }), (r, s) => (m(), x("div", v, [
+      y("div", {
         ref_key: "chartRef",
         ref: a,
         class: "of-dashboard-chart__canvas"
@@ -42,5 +75,5 @@ const x = { class: "of-dashboard-chart" }, A = /* @__PURE__ */ s({
   }
 });
 export {
-  A as default
+  w as default
 };

package/dist/components/Dashboard/charts/NumberCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./NumberCard.vue2.js";
 /* empty css                */
 import r from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-2287094b"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bf4a8d8b"]]);
 export {
-  p as default
+  f as default
 };

package/dist/components/Dashboard/charts/NumberCard.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as s, computed as i, openBlock as o, createElementBlock as a, createElementVNode as r, toDisplayString as n, normalizeStyle as m, createBlock as c, unref as l, createCommentVNode as u } from "vue";
+import { defineComponent as s, computed as i, openBlock as r, createElementBlock as a, createElementVNode as o, toDisplayString as n, normalizeStyle as m, createBlock as c, unref as l, createCommentVNode as d } from "vue";
 import { TrendingUpIcon as f, TrendingDownIcon as _ } from "lucide-vue-next";
 const p = { class: "of-number-card" }, v = { class: "of-number-card__title" }, b = { class: "of-number-card__value-row" }, y = {
   key: 0,
   class: "of-number-card__compare"
-}, g = /* @__PURE__ */ s({
+}, $ = /* @__PURE__ */ s({
   __name: "NumberCard",
   props: {
     title: { default: "Metric" },
@@ -11,31 +11,31 @@ const p = { class: "of-number-card" }, v = { class: "of-number-card__title" }, b
     unit: { default: "" },
     compare: { default: "" },
     trend: { default: void 0 },
-    color: { default: "var(--of-color-blue-600)" }
+    color: { default: "var(--of-accent-strong)" }
   },
   setup(e) {
-    const t = e, d = i(() => t.value >= 1e4 ? `${(t.value / 1e4).toFixed(1)}w${t.unit}` : `${t.value}${t.unit}`);
-    return (k, h) => (o(), a("div", p, [
-      r("p", v, n(e.title), 1),
-      r("div", b, [
-        r("p", {
+    const t = e, u = i(() => t.value >= 1e4 ? `${(t.value / 1e4).toFixed(1)}w${t.unit}` : `${t.value}${t.unit}`);
+    return (k, h) => (r(), a("div", p, [
+      o("p", v, n(e.title), 1),
+      o("div", b, [
+        o("p", {
           class: "of-number-card__value",
           style: m({ color: e.color })
-        }, n(d.value), 5),
-        e.trend === "up" ? (o(), c(l(f), {
+        }, n(u.value), 5),
+        e.trend === "up" ? (r(), c(l(f), {
           key: 0,
           class: "of-number-card__trend up",
           size: 16
-        })) : e.trend === "down" ? (o(), c(l(_), {
+        })) : e.trend === "down" ? (r(), c(l(_), {
           key: 1,
           class: "of-number-card__trend down",
           size: 16
-        })) : u("", !0)
+        })) : d("", !0)
       ]),
-      e.compare ? (o(), a("p", y, "环比 " + n(e.compare), 1)) : u("", !0)
+      e.compare ? (r(), a("p", y, "环比 " + n(e.compare), 1)) : d("", !0)
     ]));
   }
 });
 export {
-  g as default
+  $ as default
 };

package/dist/components/Dashboard/charts/PieChart.vue.js

@@ -1,7 +1,7 @@
 import o from "./PieChart.vue2.js";
 /* empty css              */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9e918a55"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4e78b0c6"]]);
 export {
   m as default
 };

package/dist/components/Dashboard/charts/PieChart.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as r, ref as s, onMounted as d, onUnmounted as i, watch as u, openBlock as f, createElementBlock as c, createElementVNode as p } from "vue";
-import * as m from "echarts/core";
+import { defineComponent as d, ref as c, onMounted as f, onUnmounted as u, watch as m, openBlock as p, createElementBlock as h, createElementVNode as v } from "vue";
+import * as g from "echarts/core";
 import "echarts/charts";
 import "echarts/components";
 import "echarts/renderers";
-const h = { class: "of-dashboard-chart" }, x = /* @__PURE__ */ r({
+const y = { class: "of-dashboard-chart" }, C = /* @__PURE__ */ d({
   __name: "PieChart",
   props: {
     title: { default: "" },
@@ -12,45 +12,71 @@ const h = { class: "of-dashboard-chart" }, x = /* @__PURE__ */ r({
       { name: "In Progress", value: 9 },
       { name: "Done", value: 18 }
     ] },
-    colors: { default: () => ["#3b82f6", "#10b981", "#f59e0b", "#8b5cf6", "#ef4444"] },
+    colors: { default: () => [
+      "var(--of-chart-series-1)",
+      "var(--of-chart-series-2)",
+      "var(--of-chart-series-3)",
+      "var(--of-chart-series-4)",
+      "var(--of-chart-series-5)"
+    ] },
     doughnut: { type: Boolean, default: !1 },
     showLegend: { type: Boolean, default: !0 }
   },
-  setup(l) {
-    const e = l, o = s(null);
-    let t = null, n = null;
-    const a = () => {
-      o.value && (t || (t = m.init(o.value)), t.setOption({
-        color: e.colors,
-        title: e.title ? { text: e.title, left: "center", textStyle: { fontSize: 14, fontWeight: 600 } } : void 0,
+  setup(i) {
+    const e = i, r = c(null);
+    let t = null, a = null;
+    function n(o) {
+      if (typeof window > "u" || !o.startsWith("var(")) return o;
+      const l = o.slice(4, -1).trim();
+      return getComputedStyle(document.documentElement).getPropertyValue(l).trim() || o;
+    }
+    const s = () => {
+      if (!r.value) return;
+      t || (t = g.init(r.value));
+      const o = e.colors.map(n);
+      t.setOption({
+        color: o,
+        title: e.title ? {
+          text: e.title,
+          left: "center",
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 600,
+            color: n("var(--of-text-primary)")
+          }
+        } : void 0,
         tooltip: { trigger: "item" },
-        legend: e.showLegend ? { bottom: 0 } : void 0,
+        legend: e.showLegend ? { bottom: 0, textStyle: { color: n("var(--of-text-secondary)") } } : void 0,
         series: [
           {
             type: "pie",
             radius: e.doughnut ? ["45%", "70%"] : "65%",
             center: ["50%", e.showLegend ? "45%" : "50%"],
             data: e.data,
-            label: { formatter: "{b}: {d}%" }
+            label: { formatter: "{b}: {d}%" },
+            itemStyle: {
+              borderColor: n("var(--of-surface-elevated)"),
+              borderWidth: 2
+            }
           }
         ]
-      }));
+      });
     };
-    return d(() => {
-      a(), o.value && (n = new ResizeObserver(() => t == null ? void 0 : t.resize()), n.observe(o.value));
-    }), i(() => {
-      n == null || n.disconnect(), t == null || t.dispose();
-    }), u(() => [e.title, e.data, e.colors, e.doughnut, e.showLegend], a, {
+    return f(() => {
+      s(), r.value && (a = new ResizeObserver(() => t == null ? void 0 : t.resize()), a.observe(r.value));
+    }), u(() => {
+      a == null || a.disconnect(), t == null || t.dispose();
+    }), m(() => [e.title, e.data, e.colors, e.doughnut, e.showLegend], s, {
       deep: !0
-    }), (v, g) => (f(), c("div", h, [
-      p("div", {
+    }), (o, l) => (p(), h("div", y, [
+      v("div", {
         ref_key: "chartRef",
-        ref: o,
+        ref: r,
         class: "of-dashboard-chart__canvas"
       }, null, 512)
     ]));
   }
 });
 export {
-  x as default
+  C as default
 };

package/dist/components/Dashboard/charts/TableChart.vue.js

@@ -1,7 +1,7 @@
 import o from "./TableChart.vue2.js";
 /* empty css                */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2b60cfd2"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6b6fb763"]]);
 export {
   m as default
 };

package/dist/components/Dashboard/index.vue.d.ts

@@ -20,5 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     columns: number;
     gap: number;
     widgets: DashboardWidget[];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dashboardRef: HTMLElement;
+}, HTMLElement>;
 export default _default;

package/dist/components/Dashboard/index.vue.js

@@ -1,7 +1,7 @@
 import o from "./index.vue2.js";
 /* empty css           */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d68d4403"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-eff3b1be"]]);
 export {
-  p as default
+  m as default
 };

package/dist/components/Dashboard/index.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as m, defineAsyncComponent as t, computed as s, openBlock as o, createElementBlock as r, createElementVNode as n, toDisplayString as u, normalizeStyle as i, Fragment as f, renderList as b, createBlock as y, resolveDynamicComponent as _, mergeProps as h } from "vue";
-const g = { class: "of-dashboard" }, S = { class: "of-dashboard__header" }, v = { class: "of-dashboard__title" }, C = /* @__PURE__ */ m({
+import { defineComponent as M, defineAsyncComponent as o, ref as h, computed as s, onMounted as k, onBeforeUnmount as w, openBlock as d, createElementBlock as u, createElementVNode as c, toDisplayString as D, normalizeStyle as b, Fragment as R, renderList as x, createBlock as C, resolveDynamicComponent as B, mergeProps as E } from "vue";
+const F = { class: "of-dashboard__header" }, T = { class: "of-dashboard__title" }, I = /* @__PURE__ */ M({
   __name: "index",
   props: {
     title: { default: "Dashboard" },
@@ -7,17 +7,45 @@ const g = { class: "of-dashboard" }, S = { class: "of-dashboard__header" }, v =
     columns: { default: 4 },
     gap: { default: 16 }
   },
-  setup(l) {
-    const a = l, d = {
-      bar: t(() => import("./charts/BarChart.vue.js")),
-      pie: t(() => import("./charts/PieChart.vue.js")),
-      doughnut: t(() => import("./charts/DoughnutChart.vue2.js")),
-      "number-card": t(() => import("./charts/NumberCard.vue.js")),
-      table: t(() => import("./charts/TableChart.vue.js"))
-    }, c = s(() => ({
-      gridTemplateColumns: `repeat(${a.columns}, minmax(0, 1fr))`,
-      gap: `${a.gap}px`
-    })), p = s(() => a.widgets.length > 0 ? a.widgets : [
+  setup(p) {
+    const r = p, v = {
+      bar: o(() => import("./charts/BarChart.vue.js")),
+      pie: o(() => import("./charts/PieChart.vue.js")),
+      doughnut: o(() => import("./charts/DoughnutChart.vue2.js")),
+      "number-card": o(() => import("./charts/NumberCard.vue.js")),
+      table: o(() => import("./charts/TableChart.vue.js"))
+    }, l = h(null), i = h(0);
+    let a = null;
+    const y = s(() => Math.max(1, Math.floor(r.columns))), m = s(() => {
+      const e = i.value, t = y.value;
+      return e ? e < 560 ? 1 : e < 840 ? Math.min(t, 2) : e < 1120 ? Math.min(t, 3) : t : t;
+    }), g = s(() => ({
+      "--dashboard-columns": String(m.value),
+      gap: `${r.gap}px`
+    }));
+    function f(e) {
+      var t;
+      if (e) {
+        i.value = Math.round(e.contentRect.width);
+        return;
+      }
+      i.value = Math.round(((t = l.value) == null ? void 0 : t.getBoundingClientRect().width) ?? 0);
+    }
+    k(() => {
+      f(), !(typeof ResizeObserver > "u" || !l.value) && (a = new ResizeObserver((e) => {
+        e[0] && f(e[0]);
+      }), a.observe(l.value));
+    }), w(() => {
+      a == null || a.disconnect(), a = null;
+    });
+    function _(e) {
+      const t = m.value;
+      return {
+        gridColumn: `span ${Math.min(e.colSpan ?? 1, t)}`,
+        gridRow: `span ${e.rowSpan ?? 1}`
+      };
+    }
+    const S = s(() => r.widgets.length > 0 ? r.widgets : [
       {
         id: "metric-1",
         type: "number-card",
@@ -69,31 +97,32 @@ const g = { class: "of-dashboard" }, S = { class: "of-dashboard__header" }, v =
         colSpan: 4
       }
     ]);
-    return (k, D) => (o(), r("section", g, [
-      n("header", S, [
-        n("h3", v, u(l.title), 1)
+    return (e, t) => (d(), u("section", {
+      ref_key: "dashboardRef",
+      ref: l,
+      class: "of-dashboard"
+    }, [
+      c("header", F, [
+        c("h3", T, D(p.title), 1)
       ]),
-      n("div", {
+      c("div", {
         class: "of-dashboard__grid",
-        style: i(c.value)
+        style: b(g.value)
       }, [
-        (o(!0), r(f, null, b(p.value, (e) => (o(), r("article", {
-          key: e.id,
+        (d(!0), u(R, null, x(S.value, (n) => (d(), u("article", {
+          key: n.id,
           class: "of-dashboard__item",
-          style: i({
-            gridColumn: `span ${e.colSpan ?? 1}`,
-            gridRow: `span ${e.rowSpan ?? 1}`
-          })
+          style: b(_(n))
         }, [
-          (o(), y(_(d[e.type]), h({
-            title: e.title,
-            data: e.data
-          }, { ref_for: !0 }, e.config ?? {}), null, 16, ["title", "data"]))
+          (d(), C(B(v[n.type]), E({
+            title: n.title,
+            data: n.data
+          }, { ref_for: !0 }, n.config ?? {}), null, 16, ["title", "data"]))
         ], 4))), 128))
       ], 4)
-    ]));
+    ], 512));
   }
 });
 export {
-  C as default
+  I as default
 };

package/dist/components/ai/AiMessageBubble.vue.js

@@ -1,7 +1,7 @@
 import o from "./AiMessageBubble.vue2.js";
 /* empty css                     */
-import e from "../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-8ed0bf6d"]]);
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5ca6c2bf"]]);
 export {
-  a as default
+  s as default
 };

package/dist/components/ai/AiSender.vue.js

@@ -1,7 +1,7 @@
 import o from "./AiSender.vue2.js";
 /* empty css              */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-3d40431f"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-7260094c"]]);
 export {
-  m as default
+  p as default
 };

package/dist/components/ai/AiThinking.vue.js

@@ -1,7 +1,7 @@
 import o from "./AiThinking.vue2.js";
 /* empty css                */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-f40004bf"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-94f5b5b9"]]);
 export {
   m as default
 };

package/dist/components/ai/UserMessageBubble.vue.js

@@ -1,7 +1,7 @@
-import o from "./UserMessageBubble.vue2.js";
+import e from "./UserMessageBubble.vue2.js";
 /* empty css                       */
-import e from "../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-0a14f8b1"]]);
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-c82f767e"]]);
 export {
   a as default
 };

package/dist/components/auxiliary/ColorPanel.vue.js

@@ -1,7 +1,7 @@
 import o from "./ColorPanel.vue2.js";
 /* empty css                */
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fe537ba5"]]);
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-a4b061a3"]]);
 export {
-  f as default
+  p as default
 };

package/dist/components/auxiliary/ColorPanel.vue2.js

@@ -1,22 +1,22 @@
-import { defineComponent as p, computed as _, openBlock as s, createElementBlock as d, normalizeClass as h, createElementVNode as o, toDisplayString as r, withDirectives as u, vModelText as b, createCommentVNode as v, Fragment as k, renderList as y, normalizeStyle as V } from "vue";
-const C = { class: "of-color-panel__header" }, g = { class: "of-color-panel__label" }, w = { class: "of-color-panel__value" }, x = { class: "of-color-panel__picker-row" }, B = ["aria-label", "disabled"], P = ["aria-label", "disabled"], $ = { class: "of-color-panel__presets" }, z = ["title", "disabled", "onClick"], I = /* @__PURE__ */ p({
+import { defineComponent as f, computed as _, openBlock as s, createElementBlock as d, normalizeClass as h, createElementVNode as o, toDisplayString as r, withDirectives as u, vModelText as b, createCommentVNode as v, Fragment as k, renderList as y, normalizeStyle as V } from "vue";
+const C = { class: "of-color-panel__header" }, g = { class: "of-color-panel__label" }, w = { class: "of-color-panel__value" }, x = { class: "of-color-panel__picker-row" }, B = ["aria-label", "disabled"], P = ["aria-label", "disabled"], $ = { class: "of-color-panel__presets" }, z = ["title", "disabled", "onClick"], I = /* @__PURE__ */ f({
   __name: "ColorPanel",
   props: {
     modelValue: {},
-    presets: { default: () => ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4"] },
+    presets: { default: () => ["#0f172a", "#334155", "#526071", "#7a8797", "#dbe2ea", "#eceff3"] },
     showInput: { type: Boolean, default: !0 },
     disabled: { type: Boolean },
     label: { default: "颜色" }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: f }) {
-    const i = e, c = f, a = _({
-      get: () => i.modelValue || "#3b82f6",
+  setup(e, { emit: m }) {
+    const i = e, c = m, a = _({
+      get: () => i.modelValue || "#526071",
       set: (t) => {
         c("update:modelValue", t), c("change", t);
       }
     });
-    function m(t) {
+    function p(t) {
       i.disabled || (a.value = t);
     }
     return (t, n) => (s(), d("div", {
@@ -43,7 +43,7 @@ const C = { class: "of-color-panel__header" }, g = { class: "of-color-panel__lab
           type: "text",
           "aria-label": `${e.label}值输入`,
           disabled: e.disabled,
-          placeholder: "#3b82f6"
+          placeholder: "#526071"
         }, null, 8, P)), [
           [b, a.value]
         ]) : v("", !0)
@@ -56,7 +56,7 @@ const C = { class: "of-color-panel__header" }, g = { class: "of-color-panel__lab
           title: l,
           style: V({ backgroundColor: l }),
           disabled: e.disabled,
-          onClick: (D) => m(l)
+          onClick: (D) => p(l)
         }, null, 12, z))), 128))
       ])
     ], 2));

package/dist/components/auxiliary/FileUpload.vue.js

@@ -1,7 +1,7 @@
 import o from "./FileUpload.vue2.js";
 /* empty css                */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d1f9fdba"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-b69b7dff"]]);
 export {
-  r as default
+  a as default
 };

package/dist/components/auxiliary/PersonPanel.vue.js

@@ -1,7 +1,7 @@
 import o from "./PersonPanel.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-00c38dd5"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0034e3b8"]]);
 export {
   m as default
 };