@hlw-uni/mp-vue 2.1.59 → 2.1.69

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

@@ -1,128 +1,98 @@
 <template>
-    <view :class="['hlw-page', attrs.class]" :style="attrs.style">
-        <view class="hlw-page-header">
-            <slot name="header">
-                <hlw-header
-                    v-if="props.title || props.isBack"
-                    :title="props.title"
-                    :is-back="props.isBack"
-                    :bg-class="props.bgClass"
-                />
-            </slot>
-        </view>
-
-        <scroll-view
-            class="hlw-page-content"
-            :scroll-y="true"
-            :enable-flex="true"
-            :enhanced="true"
-            :show-scrollbar="false"
-            :scroll-top="scrollTo"
-            :scroll-with-animation="true"
-            @scroll="onScroll"
-        >
-            <view class="hlw-page-body" :class="bodyClass" :style="bodyStyle">
-                <slot />
-            </view>
-        </scroll-view>
-
-        <view class="hlw-page-footer">
-            <slot name="footer" />
-        </view>
+    <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>
 </template>
 
-<script setup lang="ts">
-/**
- * hlw-page 不再负责主题 style 注入。
- * 业务项目可通过 @hlw-uni/mp-vite-plugin 的 themePageMeta 自动注入 page-meta。
- * —— 这样才能把 CSS 变量注入到 page 根，scroll-view 等小程序原生组件内部也能继承。
- *
- * provide("hlwPageScroll") —— 给 hlw-back-top 等子组件用：
- *   - scrollTop: Ref<number>     当前滚动位置（来自 scroll-view @scroll）
- *   - scrollToTop(): void        滚动到顶部（带动画）
- */
-
-import { nextTick, provide, ref, useAttrs } from "vue";
-
-defineOptions({
-    name: "HlwPage",
-    inheritAttrs: false,
+<script lang="ts" setup>
+import { useTheme } from "@/core";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { ref } from "vue";
+const { theme, fontSizeClass, fontFamilyClass } = useTheme();
+
+const props = defineProps({
+    isBar: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: "",
+    },
+    isBack: {
+        type: Boolean,
+        default: false,
+    },
 });
 
-type ClassValue = string | Record<string, boolean> | Array<string | Record<string, boolean>>;
-type StyleValue = string | Record<string, string | number>;
+const title = ref(props.title);
+</script>
 
-interface Props {
-    title?: string;
-    isBack?: boolean;
-    bgClass?: string;
-    /**
-     * 透传到 scroll-view 内层 view 包裹（不是 scroll-view 本身）的 class，常用于直接挂 .container。
-     * 用 view 包裹是因为 mp-weixin 的 scroll-view 是原生组件，flex/gap 行为跟普通 view 不一致。
-     */
-    bodyClass?: ClassValue;
-    /** 透传到内层 view 包裹的 style，规则同 bodyClass */
-    bodyStyle?: StyleValue;
+<style lang="scss">
+/* 全局系统字体大小缩放配置 */
+.font-size-small {
+    --font-xs: 18rpx;
+    --font-sm: 22rpx;
+    --font-base: 24rpx;
+    --font-md: 28rpx;
+    --font-lg: 32rpx;
+    --font-xl: 36rpx;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-    title: "",
-    isBack: false,
-    bgClass: "",
-    bodyClass: "",
-    bodyStyle: "",
-});
-const attrs = useAttrs();
-
-const scrollTop = ref(0);
-const scrollTo = ref(0);
-
-function onScroll(e: any) {
-    scrollTop.value = e?.detail?.scrollTop ?? 0;
+.font-size-standard {
+    --font-xs: 20rpx;
+    --font-sm: 24rpx;
+    --font-base: 28rpx;
+    --font-md: 32rpx;
+    --font-lg: 36rpx;
+    --font-xl: 40rpx;
 }
 
-function scrollToTop() {
-    // 先同步到当前位置，再动画到 0；否则同值不会触发 scroll-view 重滚
-    scrollTo.value = scrollTop.value;
-    nextTick(() => {
-        scrollTo.value = 0;
-    });
+.font-size-large {
+    --font-xs: 22rpx;
+    --font-sm: 28rpx;
+    --font-base: 32rpx;
+    --font-md: 36rpx;
+    --font-lg: 40rpx;
+    --font-xl: 44rpx;
 }
 
-provide("hlwPageScroll", {
-    scrollTop,
-    scrollToTop,
-});
-</script>
-
-<style lang="scss" scoped>
-.hlw-page {
-    width: 100%;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    color: var(--text-primary, #0f172a);
+.font-size-extra-large {
+    --font-xs: 24rpx;
+    --font-sm: 32rpx;
+    --font-base: 36rpx;
+    --font-md: 40rpx;
+    --font-lg: 44rpx;
+    --font-xl: 48rpx;
 }
 
-.hlw-page-header {
-    flex-shrink: 0;
+/* 全局字体样式配置 */
+.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;
+    }
 }
 
-.hlw-page-content {
-    flex: 1;
-    height: 0;
-    width: 100%;
+.font-family-sans {
+    font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif !important;
+    view, text, button, input, textarea {
+        font-family: inherit !important;
+    }
 }
 
-.hlw-page-body {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
+.font-family-serif {
+    font-family: "Songti SC", "STSong", "SimSun", "Georgia", serif !important;
+    view, text, button, input, textarea {
+        font-family: inherit !important;
+    }
 }
 
-.hlw-page-footer {
-    flex-shrink: 0;
+.font-family-kaiti {
+    font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimKai", serif !important;
+    view, text, button, input, textarea {
+        font-family: inherit !important;
+    }
 }
 </style>

package/src/composables/index.ts

@@ -35,34 +35,4 @@ export {
 } from "./utils";
 export { useNavigate, type NavigateType, type NavigateOptions } from "./navigator";
 
-// Theme（mp-vue 自带）
-export type { FontScale, FontPreset } from "./theme";
-export {
-    FONT_SCALE_KEY,
-    FONT_PRESETS,
-    getCurrentFontScale,
-    getCurrentFontVars,
-    THEME_CHANGE_EVENT,
-    buildThemeStyle,
-    useThemePageStyle,
-} from "./theme";
-export type { ThemeColor } from "./theme";
-export {
-    THEME_COLOR_KEY,
-    THEME_SEMANTIC_COLORS,
-    DEFAULT_THEMES,
-    getCurrentThemeColor,
-    getCurrentThemeVars,
-} from "./theme";
-export type { Appearance, AppearanceMode, AppearancePreset } from "./theme";
-export {
-    APPEARANCE_KEY,
-    APPEARANCE_PRESETS,
-    APPEARANCE_VAR_MAP,
-    getCurrentAppearance,
-    getCurrentAppearanceMode,
-    getCurrentAppearanceVars,
-    resolveAppearance,
-} from "./theme";
-export type { TypographyRole } from "./theme";
-export { TYPOGRAPHY_ROLES, getCurrentTypographyVars } from "./theme";
+

package/src/composables/request/service.ts

@@ -119,8 +119,15 @@ export function ServicePrefix(value: string | ServicePrefixOptions) {
 
 /**
  * 插件服务类装饰器。
- * 自动使用 `import.meta.env.VITE_PLUGIN_NAME` 作为服务前缀。
+ * 自动使用 `import.meta.env.VITE_PLUGIN_NAME` 作为服务前缀（通过 globalThis 动态读取）。
  */
-export function PluginService(target: { prototype: { servicePrefix?: string } }) {
-    target.prototype.servicePrefix = import.meta.env.VITE_PLUGIN_NAME || "";
+export function PluginService(target: any) {
+    Object.defineProperty(target.prototype, "servicePrefix", {
+        get() {
+            return globalThis.VITE_PLUGIN_NAME || "";
+        },
+        enumerable: true,
+        configurable: true
+    });
 }
+

package/src/core/index.ts

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

package/src/core/theme.ts

@@ -0,0 +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 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,
+        fontSize,
+        fontSizeClass,
+        setFontSize,
+        fontFamily,
+        fontFamilyClass,
+        setFontFamily,
+        store,
+    };
+}

package/src/env.d.ts

@@ -3,3 +3,11 @@ declare module '*.vue' {
     const component: DefineComponent<object, object, unknown>
     export default component
 }
+
+declare global {
+    var VITE_PLUGIN_NAME: string | undefined;
+}
+
+export {};
+
+

package/src/index.ts

@@ -3,21 +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";
 
-// Pinia store
-export { useThemeStore } from "./stores/theme";
-
 // App 根上下文
 export { useApp } from "./app";
 

package/src/stores/index.ts

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

package/src/stores/theme.ts

@@ -1,114 +1,126 @@
-/**
- * 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");
+// ==========================================
+// 1. 主题 (Theme) 预设与类型
+// ==========================================
 
-        /**
-         * 改变并保存当前的字体大小档位。
-         * 
-         * @param s 目标字体大小档位
-         */
-        function setScale(s: FontScale) {
-            scale.value = s;
-            uni.setStorageSync(FONT_SCALE_KEY, s);
-            uni.$emit(THEME_CHANGE_EVENT);
-        }
+export interface ThemePreset {
+    id: string;
+    name: string;
+    color: string;
+}
 
-        /** 供界面渲染选择的字体档位选项列表 */
-        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;
+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)",
+    },
+];
 
-        /** 当前激活的主题色相关信息 */
-        const activeTheme = computed<ThemeColor>(() =>
-            themes.find((t: ThemeColor) => t.value === primaryColor.value)
-                ?? { label: "自定义", value: primaryColor.value },
-        );
+// ==========================================
+// 2. 字体大小 (FontSize) 预设与类型
+// ==========================================
 
-        /**
-         * 更改并保存全局主题色。
-         * 
-         * @param color 颜色 Hex 字符串
-         */
-        function setTheme(color: string) {
-            primaryColor.value = color;
-            uni.setStorageSync(THEME_COLOR_KEY, color);
-            uni.$emit(THEME_CHANGE_EVENT);
-        }
+export interface FontSizePreset {
+    id: string;
+    name: string;
+    class: string;
+}
 
-        // ─── 外观模式（light / dark / auto） ─────────
-        /** 当前设置的外观显示模式：浅色、深色或自动跟随系统 */
-        const appearance = ref<Appearance>("auto");
+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",
+    },
+];
 
-        /** 可供选择的外观预设配置列表 */
-        const appearanceOptions = APPEARANCE_PRESETS;
+// ==========================================
+// 3. 字体样式 (FontFamily) 预设与类型
+// ==========================================
 
-        /** 当前最终解析的实际生效模式（auto 会依据系统检测解析为 light 或 dark） */
-        const appearanceMode = computed<AppearanceMode>(() => resolveAppearance(appearance.value));
+export interface FontFamilyPreset {
+    id: string;
+    name: string;
+    class: string;
+}
 
-        /** 是否正处于深色模式，可供业务组件在 template 中直接用作条件渲染 */
-        const isDark = computed(() => appearanceMode.value === "dark");
+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",
+    },
+];
 
-        /**
-         * 改变外观设置模式。
-         * 
-         * @param a 目标模式
-         */
-        function setAppearance(a: Appearance) {
-            appearance.value = a;
-            uni.setStorageSync(APPEARANCE_KEY, a);
-            uni.$emit(THEME_CHANGE_EVENT);
-        }
+// ==========================================
+// 4. 统一个性化配置 Store (Theme / Font)
+// ==========================================
 
-        return {
-            // 字体
-            scale,
-            fontOptions,
-            setScale,
-            // 主题色
-            primaryColor,
-            themes,
-            activeTheme,
-            setTheme,
-            // 外观模式
-            appearance,
-            appearanceOptions,
-            appearanceMode,
-            isDark,
-            setAppearance,
-        };
+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 },
-);
-
+    unistorage: true,
+});

package/dist/composables/theme/appearance.d.ts

@@ -1,55 +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 declare const APPEARANCE_KEY = "hlw_appearance";
-/** 预设外观模式列表，常供设置页渲染选择器使用 */
-export declare const APPEARANCE_PRESETS: AppearancePreset[];
-/** 不同外观模式的 CSS 变量映射 */
-export declare const APPEARANCE_VAR_MAP: Record<AppearanceMode, Record<string, string>>;
-/**
- * 读取用户设置的外观配置（light / dark / auto）。
- * 默认返回 'auto'。
- * @returns 设定的外观模式类型
- */
-export declare function getCurrentAppearance(): Appearance;
-/**
- * 将 auto 设置或用户选择解析为具体的 light/dark 实际模式。
- * 当为 auto 时，将读取系统当前的配色偏好。
- * @param appearance 输入的外观配置
- * @returns 解析后最终生效的外观模式 (light 或 dark)
- */
-export declare function resolveAppearance(appearance: Appearance): AppearanceMode;
-/**
- * 获取当前实际生效的外观模式 (light 或 dark)。
- * 自动根据用户偏好及系统主题进行判定。
- * @returns 实际生效的外观模式
- */
-export declare function getCurrentAppearanceMode(): AppearanceMode;
-/**
- * 获取当前外观对应的 CSS 变量映射表。
- * @returns 包含各 CSS 变量名与对应颜色值键值对
- */
-export declare function getCurrentAppearanceVars(): Record<string, string>;