@hlw-uni/mp-vue 1.0.32 → 1.0.34

package/dist/composables/theme.d.ts

@@ -0,0 +1,22 @@
+export type FontScale = "small" | "normal" | "large" | "xlarge";
+export interface FontPreset {
+    label: string;
+    vars: Record<string, string>;
+}
+export interface ThemeColor {
+    label: string;
+    value: string;
+}
+export declare const FONT_SCALE_KEY = "hlw_font_scale";
+export declare const THEME_COLOR_KEY = "hlw_theme_color";
+export declare const THEME_CHANGE_EVENT = "hlw:theme-change";
+export declare const FONT_PRESETS: Record<FontScale, FontPreset>;
+export declare function getCurrentFontScale(): FontScale;
+export declare function getCurrentFontVars(): Record<string, string>;
+export declare const DEFAULT_THEMES: ThemeColor[];
+export declare function getCurrentThemeColor(): string;
+export declare function getCurrentThemeVars(): Record<string, string>;
+export declare function buildThemeStyle(): string;
+export declare function useThemePageStyle(): {
+    themePageStyle: any;
+};

package/dist/index.d.ts

@@ -10,5 +10,6 @@ export { default as HlwLoading } from './components/hlw-loading/index.vue';
 export { default as HlwMenu } from './components/hlw-menu/index.vue';
 export type { HlwMenuItem } from './components/hlw-menu/types';
 export { default as HlwPage } from './components/hlw-page/index.vue';
-export type { FontScale, FontPreset } from './components/hlw-page/font-presets';
-export { FONT_PRESETS, FONT_SCALE_KEY, FONT_SCALE_EVENT, getCurrentFontScale, getCurrentFontStyle, useFontPageStyle } from './components/hlw-page/font-presets';
+export type { FontScale, FontPreset, ThemeColor } from './composables/theme';
+export { FONT_PRESETS, FONT_SCALE_KEY, DEFAULT_THEMES, THEME_COLOR_KEY, THEME_CHANGE_EVENT, getCurrentFontScale, getCurrentFontVars, getCurrentThemeColor, getCurrentThemeVars, buildThemeStyle, useThemePageStyle } from './composables/theme';
+export { useThemeStore } from './stores/theme';

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.HlwUniVue = {}, global.vue));
-})(this, function(exports2, vue) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("pinia")) : typeof define === "function" && define.amd ? define(["exports", "vue", "pinia"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.HlwUniVue = {}, global.vue, global.pinia));
+})(this, function(exports2, vue, pinia) {
   "use strict";
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "HlwAd" },
@@ -79,67 +79,108 @@
     return target;
   };
   const index$6 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-89dcbc96"]]);
-  const _hoisted_1$5 = { class: "hlw-card" };
-  const _hoisted_2$5 = {
+  const _hoisted_1$5 = {
     key: 0,
     class: "hlw-card-header"
   };
-  const _hoisted_3$3 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
-  const _hoisted_4$2 = { key: 0 };
-  const _hoisted_5$1 = { class: "text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide" };
-  const _hoisted_6$1 = { key: 1 };
+  const _hoisted_2$5 = { class: "hlw-card-header-inner" };
+  const _hoisted_3$3 = { class: "hlw-card-header-left" };
+  const _hoisted_4$2 = {
+    key: 0,
+    class: "hlw-card-title"
+  };
+  const _hoisted_5$1 = {
+    key: 0,
+    class: "hlw-card-header-right"
+  };
+  const _hoisted_6$1 = {
+    key: 0,
+    class: "hlw-card-extra"
+  };
   const _hoisted_7$1 = {
+    key: 1,
+    class: "hlw-card-divider"
+  };
+  const _hoisted_8$1 = {
+    key: 2,
+    class: "hlw-card-footer"
+  };
+  const _hoisted_9$1 = { class: "hlw-card-footer-inner" };
+  const _hoisted_10$1 = { class: "hlw-card-footer-left" };
+  const _hoisted_11$1 = {
     key: 0,
-    class: "text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
+    class: "hlw-card-footer-right"
   };
-  const _hoisted_8$1 = { class: "hlw-card-body" };
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      options: {
-        styleIsolation: "shared",
-        virtualHost: true
-      }
-    },
     __name: "index",
     props: {
       title: { default: "" },
-      icon: { default: "" },
-      iconColor: { default: "" },
-      extra: { default: "" }
+      extra: { default: "" },
+      border: { type: Boolean, default: true },
+      radius: { default: "xl" },
+      divider: { type: Boolean, default: void 0 },
+      padding: { type: Boolean, default: true }
     },
     setup(__props) {
+      const props = __props;
+      const slots = vue.useSlots();
+      const hasHeader = vue.computed(
+        () => !!(props.title || props.extra || slots.header || slots["header-left"] || slots["header-right"])
+      );
+      const hasFooter = vue.computed(
+        () => !!(slots.footer || slots["footer-left"] || slots["footer-right"])
+      );
+      const showDivider = vue.computed(() => {
+        if (props.divider !== void 0)
+          return props.divider;
+        return hasHeader.value;
+      });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$5, [
-          _ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$5, [
+        return vue.openBlock(), vue.createElementBlock("view", {
+          class: vue.normalizeClass(["hlw-card", [
+            `hlw-card--radius-${__props.radius}`,
+            __props.border ? "hlw-card--bordered" : ""
+          ]])
+        }, [
+          hasHeader.value ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_1$5, [
             vue.renderSlot(_ctx.$slots, "header", {}, () => [
-              vue.createElementVNode("view", _hoisted_3$3, [
-                _ctx.$slots["header-left"] || __props.title || __props.icon ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_4$2, [
+              vue.createElementVNode("view", _hoisted_2$5, [
+                vue.createElementVNode("view", _hoisted_3$3, [
                   vue.renderSlot(_ctx.$slots, "header-left", {}, () => [
-                    vue.createElementVNode("view", _hoisted_5$1, [
-                      __props.icon ? (vue.openBlock(), vue.createElementBlock("text", {
-                        key: 0,
-                        class: vue.normalizeClass([__props.icon, __props.iconColor])
-                      }, null, 2)) : vue.createCommentVNode("", true),
-                      vue.createElementVNode("text", null, vue.toDisplayString(__props.title), 1)
-                    ])
+                    __props.title ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_4$2, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true)
                   ], true)
-                ])) : vue.createCommentVNode("", true),
-                _ctx.$slots["header-right"] || __props.extra ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_6$1, [
+                ]),
+                _ctx.$slots["header-right"] || __props.extra ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_5$1, [
                   vue.renderSlot(_ctx.$slots, "header-right", {}, () => [
-                    __props.extra ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_7$1, vue.toDisplayString(__props.extra), 1)) : vue.createCommentVNode("", true)
+                    __props.extra ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_6$1, vue.toDisplayString(__props.extra), 1)) : vue.createCommentVNode("", true)
                   ], true)
                 ])) : vue.createCommentVNode("", true)
               ])
             ], true)
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("view", _hoisted_8$1, [
+          showDivider.value ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_7$1)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("view", {
+            class: vue.normalizeClass(["hlw-card-body", { "hlw-card-body--padded": __props.padding }])
+          }, [
             vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ])
-        ]);
+          ], 2),
+          hasFooter.value ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_8$1, [
+            vue.renderSlot(_ctx.$slots, "footer", {}, () => [
+              vue.createElementVNode("view", _hoisted_9$1, [
+                vue.createElementVNode("view", _hoisted_10$1, [
+                  vue.renderSlot(_ctx.$slots, "footer-left", {}, void 0, true)
+                ]),
+                _ctx.$slots["footer-right"] ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_11$1, [
+                  vue.renderSlot(_ctx.$slots, "footer-right", {}, void 0, true)
+                ])) : vue.createCommentVNode("", true)
+              ])
+            ], true)
+          ])) : vue.createCommentVNode("", true)
+        ], 2);
       };
     }
   });
