bohui-vue 1.0.1

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

@@ -0,0 +1,103 @@
+/**
+ * 响应式单位转换工具函数
+ * 用于将设计稿的 px 值转换为基于当前窗口大小的实际像素值
+ * 设计稿基于 1080P 分辨率（1920x1080）
+ */
+
+// 设计稿尺寸
+const DESIGN_WIDTH = 1920;
+const DESIGN_HEIGHT = 1080;
+
+/**
+ * 响应式单位类型
+ */
+export type ResponsiveUnit = "vw" | "vh";
+
+/**
+ * 将设计稿的 px 值转换为响应式的实际像素值（基于 vw）
+ * @param px 设计稿中的像素值
+ * @returns 转换后的实际像素值
+ * @example
+ * // 设计稿中 50px，转换为响应式像素值
+ * const fontSize = getResponsivePx(50, 'vw');
+ */
+export function getResponsivePx(px: number, unit: ResponsiveUnit = "vw"): number {
+    if (typeof window === "undefined") {
+        // SSR 环境，返回原始值
+        return px;
+    }
+
+    if (unit === "vw") {
+        if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
+            return px * 1.1;
+        } else if (window.innerWidth > 2560) {
+            return px * 1.2;
+        }
+
+        // 基于设计稿宽度 1920px
+        return (px / DESIGN_WIDTH) * window.innerWidth;
+    } else {
+        // 基于设计稿高度 1080px
+        return (px / DESIGN_HEIGHT) * window.innerHeight;
+    }
+}
+
+/**
+ * 批量转换多个 px 值
+ * @param values 需要转换的像素值对象
+ * @param unit 响应式单位类型（默认 'vw'）
+ * @returns 转换后的像素值对象
+ * @example
+ * const sizes = getResponsivePxBatch({
+ *   fontSize: 12,
+ *   lineHeight: 15,
+ *   padding: 20
+ * }, 'vw');
+ */
+export function getResponsivePxBatch<T extends Record<string, number>>(
+    values: T,
+    unit: ResponsiveUnit = "vw"
+): { [K in keyof T]: number } {
+    const result = {} as { [K in keyof T]: number };
+    (Object.keys(values) as Array<keyof T>).forEach((key) => {
+        const value = values[key];
+        result[key] = getResponsivePx(value, unit);
+    });
+    return result;
+}
+
+/**
+ * 获取当前窗口尺寸
+ * @returns 窗口宽度和高度
+ */
+export function getWindowSize(): { width: number; height: number } {
+    if (typeof window === "undefined") {
+        return { width: DESIGN_WIDTH, height: DESIGN_HEIGHT };
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+}
+
+/**
+ * 响应式字体大小计算（专门用于字体大小，通常使用 vw）
+ * @param fontSize 设计稿中的字体大小（px）
+ * @returns 转换后的字体大小（px）
+ * @example
+ * const fontSize = getResponsiveFontSize(12); // 基于 vw 计算
+ */
+export function getResponsiveFontSize(fontSize: number): number {
+    return getResponsivePx(fontSize, "vw");
+}
+
+/**
+ * 响应式行高计算（通常使用 vh）
+ * @param lineHeight 设计稿中的行高（px）
+ * @returns 转换后的行高（px）
+ * @example
+ * const lineHeight = getResponsiveLineHeight(15); // 基于 vh 计算
+ */
+export function getResponsiveLineHeight(lineHeight: number): number {
+    return getResponsivePx(lineHeight, "vh");
+}

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

@@ -0,0 +1,314 @@
+import moment from "moment";
+
+/**
+ * 时间工具函数集合
+ *
+ * 使用示例：
+ *
+ * // 基础时间格式化
+ * formatTime(1640995200000) // "2022-01-01 08:00:00"
+ * formatTime(new Date()) // "2024-01-15 14:30:25"
+ * formatTime('2022-01-01') // "2022-01-01 00:00:00"
+ *
+ * // 自定义格式
+ * formatTime(1640995200000, 'YYYY/MM/DD') // "2022/01/01"
+ * formatTime(1640995200000, 'MM-DD HH:mm') // "01-01 08:00"
+ *
+ * // 其他格式化函数
+ * formatDate(1640995200000) // "2022-01-01"
+ * formatTimeOnly(1640995200000) // "08:00:00"
+ * formatDateTime(1640995200000) // "01-01 08:00"
+ * formatTimeCN(1640995200000) // "2022年01月01日 08:00:00"
+ *
+ * // 相对时间和判断
+ * getRelativeTime(Date.now() - 3600000) // "1小时前"
+ * isToday(new Date()) // true
+ * isThisWeek(Date.now() - 86400000) // true
+ *
+ * // 时长计算
+ * getDuration('2022-01-01 08:00:00', '2022-01-01 10:30:00') // 150 (分钟)
+ * formatDuration('2022-01-01 08:00:00', '2022-01-01 10:30:00') // "2小时30分钟"
+ *
+ * // 时间单位转换
+ * convertTimeUnit(90, "分钟") // { firstValue: 1, secondValue: 30, firstUnit: "小时", secondUnit: "分钟" }
+ * convertTimeUnit(25, "小时") // { firstValue: 1, secondValue: 1, firstUnit: "天", secondUnit: "小时" }
+ * convertTimeUnit(2, "年") // { firstValue: 2, secondValue: 0, firstUnit: "年", secondUnit: "月" }
+ * convertTimeUnit(45, "天") // { firstValue: 1, secondValue: 15, firstUnit: "月", secondUnit: "天" }
+ *
+ * // 秒转换为时间单位
+ * formatSeconds(12345) // "15:00"
+ */
+
+export interface TimeUnitConversionResult {
+    firstValue: number;
+    secondValue: number;
+    firstUnit: string;
+    secondUnit: string;
+}
+
+/**
+ * 将时间长度值转换为两个时间单位显示
+ * @param value 时间长度数值
+ * @param unit 时间单位（分钟、小时、天、月、年）
+ * @returns 转换后的两个时间单位及对应数值
+ */
+export function convertTimeUnit(value: number, unit: string): TimeUnitConversionResult {
+    let totalMinutes = 0;
+
+    // 统一转换为分钟
+    switch (unit) {
+        case "分钟":
+        case "分":
+            totalMinutes = value;
+            break;
+        case "小时":
+        case "时":
+            totalMinutes = value * 60;
+            break;
+        case "天":
+        case "日":
+            totalMinutes = value * 24 * 60;
+            break;
+        case "月":
+            totalMinutes = value * 30 * 24 * 60;
+            break;
+        case "年":
+            totalMinutes = value * 365 * 24 * 60;
+            break;
+        default:
+            totalMinutes = value;
+    }
+
+    // 转换为两个时间单位
+    let firstValue = 0;
+    let secondValue = 0;
+    let firstUnit = "";
+    let secondUnit = "";
+
+    if (totalMinutes >= 365 * 24 * 60) {
+        // 年 + 月
+        firstValue = Math.floor(totalMinutes / (365 * 24 * 60));
+        secondValue = Math.floor((totalMinutes % (365 * 24 * 60)) / (30 * 24 * 60));
+        firstUnit = "年";
+        secondUnit = "月";
+    } else if (totalMinutes >= 30 * 24 * 60) {
+        // 月 + 天
+        firstValue = Math.floor(totalMinutes / (30 * 24 * 60));
+        secondValue = Math.floor((totalMinutes % (30 * 24 * 60)) / (24 * 60));
+        firstUnit = "月";
+        secondUnit = "天";
+    } else if (totalMinutes >= 1000 * 60) {
+        // 天 + 小时（小时数达到四位数时转换为天）
+        firstValue = Math.floor(totalMinutes / (24 * 60));
+        secondValue = Math.floor((totalMinutes % (24 * 60)) / 60);
+        firstUnit = "天";
+        secondUnit = "小时";
+    } else if (totalMinutes >= 60) {
+        // 小时 + 分钟（小时数可能达到四位数）
+        firstValue = Math.floor(totalMinutes / 60);
+        secondValue = totalMinutes % 60;
+        firstUnit = "小时";
+        secondUnit = "分钟";
+    } else {
+        // 分钟 + 秒（如果小于1分钟，显示0小时X分钟）
+        firstValue = 0;
+        secondValue = totalMinutes;
+        firstUnit = "小时";
+        secondUnit = "分钟";
+    }
+
+    return {
+        firstValue,
+        secondValue,
+        firstUnit,
+        secondUnit,
+    };
+}
+
+/**
+ * 将时间数值拆分为单个数字数组（用于数字展示组件）
+ * @param value 时间数值
+ * @returns 数字数组，如 1234 => [1, 2, 3, 4]
+ */
+export function splitTimeValueToDigits(value: number): number[] {
+    return String(Math.abs(Math.round(value)))
+        .split("")
+        .map(Number);
+}
+
+/**
+ * 格式化时间戳为标准日期时间格式
+ * @param timestamp 时间戳（毫秒）或日期字符串
+ * @param format 格式化模板，默认为 'YYYY-MM-DD HH:mm:ss'
+ * @returns 格式化后的时间字符串
+ */
+export const formatTime = (
+    timestamp: string | number | Date,
+    format = "YYYY-MM-DD HH:mm:ss"
+): string => {
+    if (!timestamp) return "-";
+    return moment(timestamp).format(format);
+};
+
+/**
+ * 格式化时间戳为日期格式（年-月-日）
+ * @param timestamp 时间戳（毫秒）或日期字符串
+ * @returns 格式化后的日期字符串
+ */
+export const formatDate = (timestamp: string | number | Date): string => {
+    return formatTime(timestamp, "YYYY-MM-DD");
+};
+
+/**
+ * 格式化时间戳为时间格式（时:分:秒）
+ * @param timestamp 时间戳（毫秒）或日期字符串
+ * @returns 格式化后的时间字符串
+ */
+export const formatTimeOnly = (timestamp: string | number | Date): string => {
+    return formatTime(timestamp, "HH:mm:ss");
+};
+
+/**
+ * 格式化时间戳为短日期时间格式
+ * @param timestamp 时间戳（毫秒）或日期字符串
+ * @returns 格式化后的时间字符串
+ */
+export const formatDateTime = (timestamp: string | number | Date): string => {
+    return formatTime(timestamp, "MM-DD HH:mm");
+};
+
+/**
+ * 格式化时间戳为中文日期时间格式
+ * @param timestamp 时间戳（毫秒）或日期字符串
+ * @returns 格式化后的时间字符串
+ */
+export const formatTimeCN = (timestamp: string | number | Date): string => {
+    return formatTime(timestamp, "YYYY年MM月DD日 HH:mm:ss");
+};
+
+/**
+ * 获取相对时间（如：1小时前、3天前等）
+ * @param timestamp 时间戳（毫秒）或日期字符串
+ * @returns 相对时间字符串
+ */
+export const getRelativeTime = (timestamp: string | number | Date): string => {
+    if (!timestamp) return "-";
+    return moment(timestamp).fromNow();
+};
+
+/**
+ * 判断是否是今天
+ * @param timestamp 时间戳（毫秒）或日期字符串
+ * @returns 是否是今天
+ */
+export const isToday = (timestamp: string | number | Date): boolean => {
+    if (!timestamp) return false;
+    return moment(timestamp).isSame(moment(), "day");
+};
+
+/**
+ * 判断是否是本周
+ * @param timestamp 时间戳（毫秒）或日期字符串
+ * @returns 是否是本周
+ */
+export const isThisWeek = (timestamp: string | number | Date): boolean => {
+    if (!timestamp) return false;
+    return moment(timestamp).isSame(moment(), "week");
+};
+
+/**
+ * 获取两个时间之间的时长
+ * @param startTime 开始时间
+ * @param endTime 结束时间
+ * @param unit 单位（'days', 'hours', 'minutes', 'seconds'）
+ * @returns 时长数值
+ */
+export const getDuration = (
+    startTime: string | number | Date,
+    endTime: string | number | Date,
+    unit: "days" | "hours" | "minutes" | "seconds" = "minutes"
+): number => {
+    if (!startTime || !endTime) return 0;
+    const start = moment(startTime);
+    const end = moment(endTime);
+    return end.diff(start, unit);
+};
+
+/**
+ * 格式化时长为可读格式
+ * @param startTime 开始时间
+ * @param endTime 结束时间
+ * @returns 格式化的时长字符串（如：2小时30分钟）
+ */
+export const formatDuration = (
+    startTime: string | number | Date,
+    endTime: string | number | Date
+): string => {
+    if (!startTime || !endTime) return "-";
+
+    const start = moment(startTime);
+    const end = moment(endTime);
+    const duration = moment.duration(end.diff(start));
+
+    const days = Math.floor(duration.asDays());
+    const hours = duration.hours();
+    const minutes = duration.minutes();
+    const seconds = duration.seconds();
+
+    let result = "";
+    if (days > 0) result += `${days}天`;
+    if (hours > 0) result += `${hours}小时`;
+    if (minutes > 0) result += `${minutes}分钟`;
+    if (seconds > 0) result += `${seconds}秒`;
+
+    return result || "0秒";
+};
+
+/**
+ * 秒转转化为 *天*小时*分钟*秒
+ * @param seconds 秒数
+ * @returns 格式化的时长字符串
+ */
+export const formatSecToStr = (seconds: number): string => {
+    const daySec = 24 * 60 * 60;
+    const hourSec = 60 * 60;
+    const minuteSec = 60;
+    const dd = Math.floor(seconds / daySec);
+    const hh = Math.floor((seconds % daySec) / hourSec);
+    const mm = Math.floor((seconds % hourSec) / minuteSec);
+    const ss = seconds % minuteSec;
+    if (dd > 0) {
+        return `${dd}天${hh}小时${mm}分钟${ss}秒`;
+    }
+    if (hh > 0) {
+        return `${hh}小时${mm}分钟`;
+    }
+    if (mm > 0) {
+        return `${mm}分钟${ss}秒`;
+    }
+    return `${ss}秒`;
+};
+
+/**
+ * 秒转时分秒
+ * @param value 秒数
+ * @returns 时分秒格式字符串（HH:mm:ss）
+ */
+export const formatSeconds = (value: number): string => {
+    let secondTime = value; // 秒
+    let minuteTime = 0; // 分
+    let hourTime = 0; // 小时
+    if (secondTime >= 60) {
+        minuteTime = Math.floor(secondTime / 60);
+        secondTime = secondTime % 60;
+        if (minuteTime >= 60) {
+            hourTime = Math.floor(minuteTime / 60);
+            minuteTime = minuteTime % 60;
+        }
+    }
+    let result = `${secondTime < 10 ? `0${Math.floor(secondTime)}` : Math.floor(secondTime)}`;
+
+    result = `${minuteTime < 10 ? `0${minuteTime}` : minuteTime}:${result}`;
+    result = `${hourTime < 10 ? `0${hourTime}` : hourTime}:${result}`;
+    return result;
+};