From d885beb56d743d36676de003502a14708481894c Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Fri, 11 Jul 2025 20:07:37 +0800
Subject: [PATCH] support preview img,audio,video for FileDetail.vue

---
 src/api/RepositoryAPI.ts            |  19 +-
 src/components/FileViewer.vue       | 362 ++++++++++++++++++++++++++++
 src/types/Repository.ts             |  29 ++-
 src/views/repository/FileDetail.vue | 241 ++----------------
 4 files changed, 427 insertions(+), 224 deletions(-)
 create mode 100644 src/components/FileViewer.vue

diff --git a/src/api/RepositoryAPI.ts b/src/api/RepositoryAPI.ts
index 5994651..65ea7de 100644
--- a/src/api/RepositoryAPI.ts
+++ b/src/api/RepositoryAPI.ts
@@ -21,14 +21,26 @@ async function listFile(name: string, branch: string, path: string): Promise<Fil
 	return axios.get(`${BASE_URI}/${name}:${branch}/file/list${path}`);
 }
 
-async function fileRaw(name: string, branch: string, path: string): Promise<ArrayBuffer> {
+function fileRawURL(name: string, branch: string, path: string): string {
+	return `${API_HOST}${BASE_URI}/${name}:${branch}/file/raw${path}`;
+}
+
+async function fileRawByURL(rawURL: string): Promise<ArrayBuffer> {
 	return axios({
-		url: `${BASE_URI}/${name}:${branch}/file/raw${path}`,
+		url: rawURL,
 		method: "GET",
 		responseType: "arraybuffer"
 	});
 }
 
+async function fileRaw(name: string, branch: string, path: string): Promise<ArrayBuffer> {
+	return fileRawByURL(fileRawURL(name, branch, path));
+}
+
+async function fileMimeType(name: string, branch: string, path: string): Promise<string> {
+	return axios.get(`${BASE_URI}/${name}:${branch}/file/mime${path}`);
+}
+
 function downloadArchive(name: string, branch: string) {
 	window.open(`${API_HOST}${BASE_URI}/${name}:${branch}/archive`);
 }
@@ -43,6 +55,9 @@ export default {
 	pagePush,
 	listFile,
 	fileRaw,
+	fileRawURL,
+	fileRawByURL,
+	fileMimeType,
 	downloadArchive,
 	pageLog
 };
diff --git a/src/components/FileViewer.vue b/src/components/FileViewer.vue
new file mode 100644
index 0000000..ef1746e
--- /dev/null
+++ b/src/components/FileViewer.vue
@@ -0,0 +1,362 @@
+<template>
+	<div class="file-viewer diselect">
+		<t-tabs
+			class="tabs"
+			theme="card"
+			v-model="filePath"
+			:onRemove="onTabRemove"
+		>
+			<t-tab-panel
+				v-for="file in files"
+				:key="file.path"
+				:value="file.path"
+				:label="file.name"
+				:removable="file.removable"
+				@click="file.isPreview = false"
+			>
+				<template #label>
+				<span
+					v-text="file.name"
+					@click="file.isPreview = false"
+				></span>
+				</template>
+			</t-tab-panel>
+		</t-tabs>
+		<div v-if="file" :class="`viewer ${clazz}`" @click="file.isPreview = false">
+			<loading class="loading" :showOn="isLoading" />
+			<div
+				v-if="file.viewerType === FileViewerType.NOT_SUPPORT"
+				class="not-support"
+			>
+				<p class="tips">此文件不支持预览</p>
+				<t-button
+					v-if="file.rawFile.size < IOSize.MB"
+					@click="previewAsText"
+				>尝试以文本文件解析预览</t-button>
+			</div>
+			<markdown-view
+				v-if="file.viewerType === FileViewerType.MARKDOWN || file.viewerType === FileViewerType.CODE"
+				class="content selectable"
+				:show-code-border="false"
+				max-height="auto"
+				:content="file.data"
+			/>
+			<div
+				v-if="file.viewerType === FileViewerType.TEXT"
+				class="container selectable"
+			>
+				<div class="value" v-text="file.data"></div>
+			</div>
+			<div class="container">
+				<component
+					:is="mediaComponent"
+					class="value"
+					v-if="mediaComponent && file.rawURL"
+					:src="file.rawURL"
+					:controls="true"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { IOSize, Loading, MarkdownView, Prismjs, PrismjsViewer, Toolkit } from "timi-web";
+import { File, FileType, FileViewerType, OpenFile } from "@/types/Repository.ts";
+import RepositoryAPI from "@/api/RepositoryAPI.ts";
+
+defineOptions({
+	name: "FileViewer"
+});
+
+const props = withDefaults(defineProps<{
+	repoName: string;
+	branch: string;
+}>(), {
+});
+const { repoName, branch } = toRefs(props);
+
+const isLoading = ref<boolean>(false);
+const files = ref<OpenFile[]>([]);
+const file = ref<OpenFile>();
+const filePath = ref<string>();
+watch(file, file => filePath.value = file?.path);
+
+const clazz = computed(() => {
+	if (file.value && file.value.viewerType) {
+		return Toolkit.className(file.value.viewerType.toString().toLowerCase());
+	}
+	return "";
+});
+
+// ---------- 切换分支 ----------
+
+watch(branch, () => {
+	files.value = [];
+	file.value = undefined;
+});
+
+// ---------- 打开文件 ----------
+
+function openFile(treeFile: File) {
+	if (treeFile.type === FileType.FILE) {
+		// 已打开该文件
+		let opened = files.value.find(item => item.path === treeFile.path);
+		const isReadme = treeFile.path === "README.md";
+		if (!opened) {
+			opened = {
+				path: treeFile.path,
+				name: treeFile.name,
+				rawURL: RepositoryAPI.fileRawURL(repoName.value, branch.value, `/${treeFile.path}`),
+				rawFile: treeFile,
+				isPreview: !isReadme,
+				removable: !isReadme
+			} as OpenFile;
+			// 如果存在已打开预览，则替换该预览项
+			const previewIndex = files.value.findIndex(item => item.isPreview);
+			if (previewIndex === -1) {
+				files.value.push(opened);
+			} else {
+				files.value.splice(previewIndex, 1, opened);
+			}
+		}
+		opened.activatedAt = new Date().getTime();
+		file.value = opened;
+	}
+}
+
+defineExpose({
+	openFile
+});
+
+// ---------- 切换文件 ----------
+
+// 从 tab 切换文件
+watch(filePath, value => {
+	if (filePath.value) {
+		const targetFile = files.value.find(item => item.path === value);
+		if (targetFile) {
+			targetFile.activatedAt = new Date().getTime();
+			file.value = targetFile;
+			return;
+		}
+	}
+	file.value = undefined;
+});
+
+watch(file, async () => {
+	if (file.value) {
+		if (!file.value.mimeType) {
+			isLoading.value = true;
+			// 获取 Mime-Type
+			file.value.mimeType = await RepositoryAPI.fileMimeType(repoName.value, branch.value, `/${file.value.path}`);
+		}
+		file.value.prismjsType = file.value.prismjsType ?? Prismjs.typeFromFileName(file.value.name);
+		if (file.value.prismjsType) {
+			if (!file.value.raw) {
+				isLoading.value = true;
+				file.value.raw = await RepositoryAPI.fileRawByURL(file.value.rawURL);
+			}
+			// 解码为文本
+			const properties = Prismjs.getFileProperties(file.value.prismjsType);
+			if (properties) {
+				if (!file.value.data) {
+					isLoading.value = true;
+					const data = new TextDecoder("utf-8").decode(file.value.raw);
+					if (properties.viewer === PrismjsViewer.CODE) {
+						file.value.data = Toolkit.format("```${type}\n${data}\n```", {
+							type: properties.prismjs,
+							data
+						});
+					} else {
+						file.value.data = data;
+					}
+				}
+				if (properties.viewer === PrismjsViewer.MARKDOWN) {
+					file.value.viewerType = FileViewerType.MARKDOWN;
+				} else if (properties.viewer === PrismjsViewer.CODE) {
+					file.value.viewerType = FileViewerType.CODE;
+				} else {
+					file.value.viewerType = FileViewerType.TEXT;
+				}
+			}
+		} else {
+			if (!file.value.viewerType) {
+				if (file.value.mimeType) {
+					switch (true) {
+						case file.value.mimeType.startsWith("image/"):
+							file.value.viewerType = FileViewerType.IMAGE;
+							break;
+						case file.value.mimeType.startsWith("audio/"):
+							file.value.viewerType = FileViewerType.AUDIO;
+							break;
+						case file.value.mimeType.startsWith("video/"):
+							file.value.viewerType = FileViewerType.VIDEO;
+							break;
+						case file.value.mimeType.startsWith("text/"):
+							file.value.viewerType = FileViewerType.TEXT;
+							if (!file.value.data) {
+								if (!file.value.raw) {
+									isLoading.value = true;
+									file.value.raw = await RepositoryAPI.fileRawByURL(file.value.rawURL);
+								}
+								file.value.data = new TextDecoder("utf-8").decode(file.value.raw);
+							}
+							break;
+						default:
+							file.value.viewerType = FileViewerType.NOT_SUPPORT;
+					}
+				} else {
+					file.value.viewerType = FileViewerType.NOT_SUPPORT;
+				}
+			}
+		}
+		isLoading.value = false;
+	}
+});
+
+// ---------- 关闭文件 ----------
+
+const onTabRemove = (options: { index: number }) => {
+	files.value.splice(options.index, 1);
+	if (0 < files.value.length) {
+		file.value = files.value[files.value.length - 1];
+	} else {
+		file.value = undefined;
+	}
+};
+
+// ---------- 尝试以文本文件解码预览 ----------
+
+async function previewAsText() {
+	if (file.value) {
+		// 解码为文本
+		if (!file.value.data) {
+			if (!file.value.raw) {
+				file.value.raw = await RepositoryAPI.fileRawByURL(file.value.rawURL);
+			}
+			file.value.data = new TextDecoder("utf-8").decode(file.value.raw);
+		}
+		file.value.viewerType = FileViewerType.TEXT;
+	}
+}
+
+// ---------- 媒体文件 ----------
+
+const mediaComponent = computed(() => {
+	if (file.value) {
+		switch (file.value.viewerType) {
+			case FileViewerType.IMAGE:
+				return "img";
+			case FileViewerType.VIDEO:
+				return FileViewerType.VIDEO.toString().toLowerCase();
+			case FileViewerType.AUDIO:
+				return FileViewerType.AUDIO.toString().toLowerCase();
+		}
+	}
+	return undefined;
+});
+</script>
+
+<style scoped lang="less">
+.file-viewer {
+	height: 100%;
+
+	.tabs {
+		top: calc(50px + 49px + 30px);
+		position: sticky;
+		z-index: 9;
+		border-top: var(--tui-border);
+		border-bottom: var(--tui-border);
+	}
+
+	.viewer {
+		height: calc(100% - 33px);
+
+		&.text {
+
+			.container {
+				width: calc(100% - 8px);
+				min-height: calc(100% - 4px);
+				padding: 2px 4px;
+				overflow: auto;
+
+				.value {
+					font-size: 14px;
+					white-space: pre;
+				}
+			}
+		}
+
+		&.code {
+
+			:deep(.tui-markdown-view) {
+				height: 100%;
+				position: relative;
+
+				&::before {
+					content: "";
+					top: 0;
+					left: 0;
+					width: 3em;
+					height: 100%;
+					position: absolute;
+					background: rgba(242, 242, 242, .9);
+					border-right: 1px solid #999;
+				}
+
+				pre[class^="language-"] {
+					height: 100%;
+				}
+			}
+
+			:deep(pre[class*="language-"]) {
+				margin: 0;
+				border: none;
+			}
+		}
+
+		&.markdown {
+			height: 100%;
+			padding: .5rem 1rem;
+		}
+
+		&.image,
+		&.audio,
+		&.video {
+
+			.container {
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				audio {
+					width: 40rem;
+					margin: 0 2rem;
+				}
+
+				video {
+					width: 100%;
+					height: 100%;
+					max-height: 60vh;
+					object-fit: contain;
+					background: #000;
+				}
+
+				.value {
+					max-width: 100%;
+				}
+			}
+		}
+
+		.loading {
+			margin-top: 2rem;
+		}
+
+		.not-support {
+			text-align: center;
+		}
+	}
+}
+</style>
diff --git a/src/types/Repository.ts b/src/types/Repository.ts
index 07054f7..6577e18 100644
--- a/src/types/Repository.ts
+++ b/src/types/Repository.ts
@@ -1,4 +1,4 @@
-import { Model, Page, UserView } from "timi-web";
+import { Model, Page, PrismjsType, UserView } from "timi-web";
 
 export type Repository = {
 	id: number;
@@ -61,3 +61,30 @@ export type File = {
 
 	children: boolean;
 }
+
+export enum FileViewerType {
+
+	NOT_SUPPORT = "NOT_SUPPORT",
+	AUDIO = "AUDIO",
+	VIDEO = "VIDEO",
+	IMAGE = "IMAGE",
+	TEXT = "TEXT",
+	CODE = "CODE",
+	MARKDOWN = "MARKDOWN",
+}
+
+export type OpenFile = {
+
+	path: string;
+	name: string;
+	raw?: ArrayBuffer;
+	rawURL: string;
+	rawFile: File;
+	data?: string;
+	removable: boolean;
+	isPreview: boolean;
+	activatedAt?: number;
+	mimeType?: string;
+	viewerType?: FileViewerType;
+	prismjsType?: PrismjsType;
+}
diff --git a/src/views/repository/FileDetail.vue b/src/views/repository/FileDetail.vue
index c0e60cc..2cbba16 100644
--- a/src/views/repository/FileDetail.vue
+++ b/src/views/repository/FileDetail.vue
@@ -59,61 +59,24 @@
 				<t-button theme="success" @click="doCopyCloneAddr">复制</t-button>
 				<t-button @click="RepositoryAPI.downloadArchive(repositoryStore.value.name, branch)">下载源码</t-button>
 			</div>
-			<t-tabs
-				class="tabs"
-				theme="card"
-				v-model="tabActivated"
-				:onRemove="onTabRemove"
-			>
-				<t-tab-panel
-					v-for="file in tabFiles"
-					:key="file.path"
-					:value="file.path"
-					:label="file.name"
-					:removable="file.removable"
-					@click="onClickOpenFile(file)"
-				>
-					<template #label>
-						<span
-							v-text="file.name"
-							@click="onClickOpenFile(file)"
-						></span>
-					</template>
-				</t-tab-panel>
-			</t-tabs>
-			<div v-if="tabActivatedFileViewer"
-				 :class="`viewer ${viewerClass}`"
-				 @click="onClickViewer"
-			>
-				<markdown-view
-					v-if="tabActivatedFile && tabActivatedFileViewer !== PrismjsViewer.TEXT"
-					class="content selectable"
-					:show-code-border="false"
-					max-height="auto"
-					:content="tabActivatedFile.data"
-					@click="onClickViewer"
-				/>
-				<textarea
-					v-if="tabActivatedFile && tabActivatedFileViewer === PrismjsViewer.TEXT"
-					class="content selectable"
-					:value="tabActivatedFile.data"
-					readonly
-				></textarea>
-			</div>
-			<div v-else class="viewer not-support">
-				<div class="content">不支持预览</div>
-			</div>
+			<file-viewer
+				v-if="branch"
+				ref="fileViewerRef"
+				:repo-name="repositoryStore.value!.name"
+				:branch="branch"
+			/>
 		</pane>
 	</split-pane>
 </template>
 <script lang="ts" setup>
-import { Icon, MarkdownView, Prismjs, PrismjsType, PrismjsViewer, Toolkit } from "timi-web";
+import { Icon } from "timi-web";
 import type { TreeInstanceFunctions, TreeProps } from "tdesign-vue-next";
 import RepositoryAPI from "@/api/RepositoryAPI";
 import { File, FileType } from "@/types/Repository";
 import { useRepositoryStore } from "@/store/repository.ts";
 import useClipboard from "vue-clipboard3";
 import SplitPane, { Pane } from "@marsio/vue-split-pane";
+import FileViewer from "@/components/FileViewer.vue";
 
 const router = useRouter();
 const { toClipboard } = useClipboard();
@@ -121,6 +84,14 @@ const repositoryStore = useRepositoryStore();
 
 // ---------- 分支 ----------
 const branch = ref();
+
+watch(branch, async () => {
+	if (!branch.value) {
+		return;
+	}
+	await router.replace(`/${repositoryStore.value!.name}/${branch.value}`);
+});
+
 onMounted(async () => {
 	if (repositoryStore.value && repositoryStore.value.defaultBranch) {
 		branch.value = repositoryStore.value.defaultBranch;
@@ -147,7 +118,7 @@ watch(branch, async () => {
 		const items = treeItems.value;
 		for (const item of items) {
 			if (item.path === "README.md") {
-				await doOpenFile(tree.value.getItem(item.path).data as File);
+				doOpenFile(tree.value.getItem(item.path).data as File);
 				break;
 			}
 		}
@@ -193,119 +164,13 @@ async function doCopyCloneAddr() {
 
 // ---------- 打开文件 ----------
 
-type OpenFile = {
-	path: string;
-	name: string;
-	data?: string;
-	removable: boolean;
-	isPreview: boolean;
-	activatedAt?: number;
-	prismjsType?: PrismjsType;
+const fileViewerRef = ref<InstanceType<typeof FileViewer>>();
+function doOpenFile(file: File)  {
+	fileViewerRef.value!.openFile(file);
 }
-
-const tabFiles = ref<OpenFile[]>([]);
-const tabActivated = ref();
-const tabActivatedFile = ref<OpenFile>();
-const tabActivatedFileViewer = ref<PrismjsViewer>();
-
-const viewerClass = computed(() => {
-	if (tabActivatedFileViewer.value) {
-		return Toolkit.className(tabActivatedFileViewer.value.toString().toLowerCase());
-	}
-	return "";
-});
-watch(branch, async () => {
-	if (!branch.value) {
-		return;
-	}
-	await router.replace(`/${repositoryStore.value!.name}/${branch.value}`);
-	tabFiles.value = [];
-	tabActivated.value = null;
-});
-watch(tabActivated, value => {
-	if (tabActivated.value) {
-		const targetFile = tabFiles.value.find(item => item.path === value);
-		if (targetFile) {
-			targetFile.activatedAt = new Date().getTime();
-			tabActivatedFile.value = targetFile;
-			return;
-		}
-	}
-	tabActivatedFile.value = undefined;
-});
-watch(tabActivatedFile, () => {
-	if (tabActivatedFile.value && tabActivatedFile.value.prismjsType) {
-		const properties = Prismjs.getFileProperties(tabActivatedFile.value.prismjsType);
-		if (properties) {
-			tabActivatedFileViewer.value = properties.viewer;
-			return;
-		}
-	}
-	tabActivatedFileViewer.value = undefined;
-});
-const doOpenFile = async (file: File) => {
-	if (file.type === FileType.FILE) {
-		let opened = tabFiles.value.find(item => item.path === file.path);
-		const previewIndex = tabFiles.value.findIndex(item => item.isPreview);
-		const isReadme = file.path === "README.md";
-		if (!opened) {
-			opened = {
-				path: file.path,
-				name: file.name,
-				isPreview: !isReadme,
-				removable: !isReadme,
-				prismjsType: PrismjsType.PlainText
-			};
-			if (previewIndex === -1) {
-				tabFiles.value.push(opened);
-			} else {
-				// 如果存在已打开预览，则替换该预览项
-				tabFiles.value.splice(previewIndex, 1, opened);
-			}
-			const raw = await RepositoryAPI.fileRaw(repositoryStore.value!.name, branch.value, `/${opened.path}`);
-			const decoder = new TextDecoder("utf-8");
-			opened.prismjsType = Prismjs.typeFromFileName(opened.name);
-			if (opened.prismjsType) {
-				const properties = Prismjs.getFileProperties(opened.prismjsType);
-				if (properties && properties.viewer === PrismjsViewer.CODE) {
-					opened.data = "```" + properties.prismjs + "\n" + decoder.decode(raw) + "\n```";
-				} else {
-					opened.data = decoder.decode(raw);
-				}
-			} else {
-				opened.data = "该文件暂不支持预览";
-			}
-		}
-		opened.activatedAt = new Date().getTime();
-		tabActivated.value = file.path;
-		tabActivatedFile.value = opened;
-	}
-};
-
-// TODO 明确类型会构建失败
 const onTreeActivated = (_value: any, context: { node: any }) => {
 	doOpenFile(context.node.data);
 };
-
-const onTabRemove = (options: { index: number }) => {
-	tabFiles.value.splice(options.index, 1);
-	if (0 < tabFiles.value.length) {
-		tabActivated.value = tabFiles.value[tabFiles.value.length - 1].path;
-	} else {
-		tabActivated.value = null;
-	}
-};
-
-const onClickOpenFile = (openFile: OpenFile) => {
-	openFile.isPreview = false;
-};
-
-const onClickViewer = async () => {
-	const activated = tabFiles.value.find(item => item.path === tabActivated.value);
-	if (activated) {
-		activated.isPreview = false;
-	}
-};
 </script>
 
 <style lang="less" scoped>
@@ -412,72 +277,6 @@ const onClickViewer = async () => {
 				}
 			}
 		}
-
-		.tabs {
-			top: calc(50px + 49px + 30px);
-			position: sticky;
-			z-index: 9;
-			border-top: var(--tui-border);
-			border-bottom: var(--tui-border);
-
-			:deep(.t-tabs__nav-container.t-tabs__nav--card::after) {
-				background: var(--tui-light-gray);
-			}
-		}
-
-		.viewer {
-			height: 100%;
-			overflow: auto;
-
-			&.text {
-
-				.content {
-					width: calc(100% - 8px);
-					height: calc(100% - 4px);
-					border: none;
-					padding: 2px 4px;
-					font-size: 14px;
-					word-wrap: normal;
-				}
-			}
-
-			&.code {
-
-				:deep(.tui-markdown-view) {
-					height: 100%;
-					position: relative;
-
-					&::before {
-						content: "";
-						top: 0;
-						left: 0;
-						width: 3em;
-						height: 100%;
-						position: absolute;
-						background: rgba(242, 242, 242, .9);
-						border-right: 1px solid #999;
-					}
-
-					pre[class^="language-"] {
-						height: 100%;
-					}
-				}
-			}
-
-			&.markdown {
-				height: 100%;
-				padding: .5rem 1rem;
-			}
-
-			&.not-support {
-				text-align: center;
-			}
-
-			:deep(pre[class*="language-"]) {
-				margin: 0;
-				border: none;
-			}
-		}
 	}
 }