@hlw-uni/mp-vue 1.0.34 → 1.1.0

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

@@ -0,0 +1,104 @@
+<template>
+    <scroll-view class="hlw-tabs" :scroll-x="scrollable" :enhanced="true" :show-scrollbar="false">
+        <view class="hlw-tabs-wrap">
+            <view
+                v-for="(item, index) in items"
+                :key="index"
+                class="hlw-tab"
+                :class="{ 'hlw-tab--active': modelValue === index }"
+                @tap="onChange(index)"
+            >
+                <text class="hlw-tab-text">{{ typeof item === "string" ? item : item.label }}</text>
+                <view
+                    v-if="typeof item !== 'string' && item.badge"
+                    class="hlw-tab-badge"
+                >{{ item.badge }}</view>
+                <view v-if="modelValue === index" class="hlw-tab-line" :style="{ width: lineWidth }" />
+            </view>
+        </view>
+    </scroll-view>
+</template>
+
+<script setup lang="ts">
+export interface HlwTabItem {
+    label: string;
+    badge?: string;
+}
+
+interface Props {
+    modelValue?: number;
+    items?: (string | HlwTabItem)[];
+    scrollable?: boolean;
+    lineWidth?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+    modelValue: 0,
+    items: () => [],
+    scrollable: false,
+    lineWidth: "40rpx",
+});
+
+const emit = defineEmits<{ "update:modelValue": [index: number]; change: [index: number] }>();
+
+function onChange(index: number) {
+    emit("update:modelValue", index);
+    emit("change", index);
+}
+</script>
+
+<style lang="scss" scoped>
+.hlw-tabs {
+    background: #fff;
+    white-space: nowrap;
+}
+
+.hlw-tabs-wrap {
+    display: inline-flex;
+    min-width: 100%;
+}
+
+.hlw-tab {
+    position: relative;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24rpx 28rpx;
+    gap: 6rpx;
+    transition: color 0.2s;
+
+    &--active .hlw-tab-text {
+        color: var(--primary-color, #3b82f6);
+        font-weight: 600;
+    }
+}
+
+.hlw-tab-text {
+    font-size: var(--font-base, 28rpx);
+    color: #64748b;
+}
+
+.hlw-tab-badge {
+    padding: 0 8rpx;
+    min-width: 28rpx;
+    height: 28rpx;
+    line-height: 28rpx;
+    font-size: 18rpx;
+    text-align: center;
+    color: #fff;
+    background: #ef4444;
+    border-radius: 999rpx;
+}
+
+.hlw-tab-line {
+    position: absolute;
+    bottom: 4rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 6rpx;
+    border-radius: 6rpx;
+    background: var(--primary-color, #3b82f6);
+    transition: width 0.2s;
+}
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+    <view
+        class="hlw-tag"
+        :class="[`hlw-tag--${type}`, `hlw-tag--${size}`, { 'hlw-tag--plain': plain, 'hlw-tag--round': round }]"
+        :style="customStyle"
+        @tap="$emit('click')"
+    >
+        <slot />
+        <view v-if="closable" class="hlw-tag-close" @tap.stop="$emit('close')">&#215;</view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+    type?: "primary" | "success" | "warning" | "danger" | "info";
+    plain?: boolean;
+    closable?: boolean;
+    size?: "small" | "medium";
+    round?: boolean;
+    color?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: "primary",
+    plain: false,
+    closable: false,
+    size: "medium",
+    round: false,
+    color: "",
+});
+
+defineEmits<{ click: []; close: [] }>();
+
+const customStyle = computed(() => {
+    if (!props.color) return {};
+    return props.plain
+        ? { color: props.color, borderColor: props.color, background: "transparent" }
+        : { background: props.color, color: "#fff", borderColor: props.color };
+});
+</script>
+
+<style lang="scss" scoped>
+$colors: (
+    primary: var(--primary-color, #3b82f6),
+    success: #10b981,
+    warning: #f59e0b,
+    danger: #ef4444,
+    info: #64748b,
+);
+
+.hlw-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4rpx;
+    font-weight: 500;
+    border: 2rpx solid transparent;
+
+    &--medium { padding: 4rpx 16rpx; font-size: var(--font-xs, 20rpx); border-radius: var(--radius-sm, 8rpx); }
+    &--small { padding: 2rpx 10rpx; font-size: 18rpx; border-radius: 6rpx; }
+    &--round { border-radius: 999rpx; }
+
+    @each $name, $c in $colors {
+        &--#{$name} { background: #{$c}; color: #fff; border-color: #{$c}; }
+        &--#{$name}.hlw-tag--plain { background: transparent; color: #{$c}; }
+    }
+}
+
+.hlw-tag-close {
+    font-size: 1.2em;
+    line-height: 1;
+    margin-left: 2rpx;
+    opacity: 0.8;
+}
+</style>

