Skip to content

Commit 00c3cf0

Browse files
clanstyclansty
committed
提取组件
1 parent 22b6f1c commit 00c3cf0

File tree

2 files changed

+146
-121
lines changed

2 files changed

+146
-121
lines changed

‎MaiChartManager/Front/src/components/Tools/VideoConvertButton.tsx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import { getUrl } from '@/client/api';
2+
import { NButton, NCheckbox, NFlex, NModal, NProgress, useMessage } from 'naive-ui';
3+
import { defineComponent, ref } from 'vue';
4+
import { useStorage } from '@vueuse/core';
5+
import { LicenseStatus } from '@/client/apiGen';
6+
import { globalCapture, showNeedPurchaseDialog, version } from '@/store/refs';
7+
import { fetchEventSource } from '@microsoft/fetch-event-source';
8+
9+
enum STEP {
10+
None,
11+
Options,
12+
Progress,
13+
}
14+
15+
// 视频转换选项的默认值
16+
const defaultVideoConvertOptions = {
17+
noScale: false,
18+
yuv420p: true,
19+
}
20+
21+
export default defineComponent({
22+
setup(props, { expose }) {
23+
const message = useMessage();
24+
const step = ref(STEP.None);
25+
const progress = ref(0);
26+
const videoConvertOptions = useStorage('videoConvertOptions', defaultVideoConvertOptions, undefined, { mergeDefaults: true });
27+
28+
const handleVideoConvert = async () => {
29+
step.value = STEP.Progress;
30+
progress.value = 0;
31+
32+
const controller = new AbortController();
33+
34+
try {
35+
await new Promise<void>((resolve, reject) => {
36+
fetchEventSource(getUrl(`VideoConvertToolApi?noScale=${videoConvertOptions.value.noScale}&yuv420p=${videoConvertOptions.value.yuv420p}`), {
37+
signal: controller.signal,
38+
method: 'POST',
39+
onerror(e) {
40+
reject(e);
41+
controller.abort();
42+
throw new Error("disable retry onerror");
43+
},
44+
onclose() {
45+
reject(new Error("EventSource Close"));
46+
controller.abort();
47+
throw new Error("disable retry onclose");
48+
},
49+
openWhenHidden: true,
50+
onmessage: (e) => {
51+
switch (e.event) {
52+
case 'Progress':
53+
progress.value = parseInt(e.data);
54+
break;
55+
case 'Success':
56+
console.log("success", e.data);
57+
controller.abort();
58+
message.success("转换完成！");
59+
resolve();
60+
break;
61+
case 'Error':
62+
controller.abort();
63+
reject(new Error(e.data));
64+
break;
65+
}
66+
}
67+
});
68+
});
69+
} catch (e: any) {
70+
if (e?.name === 'AbortError') return;
71+
console.log(e);
72+
globalCapture(e, "视频转换出错");
73+
} finally {
74+
step.value = STEP.None;
75+
}
76+
};
77+
78+
const trigger = () => {
79+
// 检查是否为赞助版
80+
if (version.value?.license !== LicenseStatus.Active) {
81+
showNeedPurchaseDialog.value = true;
82+
return;
83+
}
84+
// 显示选项对话框
85+
step.value = STEP.Options;
86+
};
87+
88+
// 暴露方法供外部调用
89+
expose({
90+
trigger,
91+
});
92+
93+
return () => <>
94+
95+
<NModal
96+
preset="card"
97+
class="w-[min(30vw,25em)]"
98+
title="视频转换选项"
99+
show={step.value === STEP.Options}
100+
onUpdateShow={() => step.value = STEP.None}
101+
>{{
102+
default: () => <NFlex vertical size="large">
103+
<div>将 MP4 视频转换为 DAT 格式（USM 容器）</div>
104+
<NCheckbox v-model:checked={videoConvertOptions.value.noScale}>
105+
不要缩放视频到 1080 宽度
106+
</NCheckbox>
107+
<NCheckbox v-model:checked={videoConvertOptions.value.yuv420p}>
108+
使用 YUV420P 颜色空间
109+
</NCheckbox>
110+
</NFlex>,
111+
footer: () => <NFlex justify="end">
112+
<NButton onClick={() => step.value = STEP.None}>取消</NButton>
113+
<NButton type="primary" onClick={handleVideoConvert}>确定</NButton>
114+
</NFlex>
115+
}}</NModal>
116+
117+
<NModal
118+
preset="card"
119+
class="w-[min(40vw,40em)]"
120+
title="正在转换…"
121+
show={step.value === STEP.Progress}
122+
closable={false}
123+
maskClosable={false}
124+
closeOnEsc={false}
125+
>
126+
<NProgress
127+
type="line"
128+
status="success"
129+
percentage={progress.value}
130+
indicator-placement="inside"
131+
processing
132+
>
133+
{progress.value === 100 ? '还在处理，别急…' : `${progress.value}%`}
134+
</NProgress>
135+
</NModal>
136+
</>;
137+
},
138+
});
139+

‎MaiChartManager/Front/src/components/Tools/index.tsx‎

Lines changed: 7 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,25 @@
1-
import api, { getUrl } from '@/client/api';
2-
import { NDropdown, NButton, useMessage, NModal, NFlex, NCheckbox, NProgress } from 'naive-ui';
3-
import { defineComponent, PropType, ref, computed, watch } from 'vue';
4-
import { useStorage } from '@vueuse/core';
5-
import { LicenseStatus } from '@/client/apiGen';
6-
import { globalCapture, showNeedPurchaseDialog, version } from '@/store/refs';
7-
import { fetchEventSource } from '@microsoft/fetch-event-source';
1+
import api from '@/client/api';
2+
import { NDropdown, NButton, useMessage } from 'naive-ui';
3+
import { defineComponent, ref } from 'vue';
4+
import VideoConvertButton from './VideoConvertButton';
85

