@hlw-uni/mp-vue 2.1.60 → 2.1.70

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

@@ -1,12 +1,6 @@
 <template>
     <view :class="`hlw-avatar hlw-avatar--${size ?? 'medium'}`" :style="avatarStyle">
-        <image
-            v-if="src && !loadError"
-            class="hlw-avatar__image"
-            :src="src"
-            mode="aspectFill"
-            @error="loadError = true"
-        />
+        <image v-if="src && !loadError" class="hlw-avatar__image" :src="src" mode="aspectFill" @error="loadError = true" />
         <view v-else class="hlw-avatar__placeholder">
             <text class="hlw-avatar__initial">{{ initial }}</text>
         </view>
@@ -30,12 +24,12 @@
  * <HlwAvatar src="/avatar.png" name="张三" size="large" />
  * ```
  */
-import { ref, computed } from 'vue';
+import { ref, computed } from "vue";
 
 const props = defineProps<{
     src?: string;
     name?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     border?: number;
 }>();
 
@@ -43,11 +37,11 @@ const loadError = ref(false);
 const avatarStyle = computed(() => {
     const border = Math.max(0, Number(props.border ?? 0));
     return {
-        border: border > 0 ? `${border}px solid #fff` : '0',
+        border: border > 0 ? `${border}px solid #fff` : "0",
     };
 });
 const initial = computed(() => {
-    if (!props.name) return '?';
+    if (!props.name) return "?";
     return props.name.charAt(0).toUpperCase();
 });
 </script>