package/src/composables/theme/font.ts

@@ -0,0 +1,51 @@
+export type FontScale = "small" | "normal" | "large" | "xlarge";
+
+export interface FontPreset {
+    label: string;
+    vars: Record<string, string>;
+}
+
+export const FONT_SCALE_KEY = "hlw_font_scale";
+
+export const FONT_PRESETS: Record<FontScale, FontPreset> = {
+    small: {
+        label: "小字体",
+        vars: {
+            "--font-xs": "16rpx", "--font-sm": "20rpx", "--font-base": "24rpx",
+            "--font-md": "28rpx", "--font-lg": "32rpx", "--font-xl": "36rpx",
+        },
+    },
+    normal: {
+        label: "标准",
+        vars: {
+            "--font-xs": "20rpx", "--font-sm": "24rpx", "--font-base": "28rpx",
+            "--font-md": "32rpx", "--font-lg": "36rpx", "--font-xl": "40rpx",
+        },
+    },
+    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",
+        },
+    },
+};
+
+export function getCurrentFontScale(): FontScale {
+    try {
+        const v = uni.getStorageSync(FONT_SCALE_KEY);
+        if (v === "small" || v === "large" || v === "xlarge") return v;
+    } catch {}
+    return "normal";
+}
+
+export function getCurrentFontVars(): Record<string, string> {
+    return FONT_PRESETS[getCurrentFontScale()].vars;
+}

package/src/composables/theme/index.ts

@@ -0,0 +1,33 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { useColor } from "@hlw-uni/mp-core";
+
+const { varsToStyle } = useColor();
+import { getCurrentFontVars } from "./font";
+import { getCurrentThemeVars } from "./palette";
+
+export const THEME_CHANGE_EVENT = "hlw:theme-change";
+
+export function buildThemeStyle(): string {
+    return varsToStyle({
+        ...getCurrentFontVars(),
+        ...getCurrentThemeVars(),
+    });
+}
+
+export function useThemePageStyle() {
+    const themePageStyle = ref(buildThemeStyle());
+
+    const onThemeChange = () => {
+        themePageStyle.value = buildThemeStyle();
+    };
+
+    onMounted(() => uni.$on(THEME_CHANGE_EVENT, onThemeChange));
+    onUnmounted(() => uni.$off(THEME_CHANGE_EVENT, onThemeChange));
+
+    return { themePageStyle };
+}
+
+export type { FontScale, FontPreset } from "./font";
+export { FONT_SCALE_KEY, FONT_PRESETS, getCurrentFontScale, getCurrentFontVars } from "./font";
+export type { ThemeColor } from "./palette";
+export { THEME_COLOR_KEY, DEFAULT_THEMES, getCurrentThemeColor, getCurrentThemeVars } from "./palette";

package/src/composables/theme/palette.ts