96
enum DROPDOWN_OPTIONS {
107
AudioConvert,
118
VideoConvert,
129
}
1310

14-
enum STEP {
15-
None,
16-
Options,
17-
Progress,
18-
}
19-
20-
// 视频转换选项的默认值
21-
const defaultVideoConvertOptions = {
22-
noScale: false,
23-
yuv420p: true,
24-
}
25-
2611
export default defineComponent({
2712
// props: {
2813
// },
2914
setup(props, { emit }) {
3015
const message = useMessage();
31-
const step = ref(STEP.None);
32-
const progress = ref(0);
33-
const videoConvertOptions = useStorage('videoConvertOptions', defaultVideoConvertOptions, undefined, { mergeDefaults: true });
16+
const videoConvertRef = ref<{ trigger: () => void }>();
3417

3518
const options = [
3619
{ label: "音频转换", key: DROPDOWN_OPTIONS.AudioConvert },
3720
{ label: "视频转换（MP4 转 DAT）", key: DROPDOWN_OPTIONS.VideoConvert },
3821
]
3922

40-
const handleVideoConvert = async () => {
41-
step.value = STEP.Progress;
42-
progress.value = 0;
43-
44-
const controller = new AbortController();
45-
46-
try {
47-
await new Promise<void>((resolve, reject) => {
48-
fetchEventSource(getUrl(`VideoConvertToolApi?noScale=${videoConvertOptions.value.noScale}&yuv420p=${videoConvertOptions.value.yuv420p}`), {
49-
signal: controller.signal,
50-
method: 'POST',
51-
onerror(e) {
52-
reject(e);
53-
controller.abort();
54-
throw new Error("disable retry onerror");
55-
},
56-
onclose() {
57-
reject(new Error("EventSource Close"));
58-
controller.abort();
59-
throw new Error("disable retry onclose");
60-
},
61-
openWhenHidden: true,
62-
onmessage: (e) => {
63-
switch (e.event) {
64-
case 'Progress':
65-
progress.value = parseInt(e.data);
66-
break;
67-
case 'Success':
68-
console.log("success", e.data);
69-
controller.abort();
70-
message.success("转换完成！");
71-
resolve();
72-
break;
73-
case 'Error':
74-
controller.abort();
75-
reject(new Error(e.data));
76-
break;
77-
}
78-
}
79-
});
80-
});
81-
} catch (e: any) {
82-
if (e?.name === 'AbortError') return;
83-
console.log(e);
84-
globalCapture(e, "视频转换出错");
85-
} finally {
86-
step.value = STEP.None;
87-
}
88-
};
89-
9023
const handleOptionClick = async (key: DROPDOWN_OPTIONS) => {
9124
switch (key) {
9225
case DROPDOWN_OPTIONS.AudioConvert: {
@@ -99,13 +32,7 @@ export default defineComponent({
9932
break;
10033
}
10134
case DROPDOWN_OPTIONS.VideoConvert: {
102-
// 检查是否为赞助版
103-
if (version.value?.license !== LicenseStatus.Active) {
104-
showNeedPurchaseDialog.value = true;
105-
return;
106-
}
107-
// 显示选项对话框
108-
step.value = STEP.Options;
35+
videoConvertRef.value?.trigger();
10936
break;
11037
}
11138
}
@@ -117,48 +44,7 @@ export default defineComponent({
11744
工具
11845
</NButton>
11946
</NDropdown>
120-
121-
<NModal
122-
preset="card"
123-
class="w-[min(30vw,25em)]"
124-
title="视频转换选项"
125-
show={step.value === STEP.Options}
126-
onUpdateShow={() => step.value = STEP.None}
127-
>{{
128-
default: () => <NFlex vertical size="large">
129-
<div>将 MP4 视频转换为 DAT 格式（USM 容器）</div>
130-
<NCheckbox v-model:checked={videoConvertOptions.value.noScale}>
131-
不要缩放视频到 1080 宽度
132-
</NCheckbox>
133-
<NCheckbox v-model:checked={videoConvertOptions.value.yuv420p}>
134-
使用 YUV420P 颜色空间
135-
</NCheckbox>
136-
</NFlex>,
137-
footer: () => <NFlex justify="end">
138-
<NButton onClick={() => step.value = STEP.None}>取消</NButton>
139-
<NButton type="primary" onClick={handleVideoConvert}>确定</NButton>
140-
</NFlex>
141-
}}</NModal>
142-
143-
<NModal
144-
preset="card"
145-
class="w-[min(40vw,40em)]"
146-
title="正在转换…"
147-
show={step.value === STEP.Progress}
148-
closable={false}
149-
maskClosable={false}
150-
closeOnEsc={false}
151-
>
152-
<NProgress
153-
type="line"
154-
status="success"
155-
percentage={progress.value}
156-
indicator-placement="inside"
157-
processing
158-
>
159-
{progress.value === 100 ? '还在处理，别急…' : `${progress.value}%`}
160-
</NProgress>
161-
</NModal>
47+
<VideoConvertButton ref={videoConvertRef} />
16248
</>;
16349
},
16450
});

0 commit comments

Comments
 (0)