bohui-vue 1.0.1

package/templates/vue-project/src/types/unocss.d.ts

@@ -0,0 +1,2 @@
+declare module "uno.css";
+declare module "@unocss/reset/tailwind.css";

package/templates/vue-project/src/types/vite-plugins.d.ts

@@ -0,0 +1,3 @@
+declare module "unplugin-auto-import/vite";
+declare module "unplugin-vue-components/vite";
+declare module "unplugin-vue-components/resolvers";

package/templates/vue-project/src/types/vue-router.d.ts

@@ -0,0 +1 @@
+declare module "vue-router";

package/templates/vue-project/src/types/window-config.d.ts

@@ -0,0 +1,12 @@
+declare interface ConfigInfo {
+    baseUrl: string;
+}
+
+declare global {
+    interface Window {
+        ConfigInfo: ConfigInfo;
+        DataConfig: any;
+    }
+}
+
+export {};

package/templates/vue-project/src/utils/com-methods.ts

@@ -0,0 +1,307 @@
+import { onBeforeUnmount, onMounted, ref, type Ref } from "vue";
+
+export type ResizeSize = { width: number; height: number };
+
+/**
+ * 监听 window resize，并更新一个响应式 size。
+ * - 若传入 targetRef，则优先使用容器 clientWidth/clientHeight；否则使用 window.innerWidth/innerHeight
+ * - 通过 setTimeout 延迟更新，避免频繁 resize 触发时抖动
+ */
+export type UseResizeTriggerOptions = {
+    targetRef?: Ref<HTMLElement | null>;
+    delay?: number;
+    immediate?: boolean;
+};
+export function useResizeTrigger(options: UseResizeTriggerOptions = {}) {
+    const { targetRef, delay = 300, immediate = false } = options;
+    const windowSize = ref<ResizeSize>({ width: 0, height: 0 });
+
+    const resizeHandler = () => {
+        const update = () => {
+            const el = targetRef?.value ?? null;
+            windowSize.value = {
+                width: el?.clientWidth ?? window.innerWidth,
+                height: el?.clientHeight ?? window.innerHeight,
+            };
+        };
+        if (delay > 0) {
+            setTimeout(update, delay);
+            return;
+        }
+        update();
+    };
+
+    onMounted(() => {
+        if (immediate) resizeHandler();
+        window.addEventListener("resize", resizeHandler);
+    });
+
+    onBeforeUnmount(() => {
+        window.removeEventListener("resize", resizeHandler);
+    });
+
+    return { windowSize, resizeHandler };
+}
+
+/**
+ * 规范化文本：非字符串返回空串；字符串会 trim 去除首尾空白。
+ */
+export function normalizeText(v: unknown) {
+    return typeof v === "string" ? v.trim() : "";
+}
+
+/**
+ * 解析颜色字符串：为空/非字符串时返回 fallback；否则返回 trim 后的颜色值。
+ */
+export function resolveColor(input: unknown, fallback: string) {
+    if (typeof input !== "string") return fallback;
+    const trimmed = input.trim();
+    return trimmed ? trimmed : fallback;
+}
+
+/**
+ * 将未知类型转换为数字：不可转换（NaN/Infinity）时返回 fallback。
+ */
+export function toNumber(v: unknown, fallback = 0) {
+    const n = typeof v === "number" ? v : Number(v);
+    return Number.isFinite(n) ? n : fallback;
+}
+
+/**
+ * 将数值限制在指定范围内。
+ */
+export function clamp(n: number, min: number, max: number) {
+    return Math.max(min, Math.min(max, n));
+}
+
+/**
+ * 将未知类型转换为数值并钳制到指定范围：不可转换（NaN/Infinity）时返回 min。
+ */
+export function clampNumber(v: unknown, min: number, max: number) {
+    const n = typeof v === "number" ? v : Number(v);
+    if (!Number.isFinite(n)) return min;
+    return Math.max(min, Math.min(max, n));
+}
+
+/**
+ * 向上取整到最近的倍数。
+ */
+export function roundUp(n: number, step: number) {
+    if (step <= 0) return n;
+    return Math.ceil(n / step) * step;
+}
+
+/**
+ * 将 {x,y,width,height} 转为矩形边界，并做边界保护（不会超出 maxWidth/maxHeight）。
+ */
+export type RectBox = { left: number; top: number; right: number; bottom: number };
+export function rectFromXYWH(
+    e: { x: number; y: number; width: number; height: number },
+    maxWidth: number,
+    maxHeight: number
+): RectBox {
+    const left = clamp(e.x, 0, maxWidth);
+    const top = clamp(e.y, 0, maxHeight);
+    const width = clamp(e.width, 1, maxWidth - left);
+    const height = clamp(e.height, 1, maxHeight - top);
+    return { left, top, right: left + width, bottom: top + height };
+}
+
+/**
+ * 同步 Canvas 像素尺寸（按容器尺寸 + DPR），并将 ctx 坐标系缩放到 CSS 像素单位。
+ * - DOM 看到的尺寸：canvas style width/height
+ * - 实际绘制的像素尺寸：canvas width/height（乘 dpr，避免高分屏模糊）
+ */
+export type SyncCanvasSizeResult = {
+    width: number;
+    height: number;
+    dpr: number;
+    ctx: CanvasRenderingContext2D | null;
+};
+export function syncCanvasSizeToElement(
+    containerEl: HTMLElement,
+    canvasEl: HTMLCanvasElement
+): SyncCanvasSizeResult {
+    const rect = containerEl.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const width = Math.max(1, Math.round(rect.width));
+    const height = Math.max(1, Math.round(rect.height));
+
+    canvasEl.width = Math.round(width * dpr);
+    canvasEl.height = Math.round(height * dpr);
+    canvasEl.style.width = `${width}px`;
+    canvasEl.style.height = `${height}px`;
+
+    const ctx = canvasEl.getContext("2d");
+    ctx?.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    return { width, height, dpr, ctx };
+}
+
+/**
+ * 监听元素尺寸变化并在变化时执行回调，返回清理函数。
+ * - 优先使用 ResizeObserver；不可用时回退到 window.resize
+ */
+export function observeElementResize(targetEl: Element, onResize: () => void) {
+    if (typeof ResizeObserver !== "undefined") {
+        const ro = new ResizeObserver(() => onResize());
+        ro.observe(targetEl);
+        return () => ro.disconnect();
+    }
+    if (typeof window === "undefined") return () => {};
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+}
+
+/**
+ * 包装标签文本：限制每行字符数与最大行数，超出部分以省略号结尾。
+ */
+export function wrapLabel(text: string, maxCharsPerLine: number, maxLines: number) {
+    const normalized = String(text ?? "");
+    if (!normalized) return "";
+
+    const chunks: string[] = [];
+    for (let i = 0; i < normalized.length; i += maxCharsPerLine) {
+        chunks.push(normalized.slice(i, i + maxCharsPerLine));
+    }
+
+    if (chunks.length <= maxLines) return chunks.join("\n");
+
+    const kept = chunks.slice(0, maxLines);
+    const lastIndex = kept.length - 1;
+    kept[lastIndex] = `${kept[lastIndex]}…`;
+    return kept.join("\n");
+}
+
+/**
+ * 截断字符串：最多显示 maxChars 个字符，超出部分用 ... 表示。
+ */
+export function truncateLabel(text: string, maxChars: number) {
+    const normalized = String(text ?? "");
+    if (normalized.length <= maxChars) return normalized;
+    return `${normalized.slice(0, Math.max(0, maxChars - 3))}...`;
+}
+
+/**
+ * 从对象上安全读取字符串属性；不存在或非字符串返回空串。
+ */
+export function getObjectString(obj: unknown, key: string) {
+    if (!obj || typeof obj !== "object") return "";
+    if (!(key in obj)) return "";
+    const v = (obj as Record<string, unknown>)[key];
+    return typeof v === "string" ? v : "";
+}
+
+/**
+ * 从对象上安全读取字符串/数字属性，并转换为字符串；不存在返回空串。
+ */
+export function getObjectStringOrNumber(obj: unknown, key: string) {
+    if (!obj || typeof obj !== "object") return "";
+    if (!(key in obj)) return "";
+    const v = (obj as Record<string, unknown>)[key];
+    return typeof v === "string" || typeof v === "number" ? String(v) : "";
+}
+
+/**
+ * 从对象上安全读取数值属性（支持 number 与可转数字的 string）；不可用时返回 0。
+ */
+export function getObjectNumber(obj: unknown, key: string) {
+    if (!obj || typeof obj !== "object") return 0;
+    if (!(key in obj)) return 0;
+    return toNumber((obj as Record<string, unknown>)[key]);
+}
+
+/**
+ * 将十六进制颜色字符串转换为 RGB 对象。
+ * 支持 #RGB 与 #RRGGBB。
+ */
+export function hexToRgb(hex: string): { r: number; g: number; b: number } {
+    const cleaned = String(hex ?? "")
+        .replace("#", "")
+        .trim();
+    const full =
+        cleaned.length === 3
+            ? cleaned
+                  .split("")
+                  .map((c) => c + c)
+                  .join("")
+            : cleaned;
+    const n = parseInt(full, 16);
+    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+
+/**
+ * 将 RGB 值转换为十六进制颜色字符串（#RRGGBB）。
+ */
+export function rgbToHex(r: number, g: number, b: number) {
+    const to = (n: number) =>
+        Math.max(0, Math.min(255, Math.round(n)))
+            .toString(16)
+            .padStart(2, "0");
+    return `#${to(r)}${to(g)}${to(b)}`;
+}
+
+/**
+ * 将十六进制颜色变暗（amount：0~1，越大越暗）。
+ */
+export function darkenHex(hex: string, amount: number) {
+    const { r, g, b } = hexToRgb(hex);
+    const k = Math.max(0, Math.min(1, 1 - amount));
+    return rgbToHex(r * k, g * k, b * k);
+}
+
+/**
+ * 将十六进制颜色转换为 rgba(alpha) 字符串。
+ * 支持 #RGB 与 #RRGGBB。
+ */
+export function hexToRgba(hex: string, alpha: number) {
+    const cleaned = String(hex ?? "")
+        .replace("#", "")
+        .trim();
+    const full =
+        cleaned.length === 3
+            ? cleaned
+                  .split("")
+                  .map((c) => c + c)
+                  .join("")
+            : cleaned;
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    const a = clampNumber(alpha, 0, 1);
+    return `rgba(${Number.isFinite(r) ? r : 0},${Number.isFinite(g) ? g : 0},${
+        Number.isFinite(b) ? b : 0
+    },${a})`;
+}
+
+/**
+ * 获取文本像素宽度。
+ * - estimate：按字符类型粗略估算（ASCII 0.6，其它 1）
+ * - canvas：使用 canvas.measureText 精确测量（无 document 或无法获取 ctx 时回退为估算）
+ */
+export type TextWidthStrategy = "estimate" | "canvas";
+let measureCanvas: HTMLCanvasElement | null = null;
+export function getTextWidth(
+    text: string,
+    fontSizePx: number,
+    strategy: TextWidthStrategy = "estimate"
+) {
+    const str = String(text ?? "");
+
+    if (strategy === "canvas") {
+        if (typeof document === "undefined") {
+            return str.length * fontSizePx;
+        }
+        measureCanvas ??= document.createElement("canvas");
+        const ctx = measureCanvas.getContext("2d");
+        if (!ctx) return str.length * fontSizePx;
+        ctx.font = `${fontSizePx}px sans-serif`;
+        return ctx.measureText(str).width;
+    }
+
+    let units = 0;
+    for (const ch of str) {
+        units += ch.charCodeAt(0) <= 0x007f ? 0.6 : 1;
+    }
+    return units * fontSizePx;
+}

package/templates/vue-project/src/utils/echarts.ts

@@ -0,0 +1,111 @@
+/**
+ * ECharts 按需引入配置
+ * 只引入项目中使用的图表类型，减小打包体积
+ */
+
+// 引入 echarts 核心模块
+import * as echarts from "echarts/core";
+
+// 引入图表类型
+import {
+    BarChart,
+    PictorialBarChart,
+    LineChart,
+    PieChart,
+    RadarChart,
+    MapChart,
+    ScatterChart,
+    CustomChart,
+} from "echarts/charts";
+
+// 引入组件
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+    DatasetComponent,
+    TransformComponent,
+    GeoComponent,
+    VisualMapComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    GraphicComponent,
+} from "echarts/components";
+
+// 引入渲染器（必须）
+import { LabelLayout, UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+
+// 注册必须的组件
+echarts.use([
+    // 图表类型
+    BarChart,
+    PictorialBarChart,
+    LineChart,
+    PieChart,
+    RadarChart,
+    MapChart,
+    ScatterChart,
+    CustomChart,
+
+    // 组件
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+    DatasetComponent,
+    TransformComponent,
+    GeoComponent,
+    VisualMapComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    GraphicComponent,
+
+    // 功能
+    LabelLayout,
+    UniversalTransition,
+
+    // 渲染器
+    CanvasRenderer,
+]);
+
+// 导出配置好的 echarts
+export { echarts };
+
+/**
+ * 使用说明：
+ *
+ * 如果需要添加新的图表类型，按照以下步骤：
+ *
+ * 1. 从 'echarts/charts' 引入对应的图表
+ *    例如：import { GaugeChart } from 'echarts/charts'
+ *
+ * 2. 在 echarts.use([...]) 中注册
+ *    例如：echarts.use([..., GaugeChart])
+ *
+ * 常用图表类型：
+ * - BarChart        柱状图/条形图
+ * - LineChart       折线图/面积图
+ * - PieChart        饼图/环形图
+ * - ScatterChart    散点图/气泡图
+ * - CustomChart     自定义图表
+ * - RadarChart      雷达图
+ * - MapChart        地图
+ * - TreeChart       树图
+ * - TreemapChart    矩形树图
+ * - GraphChart      关系图
+ * - GaugeChart      仪表盘
+ * - FunnelChart     漏斗图
+ * - ParallelChart   平行坐标系
+ * - SankeyChart     桑基图
+ * - BoxplotChart    箱线图
+ * - CandlestickChart K线图
+ * - EffectScatterChart 涟漪特效散点图
+ * - LinesChart      线图
+ * - HeatmapChart    热力图
+ * - PictorialBarChart 象形柱图
+ * - ThemeRiverChart 主题河流图
+ * - SunburstChart   旭日图
+ * - CustomChart     自定义图
+ */

package/templates/vue-project/src/utils/number.ts

@@ -0,0 +1,99 @@
+/**
+ * 数值单位转换工具函数
+ */
+
+export type NumberUnit = "个" | "百" | "千" | "万" | "十万" | "百万" | "千万" | "亿";
+
+export interface NumberUnitConversionResult {
+    value: number;
+    unit: NumberUnit;
+    displayText: string; // 格式化后的显示文本，如 "1.2万"
+}
+
+/**
+ * 将数值转换为带单位的显示格式
+ * @param value 原始数值
+ * @param minUnit 最小转换单位，小于此单位的值不进行转换（默认："个"）
+ * @param precision 小数位数（默认：1）
+ * @returns 转换后的数值、单位和显示文本
+ */
+export function convertNumberUnit(
+    value: number,
+    minUnit: NumberUnit = "万",
+    precision = 1
+): NumberUnitConversionResult {
+    if (value === 0) {
+        return {
+            value: 0,
+            unit: "个",
+            displayText: "0",
+        };
+    }
+
+    const absValue = Math.abs(value);
+    const sign = value < 0 ? "-" : "";
+
+    // 定义单位转换规则（去掉十万，仅保留：个 / 百 / 千 / 万 / 百万 / 千万 / 亿）
+    const unitRules: Array<{ threshold: number; unit: NumberUnit }> = [
+        { threshold: 100000000, unit: "亿" }, // >= 1亿
+        { threshold: 10000000, unit: "千万" }, // >= 1千万 且 < 1亿
+        { threshold: 1000000, unit: "百万" }, // >= 1百万 且 < 1千万
+        { threshold: 10000, unit: "万" }, // >= 1万 且 < 1百万
+        { threshold: 1000, unit: "千" }, // >= 1千 且 < 1万
+        { threshold: 100, unit: "百" }, // >= 1百 且 < 1千
+        { threshold: 0, unit: "个" }, // 个位
+    ];
+
+    // 确定最小转换单位的阈值
+    const minUnitThreshold = unitRules.find((rule) => rule.unit === minUnit)?.threshold ?? 0;
+
+    // 找到合适的转换单位
+    let selectedRule = unitRules.find(
+        (rule) => absValue >= rule.threshold && rule.threshold >= minUnitThreshold
+    );
+
+    // 如果没有找到合适的单位（值小于最小单位），使用"个"
+    if (!selectedRule) {
+        selectedRule = { threshold: 0, unit: "个" };
+    }
+
+    // 计算转换后的数值
+    let convertedValue = absValue;
+    if (selectedRule.threshold > 0) {
+        convertedValue = absValue / selectedRule.threshold;
+    }
+
+    // 格式化数值（保留指定位数的小数）
+    const multiplier = Math.pow(10, precision);
+    const roundedValue = Math.round(convertedValue * multiplier) / multiplier;
+
+    // 生成显示文本
+    let displayText = "";
+    if (selectedRule.unit === "个") {
+        displayText = `${sign}${Math.round(absValue)}`;
+    } else {
+        // 如果小数部分为0，显示整数
+        if (roundedValue % 1 === 0) {
+            displayText = `${sign}${Math.round(roundedValue)}${selectedRule.unit}`;
+        } else {
+            displayText = `${sign}${roundedValue.toFixed(precision)}${selectedRule.unit}`;
+        }
+    }
+
+    return {
+        value: sign === "-" ? -roundedValue : roundedValue,
+        unit: selectedRule.unit,
+        displayText,
+    };
+}
+
+/**
+ * 将数值拆分为单个数字数组（用于数字展示组件）
+ * @param value 数值
+ * @returns 数字数组，如 1234 => [1, 2, 3, 4]
+ */
+export function splitNumberToDigits(value: number): number[] {
+    return String(Math.abs(Math.round(value)))
+        .split("")
+        .map(Number);
+}

package/templates/vue-project/src/utils/rem.ts

@@ -0,0 +1,82 @@
+/*
+ * @Description: 小于等于1920分辨率下的响应式方案
+ * @Version: 1.0
+ * @Autor: zhaozhenzhuo
+ * @Date: 2025-10-21 16:53:30
+ * @LastEditors: zhaozhenzhuo
+ * @LastEditTime: 2025-10-21 16:53:30
+ */
+/* eslint-disable */
+(function (designWidth: number, maxWidth: number, minWidth: number) {
+    const doc = document;
+    const win = window;
+    const docEl = document.documentElement;
+    let tid: NodeJS.Timeout;
+    let rootItem: HTMLElement | HTMLStyleElement | null;
+    let rootStyle;
+
+    function refreshRem() {
+        let width = document.getElementById("app")?.getBoundingClientRect().width;
+        let rem;
+        if (!maxWidth) {
+            maxWidth = 1920;
+        }
+        if (!minWidth) {
+            minWidth = 1366;
+        }
+        if (width && width > maxWidth) {
+            if (width <= 2560) {
+                rem = 11;
+            } else {
+                rem = 12;
+            }
+        } else if (width && width < minWidth) {
+            rem = (minWidth * 11) / designWidth;
+        } else {
+            // 与淘宝做法不同，直接采用简单的rem换算方法1rem=10px
+            rem = ((width && width > 0 ? width : 1920) * 10) / designWidth;
+        }
+
+        // 兼容UC开始
+        rootStyle = `html{font-size:${rem}px !important}`;
+        rootItem = document.getElementById("rootsize") || document.createElement("style");
+        if (!document.getElementById("rootsize")) {
+            document.getElementsByTagName("head")[0].appendChild(rootItem);
+            rootItem.id = "rootsize";
+        }
+        if (rootItem && (rootItem as any).styleSheet) {
+            (rootItem as any).styleSheet.disabled ||
+                ((rootItem as any).styleSheet.cssText = rootStyle);
+        } else {
+            try {
+                rootItem.innerHTML = rootStyle;
+            } catch (f) {
+                rootItem.innerText = rootStyle;
+            }
+        }
+        // 兼容UC结束
+        docEl.style.fontSize = `${rem}px`;
+    }
+    refreshRem();
+
+    win.addEventListener(
+        "resize",
+        function () {
+            clearTimeout(tid); // 防止执行两次
+            tid = setTimeout(refreshRem, 300);
+        },
+        false
+    );
+
+    win.addEventListener(
+        "pageshow",
+        function (e) {
+            if (e.persisted) {
+                // 浏览器后退的时候重新计算
+                clearTimeout(tid);
+                tid = setTimeout(refreshRem, 300);
+            }
+        },
+        false
+    );
+})(1920, 1920, 1366);