@hlw-uni/mp-vue 1.1.7 → 1.1.8

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

@@ -1,7 +1,8 @@
+import { Ref } from 'vue';
 export declare const THEME_CHANGE_EVENT = "hlw:theme-change";
 export declare function buildThemeStyle(): string;
 export declare function useThemePageStyle(): {
-    themePageStyle: any;
+    themePageStyle: Ref<string, string>;
 };
 export type { FontScale, FontPreset } from './font';
 export { FONT_SCALE_KEY, FONT_PRESETS, getCurrentFontScale, getCurrentFontVars } from './font';

package/dist/index.d.ts

@@ -7,5 +7,6 @@
  * compiled SFC runtime helpers from the library entry.
  */
 export type { FontScale, FontPreset, ThemeColor } from './composables/theme';
+export type { HlwMenuItem } from './components/hlw-menu/types';
 export { FONT_PRESETS, FONT_SCALE_KEY, DEFAULT_THEMES, THEME_COLOR_KEY, THEME_CHANGE_EVENT, getCurrentFontScale, getCurrentFontVars, getCurrentThemeColor, getCurrentThemeVars, buildThemeStyle, useThemePageStyle, } from './composables/theme';
 export { useThemeStore } from './stores/theme';

package/dist/stores/theme.d.ts

@@ -1 +1,38 @@
-export declare const useThemeStore: any;
+import { FontScale, ThemeColor } from '../composables/theme';
+import { StoreDefinition } from 'pinia';
+import { Ref, ComputedRef } from 'vue';
+
+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;
+}, "scale" | "fontOptions" | "primaryColor" | "themes">, 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;
+}, "activeTheme">, 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;
+}, "setScale" | "setTheme">>;

package/package.json

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

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

@@ -2,48 +2,52 @@
     <button
         class="hlw-btn"
         :class="[
-            `hlw-btn--${type}`,
-            `hlw-btn--${size}`,
-            { 'hlw-btn--block': block, 'hlw-btn--round': round, 'hlw-btn--disabled': disabled, 'hlw-btn--loading': loading },
+            `hlw-btn--${props.type}`,
+            `hlw-btn--${props.size}`,
+            {
+                'hlw-btn--block': props.block,
+                'hlw-btn--round': props.round,
+                'hlw-btn--disabled': props.disabled,
+                'hlw-btn--loading': props.loading,
+            },
         ]"
-        :disabled="disabled || loading"
-        :open-type="openType"
-        @tap="$emit('click')"
+        :style="buttonStyle"
+        :disabled="props.disabled || props.loading"
+        :open-type="props.openType"
+        @tap="handleTap"
     >
-        <view v-if="loading" class="hlw-btn-spinner" />
-        <view v-else-if="icon" :class="icon" class="hlw-btn-icon" />
-        <slot />
+        <view v-if="props.loading" class="hlw-btn-spinner" />
+        <template v-else>
+            <view v-if="hasIcon" class="hlw-btn-icon-wrap">
+                <slot name="icon">
+                    <view v-if="props.icon" :class="props.icon" class="hlw-btn-icon" />
+                </slot>
+            </view>
+            <view class="hlw-btn-content">
+                <slot />
+            </view>
+        </template>
     </button>
 </template>
 
 <script setup lang="ts">
