feat(阶段1): 搬入 ojnext 为 apps/web，未改业务代码
This commit is contained in:
356
apps/web/src/shared/components/Header.vue
Normal file
356
apps/web/src/shared/components/Header.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { RouterLink } from "vue-router"
|
||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||
import { useLearnProgress } from "shared/composables/learnProgress"
|
||||
import { useAuthModalStore } from "shared/store/authModal"
|
||||
import { useScreenModeStore } from "shared/store/screenMode"
|
||||
import { logout } from "../api"
|
||||
import { useConfigStore } from "../store/config"
|
||||
import { useUserStore } from "../store/user"
|
||||
import { trickOrTreat } from "utils/functions"
|
||||
|
||||
const userStore = useUserStore()
|
||||
const configStore = useConfigStore()
|
||||
const authStore = useAuthModalStore()
|
||||
const screenModeStore = useScreenModeStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const { isMobile, isDesktop } = useBreakpoints()
|
||||
const { learnStep } = useLearnProgress()
|
||||
|
||||
const isDark = useDark()
|
||||
|
||||
function toggleDark() {
|
||||
const x = window.innerWidth / 2
|
||||
const y = window.innerHeight / 2
|
||||
const radius = Math.hypot(x, y)
|
||||
if (!document.startViewTransition) {
|
||||
isDark.value = !isDark.value
|
||||
return
|
||||
}
|
||||
document
|
||||
.startViewTransition(() => {
|
||||
isDark.value = !isDark.value
|
||||
})
|
||||
.ready.then(() => {
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: [
|
||||
`circle(0px at ${x}px ${y}px)`,
|
||||
`circle(${radius}px at ${x}px ${y}px)`,
|
||||
],
|
||||
},
|
||||
{
|
||||
duration: 400,
|
||||
easing: "ease-in-out",
|
||||
pseudoElement: "::view-transition-new(root)",
|
||||
},
|
||||
)
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 从 store 中获取屏幕模式状态
|
||||
const { screenMode } = storeToRefs(screenModeStore)
|
||||
|
||||
const names = [
|
||||
"man-with-chinese-cap-1",
|
||||
"cat-face",
|
||||
"china",
|
||||
"chicken",
|
||||
"eyes",
|
||||
"elephant",
|
||||
"hear-no-evil-monkey",
|
||||
"panda-face",
|
||||
"penguin-1",
|
||||
"rooster",
|
||||
"star-struck-1",
|
||||
"tomato",
|
||||
"rocket",
|
||||
"sparkles",
|
||||
"money-bag",
|
||||
"ghost",
|
||||
"game-dice",
|
||||
"ewe-1",
|
||||
"artist-palette",
|
||||
"baby-bottle",
|
||||
]
|
||||
|
||||
function getRandomAvatar() {
|
||||
const name = names[Math.floor(Math.random() * names.length)]
|
||||
return `streamline-emojis:${name}`
|
||||
}
|
||||
|
||||
const avatar = ref(getRandomAvatar())
|
||||
|
||||
const envVersion = computed(() => {
|
||||
if (import.meta.env.PUBLIC_ENV === "test") {
|
||||
return "测试版"
|
||||
} else if (import.meta.env.PUBLIC_ENV === "dev") {
|
||||
return "开发版"
|
||||
}
|
||||
return ""
|
||||
})
|
||||
|
||||
const showEnvVersion = computed(() => {
|
||||
return (
|
||||
import.meta.env.PUBLIC_ENV === "test" ||
|
||||
import.meta.env.PUBLIC_ENV === "dev"
|
||||
)
|
||||
})
|
||||
|
||||
const active = computed(() => {
|
||||
const path = route.path.split("/")[1] || "problem"
|
||||
return !["user", "setting"].includes(path) ? path : ""
|
||||
})
|
||||
|
||||
async function handleLogout() {
|
||||
await logout()
|
||||
userStore.clearProfile()
|
||||
router.replace("/")
|
||||
}
|
||||
|
||||
function handleToggleDemoMode() {
|
||||
const entering = !userStore.demoMode
|
||||
userStore.toggleDemoMode()
|
||||
// 进入演示模式时若正停在后台页面，当前界面已经失去权限，必须主动退出去
|
||||
if (entering && route.path.startsWith("/admin")) {
|
||||
router.push("/")
|
||||
}
|
||||
}
|
||||
|
||||
function renderIcon(icon: string) {
|
||||
return () => h(Icon, { icon, width: 20 })
|
||||
}
|
||||
|
||||
function learnLink(type: "python" | "c") {
|
||||
return `/learn/${type}/${learnStep.value[type].toString().padStart(2, "0")}`
|
||||
}
|
||||
|
||||
const menus = computed<MenuOption[]>(() => [
|
||||
{
|
||||
label: "自学",
|
||||
key: "learn",
|
||||
icon: renderIcon("fluent-emoji:books"),
|
||||
children: [
|
||||
{
|
||||
label: () =>
|
||||
h(
|
||||
RouterLink,
|
||||
{ to: learnLink("python") },
|
||||
{ default: () => "Python" },
|
||||
),
|
||||
key: "learn-python",
|
||||
},
|
||||
{
|
||||
label: () =>
|
||||
h(RouterLink, { to: learnLink("c") }, { default: () => "C语言" }),
|
||||
key: "learn-c",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: () => h(RouterLink, { to: "/" }, { default: () => "题目" }),
|
||||
key: "problem",
|
||||
icon: renderIcon("fluent-emoji:memo"),
|
||||
},
|
||||
{
|
||||
label: () =>
|
||||
h(RouterLink, { to: "/problemset" }, { default: () => "题单" }),
|
||||
key: "problemset",
|
||||
icon: renderIcon("fluent-emoji:clipboard"),
|
||||
},
|
||||
{
|
||||
label: () =>
|
||||
h(RouterLink, { to: "/submission" }, { default: () => "提交" }),
|
||||
key: "submission",
|
||||
icon: renderIcon("fluent-emoji:inbox-tray"),
|
||||
show: userStore.showSubmissions,
|
||||
},
|
||||
{
|
||||
label: () => h(RouterLink, { to: "/contest" }, { default: () => "比赛" }),
|
||||
key: "contest",
|
||||
icon: renderIcon("fluent-emoji:chequered-flag"),
|
||||
},
|
||||
{
|
||||
label: () => h(RouterLink, { to: "/rank" }, { default: () => "排名" }),
|
||||
key: "rank",
|
||||
icon: renderIcon("fluent-emoji:trophy"),
|
||||
},
|
||||
{
|
||||
label: () => h(RouterLink, { to: "/class/pk" }, { default: () => "班级" }),
|
||||
show: false,
|
||||
key: "class",
|
||||
icon: renderIcon("fluent-emoji:crossed-swords"),
|
||||
},
|
||||
{
|
||||
label: () =>
|
||||
h(RouterLink, { to: "/announcement" }, { default: () => "公告" }),
|
||||
key: "announcement",
|
||||
icon: renderIcon("fluent-emoji:loudspeaker"),
|
||||
},
|
||||
{
|
||||
label: () =>
|
||||
h(
|
||||
RouterLink,
|
||||
{ to: userStore.isSuperAdmin ? "/admin" : "/admin/problem/list" },
|
||||
{ default: () => "后台" },
|
||||
),
|
||||
show: userStore.isAdminRole,
|
||||
key: "admin",
|
||||
icon: renderIcon("fluent-emoji:gear"),
|
||||
},
|
||||
])
|
||||
|
||||
const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
|
||||
{
|
||||
label: "我的主页",
|
||||
key: "home",
|
||||
icon: renderIcon("streamline-ultimate-color:newspaper-fold"),
|
||||
props: {
|
||||
onClick: () => router.push("/user"),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "我的消息",
|
||||
key: "message",
|
||||
show: false,
|
||||
icon: renderIcon("streamline-emojis:herb"),
|
||||
props: {
|
||||
onClick: () => router.push("/message"),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "我的提交",
|
||||
key: "status",
|
||||
icon: renderIcon("streamline-ultimate-color:analytics-bars-3d"),
|
||||
props: {
|
||||
onClick: () => router.push("/submission?myself=1"),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "我的设置",
|
||||
key: "setting",
|
||||
icon: renderIcon("streamline-emojis:musical-score"),
|
||||
props: {
|
||||
onClick: () => router.push("/setting"),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "智能分析",
|
||||
key: "ai-analysis",
|
||||
icon: renderIcon("vscode-icons:file-type-gemini"),
|
||||
props: {
|
||||
onClick: () => router.push("/ai-analysis"),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: userStore.demoMode ? "退出演示" : "进入演示",
|
||||
key: "demo-mode",
|
||||
show: userStore.canToggleDemoMode,
|
||||
icon: renderIcon("fluent-emoji:graduation-cap"),
|
||||
props: { onClick: handleToggleDemoMode },
|
||||
},
|
||||
{ type: "divider" },
|
||||
{
|
||||
label: "退出",
|
||||
key: "logout",
|
||||
icon: renderIcon("streamline-ultimate-color:coffee-cold"),
|
||||
props: { onClick: handleLogout },
|
||||
},
|
||||
])
|
||||
|
||||
function goHome() {
|
||||
router.push("/")
|
||||
}
|
||||
|
||||
function handleMenuSelect(key: string) {
|
||||
if (key === "dont-click") {
|
||||
trickOrTreat()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex justify="space-between" align="center">
|
||||
<n-flex align="center">
|
||||
<n-flex align="center" class="title" @click="goHome">
|
||||
<Icon icon="streamline-emojis:dog" :height="30"></Icon>
|
||||
<div>{{ configStore.config?.website_name }}</div>
|
||||
<div v-if="showEnvVersion">({{ envVersion }})</div>
|
||||
</n-flex>
|
||||
<div>
|
||||
<n-menu
|
||||
v-if="isDesktop"
|
||||
mode="horizontal"
|
||||
:options="menus"
|
||||
:value="active"
|
||||
@update:value="handleMenuSelect"
|
||||
/>
|
||||
</div>
|
||||
</n-flex>
|
||||
<n-flex align="center">
|
||||
<n-dropdown
|
||||
v-if="isMobile"
|
||||
:options="menus"
|
||||
size="large"
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
<n-button>
|
||||
<Icon icon="fluent-emoji:artist-palette" height="20"></Icon>
|
||||
<span style="padding-left: 8px">菜单</span>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
<n-button
|
||||
v-if="
|
||||
isDesktop &&
|
||||
(route.name === 'problem' || route.name === 'contest problem')
|
||||
"
|
||||
@click="() => screenModeStore.switchScreenMode()"
|
||||
>
|
||||
{{ screenMode }}
|
||||
</n-button>
|
||||
<div v-if="userStore.isFinished">
|
||||
<n-dropdown v-if="userStore.isAuthed" :options="options" size="large">
|
||||
<n-button>
|
||||
<Icon :icon="avatar" height="20"></Icon>
|
||||
<span style="padding-left: 8px">
|
||||
{{ userStore.user!.username }}
|
||||
</span>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
<n-flex align="center" v-else>
|
||||
<n-button
|
||||
secondary
|
||||
type="primary"
|
||||
@click="authStore.openLoginModal()"
|
||||
>
|
||||
登录
|
||||
</n-button>
|
||||
<n-button
|
||||
tertiary
|
||||
v-if="configStore.config?.allow_register"
|
||||
@click="authStore.openSignupModal()"
|
||||
>
|
||||
注册
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</div>
|
||||
<n-button :bordered="false" circle @click="toggleDark">
|
||||
<template #icon>
|
||||
<Icon v-if="isDark" icon="fluent-emoji:sun"></Icon>
|
||||
<Icon v-else icon="fluent-emoji:full-moon"></Icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user