@hlw-uni/mp-vue 2.1.60 → 2.1.69

package/dist/core/theme.d.ts

@@ -1,8 +1,21 @@
 import { ComputedRef } from 'vue';
+import { Store } from 'pinia';
 
+export { themePresets, type ThemePreset, fontSizePresets, type FontSizePreset, fontFamilyPresets, type FontFamilyPreset } from '../stores/theme';
 export declare function useTheme(): {
     theme: ComputedRef<string>;
-    store: {
+    fontSize: ComputedRef<string>;
+    fontSizeClass: ComputedRef<string>;
+    setFontSize: (size: string) => void;
+    fontFamily: ComputedRef<string>;
+    fontFamilyClass: ComputedRef<string>;
+    setFontFamily: (font: string) => void;
+    store: Store<"theme", {
         theme: string;
-    };
+        fontSize: string;
+        fontFamily: string;
+    }, {}, {
+        setFontSize(size: string): void;
+        setFontFamily(font: string): void;
+    }>;
 };

package/dist/index.d.ts

@@ -3,11 +3,12 @@
  *
  * 2.0 起合并了原 @hlw-uni/mp-core 全部内容。
  * 业务方一处 import，无需再分包：
- *   import { useMsg, useThemePageStyle, ... } from "@hlw-uni/mp-vue";
+ *   import { useMsg, useTheme, ... } from "@hlw-uni/mp-vue";
  *
  * UI 组件（hlw-page / hlw-button / hlw-ad 等）走 easycom 自动注册，不在这里 export。
  */
 export * from './composables';
+export { useTheme, themePresets, type ThemePreset, fontFamilyPresets, type FontFamilyPreset, fontSizePresets, type FontSizePreset } from './core/theme';
 export type { HlwMenuItem } from './components/hlw-menu/types';
 export type { HlwPagingRef, HlwPagingInstance } from './components/hlw-paging/types';
 export { useApp } from './app';

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@dcloudio/uni-app")) : typeof define === "function" && define.amd ? define(["exports", "vue", "@dcloudio/uni-app"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.HlwUniVue = {}, global.vue, global.uniApp));
-})(this, function(exports2, vue, uniApp) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@dcloudio/uni-app"), require("pinia")) : typeof define === "function" && define.amd ? define(["exports", "vue", "@dcloudio/uni-app", "pinia"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.HlwUniVue = {}, global.vue, global.uniApp, global.pinia));
+})(this, function(exports2, vue, uniApp, pinia) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -969,6 +969,123 @@ var __publicField = (obj, key, value) => {
       miniProgram: (appId, options) => navigate("miniprogram", appId, options)
     };
   }
