@hlw-uni/mp-vue 2.1.58 → 2.1.60

package/src/composables/theme/appearance.ts

@@ -1,129 +0,0 @@
-/**
- * 外观模式 — 浅色 / 深色 / 跟随系统
- *
- * 提供一套语义化 CSS 变量（--bg-page, --surface-card, --text-primary ...）。
- * 默认不通过 useThemePageStyle 注入，业务项目应在全局 CSS 中声明这些变量，
- * 避免运行时 page-meta 覆盖业务侧样式。
- *
- * 使用指南：
- * - 业务样式里用 `var(--text-primary)` 代替硬编码 `#0f172a`
- * - 用 `var(--surface-card)` 代替硬编码 `#ffffff`
- * - 用 `var(--border-color-light)` 代替硬编码 `#f1f5f9`
- */
-
-/** 外观模式选项类型：浅色模式、深色模式、跟随系统 */
-export type Appearance = "light" | "dark" | "auto";
-
-/** 实际生效的外观模式：仅浅色或深色 */
-export type AppearanceMode = "light" | "dark";
-
-/**
- * 外观预设配置接口。
- */
-export interface AppearancePreset {
-    /** 选项值 */
-    value: Appearance;
-    /** 选项展示名称 */
-    label: string;
-}
-
-/** 存储外观设置的 LocalStorage 键名 */
-export const APPEARANCE_KEY = "hlw_appearance";
-
-/** 预设外观模式列表，常供设置页渲染选择器使用 */
-export const APPEARANCE_PRESETS: AppearancePreset[] = [
-    { value: "light", label: "浅色模式" },
-    { value: "dark", label: "深色模式" },
-    { value: "auto", label: "跟随系统" },
-];
-
-/** 浅色模式语义变量 */
-const LIGHT_VARS: Record<string, string> = {
-    "--bg-page": "#f6f6f6",
-    "--bg-elevated": "#ffffff",
-    "--surface-card": "#ffffff",
-    "--surface-card-muted": "#f8fafc",
-    "--surface-secondary": "#f1f5f9",
-    "--surface-tertiary": "#e2e8f0",
-    "--text-primary": "#0f172a",
-    "--text-secondary": "#334155",
-    "--text-muted": "#64748b",
-    "--text-subtle": "#94a3b8",
-    "--text-disabled": "#cbd5e1",
-    "--border-color": "#e2e8f0",
-    "--border-color-light": "#f1f5f9",
-    "--border-color-focus": "#bfdbfe",
-    "--shadow-soft": "0 2rpx 8rpx rgba(15, 23, 42, 0.04)",
-    "--shadow-card": "0 4rpx 16rpx rgba(15, 23, 42, 0.06)",
-};
-
-/** 深色模式语义变量 */
-const DARK_VARS: Record<string, string> = {
-    "--bg-page": "#0b1020",
-    "--bg-elevated": "#111827",
-    "--surface-card": "#1e293b",
-    "--surface-card-muted": "#273549",
-    "--surface-secondary": "#273549",
-    "--surface-tertiary": "#334155",
-    "--text-primary": "#f8fafc",
-    "--text-secondary": "#cbd5e1",
-    "--text-muted": "#94a3b8",
-    "--text-subtle": "#64748b",
-    "--text-disabled": "#475569",
-    "--border-color": "#334155",
-    "--border-color-light": "#1e293b",
-    "--border-color-focus": "#3b82f6",
-    "--shadow-soft": "0 2rpx 8rpx rgba(0, 0, 0, 0.3)",
-    "--shadow-card": "0 4rpx 16rpx rgba(0, 0, 0, 0.35)",
-};
-
-/** 不同外观模式的 CSS 变量映射 */
-export const APPEARANCE_VAR_MAP: Record<AppearanceMode, Record<string, string>> = {
-    light: LIGHT_VARS,
-    dark: DARK_VARS,
-};
-
-/**
- * 读取用户设置的外观配置（light / dark / auto）。
- * 默认返回 'auto'。
- * @returns 设定的外观模式类型
- */
-export function getCurrentAppearance(): Appearance {
-    try {
-        const v = uni.getStorageSync(APPEARANCE_KEY);
-        if (v === "light" || v === "dark" || v === "auto") return v;
-    } catch {}
-    return "auto";
-}
-
-/**
- * 将 auto 设置或用户选择解析为具体的 light/dark 实际模式。
- * 当为 auto 时，将读取系统当前的配色偏好。
- * @param appearance 输入的外观配置
- * @returns 解析后最终生效的外观模式 (light 或 dark)
- */
-export function resolveAppearance(appearance: Appearance): AppearanceMode {
-    if (appearance === "light" || appearance === "dark") return appearance;
-    try {
-        const info = uni.getSystemInfoSync();
-        if ((info as { theme?: string }).theme === "dark") return "dark";
-    } catch {}
-    return "light";
-}
-
-/**
- * 获取当前实际生效的外观模式 (light 或 dark)。
- * 自动根据用户偏好及系统主题进行判定。
- * @returns 实际生效的外观模式
- */
-export function getCurrentAppearanceMode(): AppearanceMode {
-    return resolveAppearance(getCurrentAppearance());
-}
-
-/**
- * 获取当前外观对应的 CSS 变量映射表。
- * @returns 包含各 CSS 变量名与对应颜色值键值对
- */
-export function getCurrentAppearanceVars(): Record<string, string> {
-    return APPEARANCE_VAR_MAP[getCurrentAppearanceMode()];
-}

