@hlw-uni/mp-vue 1.2.2 → 1.2.22

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

@@ -1,5 +1,12 @@
 import { Ref } from 'vue';
 export declare const THEME_CHANGE_EVENT = "hlw:theme-change";
+/**
+ * 只注入会随主题变化的变量（字号档位、主题色、外观模式）。
+ *
+ * 语义排版 token（--text-title-size 等）是静态值、不随主题变化，
+ * 放在项目的全局 CSS（static/css/style.scss）里作为 page{} 默认值即可，
+ * 让业务侧可以自由 override，不被运行时注入覆盖。
+ */
 export declare function buildThemeStyle(): string;
 export declare function useThemePageStyle(): {
     themePageStyle: Ref<string, string>;
@@ -10,3 +17,5 @@ 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/typography.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 语义化排版 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
+ */
+export declare function getCurrentTypographyVars(): Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.2.2",
+    "version": "1.2.22",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

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

@@ -0,0 +1,123 @@
+<template>
+    <image
+        class="hlw-image"
+        :src="src"
+        :mode="mode"
+        :lazy-load="lazyLoad"
+        :show-menu-by-longpress="showMenuByLongpress"
+        :webp="webp"
+        :fade-show="fadeShow"
+        :draggable="draggable"
+        @load="$emit('load', $event)"
+        @error="$emit('error', $event)"
+        @tap="handleTap"
+    />
+</template>
+
+<script setup lang="ts">
+/**
+ * HlwImage — 图片组件
+ *
+ * 默认继承原生 <image> 所有属性，额外支持点击大图预览（uni.previewImage）。
+ *
+ * @props
+ *   src                  - 图片地址
+ *   mode                 - 裁剪/缩放模式（同原生 image），默认 scaleToFill
+ *   lazyLoad             - 懒加载
+ *   showMenuByLongpress  - 长按弹出菜单（保存图片等）
+ *   webp                 - 指定为 webp 格式
+ *   fadeShow             - 淡入效果
+ *   draggable            - H5 端可拖拽
+ *   preview              - 点击是否弹出大图预览（uni.previewImage）
+ *   previewList          - 预览组 URL 数组；传了则进入分组预览，current 定位 src
+ *
+ * @events
+ *   load   - 原生 load
+ *   error  - 原生 error
+ *   tap    - 原生点击（不论是否 preview 都触发）
+ *
+ * @example
+ * ```vue
+ * <!-- 简单点击预览 -->
+ * <hlw-image :src="url" preview />
+ *
+ * <!-- 分组预览：点击任一图进入，支持左右滑动切换 -->
+ * <hlw-image :src="photo" preview :preview-list="photos" />
+ * ```
+ */
+
+interface Props {
+    /** 图片 URL（必填） */
+    src: string;
+    /** 裁剪/缩放模式；参见 uni 官方文档 */
+    mode?:
+        | "scaleToFill"
+        | "aspectFit"
+        | "aspectFill"
+        | "widthFix"
+        | "heightFix"
+        | "top"
+        | "bottom"
+        | "center"
+        | "left"
+        | "right"
+        | "top left"
+        | "top right"
+        | "bottom left"
+        | "bottom right";
+    /** 懒加载（仅小程序） */
+    lazyLoad?: boolean;
+    /** 长按弹出菜单（保存/转发等） */
+    showMenuByLongpress?: boolean;
+    /** 指定为 webp 格式 */
+    webp?: boolean;
+    /** 淡入显示 */
+    fadeShow?: boolean;
+    /** H5 端是否可拖拽 */
+    draggable?: boolean;
+    /** 点击是否弹出大图预览 */
+    preview?: boolean;
+    /** 预览组；传了则在预览里支持左右滑切换，current 自动定位 src */
+    previewList?: string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    mode: "scaleToFill",
+    lazyLoad: false,
+    showMenuByLongpress: false,
+    webp: false,
+    fadeShow: true,
+    draggable: true,
+    preview: false,
+    previewList: () => [],
+});
+
+const emit = defineEmits<{
+    (e: "tap", event: unknown): void;
+    (e: "load", event: unknown): void;
+    (e: "error", event: unknown): void;
+}>();
+
+const handleTap = (event: unknown) => {
+    emit("tap", event);
+    if (!props.preview || !props.src) return;
+    const urls = props.previewList.length > 0 ? props.previewList : [props.src];
+    uni.previewImage({
+        urls,
+        current: props.src,
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+/**
+ * 内部 image 默认填满宿主元素所分配的空间。
+ * 父组件通过 class (如 .qr-img { width:360rpx; height:360rpx }) 只能控制 <hlw-image> host；
+ * 由于 scoped 样式不穿透自定义组件，这里必须给内部 image 也设 100%，否则 mode 生效不了。
+ */
+.hlw-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+</style>

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

@@ -1,5 +1,11 @@
 <template>
-    <view class="hlw-page" :style="themePageStyle">
+    <view class="hlw-page">
+        <!--
+          字号 / 主题色 / 外观变量注入到 page 根元素，
+          这样 scroll-view 内部的 slot 内容也能继承到 CSS 变量（小程序原生组件对 CSS 变量的继承不稳定，挂在内层 view 上部分场景失效）。
+        -->
+        <page-meta :page-style="themePageStyle" />
+
         <view class="hlw-page-header">
             <slot name="header">
                 <hlw-header
@@ -11,47 +17,12 @@
             </slot>
         </view>
 
-        <hlw-paging
-            v-if="props.usePaging"
-            ref="pagingRef"
-            class="hlw-page-content hlw-page-content--paging"
-            :model-value="props.modelValue"
-            :fixed="false"
-            :use-page-scroll="false"
-            :height="'100%'"
-            :refresher-enabled="props.refresherEnabled"
-            :loading-more-enabled="props.loadingMoreEnabled"
-            :default-page-size="props.defaultPageSize"
-            :loading-text="props.loadingText"
-            :empty-text="props.emptyText"
-            :error-text="props.errorText"
-            :empty-image="props.emptyImage"
-            :use-default-loading="props.useDefaultLoading"
-            :use-default-empty="props.useDefaultEmpty"
-            @update:model-value="handleUpdateModelValue"
-            @query="handleQuery"
-        >
-            <slot />
-
-            <template v-if="$slots.loading" #loading="slotProps">
-                <slot name="loading" :isLoadFailed="slotProps && slotProps.isLoadFailed" />
-            </template>
-            <template v-if="$slots.empty" #empty="slotProps">
-                <slot name="empty" :isLoadFailed="slotProps && slotProps.isLoadFailed" />
-            </template>
-            <template v-if="$slots['empty-extra']" #empty-extra="slotProps">
-                <slot name="empty-extra" :isLoadFailed="slotProps && slotProps.isLoadFailed" />
-            </template>
-        </hlw-paging>
-
         <scroll-view
-            v-else
             class="hlw-page-content"
             :scroll-y="true"
             :enable-flex="true"
             :enhanced="true"
             :show-scrollbar="false"
-            :style="themePageStyle"
         >
             <slot />
         </scroll-view>
@@ -63,8 +34,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import type { HlwPagingRef } from "../hlw-paging/types";
 import { useThemePageStyle } from "../../composables/theme";
 
 defineOptions({
@@ -76,108 +45,15 @@ interface Props {
     title?: string;
     isBack?: boolean;
     bgClass?: string;
-    usePaging?: boolean;
-    modelValue?: any[];
-    refresherEnabled?: boolean;
-    loadingMoreEnabled?: boolean;
-    defaultPageSize?: number;
-    loadingText?: string;
-    emptyText?: string;
-    errorText?: string;
-    emptyImage?: string;
-    useDefaultLoading?: boolean;
-    useDefaultEmpty?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     title: "",
     isBack: false,
     bgClass: "",
-    usePaging: false,
-    modelValue: () => [],
-    useDefaultLoading: true,
-    useDefaultEmpty: true,
 });
 
-const emit = defineEmits<{
-    "update:modelValue": [value: any[]];
-    query: [pageNo: number, pageSize: number, ...args: any[]];
-}>();
-
-const pagingRef = ref<HlwPagingRef<any> | null>(null);
 const { themePageStyle } = useThemePageStyle();
-
-function handleUpdateModelValue(value: any[]) {
-    emit("update:modelValue", value ?? []);
-}
-
-function handleQuery(pageNo: number, pageSize: number, ...args: any[]) {
-    emit("query", pageNo, pageSize, ...args);
-}
-
-const getPagingRef = () => pagingRef.value;
-
-const pagingMethodNames = [
-    "reload",
-    "refresh",
-    "refreshToPage",
-    "complete",
-    "completeByTotal",
-    "completeByNoMore",
-    "completeByError",
-    "completeByKey",
-    "clear",
-    "addDataFromTop",
-    "resetTotalData",
-    "endRefresh",
-    "updateCustomRefresherHeight",
-    "goF2",
-    "closeF2",
-    "doLoadMore",
-    "updatePageScrollTop",
-    "updatePageScrollTopHeight",
-    "updatePageScrollBottomHeight",
-    "updateLeftAndRightWidth",
-    "updateFixedLayout",
-    "doInsertVirtualListItem",
-    "didUpdateVirtualListCell",
-    "didDeleteVirtualListCell",
-    "updateVirtualListRender",
-    "setLocalPaging",
-    "doChatRecordLoadMore",
-    "addChatRecordData",
-    "addKeyboardHeightChangeListener",
-    "scrollToTop",
-    "scrollToBottom",
-    "scrollIntoViewById",
-    "scrollIntoViewByNodeTop",
-    "scrollToY",
-    "scrollToX",
-    "scrollIntoViewByIndex",
-    "scrollIntoViewByView",
-    "setSpecialEffects",
-    "setListSpecialEffects",
-    "updateCache",
-    "getVersion",
-] as const;
-
-type PagingMethodName = (typeof pagingMethodNames)[number];
-
-const exposed = pagingMethodNames.reduce((result, methodName) => {
-    result[methodName] = (...args: any[]) => {
-        return pagingRef.value?.[methodName]?.(...args);
-    };
-
-    return result;
-}, {
-    pagingRef,
-    getPagingRef,
-} as Record<string, any>);
-
-defineExpose(exposed as {
-    pagingRef: typeof pagingRef;
-    getPagingRef: () => HlwPagingRef<any> | null;
-} & Record<PagingMethodName, (...args: any[]) => any>);
 </script>
 
 <style lang="scss" scoped>
@@ -201,10 +77,6 @@ defineExpose(exposed as {
     width: 100%;
 }
 
-.hlw-page-content--paging {
-    min-height: 0;
-}
-
 .hlw-page-footer {
     flex-shrink: 0;
 }

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

@@ -1,7 +1,7 @@
 <template>
     <view v-if="visible" class="hlw-sheet-root" :class="{ show: shown }">
         <view class="hlw-sheet-overlay" @tap="handleMaskTap" />
-        <view class="hlw-sheet-panel" :style="{ height: maxHeight, maxHeight }" @tap.stop>
+        <view class="hlw-sheet-panel" :style="{ maxHeight }" @tap.stop>
             <view class="hlw-sheet-header">
                 <view v-if="showHandle" class="hlw-sheet-handle" />
                 <text v-if="title" class="hlw-sheet-title">{{ title }}</text>
@@ -265,9 +265,9 @@ onBeforeUnmount(() => {
 }
 
 .hlw-sheet-cta-text {
-    font-size: var(--font-base, 28rpx);
-    font-weight: 600;
+    font-size: var(--font-sm, 24rpx);
+    font-weight: 400;
     color: #ffffff;
-    letter-spacing: 1rpx;
+    letter-spacing: 0.5rpx;
 }
 </style>

package/src/composables/theme/index.ts

@@ -8,6 +8,13 @@ import { getCurrentAppearanceVars } from "./appearance";
 
 export const THEME_CHANGE_EVENT = "hlw:theme-change";
 
+/**
+ * 只注入会随主题变化的变量（字号档位、主题色、外观模式）。
+ *
+ * 语义排版 token（--text-title-size 等）是静态值、不随主题变化，
+ * 放在项目的全局 CSS（static/css/style.scss）里作为 page{} 默认值即可，
+ * 让业务侧可以自由 override，不被运行时注入覆盖。
+ */
 export function buildThemeStyle(): string {
     return varsToStyle({
         ...getCurrentFontVars(),
@@ -49,3 +56,5 @@ export {
     getCurrentAppearanceVars,
     resolveAppearance,
 } from "./appearance";
+export type { TypographyRole } from "./typography";
+export { TYPOGRAPHY_ROLES, getCurrentTypographyVars } from "./typography";

package/src/composables/theme/typography.ts

@@ -0,0 +1,82 @@
+/**
+ * 语义化排版 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
+ */
+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;
+}