@chenghongyu/xpt-file-viewer 1.1.0

package/src/utils/models/file.ts

@@ -0,0 +1,95 @@
+import { constant } from '~/constant/index.js'
+export const fileSizeFormat = (bytes: number): string => {
+	if (bytes === 0) return '-';
+	if (bytes === -1) return '未知';
+	const k = 1024;
+	const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
+}
+
+export const fileSizeFilter = (row: { type: string, size?: number }, column: any, bytes: number): string => {
+	if (row.type === "BACK") return '';
+	if (row.type === "ROOT") return '-';
+	if (row.type === "FOLDER" && !row.size) return '-';
+	if (bytes === 0) return '0 B';
+	if (bytes === -1) return '未知';
+	const k = 1024;
+	const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return fileSizeFormat(bytes);
+}
+
+export const getFileIconName = (file: { type: string, name: string }): string => {
+	let iconName: string;
+	if (file.type === 'BACK' || file.type === 'FOLDER' || file.type === 'ROOT') {
+		return file.type.toLowerCase();
+	} else {
+		const fileSuffix = getFileSuffix(file.name);
+		const fileType = getFileType(file.name);
+
+		if (constant.iconFileType.indexOf(fileSuffix) !== -1) {
+			iconName = fileSuffix;
+		} else if (fileType) {
+			iconName = fileType;
+		} else {
+			iconName = 'file';
+		}
+	}
+	return iconName;
+}
+
+export const getFileSuffix = (name: string): string => {
+	const lastIndex = name.lastIndexOf('.');
+	if (lastIndex === -1) {
+		return 'other';
+	}
+	return name.substring(lastIndex + 1).toLowerCase();
+}
+
+export const getFileName = (name: string): string => {
+	const lastIndex = name.lastIndexOf('/');
+	if (lastIndex === -1) {
+		return name;
+	}
+	return name.substring(lastIndex + 1);
+}
+
+export const getFileNameIgnoreExt = (name: string): string => {
+	const lastIndex = name.lastIndexOf('.');
+	if (lastIndex === -1) {
+		return '';
+	}
+	return name.substring(0, lastIndex);
+}
+
+export const getFileType = (name: string): string | undefined => {
+	let fileType: string | undefined;
+	for (const key in constant.fileTypeMap) {
+		const suffix = getFileSuffix(name);
+		if (constant.fileTypeMap[key].indexOf(suffix) !== -1) {
+			fileType = key;
+			break;
+		}
+	}
+	return fileType;
+}
+
+
+/**
+ * 将 File 对象转换为 Base64 字符串
+ * @param {File} file - 用户选择的文件对象
+ * @returns {Promise<string>} - 返回一个 Promise，成功时解析为 Base64 格式的 data URL
+ */
+export function fileToBase64(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.readAsDataURL(file);
+		reader.onload = () => {
+			resolve(reader.result);
+		};
+		reader.onerror = (error) => {
+			reject(error);
+		};
+	});
+}

package/src/utils/models/path.ts

