support preview img,audio,video for FileDetail.vue
This commit is contained in:
Timi
@ -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
|
||||
};
|
||||
|
||||
362
src/components/FileViewer.vue
Normal file
362
src/components/FileViewer.vue
Normal file
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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"
|
||||
<file-viewer
|
||||
v-if="branch"
|
||||
ref="fileViewerRef"
|
||||
:repo-name="repositoryStore.value!.name"
|
||||
:branch="branch"
|
||||
/>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user