@hlw-uni/mp-vue 1.2.26 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.2.26",
-    "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
+    "version": "2.0.0",
+    "description": "hlw-uni 小程序运行时 — Vue 组件 + composables + theme + http + 工具集（合并自原 mp-core）",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
@@ -32,15 +32,17 @@
     },
     "devDependencies": {
         "@dcloudio/types": "^3.4.30",
+        "@types/md5": "^2.3.6",
         "@types/node": "^20.19.39",
         "@vitejs/plugin-vue": "^5.2.4",
+        "pinia": "^2.3.1",
         "typescript": "^4.9.5",
         "vite": "5.2.8",
         "vite-plugin-dts": "^4.5.4",
         "vue": "^3.5.32"
     },
     "dependencies": {
-        "@hlw-uni/mp-core": "^1.0.28",
+        "md5": "^2.3.0",
         "z-paging": "^2.8.8"
     }
 }

package/src/app.ts

@@ -0,0 +1,173 @@
+/**
+ * useApp - 应用根上下文
+ * 生命周期、Pinia、拦截器、hlw 注入全部收敛在此。
+ */
+import { createSSRApp, type App, type Component } from 'vue';
+import { hlw } from '@/hlw';
+import { http } from '@/composables/http';
+import { useDevice } from '@/composables/device';
+import md5 from 'md5';
+import type { ApiResponse, RequestConfig } from '@/composables/http/types';
+
+let _installed = false;
+let _interceptorCleanup: Array<() => void> = [];
+
+export interface InterceptorOptions {
+    /** API 基础地址 */
+    baseURL?: string;
+    /** 自动注入 Token 的 header 键名 */
+    tokenHeader?: string;
+    /** Token 来源函数 */
+    getToken?: () => string;
+    /** 登录失效时的处理函数 */
+    onUnauthorized?: () => void;
+    /** 接口业务错误码是否自动 toast */
+    autoToastError?: boolean;
+}
+
+const _defaultOpts: InterceptorOptions = {
+    tokenHeader: 'x-token',
+    autoToastError: true,
+};
+
+/**
+ * 创建 uni-app 应用入口工具。
+ */
+export function useApp() {
+    /** 用于在导出前挂载插件。 */
+    const _plugins: Array<(app: App) => void> = [];
+
+    /**
+     * 注册一个待安装的应用插件。
+     */
+    function use(pluginOrInstaller: any) {
+        _plugins.push((app) => app.use(pluginOrInstaller));
+    }
+
+    /**
+     * 生成符合 uni-app 约定的 createApp 入口函数。
+     */
+    function install(AppComponent: Component) {
+        if (_installed) {
+            console.warn('[hlw] useApp().install() 应只调用一次');
+        }
+        _installed = true;
+
+        /**
+         * 创建并返回 uni-app 运行时应用实例。
+         */
+        function createApp() {
+            const app = createSSRApp(AppComponent);
+            app.config.globalProperties['hlw'] = hlw;
+            _plugins.forEach((fn) => fn(app));
+            return { app };
+        }
+
+        return createApp;
+    }
+
+    return { install, use, hlw, http };
+}
+
+/**
+ * 提取 URL 中的 query 参数，排序后拼接为签名字符串。
+ */
+function buildSignString(url: string): string {
+    try {
+        const [path, query] = url.split('?');
+        if (!query) return path + '&';
+        const params = query.split('&').filter(Boolean);
+        params.sort();
+        return params.join('&') + '&';
+    } catch {
+        return url;
+    }
+}
+
+/** sig 签名密钥。 */
+let _sigSecret = '';
+
+/**
+ * 注册默认请求、响应和错误拦截器。
+ */
+export function setupDefaultInterceptors(options: InterceptorOptions & { sigSecret?: string } = {}) {
+    const opts = { ..._defaultOpts, ...options };
+    if (opts.sigSecret) _sigSecret = opts.sigSecret;
+    if (opts.baseURL) http.setBaseURL(opts.baseURL);
+
+    _interceptorCleanup.forEach((dispose) => dispose());
+    _interceptorCleanup = [];
+
+    /**
+     * 请求拦截：注入设备信息、签名和 token。
+     */
+    const offRequest = http.onRequest((config: RequestConfig) => {
+        const device = useDevice();
+        if (device.value) {
+            const d = device.value;
+            const query = [
+                ['appid', d.appid],
+                ['device_brand', d.device_brand],
+                ['device_model', d.device_model],
+                ['device_id', d.device_id],
+                ['device_type', d.device_type],
+                ['device_orientation', d.device_orientation],
+                ['platform', d.platform],
+                ['system', d.system],
+                ['os', d.os],
+                ['version', d.version],
+                ['sdk_version', d.sdk_version],
+                ['host_name', d.host_name],
+                ['host_version', d.host_version],
+                ['host_language', d.host_language],
+                ['language', d.language],
+                ['app_version', d.app_version],
+                ['app_version_code', d.app_version_code],
+                ['screen_width', String(d.screen_width)],
+                ['screen_height', String(d.screen_height)],
+            ]
+                .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v ?? '')}`)
+                .join('&');
+            config.url = config.url + (config.url.includes('?') ? '&' : '?') + query;
+            config.headers = { ...config.headers, 'X-Appid': d.appid };
+        }
+
+        if (_sigSecret) {
+            const signStr = buildSignString(config.url);
+            const sig = md5(signStr + _sigSecret);
+            config.url = config.url + '&sig=' + sig;
+        }
+
+        if (opts.getToken) {
+            const token = opts.getToken();
+            if (token) {
+                config.headers = {
+                    ...config.headers,
+                    [opts.tokenHeader!]: token,
+                };
+            }
+        }
+        return config;
+    });
+
+    /**
+     * 响应拦截：处理业务错误提示。
+     */
+    const offResponse = http.onResponse((res: ApiResponse<unknown>) => {
+        if (opts.autoToastError && res.code !== 1) {
+            uni.showToast({ title: res.info || '请求失败', icon: 'none' });
+        }
+        return res;
+    });
+
+    /**
+     * 错误拦截：处理未授权场景。
+     */
+    const offError = http.onError((err: Error) => {
+        if (err.message.includes('401')) {
+            opts.onUnauthorized?.();
+        }
+    });
+
+    _interceptorCleanup = [offRequest, offResponse, offError];
+}

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

@@ -1,50 +1,94 @@
+<!--
+    HlwAd — 小程序展示型广告原子组件
+    ------------------------------------------------------------------
+    用法（业务方从 mp-core useAd().config 取对应 unit_id 传入）：
+        hlw-ad type="banner" :unit-id="config.banner_unit_id"
+        hlw-ad type="grid"   :unit-id="config.grid_unit_id"
+        hlw-ad type="custom" :unit-id="config.custom_unit_id"
+
+    渲染分支：
+      - banner        → ad type="banner" unit-id="..."（微信流量主自带样式）
+      - grid / custom → ad-custom unit-id="..."（原生模板广告）
+
+    video / reward / popup 不走这个组件：
+      - reward / popup → useAd().showReward() / showPopup()
+      - video（贴片）须嵌在 video 标签内，业务侧自己用 <ad type="video">
+-->
 <template>
-    <ad :unit-id="unitId" @load="onLoad" @close="onClose" @error="onError" />
+    <view
+        v-if="visible"
+        :class="['hlw-ad', `hlw-ad--${type}`, customClass]"
+        :style="customStyle"
+    >
+        <ad
+            v-if="type === 'banner'"
+            type="banner"
+            :unit-id="unitId"
+            @load="onLoad"
+            @error="onError"
+        />
+        <ad-custom
+            v-else
+            :unit-id="unitId"
+            @load="onLoad"
+            @error="onError"
+        />
+    </view>
 </template>
+
 <script setup lang="ts">
-/**
- * HlwAd — 小程序信息流 / Banner 广告组件
- *
- * 对小程序原生 <ad> 组件的封装。
- * 支持微信小程序、抖音小程序等，由 uni-app 编译器适配各平台。
- *
- * Props:
- *   unitId   - 广告单元 ID（各平台在广告后台申请）
- *
- * Emits:
- *   load     - 广告加载成功
- *   close    - 用户关闭广告
- *   error    - 广告加载/展示失败，携带 { errCode, errMsg }
- *
- * @example
- * ```vue
- * <HlwAd unit-id="adunit-xxx" @load="onLoad" @error="onError" />
- * ```
- */
+import { computed } from "vue";
 
 defineOptions({ name: "HlwAd" });
 
-defineProps<{
-    /** 广告单元 ID */
+interface Props {
+    /** 广告类型 — 仅展示型（banner / grid / custom） */
+    type: "banner" | "grid" | "custom";
+    /** 微信广告单元 id；空字符串 → 不渲染 */
     unitId: string;
-}>();
+    /** 自定义样式（合并到根元素） */
+    customStyle?: string;
+    /** 自定义 class */
+    customClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    customStyle: "",
+    customClass: "",
+});
 
 const emit = defineEmits<{
     (e: "load", event: any): void;
-    (e: "close", event: any): void;
     (e: "error", event: any): void;
 }>();
 
+/** 有 unit_id 才渲染 */
+const visible = computed(() => !!props.unitId);
+
 function onLoad(event: any) {
     emit("load", event);
 }
-
-function onClose(event: any) {
-    emit("close", event);
-}
-
 function onError(event: any) {
-    console.error("[HlwAd] 广告错误:", event?.detail?.errCode, event?.detail?.errMsg);
+    console.warn(`[HlwAd] type=${props.type} error`, event?.detail);
     emit("error", event);
 }
 </script>
+
+<style scoped>
+.hlw-ad {
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    background: var(--surface-card, #ffffff);
+}
+
+/* 格子广告：默认右下悬浮；微信硬性规则要求 wrapper 透明无圆角，customStyle 可覆盖 */
+.hlw-ad--grid {
+    position: fixed;
+    right: 20rpx;
+    bottom: 200rpx;
+    z-index: 99;
+    border-radius: 0;
+    overflow: visible;
+    background: transparent;
+}
+</style>