-/**
- * HlwButton — 主题按钮
- *
- * 跟随 --primary-color 主题色，支持多种类型、尺寸和状态。
- *
- * @props
- *   type     - 按钮类型：primary / outline / text / ghost，默认 primary
- *   size     - 尺寸：small / medium / large，默认 medium
- *   loading  - 加载状态（显示 spinner 并禁止点击），默认 false
- *   disabled - 禁用状态，默认 false
- *   block    - 块级按钮（占满父容器宽度），默认 false
- *   round    - 圆角药丸形状，默认 false
- *   icon     - 左侧图标 class（如 i-fa6-solid-plus）
- *   openType - 微信原生 open-type（如 share、getPhoneNumber）
- *
- * @events
- *   click - 点击事件
- *
- * @example
- * ```vue
- * <HlwButton type="primary" @click="submit">提交</HlwButton>
- * <HlwButton type="outline" loading>加载中</HlwButton>
- * <HlwButton type="text" icon="i-fa6-solid-plus">新增</HlwButton>
- * ```
- */
+import { computed, useSlots } from "vue";
+
+type ButtonType =
+    | "primary"
+    | "success"
+    | "warning"
+    | "danger"
+    | "error"
+    | "info"
+    | "outline"
+    | "text"
+    | "ghost";
+
+type NavigateType = "navigateTo" | "redirectTo" | "switchTab" | "reLaunch" | "navigateBack";
+
 interface Props {
-    type?: "primary" | "outline" | "text" | "ghost";
+    type?: ButtonType;
     size?: "small" | "medium" | "large";
     loading?: boolean;
     disabled?: boolean;
@@ -51,9 +55,15 @@ interface Props {
     round?: boolean;
     icon?: string;
     openType?: string;
+    bgColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    url?: string;
+    navigateType?: NavigateType;
+    delta?: number;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     type: "primary",
     size: "medium",
     loading: false,
@@ -62,38 +72,107 @@ withDefaults(defineProps<Props>(), {
     round: false,
     icon: "",
     openType: "",
+    bgColor: "",
+    textColor: "",
+    borderColor: "",
+    url: "",
+    navigateType: "navigateTo",
+    delta: 1,
+});
+
+const emit = defineEmits<{ click: [] }>();
+
+const slots = useSlots();
+const hasIcon = computed(() => Boolean(props.icon || slots.icon));
+
+const buttonStyle = computed(() => {
+    const style: Record<string, string> = {};
+
+    if (props.bgColor) style.background = props.bgColor;
+    if (props.textColor) style.color = props.textColor;
+    if (props.borderColor) style.borderColor = props.borderColor;
+
+    return style;
 });
 
-defineEmits<{ click: [] }>();
+const handleTap = () => {
+    if (props.disabled || props.loading) return;
+
+    emit("click");
+
+    if (!props.url && props.navigateType !== "navigateBack") return;
+
+    switch (props.navigateType) {
+        case "redirectTo":
+            if (props.url) uni.redirectTo({ url: props.url });
+            break;
+        case "switchTab":
+            if (props.url) uni.switchTab({ url: props.url });
+            break;
+        case "reLaunch":
+            if (props.url) uni.reLaunch({ url: props.url });
+            break;
+        case "navigateBack":
+            uni.navigateBack({ delta: props.delta });
+            break;
+        default:
+            if (props.url) uni.navigateTo({ url: props.url });
+            break;
+    }
+};
 </script>
 
 <style lang="scss" scoped>
+$semantic-colors: (
+    primary: var(--primary-color),
+    success: #10b981,
+    warning: #f59e0b,
+    danger: #ef4444,
+    error: #ef4444,
+    info: #64748b,
+);
+
 .hlw-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8rpx;
+    flex-shrink: 0;
     border: none;
     font-weight: 500;
     line-height: 1;
     transition: opacity 0.2s;
+    box-sizing: border-box;
+    background: transparent;
+    white-space: nowrap;
 
-    &::after { display: none; }
-    &:active { opacity: 0.7; }
+    &::after {
+        display: none;
+    }
 
-    &--primary {
-        background: var(--primary-color);
-        color: #fff;
+    &:active {
+        opacity: 0.7;
+    }
+
+    @each $name, $color in $semantic-colors {
+        &--#{$name} {
+            background: #{$color};
+            color: #fff;
+            border: none;
+        }
     }
+
     &--outline {
         background: transparent;
         color: var(--primary-color);
         border: 2rpx solid var(--primary-color);
     }
+
     &--text {
         background: transparent;
         color: var(--primary-color);
     }
+
     &--ghost {
         background: transparent;
         color: #fff;
@@ -101,25 +180,54 @@ defineEmits<{ click: [] }>();
     }
 
     &--small {
-        padding: 8rpx 20rpx;
+        min-height: 56rpx;
+        padding: 12rpx 20rpx;
         font-size: var(--font-xs, 20rpx);
         border-radius: var(--radius-sm, 8rpx);
     }
+
     &--medium {
-        padding: 16rpx 32rpx;
+        min-height: 72rpx;
+        padding: 18rpx 32rpx;
         font-size: var(--font-sm, 24rpx);
         border-radius: var(--radius-md, 16rpx);
     }
+
     &--large {
-        padding: 24rpx 48rpx;
+        min-height: 88rpx;
+        padding: 22rpx 48rpx;
         font-size: var(--font-base, 28rpx);
         border-radius: var(--radius-md, 16rpx);
     }
 
-    &--block { display: flex; width: 100%; }
-    &--round { border-radius: 999rpx; }
-    &--disabled { opacity: 0.4; &:active { opacity: 0.4; } }
-    &--loading { opacity: 0.7; }
+    &--block {
+        display: flex;
+        width: 100%;
+    }
+
+    &--round {
+        border-radius: 999rpx;
+    }
+
+    &--disabled {
+        opacity: 0.4;
+
+        &:active {
+            opacity: 0.4;
+        }
+    }
+
+    &--loading {
+        opacity: 0.7;
+    }
+}
+
+.hlw-btn-icon-wrap,
+.hlw-btn-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
 }
 
 .hlw-btn-icon {
@@ -136,6 +244,8 @@ defineEmits<{ click: [] }>();
 }
 
 @keyframes hlw-spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 </style>

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

