Skip to content

Commit 25a92ee

Browse files
Flex-7746Flex-7746
committed
feat: 加载大文件将提示是否继续加载，避免带宽浪费
1 parent 990034d commit 25a92ee

6 files changed

Lines changed: 92 additions & 31 deletions

File tree

‎frontend/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ declare module 'vue' {
2121
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
2222
ElOption: typeof import('element-plus/es')['ElOption']
2323
ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
24+
ElPopover: typeof import('element-plus/es')['ElPopover']
2425
ElSelect: typeof import('element-plus/es')['ElSelect']
2526
ElSwitch: typeof import('element-plus/es')['ElSwitch']
2627
ElTabPane: typeof import('element-plus/es')['ElTabPane']
@@ -46,6 +47,7 @@ declare global {
4647
const ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
4748
const ElOption: typeof import('element-plus/es')['ElOption']
4849
const ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
50+
const ElPopover: typeof import('element-plus/es')['ElPopover']
4951
const ElSelect: typeof import('element-plus/es')['ElSelect']
5052
const ElSwitch: typeof import('element-plus/es')['ElSwitch']
5153
const ElTabPane: typeof import('element-plus/es')['ElTabPane']

‎frontend/src/layout/DialogLike.vue‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,23 @@
7878
<el-switch v-model="cfg.fileAllOpen" />
7979
</div>
8080
</div> -->
81+
82+
<div class="item">
83+
<el-popover title="文件加载询问" content="避免加载大文件浪费带宽，设置超限数值，单位 B" placement="top" :width="220">
84+
<template #reference>
85+
<div class="label">
86+
<el-icon><Warning /></el-icon>
87+
<div class="t">大文件加载询问</div>
88+
</div>
89+
</template>
90+
</el-popover>
91+
92+
<div class="value">
93+
<el-input-number v-model="cfg.fileBigWait" :min="1" />
94+
95+
<div>{{ getSize(cfg.fileBigWait) }}</div>
96+
</div>
97+
</div>
8198
</el-tab-pane>
8299
<el-tab-pane label="目录" name="folder">
83100
<div class="item">
@@ -116,9 +133,10 @@
116133
<script lang="ts" setup>
117134
import { watch, watchEffect } from 'vue'
118135
import { storeToRefs } from 'pinia'
119-
// import { Warning } from '@element-plus/icons-vue'
136+
import { Warning } from '@element-plus/icons-vue'
120137
121138
import { THEME_OPTIONS } from '@/utils/option'
139+
import { getSize } from '@/utils/file'
122140
123141
import { useUserStore } from '@/store/user'
124142
import { useLikeStore } from '@/store/like'

‎frontend/src/layout/ViewEditor.vue‎

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,36 @@
1313
<div v-show="item.diff" class="diff"></div>
1414
</template>
1515

16-
<ImageView v-if="FILE_MAP[getFileSuffix(item.path)] === 'img'" :src="item.path" :list="item.list" />
17-
18-
<PdfView v-else-if="FILE_MAP[getFileSuffix(item.path)] === 'pdf'" :src="item.path" />
19-
20-
<div class="no-open" v-else-if="FILE_MAP[getFileSuffix(item.path)] || errorMap[item.path]">
16+
<div class="no-open" v-if="FILE_MAP[getFileSuffix(item.path)] || errorMap[item.path]">
2117
<div class="t">{{ errorMap[item.path] || '不支持二进制文件的编辑' }}</div>
2218
</div>
2319

24-
<MonacoEditor
25-
v-else
26-
ref="editorRef"
27-
:path="item.path"
28-
@diff="
29-
(v) => {
30-
item.diff = v
20+
<div class="wait-load" v-else-if="item.wait && item.size !== undefined">
21+
<div class="t">文件大小为 {{ getSize(item.size) }}，是否继续？</div>
22+
<el-button @click="item.wait = false">继续加载文件</el-button>
23+
</div>
24+
25+
<template v-else>
26+
<ImageView v-if="FILE_MAP[getFileSuffix(item.path)] === 'img'" :src="item.path" :list="item.list" />
27+
28+
<PdfView v-else-if="FILE_MAP[getFileSuffix(item.path)] === 'pdf'" :src="item.path" />
29+
30+
<MonacoEditor
31+
v-else
32+
ref="editorRef"
33+
:path="item.path"
34+
@diff="
35+
(v) => {
36+
item.diff = v
3137
32-
if (!item.keep && v) {
33-
item.keep = true
38+
if (!item.keep && v) {
39+
item.keep = true
40+
}
3441
}
35-
}
36-
"
37-
@error="(v) => (errorMap[item.path] = v)"
38-
/>
42+
"
43+
@error="(v) => (errorMap[item.path] = v)"
44+
/>
45+
</template>
3946
</el-tab-pane>
4047

4148
<el-tab-pane :name="-1" disabled>
@@ -69,7 +76,7 @@ import ImageView from '@/components/ImageView.vue'
6976
import PdfView from '@/components/PdfView.vue'
7077
7178
import { FILE_MAP } from '@/utils/option'
72-
import { getFileName, getFileSuffix } from '@/utils/file'
79+
import { getFileName, getFileSuffix, getSize } from '@/utils/file'
7380
7481
import { useOpenStore } from '@/store/open'
7582
import { useEditorStore } from '@/store/editor'
@@ -165,6 +172,22 @@ watch(
165172
display: flex;
166173
flex-direction: column;
167174
175+
> .wait-load {
176+
height: 100%;
177+
width: 100%;
178+
display: flex;
179+
flex-direction: column;
180+
align-items: center;
181+
justify-content: center;
182+
gap: 20px;
183+
184+
> .t {
185+
white-space: nowrap;
186+
font-size: 14px;
187+
color: var(--el-text-color-placeholder);
188+
}
189+
}
190+
168191
> .no-open {
169192
height: 100%;
170193
width: 100%;

‎frontend/src/layout/ViewLeft/ViewFolder.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
<script lang="ts" setup>
5555
import { ref } from 'vue'
5656
import axios from 'axios'
57-
import { ElMessageBox } from 'element-plus'
57+
import { dayjs, ElMessageBox } from 'element-plus'
5858
import { Files, Folder, FolderOpened, Refresh, DocumentAdd } from '@element-plus/icons-vue'
5959
6060
import FileView from '@/components/FileView.vue'
@@ -147,6 +147,8 @@ const openNode = (data: TreeNodeData) => {
147147
editor.add(data.value, {
148148
keep: false,
149149
list: treeRef.value?.getNode(data.value)?.parent?.childNodes?.map((i) => i.data.value) || [],
150+
size: data.size,
151+
date: dayjs(data.updateDate),
150152
})
151153
}
152154
}

‎frontend/src/store/editor.ts‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,42 @@
11
import { computed, reactive, ref } from 'vue'
22
import { defineStore } from 'pinia'
3-
import { ElMessageBox } from 'element-plus'
3+
import { dayjs, ElMessageBox } from 'element-plus'
44

55
import { FILE_MAP } from '@/utils/option'
66
import { getFileSuffix } from '@/utils/file'
77

88
import { useOpenStore } from './open'
9+
import { useUserStore } from './user'
910

1011
interface ViewModel {
1112
path: string
1213
diff: boolean
1314
keep: boolean
1415
list: string[]
16+
wait: boolean
17+
size?: number
18+
date?: dayjs.Dayjs
19+
}
20+
21+
interface AddOption {
22+
history?: boolean
23+
keep?: ViewModel['keep']
24+
list?: ViewModel['list']
25+
size?: ViewModel['size']
26+
date?: ViewModel['date']
1527
}
1628

1729
export const useEditorStore = defineStore('editor', () => {
1830
const open = useOpenStore()
31+
const user = useUserStore()
1932

2033
const view = reactive<ViewModel[]>([])
2134

2235
const active = ref('')
2336

2437
const index = computed(() => view.findIndex((i) => i.path === active.value))
2538

26-
const add = (
27-
path: ViewModel['path'],
28-
opt: { keep?: boolean; history?: boolean; list?: string[] } = {
29-
keep: true,
30-
history: true,
31-
list: [],
32-
},
33-
) => {
39+
const add = (path: ViewModel['path'], opt: AddOption = { keep: true, history: true, list: [] }) => {
3440
if (!path) {
3541
return
3642
}
@@ -42,7 +48,15 @@ export const useEditorStore = defineStore('editor', () => {
4248
const index = view.findIndex((i) => i.path === path)
4349

4450
if (index === -1) {
45-
view.push({ path, diff: false, keep, list })
51+
view.push({
52+
path,
53+
diff: false,
54+
keep,
55+
list,
56+
wait: user.cfg.fileBigWait > 0 && opt.size !== undefined && opt.size > user.cfg.fileBigWait,
57+
size: opt.size,
58+
date: opt.date,
59+
})
4660
}
4761

4862
active.value = path

‎frontend/src/store/user.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface LikeModel {
1818
confirm: boolean // 保存二次确认
1919
fileMdView: boolean // MD打开默认预览
2020
fileAllOpen: boolean // Web端全文件支持
21+
fileBigWait: number // 多大文件暂停加载，0为不启用
2122
editorOption: {
2223
// 编辑器配置
2324
fontSize: number // 字体大小
@@ -42,6 +43,7 @@ const getDef = (): LikeModel => ({
4243
confirm: true, // 保存二次确认
4344
fileMdView: false, // md默认预览
4445
fileAllOpen: false, // Web端全文件支持
46+
fileBigWait: 50 * 1024 * 1024, // 多大文件暂停加载，0为不启用，默认50M
4547
editorOption: {
4648
// 编辑器配置
4749
fontSize: 14, // 字体大小

0 commit comments

Comments
 (0)