@@ -84,7 +84,8 @@ export default { | |||||
// uploadImgTip2:'Please upload unobstructed frontal photo', | // uploadImgTip2:'Please upload unobstructed frontal photo', | ||||
uploadImgTip2:'please upload a clear frontal photo', | uploadImgTip2:'please upload a clear frontal photo', | ||||
entered:'entered' | |||||
entered:'entered', | |||||
subtitles:"subtitles", | |||||
}, | }, | ||||
// 我的视频 | // 我的视频 | ||||
@@ -83,6 +83,7 @@ export default { | |||||
uploadImgTip1:'点此上传图片', | uploadImgTip1:'点此上传图片', | ||||
uploadImgTip2:'请确保上传图片为无遮挡的正脸图片', | uploadImgTip2:'请确保上传图片为无遮挡的正脸图片', | ||||
entered:'已输入', | entered:'已输入', | ||||
subtitles:"字幕", | |||||
}, | }, | ||||
// 我的视频 | // 我的视频 | ||||
@@ -0,0 +1,133 @@ | |||||
<template> | |||||
<div :class="classObj" class="app-wrapper"> | |||||
<!-- 手机设备侧边栏打开遮罩层 --> | |||||
<div | |||||
v-if="classObj.mobile && classObj.openSidebar" | |||||
class="drawer-bg" | |||||
@click="handleOutsideClick" | |||||
></div> | |||||
<Sidebar class="sidebar-container" /> | |||||
<div :class="{ hasTagsView: showTagsView }" class="main-container"> | |||||
<div :class="{ 'fixed-header': fixedHeader }"> | |||||
<navbar /> | |||||
<tags-view v-if="showTagsView" /> | |||||
</div> | |||||
<!--主页面--> | |||||
<app-main /> | |||||
<!-- 设置面板 --> | |||||
<RightPanel v-if="showSettings"> | |||||
<settings /> | |||||
</RightPanel> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { computed, watchEffect } from "vue"; | |||||
import { useWindowSize } from "@vueuse/core"; | |||||
import { AppMain, Navbar, Settings, TagsView } from "./components/index"; | |||||
import SignSucceed from "../views/signSucceed/index.vue"; | |||||
import Sidebar from "./components/Sidebar/index.vue"; | |||||
import RightPanel from "@/components/RightPanel/index.vue"; | |||||
import { useAppStore } from "@/store/modules/app"; | |||||
import { useSettingsStore } from "@/store/modules/settings"; | |||||
import { useRoute, useRouter } from "vue-router"; | |||||
const route = useRoute(); | |||||
const { params } = route; | |||||
const { width } = useWindowSize(); | |||||
/** | |||||
* 响应式布局容器固定宽度 | |||||
* | |||||
* 大屏(>=1200px) | |||||
* 中屏(>=992px) | |||||
* 小屏(>=768px) | |||||
*/ | |||||
const WIDTH = 992; | |||||
const appStore = useAppStore(); | |||||
const settingsStore = useSettingsStore(); | |||||
const fixedHeader = computed(() => settingsStore.fixedHeader); | |||||
const showTagsView = computed(() => settingsStore.tagsView); | |||||
const showSettings = computed(() => settingsStore.showSettings); | |||||
const classObj = computed(() => ({ | |||||
hideSidebar: !appStore.sidebar.opened, | |||||
openSidebar: appStore.sidebar.opened, | |||||
withoutAnimation: appStore.sidebar.withoutAnimation, | |||||
mobile: appStore.device === "mobile", | |||||
})); | |||||
watchEffect(() => { | |||||
if (width.value < WIDTH) { | |||||
appStore.toggleDevice("mobile"); | |||||
appStore.closeSideBar(true); | |||||
} else { | |||||
appStore.toggleDevice("desktop"); | |||||
if (width.value >= 1200) { | |||||
//大屏 | |||||
appStore.openSideBar(true); | |||||
} else { | |||||
appStore.closeSideBar(true); | |||||
} | |||||
} | |||||
}); | |||||
function handleOutsideClick() { | |||||
appStore.closeSideBar(false); | |||||
} | |||||
onMounted(() => {}); | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.app-wrapper { | |||||
&::after { | |||||
display: table; | |||||
clear: both; | |||||
content: ""; | |||||
} | |||||
position: relative; | |||||
width: 100%; | |||||
height: 100%; | |||||
e &.mobile.openSidebar { | |||||
position: fixed; | |||||
top: 0; | |||||
} | |||||
} | |||||
.fixed-header { | |||||
position: fixed; | |||||
top: 0; | |||||
right: 0; | |||||
z-index: 9; | |||||
width: calc(100% - #{$sideBarWidth}); | |||||
transition: width 0.28s; | |||||
} | |||||
.hideSidebar .fixed-header { | |||||
width: calc(100% - 54px); | |||||
} | |||||
.mobile .fixed-header { | |||||
width: 100%; | |||||
} | |||||
.drawer-bg { | |||||
position: absolute; | |||||
top: 0; | |||||
z-index: 999; | |||||
width: 100%; | |||||
height: 100%; | |||||
background: #000; | |||||
opacity: 0.3; | |||||
} | |||||
</style> |
@@ -1,27 +1,101 @@ | |||||
<template> | <template> | ||||
<div :class="classObj" class="app-wrapper"> | |||||
<!-- 手机设备侧边栏打开遮罩层 --> | |||||
<div | |||||
v-if="classObj.mobile && classObj.openSidebar" | |||||
class="drawer-bg" | |||||
@click="handleOutsideClick" | |||||
></div> | |||||
<Sidebar class="sidebar-container" /> | |||||
<div :class="{ hasTagsView: showTagsView }" class="main-container"> | |||||
<div :class="{ 'fixed-header': fixedHeader }"> | |||||
<navbar /> | |||||
<tags-view v-if="showTagsView" /> | |||||
<div class="app-wrapper"> | |||||
<!-- 侧边栏 --> | |||||
<div class="Sidebar"> | |||||
<div class="imgBox"> | |||||
<img | |||||
class="boxCentreImg" | |||||
src="../assets//img/left-top-logo.png" | |||||
alt="" | |||||
/> | |||||
</div> | </div> | ||||
<!-- 侧边路由列表 --> | |||||
<div class="myRouter"> | |||||
<!-- 创建视频页 --> | |||||
<div class="myRouter-item" @click="router.push('/createVideo')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-edit /></el-icon> | |||||
</div> | |||||
{{ $t("createVideo.title") }} | |||||
</div> | |||||
<!-- 我的视频 --> | |||||
<div class="myRouter-item" @click="router.push('/myCreating')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-menu /></el-icon> | |||||
</div> | |||||
{{ $t("myCreating.title") }} | |||||
</div> | |||||
<!-- 测试功能页 --> | |||||
<div | |||||
v-if="false" | |||||
class="myRouter-item" | |||||
@click="router.push('/moveImg')" | |||||
> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-edit /></el-icon> | |||||
</div> | |||||
{{ $t("createVideo.title") }} | |||||
</div> | |||||
<!-- 商店 --> | |||||
<div class="myRouter-item pricing" @click="router.push('/myStore')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-Goods /></el-icon> | |||||
</div> | |||||
{{ $t("shop.title") }} | |||||
</div> | |||||
<!-- api --> | |||||
<div class="myRouter-item API" @click="router.push('/APIAccess')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-DocumentAdd /></el-icon> | |||||
</div> | |||||
{{ $t("API.title") }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 右边显示部分 --> | |||||
<div class="rightBox"> | |||||
<!-- nav栏 --> | |||||
<div class="nav"> | |||||
<!-- 路由名字 --> | |||||
<div style="position: absolute; left: 30px; font-size: 26px"> | |||||
{{ $t(routeName as string) }} | |||||
</div> | |||||
<!-- 语言 --> | |||||
<!--语言选择--> | |||||
<el-tooltip | |||||
style="cursor: pointer; z-index: 999" | |||||
class="box-item" | |||||
effect="dark" | |||||
:content="$t('navbar.LanguageChange')" | |||||
placement="top-start" | |||||
> | |||||
<lang-select class="navItem" style="color: #ffffff" /> | |||||
</el-tooltip> | |||||
<!-- 账户 --> | |||||
<div | |||||
class="navItem" | |||||
v-if="AccessToken" | |||||
@click="router.push('myAccount')" | |||||
> | |||||
{{ $t("navbar.account") }} | |||||
</div> | |||||
<!-- 登录 --> | |||||
<div class="navItem" v-if="!AccessToken" @click="router.push('login')"> | |||||
{{ $t("navbar.goLogin") }} | |||||
</div> | |||||
<!--主页面--> | |||||
<app-main /> | |||||
<!-- 设置面板 --> | |||||
<RightPanel v-if="showSettings"> | |||||
<settings /> | |||||
</RightPanel> | |||||
<!-- 注销 --> | |||||
<div | |||||
class="navItem" | |||||
v-if="AccessToken" | |||||
@click="logout" | |||||
style="margin-left: 10px" | |||||
> | |||||
{{ $t("navbar.logout") }} | |||||
</div> | |||||
</div> | |||||
<!-- 主页面 --> | |||||
<app-main style="background-color: #000" /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -29,18 +103,42 @@ | |||||
<script setup lang="ts"> | <script setup lang="ts"> | ||||
import { computed, watchEffect } from "vue"; | import { computed, watchEffect } from "vue"; | ||||
import { useWindowSize } from "@vueuse/core"; | import { useWindowSize } from "@vueuse/core"; | ||||
import { AppMain, Navbar, Settings, TagsView } from "./components/index"; | |||||
import SignSucceed from "../views/signSucceed/index.vue"; | |||||
import Sidebar from "./components/Sidebar/index.vue"; | |||||
import RightPanel from "@/components/RightPanel/index.vue"; | |||||
import { AppMain, Navbar } from "./components/index"; | |||||
import LangSelect from "@/components/LangSelect/index.vue"; | |||||
import { useAppStore } from "@/store/modules/app"; | import { useAppStore } from "@/store/modules/app"; | ||||
import { useSettingsStore } from "@/store/modules/settings"; | |||||
// import { useSettingsStore } from "@/store/modules/settings"; | |||||
import { useRoute, useRouter } from "vue-router"; | import { useRoute, useRouter } from "vue-router"; | ||||
import { useI18n } from "vue-i18n"; | |||||
import { userInfoModules } from "@/store/modules/userInfo"; | |||||
const userInfoPinia = userInfoModules(); | |||||
const route = useRoute(); | const route = useRoute(); | ||||
const router = useRouter(); | |||||
const { params } = route; | const { params } = route; | ||||
const { width } = useWindowSize(); | const { width } = useWindowSize(); | ||||
const AccessToken = localStorage.getItem("AccessToken"); | |||||
// 当前语言状态与国际化组件 | |||||
const { locale } = useI18n(); | |||||
const lanChange = ref(locale); | |||||
function logout() { | |||||
const msg = | |||||
(lanChange.value as string) == "zh-cn" | |||||
? "确定退出登录吗?" | |||||
: "Are you sure to log out?"; | |||||
const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice"; | |||||
const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm"; | |||||
const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel"; | |||||
ElMessageBox.confirm(msg, notice, { | |||||
confirmButtonText: confirm, | |||||
cancelButtonText: cancel, | |||||
}).then(() => { | |||||
userInfoPinia.loginOut(); | |||||
router.push(`/login`); | |||||
localStorage.removeItem("AccessToken"); | |||||
}); | |||||
} | |||||
/** | /** | ||||
* 响应式布局容器固定宽度 | * 响应式布局容器固定宽度 | ||||
* | * | ||||
@@ -51,18 +149,7 @@ const { width } = useWindowSize(); | |||||
const WIDTH = 992; | const WIDTH = 992; | ||||
const appStore = useAppStore(); | const appStore = useAppStore(); | ||||
const settingsStore = useSettingsStore(); | |||||
const fixedHeader = computed(() => settingsStore.fixedHeader); | |||||
const showTagsView = computed(() => settingsStore.tagsView); | |||||
const showSettings = computed(() => settingsStore.showSettings); | |||||
const classObj = computed(() => ({ | |||||
hideSidebar: !appStore.sidebar.opened, | |||||
openSidebar: appStore.sidebar.opened, | |||||
withoutAnimation: appStore.sidebar.withoutAnimation, | |||||
mobile: appStore.device === "mobile", | |||||
})); | |||||
// const settingsStore = useSettingsStore(); | |||||
watchEffect(() => { | watchEffect(() => { | ||||
if (width.value < WIDTH) { | if (width.value < WIDTH) { | ||||
@@ -79,6 +166,13 @@ watchEffect(() => { | |||||
} | } | ||||
} | } | ||||
}); | }); | ||||
const routeName = ref(route.meta.name); | |||||
watch( | |||||
() => route.meta.name, | |||||
(newName) => { | |||||
routeName.value = newName; | |||||
} | |||||
); | |||||
function handleOutsideClick() { | function handleOutsideClick() { | ||||
appStore.closeSideBar(false); | appStore.closeSideBar(false); | ||||
@@ -87,47 +181,112 @@ function handleOutsideClick() { | |||||
onMounted(() => {}); | onMounted(() => {}); | ||||
</script> | </script> | ||||
<!-- 新样式 --> | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.app-wrapper { | .app-wrapper { | ||||
&::after { | |||||
display: table; | |||||
clear: both; | |||||
content: ""; | |||||
width: 1920px; | |||||
display: flex; | |||||
} | |||||
.Sidebar { | |||||
width: 230px; | |||||
background-color: #000; | |||||
height: 100vh; | |||||
color: #fff; | |||||
.imgBox { | |||||
width: 100%; | |||||
height: 80px; | |||||
position: relative; | |||||
img { | |||||
max-width: 80%; | |||||
max-height: 80%; | |||||
} | |||||
} | } | ||||
.myRouter { | |||||
position: relative; | |||||
height: calc(100% - 80px); | |||||
padding: 200px 20px 0; | |||||
color: #fff; | |||||
// color: #868593; | |||||
position: relative; | |||||
width: 100%; | |||||
height: 100%; | |||||
e &.mobile.openSidebar { | |||||
position: fixed; | |||||
top: 0; | |||||
} | |||||
} | |||||
&-item { | |||||
display: flex; | |||||
width: 100%; | |||||
height: 50px; | |||||
padding-left: 10px; | |||||
font-size: 20px; | |||||
font-weight: 500; | |||||
line-height: 50px; | |||||
text-align: center; | |||||
cursor: pointer; | |||||
// border-bottom: 2px solid #fff; | |||||
transition: all 0.3s; | |||||
border-radius: 5px; | |||||
margin-bottom: 20px; | |||||
margin-right: 20px; | |||||
border-bottom: 2px solid #fff; | |||||
.icon { | |||||
width: 40px; | |||||
height: 40px; | |||||
color: #fff; | |||||
border-radius: 50%; | |||||
.fixed-header { | |||||
position: fixed; | |||||
top: 0; | |||||
right: 0; | |||||
z-index: 9; | |||||
width: calc(100% - #{$sideBarWidth}); | |||||
transition: width 0.28s; | |||||
} | |||||
.el-icon { | |||||
width: 25px; | |||||
height: 25px; | |||||
font-size: 25px; | |||||
// color: #797a9f; | |||||
color: #fff; | |||||
text-align: center; | |||||
vertical-align: sub; | |||||
} | |||||
} | |||||
.hideSidebar .fixed-header { | |||||
width: calc(100% - 54px); | |||||
} | |||||
&:hover { | |||||
// background: rgba(255, 255, 255, 0.2); | |||||
color: #000; | |||||
background: #fff; | |||||
.el-icon { | |||||
// color: #d4d0ff; | |||||
color: #000; | |||||
} | |||||
} | |||||
} | |||||
.mobile .fixed-header { | |||||
width: 100%; | |||||
.pricing { | |||||
position: absolute; | |||||
bottom: 80px; | |||||
width: calc(100% - 40px); | |||||
text-align: center; | |||||
} | |||||
.API { | |||||
position: absolute; | |||||
bottom: 20px; | |||||
width: calc(100% - 40px); | |||||
text-align: center; | |||||
} | |||||
} | |||||
} | } | ||||
.drawer-bg { | |||||
position: absolute; | |||||
top: 0; | |||||
z-index: 999; | |||||
width: 100%; | |||||
height: 100%; | |||||
background: #000; | |||||
opacity: 0.3; | |||||
.rightBox { | |||||
width: 1690px; | |||||
// background-color: #000; | |||||
.nav { | |||||
position: relative; | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
align-items: center; | |||||
margin-right: 20px; | |||||
width: 100%; | |||||
height: 80px; | |||||
background-color: #000; | |||||
padding: 30px; | |||||
// padding: 30px 30px 0 1500px; | |||||
color: #fff; | |||||
.navItem { | |||||
font-size: 16px; | |||||
margin-right: 30px; | |||||
color: #fff; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
} | } | ||||
</style> | </style> |
@@ -123,6 +123,25 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
}, | }, | ||||
], | ], | ||||
}, | }, | ||||
// 测试页面 | |||||
{ | |||||
path: "/", | |||||
component: Layout, | |||||
redirect: "/moveImg", | |||||
children: [ | |||||
{ | |||||
path: "moveImg", | |||||
component: () => import("@/views/moveImg/index.vue"), | |||||
name: "moveImg", | |||||
meta: { | |||||
title: "moveImg", | |||||
icon: "homepage", | |||||
affix: true, | |||||
name: "moveImg.title", | |||||
}, | |||||
}, | |||||
], | |||||
}, | |||||
// { | // { | ||||
// path: "/dashboard", | // path: "/dashboard", | ||||
// component: Layout, | // component: Layout, | ||||
@@ -3,6 +3,13 @@ body { | |||||
// font-size: 14px; | // font-size: 14px; | ||||
} | } | ||||
.boxCentreImg { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
} | |||||
.inmiddle { | .inmiddle { | ||||
position: absolute; | position: absolute; | ||||
// top: 50%; | // top: 50%; | ||||
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<div class="page flex justify-around"> | <div class="page flex justify-around"> | ||||
<!-- 左侧栏 --> | <!-- 左侧栏 --> | ||||
<div class="left scrolly"> | |||||
<div class="left "> | |||||
<!-- 顶部 --> | <!-- 顶部 --> | ||||
<!-- 选中AiFace --> | <!-- 选中AiFace --> | ||||
<div class="left-top" v-show="showUploadBtn == 1"> | <div class="left-top" v-show="showUploadBtn == 1"> | ||||
@@ -24,6 +24,11 @@ | |||||
<div class="bigImg inmiddle"> | <div class="bigImg inmiddle"> | ||||
<img :src="imgUrl" alt="" class="inmiddle" /> | <img :src="imgUrl" alt="" class="inmiddle" /> | ||||
</div> | </div> | ||||
<!-- 字幕开关 --> | |||||
<div v-if="imgUrl" class="SubtitlesSwitch"> | |||||
<p>{{ $t('createVideo.subtitles') }}</p> | |||||
<el-switch v-model="SubtitlesSwitch" /> | |||||
</div> | |||||
</div> | </div> | ||||
<!-- 选中需要上传的图片前 --> | <!-- 选中需要上传的图片前 --> | ||||
<div class="left-top" v-show="showUploadBtn == 2"> | <div class="left-top" v-show="showUploadBtn == 2"> | ||||
@@ -151,6 +156,7 @@ | |||||
v-if="showFace == 0" | v-if="showFace == 0" | ||||
v-infinite-scroll="loadMoreAiFaceSystem" | v-infinite-scroll="loadMoreAiFaceSystem" | ||||
:infinite-scroll-disabled="overLoadSystem" | :infinite-scroll-disabled="overLoadSystem" | ||||
infinite-scroll-distance="10" | |||||
> | > | ||||
<!-- 上传图片组件 --> | <!-- 上传图片组件 --> | ||||
<div v-if="showFace == 1" class="faceItem" @click="clickAddBtn"> | <div v-if="showFace == 1" class="faceItem" @click="clickAddBtn"> | ||||
@@ -177,6 +183,7 @@ | |||||
v-if="showFace == 1" | v-if="showFace == 1" | ||||
v-infinite-scroll="loadMoreAiFaceUser" | v-infinite-scroll="loadMoreAiFaceUser" | ||||
:infinite-scroll-disabled="overLoadUser" | :infinite-scroll-disabled="overLoadUser" | ||||
infinite-scroll-distance="10" | |||||
> | > | ||||
<!-- 上传图片组件 --> | <!-- 上传图片组件 --> | ||||
<div v-if="showFace == 1" class="faceItem" @click="clickAddBtn"> | <div v-if="showFace == 1" class="faceItem" @click="clickAddBtn"> | ||||
@@ -207,8 +214,7 @@ | |||||
<div | <div | ||||
class="Aipicture" | class="Aipicture" | ||||
v-if="showFace == 2" | v-if="showFace == 2" | ||||
v-infinite-scroll="loadMoreAiFaceUser" | |||||
:infinite-scroll-disabled="overLoadUser" | |||||
> | > | ||||
<div class="title"> | <div class="title"> | ||||
<el-icon><i-ep-Lock /></el-icon> | <el-icon><i-ep-Lock /></el-icon> | ||||
@@ -747,7 +753,7 @@ const AiFaceList = ref([]); //系统相册列表 | |||||
const userAiFaceList = ref([]); //个人相册列表 | const userAiFaceList = ref([]); //个人相册列表 | ||||
const feceItemLoading = ref(false); | const feceItemLoading = ref(false); | ||||
const feceItemLoading2 = ref(false); | const feceItemLoading2 = ref(false); | ||||
const pageSize = ref(30); //加载页数 | |||||
function getAiFaceList(pageNum, pageSize, sendType) { | function getAiFaceList(pageNum, pageSize, sendType) { | ||||
feceItemLoading.value = true; | feceItemLoading.value = true; | ||||
personPhotoList(pageNum, pageSize, sendType) | personPhotoList(pageNum, pageSize, sendType) | ||||
@@ -779,7 +785,7 @@ const overLoadUser = ref(false); //禁用个人相册加载更多 | |||||
//系统相册触底加载更多 | //系统相册触底加载更多 | ||||
function loadMoreAiFaceSystem() { | function loadMoreAiFaceSystem() { | ||||
pageNumSystem.value += 1; | pageNumSystem.value += 1; | ||||
personPhotoList(pageNumSystem.value, 20, 1) | |||||
personPhotoList(pageNumSystem.value, pageSize.value, 1) | |||||
.then((res) => { | .then((res) => { | ||||
AiFaceList.value.push(...res.data.list); | AiFaceList.value.push(...res.data.list); | ||||
if (res.data.list.length == 0) { | if (res.data.list.length == 0) { | ||||
@@ -793,8 +799,9 @@ function loadMoreAiFaceSystem() { | |||||
} | } | ||||
//个人相册触底加载更多 | //个人相册触底加载更多 | ||||
function loadMoreAiFaceUser() { | function loadMoreAiFaceUser() { | ||||
console.log(12333212311); | |||||
pageNumUser.value += 1; | pageNumUser.value += 1; | ||||
personPhotoUserListList(pageNumUser.value, 20, 3) | |||||
personPhotoUserListList(pageNumUser.value, pageSize.value, 3) | |||||
.then((res) => { | .then((res) => { | ||||
if (res.data.list.length == 0) { | if (res.data.list.length == 0) { | ||||
overLoadUser.value = true; | overLoadUser.value = true; | ||||
@@ -837,7 +844,7 @@ async function deleteFaceImg(id) { | |||||
imgUrl.value = null; | imgUrl.value = null; | ||||
faceItemActive.value = null; | faceItemActive.value = null; | ||||
userAiFaceList.value = []; | userAiFaceList.value = []; | ||||
getAiFaceUserList(1, 10, 3); | |||||
getAiFaceUserList(1, pageSize.value, 3); | |||||
pageNumUser.value = 1; | pageNumUser.value = 1; | ||||
overLoadUser.value = false; | overLoadUser.value = false; | ||||
} catch (error) { | } catch (error) { | ||||
@@ -953,7 +960,7 @@ async function changeFile() { | |||||
compressionImgLoad.value = false; | compressionImgLoad.value = false; | ||||
showUploadBtn.value = 4; | showUploadBtn.value = 4; | ||||
userAiFaceList.value = []; | userAiFaceList.value = []; | ||||
getAiFaceUserList(1, 10, 3); | |||||
getAiFaceUserList(1, pageSize.value, 3); | |||||
pageNumUser.value = 1; | pageNumUser.value = 1; | ||||
overLoadUser.value = false; | overLoadUser.value = false; | ||||
faceItemActive.value = res2.data.id; | faceItemActive.value = res2.data.id; | ||||
@@ -1903,6 +1910,10 @@ function copyAnswerContent() { | |||||
} | } | ||||
//#endregion ---------------------------- | //#endregion ---------------------------- | ||||
//#region 字幕部分 | |||||
const SubtitlesSwitch=ref(false) //字幕开关 | |||||
//#endregion ---------------------------- | |||||
//#region | //#region | ||||
//#endregion ---------------------------- | //#endregion ---------------------------- | ||||
@@ -1920,9 +1931,9 @@ const t = globalProperties.$t(string); | |||||
//#region 页面初始化 | //#region 页面初始化 | ||||
onMounted(async () => { | onMounted(async () => { | ||||
getAiFaceList(1, 20, 1); | |||||
getAiFaceList(1, pageSize.value, 1); | |||||
if (AccessToken) { | if (AccessToken) { | ||||
getAiFaceUserList(1, 20, 3); | |||||
getAiFaceUserList(1, pageSize.value, 3); | |||||
await getmusicListPerson( | await getmusicListPerson( | ||||
musicListPageNumPerson.value, | musicListPageNumPerson.value, | ||||
musicListPageSize.value | musicListPageSize.value | ||||
@@ -1963,7 +1974,6 @@ onUnmounted(() => { | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
// height: 1000px; | // height: 1000px; | ||||
height: 1000px; | |||||
height: calc(100vh - 80px); | height: calc(100vh - 80px); | ||||
// padding: 20px 0 0 40px; | // padding: 20px 0 0 40px; | ||||
background-color: #fff; | background-color: #fff; | ||||
@@ -1971,13 +1981,15 @@ onUnmounted(() => { | |||||
} | } | ||||
.left { | .left { | ||||
width: 68%; | width: 68%; | ||||
// height: 860px; | // height: 860px; | ||||
height: 1000px; | |||||
max-height: 100%; | |||||
// height: 1000px; | |||||
// max-height: 100%; | |||||
padding: 20px; | padding: 20px; | ||||
overflow: hidden; | overflow: hidden; | ||||
overflow-y: scroll; | |||||
// overflow-y: scroll; | |||||
height: 100%; | |||||
:deep(.el-input__wrapper) { | :deep(.el-input__wrapper) { | ||||
border: none; | border: none; | ||||
border-bottom: 2px solid #000; | border-bottom: 2px solid #000; | ||||
@@ -1985,6 +1997,7 @@ onUnmounted(() => { | |||||
box-shadow: none; | box-shadow: none; | ||||
} | } | ||||
.el-icon.icon-edit { | .el-icon.icon-edit { | ||||
width: 35px; | width: 35px; | ||||
height: 35px; | height: 35px; | ||||
@@ -1998,8 +2011,10 @@ onUnmounted(() => { | |||||
width: 100%; | width: 100%; | ||||
// height: 65%; | // height: 65%; | ||||
// height: 580px; | // height: 580px; | ||||
height: 65%; | |||||
height: 67%; | |||||
// height: calc(70vh - 80px ); | |||||
z-index: 9999; | |||||
margin-bottom: 10px; | |||||
.uploadBtn { | .uploadBtn { | ||||
position: relative; | position: relative; | ||||
padding: 10px 15px; | padding: 10px 15px; | ||||
@@ -2205,12 +2220,22 @@ onUnmounted(() => { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.SubtitlesSwitch { | |||||
position: absolute; | |||||
right: 0; | |||||
top: 0px; | |||||
padding: 10px; | |||||
border-radius: 20px; | |||||
background-color: #f1f2f6; | |||||
text-align: center; | |||||
} | |||||
} | } | ||||
&-bottom { | &-bottom { | ||||
width: 100%; | width: 100%; | ||||
height: 32%; | |||||
margin-top: 10px; | |||||
height: 30%; | |||||
// height: calc(30vh - 80px ); | |||||
// margin-top: 10px; | |||||
.tab { | .tab { | ||||
padding: 10px; | padding: 10px; | ||||
> div { | > div { | ||||
@@ -2238,16 +2263,17 @@ onUnmounted(() => { | |||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
justify-content: flex-start; | justify-content: flex-start; | ||||
width: 100%; | width: 100%; | ||||
height: 220px; | |||||
// height: 220px; | |||||
height: 90%; | |||||
overflow-y: scroll; | overflow-y: scroll; | ||||
.faceItem { | .faceItem { | ||||
position: relative; | position: relative; | ||||
margin-right: 30px; | margin-right: 30px; | ||||
margin-bottom: 35px; | margin-bottom: 35px; | ||||
width: 150px; | |||||
height: 150px; | |||||
width: 100px; | |||||
height: 100px; | |||||
// padding: 0 25px; | // padding: 0 25px; | ||||
line-height: 150px; | |||||
line-height: 100px; | |||||
text-align: center; | text-align: center; | ||||
border-radius: 50%; | border-radius: 50%; | ||||
background-color: #fbf8f8; | background-color: #fbf8f8; | ||||
@@ -2263,8 +2289,8 @@ onUnmounted(() => { | |||||
right: 0; | right: 0; | ||||
bottom: 0; | bottom: 0; | ||||
z-index: 3; | z-index: 3; | ||||
width: 150px; | |||||
height: 150px; | |||||
width: 100px; | |||||
height: 100px; | |||||
border-radius: 50%; | border-radius: 50%; | ||||
background-color: #fbf8f8; | background-color: #fbf8f8; | ||||
overflow: hidden; | overflow: hidden; | ||||
@@ -2279,7 +2305,7 @@ onUnmounted(() => { | |||||
.deleteIcon { | .deleteIcon { | ||||
position: absolute; | position: absolute; | ||||
top: 0; | top: 0; | ||||
right: 15px; | |||||
right: -5px; | |||||
z-index: 999; | z-index: 999; | ||||
width: 25px; | width: 25px; | ||||
height: 25px; | height: 25px; | ||||
@@ -2291,7 +2317,7 @@ onUnmounted(() => { | |||||
cursor: pointer; | cursor: pointer; | ||||
} | } | ||||
.uploadImg { | .uploadImg { | ||||
line-height: 145px; | |||||
line-height: 100px; | |||||
font-size: 50px; | font-size: 50px; | ||||
font-weight: 700; | font-weight: 700; | ||||
text-align: center; | text-align: center; | ||||
@@ -2413,8 +2439,8 @@ onUnmounted(() => { | |||||
.right { | .right { | ||||
width: 32%; | width: 32%; | ||||
// height: 860px; | // height: 860px; | ||||
height: 1000px; | |||||
max-height: 100%; | |||||
// height: 1000px; | |||||
// max-height: 100%; | |||||
padding: 30px 30px 20px 30px; | padding: 30px 30px 20px 30px; | ||||
background-color: #f1f2f6; | background-color: #f1f2f6; | ||||
border-radius: 30px 0 0 0; | border-radius: 30px 0 0 0; | ||||
@@ -2422,6 +2448,7 @@ onUnmounted(() => { | |||||
z-index: 2; | z-index: 2; | ||||
overflow: hidden; | overflow: hidden; | ||||
overflow-y: scroll; | overflow-y: scroll; | ||||
height: 100%; | |||||
.subscript { | .subscript { | ||||
position: absolute; | position: absolute; | ||||
top: 30px; | top: 30px; | ||||
@@ -0,0 +1,131 @@ | |||||
<template> | |||||
<div class="page"> | |||||
<div class="canvasBox"> | |||||
<canvas class="canvas" id="canvas" width="960" height="540"> | |||||
<!-- 背景图 --> | |||||
<!-- <div class="bjImg"> | |||||
<img src="../../assets/img/lake.jpg" alt="" /> | |||||
</div> --> | |||||
<!-- 数字人 --> | |||||
<!-- <div class="people"></div> --> | |||||
<!-- 素材 --> | |||||
<!-- <div class="other"></div> --> | |||||
</canvas> | |||||
<img | |||||
style="display: none; width: 200px; height: 200px" | |||||
id="bjImg" | |||||
src="../../assets/img/star.png" | |||||
alt="" | |||||
/> | |||||
</div> | |||||
<div class="container"> | |||||
<div class="box red"></div> | |||||
<div class="box white"></div> | |||||
<div class="box green"></div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script setup> | |||||
//#region 导入 | |||||
import { fabric } from "fabric"; | |||||
//#endregion --------------------------- | |||||
//#region 画布交互 | |||||
let canvas = new fabric.Canvas("canvas"); | |||||
//#endregion --------------------------- | |||||
onMounted(() => { | |||||
let canvas = new fabric.Canvas("canvas"); | |||||
let imgElement = document.getElementById("bjImg"); //声明我们的图片 | |||||
let imgInstance = new fabric.Image(imgElement, { | |||||
//设置图片位置和样子 | |||||
// left: 100, | |||||
// top: 100, | |||||
// width: 400, | |||||
// height: 200, | |||||
// angle: 30, //设置图形顺时针旋转角度 | |||||
}); | |||||
console.log(imgInstance); | |||||
canvas.add(imgInstance); | |||||
// canvas.on("mouse:up", function (options) { | |||||
// console.log(options.e.clientX, options.e.clientY); | |||||
// }); | |||||
}); | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.page { | |||||
position: relative; | |||||
padding: 10px; | |||||
} | |||||
.canvasBox { | |||||
// position: absolute; | |||||
// top: 50%; | |||||
// left: 50%; | |||||
// transform: translate(-50%); | |||||
width: 100%; | |||||
height: 100%; | |||||
.canvas-container { | |||||
} | |||||
background-color: green; | |||||
.canvas { | |||||
background-color: skyblue; | |||||
.bjImg { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100px; | |||||
height: 100px; | |||||
z-index: 999; | |||||
img { | |||||
width: 100px; | |||||
height: 100px; | |||||
} | |||||
} | |||||
.people { | |||||
} | |||||
.other { | |||||
} | |||||
} | |||||
} | |||||
</style> | |||||
<style lang="scss" scoped> | |||||
.container { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
width: 80px; | |||||
height: 20px; | |||||
perspective: 500px; | |||||
transition: transform 0.5s; | |||||
} | |||||
.box { | |||||
width: 20px; | |||||
height: 20px; | |||||
transition: transform 0.5s; | |||||
transform-style: preserve-3d; | |||||
} | |||||
.red { | |||||
background-color: red; | |||||
} | |||||
.white { | |||||
background-color: white; | |||||
transform: translateZ(20px); | |||||
} | |||||
.green { | |||||
background-color: green; | |||||
transform: translateZ(-20px); | |||||
} | |||||
.container:hover .box { | |||||
transform: rotateY(180deg); | |||||
} | |||||
</style> |
@@ -0,0 +1,16 @@ | |||||
/** | |||||
* @description:根据状态返回状态名 | |||||
* @param {number} status | |||||
* @return: statusName | |||||
*/ | |||||
export const getStatus = status => { | |||||
if (status == 0) { | |||||
return "manuscript" | |||||
} else if (status == 1 || status == 2 || status == 4 || status == 6) { | |||||
return "generating" | |||||
} else if (status == 3) { | |||||
return "generationFailed" | |||||
} else if (status == 5) { | |||||
return "generationSucceed" | |||||
} | |||||
} |