@hlw-uni/mp-vue 2.1.57 → 2.1.59

package/dist/stores/theme.d.ts

@@ -2,6 +2,9 @@ import { FontScale, ThemeColor, Appearance, AppearanceMode, AppearancePreset } f
 import { StoreDefinition } from 'pinia';
 import { Ref, ComputedRef } from 'vue';
 
+/**
+ * 统一管理全局主题、字体缩放和外观模式的 Pinia Store。
+ */
 export declare const useThemeStore: StoreDefinition<"theme", Pick<{
     scale: Ref<FontScale, FontScale>;
     fontOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "2.1.57",
+    "version": "2.1.59",
     "description": "hlw-uni 小程序运行时 — Vue 组件 + composables + theme + http + 工具集（合并自原 mp-core）",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -40,7 +40,7 @@
         "typescript": "^4.9.5",
         "vite": "5.2.8",
         "vite-plugin-dts": "^4.5.4",
-        "vue": "^3.5.32"
+        "vue": "^3.5.34"
     },
     "dependencies": {
         "md5": "^2.3.0",

package/src/app.ts

@@ -9,14 +9,27 @@ import { useRequest } from '@/composables/request';
 let _installed = false;
 
 /**
- * 创建 uni-app 应用入口工具。
+ * 创建 uni-app 应用入口与全局插件配置工具。
+ * 
+ * @example
+ * ```ts
+ * import { useApp } from '@hlw-uni/mp-vue';
+ * import App from './App.vue';
+ * import { createPinia } from 'pinia';
+ * 
+ * const app = useApp();
+ * app.use(createPinia());
+ * export const createApp = app.install(App);
+ * ```
  */
 export function useApp() {
-    /** 用于在导出前挂载插件。 */
+    /** 用于在导出前挂载的插件列表 */
     const _plugins: Array<(app: App) => void> = [];
 
     /**
-     * 注册一个待安装的应用插件。
+     * 注册一个待安装的 Vue 插件（例如 Pinia、Router 或组件库）。
+     * 
+     * @param pluginOrInstaller Vue 插件或插件安装函数
      */
     function use(pluginOrInstaller: any) {
         _plugins.push((app) => app.use(pluginOrInstaller));
@@ -24,6 +37,9 @@ export function useApp() {
 
     /**
      * 生成符合 uni-app 约定的 createApp 入口函数。
+     * 
+     * @param AppComponent 根组件 (通常是 App.vue)
+     * @returns 返回符合 uni-app 要求的 createApp 函数
      */
     function install(AppComponent: Component) {
         if (_installed) {
@@ -46,3 +62,4 @@ export function useApp() {
 
     return { install, use, hlw, request: useRequest() };
 }
+

package/src/components/hlw-add-mini/README.md

@@ -1,17 +1,16 @@
-#添加小程序指引，可适配自定义导航栏
+# 添加到我的小程序提示
 
-| 参数 | 说明 | 类型 | 默认值 | 其他 |
-| :---- | :---- | :---- | :---- | :---- |
-| navigationStyle | 顶部导航栏样式 | String | default | 可选值 custom |
+轻量提示用户从右上角菜单添加小程序。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :-- | :-- | :-- | :-- |
+| show | 是否显示 | Boolean | false |
+| navigationStyle | 顶部导航栏样式，可选 `default`、`custom` | String | default |
+| title | 标题 | String | 添加到我的小程序 |
+| desc | 描述 | String | 点击右上角 ··· 添加 |
 
-#case
-# 作者：douyin0516
 ```vue
 <template>
-	<view>
-		<hlw-add-mini :show="show" @close="close" />
-	</view>
+	<hlw-add-mini :show="show" @close="close" />
 </template>
-
-
 ```

package/src/components/hlw-add-mini/index.vue

@@ -1,110 +1,137 @@
 <template>
-	<view v-if="props.show" class="box" :style="{ top }">
-		<image class="close" :src="close_icon" @click="close" />
-		<view class="fs_12">
-			<view class="">点击右上方“···”</view>
-			<view class="">选择“添加到我的小程序”</view>
-		</view>
-		<image class="image" mode="widthfix" :src="add_miniprogram" />
-		<view class="fs_12">
-			<view class="">回到微信首页</view>
-			<view class="">向下拉动便可查看</view>
+	<view v-if="props.show" class="hlw-add-mini" :style="{ top }">
+		<view class="hlw-add-mini__arrow" />
+		<view class="hlw-add-mini__content">
+			<view class="hlw-add-mini__text">
+				<view class="hlw-add-mini__title">{{ props.title }}</view>
+				<view v-if="props.desc" class="hlw-add-mini__desc">{{ props.desc }}</view>
+			</view>
+			<view class="hlw-add-mini__close" @tap="close">×</view>
 		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
+/**
+ * HlwAddMini - 添加小程序提示气泡组件
+ * 
+ * 用于提示用户点击右上角将当前小程序“添加到我的小程序”中，以提升用户留存。
+ * 会根据是否为自定义导航栏（custom），自动调整气泡浮动位置（避开胶囊按钮与状态栏）。
+ */
 import { computed } from "vue";
+import { useDevice } from "../../composables/device";
 
 defineOptions({ name: "HlwAddMini" });
 
 interface Props {
+	/** 是否显示提示气泡 */
 	show?: boolean;
+	/** 页面导航栏样式：default (系统默认) | custom (自定义导航) */
 	navigationStyle?: "default" | "custom";
+	/** 气泡主标题文字 */
+	title?: string;
+	/** 气泡副标题/描述文字 */
+	desc?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	show: false,
 	navigationStyle: "default",
+	title: "添加到我的小程序",
+	desc: "点击右上角 ··· 添加",
 });
 
-const emit = defineEmits<{ close: [] }>();
-
-const assets = {
-	add_miniprogram:
-				'data:image/png;base64,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',
-	close_icon:
-				'data:image/png;base64,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',
-};
+const emit = defineEmits<{
+	/** 点击关闭按钮时触发 */
+	close: []
+}>();
 
-const add_miniprogram = assets.add_miniprogram;
-const close_icon = assets.close_icon;
+// 从 useDevice 获取缓存的设备系统信息，规避在 computed 中频繁调用同步系统 API 的性能问题
+const { info } = useDevice();
 
 const top = computed(() =>
-	props.navigationStyle === "custom" ? `${uni.getSystemInfoSync().statusBarHeight + 50}px` : "6px"
+	props.navigationStyle === "custom" ? `${info.status_bar_height + 48}px` : "12px"
 );
 
+/**
+ * 触发关闭气泡事件。
+ */
 function close() {
 	emit("close");
 }
 </script>
 
 <style lang="scss" scoped>
-.box {
-	width: 388rpx;
-	height: 460rpx;
-	padding: 60rpx 30rpx 40rpx;
-	box-sizing: border-box;
-	background: rgba(31, 31, 31, 0.9);
-	color: #fff;
-	text-align: center;
-	font-size: 24rpx;
-	border-radius: 24rpx;
+.hlw-add-mini {
 	position: fixed;
-	right: 16px;
+	right: 22rpx;
 	z-index: 32;
-	letter-spacing: 0.5px;
-	opacity: 0;
-	animation: float 0.5s ease forwards;
-
-	.fs_12 {
-		display: flex;
-		flex-direction: column;
-		gap: 10rpx;
-	}
+	width: 340rpx;
+	animation: hlw-add-mini-in 0.22s ease-out both;
+}
 
-	&:before {
-		position: absolute;
-		content: '';
-		width: 0;
-		height: 0;
-		right: 52px;
-		top: -28rpx;
-		border: 14rpx solid transparent;
-		border-bottom: 20rpx solid #333;
-	}
-	.image {
-		margin: 30rpx 0;
-		width: 320rpx;
-		height: 160rpx;
-		border-radius: 8rpx;
-	}
-	.close {
-		position: absolute;
-		left: 20rpx;
-		top: 20rpx;
-		z-index: 2;
-		width: 44rpx;
-		height: 44rpx;
-	}
+.hlw-add-mini__arrow {
+	position: absolute;
+	right: 56rpx;
+	top: -10rpx;
+	width: 20rpx;
+	height: 20rpx;
+	background: rgba(17, 24, 39, 0.82);
+	transform: rotate(45deg);
+}
+
+.hlw-add-mini__content {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+	padding: 16rpx 14rpx 16rpx 20rpx;
+	border-radius: 14rpx;
+	background: rgba(17, 24, 39, 0.82);
+	box-shadow: 0 12rpx 34rpx rgba(15, 23, 42, 0.22);
 }
-@keyframes float {
+
+.hlw-add-mini__text {
+	flex: 1;
+	min-width: 0;
+}
+
+.hlw-add-mini__title {
+	color: #ffffff;
+	font-size: 25rpx;
+	font-weight: 400;
+	line-height: 1.3;
+    letter-spacing: 1rpx;
+}
+
+.hlw-add-mini__desc {
+	margin-top: 4rpx;
+	color: rgba(255, 255, 255, 0.72);
+	font-size: 21rpx;
+	line-height: 1.3;
+    letter-spacing: 1rpx;
+}
+
+.hlw-add-mini__close {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 36rpx;
+	height: 36rpx;
+	color: rgba(255, 255, 255, 0.72);
+	font-size: 30rpx;
+	line-height: 1;
+}
+
+@keyframes hlw-add-mini-in {
 	0% {
 		opacity: 0;
+		transform: translateY(-8rpx);
 	}
 
 	100% {
 		opacity: 1;
+		transform: translateY(0);
 	}
 }
 </style>

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

@@ -35,8 +35,16 @@
 </template>
 
 <script setup lang="ts">
+/**
+ * HlwButton - 语义化/响应式通用按钮组件
+ * 
+ * 扩展了原生小程序 button 属性。支持丰富的语义色彩预设、尺寸自适应、圆角与 Block 状态，
+ * 并且内置了快捷的 uni-app 路由跳转逻辑与 Native `open-type` 会话消息配置。
+ */
 import { computed, useSlots } from "vue";
+import { useNavigate } from "@/composables/navigator";
 
+/** 按钮类型：语义化颜色预设、边框模式、文本模式及幽灵模式 */
 type ButtonType =
     | "primary"
     | "success"
@@ -48,22 +56,37 @@ type ButtonType =
     | "text"
     | "ghost";
 
+/** 路由动作类型 */
 type NavigateType = "navigateTo" | "redirectTo" | "switchTab" | "reLaunch" | "navigateBack";
 
 interface Props {
+    /** 按钮类型 */
     type?: ButtonType;
+    /** 按钮尺寸大小 */
     size?: "small" | "medium" | "large";
+    /** 是否开启 Loading 载入状态，开启后按钮处于禁用状态且显示菊花加载器 */
     loading?: boolean;
+    /** 是否禁用按钮 */
     disabled?: boolean;
+    /** 是否独占整行（宽 100%） */
     block?: boolean;
+    /** 是否为椭圆胶囊形状（圆角为 999rpx） */
     round?: boolean;
+    /** 图标的 class 名称，若传入则在按钮内容前展示 */
     icon?: string;
+    /** 小程序原生的开放能力类型（如：share, contact, getUserInfo...） */
     openType?: string;
+    /** 自定义背景颜色（覆盖 type 预设） */
     bgColor?: string;
+    /** 自定义文字颜色（覆盖 type 预设） */
     textColor?: string;
+    /** 自定义边框颜色（覆盖 type 预设） */
     borderColor?: string;
+    /** 快捷跳转的目标路径 */
     url?: string;
+    /** 路由动作方式，默认 navigateTo */
     navigateType?: NavigateType;
+    /** 返回上级页面的层数，仅在 navigateType="navigateBack" 时有效 */
     delta?: number;
     /** open-type="contact" 时：用户进入会话时展示的自定义消息卡片标题 */
     sendMessageTitle?: string;
@@ -96,7 +119,10 @@ const props = withDefaults(defineProps<Props>(), {
     showMessageCard: false,
 });
 
-const emit = defineEmits<{ click: [] }>();
+const emit = defineEmits<{
+    /** 按钮点击事件（在未禁用且非 loading 时触发） */
+    click: []
+}>();
 
 const slots = useSlots();
 const hasIcon = computed(() => Boolean(props.icon || slots.icon));
@@ -118,6 +144,11 @@ const buttonStyle = computed(() => {
     return style;
 });
 
+const navigator = useNavigate();
+
+/**
+ * 处理点击事件与快捷页面跳转。
+ */
 const handleTap = () => {
     if (props.disabled || props.loading) return;
 
@@ -125,23 +156,7 @@ const handleTap = () => {
 
     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;
-    }
+    navigator.navigate(props.navigateType, props.url, { delta: props.delta });
 };
 </script>
 

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

@@ -0,0 +1,118 @@
+<template>
+    <view class="contact-card">
+        <view class="contact-copy">
+            <text class="contact-title">{{ title }}</text>
+            <text class="contact-desc">{{ desc }}</text>
+        </view>
+        <button
+            class="contact-button"
+            open-type="contact"
+            :send-message-title="resolvedContact.title"
+            :send-message-path="resolvedContact.path"
+            :send-message-img="resolvedContact.img"
+            :show-message-card="resolvedContact.show"
+        >
+            <text class="iconfont icon-service" />
+            <text class="contact-button-text">{{ resolvedBtnTitle }}</text>
+        </button>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface ContactConfig {
+    send_message_title?: string;
+    send_message_path?: string;
+    send_message_img?: string;
+    show_message_card?: boolean;
+}
+
+const props = withDefaults(
+    defineProps<{
+        title: string;
+        desc: string;
+        btn_title?: string;
+        contact?: ContactConfig;
+    }>(),
+    {
+        btn_title: "",
+        contact: () => ({}),
+    }
+);
+
+const resolvedBtnTitle = computed(() => {
+    return props.btn_title || "联系客服";
+});
+
+const resolvedContact = computed(() => {
+    const c = props.contact || {};
+    return {
+        title: c.send_message_title ?? "",
+        path: c.send_message_path ?? "",
+        img: c.send_message_img ?? "",
+        show: c.show_message_card ?? false,
+    };
+});
+</script>
+
+<style scoped lang="scss">
+.contact-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    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%);
+}
+
+.contact-copy {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    margin-right: 22rpx;
+}
+
+.contact-title {
+    margin-bottom: 8rpx;
+    color: #1f2937;
+    font-size: var(--font-base);
+    line-height: 1.3;
+    letter-spacing: 3rpx;
+}
+
+.contact-desc {
+    color: #94a3b8;
+    font-size: var(--font-sm);
+    line-height: 1.45;
+    letter-spacing: 3rpx;
+}
+
+.contact-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10rpx;
+    width: 176rpx;
+    height: 68rpx;
+    flex-shrink: 0;
+    margin: 0;
+    border-radius: var(--radius-full);
+    background: #3176ff;
+    color: #ffffff;
+    font: inherit;
+    line-height: 68rpx;
+}
+
+.contact-button .iconfont {
+    font-size: var(--font-sm);
+}
+
+.contact-button-text {
+    color: inherit;
+    font-size: var(--font-sm);
+    line-height: 1;
+}
+</style>