@@ -0,0 +1,117 @@
+import { strIsEmpty } from "~/utils";
+
+export const concatPath = (...paths: (string | null | undefined)[]): string => {
+	let result: string | null = null;
+	for (let path of paths) {
+		if (!path) {
+			continue;
+		}
+		if (result === null) {
+			result = path;
+			continue;
+		}
+		result = result + '/' + path;
+	}
+	if (result === null) {
+		return '';
+	}
+	return removeDuplicateSeparator(result);
+}
+
+export const concatPathAndEncodeAll = (...paths: (string | null | undefined)[]): string => {
+	return encodeAllIgnoreSlashes(concatPath(...paths));
+}
+
+export const removeDuplicateSeparator = (path: string): string => {
+	let result = '';
+
+	if (path.indexOf("http://") === 0) {
+		result = "http://";
+	} else if (path.indexOf("https://") === 0) {
+		result = "https://";
+	}
+
+	for (let i = result.length; i < path.length - 1; i++) {
+		let current = path.charAt(i);
+		let next = path.charAt(i + 1);
+		if (!(current === '/' && next === '/')) {
+			result += current;
+		}
+	}
+	result += path.charAt(path.length - 1);
+	return result;
+}
+
+export const encodeAllIgnoreSlashes = (str: string): string => {
+	if (strIsEmpty(str)) {
+		return '';
+	}
+
+	let result = '';
+	let prevIndex = -1;
+
+	for (let i = 0; i < str.length; i++) {
+		const c = str.charAt(i);
+		if (c === '/') {
+			if (prevIndex < i) {
+				let subStr = str.substring(prevIndex + 1, i);
+				result += encodeURIComponent(subStr);
+				prevIndex = i;
+			}
+			result += c;
+		}
+
+		if (i === str.length - 1 && prevIndex < i) {
+			let subStr = str.substring(prevIndex + 1, i + 1);
+			result += encodeURIComponent(subStr);
+		}
+	}
+	return result;
+}
+
+export function buildKkFileViewUrl(file: any, kkFileViewUrl: string) {
+	const originalFileName = file.name;
+	const fileUrl = file.url;
+
+	if (!kkFileViewUrl || !fileUrl || !originalFileName) {
+		console.error("构建 kkFileView URL 失败：缺少必要参数。");
+		return null;
+	}
+
+	// 1. 构造安全文件名
+	const lastDotIndex = originalFileName.lastIndexOf('.');
+	const extension = (lastDotIndex !== -1) ? originalFileName.substring(lastDotIndex) : '';
+	let safeBaseName;
+	if (typeof window.crypto?.randomUUID === 'function') {
+		safeBaseName = window.crypto.randomUUID();
+	} else {
+		safeBaseName = Date.now().toString(36) + Math.random().toString(36).substring(2);
+	}
+	const safeFileName = `${safeBaseName}${extension}`;
+
+	// 2. 拼接 fullfilename 参数
+	const separator = fileUrl.includes('?') ? '&' : '?';
+	const urlToEncode = `${fileUrl}${separator}fullfilename=${safeFileName}`;
+
+	// 3. Base64 编码
+	const encoder = new TextEncoder();
+	const utf8Bytes = encoder.encode(urlToEncode);
+	const byteString = String.fromCharCode(...utf8Bytes);
+	const base64Url = btoa(byteString);
+
+	// 4. URL 编码
+	const finalEncodedUrl = encodeURIComponent(base64Url);
+
+	// 5. 返回最终 URL
+	return `${kkFileViewUrl}/onlinePreview?url=${finalEncodedUrl}`;
+}
+
+// 构建分享基础路径 /share/{shareKey}
+export const buildShareBasePath = (shareKey: string): string => {
+  if (!shareKey) return '/share';
+  try {
+    return `/share/${encodeURIComponent(shareKey)}`;
+  } catch (e) {
+    return `/share/${shareKey}`;
+  }
+}

package/src/utils/models/qrcode.ts

@@ -0,0 +1,21 @@
+import { encodeData } from 'beautify-qrcode';
+
+export const generateQRCode = (options: Object, rendererFunc: Function) => {
+  const qrcode = encodeData(options);
+  return svgToDataUri(rendererFunc(qrcode));
+}
+
+const svgToDataUri = (svgText: string) => {
+  let xmlElement = document.createElement("xml")
+  xmlElement.innerHTML = svgText;
+
+  // 增加 svg 底色, 防止复制后是透明.
+  let rectElement = document.createElement("rect")
+  rectElement.setAttribute('width', '100%');
+  rectElement.setAttribute('height', '100%');
+  rectElement.style.fill = '#ffffff';
+
+  xmlElement.children[0].prepend(rectElement);
+
+  return 'data:image/svg+xml;utf8,' + encodeURIComponent(xmlElement.innerHTML);
+}

package/src/utils/models/time.ts

