@hlw-uni/mp-vue 2.1.51 → 2.1.54

package/src/composables/share/index.ts

@@ -1,189 +1,85 @@
-/**
- * useShare - 小程序分享 composable
- *
- * 两层 API 并存：
- *   - useShare(config)     —— SDK 层：直接注册 onShareAppMessage / onShareTimeline 钩子
- *   - useShareConfig(...)  —— 业务层：lazy load 后端配置 + cache + fallback resolver
- */
-import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
-import { ref } from 'vue';
-import { unwrapPayload, type AdapterPayload } from '../_internal/unwrap';
+import {
+    onShareAppMessage as registerShareAppMessage,
+    onShareTimeline as registerShareTimeline,
+} from "@dcloudio/uni-app";
 
-export interface ShareAppMessageContent {
-    /** 分享标题 */
+export interface ShareConfig {
     title?: string;
-    /** 分享路径，必须是以 / 开头的完整路径 */
     path?: string;
-    /** 自定义图片路径 */
     imageUrl?: string;
 }
 
-export interface ShareTimelineContent {
-    /** 朋友圈分享标题 */
-    title?: string;
-    /** 页面携带的 query 参数 */
-    query?: string;
-    /** 自定义图片路径 */
-    imageUrl?: string;
-}
-
-export interface ShareConfig extends ShareAppMessageContent {
-    /** 朋友圈专属配置，不填则复用朋友分享配置 */
-    timeline?: ShareTimelineContent;
-}
-
-/**
- * 分享来源。
- * - `button` 页面内转发按钮
- * - `menu` 右上角菜单
- */
-export type ShareFrom = 'button' | 'menu';
+export type ShareConfigResolver = ShareConfig | (() => ShareConfig);
 
-export type ShareConfigResolver = (from: ShareFrom) => ShareConfig;
-
-/**
- * 注册小程序分享钩子。
- */
-export function useShare(config: ShareConfig | ShareConfigResolver) {
-    /**
-     * 根据分享来源解析最终分享配置。
-     */
-    const resolve = (from: ShareFrom): ShareConfig =>
-        typeof config === 'function' ? config(from) : config;
-
-    /**
-     * 注册分享给朋友的回调。
-     */
-    onShareAppMessage((options: { from?: string } | undefined) => {
-        const resolved = resolve((options?.from as ShareFrom) ?? 'menu');
-        const payload: ShareAppMessageContent = {};
-        if (resolved.title !== undefined) payload.title = resolved.title;
-        if (resolved.path !== undefined) payload.path = resolved.path;
-        if (resolved.imageUrl !== undefined) payload.imageUrl = resolved.imageUrl;
-        return payload;
-    });
-
-    /**
-     * 注册分享到朋友圈的回调。
-     */
-    onShareTimeline(() => {
-        const resolved = resolve('menu');
-        const timeline = resolved.timeline ?? {};
-        const payload: ShareTimelineContent = {};
-        const title = timeline.title ?? resolved.title;
-        const imageUrl = timeline.imageUrl ?? resolved.imageUrl;
-        if (title !== undefined) payload.title = title;
-        if (timeline.query !== undefined) payload.query = timeline.query;
-        if (imageUrl !== undefined) payload.imageUrl = imageUrl;
-        return payload;
-    });
+export interface ShareHandlers {
+    onShareAppMessage: (config?: ShareConfigResolver) => void;
+    onShareTimeline: (config?: ShareConfigResolver) => void;
+    showShareMenu: () => void;
 }
 
-/* ============================================================
- * useShareConfig —— 业务层：lazy load 后端聚合配置 + cache + fallback resolver
- *
- * 后端按页面 key 聚合返回各页 title / image，前端拉一次缓存全局共用。
- * 返回的 resolver 同时喂给 onShareAppMessage 和 onShareTimeline。
- *
- * 使用方式：
- *
- *   1. App.vue / bootstrap 注入回调：
- *
- *      setConfigShare({
- *          getConfig: async () => {
- *              const res = await getShareConfig();
- *              return res.code === 1 ? res.data : null;
- *          },
- *      });
- *
- *   2. 任意页面 setup：
- *
- *      const share = useShareConfig("index", {
- *          title: "兜底标题",
- *          path: "/pages/index/index",
- *      });
- *      onShareAppMessage(share);
- *      onShareTimeline(share);
- * ============================================================ */
-
-/** 单页分享配置 */
-export interface PageShareItem {
-    title: string;
-    image: string;
+function resolveConfig(config?: ShareConfigResolver): ShareConfig {
+    return typeof config === "function" ? config() : (config ?? {});
 }
 
-/** 后端返回的页面 key → 配置映射 */
-export type ShareConfigMap = Record<string, PageShareItem>;
-
-/**
- * Adapter 注入接口 —— getConfig 支持「已解包」或「ThinkAdmin envelope」两种返回值。
- * 业务方可以直接传 envelope-returning 接口：setConfigShare({ getConfig: getShareConfig })
- */
-export interface ShareConfigAdapter {
-    getConfig: () => Promise<AdapterPayload<ShareConfigMap>>;
-}
-
-/** 页面声明的兜底文案 / 跳转路径 */
-export interface PageShareFallback {
-    /** 后端 title 为空时用 */
-    title: string;
-    /** 分享跳转路径（必须 / 开头）；path 不走后端，由页面自定义 */
-    path: string;
-    /** 后端 image 为空时用；通常留空让微信自动截图 */
-    image?: string;
+function buildPayload(base: ShareConfigResolver, extra?: ShareConfigResolver): ShareConfig {
+    const current = {
+        ...resolveConfig(base),
+        ...resolveConfig(extra),
+    };
+    const payload: ShareConfig = {};
+    if (current.title) payload.title = current.title;
+    if (current.path) payload.path = current.path;
+    if (current.imageUrl) payload.imageUrl = current.imageUrl;
+    return payload;
 }
 
-/** 分享 payload —— 同时喂给 onShareAppMessage / onShareTimeline */
-export interface SharePayload {
-    title: string;
-    path: string;
-    imageUrl?: string;
+function showShareMenu(): void {
+    const api = typeof uni !== "undefined" ? (uni as unknown as {
+        showShareMenu?: (options: {
+            withShareTicket?: boolean;
+            menus?: string[];
+            fail?: () => void;
+        }) => void;
+    }) : undefined;
+
+    api?.showShareMenu?.({
+        withShareTicket: true,
+        menus: ["shareAppMessage", "shareTimeline"],
+        fail: () => undefined,
+    });
 }
 
-let shareAdapter: ShareConfigAdapter | null = null;
-const shareCache = ref<ShareConfigMap | null>(null);
-let sharePending: Promise<void> | null = null;
+export function useShare(config: ShareConfigResolver = {}): ShareHandlers {
+    let appMessageRegistered = false;
+    let timelineRegistered = false;
 
-/**
- * 注入业务回调（应用启动时调用一次；不调用则始终用 fallback）。
- */
-export function setConfigShare(a: ShareConfigAdapter): void {
-    shareAdapter = a;
-}
+    const onShareAppMessage = (extra?: ShareConfigResolver) => {
+        if (appMessageRegistered) return;
+        appMessageRegistered = true;
+        showShareMenu();
+        registerShareAppMessage(() => buildPayload(config, extra));
+    };
 
-function loadShareConfig(): Promise<void> {
-    if (shareCache.value) return Promise.resolve();
-    if (sharePending) return sharePending;
-    if (!shareAdapter?.getConfig) {
-        console.warn("[useShareConfig] adapter.getConfig 未注入；先调用 setConfigShare()");
-        return Promise.resolve();
-    }
-    sharePending = shareAdapter.getConfig()
-        .then((raw) => {
-            const cfg = unwrapPayload(raw);
-            if (cfg) shareCache.value = cfg;
-        })
-        .catch((e) => {
-            console.warn("[useShareConfig] load failed", e);
-        })
-        .finally(() => {
-            sharePending = null;
+    const onShareTimeline = (extra?: ShareConfigResolver) => {
+        if (timelineRegistered) return;
+        timelineRegistered = true;
+        showShareMenu();
+        registerShareTimeline(() => {
+            const payload = buildPayload(config, extra);
+            return {
+                title: payload.title,
+                query: payload.path?.split("?")[1],
+                imageUrl: payload.imageUrl,
+            };
         });
-    return sharePending;
-}
+    };
+
+    onShareAppMessage();
+    onShareTimeline();
 
-/**
- * 业务级分享配置 helper —— 返回 resolver，可直接喂 onShareAppMessage / onShareTimeline。
- * 后端配置异步加载，加载完成前先用 fallback、加载完后自动切到后端值。
- */
-export function useShareConfig(pageKey: string, fallback: PageShareFallback) {
-    void loadShareConfig();
-    return (): SharePayload => {
-        const remote = shareCache.value?.[pageKey];
-        const title = remote?.title || fallback.title;
-        const image = remote?.image || fallback.image;
-        const payload: SharePayload = { title, path: fallback.path };
-        if (image) payload.imageUrl = image;
-        return payload;
+    return {
+        onShareAppMessage,
+        onShareTimeline,
+        showShareMenu,
     };
 }

package/src/composables/theme/appearance.ts

@@ -1,8 +1,9 @@
 /**
  * 外观模式 — 浅色 / 深色 / 跟随系统
  *
- * 提供一套语义化 CSS 变量（--bg-page, --surface-card, --text-primary ...），
- * 页面通过 hlw-page 的 `:page-style` 注入到 `page` 元素，让内部组件和样式统一消费。
+ * 提供一套语义化 CSS 变量（--bg-page, --surface-card, --text-primary ...）。
+ * 默认不通过 useThemePageStyle 注入，业务项目应在全局 CSS 中声明这些变量，
+ * 避免运行时 page-meta 覆盖业务侧样式。
  *
  * 使用指南：
  * - 业务样式里用 `var(--text-primary)` 代替硬编码 `#0f172a`

package/src/composables/theme/index.ts

@@ -1,13 +1,8 @@
 import { computed } from "vue";
-import { useColor } from "@/composables/color";
 import { useThemeStore } from "../../stores/theme";
 
-const { varsToStyle } = useColor();
 import { getCurrentFontVars } from "./font";
 import { getCurrentThemeVars } from "./palette";
-import { getCurrentAppearanceVars } from "./appearance";
-
-const CSS_CONTROLLED_THEME_VARS = new Set(["--border-color", "--border-color-light", "--border-color-focus"]);
 
 /**
  * @deprecated 历史事件名；现已改用 pinia store 响应式驱动，emit 不再有效。
@@ -15,52 +10,40 @@ const CSS_CONTROLLED_THEME_VARS = new Set(["--border-color", "--border-color-lig
  */
 export const THEME_CHANGE_EVENT = "hlw:theme-change";
 
-function omitCssControlledThemeVars(vars: Record<string, string>) {
-    const next: Record<string, string> = {};
-
-    Object.entries(vars).forEach(([name, value]) => {
-        if (!CSS_CONTROLLED_THEME_VARS.has(name)) {
-            next[name] = value;
-        }
-    });
-
-    return next;
-}
-
 /**
- * 只注入会随主题变化的变量（字号档位、主题色、外观模式）。
+ * 只注入运行时配置变量（字号档位、主题色）。
  *
- * 语义排版 token（--text-title-size 等）和业务视觉变量（如边框色）
- * 是静态值、不随主题变化，
- * 放在项目的全局 CSS（static/css/style.scss）里作为 page{} 默认值即可，
- * 让业务侧可以自由 override，不被运行时注入覆盖。
+ * 页面背景、卡片色、文字色、边框色等业务视觉变量统一由项目全局 CSS
+ * （static/css/style.scss）控制，避免 page-meta 运行时样式覆盖业务侧配置。
  */
 export function buildThemeStyle(): string {
     return varsToStyle({
         ...getCurrentFontVars(),
         ...getCurrentThemeVars(),
-        ...omitCssControlledThemeVars(getCurrentAppearanceVars()),
     });
 }
 
+function varsToStyle(vars: Record<string, string>): string {
+    return Object.entries(vars).map(([key, value]) => `${key}:${value}`).join(";") + ";";
+}
+
 /**
  * 获取主题样式字符串，用于注入 <page-meta :page-style>。
  *
- * 实现走 pinia store 响应式：store.scale / primaryColor / appearance 任一变化
+ * 实现走 pinia store 响应式：store.scale / primaryColor 任一变化
  * → computed 重算 → page-meta 自动 setData。
  *
  * 注：早期版本用 uni.$emit + onMounted+uni.$on 事件总线驱动，在 vue3 + 小程序部分
- * 基础库下 emit 后 ref 不响应（导致字号 / 主题色 / 外观切换不生效）。已改成响应式驱动。
+ * 基础库下 emit 后 ref 不响应（导致字号 / 主题色切换不生效）。已改成响应式驱动。
  */
 export function useThemePageStyle() {
     const store = useThemeStore();
     const themePageStyle = computed(() => {
-        // 显式 track 三个响应字段，触发 computed 重算
-        // setScale / setTheme / setAppearance 内部已先 set storage 再改 ref，
+        // 显式 track 两个响应字段，触发 computed 重算
+        // setScale / setTheme 内部已先 set storage 再改 ref，
         // 所以 buildThemeStyle 从 storage 读到的一定是最新值
         void store.scale;
         void store.primaryColor;
-        void store.appearance;
         return buildThemeStyle();
     });
     return { themePageStyle };

package/src/composables/theme/palette.ts

@@ -1,7 +1,3 @@
-import { useColor } from "@/composables/color";
-
-const { hexToRgba, darkenHex } = useColor();
-
 export interface ThemeColor {
     label: string;
     value: string;
@@ -65,3 +61,25 @@ export function getCurrentThemeVars(): Record<string, string> {
         "--info-dark": darkenHex(THEME_SEMANTIC_COLORS.info),
     };
 }
+
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+
+function parseHex(hex: string): [number, number, number] {
+    if (!HEX_RE.test(hex)) throw new Error(`Invalid hex color: ${hex}`);
+    return [
+        parseInt(hex.slice(1, 3), 16),
+        parseInt(hex.slice(3, 5), 16),
+        parseInt(hex.slice(5, 7), 16),
+    ];
+}
+
+function hexToRgba(hex: string, alpha: number): string {
+    const [r, g, b] = parseHex(hex);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function darkenHex(hex: string, amount = 0.15): string {
+    const [r, g, b] = parseHex(hex);
+    const darken = (value: number) => Math.max(0, Math.round(value * (1 - amount)));
+    return `#${darken(r).toString(16).padStart(2, "0")}${darken(g).toString(16).padStart(2, "0")}${darken(b).toString(16).padStart(2, "0")}`;
+}