package/src/composables/theme/font.ts

@@ -1,95 +0,0 @@
-/**
- * 字体大小缩放档位类型。
- * 从较小到特大，共 7 个档位。
- */
-export type FontScale = "small" | "compact" | "normal" | "medium" | "large" | "xlarge" | "xxlarge";
-
-/**
- * 字体大小配置预设接口。
- */
-export interface FontPreset {
-    /** 档位名称 */
-    label: string;
-    /** 该档位对应的全部 CSS 字号变量及对应尺寸 */
-    vars: Record<string, string>;
-}
-
-/** 存储字体字号档位设置的 LocalStorage 键名 */
-export const FONT_SCALE_KEY = "hlw_font_scale";
-
-/**
- * 字体档位对应的尺寸变量预设表。
- * 每个档位定义了从超小 (--font-xs) 到超大 (--font-xl) 的响应式字号。
- */
-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",
-        },
-    },
-    compact: {
-        label: "略小",
-        vars: {
-            "--font-xs": "18rpx", "--font-sm": "22rpx", "--font-base": "26rpx",
-            "--font-md": "30rpx", "--font-lg": "34rpx", "--font-xl": "38rpx",
-        },
-    },
-    normal: {
-        label: "标准",
-        vars: {
-            "--font-xs": "20rpx", "--font-sm": "24rpx", "--font-base": "28rpx",
-            "--font-md": "32rpx", "--font-lg": "36rpx", "--font-xl": "40rpx",
-        },
-    },
-    medium: {
-        label: "适中",
-        vars: {
-            "--font-xs": "22rpx", "--font-sm": "28rpx", "--font-base": "32rpx",
-            "--font-md": "36rpx", "--font-lg": "42rpx", "--font-xl": "46rpx",
-        },
-    },
-    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",
-        },
-    },
-    xxlarge: {
-        label: "特大",
-        vars: {
-            "--font-xs": "32rpx", "--font-sm": "42rpx", "--font-base": "48rpx",
-            "--font-md": "56rpx", "--font-lg": "64rpx", "--font-xl": "72rpx",
-        },
-    },
-};
-
-/**
- * 获取当前用户配置的字体字号缩放档位。
- * 默认返回 'normal'。
- * @returns 字体档位
- */
-export function getCurrentFontScale(): FontScale {
-    try {
-        const v = uni.getStorageSync(FONT_SCALE_KEY);
-        if (v === "small" || v === "compact" || v === "medium" || v === "large" || v === "xlarge" || v === "xxlarge") return v;
-    } catch {}
-    return "normal";
-}
-
-/**
- * 获取当前字体字号档位所映射的 CSS 变量表。
- * @returns CSS 变量名与具体字号的键值对
- */
-export function getCurrentFontVars(): Record<string, string> {
-    return FONT_PRESETS[getCurrentFontScale()].vars;
-}

package/src/composables/theme/index.ts

