179 lines
4.4 KiB
Vue
179 lines
4.4 KiB
Vue
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { message } from 'ant-design-vue'
|
||
import { useUserStore } from '@/stores/user'
|
||
import LoginModal from '@/components/LoginModal.vue'
|
||
import UserDropdown from '@/components/UserDropdown.vue'
|
||
import TestService from '@/api/test'
|
||
|
||
const styles = {
|
||
background: 'var(--color-slate-900)',
|
||
color: 'var(--color-text-inverse)'
|
||
}
|
||
// const route = useRoute()
|
||
const userStore = useUserStore()
|
||
const showLogin = ref(false)
|
||
const testLoading = ref(false)
|
||
|
||
// 测试按钮点击事件
|
||
const handleTest = async () => {
|
||
if (testLoading.value) return
|
||
|
||
testLoading.value = true
|
||
try {
|
||
// 调用一键测试接口（升级会员 + 初始化OSS）
|
||
const res = await TestService.testAll({
|
||
vipLevel: 1,
|
||
totalStorage: 10 * 1024 * 1024 * 1024, // 10GB
|
||
totalQuota: 10000
|
||
})
|
||
|
||
if (res.code === 0) {
|
||
message.success('测试成功！已升级会员并创建OSS目录', 3)
|
||
console.log('OSS初始化信息:', res.data)
|
||
} else {
|
||
message.error(res.msg || '测试失败', 3)
|
||
}
|
||
} catch (error) {
|
||
console.error('测试失败:', error)
|
||
message.error(error?.response?.data?.msg || error?.message || '测试失败', 3)
|
||
} finally {
|
||
testLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 计算是否应该显示用户组件
|
||
// 判断用户是否有用户名，有用户名说明用户信息已加载完成
|
||
// 使用 userStore.displayName 作为响应式依赖，确保用户信息变化时更新
|
||
const shouldShowUser = computed(() => {
|
||
// 检查用户是否有用户名（nickname 或 wechatNickname）
|
||
// 有用户名说明用户信息已加载，可以显示用户组件
|
||
const hasUserName = !!userStore.displayName && userStore.displayName !== '未命名用户'
|
||
|
||
return hasUserName
|
||
})
|
||
|
||
// function go(path) {
|
||
// router.push(path)
|
||
// }
|
||
</script>
|
||
|
||
<template>
|
||
<header
|
||
class="header-box"
|
||
:style="styles"
|
||
>
|
||
<div>
|
||
<div class="h-[70px] flex items-center">
|
||
<div class="flex items-center gap-3 flex-1 pl-[30px]">
|
||
<!-- 左侧可放 logo 或其他内容 -->
|
||
</div>
|
||
<div class="flex items-center gap-4 pr-[35px]">
|
||
<!-- 测试按钮（仅开发环境显示） -->
|
||
<button
|
||
v-if="shouldShowUser"
|
||
class="btn-test-nav"
|
||
:disabled="testLoading"
|
||
@click="handleTest"
|
||
>
|
||
{{ testLoading ? '测试中...' : '测试' }}
|
||
</button>
|
||
|
||
<template v-if="shouldShowUser">
|
||
<UserDropdown />
|
||
</template>
|
||
<template v-else>
|
||
<button class="btn-primary-nav" @click="showLogin = true">免费试用</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<LoginModal v-model:open="showLogin" />
|
||
</template>
|
||
|
||
<style scoped>
|
||
.header-box {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.nav-link {
|
||
height: 70px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
padding: 0 6px;
|
||
color: var(--color-text-secondary);
|
||
position: relative;
|
||
transition: color .2s ease;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.nav-link--active {
|
||
color: var(--color-text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-link--active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 8px;
|
||
right: 8px;
|
||
bottom: 10px;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
|
||
opacity: 0.55;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.btn-primary-nav {
|
||
height: 32px;
|
||
padding: 0 12px;
|
||
border-radius: var(--radius-button);
|
||
background: var(--color-primary);
|
||
color: var(--color-text-inverse);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
box-shadow: var(--shadow-blue);
|
||
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
|
||
}
|
||
|
||
.btn-primary-nav:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-blue);
|
||
filter: brightness(1.03);
|
||
}
|
||
|
||
.btn-test-nav {
|
||
height: 32px;
|
||
padding: 0 12px;
|
||
border-radius: var(--radius-button);
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
color: var(--color-text);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all .2s ease;
|
||
}
|
||
|
||
.btn-test-nav:hover:not(:disabled) {
|
||
background: var(--color-bg);
|
||
border-color: var(--color-primary);
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.btn-test-nav:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
</style>
|