diff --git a/.postcssrc.js b/.postcssrc.js new file mode 100644 index 0000000..f35ba44 --- /dev/null +++ b/.postcssrc.js @@ -0,0 +1,9 @@ +module.exports = { + plugins: { + autoprefixer: {}, + 'postcss-px2rem-exclude': { + remUnit: 192,//1rem = 75px(iphone6的设计稿如此设置) + // exclude: /node_modules/i //忽略node_modules目录下的文件 + } + } +} diff --git a/index.html b/index.html index 17fc555..712fbee 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@ + + Metavatar-PC-Admin @@ -15,4 +18,63 @@ + + + \ No newline at end of file diff --git a/package.json b/package.json index 0db393a..7f40e27 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "@typescript-eslint/eslint-plugin": "^5.51.0", "@typescript-eslint/parser": "^5.51.0", "@vitejs/plugin-vue": "^4.0.0", + "amfe-flexible": "^2.2.1", "autoprefixer": "^10.4.13", "commitizen": "^4.3.0", "cz-git": "^1.6.1", @@ -53,6 +54,7 @@ "lint-staged": "^13.2.1", "postcss": "^8.4.21", "postcss-html": "^1.5.0", + "postcss-pxtorem": "^6.0.0", "postcss-scss": "^4.0.6", "prettier": "^2.8.7", "sass": "^1.58.3", diff --git a/src/assets/img/aitoface.png b/src/assets/img/aitoface.png new file mode 100644 index 0000000..2209ace Binary files /dev/null and b/src/assets/img/aitoface.png differ diff --git a/src/assets/img/gpttotext.png b/src/assets/img/gpttotext.png new file mode 100644 index 0000000..0c8de90 Binary files /dev/null and b/src/assets/img/gpttotext.png differ diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 6563e93..0be7543 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -77,6 +77,8 @@ export default { GeneratedText:'Generated Text', SmartText:'Smart Text', copy:'Copy to text', + tooltip1:'Click to listen', + tooltip2:'Add Pause', }, // 我的视频 @@ -154,6 +156,9 @@ export default { VideoResolution:'Video resolution', DigitalPersonTemplate:'Digital person template', }, + API:{ + title:'API Access', + }, signSucceed: { title: "Confirm your email", succeed: "Sign Succeed !", diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 852230c..a3c42d5 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -77,6 +77,8 @@ export default { GeneratedText:'生成文本', SmartText:'智能文本', copy:'复制到文案', + tooltip1:'点击试听', + tooltip2:'添加停顿', }, // 我的视频 @@ -154,6 +156,9 @@ export default { VideoResolution:'视频分辨率', DigitalPersonTemplate:'数字人模版', }, + API:{ + title:'API 接口', + }, signSucceed: { title: "确认邮箱", succeed: "注册成功", diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 5386731..47d287a 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -51,11 +51,16 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href); // https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component .left-top-box { + position: relative; height: 80px; background-color: #000; } .left-top-logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); width: 180px; height: 40px; padding: 5px 0 0 10px; diff --git a/src/main.ts b/src/main.ts index 5a82010..81ac421 100644 --- a/src/main.ts +++ b/src/main.ts @@ -16,6 +16,7 @@ import i18n from "@/lang/index"; import "element-plus/theme-chalk/dark/css-vars.css"; import "@/styles/index.scss"; import "uno.css"; +import 'amfe-flexible' import "@/styles/my.scss"; // 引入自己定义的样式 // 引入组件 import myLoading from "@/components/myLoading.vue"; diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index e5c7bdb..9ea2d5d 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -2,7 +2,6 @@ export {} declare global { const EffectScope: typeof import('vue')['EffectScope'] - const ElForm: typeof import('element-plus/es')['ElForm'] const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] @@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' declare module 'vue' { interface ComponentCustomProperties { readonly EffectScope: UnwrapRef - readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef readonly asyncComputed: UnwrapRef diff --git a/src/types/components.d.ts b/src/types/components.d.ts index d9ee3fe..26d3161 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -39,6 +39,8 @@ declare module '@vue/runtime-core' { IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] IEpDownload: typeof import('~icons/ep/download')['default'] IEpEdit: typeof import('~icons/ep/edit')['default'] + IEpFolder: typeof import('~icons/ep/folder')['default'] + IEpFolderAdd: typeof import('~icons/ep/folder-add')['default'] IEpGoods: typeof import('~icons/ep/goods')['default'] IEpHeadset: typeof import('~icons/ep/headset')['default'] IEpLoading: typeof import('~icons/ep/loading')['default'] diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index b0cb01e..0f8de24 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -151,7 +151,6 @@ {{ $t("createVideo.availableMould") }}
- AI   - + +
{{ $t("createVideo.Aipicture") }}
@@ -245,11 +243,11 @@
-
- GPT - +
+ +
- +
@@ -263,13 +261,32 @@ type="textarea" :placeholder="$t('createVideo.aiText')" /> - 🔊 - 🕗 +
+ + + 🔊 + + + + + 🕗 + +

{{ $t("createVideo.languages") }}

@@ -309,7 +326,9 @@ @@ -362,7 +381,7 @@ {{ $t("createVideo.uploadAudio") }}

- + + {{ $t("createVideo.hotMusic") }}
{{ $t("createVideo.personalWarehouse") }}
- + + - +
@@ -566,12 +584,17 @@ :placeholder="$t('createVideo.inputRequirement')" />
-
+ {{ $t("createVideo.GeneratedText") }} -
+

{{ $t("createVideo.SmartText") }}

@@ -585,9 +608,12 @@ disabled="" />
-
+ + + {{ $t("createVideo.copy") }} +
@@ -827,6 +853,10 @@ async function changeFile() { } // 点击个人仓库tab function chooseMyImg() { + if (!AccessToken) { + router.push({ path: "/login" }); + return; + } showFace.value = 1; showUploadBtn.value = 2; } @@ -839,6 +869,10 @@ function clickAddBtn() { //#region AI生成图片 function chooseAiPic() { + if (!AccessToken) { + router.push({ path: "/login" }); + return; + } showFace.value = 2; // showUploadBtn.value = 5; } @@ -903,13 +937,16 @@ async function chooseStyle() { // 试听 const previewAudioUrl = ref(null); +const previewAudioLoading = ref(false); async function getPreviewAudio() { + previewAudioLoading.value = true; if (!textareaContent.value) { ElMessage.error( lanChange.value == "zh-cn" ? `您还没有输入文案` : `You have not entered the copy yet` ); + previewAudioLoading.value = false; return; } if (!sound.value) { @@ -918,6 +955,7 @@ async function getPreviewAudio() { ? `您还没有选择声音` : `You have not selected the sound` ); + previewAudioLoading.value = false; return; } @@ -930,19 +968,27 @@ async function getPreviewAudio() { if (!res.data.data) { ElMessage.error( lanChange.value == "zh-cn" - ? `暂时无法试听,请稍后重试` + ? `暂时无法试听,请稍后重试1` : `Unable to listen, please try again later` ); + previewAudioLoading.value = false; + return; } previewAudioUrl.value = res.data.data; - let audioA = document.getElementById("audio").play(); - audioA.play(); + let audioA = document.getElementById("audio"); + audioA.addEventListener("loadedmetadata", function () { + audioA.play(); + }); + + previewAudioLoading.value = false; } catch (error) { ElMessage.error( lanChange.value == "zh-cn" - ? `暂时无法试听,请稍后重试` + ? `暂时无法试听,请稍后重试2` : `Unable to listen, please try again later` ); + previewAudioLoading.value = false; + return; } } //#endregion @@ -1025,11 +1071,35 @@ const handleFileChange = async () => { if (file) { const videoUrl = URL.createObjectURL(file); - audioUrl.value = videoUrl; - audioData.value = file; const audio2 = new Audio(); audio2.src = videoUrl; - countAudioTime(audio2); + // 进行大小时长限制 + await countAudioTime(audio2); + // 限制60秒 + if (uploadAudioTime.value > 60) { + ElMessage.error( + lanChange.value == "zh-cn" + ? `上传失败,您上传的文件时长与您的权益不匹配` + : `The upload failed because the duration of the file you uploaded did not match your entitlements` + ); + audioUrl.value = null; + audioData.value = null; + return; + } + // 限制3mb + if (file.size / 1048576 > 3) { + ElMessage.error( + lanChange.value == "zh-cn" + ? `上传失败,您上传的文件大小与您的权益不匹配` + : `Upload failed, the file size you uploaded does not match your entitlements` + ); + audioUrl.value = null; + audioData.value = null; + return; + } + // 成功了 + audioUrl.value = videoUrl; + audioData.value = file; } }; // 计算音频的时长 @@ -1265,9 +1335,9 @@ async function findById(findId) { } //#endregion ---------------------------- -//#region 音乐tab -const musicListSystem = ref(null); //展示音乐列表 -const musicListPerson = ref(null); //展示音乐列表 +//#region card3 +const musicListSystem = ref([]); //展示系统音乐列表 +const musicListPerson = ref([]); //展示个人音乐列表 const audioMusicUrl = ref(null); //选中音乐Url回显 const musicItemAction = ref(null); //选中高亮 const musicListPageNumSystem = ref(1); //系统音乐页数 @@ -1278,6 +1348,16 @@ const musicListPageSize = ref(8); // const musicTabActive = ref(1); //热门歌曲和个人仓库高亮 const musicData = ref(null); //上传歌曲的数据 const fileMusicInput = ref(null); // 上传组件的dom +// tab切换 +function musicTabActiveChange(index) { + if (index == 2) { + if (!AccessToken) { + router.push({ path: "/login" }); + return; + } + } + musicTabActive.value = index; +} // 获取系统音乐列表 async function getmusicListSystem(pageNum, pageSize) { try { @@ -1404,6 +1484,16 @@ const problemContent = ref(null); const answerContent = ref(""); let mySocket = null; const sendLoading = ref(false); +// 没有登录时跳转登录页 +function clickTab4(e) { + if (e.props.label == "AI生成文本" || e.props.label == "AI Script") { + if (!AccessToken) { + router.push({ path: "/login" }); + return; + } + } +} +// 创建websocket function createWS() { mySocket = new WebSocket("wss://gptsocket.malls.iformall.com:8010"); mySocket.onopen = () => { @@ -1441,11 +1531,11 @@ function createWS() { // 点击发送需求 async function sendRequirement() { // loading - if (sendLoading.value) { - return; - } + sendLoading.value = true; + // 无需求时 if (!problemContent.value) { + sendLoading.value = false; mySocket.close(); return; } @@ -1455,12 +1545,12 @@ async function sendRequirement() { content: problemContent.value, }, ]; + // 如果处于链接状态 if (mySocket.readyState != WebSocket.OPEN) { createWS(); } else { answerContent.value = ""; - sendLoading.value = true; mySocket.send(JSON.stringify(sendMessage)); } } @@ -1528,9 +1618,9 @@ onUnmounted(() => {