@@ -1,89 +0,0 @@
-import { computed } from "vue";
-import { useThemeStore } from "../../stores/theme";
-
-import { getCurrentFontVars } from "./font";
-import { getCurrentThemeVars } from "./palette";
-
-/**
- * @deprecated 历史事件名；现已改用 pinia store 响应式驱动，emit 不再有效。
- * 保留 export 仅为不破坏外部 import（不影响功能）。
- */
-export const THEME_CHANGE_EVENT = "hlw:theme-change";
-
-/**
- * 构建仅注入运行时配置变量（字号档位、主题色）的行内样式字符串。
- * 
- * 页面背景、卡片色、文字色、边框色等业务视觉变量统一由项目全局 CSS
- * （static/css/style.scss）控制，避免 page-meta 运行时样式覆盖业务侧配置。
- * 
- * @returns 扁平化后的 CSS 变量样式属性字符串
- */
-export function buildThemeStyle(): string {
-    return varsToStyle({
-        ...getCurrentFontVars(),
-        ...getCurrentThemeVars(),
-    });
-}
-
-/**
- * 将 CSS 键值对对象平铺拼接为 CSS inline style 格式字符串。
- */
-function varsToStyle(vars: Record<string, string>): string {
-    return Object.entries(vars).map(([key, value]) => `${key}:${value}`).join(";") + ";";
-}
-
-/**
- * 获取及监听主题与字号变化，返回可注入到 `<page-meta :page-style="themePageStyle">` 的计算属性。
- *
- * 实现基于 pinia store 响应式：当 store 中的字号档位或主题色发生改变时，
- * 触发计算属性重算并由 Vue 自动更新至 `<page-meta>` 的 setData 接口。
- *
- * @returns 包含 `themePageStyle` 计算属性的对象
- * 
- * @example
- * ```vue
- * <template>
- *   <page-meta :page-style="themePageStyle" />
- *   <view class="container">...</view>
- * </template>
- * 
- * <script setup>
- * const { themePageStyle } = useThemePageStyle();
- * </script>
- * ```
- */
-export function useThemePageStyle() {
-    const store = useThemeStore();
-    const themePageStyle = computed(() => {
-        // 显式 track 两个响应字段，触发 computed 重算
-        // setScale / setTheme 内部已先 set storage 再改 ref，
-        // 所以 buildThemeStyle 从 storage 读到的一定是最新值
-        void store.scale;
-        void store.primaryColor;
-        return buildThemeStyle();
-    });
-    return { themePageStyle };
-}
-
-export type { FontScale, FontPreset } from "./font";
-export { FONT_SCALE_KEY, FONT_PRESETS, getCurrentFontScale, getCurrentFontVars } from "./font";
-export type { ThemeColor } from "./palette";
-export {
-    THEME_COLOR_KEY,
-    THEME_SEMANTIC_COLORS,
-    DEFAULT_THEMES,
-    getCurrentThemeColor,
-    getCurrentThemeVars,
-} from "./palette";
-export type { Appearance, AppearanceMode, AppearancePreset } from "./appearance";
-export {
-    APPEARANCE_KEY,
-    APPEARANCE_PRESETS,
-    APPEARANCE_VAR_MAP,
-    getCurrentAppearance,
-    getCurrentAppearanceMode,
-    getCurrentAppearanceVars,
-    resolveAppearance,
-} from "./appearance";
-export type { TypographyRole } from "./typography";
-export { TYPOGRAPHY_ROLES, getCurrentTypographyVars } from "./typography";

package/src/composables/theme/palette.ts

