@hlw-uni/mp-vue 2.1.58 → 2.1.60

package/dist/index.mjs

@@ -4,9 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, onBeforeUpdate, onUnmounted, computed, createSSRApp } from "vue";
+import { ref, onBeforeUpdate, onUnmounted, createSSRApp } from "vue";
 import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
-import { defineStore } from "pinia";
 const cosAdapter = {
   name: "cos",
   /**
@@ -335,6 +334,15 @@ function ServicePrefix(value) {
     target.prototype.servicePrefix = typeof value === "string" ? value : value.prefix;
   };
 }
+function PluginService(target) {
+  Object.defineProperty(target.prototype, "servicePrefix", {
+    get() {
+      return globalThis.VITE_PLUGIN_NAME || "";
+    },
+    enumerable: true,
+    configurable: true
+  });
+}
 function useMsg() {
   function toast(opts) {
     const {
@@ -959,364 +967,6 @@ function useNavigate() {
     miniProgram: (appId, options) => navigate("miniprogram", appId, options)
   };
 }
-const useThemeStore = defineStore(
-  "theme",
-  () => {
-    const scale = ref("normal");
-    function setScale(s) {
-      scale.value = s;
-      uni.setStorageSync(FONT_SCALE_KEY, s);
-      uni.$emit(THEME_CHANGE_EVENT);
-    }
-    const fontOptions = Object.keys(FONT_PRESETS).map((key) => ({
-      value: key,
-      label: FONT_PRESETS[key].label
-    }));
-    const primaryColor = ref(DEFAULT_THEMES[0].value);
-    const themes = DEFAULT_THEMES;
-    const activeTheme = computed(
-      () => themes.find((t) => t.value === primaryColor.value) ?? { label: "自定义", value: primaryColor.value }
-    );
-    function setTheme(color) {
-      primaryColor.value = color;
-      uni.setStorageSync(THEME_COLOR_KEY, color);
-      uni.$emit(THEME_CHANGE_EVENT);
-    }
-    const appearance = ref("auto");
-    const appearanceOptions = APPEARANCE_PRESETS;
-    const appearanceMode = computed(() => resolveAppearance(appearance.value));
-    const isDark = computed(() => appearanceMode.value === "dark");
-    function setAppearance(a) {
-      appearance.value = a;
-      uni.setStorageSync(APPEARANCE_KEY, a);
-      uni.$emit(THEME_CHANGE_EVENT);
-    }
-    return {
-      // 字体
-      scale,
-      fontOptions,
-      setScale,
-      // 主题色
-      primaryColor,
-      themes,
-      activeTheme,
-      setTheme,
-      // 外观模式
-      appearance,
-      appearanceOptions,
-      appearanceMode,
-      isDark,
-      setAppearance
-    };
-  },
-  { unistorage: true }
-);
-const FONT_SCALE_KEY = "hlw_font_scale";
-const FONT_PRESETS = {
-  small: {
-    label: "较小",
-    vars: {
-      "--font-xs": "16rpx",
-      "--font-sm": "20rpx",
-      "--font-base": "24rpx",
-      "--font-md": "28rpx",
-      "--font-lg": "32rpx",
-      "--font-xl": "36rpx"
-    }
-  },
-  compact: {
-    label: "略小",
-    vars: {
-      "--font-xs": "18rpx",
-      "--font-sm": "22rpx",
-      "--font-base": "26rpx",
-      "--font-md": "30rpx",
-      "--font-lg": "34rpx",
-      "--font-xl": "38rpx"
-    }
-  },
-  normal: {
-    label: "标准",
-    vars: {
-      "--font-xs": "20rpx",
-      "--font-sm": "24rpx",
-      "--font-base": "28rpx",
-      "--font-md": "32rpx",
-      "--font-lg": "36rpx",
-      "--font-xl": "40rpx"
-    }
-  },
-  medium: {
-    label: "适中",
-    vars: {
-      "--font-xs": "22rpx",
-      "--font-sm": "28rpx",
-      "--font-base": "32rpx",
-      "--font-md": "36rpx",
-      "--font-lg": "42rpx",
-      "--font-xl": "46rpx"
-    }
-  },
-  large: {
-    label: "较大",
-    vars: {
-      "--font-xs": "24rpx",
-      "--font-sm": "30rpx",
-      "--font-base": "34rpx",
-      "--font-md": "40rpx",
-      "--font-lg": "46rpx",
-      "--font-xl": "52rpx"
-    }
-  },
-  xlarge: {
-    label: "超大",
-    vars: {
-      "--font-xs": "28rpx",
-      "--font-sm": "36rpx",
-      "--font-base": "42rpx",
-      "--font-md": "48rpx",
-      "--font-lg": "56rpx",
-      "--font-xl": "64rpx"
-    }
-  },
-  xxlarge: {
-    label: "特大",
-    vars: {
-      "--font-xs": "32rpx",
-      "--font-sm": "42rpx",
-      "--font-base": "48rpx",
-      "--font-md": "56rpx",
-      "--font-lg": "64rpx",
-      "--font-xl": "72rpx"
-    }
-  }
-};
-function getCurrentFontScale() {
-  try {
-    const v = uni.getStorageSync(FONT_SCALE_KEY);
-    if (v === "small" || v === "compact" || v === "medium" || v === "large" || v === "xlarge" || v === "xxlarge")
-      return v;
-  } catch {
-  }
-  return "normal";
-}
-function getCurrentFontVars() {
-  return FONT_PRESETS[getCurrentFontScale()].vars;
-}
-const THEME_COLOR_KEY = "hlw_theme_color";
-const THEME_SEMANTIC_COLORS = {
-  success: "#10b981",
-  warning: "#f59e0b",
-  error: "#ef4444",
-  info: "#64748b"
-};
-const DEFAULT_THEMES = [
-  { label: "翡翠绿", value: "#10b981" },
-  { label: "活力橙", value: "#f97316" },
-  { label: "默认蓝", value: "#3b82f6" },
-  { label: "玫瑰粉", value: "#f43f5e" },
-  { label: "紫罗兰", value: "#8b5cf6" },
-  { label: "青石灰", value: "#64748b" }
-];
-function getCurrentThemeColor() {
-  try {
-    const v = uni.getStorageSync(THEME_COLOR_KEY);
-    if (v && typeof v === "string")
-      return v;
-  } catch {
-  }
-  return DEFAULT_THEMES[0].value;
-}
-function getCurrentThemeVars() {
-  const color = getCurrentThemeColor();
-  return {
-    "--primary-color": color,
-    "--primary-light": hexToRgba(color, 0.12),
-    "--primary-dark": darkenHex(color),
-    "--primary-success": THEME_SEMANTIC_COLORS.success,
-    "--primary-success-light": hexToRgba(THEME_SEMANTIC_COLORS.success, 0.12),
-    "--primary-success-dark": darkenHex(THEME_SEMANTIC_COLORS.success),
-    "--primary-warning": THEME_SEMANTIC_COLORS.warning,
-    "--primary-warning-light": hexToRgba(THEME_SEMANTIC_COLORS.warning, 0.12),
-    "--primary-warning-dark": darkenHex(THEME_SEMANTIC_COLORS.warning),
-    "--primary-error": THEME_SEMANTIC_COLORS.error,
-    "--primary-error-light": hexToRgba(THEME_SEMANTIC_COLORS.error, 0.12),
-    "--primary-error-dark": darkenHex(THEME_SEMANTIC_COLORS.error),
-    "--primary-info": THEME_SEMANTIC_COLORS.info,
-    "--primary-info-light": hexToRgba(THEME_SEMANTIC_COLORS.info, 0.12),
-    "--primary-info-dark": darkenHex(THEME_SEMANTIC_COLORS.info),
-    "--success-color": THEME_SEMANTIC_COLORS.success,
-    "--success-light": hexToRgba(THEME_SEMANTIC_COLORS.success, 0.12),
-    "--success-dark": darkenHex(THEME_SEMANTIC_COLORS.success),
-    "--warning-color": THEME_SEMANTIC_COLORS.warning,
-    "--warning-light": hexToRgba(THEME_SEMANTIC_COLORS.warning, 0.12),
-    "--warning-dark": darkenHex(THEME_SEMANTIC_COLORS.warning),
-    "--error-color": THEME_SEMANTIC_COLORS.error,
-    "--error-light": hexToRgba(THEME_SEMANTIC_COLORS.error, 0.12),
-    "--error-dark": darkenHex(THEME_SEMANTIC_COLORS.error),
-    "--info-color": THEME_SEMANTIC_COLORS.info,
-    "--info-light": hexToRgba(THEME_SEMANTIC_COLORS.info, 0.12),
-    "--info-dark": darkenHex(THEME_SEMANTIC_COLORS.info)
-  };
-}
-const HEX_RE = /^#[0-9a-fA-F]{6}$/;
-function parseHex(hex) {
-  if (!HEX_RE.test(hex))
-    throw new Error(`Invalid hex color: ${hex}`);
-  return [
-    parseInt(hex.slice(1, 3), 16),
-    parseInt(hex.slice(3, 5), 16),
-    parseInt(hex.slice(5, 7), 16)
-  ];
-}
-function hexToRgba(hex, alpha) {
-  const [r, g, b] = parseHex(hex);
-  return `rgba(${r},${g},${b},${alpha})`;
-}
-function darkenHex(hex, amount = 0.15) {
-  const [r, g, b] = parseHex(hex);
-  const darken = (value) => Math.max(0, Math.round(value * (1 - amount)));
-  return `#${darken(r).toString(16).padStart(2, "0")}${darken(g).toString(16).padStart(2, "0")}${darken(b).toString(16).padStart(2, "0")}`;
-}
-const APPEARANCE_KEY = "hlw_appearance";
-const APPEARANCE_PRESETS = [
-  { value: "light", label: "浅色模式" },
-  { value: "dark", label: "深色模式" },
-  { value: "auto", label: "跟随系统" }
-];
-const LIGHT_VARS = {
-  "--bg-page": "#f6f6f6",
-  "--bg-elevated": "#ffffff",
-  "--surface-card": "#ffffff",
-  "--surface-card-muted": "#f8fafc",
-  "--surface-secondary": "#f1f5f9",
-  "--surface-tertiary": "#e2e8f0",
-  "--text-primary": "#0f172a",
-  "--text-secondary": "#334155",
-  "--text-muted": "#64748b",
-  "--text-subtle": "#94a3b8",
-  "--text-disabled": "#cbd5e1",
-  "--border-color": "#e2e8f0",
-  "--border-color-light": "#f1f5f9",
-  "--border-color-focus": "#bfdbfe",
-  "--shadow-soft": "0 2rpx 8rpx rgba(15, 23, 42, 0.04)",
-  "--shadow-card": "0 4rpx 16rpx rgba(15, 23, 42, 0.06)"
-};
-const DARK_VARS = {
-  "--bg-page": "#0b1020",
-  "--bg-elevated": "#111827",
-  "--surface-card": "#1e293b",
-  "--surface-card-muted": "#273549",
-  "--surface-secondary": "#273549",
-  "--surface-tertiary": "#334155",
-  "--text-primary": "#f8fafc",
-  "--text-secondary": "#cbd5e1",
-  "--text-muted": "#94a3b8",
-  "--text-subtle": "#64748b",
-  "--text-disabled": "#475569",
-  "--border-color": "#334155",
-  "--border-color-light": "#1e293b",
-  "--border-color-focus": "#3b82f6",
-  "--shadow-soft": "0 2rpx 8rpx rgba(0, 0, 0, 0.3)",
-  "--shadow-card": "0 4rpx 16rpx rgba(0, 0, 0, 0.35)"
-};
-const APPEARANCE_VAR_MAP = {
-  light: LIGHT_VARS,
-  dark: DARK_VARS
-};
-function getCurrentAppearance() {
-  try {
-    const v = uni.getStorageSync(APPEARANCE_KEY);
-    if (v === "light" || v === "dark" || v === "auto")
-      return v;
-  } catch {
-  }
-  return "auto";
-}
-function resolveAppearance(appearance) {
-  if (appearance === "light" || appearance === "dark")
-    return appearance;
-  try {
-    const info = uni.getSystemInfoSync();
-    if (info.theme === "dark")
-      return "dark";
-  } catch {
-  }
-  return "light";
-}
-function getCurrentAppearanceMode() {
-  return resolveAppearance(getCurrentAppearance());
-}
-function getCurrentAppearanceVars() {
-  return APPEARANCE_VAR_MAP[getCurrentAppearanceMode()];
-}
-const TYPOGRAPHY_ROLES = {
-  "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)"
-  }
-};
-function getCurrentTypographyVars() {
-  const vars = {};
-  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;
-}
-const THEME_CHANGE_EVENT = "hlw:theme-change";
-function buildThemeStyle() {
-  return varsToStyle({
-    ...getCurrentFontVars(),
-    ...getCurrentThemeVars()
-  });
-}
-function varsToStyle(vars) {
-  return Object.entries(vars).map(([key, value]) => `${key}:${value}`).join(";") + ";";
-}
-function useThemePageStyle() {
-  const store = useThemeStore();
-  const themePageStyle = computed(() => {
-    void store.scale;
-    void store.primaryColor;
-    return buildThemeStyle();
-  });
-  return { themePageStyle };
-}
 let _msg = null;
 let _utils = null;
 const hlw = {
@@ -1392,41 +1042,22 @@ const vCopy = {
   }
 };
 export {
-  APPEARANCE_KEY,
-  APPEARANCE_PRESETS,
-  APPEARANCE_VAR_MAP,
   BaseService,
-  DEFAULT_THEMES,
-  FONT_PRESETS,
-  FONT_SCALE_KEY,
+  PluginService,
   ServiceNamespace,
   ServicePrefix,
-  THEME_CHANGE_EVENT,
-  THEME_COLOR_KEY,
-  THEME_SEMANTIC_COLORS,
-  TYPOGRAPHY_ROLES,
   adapters,
   alistAdapter,
   auth,
-  buildThemeStyle,
   clearDeviceCache,
   copy,
   cosAdapter,
   download,
   getAdapter,
-  getCurrentAppearance,
-  getCurrentAppearanceMode,
-  getCurrentAppearanceVars,
-  getCurrentFontScale,
-  getCurrentFontVars,
-  getCurrentThemeColor,
-  getCurrentThemeVars,
-  getCurrentTypographyVars,
   hlw,
   ossAdapter,
   paste,
   qiniuAdapter,
-  resolveAppearance,
   saveImage,
   saveImageUrl,
   saveVideoFile,
@@ -1443,8 +1074,6 @@ export {
   useRefs,
   useRequest,
   useShare,
-  useThemePageStyle,
-  useThemeStore,
   useUpload,
   useUtils,
   vCopy,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "2.1.58",
+    "version": "2.1.60",
     "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/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>

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

@@ -0,0 +1,121 @@
+<template>
+    <view class="navbar">
+        <view :style="bar_style"></view>
+        <view class="header" :style="{ height: header_height + 'px' }">
+            <view @tap="tapBack" class="left" v-if="props.isBack">
+                <text class="i-fa6-solid-chevron-left icon-left"></text>
+            </view>
+            <text class="title">{{ title }}</text>
+        </view>
+        <view class="status-bar" v-if="theme != 'light-theme'">
+            <view class="within"></view>
+        </view>
+    </view>
+    <view :style="{ height: navbar_height + 'px' }"></view>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useTheme } from "@/core";
+const { theme } = useTheme();
+
+const statusBarHeight: number = uni.getSystemInfoSync()?.statusBarHeight || 0;
+const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+
+const props = defineProps({
+    isBar: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: "",
+    },
+    isBack: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const bar_style = computed(() => {
+    const style = {
+        height: statusBarHeight + "px",
+    };
+    return style;
+});
+let status_bar_height = 0;
+if (props.isBar) {
+    status_bar_height = 15;
+}
+
+const header_height = ref<number>(menuButtonInfo.bottom - statusBarHeight + 3);
+const navbar_height = ref(header_height.value + statusBarHeight);
+const status_bar_height_style = `${status_bar_height}px`;
+
+function tapBack() {
+    uni.navigateBack({
+        fail: (err) => {
+            uni.reLaunch({
+                url: "/pages/index/index",
+            });
+        },
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.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);
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        .left {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            left: 0rpx;
+            width: 100rpx;
+            height: 100%;
+
+            .icon-left {
+                color: var(--navbar-left-color);
+            }
+        }
+
+        .title {
+            font-size: var(--navbar-font-size);
+            color: var(--navbar-title-color);
+            letter-spacing: 3rpx;
+            font-weight: bold;
+        }
+    }
+
+    .status-bar {
+        background-color: var(--navbar-bg-color);
+        height: v-bind(status_bar_height_style);
+        width: 750rpx;
+        position: relative;
+
+        .within {
+            position: absolute;
+            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);
+        }
+    }
+}
+</style>