@@ -0,0 +1,36 @@
+import { useColor } from "@hlw-uni/mp-core";
+
+const { hexToRgba, darkenHex } = useColor();
+
+export interface ThemeColor {
+    label: string;
+    value: string;
+}
+
+export const THEME_COLOR_KEY = "hlw_theme_color";
+
+export const DEFAULT_THEMES: ThemeColor[] = [
+    { label: "默认蓝", value: "#3b82f6" },
+    { label: "活力橙", value: "#f97316" },
+    { label: "翡翠绿", value: "#10b981" },
+    { label: "玫瑰红", value: "#f43f5e" },
+    { label: "紫罗兰", value: "#8b5cf6" },
+    { label: "青石灰", value: "#64748b" },
+];
+
+export function getCurrentThemeColor(): string {
+    try {
+        const v = uni.getStorageSync(THEME_COLOR_KEY);
+        if (v && typeof v === "string") return v;
+    } catch {}
+    return DEFAULT_THEMES[0].value;
+}
+
+export function getCurrentThemeVars(): Record<string, string> {
+    const color = getCurrentThemeColor();
+    return {
+        "--primary-color": color,
+        "--primary-light": hexToRgba(color, 0.12),
+        "--primary-dark": darkenHex(color),
+    };
+}

package/src/index.ts

@@ -4,13 +4,24 @@
 
 export { default as HlwAd } from "./components/hlw-ad/index.vue";
 export { default as HlwAvatar } from "./components/hlw-avatar/index.vue";
+export { default as HlwButton } from "./components/hlw-button/index.vue";
 export { default as HlwCard } from "./components/hlw-card/index.vue";
+export { default as HlwCell } from "./components/hlw-cell/index.vue";
+export { default as HlwDivider } from "./components/hlw-divider/index.vue";
 export { default as HlwEmpty } from "./components/hlw-empty/index.vue";
 export { default as HlwHeader } from "./components/hlw-header/index.vue";
 export { default as HlwLoading } from "./components/hlw-loading/index.vue";
 export { default as HlwMenu } from "./components/hlw-menu/index.vue";
 export type { HlwMenuItem } from "./components/hlw-menu/types";
+export { default as HlwModal } from "./components/hlw-modal/index.vue";
+export { default as HlwNoticeBar } from "./components/hlw-notice-bar/index.vue";
 export { default as HlwPage } from "./components/hlw-page/index.vue";
+export { default as HlwPopup } from "./components/hlw-popup/index.vue";
+export { default as HlwSearch } from "./components/hlw-search/index.vue";
+export { default as HlwSkeleton } from "./components/hlw-skeleton/index.vue";
+export { default as HlwTabs } from "./components/hlw-tabs/index.vue";
+export { default as HlwTag } from "./components/hlw-tag/index.vue";
+export type { HlwTabItem } from "./components/hlw-tabs/index.vue";
 export type { FontScale, FontPreset, ThemeColor } from "./composables/theme";
 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/composables/theme.d.ts

@@ -1,22 +0,0 @@
-export type FontScale = "small" | "normal" | "large" | "xlarge";
-export interface FontPreset {
-    label: string;
-    vars: Record<string, string>;
-}
-export interface ThemeColor {
-    label: string;
-    value: string;
-}
-export declare const FONT_SCALE_KEY = "hlw_font_scale";
-export declare const THEME_COLOR_KEY = "hlw_theme_color";
-export declare const THEME_CHANGE_EVENT = "hlw:theme-change";
-export declare const FONT_PRESETS: Record<FontScale, FontPreset>;
-export declare function getCurrentFontScale(): FontScale;
-export declare function getCurrentFontVars(): Record<string, string>;
-export declare const DEFAULT_THEMES: ThemeColor[];
-export declare function getCurrentThemeColor(): string;
-export declare function getCurrentThemeVars(): Record<string, string>;
-export declare function buildThemeStyle(): string;
-export declare function useThemePageStyle(): {
-    themePageStyle: any;
-};

package/src/composables/theme.ts