@@ -1,117 +0,0 @@
-/**
- * 主题颜色配置项接口。
- */
-export interface ThemeColor {
-    /** 颜色名称描述 */
-    label: string;
-    /** 主题色十六进制值 (Hex Color) */
-    value: string;
-}
-
-/** 存储当前主题色设置的 LocalStorage 键名 */
-export const THEME_COLOR_KEY = "hlw_theme_color";
-
-/**
- * 预设的语义化颜色。
- * 包含成功、警告、错误和提示的默认色彩配置。
- */
-export const THEME_SEMANTIC_COLORS = {
-    success: "#10b981",
-    warning: "#f59e0b",
-    error: "#ef4444",
-    info: "#64748b",
-} as const;
-
-/**
- * 系统预设的默认主题色列表。
- */
-export const DEFAULT_THEMES: ThemeColor[] = [
-    { label: "翡翠绿", value: "#10b981" },
-    { label: "活力橙", value: "#f97316" },
-    { label: "默认蓝", value: "#3b82f6" },
-    { label: "玫瑰粉", value: "#f43f5e" },
-    { label: "紫罗兰", value: "#8b5cf6" },
-    { label: "青石灰", value: "#64748b" },
-];
-
-/**
- * 读取当前配置的主题色 Hex 字符串。
- * 默认使用 `DEFAULT_THEMES` 数组中首位颜色的值。
- * @returns 十六进制颜色字符串
- */
-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;
-}
-
-/**
- * 获取当前主题色所对应的完整 CSS 颜色语义变量映射表。
- * 会基于当前主题色，自动计算衍生出对应的亮色调、暗色调以及各状态色语义变量。
- * @returns 包含各 CSS 变量名与对应颜色值键值对
- */
-export function getCurrentThemeVars(): Record<string, string> {
-    const color = getCurrentThemeColor();
-    return {
-        "--primary-color": color,
-        "--primary-light": hexToRgba(color, 0.12),
-        "--primary-dark": darkenHex(color),
-        "--primary-success": THEME_SEMANTIC_COLORS.success,
-        "--primary-success-light": hexToRgba(THEME_SEMANTIC_COLORS.success, 0.12),
-        "--primary-success-dark": darkenHex(THEME_SEMANTIC_COLORS.success),
-        "--primary-warning": THEME_SEMANTIC_COLORS.warning,
-        "--primary-warning-light": hexToRgba(THEME_SEMANTIC_COLORS.warning, 0.12),
-        "--primary-warning-dark": darkenHex(THEME_SEMANTIC_COLORS.warning),
-        "--primary-error": THEME_SEMANTIC_COLORS.error,
-        "--primary-error-light": hexToRgba(THEME_SEMANTIC_COLORS.error, 0.12),
-        "--primary-error-dark": darkenHex(THEME_SEMANTIC_COLORS.error),
-        "--primary-info": THEME_SEMANTIC_COLORS.info,
-        "--primary-info-light": hexToRgba(THEME_SEMANTIC_COLORS.info, 0.12),
-        "--primary-info-dark": darkenHex(THEME_SEMANTIC_COLORS.info),
-        "--success-color": THEME_SEMANTIC_COLORS.success,
-        "--success-light": hexToRgba(THEME_SEMANTIC_COLORS.success, 0.12),
-        "--success-dark": darkenHex(THEME_SEMANTIC_COLORS.success),
-        "--warning-color": THEME_SEMANTIC_COLORS.warning,
-        "--warning-light": hexToRgba(THEME_SEMANTIC_COLORS.warning, 0.12),
-        "--warning-dark": darkenHex(THEME_SEMANTIC_COLORS.warning),
-        "--error-color": THEME_SEMANTIC_COLORS.error,
-        "--error-light": hexToRgba(THEME_SEMANTIC_COLORS.error, 0.12),
-        "--error-dark": darkenHex(THEME_SEMANTIC_COLORS.error),
-        "--info-color": THEME_SEMANTIC_COLORS.info,
-        "--info-light": hexToRgba(THEME_SEMANTIC_COLORS.info, 0.12),
-        "--info-dark": darkenHex(THEME_SEMANTIC_COLORS.info),
-    };
-}
-
-const HEX_RE = /^#[0-9a-fA-F]{6}$/;
-
-/**
- * 将 6 位 hex 颜色字符串转换为 RGB 三原色元组。
- */
-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),
-    ];
-}
-
-/**
- * 转换 Hex 颜色为 rgba 格式字符串。
- */
-function hexToRgba(hex: string, alpha: number): string {
-    const [r, g, b] = parseHex(hex);
-    return `rgba(${r},${g},${b},${alpha})`;
-}
-
-/**
- * 将 Hex 颜色调暗。
- */
-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")}`;
-}

package/src/composables/theme/typography.ts

@@ -1,90 +0,0 @@
-/**
- * 语义化排版 token — 把"字号 + 字重 + 行高 + 颜色"打包成角色，统一各页面文字样式。
- *
- * 使用指南：
- * - 页面样式里用 `var(--text-title-size)` 等变量代替硬编码，自动响应字体档位/外观模式切换
- * - 或通过全局 utility class（见 qz2 项目的 static/css/style.scss）直接加 class
- *
- * 6 个语义角色：
- * - title-lg: 页面大标题 / hero
- * - title:    卡片 / 分区主标题
- * - subtitle: 次级标题
- * - body:     正文
- * - desc:     卡片描述 / 副文
- * - caption:  角标 / 底部小字 / 时间戳
- */
-
-/**
- * 语义排版角色配置项接口。
- */
-export interface TypographyRole {
-    /** 对应 `--text-{role}-size` 的值（通常引用字号档位 token） */
-    size: string;
-    /** 对应 `--text-{role}-weight` */
-    weight: string;
-    /** 对应 `--text-{role}-line-height` */
-    lineHeight: string;
-    /** 对应 `--text-{role}-color`（通常引用文字色 token） */
-    color: string;
-}
-
-/**
- * 全局预设排版角色的参数配置表。
- */
-export const TYPOGRAPHY_ROLES: Record<string, TypographyRole> = {
-    "title-lg": {
-        size: "var(--font-xl)",
-        weight: "600",
-        lineHeight: "1.2",
-        color: "var(--text-primary)",
-    },
-    "title": {
-        size: "var(--font-md)",
-        weight: "500",
-        lineHeight: "1.3",
-        color: "var(--text-primary)",
-    },
-    "subtitle": {
-        size: "var(--font-base)",
-        weight: "500",
-        lineHeight: "1.3",
-        color: "var(--text-secondary)",
-    },
-    "body": {
-        size: "var(--font-base)",
-        weight: "400",
-        lineHeight: "1.5",
-        color: "var(--text-secondary)",
-    },
-    "desc": {
-        size: "var(--font-sm)",
-        weight: "400",
-        lineHeight: "1.4",
-        color: "var(--text-subtle)",
-    },
-    "caption": {
-        size: "var(--font-xs)",
-        weight: "500",
-        lineHeight: "1.3",
-        color: "var(--text-muted)",
-    },
-};
-
-/**
- * 展开成 CSS 变量平铺 map，用于 buildThemeStyle 注入 page 元素。
- *
- * 每个角色产出 4 个变量：
- *   --text-${role}-size / -weight / -line-height / -color
- * 
- * @returns 包含全部排版 CSS 变量键值对的对象
- */
-export function getCurrentTypographyVars(): Record<string, string> {
-    const vars: Record<string, string> = {};
-    for (const [role, cfg] of Object.entries(TYPOGRAPHY_ROLES)) {
-        vars[`--text-${role}-size`] = cfg.size;
-        vars[`--text-${role}-weight`] = cfg.weight;
-        vars[`--text-${role}-line-height`] = cfg.lineHeight;
-        vars[`--text-${role}-color`] = cfg.color;
-    }
-    return vars;
-}

