Skip to content

D
digitalPerson-fe
Commit 6d4e89b3 authored by shirlyn.guo's avatar shirlyn.guo 🤡 Committed by Dazzle Wu
Browse files
Options

feat: 我的作品&预览视频

parent 34120278
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1439 additions and 815 deletions
src/app.vue
View file @ 6d4e89b3
<script setup lang="ts"> <script setup lang="ts">
import { zhCN, dateZhCN } from 'naive-ui' import { dateZhTW, zhTW } from 'naive-ui'
import { ref } from 'vue' import { ref } from 'vue'
import { themeOverrides } from '@/config/theme-config' import { themeOverrides } from '@/config/theme-config'
import { useResizeObserver } from '@vueuse/core' import { useResizeObserver } from '@vueuse/core'
...@@ -8,10 +8,8 @@ import { useDesignSettingStore } from '@/store/modules/design-setting' ...@@ -8,10 +8,8 @@ import { useDesignSettingStore } from '@/store/modules/design-setting'
const designSettingStore = useDesignSettingStore() const designSettingStore = useDesignSettingStore()
const currentLocale = ref({ const currentLocale = ref(zhTW)
zhCN, const currentDateLocale = ref(dateZhTW)
})
const currentDateLocale = ref(dateZhCN)
const rootContainer = ref<HTMLDivElement | null>(null) const rootContainer = ref<HTMLDivElement | null>(null)
...@@ -38,18 +36,20 @@ useResizeObserver(rootContainer, (entries) => { ...@@ -38,18 +36,20 @@ useResizeObserver(rootContainer, (entries) => {
</script> </script>
<template> <template>
<div ref="rootContainer" class="h-full w-full"> <n-dialog-provider>
<NConfigProvider <div ref="rootContainer" class="h-full w-full">
class="h-full w-full" <NConfigProvider
:locale="currentLocale" class="h-full w-full"
:date-locale="currentDateLocale" :locale="currentLocale"
:theme-overrides="themeOverrides" :date-locale="currentDateLocale"
> :theme-overrides="themeOverrides"
<RouterView v-slot="{ Component }"> >
<Component :is="Component" /> <RouterView v-slot="{ Component }">
</RouterView> <Component :is="Component" />
</NConfigProvider> </RouterView>
</div> </NConfigProvider>
</div>
</n-dialog-provider>
<!-- <NThemeEditor /> --> <!-- <NThemeEditor /> -->
</template> </template>
src/layout/components/navbar/navbar.vue deleted 100644 → 0
View file @ 34120278
<script setup lang="ts">
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { useDesignSettingStore } from '@/store/modules/design-setting'
import { useUserStore } from '@/store/modules/user'
import { readonly } from 'vue'
import { useRouter } from 'vue-router'
const defaultAvatar = 'https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20221018/1666079174947.png'
const designSettingStore = useDesignSettingStore()
const userStore = useUserStore()
const router = useRouter()
// const currentRoute = useRoute()
const avatarOptions = readonly([
{
label: '退出登录',
key: 1,
},
])
function handleSidebarDisplayStatusChange(status: 'collapse' | 'expand') {
if (designSettingStore.sidebarDisplayStatus === 'hidden') {
designSettingStore.changeShowSidebarDrawer(true)
return
}
designSettingStore.toggleSidebarDisplayStatus(status)
}
function handleDropdownSelect(key: number) {
if (key === 1) {
userStore.logout().then(() => {
router.push({ name: 'Login' })
})
}
}
// function handleRefreshPage() {
// router.replace({ path: currentRoute.fullPath })
// }
</script>
<template>
<div class="flex select-none justify-between bg-white shadow-[0_1px_4px_rgba(0,21,41,0.08)]">
<div class="flex">
<div class="flex items-center px-3">
<CustomIcon
v-show="designSettingStore.sidebarDisplayStatus !== 'expand'"
class="h-5 w-5 cursor-pointer"
icon="ant-design:menu-unfold-outlined"
@click="handleSidebarDisplayStatusChange('expand')"
/>
<CustomIcon
v-show="designSettingStore.sidebarDisplayStatus === 'expand'"
class="h-5 w-5 cursor-pointer"
icon="ant-design:menu-fold-outlined"
@click="handleSidebarDisplayStatusChange('collapse')"
/>
</div>
<!-- <div class="flex items-center px-3">
<CustomIcon icon="mdi:reload" class="h-5 w-5 cursor-pointer" @click="handleRefreshPage" />
</div> -->
</div>
<div class="mr-5 flex sm:mr-6">
<div class="flex cursor-pointer items-center px-2">
<NDropdown trigger="click" :options="avatarOptions" @select="handleDropdownSelect">
<div class="flex h-full items-center">
<NAvatar round :size="30" object-fit="cover" :src="userStore.userInfo.avatar || defaultAvatar" />
<div class="ml-2 max-w-24 truncate text-base">{{ userStore.userInfo.userName }}</div>
</div>
</NDropdown>
</div>
</div>
</div>
</template>
src/layout/components/sidebar-logo/sidebar-logo.vue deleted 100644 → 0
View file @ 34120278
<script setup lang="ts">
import { useDesignSettingStore } from '@/store/modules/design-setting'
const designSettingStore = useDesignSettingStore()
</script>
<template>
<div class="flex h-[64px] cursor-pointer items-center justify-center px-2">
<div class="h-[32px] w-[32px] shrink-0 bg-[url('@/assets/images/logo.png')] bg-cover"></div>
<Transition name="logo">
<div v-show="designSettingStore.sidebarDisplayStatus !== 'collapse'" class="ml-2 truncate text-lg font-semibold">
后台管理系统
</div>
</Transition>
</div>
</template>
<style lang="scss" scoped>
// .logo-enter-active,
// .logo-leave-active {
// transition: opacity 0.09s ease-in;
// }
// .logo-enter-from,
// .logo-leave-to {
// opacity: 0;
// }
</style>
src/layout/components/sidebar/sidebar.vue deleted 100644 → 0
View file @ 34120278
<script setup lang="ts">
import { sidebarMenus } from '@/router/index'
import { useDesignSettingStore } from '@/store/modules/design-setting'
import SidebarLogo from '../sidebar-logo/sidebar-logo.vue'
import { type MenuOption } from '@/router/utils'
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
const designSettingStore = useDesignSettingStore()
const currentRoute = useRoute()
const router = useRouter()
const menuValue = ref(currentRoute.meta.key)
watch(
() => currentRoute.fullPath,
() => {
menuValue.value = currentRoute.meta.key
},
)
function handleUpdateValue(_key: string, menuItemOption: MenuOption) {
router.push({ name: menuItemOption.routeName })
// menuValue.value = key
}
function handleLogoClick() {
router.push({ name: 'Root' })
}
</script>
<template>
<SidebarLogo @click="handleLogoClick" />
<NMenu
:options="sidebarMenus"
:collapsed-width="64"
:collapsed-icon-size="20"
:indent="24"
:icon-size="20"
:collapsed="designSettingStore.sidebarDisplayStatus === 'collapse'"
:value="menuValue"
@update:value="handleUpdateValue"
/>
</template>
src/layout/index.vue deleted 100644 → 0
View file @ 34120278
<script setup lang="ts">
import Sidebar from './components/sidebar/sidebar.vue'
import NavBar from './components/navbar/navbar.vue'
import { useDesignSettingStore } from '@/store/modules/design-setting'
const designSettingStore = useDesignSettingStore()
const layoutSideWidth = 210
function handleLayoutSideCollapsedChange(collapsed: boolean) {
designSettingStore.toggleSidebarDisplayStatus(collapsed ? 'collapse' : 'expand')
}
function handleDrawerMackClick() {
designSettingStore.changeShowSidebarDrawer(false)
}
</script>
<template>
<NLayout has-sider position="absolute">
<NLayoutSider
v-show="designSettingStore.sidebarDisplayStatus !== 'hidden'"
class="shadow-[2px_0_8px_0_rgba(29,35,41,0.05)]"
show-trigger="bar"
collapse-mode="width"
:collapsed-width="64"
:collapsed="designSettingStore.sidebarDisplayStatus === 'collapse'"
:width="layoutSideWidth"
:on-update:collapsed="handleLayoutSideCollapsedChange"
>
<Sidebar />
</NLayoutSider>
<NDrawer
v-model:show="designSettingStore.showSidebarDrawer"
:width="layoutSideWidth"
:close-on-esc="false"
placement="left"
display-directive="show"
:on-mask-click="handleDrawerMackClick"
>
<Sidebar />
</NDrawer>
<NLayout content-class="layout-content">
<NLayoutHeader class="box-border h-[64px] flex-none">
<NavBar class="h-full" />
</NLayoutHeader>
<NLayoutContent class="main-content-wrapper flex-1">
<main class="box-border min-h-full p-4">
<RouterView v-slot="{ Component }">
<Transition appear name="fade-slide" mode="out-in">
<Component :is="Component" />
</Transition>
</RouterView>
</main>
<!-- <NLayoutFooter bordered>版权</NLayoutFooter> -->
</NLayoutContent>
</NLayout>
</NLayout>
</template>
<style lang="scss" scoped>
:deep(.layout-content) {
@apply flex flex-col bg-[#f5f7f9];
}
:deep(.main-content-wrapper) {
@apply bg-[#f5f7f9];
// ::-webkit-scrollbar {
// width: 8px;
// height: 8px;
// }
// ::-webkit-scrollbar-track {
// width: 6px;
// background: rgba(#101f1c, 0.1);
// border-radius: 2em;
// }
// ::-webkit-scrollbar-thumb {
// cursor: pointer;
// background-color: rgba(144, 147, 153, 20%);
// background-clip: padding-box;
// // min-height: 28px;
// border-radius: 2em;
// transition: background-color 0.3s;
// }
// ::-webkit-scrollbar-thumb:hover {
// background-color: rgba(144, 147, 153, 30%);
// }
}
.fade-slide-leave-active,
.fade-slide-enter-active {
transition: all 0.3s;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
src/router/modules/home.ts
View file @ 6d4e89b3
import { type RouteRecordRaw } from 'vue-router' import { type RouteRecordRaw } from 'vue-router'
// import Layout from '@/layout/index.vue' // import Layout from '@/layout/index.vue'
import Home from '@/views/home/home.vue' import Index from '@/views/index/index.vue'
// export default [ // export default [
// { // {
...@@ -35,6 +35,30 @@ export default [ ...@@ -35,6 +35,30 @@ export default [
rank: 1001, rank: 1001,
title: '首页', title: '首页',
}, },
component: Home, component: Index,
children: [
{
path: '/',
redirect: 'home',
},
{
path: 'home',
name: 'Home',
meta: {
title: '首页',
rank: 1001,
},
component: () => import('@/views/home/home.vue'),
},
{
path: 'opus',
name: 'MyWorks',
meta: {
title: '我的作品',
rank: 1001,
},
component: () => import('@/views/opus/opus.vue'),
},
],
}, },
] as RouteRecordRaw[] ] as RouteRecordRaw[]
src/views/home/components/bigitalPerson-creation.vue 0 → 100644
View file @ 6d4e89b3
<script setup lang="ts">
import { Right } from '@icon-park/vue-next'
</script>
<template>
<div class="mb-[16px] flex rounded-[16px]">
<div
class="border-1 flex h-[168px] w-[401.5px] rounded-[20px] bg-gradient-to-r from-[#4b87ff] to-[#82b9ff] text-[#ffffff]"
>
<div class="ml-[31px] mt-[18px]">
<div class="h-[80px] w-[238px]">
<div class="text-[20px] font-semibold leading-[27px]">照片數字人</div>
<div class="mt-[10px] text-[14px] font-normal">讓照片中的人開口説話，照片成爲視頻</div>
</div>
<div
class="text-align-center mt-[20px] h-[35px] w-[90px] cursor-pointer rounded-[6px] bg-[#fff3] text-[14px] leading-[35px] text-[#fff] hover:bg-[#fff]/[.4]"
>
<span>立即創作</span>
</div>
</div>
<div class="ml-[15px] mr-[15px] mt-[67px]">
<img src="@/assets/ecard.png" alt="照片數字人" />
</div>
</div>
<div
class="border-1 ml-[20px] flex h-[173px] w-[401.5px] rounded-[20px] bg-gradient-to-r from-[#30b5f2] to-[#37d1ff] text-[#ffffff]"
>
<div class="ml-[31px] mt-[18px]">
<div class="h-[80px] w-[238px]">
<div class="text-[20px] font-semibold leading-[27px]">數字人生成</div>
<div class="mt-[10px] text-[14px] font-normal">2D、3D數字人，一句話生成視頻</div>
</div>
<div
class="text-align-center mt-[20px] h-[35px] w-[90px] cursor-pointer rounded-[6px] bg-[#fff3] text-[14px] leading-[35px] text-[#fff] hover:bg-[#fff]/[.4]"
>
<span>立即創作</span>
</div>
</div>
<div class="ml-[15px] mr-[15px] mt-[75px]">
<img src="@/assets/videoSlide.png" alt="數字人生成" />
</div>
</div>
<div class="border-1 ml-[20px] h-[173px] w-[325px] rounded-[20px] bg-[#ffffff] text-[14px]">
<div>
<div class="flex text-[16px]">
<div class="ml-[20px] mt-[16px] h-[56px] w-[56px] overflow-hidden rounded-full">
<n-avatar
round
:size="56"
src="https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png"
/>
</div>
<div class="ml-[14px] mt-[26px]">廣州超聯軟件</div>
</div>
<div class="mt-[25px] flex">
<div class="mr-[50px]">
<div class="ml-[70px] text-[16px] text-[#101010]">12</div>
<div class="ml-[72px] mt-[6px]">創作</div>
</div>
<div class="h-[45px] w-[1px] bg-[#BBBBBB]"></div>
<div class="flex">
<div class="ml-[56px]">
<div class="text-[16px] text-[#101010]">940</div>
<div class="mt-[6px]">餘額</div>
</div>
<div class="ml-[15px] h-[24px] cursor-pointer leading-[24px] text-[#036CFD]">充值</div>
<div class="mt-[5px] cursor-pointer">
<Right theme="outline" size="15" fill="#036CFD" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
src/views/home/components/recent-creation.vue
View file @ 6d4e89b3
<script setup lang="ts"></script> <script setup lang="ts">
import { Right } from '@icon-park/vue-next'
</script>
<template> <template>
<div class="rounded-[16px] bg-white px-[24px] pb-[16px] pt-[24px]"> <div class="rounded-[16px] bg-white px-[24px] pb-[16px] pt-[24px]">
...@@ -6,7 +8,7 @@ ...@@ -6,7 +8,7 @@
最近創作 最近創作
<div class="flex h-[22px] cursor-pointer items-center text-[14px] text-[#5b647a]"> <div class="flex h-[22px] cursor-pointer items-center text-[14px] text-[#5b647a]">
<div class="">查看全部</div> <div class="">查看全部</div>
<CustomIcon class="h-[16px] w-[16px]" icon="ic:sharp-keyboard-arrow-right"></CustomIcon> <Right theme="outline" size="16" fill="#5b647a" />
</div> </div>
</div> </div>
<div class="flex flex-wrap justify-between"> <div class="flex flex-wrap justify-between">
......
src/views/home/components/template-preview.vue → src/views/home/components/template-preview-modal.vue
View file @ 6d4e89b3
<script setup lang="ts"> <script setup lang="ts">
const visible = defineModel<boolean>() import { Close } from '@icon-park/vue-next'
const PreviewModalVisible = defineModel<boolean>()
const props = defineProps<{ const props = defineProps<{
imageUrl: string selectedTemplate: { imageUrl: string; videoUrl: string }
}>() }>()
function handleClose() { function handleClose() {
visible.value = false PreviewModalVisible.value = false
} }
</script> </script>
<template> <template>
<n-modal v-model:show="visible"> <n-modal v-model:show="PreviewModalVisible">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<div class="h-[603px] w-[800px] rounded-lg bg-white"> <div class="h-[603px] w-[800px] rounded-lg bg-white">
<div class="flex justify-between px-[24px] pt-[24px] text-[16px]"> <div class="flex justify-between px-[24px] pt-[24px] text-[16px]">
<span>企业宣传</span> <span>企業宣傳</span>
<CustomIcon <Close theme="outline" size="18" fill="#00000073" class="cursor-pointer" @click="handleClose" />
class="h-[20px] w-[20px] cursor-pointer text-[#000000]/[0.45]"
icon="ic:sharp-close"
@click="handleClose"
></CustomIcon>
</div> </div>
<div class="px-[24px] pb-[24px] pt-[16px]"> <div class="px-[24px] pb-[24px] pt-[16px]">
<div class="flex justify-center rounded-[16px] bg-[#f3f4fb]"> <div class="flex justify-center rounded-[16px] bg-[#f3f4fb]">
<div class="relative flex h-[448px] w-[752px] items-center justify-center rounded-[16px] bg-[#f3f4fb]"> <div class="relative flex h-[448px] w-[752px] items-center justify-center rounded-[16px] bg-[#f3f4fb]">
<img <video
:src="props.imageUrl" :src="props.selectedTemplate.videoUrl"
class="absolute inset-0 aspect-[1] h-[448px] w-[752px] cursor-pointer object-contain transition-transform duration-300 ease-in-out" :poster="props.selectedTemplate.imageUrl"
/> class="h-[448px] w-[752px]"
autoplay
controls
></video>
</div> </div>
</div> </div>
<div class="mt-[24px] flex justify-end"> <div class="mt-[24px] flex justify-end">
<button <button
class="!mr-[12px] box-content !h-[38px] !w-[74px] rounded-[6px] border-[1px] border-solid border-[#dde3f0] px-[10px] outline-none hover:border-[#2468f2] hover:text-[#2468f2]" class="!mr-[12px] box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] px-[10px] outline-none transition-all duration-300 hover:border-[#2468f2] hover:text-[#2468f2]"
@click="handleClose" @click="handleClose"
> >
取消 取消
</button> </button>
<button <button
class="same-btn !box-content !h-[38px] !w-[74px] rounded-[6px] border-[1px] border-solid border-[#dde3f0] bg-gradient-to-r from-[#30b5f2] to-[#2468f2] px-[10px] text-[#ffffff]" class="!box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] bg-gradient-to-r from-[#30b5f2] to-[#2468f2] px-[10px] text-[#ffffff] transition-all duration-300 hover:from-[#30b5f2] hover:to-[#528eff]"
> >
做同款 做同款
</button> </button>
......
src/views/home/home.vue
View file @ 6d4e89b3
<script setup lang="ts"> <script setup lang="ts">
import Layout from './layout/index.vue' import BigitalPersonCreation from './components/bigitalPerson-creation.vue'
import RecentCreation from './components/recent-creation.vue'
import RecommendTemplate from './components/recommend-template.vue'
</script> </script>
<template> <template>
<Layout /> <BigitalPersonCreation />
<RecentCreation />
<RecommendTemplate />
</template> </template>
src/views/home/layout/header-bar.vue deleted 100644 → 0
View file @ 34120278
<script setup lang="ts"></script>
<template>
<header class="flex h-[56px] justify-between">
<div class="font-600 flex items-center pl-4 text-xl">萃想智能云创</div>
<div class="flex items-center pr-4">
<div class="mx-6">
<n-button class="!rounded-[6px]" color="#ffecd4" text-color="#151b26">
<template #icon><CustomIcon class="text-lg" icon="mingcute:pig-money-line" /></template>
<span class="text-[14px]">充值</span>
</n-button>
</div>
<n-avatar
class="cursor-pointer"
round
size="small"
object-fit="cover"
src="https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png"
/>
</div>
</header>
</template>
src/views/home/layout/main-content.vue deleted 100644 → 0
View file @ 34120278
<script setup lang="ts">
import RecentCreation from '../components/recent-creation.vue'
import RecommendTemplate from '../components/recommend-template.vue'
</script>
<template>
<main>
<RecentCreation />
<RecommendTemplate />
</main>
</template>
src/views/home/templateData.ts 0 → 100644
View file @ 6d4e89b3
This diff is collapsed.
src/views/index/index.vue 0 → 100644
View file @ 6d4e89b3
<script setup lang="ts">
import Layout from './layout/index.vue'
</script>
<template>
<Layout />
</template>
src/views/index/layout/header-bar.vue 0 → 100644
View file @ 6d4e89b3
<script setup lang="ts">
import { NDropdown } from 'naive-ui'
import { h } from 'vue'
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { NAvatar } from 'naive-ui'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { Right, Logout } from '@icon-park/vue-next'
import { Icon } from '@icon-park/vue-next/lib/runtime'
const router = useRouter()
const userStore = useUserStore()
const options = [
{
key: 'nickName',
type: 'render',
render: renderCustomHeader,
},
{
label: '购买记录',
key: 'purchaseRecord',
icon: renderIcon(Right),
},
{
label: '使用记录',
key: 'usageRecord',
icon: renderIcon(Right),
},
{
type: 'divider',
key: 'd1',
},
{
label: '退出登录',
key: 'logout',
icon: renderIcon(Logout),
},
]
function renderIcon(icon: Icon) {
return () => {
return h(icon, {
theme: 'outline',
size: 15,
fill: '#333639',
})
}
}
function renderCustomHeader() {
return h('div', [
h('div', { class: 'flex' }, [
h(NAvatar, {
round: true,
class: 'w-[50px] h-[50px] mr-[6px] ml-[15px] mt-[10px]',
src: 'https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png',
}),
h('div', { class: 'text-[16px] mt-[20px] ml-[3px]' }, ['廣州超聯軟件']),
]),
h('div', { class: 'flex items-center justify-between mt-[10px] mb-[8px] ml-[15px]' }, [
h('div', ['灵豆余额']),
h('div', { class: 'flex' }, [
h('span', { class: 'mr-[5px] text-[14px]' }, ['960']),
h('img', {
class: 'mr-[9px] w-[16px] h-[16px] mt-[1px] ml-[5px]',
src: new URL('@/assets/iconPark-vicia-faba1@1x.png', import.meta.url).href,
}),
]),
]),
])
}
async function handleSelect(key: string | number) {
if (key === 'purchaseRecord') {
console.log('购买记录')
} else if (key === 'usageRecord') {
console.log('使用记录')
} else if (key === 'logout') {
await userStore.logout()
router.replace({ name: 'Login' })
window.$message.success('成功退出登錄')
return
}
}
</script>
<template>
<header class="flex h-[56px] justify-between">
<div class="font-600 flex items-center pl-4 text-xl">萃想智能云创</div>
<div class="flex items-center pr-4">
<div class="mx-6">
<n-button class="!rounded-[6px]" color="#ffecd4" text-color="#151b26">
<template #icon><CustomIcon class="text-lg" icon="mingcute:pig-money-line" /></template>
<span class="text-[14px]">充值</span>
</n-button>
</div>
<NDropdown :options="options" trigger="hover" @select="handleSelect">
<NAvatar
class="cursor-pointer"
round
size="small"
object-fit="cover"
src="https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png"
/>
</NDropdown>
</div>
</header>
</template>
<style lang="scss">
.v-binder-follower-content {
width: 210px;
margin-left: -80px;
}
.n-dropdown-menu {
border-radius: 10px !important;
.n-avatar {
width: 45px !important;
height: 45px !important;
}
.n-dropdown-divider {
width: 90%;
margin: auto !important;
}
.n-dropdown-option .n-dropdown-option-body {
flex-direction: row-reverse;
.n-icon svg {
width: 20px;
height: 20px;
}
}
}
</style>
src/views/index/layout/main-content.vue 0 → 100644
View file @ 6d4e89b3
<script setup lang="ts"></script>
<template>
<main>
<RouterView />
</main>
</template>
src/views/home/layout/side-bar.vue → src/views/index/layout/side-bar.vue
View file @ 6d4e89b3
<script setup lang="ts"> <script setup lang="ts">
import { shallowReadonly } from 'vue' import { shallowReadonly } from 'vue'
import type { MenuOption } from 'naive-ui' import type { MenuOption } from 'naive-ui'
import { useRouter } from 'vue-router'
const router = useRouter()
const menuOptions = shallowReadonly<MenuOption[]>([ const menuOptions = shallowReadonly<MenuOption[]>([
{ {
...@@ -9,8 +12,14 @@ const menuOptions = shallowReadonly<MenuOption[]>([ ...@@ -9,8 +12,14 @@ const menuOptions = shallowReadonly<MenuOption[]>([
key: 'videos', key: 'videos',
children: [ children: [
{ {
label: '工作台', label: '工作颱',
key: 'workbench', key: 'home',
onClick: () => router.push({ name: 'Home' }),
},
{
label: '我的作品',
key: 'opus',
onClick: () => router.push({ name: 'MyWorks' }),
}, },
], ],
}, },
...@@ -20,7 +29,7 @@ const menuOptions = shallowReadonly<MenuOption[]>([ ...@@ -20,7 +29,7 @@ const menuOptions = shallowReadonly<MenuOption[]>([
<template> <template>
<section class="h-full pr-[24px]"> <section class="h-full pr-[24px]">
<div class="h-full rounded-[16px] bg-white p-[16px]"> <div class="h-full rounded-[16px] bg-white p-[16px]">
<n-menu value="workbench" :options="menuOptions" /> <n-menu :options="menuOptions" />
</div> </div>
</section> </section>
</template> </template>
src/views/login/login.vue
View file @ 6d4e89b3
...@@ -230,7 +230,7 @@ function handleLoginSubmit(method: LoginMethod) { ...@@ -230,7 +230,7 @@ function handleLoginSubmit(method: LoginMethod) {
}) })
const redirectUrl = decodeURIComponent((route.query.redirect as string) || '') const redirectUrl = decodeURIComponent((route.query.redirect as string) || '')
router.replace({ path: redirectUrl ? redirectUrl : '/' }) router.replace({ path: redirectUrl ? redirectUrl : '/home' })
window.$message.success('登錄成功') window.$message.success('登錄成功')
......
src/views/opus/opus.vue 0 → 100644
View file @ 6d4e89b3
This diff is collapsed.
src/views/opus/opusData.ts 0 → 100644
View file @ 6d4e89b3
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment