@hlw-uni/mp-vue 2.1.59 → 2.1.60

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

@@ -1,128 +1,32 @@
 <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" 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,
-});
-
-type ClassValue = string | Record<string, boolean> | Array<string | Record<string, boolean>>;
-type StyleValue = string | Record<string, string | number>;
-
-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;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    title: "",
-    isBack: false,
-    bgClass: "",
-    bodyClass: "",
-    bodyStyle: "",
+<script lang="ts" setup>
+import { useTheme } from "@/core";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { ref } from "vue";
+const { theme } = useTheme();
+
+const props = defineProps({
+    isBar: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: "",
+    },
+    isBack: {
+        type: Boolean,
+        default: false,
+    },
 });
-const attrs = useAttrs();
 
-const scrollTop = ref(0);
-const scrollTo = ref(0);
-
-function onScroll(e: any) {
-    scrollTop.value = e?.detail?.scrollTop ?? 0;
-}
-
-function scrollToTop() {
-    // 先同步到当前位置，再动画到 0；否则同值不会触发 scroll-view 重滚
-    scrollTo.value = scrollTop.value;
-    nextTick(() => {
-        scrollTo.value = 0;
-    });
-}
-
-provide("hlwPageScroll", {
-    scrollTop,
-    scrollToTop,
-});
+const title = ref(props.title);
 </script>
 
-<style lang="scss" scoped>
-.hlw-page {
-    width: 100%;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    color: var(--text-primary, #0f172a);
-}
-
-.hlw-page-header {
-    flex-shrink: 0;
-}
-
-.hlw-page-content {
-    flex: 1;
-    height: 0;
-    width: 100%;
-}
-
-.hlw-page-body {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.hlw-page-footer {
-    flex-shrink: 0;
-}
-</style>
+<style></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,12 @@
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
+
+export function useTheme() {
+    const theme: ComputedRef<string> = computed(() => "light-theme");
+    return {
+        theme,
+        store: {
+            theme: "light-theme",
+        },
+    };
+}

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

@@ -15,8 +15,7 @@ export * from "./composables";
 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/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>;

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

@@ -1,32 +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 declare const FONT_SCALE_KEY = "hlw_font_scale";
-/**
- * 字体档位对应的尺寸变量预设表。
- * 每个档位定义了从超小 (--font-xs) 到超大 (--font-xl) 的响应式字号。
- */
-export declare const FONT_PRESETS: Record<FontScale, FontPreset>;
-/**
- * 获取当前用户配置的字体字号缩放档位。
- * 默认返回 'normal'。
- * @returns 字体档位
- */
-export declare function getCurrentFontScale(): FontScale;
-/**
- * 获取当前字体字号档位所映射的 CSS 变量表。
- * @returns CSS 变量名与具体字号的键值对
- */
-export declare function getCurrentFontVars(): Record<string, string>;

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

@@ -1,46 +0,0 @@
-import { ComputedRef } from 'vue';
-/**
- * @deprecated 历史事件名；现已改用 pinia store 响应式驱动，emit 不再有效。
- * 保留 export 仅为不破坏外部 import（不影响功能）。
- */
-export declare const THEME_CHANGE_EVENT = "hlw:theme-change";
-/**
- * 构建仅注入运行时配置变量（字号档位、主题色）的行内样式字符串。
- *
- * 页面背景、卡片色、文字色、边框色等业务视觉变量统一由项目全局 CSS
- * （static/css/style.scss）控制，避免 page-meta 运行时样式覆盖业务侧配置。
- *
- * @returns 扁平化后的 CSS 变量样式属性字符串
- */
-export declare function buildThemeStyle(): string;
-/**
- * 获取及监听主题与字号变化，返回可注入到 `<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 declare function useThemePageStyle(): {
-    themePageStyle: ComputedRef<string>;
-};
-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/dist/composables/theme/palette.d.ts

@@ -1,37 +0,0 @@
-/**
- * 主题颜色配置项接口。
- */
-export interface ThemeColor {
-    /** 颜色名称描述 */
-    label: string;
-    /** 主题色十六进制值 (Hex Color) */
-    value: string;
-}
-/** 存储当前主题色设置的 LocalStorage 键名 */
-export declare const THEME_COLOR_KEY = "hlw_theme_color";
-/**
- * 预设的语义化颜色。
- * 包含成功、警告、错误和提示的默认色彩配置。
- */
-export declare const THEME_SEMANTIC_COLORS: {
-    readonly success: "#10b981";
-    readonly warning: "#f59e0b";
-    readonly error: "#ef4444";
-    readonly info: "#64748b";
-};
-/**
- * 系统预设的默认主题色列表。
- */
-export declare const DEFAULT_THEMES: ThemeColor[];
-/**
- * 读取当前配置的主题色 Hex 字符串。
- * 默认使用 `DEFAULT_THEMES` 数组中首位颜色的值。
- * @returns 十六进制颜色字符串
- */
-export declare function getCurrentThemeColor(): string;
-/**
- * 获取当前主题色所对应的完整 CSS 颜色语义变量映射表。
- * 会基于当前主题色，自动计算衍生出对应的亮色调、暗色调以及各状态色语义变量。
- * @returns 包含各 CSS 变量名与对应颜色值键值对
- */
-export declare function getCurrentThemeVars(): Record<string, string>;

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

@@ -1,41 +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 declare const TYPOGRAPHY_ROLES: Record<string, TypographyRole>;
-/**
- * 展开成 CSS 变量平铺 map，用于 buildThemeStyle 注入 page 元素。
- *
- * 每个角色产出 4 个变量：
- *   --text-${role}-size / -weight / -line-height / -color
- *
- * @returns 包含全部排版 CSS 变量键值对的对象
- */
-export declare function getCurrentTypographyVars(): Record<string, string>;

package/dist/stores/theme.d.ts

@@ -1,56 +0,0 @@
-import { FontScale, ThemeColor, Appearance, AppearanceMode, AppearancePreset } from '../composables/theme';
-import { StoreDefinition } from 'pinia';
-import { Ref, ComputedRef } from 'vue';
-
-/**
- * 统一管理全局主题、字体缩放和外观模式的 Pinia Store。
- */
-export declare const useThemeStore: StoreDefinition<"theme", Pick<{
-    scale: Ref<FontScale, FontScale>;
-    fontOptions: {
-        value: FontScale;
-        label: string;
-    }[];
-    setScale: (s: FontScale) => void;
-    primaryColor: Ref<string, string>;
-    themes: ThemeColor[];
-    activeTheme: ComputedRef<ThemeColor>;
-    setTheme: (color: string) => void;
-    appearance: Ref<Appearance, Appearance>;
-    appearanceOptions: AppearancePreset[];
-    appearanceMode: ComputedRef<AppearanceMode>;
-    isDark: ComputedRef<boolean>;
-    setAppearance: (a: Appearance) => void;
-}, "scale" | "fontOptions" | "primaryColor" | "themes" | "appearance" | "appearanceOptions">, Pick<{
-    scale: Ref<FontScale, FontScale>;
-    fontOptions: {
-        value: FontScale;
-        label: string;
-    }[];
-    setScale: (s: FontScale) => void;
-    primaryColor: Ref<string, string>;
-    themes: ThemeColor[];
-    activeTheme: ComputedRef<ThemeColor>;
-    setTheme: (color: string) => void;
-    appearance: Ref<Appearance, Appearance>;
-    appearanceOptions: AppearancePreset[];
-    appearanceMode: ComputedRef<AppearanceMode>;
-    isDark: ComputedRef<boolean>;
-    setAppearance: (a: Appearance) => void;
-}, "activeTheme" | "appearanceMode" | "isDark">, Pick<{
-    scale: Ref<FontScale, FontScale>;
-    fontOptions: {
-        value: FontScale;
-        label: string;
-    }[];
-    setScale: (s: FontScale) => void;
-    primaryColor: Ref<string, string>;
-    themes: ThemeColor[];
-    activeTheme: ComputedRef<ThemeColor>;
-    setTheme: (color: string) => void;
-    appearance: Ref<Appearance, Appearance>;
-    appearanceOptions: AppearancePreset[];
-    appearanceMode: ComputedRef<AppearanceMode>;
-    isDark: ComputedRef<boolean>;
-    setAppearance: (a: Appearance) => void;
-}, "setScale" | "setTheme" | "setAppearance">>;

package/src/composables/theme/README.md

@@ -1,131 +0,0 @@
-# theme 调用文档
-
-`theme` 模块提供字体档位、主题色、外观模式、排版 token 和 `page-meta` 样式注入能力。
-
-## 引入
-
-```ts
-import {
-    useThemePageStyle,
-    getCurrentFontScale,
-    getCurrentFontVars,
-    getCurrentThemeColor,
-    getCurrentThemeVars,
-    getCurrentAppearance,
-    getCurrentAppearanceMode,
-    getCurrentAppearanceVars,
-    getCurrentTypographyVars,
-} from "@hlw-uni/mp-vue";
-```
-
-## useThemePageStyle
-
-页面需要把主题 CSS 变量注入到小程序 page 根时使用。
-
-```vue
-<template>
-    <page-meta :page-style="themePageStyle" />
-    <hlw-page>
-        页面内容
-    </hlw-page>
-</template>
-
-<script setup lang="ts">
-import { useThemePageStyle } from "@hlw-uni/mp-vue";
-
-const { themePageStyle } = useThemePageStyle();
-</script>
-```
-
-如果项目启用了 `@hlw-uni/mp-vite-plugin` 的 `themePageMeta`，页面可由插件自动注入 `<page-meta>` 和 `useThemePageStyle`。
-
-## 字体档位
-
-```ts
-const scale = getCurrentFontScale();
-const vars = getCurrentFontVars();
-
-console.log(scale, vars["--font-base"]);
-```
-
-支持的 `FontScale`：
-
-| 值 | 说明 |
-| --- | --- |
-| `small` | 较小 |
-| `compact` | 略小 |
-| `normal` | 标准 |
-| `medium` | 适中 |
-| `large` | 较大 |
-| `xlarge` | 超大 |
-| `xxlarge` | 特大 |
-
-## 主题色
-
-```ts
-const color = getCurrentThemeColor();
-const vars = getCurrentThemeVars();
-
-console.log(color, vars["--primary-color"]);
-```
-
-常用导出：
-
-| 导出 | 说明 |
-| --- | --- |
-| `THEME_COLOR_KEY` | 主题色 storage key |
-| `THEME_SEMANTIC_COLORS` | 语义色 |
-| `DEFAULT_THEMES` | 内置主题色列表 |
-| `getCurrentThemeColor()` | 读取当前主题色 |
-| `getCurrentThemeVars()` | 生成主题色 CSS 变量 |
-
-## 外观模式
-
-```ts
-const appearance = getCurrentAppearance();
-const mode = getCurrentAppearanceMode();
-const vars = getCurrentAppearanceVars();
-
-console.log(appearance, mode, vars["--bg-page"]);
-```
-
-`Appearance` 支持：
-
-| 值 | 说明 |
-| --- | --- |
-| `light` | 浅色模式 |
-| `dark` | 深色模式 |
-| `auto` | 跟随系统 |
-
-## 排版 token
-
-```ts
-const vars = getCurrentTypographyVars();
-
-console.log(vars["--text-title-size"]);
-```
-
-内置语义角色：
-
-| 角色 | 用途 |
-| --- | --- |
-| `title-lg` | 页面大标题 |
-| `title` | 卡片或分区主标题 |
-| `subtitle` | 次级标题 |
-| `body` | 正文 |
-| `desc` | 描述文字 |
-| `caption` | 角标、时间戳等小字 |
-
-## 切换主题
-
-主题状态由 `useThemeStore` 管理，store 会写入 storage，`useThemePageStyle` 会响应 `scale` 和 `primaryColor` 变化。
-
-```ts
-import { useThemeStore } from "@hlw-uni/mp-vue";
-
-const theme = useThemeStore();
-
-theme.setScale("large");
-theme.setTheme("#3b82f6");
-theme.setAppearance("auto");
-```