package/src/stores/theme.ts

@@ -1,114 +0,0 @@
-/**
- * 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,
-    APPEARANCE_KEY,
-    APPEARANCE_PRESETS,
-    resolveAppearance,
-} from "../composables/theme";
-import type { FontScale, ThemeColor, Appearance, AppearanceMode } from "../composables/theme";
-
-/**
- * 统一管理全局主题、字体缩放和外观模式的 Pinia Store。
- */
-export const useThemeStore = defineStore(
-    "theme",
-    () => {
-        // ─── 字体档位 ────────────────────────────
-        /** 当前生效的字体大小档位 */
-        const scale = ref<FontScale>("normal");
-
-        /**
-         * 改变并保存当前的字体大小档位。
-         * 
-         * @param s 目标字体大小档位
-         */
-        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,
-        }));
-
-        // ─── 主题色 ─────────────────────────────
-        /** 当前生效的主题色十六进制值 (Hex Color) */
-        const primaryColor = ref(DEFAULT_THEMES[0].value);
-
-        /** 系统内置的预设主题颜色列表 */
-        const themes = DEFAULT_THEMES;
-
-        /** 当前激活的主题色相关信息 */
-        const activeTheme = computed<ThemeColor>(() =>
-            themes.find((t: ThemeColor) => t.value === primaryColor.value)
-                ?? { label: "自定义", value: primaryColor.value },
-        );
-
-        /**
-         * 更改并保存全局主题色。
-         * 
-         * @param color 颜色 Hex 字符串
-         */
-        function setTheme(color: string) {
-            primaryColor.value = color;
-            uni.setStorageSync(THEME_COLOR_KEY, color);
-            uni.$emit(THEME_CHANGE_EVENT);
-        }
-
-        // ─── 外观模式（light / dark / auto） ─────────
-        /** 当前设置的外观显示模式：浅色、深色或自动跟随系统 */
-        const appearance = ref<Appearance>("auto");
-
-        /** 可供选择的外观预设配置列表 */
-        const appearanceOptions = APPEARANCE_PRESETS;
-
-        /** 当前最终解析的实际生效模式（auto 会依据系统检测解析为 light 或 dark） */
-        const appearanceMode = computed<AppearanceMode>(() => resolveAppearance(appearance.value));
-
-        /** 是否正处于深色模式，可供业务组件在 template 中直接用作条件渲染 */
-        const isDark = computed(() => appearanceMode.value === "dark");
-
-        /**
-         * 改变外观设置模式。
-         * 
-         * @param a 目标模式
-         */
-        function setAppearance(a: Appearance) {
-            appearance.value = a;
-            uni.setStorageSync(APPEARANCE_KEY, a);
-            uni.$emit(THEME_CHANGE_EVENT);
-        }
-
-        return {
-            // 字体
-            scale,
-            fontOptions,
-            setScale,
-            // 主题色
-            primaryColor,
-            themes,
-            activeTheme,
-            setTheme,
-            // 外观模式
-            appearance,
-            appearanceOptions,
-            appearanceMode,
-            isDark,
-            setAppearance,
-        };
-    },
-    { unistorage: true },
-);
-