@@ -0,0 +1,132 @@
+import { reactive } from "vue";
+
+type TimeUnit = 's' | 'm' | 'h' | 'd' | 'w' | 'M' | 'y' | 'forever';
+
+interface TimeItem {
+	value: number;
+	unit: TimeUnit;
+}
+
+export const getUnitMax = (unit: TimeUnit): number => {
+	switch (unit) {
+		case 's':
+			return 59;
+		case 'm':
+			return 59;
+		case 'h':
+			return 23;
+		case 'd':
+			return 31;
+		case 'w':
+			return 52;
+		case 'M':
+			return 12;
+		case 'y':
+			return 100;
+		case 'forever':
+			return 99999999;
+		default:
+			return 0;
+	}
+}
+
+export const generateSeconds = (item: TimeItem): number => {
+	if (!item) return 0;
+	if (!item.value) return 0;
+	if (!item.unit) return 0;
+	if (item.unit === 'forever') return -1;
+	const value = parseInt(item.value.toString());
+	switch (item.unit) {
+		case "s":
+			return value;
+		case "m":
+			return value * 60;
+		case "h":
+			return value * 60 * 60;
+		case "d":
+			return value * 60 * 60 * 24;
+		case "w":
+			return value * 60 * 60 * 24 * 7;
+		case "M":
+			return value * 60 * 60 * 24 * 30;
+		case "y":
+			return value * 60 * 60 * 24 * 365;
+		default:
+			return 0;
+	}
+}
+
+interface Shortcut {
+	text: string;
+	value: () => [Date, Date];
+}
+
+export const shortcuts: Shortcut[] = [
+	{
+		text: '前一周',
+		value: () => {
+			const end = new Date();
+			const start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+			return [start, end];
+		},
+	},
+	{
+		text: '前一月',
+		value: () => {
+			const end = new Date();
+			const start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+			return [start, end];
+		},
+	},
+	{
+		text: '前三月',
+		value: () => {
+			const end = new Date();
+			const start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+			return [start, end];
+		},
+	},
+	{
+		text: '前六月',
+		value: () => {
+			const end = new Date();
+			const start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
+			return [start, end];
+		},
+	},
+	{
+		text: '前一年',
+		value: () => {
+			const end = new Date();
+			const start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
+			return [start, end];
+		},
+	},
+];
+
+const pad2 = (n: number) => (n < 10 ? '0' + n : '' + n);
+
+export const formatLocalDateTime = (date: Date) => {
+	if (!date) return null;
+	const d = new Date(date);
+	const yyyy = d.getFullYear();
+	const MM = pad2(d.getMonth() + 1);
+	const dd = pad2(d.getDate());
+	const HH = pad2(d.getHours());
+	const mm = pad2(d.getMinutes());
+	const ss = pad2(d.getSeconds());
+	return `${yyyy}-${MM}-${dd} ${HH}:${mm}:${ss}`;
+};
+
+// 禁用过去的日期
+export const disablePastDates = (time: Date) => {
+	return time.getTime() < Date.now();
+};
+
+export const defaultTime = reactive([new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]);
+export const dateValueFormat = 'YYYY-MM-DD HH:mm:ss';

package/src/utils/models/util.ts

@@ -0,0 +1,42 @@
+export const openPage = (url: string) => {
+    window.open(url);
+}
+
+type EllipsisPosition = "start" | "middle" | "end";
+
+export const formatEllipsis = (
+    value: string,
+    maxLength: number,
+    position: EllipsisPosition = "end"
+) => {
+    if (typeof value !== "string") {
+        value = value == null ? "" : String(value);
+    }
+
+    const input = value;
+    if (maxLength <= 0) {
+        return "";
+    }
+    if (input.length <= maxLength) {
+        return input;
+    }
+
+    if (maxLength === 1) {
+        return "…";
+    }
+
+    const visibleCount = maxLength - 1;
+
+    if (position === "start") {
+        return `…${input.slice(-visibleCount)}`;
+    }
+
+    if (position === "middle") {
+        const prefixLength = Math.ceil(visibleCount / 2);
+        const suffixLength = Math.floor(visibleCount / 2);
+        const suffix = suffixLength > 0 ? input.slice(-suffixLength) : "";
+        return `${input.slice(0, prefixLength)}…${suffix}`;
+    }
+
+    return `${input.slice(0, visibleCount)}…`;
+}

package/src/utils/models/window.ts

@@ -0,0 +1,14 @@
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+// 当前页面宽高
+export const { width: currentPageWidth, height: currentPageHeight } = useWindowSize()
+
+// 是否为移动端
+export const isMobile = computed(() => {
+  return currentPageWidth.value < 768;
+});
+
+// 是否为非移动端
+export const isNotMobile = computed(() => {
+  return currentPageWidth.value >= 768;
+});