@@ -1,142 +0,0 @@
-import { ref, onMounted, onUnmounted } from "vue";
-
-// ─── 工具函数 ───────────────────────────────────
-
-function varsToStyle(vars: Record<string, string>): string {
-    return Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";") + ";";
-}
-
-function hexToRgba(hex: string, alpha: number): string {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${alpha})`;
-}
-
-function darkenHex(hex: string, amount = 0.15): string {
-    const r = Math.max(0, Math.round(parseInt(hex.slice(1, 3), 16) * (1 - amount)));
-    const g = Math.max(0, Math.round(parseInt(hex.slice(3, 5), 16) * (1 - amount)));
-    const b = Math.max(0, Math.round(parseInt(hex.slice(5, 7), 16) * (1 - amount)));
-    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-}
-
-// ─── 类型 ──────────────────────────────────────
-
-export type FontScale = "small" | "normal" | "large" | "xlarge";
-
-export interface FontPreset {
-    label: string;
-    vars: Record<string, string>;
-}
-
-export interface ThemeColor {
-    label: string;
-    value: string;
-}
-
-// ─── 存储 Key ──────────────────────────────────
-
-export const FONT_SCALE_KEY = "hlw_font_scale";
-export const THEME_COLOR_KEY = "hlw_theme_color";
-
-// ─── 事件 ──────────────────────────────────────
-
-export const THEME_CHANGE_EVENT = "hlw:theme-change";
-
-// ─── 字体档位 ──────────────────────────────────
-
-export const FONT_PRESETS: Record<FontScale, FontPreset> = {
-    small: {
-        label: "小字体",
-        vars: {
-            "--font-xs": "16rpx", "--font-sm": "20rpx", "--font-base": "24rpx",
-            "--font-md": "28rpx", "--font-lg": "32rpx", "--font-xl": "36rpx",
-        },
-    },
-    normal: {
-        label: "标准",
-        vars: {
-            "--font-xs": "20rpx", "--font-sm": "24rpx", "--font-base": "28rpx",
-            "--font-md": "32rpx", "--font-lg": "36rpx", "--font-xl": "40rpx",
-        },
-    },
-    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",
-        },
-    },
-};
-
-export function getCurrentFontScale(): FontScale {
-    try {
-        const v = uni.getStorageSync(FONT_SCALE_KEY);
-        if (v === "small" || v === "large" || v === "xlarge") return v;
-    } catch {}
-    return "normal";
-}
-
-export function getCurrentFontVars(): Record<string, string> {
-    return FONT_PRESETS[getCurrentFontScale()].vars;
-}
-
-// ─── 主题色 ────────────────────────────────────
-
-export const DEFAULT_THEMES: ThemeColor[] = [
-    { label: "默认蓝", value: "#3b82f6" },
-    { label: "活力橙", value: "#f97316" },
-    { label: "翡翠绿", value: "#10b981" },
-    { label: "玫瑰红", value: "#f43f5e" },
-    { label: "紫罗兰", value: "#8b5cf6" },
-    { label: "青石灰", value: "#64748b" },
-];
-
-export function getCurrentThemeColor(): string {
-    try {
-        const v = uni.getStorageSync(THEME_COLOR_KEY);
-        if (v && typeof v === "string") return v;
-    } catch {}
-    return DEFAULT_THEMES[0].value;
-}
-
-export function getCurrentThemeVars(): Record<string, string> {
-    const color = getCurrentThemeColor();
-    return {
-        "--primary-color": color,
-        "--primary-light": hexToRgba(color, 0.12),
-        "--primary-dark": darkenHex(color),
-    };
-}
-
-// ─── 统一样式构建 ──────────────────────────────
-// 后续新增主题维度时，只需添加 getCurrentXxxVars() 并在此展开
-
-export function buildThemeStyle(): string {
-    return varsToStyle({
-        ...getCurrentFontVars(),
-        ...getCurrentThemeVars(),
-    });
-}
-
-// ─── 组合式函数 ────────────────────────────────
-
-export function useThemePageStyle() {
-    const themePageStyle = ref(buildThemeStyle());
-
-    const onThemeChange = () => {
-        themePageStyle.value = buildThemeStyle();
-    };
-
-    onMounted(() => uni.$on(THEME_CHANGE_EVENT, onThemeChange));
-    onUnmounted(() => uni.$off(THEME_CHANGE_EVENT, onThemeChange));
-
-    return { themePageStyle };
-}