-  const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-787fc3a7"]]);
+  const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-cf55252e"]]);
   const _hoisted_1$4 = { class: "hlw-empty" };
   const _hoisted_2$4 = ["src"];
   const _hoisted_3$2 = {
@@ -523,45 +564,161 @@
     }
   });
   const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d8833363"]]);
+  function varsToStyle(vars) {
+    return Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";") + ";";
+  }
+  function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+  function darkenHex(hex, amount = 0.15) {
+    const r = Math.max(0, Math.round(parseInt(hex.slice(1, 3), 16) * (1 - amount)));
+    const g = Math.max(0, Math.round(parseInt(hex.slice(3, 5), 16) * (1 - amount)));
+    const b = Math.max(0, Math.round(parseInt(hex.slice(5, 7), 16) * (1 - amount)));
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+  }
   const FONT_SCALE_KEY = "hlw_font_scale";
-  const FONT_SCALE_EVENT = "hlw:font-scale-change";
+  const THEME_COLOR_KEY = "hlw_theme_color";
+  const THEME_CHANGE_EVENT = "hlw:theme-change";
   const FONT_PRESETS = {
+    small: {
+      label: "小字体",
+      vars: {
+        "--font-xs": "16rpx",
+        "--font-sm": "20rpx",
+        "--font-base": "24rpx",
+        "--font-md": "28rpx",
+        "--font-lg": "32rpx",
+        "--font-xl": "36rpx"
+      }
+    },
     normal: {
       label: "标准",
-      style: "--font-xs:20rpx;--font-sm:24rpx;--font-base:28rpx;--font-md:32rpx;--font-lg:36rpx;--font-xl:40rpx;"
+      vars: {
+        "--font-xs": "20rpx",
+        "--font-sm": "24rpx",
+        "--font-base": "28rpx",
+        "--font-md": "32rpx",
+        "--font-lg": "36rpx",
+        "--font-xl": "40rpx"
+      }
     },
     large: {
       label: "大字体",
-      style: "--font-xs:24rpx;--font-sm:30rpx;--font-base:34rpx;--font-md:40rpx;--font-lg:46rpx;--font-xl:52rpx;"
+      vars: {
+        "--font-xs": "24rpx",
+        "--font-sm": "30rpx",
+        "--font-base": "34rpx",
+        "--font-md": "40rpx",
+        "--font-lg": "46rpx",
+        "--font-xl": "52rpx"
+      }
     },
     xlarge: {
       label: "超大字体",
-      style: "--font-xs:28rpx;--font-sm:36rpx;--font-base:42rpx;--font-md:48rpx;--font-lg:56rpx;--font-xl:64rpx;"
+      vars: {
+        "--font-xs": "28rpx",
+        "--font-sm": "36rpx",
+        "--font-base": "42rpx",
+        "--font-md": "48rpx",
+        "--font-lg": "56rpx",
+        "--font-xl": "64rpx"
+      }
     }
   };
   function getCurrentFontScale() {
     try {
       const v = uni.getStorageSync(FONT_SCALE_KEY);
-      if (v === "large" || v === "xlarge")
+      if (v === "small" || v === "large" || v === "xlarge")
         return v;
     } catch {
     }
     return "normal";
   }