@@ -60,9 +54,18 @@ const initial = computed(() => {
     flex-shrink: 0;
 }
 
-.hlw-avatar--small  { width: 56rpx;  height: 56rpx; }
-.hlw-avatar--medium { width: 80rpx;  height: 80rpx; }
-.hlw-avatar--large  { width: 120rpx; height: 120rpx; }
+.hlw-avatar--small {
+    width: 56rpx;
+    height: 56rpx;
+}
+.hlw-avatar--medium {
+    width: 80rpx;
+    height: 80rpx;
+}
+.hlw-avatar--large {
+    width: 120rpx;
+    height: 120rpx;
+}
 
 .hlw-avatar__image {
     width: 100%;
@@ -72,18 +75,23 @@ const initial = computed(() => {
 .hlw-avatar__placeholder {
     width: 100%;
     height: 100%;
-    background: #07c160;
+    background: #f1f5f9;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .hlw-avatar__initial {
-    color: #fff;
-    font-weight: bold;
+    color: #94a3b8;
 }
 
-.hlw-avatar--small  .hlw-avatar__initial { font-size: var(--font-xs, 20rpx); }
-.hlw-avatar--medium .hlw-avatar__initial { font-size: var(--font-base, 28rpx); }
-.hlw-avatar--large  .hlw-avatar__initial { font-size: var(--font-xl, 40rpx); }
+.hlw-avatar--small .hlw-avatar__initial {
+    font-size: var(--font-xs, 20rpx);
+}
+.hlw-avatar--medium .hlw-avatar__initial {
+    font-size: var(--font-base, 28rpx);
+}
+.hlw-avatar--large .hlw-avatar__initial {
+    font-size: var(--font-xl, 40rpx);
+}
 </style>

package/src/components/hlw-card-header/index.vue

@@ -207,6 +207,9 @@ defineOptions({
 
 .hlw-card-header__icon {
     font-size: var(--font-xs);
+    width: var(--font-xs);
+    height: var(--font-xs);
+    display: inline-block;
 }
 
 .hlw-card-header__title {

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

@@ -105,6 +105,12 @@ defineEmits<{ click: [] }>();
     font-size: var(--font-lg, 36rpx);
     color: var(--primary-color, #3b82f6);
     flex-shrink: 0;
+
+    view {
+        width: var(--font-lg, 36rpx);
+        height: var(--font-lg, 36rpx);
+        display: inline-block;
+    }
 }
 
 .hlw-cell-body {

package/src/components/hlw-custom/hlw-custom.vue

@@ -12,7 +12,7 @@
             :send-message-img="resolvedContact.img"
             :show-message-card="resolvedContact.show"
         >
-            <text class="iconfont icon-service" />
+            <text class="i-ri-customer-service-line contact-button-icon" />
             <text class="contact-button-text">{{ resolvedBtnTitle }}</text>
         </button>
     </view>
@@ -64,7 +64,7 @@ const resolvedContact = computed(() => {
     padding: var(--card-padding);
     border: 1rpx solid var(--border-color-light);
     border-radius: var(--card-radius);
-    background: linear-gradient(135deg, #ffffff 0%, rgba(49, 118, 255, 0.05) 100%);
+    background: linear-gradient(135deg, #ffffff 0%, var(--primary-light, rgba(76, 68, 239, 0.05)) 100%);
 }
 
 .contact-copy {
@@ -100,14 +100,15 @@ const resolvedContact = computed(() => {
     flex-shrink: 0;
     margin: 0;
     border-radius: var(--radius-full);
-    background: #3176ff;
+    background: var(--primary-color, #3b82f6);
     color: #ffffff;
     font: inherit;
     line-height: 68rpx;
 }
 
-.contact-button .iconfont {
-    font-size: var(--font-sm);
+.contact-button-icon {
+    width: var(--font-sm);
+    height: var(--font-sm);
 }
 
 .contact-button-text {

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

@@ -335,7 +335,10 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     flex-shrink: 0;
 
     text {
+        width: var(--hlw-menu-icon-size);
+        height: var(--hlw-menu-icon-size);
         font-size: var(--hlw-menu-icon-size);
+        display: inline-block;
     }
 
     &--grid {
@@ -343,7 +346,10 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
         height: var(--hlw-menu-grid-icon-box-size);
         border-radius: var(--radius-lg, 24rpx);
         text {
+            width: var(--hlw-menu-grid-icon-size);
+            height: var(--hlw-menu-grid-icon-size);
             font-size: var(--hlw-menu-grid-icon-size);
+            display: inline-block;
         }
     }
 
@@ -376,8 +382,8 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
         color: #f43f5e;
     }
     &--blue {
-        background: #eff6ff;
-        color: #3b82f6;
+        background: var(--primary-light, rgba(76, 68, 239, 0.12));
+        color: var(--primary-color, #3b82f6);
     }
     &--red {
         background: #fef2f2;
@@ -418,7 +424,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     background: #f43f5e;
 }
 .hlw-menu-tag--blue {
-    background: #3b82f6;
+    background: var(--primary-color, #3b82f6);
 }
 
 .hlw-menu-tag-pulse {

package/src/components/hlw-nav-bar/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="navbar">
+    <view class="navbar" :class="theme">
         <view :style="bar_style"></view>
         <view class="header" :style="{ height: header_height + 'px' }">
             <view @tap="tapBack" class="left" v-if="props.isBack">
@@ -7,7 +7,7 @@
             </view>
             <text class="title">{{ title }}</text>
         </view>
-        <view class="status-bar" v-if="theme != 'light-theme'">
+        <view class="status-bar" v-if="theme === 'color-theme'">
             <view class="within"></view>
         </view>
     </view>
@@ -17,6 +17,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { useTheme } from "@/core";
+
 const { theme } = useTheme();
 
 const statusBarHeight: number = uni.getSystemInfoSync()?.statusBarHeight || 0;
@@ -48,7 +49,7 @@ if (props.isBar) {
     status_bar_height = 15;
 }
 
-const header_height = ref<number>(menuButtonInfo.bottom - statusBarHeight + 3);
+const header_height = ref<number>(menuButtonInfo.bottom - statusBarHeight + 6);
 const navbar_height = ref(header_height.value + statusBarHeight);
 const status_bar_height_style = `${status_bar_height}px`;
 
@@ -67,11 +68,69 @@ function tapBack() {
 .navbar {
     display: flex;
     flex-direction: column;
-    background-color: var(--navbar-bg-color);
     position: fixed;
     width: 750rpx;
     z-index: 999;
-    border-bottom: var(--navbar-border-bottom);
+    border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+    transition:
+        background-color 0.2s ease,
+        border-bottom 0.2s ease;
+
+    /* 白色主题：白色导航栏，下方加一条灰色的细边框 */
+    &.white-theme {
+        background-color: var(--navbar-bg-color, #ffffff);
+        border-bottom: var(--navbar-border-bottom, 1rpx solid #e7e7e7);
+
+        .title {
+            color: var(--font-color, #303048);
+        }
+
+        .icon-left {
+            color: var(--font-color, #303048);
+        }
+    }
+
+    /* 简洁主题：背景色与页面全局背景色一致，无明显界限，无边框 */
+    &.light-theme {
+        background-color: var(--bg-page, #f8f8f8);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: var(--font-color, #303048);
+        }
+
+        .icon-left {
+            color: var(--font-color, #303048);
+        }
+    }
+
+    /* 单色主题：纯主题色导航栏，无边框，无圆角 */
+    &.mono-theme {
+        background-color: var(--primary-color, #3b82f6);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: #ffffff;
+        }
+
+        .icon-left {
+            color: #ffffff;
+        }
+    }
+
+    /* 颜色主题：导航栏使用立体光影感的主题色渐变背景（反向：左上偏深，右下偏亮），下方带有白色圆角过渡 */
+    &.color-theme {
+        background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%), var(--primary-color, #3b82f6);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: #ffffff;
+        }
+
+        .icon-left {
+            color: #ffffff;
+        }
+    }
 
     .header {
         display: flex;
@@ -90,31 +149,32 @@ function tapBack() {
             height: 100%;
 
             .icon-left {
-                color: var(--navbar-left-color);
+                font-size: 30rpx;
             }
         }
 
         .title {
-            font-size: var(--navbar-font-size);
-            color: var(--navbar-title-color);
-            letter-spacing: 3rpx;
-            font-weight: bold;
+            font-size: var(--navbar-font-size, 26rpx);
+            letter-spacing: 1rpx;
+            font-weight: normal;
         }
     }
 
     .status-bar {
-        background-color: var(--navbar-bg-color);
+        background-color: transparent;
         height: v-bind(status_bar_height_style);
         width: 750rpx;
         position: relative;
 
         .within {
             position: absolute;
+            left: 0;
+            top: 0;
             width: 750rpx;
-            height: v-bind(status_bar_height_style);
-            background-color: var(--bg-color);
-            border-top-left-radius: var(--status-bar-border);
-            border-top-right-radius: var(--status-bar-border);
+            height: calc(v-bind(status_bar_height_style) + 2rpx);
+            background-color: var(--bg-color, var(--bg-page, #f8f8f8));
+            border-top-left-radius: var(--status-bar-border, var(--card-radius, 32rpx));
+            border-top-right-radius: var(--status-bar-border, var(--card-radius, 32rpx));
         }
     }
 }

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

@@ -1,6 +1,6 @@
 <template>
-    <view :class="theme" style="padding-bottom: 100rpx">
-        <hlw-nav-bar :is-back="props.isBack" :title="title" :is-bar="props.isBar"></hlw-nav-bar>
+    <view :class="[theme, fontSizeClass, fontFamilyClass]">
+        <hlw-nav-bar v-if="isBar" :is-back="props.isBack" :title="title" :is-bar="props.isBar"></hlw-nav-bar>
         <slot></slot>
     </view>
 </template>
@@ -9,7 +9,7 @@
 import { useTheme } from "@/core";
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import { ref } from "vue";
-const { theme } = useTheme();
+const { theme, fontSizeClass, fontFamilyClass } = useTheme();
 
 const props = defineProps({
     isBar: {
@@ -29,4 +29,94 @@ const props = defineProps({
 const title = ref(props.title);
 </script>
 
-<style></style>
+<style lang="scss">
+/* 全局系统字体大小缩放配置 */
+.font-size-small {
+    --font-xs: 18rpx;
+    --font-sm: 22rpx;
+    --font-base: 24rpx;
+    --font-md: 28rpx;
+    --font-lg: 32rpx;
+    --font-xl: 36rpx;
+}
+
+.font-size-standard {
+    --font-xs: 20rpx;
+    --font-sm: 24rpx;
+    --font-base: 28rpx;
+    --font-md: 32rpx;
+    --font-lg: 36rpx;
+    --font-xl: 40rpx;
+}
+
+.font-size-large {
+    --font-xs: 22rpx;
+    --font-sm: 28rpx;
+    --font-base: 32rpx;
+    --font-md: 36rpx;
+    --font-lg: 40rpx;
+    --font-xl: 44rpx;
+}
+
+.font-size-extra-large {
+    --font-xs: 24rpx;
+    --font-sm: 32rpx;
+    --font-base: 36rpx;
+    --font-md: 40rpx;
+    --font-lg: 44rpx;
+    --font-xl: 48rpx;
+}
+
+/* 全局字体样式配置 */
+.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;
+    }
+}
+
+.font-family-sans {
+    font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif !important;
+    view,
+    text,
+    button,
+    input,
+    textarea {
+        font-family: inherit !important;
+    }
+}
+
+.font-family-serif {
+    font-family: "Songti SC", "STSong", "SimSun", "Georgia", serif !important;
+    view,
+    text,
+    button,
+    input,
+    textarea {
+        font-family: inherit !important;
+    }
+}
+
+.font-family-kaiti {
+    font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimKai", serif !important;
+    view,
+    text,
+    button,
+    input,
+    textarea {
+        font-family: inherit !important;
+    }
+}
+</style>

package/src/core/theme.ts

@@ -1,12 +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 theme: ComputedRef<string> = computed(() => "light-theme");
+    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,
-        store: {
-            theme: "light-theme",
-        },
+        fontSize,
+        fontSizeClass,
+        setFontSize,
+        fontFamily,
+        fontFamilyClass,
+        setFontFamily,
+        store,
     };
 }

package/src/index.ts

@@ -3,20 +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";
 
-
-
 // App 根上下文
 export { useApp } from "./app";
 

package/src/stores/index.ts

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

package/src/stores/theme.ts

@@ -0,0 +1,126 @@
+import { defineStore } from "pinia";
+
+// ==========================================
+// 1. 主题 (Theme) 预设与类型
+// ==========================================
+
+export interface ThemePreset {
+    id: string;
+    name: string;
+    color: string;
+}
+
+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)",
+    },
+];
+
+// ==========================================
+// 2. 字体大小 (FontSize) 预设与类型
+// ==========================================
+
+export interface FontSizePreset {
+    id: string;
+    name: string;
+    class: string;
+}
+
+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",
+    },
+];
+
+// ==========================================
+// 3. 字体样式 (FontFamily) 预设与类型
+// ==========================================
+
+export interface FontFamilyPreset {
+    id: string;
+    name: string;
+    class: string;
+}
+
+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",
+    },
+];
+
+// ==========================================
+// 4. 统一个性化配置 Store (Theme / Font)
+// ==========================================
+
+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,
+});