@hlw-uni/mp-vue 2.1.60 → 2.1.70

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.70",
     "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>