-  function getCurrentFontStyle() {
-    return FONT_PRESETS[getCurrentFontScale()].style;
+  function getCurrentFontVars() {
+    return FONT_PRESETS[getCurrentFontScale()].vars;
   }
-  function useFontPageStyle() {
-    const fontPageStyle = vue.ref(getCurrentFontStyle());
-    const onFontChange = () => {
-      fontPageStyle.value = getCurrentFontStyle();
+  const DEFAULT_THEMES = [
+    { label: "默认蓝", value: "#3b82f6" },
+    { label: "活力橙", value: "#f97316" },
+    { label: "翡翠绿", value: "#10b981" },
+    { label: "玫瑰红", value: "#f43f5e" },
+    { label: "紫罗兰", value: "#8b5cf6" },
+    { label: "青石灰", value: "#64748b" }
+  ];
+  function getCurrentThemeColor() {
+    try {
+      const v = uni.getStorageSync(THEME_COLOR_KEY);
+      if (v && typeof v === "string")
+        return v;
+    } catch {
+    }
+    return DEFAULT_THEMES[0].value;
+  }
+  function getCurrentThemeVars() {
+    const color = getCurrentThemeColor();
+    return {
+      "--primary-color": color,
+      "--primary-light": hexToRgba(color, 0.12),
+      "--primary-dark": darkenHex(color)
+    };
+  }
+  function buildThemeStyle() {
+    return varsToStyle({
+      ...getCurrentFontVars(),
+      ...getCurrentThemeVars()
+    });
+  }
+  function useThemePageStyle() {
+    const themePageStyle = vue.ref(buildThemeStyle());
+    const onThemeChange = () => {
+      themePageStyle.value = buildThemeStyle();
     };
-    vue.onMounted(() => uni.$on(FONT_SCALE_EVENT, onFontChange));
-    vue.onUnmounted(() => uni.$off(FONT_SCALE_EVENT, onFontChange));
-    return { fontPageStyle };
+    vue.onMounted(() => uni.$on(THEME_CHANGE_EVENT, onThemeChange));
+    vue.onUnmounted(() => uni.$off(THEME_CHANGE_EVENT, onThemeChange));
+    return { themePageStyle };
   }
+  const useThemeStore = pinia.defineStore(
+    "theme",
+    () => {
+      const scale = vue.ref("normal");
+      function setScale(s) {
+        scale.value = s;
+        uni.setStorageSync(FONT_SCALE_KEY, s);
+        uni.$emit(THEME_CHANGE_EVENT);
+      }
+      const fontOptions = Object.keys(FONT_PRESETS).map((key) => ({
+        value: key,
+        label: FONT_PRESETS[key].label
+      }));
+      const primaryColor = vue.ref(DEFAULT_THEMES[0].value);
+      const themes = DEFAULT_THEMES;
+      const activeTheme = vue.computed(
+        () => themes.find((t) => t.value === primaryColor.value) ?? { label: "自定义", value: primaryColor.value }
+      );
+      function setTheme(color) {
+        primaryColor.value = color;
+        uni.setStorageSync(THEME_COLOR_KEY, color);
+        uni.$emit(THEME_CHANGE_EVENT);
+      }
+      return {
+        // 字体
+        scale,
+        fontOptions,
+        setScale,
+        // 主题色
+        primaryColor,
+        themes,
+        activeTheme,
+        setTheme
+      };
+    },
+    { unistorage: true }
+  );
+  exports2.DEFAULT_THEMES = DEFAULT_THEMES;
   exports2.FONT_PRESETS = FONT_PRESETS;
-  exports2.FONT_SCALE_EVENT = FONT_SCALE_EVENT;
   exports2.FONT_SCALE_KEY = FONT_SCALE_KEY;
   exports2.HlwAd = _sfc_main$7;
   exports2.HlwAvatar = index$6;
@@ -571,8 +728,14 @@
   exports2.HlwLoading = index$2;
   exports2.HlwMenu = index$1;
   exports2.HlwPage = index;
+  exports2.THEME_CHANGE_EVENT = THEME_CHANGE_EVENT;
+  exports2.THEME_COLOR_KEY = THEME_COLOR_KEY;
+  exports2.buildThemeStyle = buildThemeStyle;
   exports2.getCurrentFontScale = getCurrentFontScale;
-  exports2.getCurrentFontStyle = getCurrentFontStyle;
-  exports2.useFontPageStyle = useFontPageStyle;
+  exports2.getCurrentFontVars = getCurrentFontVars;
+  exports2.getCurrentThemeColor = getCurrentThemeColor;
+  exports2.getCurrentThemeVars = getCurrentThemeVars;
+  exports2.useThemePageStyle = useThemePageStyle;
+  exports2.useThemeStore = useThemeStore;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, useSlots, normalizeStyle, unref, Fragment, renderList, withCtx, createVNode, onMounted, onUnmounted } from "vue";
+import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, useSlots, renderSlot, createCommentVNode, normalizeStyle, unref, Fragment, renderList, withCtx, createVNode, onMounted, onUnmounted } from "vue";
+import { defineStore } from "pinia";
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{ name: "HlwAd" },
   __name: "index",
@@ -76,67 +77,108 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const index$6 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-89dcbc96"]]);
-const _hoisted_1$5 = { class: "hlw-card" };
-const _hoisted_2$5 = {
+const _hoisted_1$5 = {
   key: 0,
   class: "hlw-card-header"
 };
-const _hoisted_3$3 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
-const _hoisted_4$2 = { key: 0 };
-const _hoisted_5$1 = { class: "text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide" };
-const _hoisted_6$1 = { key: 1 };
+const _hoisted_2$5 = { class: "hlw-card-header-inner" };
+const _hoisted_3$3 = { class: "hlw-card-header-left" };
+const _hoisted_4$2 = {
+  key: 0,
+  class: "hlw-card-title"
+};
+const _hoisted_5$1 = {
+  key: 0,
+  class: "hlw-card-header-right"
+};
+const _hoisted_6$1 = {
+  key: 0,
+  class: "hlw-card-extra"
+};
 const _hoisted_7$1 = {
+  key: 1,
+  class: "hlw-card-divider"
+};
+const _hoisted_8$1 = {
+  key: 2,
+  class: "hlw-card-footer"
+};
+const _hoisted_9$1 = { class: "hlw-card-footer-inner" };
+const _hoisted_10$1 = { class: "hlw-card-footer-left" };
+const _hoisted_11$1 = {
   key: 0,
-  class: "text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
+  class: "hlw-card-footer-right"
 };
-const _hoisted_8$1 = { class: "hlw-card-body" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...{
-    options: {
-      styleIsolation: "shared",
-      virtualHost: true
-    }
-  },
   __name: "index",
   props: {
     title: { default: "" },
-    icon: { default: "" },
-    iconColor: { default: "" },
-    extra: { default: "" }
+    extra: { default: "" },
+    border: { type: Boolean, default: true },
+    radius: { default: "xl" },
+    divider: { type: Boolean, default: void 0 },
+    padding: { type: Boolean, default: true }
   },
   setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const hasHeader = computed(
+      () => !!(props.title || props.extra || slots.header || slots["header-left"] || slots["header-right"])
+    );
+    const hasFooter = computed(
+      () => !!(slots.footer || slots["footer-left"] || slots["footer-right"])
+    );
+    const showDivider = computed(() => {
+      if (props.divider !== void 0)
+        return props.divider;
+      return hasHeader.value;
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("view", _hoisted_1$5, [
-        _ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (openBlock(), createElementBlock("view", _hoisted_2$5, [
+      return openBlock(), createElementBlock("view", {
+        class: normalizeClass(["hlw-card", [
+          `hlw-card--radius-${__props.radius}`,
+          __props.border ? "hlw-card--bordered" : ""
+        ]])
+      }, [
+        hasHeader.value ? (openBlock(), createElementBlock("view", _hoisted_1$5, [
           renderSlot(_ctx.$slots, "header", {}, () => [
-            createElementVNode("view", _hoisted_3$3, [
-              _ctx.$slots["header-left"] || __props.title || __props.icon ? (openBlock(), createElementBlock("view", _hoisted_4$2, [
+            createElementVNode("view", _hoisted_2$5, [
+              createElementVNode("view", _hoisted_3$3, [
                 renderSlot(_ctx.$slots, "header-left", {}, () => [
-                  createElementVNode("view", _hoisted_5$1, [
-                    __props.icon ? (openBlock(), createElementBlock("text", {
-                      key: 0,
-                      class: normalizeClass([__props.icon, __props.iconColor])
-                    }, null, 2)) : createCommentVNode("", true),
-                    createElementVNode("text", null, toDisplayString(__props.title), 1)
-                  ])
+                  __props.title ? (openBlock(), createElementBlock("text", _hoisted_4$2, toDisplayString(__props.title), 1)) : createCommentVNode("", true)
                 ], true)
-              ])) : createCommentVNode("", true),
-              _ctx.$slots["header-right"] || __props.extra ? (openBlock(), createElementBlock("view", _hoisted_6$1, [
+              ]),
+              _ctx.$slots["header-right"] || __props.extra ? (openBlock(), createElementBlock("view", _hoisted_5$1, [
                 renderSlot(_ctx.$slots, "header-right", {}, () => [
-                  __props.extra ? (openBlock(), createElementBlock("text", _hoisted_7$1, toDisplayString(__props.extra), 1)) : createCommentVNode("", true)
+                  __props.extra ? (openBlock(), createElementBlock("text", _hoisted_6$1, toDisplayString(__props.extra), 1)) : createCommentVNode("", true)
                 ], true)
               ])) : createCommentVNode("", true)
             ])
           ], true)
         ])) : createCommentVNode("", true),
-        createElementVNode("view", _hoisted_8$1, [
+        showDivider.value ? (openBlock(), createElementBlock("view", _hoisted_7$1)) : createCommentVNode("", true),
+        createElementVNode("view", {
+          class: normalizeClass(["hlw-card-body", { "hlw-card-body--padded": __props.padding }])
+        }, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ])
-      ]);
+        ], 2),
+        hasFooter.value ? (openBlock(), createElementBlock("view", _hoisted_8$1, [
+          renderSlot(_ctx.$slots, "footer", {}, () => [
+            createElementVNode("view", _hoisted_9$1, [
+              createElementVNode("view", _hoisted_10$1, [
+                renderSlot(_ctx.$slots, "footer-left", {}, void 0, true)
+              ]),
+              _ctx.$slots["footer-right"] ? (openBlock(), createElementBlock("view", _hoisted_11$1, [
+                renderSlot(_ctx.$slots, "footer-right", {}, void 0, true)
+              ])) : createCommentVNode("", true)
+            ])
+          ], true)
+        ])) : createCommentVNode("", true)
+      ], 2);
     };
   }
 });
-const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-787fc3a7"]]);
+const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-cf55252e"]]);
 const _hoisted_1$4 = { class: "hlw-empty" };
 const _hoisted_2$4 = ["src"];
 const _hoisted_3$2 = {
@@ -520,46 +562,162 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d8833363"]]);
+function varsToStyle(vars) {
+  return Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";") + ";";
+}
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function darkenHex(hex, amount = 0.15) {
+  const r = Math.max(0, Math.round(parseInt(hex.slice(1, 3), 16) * (1 - amount)));
+  const g = Math.max(0, Math.round(parseInt(hex.slice(3, 5), 16) * (1 - amount)));
+  const b = Math.max(0, Math.round(parseInt(hex.slice(5, 7), 16) * (1 - amount)));
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
 const FONT_SCALE_KEY = "hlw_font_scale";
-const FONT_SCALE_EVENT = "hlw:font-scale-change";
+const THEME_COLOR_KEY = "hlw_theme_color";
+const THEME_CHANGE_EVENT = "hlw:theme-change";
 const FONT_PRESETS = {
+  small: {
+    label: "小字体",
+    vars: {
+      "--font-xs": "16rpx",
+      "--font-sm": "20rpx",
+      "--font-base": "24rpx",
+      "--font-md": "28rpx",
+      "--font-lg": "32rpx",
+      "--font-xl": "36rpx"
+    }
+  },
   normal: {
     label: "标准",
-    style: "--font-xs:20rpx;--font-sm:24rpx;--font-base:28rpx;--font-md:32rpx;--font-lg:36rpx;--font-xl:40rpx;"
+    vars: {
+      "--font-xs": "20rpx",
+      "--font-sm": "24rpx",
+      "--font-base": "28rpx",
+      "--font-md": "32rpx",
+      "--font-lg": "36rpx",
+      "--font-xl": "40rpx"
+    }
   },
   large: {
     label: "大字体",
-    style: "--font-xs:24rpx;--font-sm:30rpx;--font-base:34rpx;--font-md:40rpx;--font-lg:46rpx;--font-xl:52rpx;"
+    vars: {
+      "--font-xs": "24rpx",
+      "--font-sm": "30rpx",
+      "--font-base": "34rpx",
+      "--font-md": "40rpx",
+      "--font-lg": "46rpx",
+      "--font-xl": "52rpx"
+    }
   },
   xlarge: {
     label: "超大字体",
-    style: "--font-xs:28rpx;--font-sm:36rpx;--font-base:42rpx;--font-md:48rpx;--font-lg:56rpx;--font-xl:64rpx;"
+    vars: {
+      "--font-xs": "28rpx",
+      "--font-sm": "36rpx",
+      "--font-base": "42rpx",
+      "--font-md": "48rpx",
+      "--font-lg": "56rpx",
+      "--font-xl": "64rpx"
+    }
   }
 };
 function getCurrentFontScale() {
   try {
     const v = uni.getStorageSync(FONT_SCALE_KEY);
-    if (v === "large" || v === "xlarge")
+    if (v === "small" || v === "large" || v === "xlarge")
       return v;
   } catch {
   }
   return "normal";
 }
-function getCurrentFontStyle() {
-  return FONT_PRESETS[getCurrentFontScale()].style;
+function getCurrentFontVars() {
+  return FONT_PRESETS[getCurrentFontScale()].vars;
 }
-function useFontPageStyle() {
-  const fontPageStyle = ref(getCurrentFontStyle());
-  const onFontChange = () => {
-    fontPageStyle.value = getCurrentFontStyle();
+const DEFAULT_THEMES = [
+  { label: "默认蓝", value: "#3b82f6" },
+  { label: "活力橙", value: "#f97316" },
+  { label: "翡翠绿", value: "#10b981" },
+  { label: "玫瑰红", value: "#f43f5e" },
+  { label: "紫罗兰", value: "#8b5cf6" },
+  { label: "青石灰", value: "#64748b" }
+];
+function getCurrentThemeColor() {
+  try {
+    const v = uni.getStorageSync(THEME_COLOR_KEY);
+    if (v && typeof v === "string")
+      return v;
+  } catch {
+  }
+  return DEFAULT_THEMES[0].value;
+}
+function getCurrentThemeVars() {
+  const color = getCurrentThemeColor();
+  return {
+    "--primary-color": color,
+    "--primary-light": hexToRgba(color, 0.12),
+    "--primary-dark": darkenHex(color)
+  };
+}
+function buildThemeStyle() {
+  return varsToStyle({
+    ...getCurrentFontVars(),
+    ...getCurrentThemeVars()
+  });
+}
+function useThemePageStyle() {
+  const themePageStyle = ref(buildThemeStyle());
+  const onThemeChange = () => {
+    themePageStyle.value = buildThemeStyle();
   };
-  onMounted(() => uni.$on(FONT_SCALE_EVENT, onFontChange));
-  onUnmounted(() => uni.$off(FONT_SCALE_EVENT, onFontChange));
-  return { fontPageStyle };
+  onMounted(() => uni.$on(THEME_CHANGE_EVENT, onThemeChange));
+  onUnmounted(() => uni.$off(THEME_CHANGE_EVENT, onThemeChange));
+  return { themePageStyle };
 }
+const useThemeStore = defineStore(
+  "theme",
+  () => {
+    const scale = ref("normal");
+    function setScale(s) {
+      scale.value = s;
+      uni.setStorageSync(FONT_SCALE_KEY, s);
+      uni.$emit(THEME_CHANGE_EVENT);
+    }
+    const fontOptions = Object.keys(FONT_PRESETS).map((key) => ({
+      value: key,
+      label: FONT_PRESETS[key].label
+    }));
+    const primaryColor = ref(DEFAULT_THEMES[0].value);
+    const themes = DEFAULT_THEMES;
+    const activeTheme = computed(
+      () => themes.find((t) => t.value === primaryColor.value) ?? { label: "自定义", value: primaryColor.value }
+    );
+    function setTheme(color) {
+      primaryColor.value = color;
+      uni.setStorageSync(THEME_COLOR_KEY, color);
+      uni.$emit(THEME_CHANGE_EVENT);
+    }
+    return {
+      // 字体
+      scale,
+      fontOptions,
+      setScale,
+      // 主题色
+      primaryColor,
+      themes,
+      activeTheme,
+      setTheme
+    };
+  },
+  { unistorage: true }
+);
 export {
+  DEFAULT_THEMES,
   FONT_PRESETS,
-  FONT_SCALE_EVENT,
   FONT_SCALE_KEY,
   _sfc_main$7 as HlwAd,
   index$6 as HlwAvatar,
@@ -569,7 +727,13 @@ export {
   index$2 as HlwLoading,
   index$1 as HlwMenu,
   index as HlwPage,
+  THEME_CHANGE_EVENT,
+  THEME_COLOR_KEY,
+  buildThemeStyle,
   getCurrentFontScale,
-  getCurrentFontStyle,
-  useFontPageStyle
+  getCurrentFontVars,
+  getCurrentThemeColor,
+  getCurrentThemeVars,
+  useThemePageStyle,
+  useThemeStore
 };

package/dist/stores/theme.d.ts

@@ -0,0 +1 @@
+export declare const useThemeStore: any;

package/dist/style.css

@@ -33,10 +33,95 @@
 .hlw-avatar--large  .hlw-avatar__initial[data-v-89dcbc96] { font-size: var(--font-xl, 40rpx);
 }
 
-.hlw-card[data-v-787fc3a7] {
-@apply bg-white rounded-xl border border-solid border-slate-200 overflow-hidden w-full;
+.hlw-card[data-v-cf55252e] {
+  width: 100%;
+  background: #fff;
+  overflow: hidden;
+  /* 圆角档位 */
+}
+.hlw-card--radius-none[data-v-cf55252e] {
+  border-radius: 0;
+}
+.hlw-card--radius-sm[data-v-cf55252e] {
+  border-radius: var(--radius-sm, 8rpx);
+}
+.hlw-card--radius-md[data-v-cf55252e] {
+  border-radius: var(--radius-md, 16rpx);
+}
+.hlw-card--radius-lg[data-v-cf55252e] {
+  border-radius: var(--radius-lg, 24rpx);
+}
+.hlw-card--radius-xl[data-v-cf55252e] {
+  border-radius: var(--radius-xl, 32rpx);
+}
+.hlw-card[data-v-cf55252e] {
+  /* 边框 */
+}
+.hlw-card--bordered[data-v-cf55252e] {
+  border: 1rpx solid var(--border-color, #e2e8f0);
+}
+
+/* 头部 */
+.hlw-card-header[data-v-cf55252e] {
+  width: 100%;
+}
+.hlw-card-header-inner[data-v-cf55252e] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 28rpx;
+}
+.hlw-card-header-left[data-v-cf55252e] {
+  flex: 1;
+  min-width: 0;
+}
+.hlw-card-header-right[data-v-cf55252e] {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+}
+.hlw-card-title[data-v-cf55252e] {
+  font-size: var(--font-sm, 24rpx);
+  font-weight: 700;
+  color: #1e293b;
+  letter-spacing: 0.02em;
+}
+.hlw-card-extra[data-v-cf55252e] {
+  font-size: var(--font-xs, 20rpx);
+  color: #94a3b8;
 }
 
+/* 虚线分隔 */
+.hlw-card-divider[data-v-cf55252e] {
+  width: 100%;
+  border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
+}
+
+/* 内容区 */
+.hlw-card-body[data-v-cf55252e] {
+  width: 100%;
+}
+.hlw-card-body--padded[data-v-cf55252e] {
+  padding: 24rpx 28rpx;
+}
+
+/* 底部 */
+.hlw-card-footer[data-v-cf55252e] {
+  width: 100%;
+  border-top: 1rpx solid var(--border-color-light, #f1f5f9);
+}
+.hlw-card-footer-inner[data-v-cf55252e] {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 28rpx;
+}
+.hlw-card-footer-left[data-v-cf55252e] {
+  flex: 1;
+  min-width: 0;
+}
+.hlw-card-footer-right[data-v-cf55252e] {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+}
 .hlw-empty[data-v-08b8d8fe] {
     display: flex;
     flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.0.32",
+    "version": "1.0.34",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "src/index.ts",
     "module": "src/index.ts",

package/src/composables/theme.ts

@@ -0,0 +1,142 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+// ─── 工具函数 ───────────────────────────────────
+
+function varsToStyle(vars: Record<string, string>): string {
+    return Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";") + ";";
+}
+
+function hexToRgba(hex: string, alpha: number): string {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function darkenHex(hex: string, amount = 0.15): string {
+    const r = Math.max(0, Math.round(parseInt(hex.slice(1, 3), 16) * (1 - amount)));
+    const g = Math.max(0, Math.round(parseInt(hex.slice(3, 5), 16) * (1 - amount)));
+    const b = Math.max(0, Math.round(parseInt(hex.slice(5, 7), 16) * (1 - amount)));
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+
+// ─── 类型 ──────────────────────────────────────
+
+export type FontScale = "small" | "normal" | "large" | "xlarge";
+
+export interface FontPreset {
+    label: string;
+    vars: Record<string, string>;
+}
+
+export interface ThemeColor {
+    label: string;
+    value: string;
+}
+
+// ─── 存储 Key ──────────────────────────────────
+
+export const FONT_SCALE_KEY = "hlw_font_scale";
+export const THEME_COLOR_KEY = "hlw_theme_color";
+
+// ─── 事件 ──────────────────────────────────────
+
+export const THEME_CHANGE_EVENT = "hlw:theme-change";
+
+// ─── 字体档位 ──────────────────────────────────
+
+export const FONT_PRESETS: Record<FontScale, FontPreset> = {
+    small: {
+        label: "小字体",
+        vars: {
+            "--font-xs": "16rpx", "--font-sm": "20rpx", "--font-base": "24rpx",
+            "--font-md": "28rpx", "--font-lg": "32rpx", "--font-xl": "36rpx",
+        },
+    },
+    normal: {
+        label: "标准",
+        vars: {
+            "--font-xs": "20rpx", "--font-sm": "24rpx", "--font-base": "28rpx",
+            "--font-md": "32rpx", "--font-lg": "36rpx", "--font-xl": "40rpx",
+        },
+    },
+    large: {
+        label: "大字体",
+        vars: {
+            "--font-xs": "24rpx", "--font-sm": "30rpx", "--font-base": "34rpx",
+            "--font-md": "40rpx", "--font-lg": "46rpx", "--font-xl": "52rpx",
+        },
+    },
+    xlarge: {
+        label: "超大字体",
+        vars: {
+            "--font-xs": "28rpx", "--font-sm": "36rpx", "--font-base": "42rpx",
+            "--font-md": "48rpx", "--font-lg": "56rpx", "--font-xl": "64rpx",
+        },
+    },
+};
+
+export function getCurrentFontScale(): FontScale {
+    try {
+        const v = uni.getStorageSync(FONT_SCALE_KEY);
+        if (v === "small" || v === "large" || v === "xlarge") return v;
+    } catch {}
+    return "normal";
+}
+
+export function getCurrentFontVars(): Record<string, string> {
+    return FONT_PRESETS[getCurrentFontScale()].vars;
+}
+
+// ─── 主题色 ────────────────────────────────────
+
+export const DEFAULT_THEMES: ThemeColor[] = [
+    { label: "默认蓝", value: "#3b82f6" },
+    { label: "活力橙", value: "#f97316" },
+    { label: "翡翠绿", value: "#10b981" },
+    { label: "玫瑰红", value: "#f43f5e" },
+    { label: "紫罗兰", value: "#8b5cf6" },
+    { label: "青石灰", value: "#64748b" },
+];
+
+export function getCurrentThemeColor(): string {
+    try {
+        const v = uni.getStorageSync(THEME_COLOR_KEY);
+        if (v && typeof v === "string") return v;
+    } catch {}
+    return DEFAULT_THEMES[0].value;
+}
+
+export function getCurrentThemeVars(): Record<string, string> {
+    const color = getCurrentThemeColor();
+    return {
+        "--primary-color": color,
+        "--primary-light": hexToRgba(color, 0.12),
+        "--primary-dark": darkenHex(color),
+    };
+}
+
+// ─── 统一样式构建 ──────────────────────────────
+// 后续新增主题维度时，只需添加 getCurrentXxxVars() 并在此展开
+
+export function buildThemeStyle(): string {
+    return varsToStyle({
+        ...getCurrentFontVars(),
+        ...getCurrentThemeVars(),
+    });
+}
+
+// ─── 组合式函数 ────────────────────────────────
+
+export function useThemePageStyle() {
+    const themePageStyle = ref(buildThemeStyle());
+
+    const onThemeChange = () => {
+        themePageStyle.value = buildThemeStyle();
+    };
+
+    onMounted(() => uni.$on(THEME_CHANGE_EVENT, onThemeChange));
+    onUnmounted(() => uni.$off(THEME_CHANGE_EVENT, onThemeChange));
+
+    return { themePageStyle };
+}

package/src/index.ts

@@ -11,6 +11,6 @@ export { default as HlwLoading } from "./components/hlw-loading/index.vue";
 export { default as HlwMenu } from "./components/hlw-menu/index.vue";
 export type { HlwMenuItem } from "./components/hlw-menu/types";
 export { default as HlwPage } from "./components/hlw-page/index.vue";
-export type { FontScale, FontPreset } from "./composables/font-presets";
-export { FONT_PRESETS, FONT_SCALE_KEY, FONT_SCALE_EVENT, getCurrentFontScale, getCurrentFontStyle, useFontPageStyle } from "./composables/font-presets";
-export { useFontStore } from "./stores/font";
+export type { FontScale, FontPreset, ThemeColor } from "./composables/theme";
+export { FONT_PRESETS, FONT_SCALE_KEY, DEFAULT_THEMES, THEME_COLOR_KEY, THEME_CHANGE_EVENT, getCurrentFontScale, getCurrentFontVars, getCurrentThemeColor, getCurrentThemeVars, buildThemeStyle, useThemePageStyle } from "./composables/theme";
+export { useThemeStore } from "./stores/theme";

package/src/stores/theme.ts

@@ -0,0 +1,65 @@
+/**
+ * Theme Store — 全局主题设置（字体档位 + 主题色）
+ * 持久化到 storage，变更时广播 THEME_CHANGE_EVENT 通知所有页面实时刷新
+ */
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import {
+    FONT_PRESETS,
+    FONT_SCALE_KEY,
+    DEFAULT_THEMES,
+    THEME_COLOR_KEY,
+    THEME_CHANGE_EVENT,
+} from "../composables/theme";
+import type { FontScale, ThemeColor } from "../composables/theme";
+
+export const useThemeStore = defineStore(
+    "theme",
+    () => {
+        // ─── 字体档位 ────────────────────────────
+        const scale = ref<FontScale>("normal");
+
+        function setScale(s: FontScale) {
+            scale.value = s;
+            uni.setStorageSync(FONT_SCALE_KEY, s);
+            uni.$emit(THEME_CHANGE_EVENT);
+        }
+
+        const fontOptions = (Object.keys(FONT_PRESETS) as FontScale[]).map((key) => ({
+            value: key,
+            label: FONT_PRESETS[key].label,
+        }));
+
+        // ─── 主题色 ─────────────────────────────
+        const primaryColor = ref(DEFAULT_THEMES[0].value);
+
+        /** 内置预设主题 */
+        const themes = DEFAULT_THEMES;
+
+        /** 当前激活的主题信息 */
+        const activeTheme = computed<ThemeColor>(() =>
+            themes.find((t) => t.value === primaryColor.value)
+                ?? { label: "自定义", value: primaryColor.value },
+        );
+
+        /** 设置主题色（预设或自定义颜色值） */
+        function setTheme(color: string) {
+            primaryColor.value = color;
+            uni.setStorageSync(THEME_COLOR_KEY, color);
+            uni.$emit(THEME_CHANGE_EVENT);
+        }
+
+        return {
+            // 字体
+            scale,
+            fontOptions,
+            setScale,
+            // 主题色
+            primaryColor,
+            themes,
+            activeTheme,
+            setTheme,
+        };
+    },
+    { unistorage: true },
+);

package/dist/components/hlw-page/font-presets.d.ts

@@ -1,54 +0,0 @@
-/**
- * hlw-page 字体档位预设
- *
- * 三档：标准 / 大字体 / 超大字体
- * 通过 <page-meta page-style="..."> 注入到页面根节点，
- * 覆盖 CSS 变量，所有使用 var(--font-*) 的组件自动跟随。
- */
-export type FontScale = "normal" | "large" | "xlarge";
-/** storage key，与 qz2 font store 保持一致 */
-export declare const FONT_SCALE_KEY = "hlw_font_scale";
-/** 全局事件名，store.setScale 触发后 hlw-page 实时响应 */
-export declare const FONT_SCALE_EVENT = "hlw:font-scale-change";
-export interface FontPreset {
-    /** 展示名称 */
-    label: string;
-    /** 注入到 page-meta 的 CSS 变量字符串 */
-    style: string;
-}
-/**
- * 三档字体预设
- *
- * 变量说明：
- *   --font-xs    极小文字（角标、辅助标注）
- *   --font-sm    小文字（次要说明、标签、grid-label）
- *   --font-base  正文（菜单项、内容主体）
- *   --font-md    中等（次级标题）
- *   --font-lg    大号（页面标题、导航标题）
- *   --font-xl    特大（数字展示）
- */
-export declare const FONT_PRESETS: Record<FontScale, FontPreset>;
-/** 读取当前档位（同步，从 storage 取） */
-export declare function getCurrentFontScale(): FontScale;
-/** 读取当前档位对应的 page-style 字符串 */
-export declare function getCurrentFontStyle(): string;
-/**
- * 在页面根节点使用，配合 <page-meta :page-style="fontPageStyle"> 实现全局字体缩放。
- *
- * 注意：<page-meta> 必须作为页面 .vue 文件 template 的第一个根节点，不可放在子组件内。
- *
- * @example
- * ```vue
- * <template>
- *   <page-meta :page-style="fontPageStyle" />
- *   <hlw-page title="xxx">...</hlw-page>
- * </template>
- * <script setup>
- * import { useFontPageStyle } from '@hlw-uni/mp-vue';
- * const { fontPageStyle } = useFontPageStyle();
- * </script>
- * ```
- */
-export declare function useFontPageStyle(): {
-    fontPageStyle: any;
-};

package/src/components/hlw-page/font-presets.ts

@@ -1 +0,0 @@
-export * from "../../composables/font-presets";

package/src/composables/font-presets.ts

@@ -1,98 +0,0 @@
-import { ref, onMounted, onUnmounted } from "vue";
-
-/**
- * hlw-page 字体档位预设
- *
- * 三档：标准 / 大字体 / 超大字体
- * 通过 <page-meta page-style="..."> 注入到页面根节点，
- * 覆盖 CSS 变量，所有使用 var(--font-*) 的组件自动跟随。
- */
-
-export type FontScale = "small" | "normal" | "large" | "xlarge";
-
-/** storage key，与 qz2 font store 保持一致 */
-export const FONT_SCALE_KEY = "hlw_font_scale";
-
-/** 全局事件名，store.setScale 触发后 hlw-page 实时响应 */
-export const FONT_SCALE_EVENT = "hlw:font-scale-change";
-
-export interface FontPreset {
-    /** 展示名称 */
-    label: string;
-    /** 注入到 page-meta 的 CSS 变量字符串 */
-    style: string;
-}
-
-/**
- * 三档字体预设
- *
- * 变量说明：
- *   --font-xs    极小文字（角标、辅助标注）
- *   --font-sm    小文字（次要说明、标签、grid-label）
- *   --font-base  正文（菜单项、内容主体）
- *   --font-md    中等（次级标题）
- *   --font-lg    大号（页面标题、导航标题）
- *   --font-xl    特大（数字展示）
- */
-export const FONT_PRESETS: Record<FontScale, FontPreset> = {
-    small: {
-        label: "小字体",
-        style: "--font-xs:16rpx;--font-sm:20rpx;--font-base:24rpx;--font-md:28rpx;--font-lg:32rpx;--font-xl:36rpx;",
-    },
-    normal: {
-        label: "标准",
-        style: "--font-xs:20rpx;--font-sm:24rpx;--font-base:28rpx;--font-md:32rpx;--font-lg:36rpx;--font-xl:40rpx;",
-    },
-    large: {
-        label: "大字体",
-        style: "--font-xs:24rpx;--font-sm:30rpx;--font-base:34rpx;--font-md:40rpx;--font-lg:46rpx;--font-xl:52rpx;",
-    },
-    xlarge: {
-        label: "超大字体",
-        style: "--font-xs:28rpx;--font-sm:36rpx;--font-base:42rpx;--font-md:48rpx;--font-lg:56rpx;--font-xl:64rpx;",
-    },
-};
-
-/** 读取当前档位（同步，从 storage 取） */
-export function getCurrentFontScale(): FontScale {
-    try {
-        const v = uni.getStorageSync(FONT_SCALE_KEY);
-        if (v === "small" || v === "large" || v === "xlarge") return v;
-    } catch {}
-    return "normal";
-}
-
-/** 读取当前档位对应的 page-style 字符串 */
-export function getCurrentFontStyle(): string {
-    return FONT_PRESETS[getCurrentFontScale()].style;
-}
-
-/**
- * 在页面根节点使用，配合 <page-meta :page-style="fontPageStyle"> 实现全局字体缩放。
- *
- * 注意：<page-meta> 必须作为页面 .vue 文件 template 的第一个根节点，不可放在子组件内。
- *
- * @example
- * ```vue
- * <template>
- *   <page-meta :page-style="fontPageStyle" />
- *   <hlw-page title="xxx">...</hlw-page>
- * </template>
- * <script setup>
- * import { useFontPageStyle } from '@hlw-uni/mp-vue';
- * const { fontPageStyle } = useFontPageStyle();
- * </script>
- * ```
- */
-export function useFontPageStyle() {
-    const fontPageStyle = ref(getCurrentFontStyle());
-
-    const onFontChange = () => {
-        fontPageStyle.value = getCurrentFontStyle();
-    };
-
-    onMounted(() => uni.$on(FONT_SCALE_EVENT, onFontChange));
-    onUnmounted(() => uni.$off(FONT_SCALE_EVENT, onFontChange));
-
-    return { fontPageStyle };
-}

package/src/stores/font.ts

@@ -1,31 +0,0 @@
-/**
- * Font Store — 全局字体档位设置
- * 持久化到 storage，变更时广播 FONT_SCALE_EVENT 通知所有页面实例实时刷新
- */
-import { defineStore } from "pinia";
-import { ref } from "vue";
-import { FONT_PRESETS, FONT_SCALE_EVENT, FONT_SCALE_KEY } from "../composables/font-presets";
-import type { FontScale } from "../composables/font-presets";
-
-export const useFontStore = defineStore(
-    "font",
-    () => {
-        const scale = ref<FontScale>("normal");
-
-        /** 切换字体档位，自动持久化并通知页面刷新 */
-        function setScale(s: FontScale) {
-            scale.value = s;
-            uni.setStorageSync(FONT_SCALE_KEY, s);
-            uni.$emit(FONT_SCALE_EVENT);
-        }
-
-        /** 所有可选档位列表，供 UI 遍历 */
-        const options = (Object.keys(FONT_PRESETS) as FontScale[]).map((key) => ({
-            value: key,
-            label: FONT_PRESETS[key].label,
-        }));
-
-        return { scale, options, setScale };
-    },
-    { unistorage: true },
-);