@@ -152,6 +152,10 @@ const handleClick = (item: HlwMenuItem) => {
 
 <style lang="scss" scoped>
 .hlw-menu {
+    --hlw-menu-icon-size: var(--font-sm, 24rpx);
+    --hlw-menu-icon-box-size: calc(var(--hlw-menu-icon-size) + 40rpx);
+    --hlw-menu-grid-icon-size: var(--font-lg, 36rpx);
+    --hlw-menu-grid-icon-box-size: calc(var(--hlw-menu-grid-icon-size) + 52rpx);
     background: #fff;
     border-radius: var(--radius-lg, 24rpx);
     border: 1rpx solid var(--border-color, #e2e8f0);
@@ -254,8 +258,8 @@ const handleClick = (item: HlwMenuItem) => {
 
 /* ========== 图标 ========== */
 .hlw-menu-icon {
-    width: 64rpx;
-    height: 64rpx;
+    width: var(--hlw-menu-icon-box-size);
+    height: var(--hlw-menu-icon-box-size);
     border-radius: var(--radius-md, 16rpx);
     display: flex;
     align-items: center;
@@ -263,15 +267,15 @@ const handleClick = (item: HlwMenuItem) => {
     flex-shrink: 0;
 
     text {
-        font-size: 20rpx;
+        font-size: var(--hlw-menu-icon-size);
     }
 
     &--grid {
-        width: 88rpx;
-        height: 88rpx;
+        width: var(--hlw-menu-grid-icon-box-size);
+        height: var(--hlw-menu-grid-icon-box-size);
         border-radius: var(--radius-lg, 24rpx);
         text {
-            font-size: 32rpx;
+            font-size: var(--hlw-menu-grid-icon-size);
         }
     }
 
@@ -365,14 +369,14 @@ const handleClick = (item: HlwMenuItem) => {
 
 .hlw-menu-arrow {
     color: #d1d5db;
-    font-size: var(--font-xs, 20rpx);
+    font-size: var(--font-sm, 24rpx);
 }
 .hlw-menu-spin {
     animation: icon-spin 1s linear infinite;
 }
 .hlw-menu-muted {
     color: #94a3b8;
-    font-size: var(--font-xs, 20rpx);
+    font-size: var(--font-sm, 24rpx);
 }
 
 @keyframes icon-spin {

package/src/pinia-unistorage.d.ts

@@ -0,0 +1,8 @@
+import "pinia";
+import type { StateTree } from "pinia";
+
+declare module "pinia" {
+    interface DefineStoreOptionsBase<S extends StateTree, Store> {
+        unistorage?: boolean;
+    }
+}

package/src/stores/theme.ts

@@ -38,7 +38,7 @@ export const useThemeStore = defineStore(
 
         /** 当前激活的主题信息 */
         const activeTheme = computed<ThemeColor>(() =>
-            themes.find((t) => t.value === primaryColor.value)
+            themes.find((t: ThemeColor) => t.value === primaryColor.value)
                 ?? { label: "自定义", value: primaryColor.value },
         );