+  const themePresets = [
+    {
+      id: "white-theme",
+      name: "白色主题",
+      color: "#ffffff"
+    },
+    {
+      id: "light-theme",
+      name: "简洁主题",
+      color: "var(--bg-page, #f8f8f8)"
+    },
+    {
+      id: "mono-theme",
+      name: "单色主题",
+      color: "var(--primary-color, #3b82f6)"
+    },
+    {
+      id: "color-theme",
+      name: "颜色主题",
+      color: "var(--primary-color, #3b82f6)"
+    }
+  ];
+  const fontSizePresets = [
+    {
+      id: "small",
+      name: "较小",
+      class: "font-size-small"
+    },
+    {
+      id: "standard",
+      name: "标准",
+      class: "font-size-standard"
+    },
+    {
+      id: "large",
+      name: "较大",
+      class: "font-size-large"
+    },
+    {
+      id: "extra-large",
+      name: "超大",
+      class: "font-size-extra-large"
+    }
+  ];
+  const fontFamilyPresets = [
+    {
+      id: "system",
+      name: "系统默认",
+      class: "font-family-system"
+    },
+    {
+      id: "sans",
+      name: "现代黑体",
+      class: "font-family-sans"
+    },
+    {
+      id: "serif",
+      name: "经典宋体",
+      class: "font-family-serif"
+    },
+    {
+      id: "kaiti",
+      name: "优雅楷体",
+      class: "font-family-kaiti"
+    }
+  ];
+  const useThemeStore = pinia.defineStore("theme", {
+    state: () => ({
+      theme: "white-theme",
+      fontSize: "standard",
+      fontFamily: "system"
+    }),
+    getters: {},
+    actions: {
+      setFontSize(size) {
+        if (["small", "standard", "large", "extra-large"].includes(size)) {
+          this.fontSize = size;
+        }
+      },
+      setFontFamily(font) {
+        if (["system", "sans", "serif", "kaiti"].includes(font)) {
+          this.fontFamily = font;
+        }
+      }
+    },
+    unistorage: true
+  });
+  function useTheme() {
+    const store = useThemeStore();
+    const theme = vue.computed(() => store.theme);
+    const fontSize = vue.computed(() => store.fontSize);
+    const fontSizeClass = vue.computed(() => {
+      const found = fontSizePresets.find((p) => p.id === store.fontSize);
+      return found ? found.class : "font-size-standard";
+    });
+    const fontFamily = vue.computed(() => store.fontFamily);
+    const fontFamilyClass = vue.computed(() => {
+      const found = fontFamilyPresets.find((p) => p.id === store.fontFamily);
+      return found ? found.class : "font-family-system";
+    });
+    function setFontSize(size) {
+      store.setFontSize(size);
+    }
+    function setFontFamily(font) {
+      store.setFontFamily(font);
+    }
+    return {
+      theme,
+      fontSize,
+      fontSizeClass,
+      setFontSize,
+      fontFamily,
+      fontFamilyClass,
+      setFontFamily,
+      store
+    };
+  }
   let _msg = null;
   let _utils = null;
   const hlw = {
@@ -1054,6 +1171,8 @@ var __publicField = (obj, key, value) => {
   exports2.copy = copy;
   exports2.cosAdapter = cosAdapter;
   exports2.download = download;
+  exports2.fontFamilyPresets = fontFamilyPresets;
+  exports2.fontSizePresets = fontSizePresets;
   exports2.getAdapter = getAdapter;
   exports2.hlw = hlw;
   exports2.ossAdapter = ossAdapter;
@@ -1064,6 +1183,7 @@ var __publicField = (obj, key, value) => {
   exports2.saveVideoFile = saveVideoFile;
   exports2.saveVideoUrl = saveVideoUrl;
   exports2.signText = signText;
+  exports2.themePresets = themePresets;
   exports2.toBoolean = toBoolean;
   exports2.toNumber = toNumber;
   exports2.toQuery = toQuery;
@@ -1075,6 +1195,7 @@ var __publicField = (obj, key, value) => {
   exports2.useRefs = useRefs;
   exports2.useRequest = useRequest;
   exports2.useShare = useShare;
+  exports2.useTheme = useTheme;
   exports2.useUpload = useUpload;
   exports2.useUtils = useUtils;
   exports2.vCopy = vCopy;

package/dist/index.mjs

@@ -4,8 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, onBeforeUpdate, onUnmounted, createSSRApp } from "vue";
+import { ref, onBeforeUpdate, onUnmounted, computed, createSSRApp } from "vue";
 import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
+import { defineStore } from "pinia";
 const cosAdapter = {
   name: "cos",
   /**
@@ -967,6 +968,123 @@ function useNavigate() {
     miniProgram: (appId, options) => navigate("miniprogram", appId, options)
   };
 }
+const themePresets = [
+  {
+    id: "white-theme",
+    name: "白色主题",
+    color: "#ffffff"
+  },
+  {
+    id: "light-theme",
+    name: "简洁主题",
+    color: "var(--bg-page, #f8f8f8)"
+  },
+  {
+    id: "mono-theme",
+    name: "单色主题",
+    color: "var(--primary-color, #3b82f6)"
+  },
+  {
+    id: "color-theme",
+    name: "颜色主题",
+    color: "var(--primary-color, #3b82f6)"
+  }
+];
+const fontSizePresets = [
+  {
+    id: "small",
+    name: "较小",
+    class: "font-size-small"
+  },
+  {
+    id: "standard",
+    name: "标准",
+    class: "font-size-standard"
+  },
+  {
+    id: "large",
+    name: "较大",
+    class: "font-size-large"
+  },
+  {
+    id: "extra-large",
+    name: "超大",
+    class: "font-size-extra-large"
+  }
+];
+const fontFamilyPresets = [
+  {
+    id: "system",
+    name: "系统默认",
+    class: "font-family-system"
+  },
+  {
+    id: "sans",
+    name: "现代黑体",
+    class: "font-family-sans"
+  },
+  {
+    id: "serif",
+    name: "经典宋体",
+    class: "font-family-serif"
+  },
+  {
+    id: "kaiti",
+    name: "优雅楷体",
+    class: "font-family-kaiti"
+  }
+];
+const useThemeStore = defineStore("theme", {
+  state: () => ({
+    theme: "white-theme",
+    fontSize: "standard",
+    fontFamily: "system"
+  }),
+  getters: {},
+  actions: {
+    setFontSize(size) {
+      if (["small", "standard", "large", "extra-large"].includes(size)) {
+        this.fontSize = size;
+      }
+    },
+    setFontFamily(font) {
+      if (["system", "sans", "serif", "kaiti"].includes(font)) {
+        this.fontFamily = font;
+      }
+    }
+  },
+  unistorage: true
+});
+function useTheme() {
+  const store = useThemeStore();
+  const theme = computed(() => store.theme);
+  const fontSize = computed(() => store.fontSize);
+  const fontSizeClass = computed(() => {
+    const found = fontSizePresets.find((p) => p.id === store.fontSize);
+    return found ? found.class : "font-size-standard";
+  });
+  const fontFamily = computed(() => store.fontFamily);
+  const fontFamilyClass = computed(() => {
+    const found = fontFamilyPresets.find((p) => p.id === store.fontFamily);
+    return found ? found.class : "font-family-system";
+  });
+  function setFontSize(size) {
+    store.setFontSize(size);
+  }
+  function setFontFamily(font) {
+    store.setFontFamily(font);
+  }
+  return {
+    theme,
+    fontSize,
+    fontSizeClass,
+    setFontSize,
+    fontFamily,
+    fontFamilyClass,
+    setFontFamily,
+    store
+  };
+}
 let _msg = null;
 let _utils = null;
 const hlw = {
@@ -1053,6 +1171,8 @@ export {
   copy,
   cosAdapter,
   download,
+  fontFamilyPresets,
+  fontSizePresets,
   getAdapter,
   hlw,
   ossAdapter,
@@ -1063,6 +1183,7 @@ export {
   saveVideoFile,
   saveVideoUrl,
   signText,
+  themePresets,
   toBoolean,
   toNumber,
   toQuery,
@@ -1074,6 +1195,7 @@ export {
   useRefs,
   useRequest,
   useShare,
+  useTheme,
   useUpload,
   useUtils,
   vCopy,

package/dist/stores/index.d.ts

@@ -0,0 +1 @@
+export * from './theme';

package/dist/stores/theme.d.ts

@@ -0,0 +1,27 @@
+import { StoreDefinition } from 'pinia';
+export interface ThemePreset {
+    id: string;
+    name: string;
+    color: string;
+}
+export declare const themePresets: ThemePreset[];
+export interface FontSizePreset {
+    id: string;
+    name: string;
+    class: string;
+}
+export declare const fontSizePresets: FontSizePreset[];
+export interface FontFamilyPreset {
+    id: string;
+    name: string;
+    class: string;
+}
+export declare const fontFamilyPresets: FontFamilyPreset[];
+export declare const useThemeStore: StoreDefinition<"theme", {
+    theme: string;
+    fontSize: string;
+    fontFamily: string;
+}, {}, {
+    setFontSize(size: string): void;
+    setFontFamily(font: string): void;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "2.1.60",
+    "version": "2.1.69",
     "description": "hlw-uni 小程序运行时 — Vue 组件 + composables + theme + http + 工具集（合并自原 mp-core）",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

package/src/components/hlw-add-mini/index.vue

@@ -1,137 +1,207 @@
 <template>
-	<view v-if="props.show" class="hlw-add-mini" :style="{ top }">
-		<view class="hlw-add-mini__arrow" />
-		<view class="hlw-add-mini__content">
-			<view class="hlw-add-mini__text">
-				<view class="hlw-add-mini__title">{{ props.title }}</view>
-				<view v-if="props.desc" class="hlw-add-mini__desc">{{ props.desc }}</view>
-			</view>
-			<view class="hlw-add-mini__close" @tap="close">×</view>
-		</view>
-	</view>
+    <view v-if="props.show" class="hlw-add-mini" :style="{ top }">
+        <view class="hlw-add-mini__arrow" :style="arrowStyle" />
+        <view class="hlw-add-mini__content">
+            <view class="hlw-add-mini__text">
+                <view class="hlw-add-mini__title">{{ props.title }}</view>
+                <view v-if="props.desc" class="hlw-add-mini__desc">{{ props.desc }}</view>
+            </view>
+            <view class="hlw-add-mini__close" @tap="close">×</view>
+        </view>
+    </view>
 </template>
 
 <script setup lang="ts">
 /**
  * HlwAddMini - 添加小程序提示气泡组件
- * 
+ *
  * 用于提示用户点击右上角将当前小程序“添加到我的小程序”中，以提升用户留存。
  * 会根据是否为自定义导航栏（custom），自动调整气泡浮动位置（避开胶囊按钮与状态栏）。
  */
-import { computed } from "vue";
+import { computed, ref, onMounted } from "vue";
 import { useDevice } from "../../composables/device";
 
 defineOptions({ name: "HlwAddMini" });
 
 interface Props {
-	/** 是否显示提示气泡 */
-	show?: boolean;
-	/** 页面导航栏样式：default (系统默认) | custom (自定义导航) */
-	navigationStyle?: "default" | "custom";
-	/** 气泡主标题文字 */
-	title?: string;
-	/** 气泡副标题/描述文字 */
-	desc?: string;
+    /** 是否显示提示气泡 */
+    show?: boolean;
+    /** 气泡主标题文字 */
+    title?: string;
+    /** 气泡副标题/描述文字 */
+    desc?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	show: false,
-	navigationStyle: "default",
-	title: "添加到我的小程序",
-	desc: "点击右上角 ··· 添加",
+    show: false,
+    title: "添加到我的小程序",
+    desc: "点击右上角 ··· 添加",
 });
 
 const emit = defineEmits<{
-	/** 点击关闭按钮时触发 */
-	close: []
+    /** 点击关闭按钮时触发 */
+    close: [];
 }>();
 
 // 从 useDevice 获取缓存的设备系统信息，规避在 computed 中频繁调用同步系统 API 的性能问题
 const { info } = useDevice();
 
-const top = computed(() =>
-	props.navigationStyle === "custom" ? `${info.status_bar_height + 48}px` : "12px"
-);
+const isCustomNav = ref(false);
+
+onMounted(() => {
+    // 1. 全局配置探测（针对全局自定义导航样式，可立即识别，免去生命周期时序竞态问题）
+    try {
+        if (typeof __wxConfig !== "undefined") {
+            // @ts-ignore
+            const globalStyle = __wxConfig.globalStyle?.navigationStyle || __wxConfig.global?.window?.navigationStyle;
+            if (globalStyle === "custom") {
+                isCustomNav.value = true;
+                return;
+            }
+        }
+    } catch (e) {
+        // 容错
+    }
+
+    // 2. 延迟探测（避开组件挂载时 getCurrentPages 尚未完全初始化的竞态，并且使用非破坏性读取）
+    setTimeout(() => {
+        try {
+            const pages = getCurrentPages();
+            if (pages && pages.length > 0) {
+                const page = pages[pages.length - 1];
+                // @ts-ignore - 微信小程序原生属性或 uni-app 底层元数据配置
+                const style = page.__wxConfig?.navigationStyle || page?.$page?.meta?.navigationStyle;
+                if (style === "custom") {
+                    isCustomNav.value = true;
+                }
+            }
+        } catch (e) {
+            // 容错
+        }
+    }, 100);
+});
+
+const top = computed(() => {
+    if (isCustomNav.value) {
+        try {
+            const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+            if (menuButtonInfo && menuButtonInfo.bottom > 0) {
+                // 胶囊底部高度 + 16px 作为气泡定位的顶部基准，保证指向绝对精确且避开胶囊
+                return `${menuButtonInfo.bottom + 16}px`;
+            }
+        } catch (e) {
+            // 跨端环境不支持或报错时，执行安全降级计算
+        }
+        return `${info.status_bar_height + 50}px`;
+    }
+    return "12px";
+});
+
+const arrowStyle = computed(() => {
+    try {
+        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+        if (menuButtonInfo && menuButtonInfo.width > 0) {
+            // 胶囊左边缘 + 胶囊宽度的 28% (即三点按钮的中心点)
+            const dotsCenterX = menuButtonInfo.left + menuButtonInfo.width * 0.28;
+            // 屏幕宽度 - 胶囊三点中心点 = 三点中心点到屏幕右边缘的像素距离
+            const arrowRightPx = info.window_width - dotsCenterX;
+            // 气泡右边缘到屏幕右边缘的像素距离 (22rpx)
+            const bubbleRightPx = uni.upx2px(22);
+            // 箭头相对于气泡右侧边缘的像素偏移 (再减去箭头自身半宽 12rpx 对应的 px 像素)
+            const arrowHalfWidthPx = uni.upx2px(12);
+            const rightOffset = arrowRightPx - bubbleRightPx - arrowHalfWidthPx;
+
+            return {
+                right: `${rightOffset}px`,
+            };
+        }
+    } catch (e) {
+        // 容错降级
+    }
+    return {};
+});
 
 /**
  * 触发关闭气泡事件。
  */
 function close() {
-	emit("close");
+    emit("close");
 }
 </script>
 
 <style lang="scss" scoped>
 .hlw-add-mini {
-	position: fixed;
-	right: 22rpx;
-	z-index: 32;
-	width: 340rpx;
-	animation: hlw-add-mini-in 0.22s ease-out both;
+    position: fixed;
+    right: 22rpx;
+    z-index: 99999;
+    width: 340rpx;
+    animation: hlw-add-mini-in 0.22s ease-out both;
 }
 
 .hlw-add-mini__arrow {
-	position: absolute;
-	right: 56rpx;
-	top: -10rpx;
-	width: 20rpx;
-	height: 20rpx;
-	background: rgba(17, 24, 39, 0.82);
-	transform: rotate(45deg);
+    position: absolute;
+    right: 92rpx;
+    top: -13rpx;
+    width: 0;
+    height: 0;
+    z-index: 99999;
+    border-left: 12rpx solid transparent;
+    border-right: 12rpx solid transparent;
+    border-bottom: 14rpx solid rgba(17, 24, 39, 0.82);
 }
 
 .hlw-add-mini__content {
-	display: flex;
-	align-items: center;
-	gap: 12rpx;
-	padding: 16rpx 14rpx 16rpx 20rpx;
-	border-radius: 14rpx;
-	background: rgba(17, 24, 39, 0.82);
-	box-shadow: 0 12rpx 34rpx rgba(15, 23, 42, 0.22);
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    padding: 16rpx 14rpx 16rpx 20rpx;
+    border-radius: 14rpx;
+    background: rgba(17, 24, 39, 0.82);
+    box-shadow: 0 12rpx 34rpx rgba(15, 23, 42, 0.22);
 }
 
 .hlw-add-mini__text {
-	flex: 1;
-	min-width: 0;
+    flex: 1;
+    min-width: 0;
 }
 
 .hlw-add-mini__title {
-	color: #ffffff;
-	font-size: 25rpx;
-	font-weight: 400;
-	line-height: 1.3;
+    color: #ffffff;
+    font-size: 25rpx;
+    font-weight: 400;
+    line-height: 1.3;
     letter-spacing: 1rpx;
 }
 
 .hlw-add-mini__desc {
-	margin-top: 4rpx;
-	color: rgba(255, 255, 255, 0.72);
-	font-size: 21rpx;
-	line-height: 1.3;
+    margin-top: 4rpx;
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 21rpx;
+    line-height: 1.3;
     letter-spacing: 1rpx;
 }
 
 .hlw-add-mini__close {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	width: 36rpx;
-	height: 36rpx;
-	color: rgba(255, 255, 255, 0.72);
-	font-size: 30rpx;
-	line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 36rpx;
+    height: 36rpx;
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 30rpx;
+    line-height: 1;
 }
 
 @keyframes hlw-add-mini-in {
-	0% {
-		opacity: 0;
-		transform: translateY(-8rpx);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
+    0% {
+        opacity: 0;
+        transform: translateY(-8rpx);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 </style>

package/src/components/hlw-avatar/index.vue

@@ -1,12 +1,6 @@
 <template>
     <view :class="`hlw-avatar hlw-avatar--${size ?? 'medium'}`" :style="avatarStyle">
-        <image
-            v-if="src && !loadError"
-            class="hlw-avatar__image"
-            :src="src"
-            mode="aspectFill"
-            @error="loadError = true"
-        />
+        <image v-if="src && !loadError" class="hlw-avatar__image" :src="src" mode="aspectFill" @error="loadError = true" />
         <view v-else class="hlw-avatar__placeholder">
             <text class="hlw-avatar__initial">{{ initial }}</text>
         </view>
@@ -30,12 +24,12 @@
  * <HlwAvatar src="/avatar.png" name="张三" size="large" />
  * ```
  */
-import { ref, computed } from 'vue';
+import { ref, computed } from "vue";
 
 const props = defineProps<{
     src?: string;
     name?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     border?: number;
 }>();
 
@@ -43,11 +37,11 @@ const loadError = ref(false);
 const avatarStyle = computed(() => {
     const border = Math.max(0, Number(props.border ?? 0));
     return {
-        border: border > 0 ? `${border}px solid #fff` : '0',
+        border: border > 0 ? `${border}px solid #fff` : "0",
     };
 });
 const initial = computed(() => {
-    if (!props.name) return '?';
+    if (!props.name) return "?";
     return props.name.charAt(0).toUpperCase();
 });
 </script>
@@ -60,9 +54,18 @@ const initial = computed(() => {
     flex-shrink: 0;
 }
 
-.hlw-avatar--small  { width: 56rpx;  height: 56rpx; }
-.hlw-avatar--medium { width: 80rpx;  height: 80rpx; }
-.hlw-avatar--large  { width: 120rpx; height: 120rpx; }
+.hlw-avatar--small {
+    width: 56rpx;
+    height: 56rpx;
+}
+.hlw-avatar--medium {
+    width: 80rpx;
+    height: 80rpx;
+}
+.hlw-avatar--large {
+    width: 120rpx;
+    height: 120rpx;
+}
 
 .hlw-avatar__image {
     width: 100%;
@@ -72,18 +75,23 @@ const initial = computed(() => {
 .hlw-avatar__placeholder {
     width: 100%;
     height: 100%;
-    background: #07c160;
+    background: #f1f5f9;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .hlw-avatar__initial {
-    color: #fff;
-    font-weight: bold;
+    color: #94a3b8;
 }
 
-.hlw-avatar--small  .hlw-avatar__initial { font-size: var(--font-xs, 20rpx); }
-.hlw-avatar--medium .hlw-avatar__initial { font-size: var(--font-base, 28rpx); }
-.hlw-avatar--large  .hlw-avatar__initial { font-size: var(--font-xl, 40rpx); }
+.hlw-avatar--small .hlw-avatar__initial {
+    font-size: var(--font-xs, 20rpx);
+}
+.hlw-avatar--medium .hlw-avatar__initial {
+    font-size: var(--font-base, 28rpx);
+}
+.hlw-avatar--large .hlw-avatar__initial {
+    font-size: var(--font-xl, 40rpx);
+}
 </style>

package/src/components/hlw-card-header/index.vue

@@ -207,6 +207,9 @@ defineOptions({
 
 .hlw-card-header__icon {
     font-size: var(--font-xs);
+    width: var(--font-xs);
+    height: var(--font-xs);
+    display: inline-block;
 }
 
 .hlw-card-header__title {

package/src/components/hlw-cell/index.vue

@@ -105,6 +105,12 @@ defineEmits<{ click: [] }>();
     font-size: var(--font-lg, 36rpx);
     color: var(--primary-color, #3b82f6);
     flex-shrink: 0;
+
+    view {
+        width: var(--font-lg, 36rpx);
+        height: var(--font-lg, 36rpx);
+        display: inline-block;
+    }
 }
 
 .hlw-cell-body {

package/src/components/hlw-custom/hlw-custom.vue

@@ -12,7 +12,7 @@
             :send-message-img="resolvedContact.img"
             :show-message-card="resolvedContact.show"
         >
-            <text class="iconfont icon-service" />
+            <text class="i-ri-customer-service-line contact-button-icon" />
             <text class="contact-button-text">{{ resolvedBtnTitle }}</text>
         </button>
     </view>
@@ -64,7 +64,7 @@ const resolvedContact = computed(() => {
     padding: var(--card-padding);
     border: 1rpx solid var(--border-color-light);
     border-radius: var(--card-radius);
-    background: linear-gradient(135deg, #ffffff 0%, rgba(49, 118, 255, 0.05) 100%);
+    background: linear-gradient(135deg, #ffffff 0%, var(--primary-light, rgba(76, 68, 239, 0.05)) 100%);
 }
 
 .contact-copy {
@@ -100,14 +100,15 @@ const resolvedContact = computed(() => {
     flex-shrink: 0;
     margin: 0;
     border-radius: var(--radius-full);
-    background: #3176ff;
+    background: var(--primary-color, #3b82f6);
     color: #ffffff;
     font: inherit;
     line-height: 68rpx;
 }
 
-.contact-button .iconfont {
-    font-size: var(--font-sm);
+.contact-button-icon {
+    width: var(--font-sm);
+    height: var(--font-sm);
 }
 
 .contact-button-text {

package/src/components/hlw-menu/index.vue

@@ -335,7 +335,10 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     flex-shrink: 0;
 
     text {
+        width: var(--hlw-menu-icon-size);
+        height: var(--hlw-menu-icon-size);
         font-size: var(--hlw-menu-icon-size);
+        display: inline-block;
     }
 
     &--grid {
@@ -343,7 +346,10 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
         height: var(--hlw-menu-grid-icon-box-size);
         border-radius: var(--radius-lg, 24rpx);
         text {
+            width: var(--hlw-menu-grid-icon-size);
+            height: var(--hlw-menu-grid-icon-size);
             font-size: var(--hlw-menu-grid-icon-size);
+            display: inline-block;
         }
     }
 
@@ -376,8 +382,8 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
         color: #f43f5e;
     }
     &--blue {
-        background: #eff6ff;
-        color: #3b82f6;
+        background: var(--primary-light, rgba(76, 68, 239, 0.12));
+        color: var(--primary-color, #3b82f6);
     }
     &--red {
         background: #fef2f2;
@@ -418,7 +424,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     background: #f43f5e;
 }
 .hlw-menu-tag--blue {
-    background: #3b82f6;
+    background: var(--primary-color, #3b82f6);
 }
 
 .hlw-menu-tag-pulse {

package/src/components/hlw-nav-bar/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="navbar">
+    <view class="navbar" :class="theme">
         <view :style="bar_style"></view>
         <view class="header" :style="{ height: header_height + 'px' }">
             <view @tap="tapBack" class="left" v-if="props.isBack">
@@ -7,7 +7,7 @@
             </view>
             <text class="title">{{ title }}</text>
         </view>
-        <view class="status-bar" v-if="theme != 'light-theme'">
+        <view class="status-bar" v-if="theme === 'color-theme'">
             <view class="within"></view>
         </view>
     </view>
@@ -17,6 +17,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { useTheme } from "@/core";
+
 const { theme } = useTheme();
 
 const statusBarHeight: number = uni.getSystemInfoSync()?.statusBarHeight || 0;
@@ -48,7 +49,7 @@ if (props.isBar) {
     status_bar_height = 15;
 }
 
-const header_height = ref<number>(menuButtonInfo.bottom - statusBarHeight + 3);
+const header_height = ref<number>(menuButtonInfo.bottom - statusBarHeight + 6);
 const navbar_height = ref(header_height.value + statusBarHeight);
 const status_bar_height_style = `${status_bar_height}px`;
 
@@ -67,11 +68,69 @@ function tapBack() {
 .navbar {
     display: flex;
     flex-direction: column;
-    background-color: var(--navbar-bg-color);
     position: fixed;
     width: 750rpx;
     z-index: 999;
-    border-bottom: var(--navbar-border-bottom);
+    border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+    transition:
+        background-color 0.2s ease,
+        border-bottom 0.2s ease;
+
+    /* 白色主题：白色导航栏，下方加一条灰色的细边框 */
+    &.white-theme {
+        background-color: var(--navbar-bg-color, #ffffff);
+        border-bottom: var(--navbar-border-bottom, 1rpx solid #e7e7e7);
+
+        .title {
+            color: var(--font-color, #303048);
+        }
+
+        .icon-left {
+            color: var(--font-color, #303048);
+        }
+    }
+
+    /* 简洁主题：背景色与页面全局背景色一致，无明显界限，无边框 */
+    &.light-theme {
+        background-color: var(--bg-page, #f8f8f8);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: var(--font-color, #303048);
+        }
+
+        .icon-left {
+            color: var(--font-color, #303048);
+        }
+    }
+
+    /* 单色主题：纯主题色导航栏，无边框，无圆角 */
+    &.mono-theme {
+        background-color: var(--primary-color, #3b82f6);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: #ffffff;
+        }
+
+        .icon-left {
+            color: #ffffff;
+        }
+    }
+
+    /* 颜色主题：导航栏使用立体光影感的主题色渐变背景（反向：左上偏深，右下偏亮），下方带有白色圆角过渡 */
+    &.color-theme {
+        background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%), var(--primary-color, #3b82f6);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: #ffffff;
+        }
+
+        .icon-left {
+            color: #ffffff;
+        }
+    }
 
     .header {
         display: flex;
@@ -90,31 +149,32 @@ function tapBack() {
             height: 100%;
 
             .icon-left {
-                color: var(--navbar-left-color);
+                font-size: 30rpx;
             }
         }
 
         .title {
-            font-size: var(--navbar-font-size);
-            color: var(--navbar-title-color);
-            letter-spacing: 3rpx;
-            font-weight: bold;
+            font-size: var(--navbar-font-size, 26rpx);
+            letter-spacing: 1rpx;
+            font-weight: normal;
         }
     }
 
     .status-bar {
-        background-color: var(--navbar-bg-color);
+        background-color: transparent;
         height: v-bind(status_bar_height_style);
         width: 750rpx;
         position: relative;
 
         .within {
             position: absolute;
+            left: 0;
+            top: 0;
             width: 750rpx;
-            height: v-bind(status_bar_height_style);
-            background-color: var(--bg-color);
-            border-top-left-radius: var(--status-bar-border);
-            border-top-right-radius: var(--status-bar-border);
+            height: calc(v-bind(status_bar_height_style) + 2rpx);
+            background-color: var(--bg-color, var(--bg-page, #f8f8f8));
+            border-top-left-radius: var(--status-bar-border, var(--card-radius, 32rpx));
+            border-top-right-radius: var(--status-bar-border, var(--card-radius, 32rpx));
         }
     }
 }

package/src/components/hlw-page/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <view :class="theme" style="padding-bottom: 100rpx">
+    <view :class="[theme, fontSizeClass, fontFamilyClass]" style="padding-bottom: 100rpx">
         <hlw-nav-bar :is-back="props.isBack" :title="title" :is-bar="props.isBar"></hlw-nav-bar>
         <slot></slot>
     </view>
@@ -9,7 +9,7 @@
 import { useTheme } from "@/core";
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import { ref } from "vue";
-const { theme } = useTheme();
+const { theme, fontSizeClass, fontFamilyClass } = useTheme();
 
 const props = defineProps({
     isBar: {
@@ -29,4 +29,70 @@ const props = defineProps({
 const title = ref(props.title);
 </script>
 
-<style></style>
+<style lang="scss">
+/* 全局系统字体大小缩放配置 */
+.font-size-small {
+    --font-xs: 18rpx;
+    --font-sm: 22rpx;
+    --font-base: 24rpx;
+    --font-md: 28rpx;
+    --font-lg: 32rpx;
+    --font-xl: 36rpx;
+}
+
+.font-size-standard {
+    --font-xs: 20rpx;
+    --font-sm: 24rpx;
+    --font-base: 28rpx;
+    --font-md: 32rpx;
+    --font-lg: 36rpx;
+    --font-xl: 40rpx;
+}
+
+.font-size-large {
+    --font-xs: 22rpx;
+    --font-sm: 28rpx;
+    --font-base: 32rpx;
+    --font-md: 36rpx;
+    --font-lg: 40rpx;
+    --font-xl: 44rpx;
+}
+
+.font-size-extra-large {
+    --font-xs: 24rpx;
+    --font-sm: 32rpx;
+    --font-base: 36rpx;
+    --font-md: 40rpx;
+    --font-lg: 44rpx;
+    --font-xl: 48rpx;
+}
+
+/* 全局字体样式配置 */
+.font-family-system {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
+    view, text, button, input, textarea {
+        font-family: inherit !important;
+    }
+}
+
+.font-family-sans {
+    font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif !important;
+    view, text, button, input, textarea {
+        font-family: inherit !important;
+    }
+}
+
+.font-family-serif {
+    font-family: "Songti SC", "STSong", "SimSun", "Georgia", serif !important;
+    view, text, button, input, textarea {
+        font-family: inherit !important;
+    }
+}
+
+.font-family-kaiti {
+    font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimKai", serif !important;
+    view, text, button, input, textarea {
+        font-family: inherit !important;
+    }
+}
+</style>

package/src/core/theme.ts

@@ -1,12 +1,62 @@
 import { computed } from "vue";
 import type { ComputedRef } from "vue";
+import { 
+    useThemeStore, 
+    themePresets, 
+    fontSizePresets, 
+    fontFamilyPresets 
+} from "../stores/theme";
+
+export { 
+    themePresets, 
+    type ThemePreset, 
+    fontSizePresets, 
+    type FontSizePreset, 
+    fontFamilyPresets, 
+    type FontFamilyPreset 
+} from "../stores/theme";
+
+// ==========================================
+// 统一个性化外观配置 Hook (useTheme)
+// ==========================================
 
 export function useTheme() {
-    const theme: ComputedRef<string> = computed(() => "light-theme");
+    const store = useThemeStore();
+    
+    // 主题
+    const theme: ComputedRef<string> = computed(() => store.theme);
+    
+    // 字体大小
+    const fontSize: ComputedRef<string> = computed(() => store.fontSize);
+    const fontSizeClass: ComputedRef<string> = computed(() => {
+        const found = fontSizePresets.find((p) => p.id === store.fontSize);
+        return found ? found.class : "font-size-standard";
+    });
+
+    // 字体样式
+    const fontFamily: ComputedRef<string> = computed(() => store.fontFamily);
+    const fontFamilyClass: ComputedRef<string> = computed(() => {
+        const found = fontFamilyPresets.find((p) => p.id === store.fontFamily);
+        return found ? found.class : "font-family-system";
+    });
+
+    // 动作方法
+    function setFontSize(size: string): void {
+        store.setFontSize(size);
+    }
+
+    function setFontFamily(font: string): void {
+        store.setFontFamily(font);
+    }
+
     return {
         theme,
-        store: {
-            theme: "light-theme",
-        },
+        fontSize,
+        fontSizeClass,
+        setFontSize,
+        fontFamily,
+        fontFamilyClass,
+        setFontFamily,
+        store,
     };
 }

package/src/index.ts

@@ -3,20 +3,27 @@
  *
  * 2.0 起合并了原 @hlw-uni/mp-core 全部内容。
  * 业务方一处 import，无需再分包：
- *   import { useMsg, useThemePageStyle, ... } from "@hlw-uni/mp-vue";
+ *   import { useMsg, useTheme, ... } from "@hlw-uni/mp-vue";
  *
  * UI 组件（hlw-page / hlw-button / hlw-ad 等）走 easycom 自动注册，不在这里 export。
  */
 
 // Composables / 工具 / Theme
 export * from "./composables";
+export { 
+    useTheme, 
+    themePresets, 
+    type ThemePreset,
+    fontFamilyPresets,
+    type FontFamilyPreset,
+    fontSizePresets,
+    type FontSizePreset
+} from "./core/theme";
 
 // 类型
 export type { HlwMenuItem } from "./components/hlw-menu/types";
 export type { HlwPagingRef, HlwPagingInstance } from "./components/hlw-paging/types";
 
-
-
 // App 根上下文
 export { useApp } from "./app";
 

package/src/stores/index.ts

@@ -0,0 +1 @@
+export * from "./theme";

package/src/stores/theme.ts

@@ -0,0 +1,126 @@
+import { defineStore } from "pinia";
+
+// ==========================================
+// 1. 主题 (Theme) 预设与类型
+// ==========================================
+
+export interface ThemePreset {
+    id: string;
+    name: string;
+    color: string;
+}
+
+export const themePresets: ThemePreset[] = [
+    {
+        id: "white-theme",
+        name: "白色主题",
+        color: "#ffffff",
+    },
+    {
+        id: "light-theme",
+        name: "简洁主题",
+        color: "var(--bg-page, #f8f8f8)",
+    },
+    {
+        id: "mono-theme",
+        name: "单色主题",
+        color: "var(--primary-color, #3b82f6)",
+    },
+    {
+        id: "color-theme",
+        name: "颜色主题",
+        color: "var(--primary-color, #3b82f6)",
+    },
+];
+
+// ==========================================
+// 2. 字体大小 (FontSize) 预设与类型
+// ==========================================
+
+export interface FontSizePreset {
+    id: string;
+    name: string;
+    class: string;
+}
+
+export const fontSizePresets: FontSizePreset[] = [
+    {
+        id: "small",
+        name: "较小",
+        class: "font-size-small",
+    },
+    {
+        id: "standard",
+        name: "标准",
+        class: "font-size-standard",
+    },
+    {
+        id: "large",
+        name: "较大",
+        class: "font-size-large",
+    },
+    {
+        id: "extra-large",
+        name: "超大",
+        class: "font-size-extra-large",
+    },
+];
+
+// ==========================================
+// 3. 字体样式 (FontFamily) 预设与类型
+// ==========================================
+
+export interface FontFamilyPreset {
+    id: string;
+    name: string;
+    class: string;
+}
+
+export const fontFamilyPresets: FontFamilyPreset[] = [
+    {
+        id: "system",
+        name: "系统默认",
+        class: "font-family-system",
+    },
+    {
+        id: "sans",
+        name: "现代黑体",
+        class: "font-family-sans",
+    },
+    {
+        id: "serif",
+        name: "经典宋体",
+        class: "font-family-serif",
+    },
+    {
+        id: "kaiti",
+        name: "优雅楷体",
+        class: "font-family-kaiti",
+    },
+];
+
+// ==========================================
+// 4. 统一个性化配置 Store (Theme / Font)
+// ==========================================
+
+export const useThemeStore = defineStore("theme", {
+    state: () => ({
+        theme: "white-theme",
+        fontSize: "standard",
+        fontFamily: "system",
+    }),
+    getters: {},
+    actions: {
+        setFontSize(size: string) {
+            if (["small", "standard", "large", "extra-large"].includes(size)) {
+                this.fontSize = size;
+            }
+        },
+        setFontFamily(font: string) {
+            if (["system", "sans", "serif", "kaiti"].includes(font)) {
+                this.fontFamily = font;
+            }
+        },
+    },
+    unistorage: true,
+});