feat(core): 初始化项目基础架构和CMS功能模块
- 添加Docker相关配置文件(.dockerignore, .env.example, .gitignore) - 实现服务端API代理功能，支持文件、模块和服务器API转发 - 创建文章详情页、栏目文章列表页和单页内容展示页面 - 集成Ant Design Vue组件库并实现SSR样式提取功能 - 定义API响应数据结构类型和应用布局组件 - 开发开发者应用中心和文章管理页面 - 实现CMS导航菜单获取和多租户切换功能
This commit is contained in:
557
app/components/SiteHeader.vue
Normal file
557
app/components/SiteHeader.vue
Normal file
@@ -0,0 +1,557 @@
|
||||
<template>
|
||||
<header class="site-header">
|
||||
<div class="topbar">
|
||||
<div class="mx-auto flex max-w-screen-xl items-center justify-between gap-4 px-4">
|
||||
<div class="topbar-left">
|
||||
<span class="topbar-date">{{ todayText }}</span>
|
||||
</div>
|
||||
|
||||
<div class="topbar-right">
|
||||
<a-input-search
|
||||
v-model:value="keywords"
|
||||
class="topbar-search"
|
||||
placeholder="请输入关键字"
|
||||
:allow-clear="true"
|
||||
@search="onSearch"
|
||||
/>
|
||||
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<template v-if="!isAuthed">
|
||||
<a-button size="small" type="primary" @click="navigateTo('/login')">登录</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-dropdown :trigger="['hover']" placement="bottomRight">
|
||||
<a-space>
|
||||
<a-avatar :src="userAvatar" :size="28">
|
||||
<template v-if="!userAvatar" #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span class="topbar-user">{{ userName }}</span>
|
||||
</a-space>
|
||||
<template #overlay>
|
||||
<a-menu @click="onUserMenuClick">
|
||||
<a-menu-item key="console">管理中心</a-menu-item>
|
||||
<a-menu-item key="profile">个人资料</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout">退出登录</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<a-button class="md:hidden" size="small" @click="open = true">菜单</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showBrandbar" class="brandbar">
|
||||
<div class="mx-auto grid max-w-screen-xl grid-cols-12 items-center gap-6 px-4 py-8">
|
||||
<NuxtLink to="/" class="col-span-12 flex items-center gap-4 md:col-span-6">
|
||||
<img class="brand-logo" :src="logoUrl" :alt="siteName" />
|
||||
<div class="brand-title">
|
||||
<div class="brand-name">{{ siteName }}</div>
|
||||
<div class="brand-sub">{{ siteSlogan }}</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<div class="col-span-12 text-right md:col-span-6">
|
||||
<div class="brand-mission">{{ missionText }}</div>
|
||||
<div class="brand-values">{{ valuesText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-affix :offset-top="0">
|
||||
<div class="navbar">
|
||||
<div class="mx-auto flex max-w-screen-xl items-center justify-between gap-3 px-4">
|
||||
<NuxtLink to="/" class="navbar-brand">
|
||||
<img class="navbar-logo" :src="logoUrl" :alt="siteName" />
|
||||
<span class="navbar-brand-name">
|
||||
{{ siteName }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
<nav class="nav hidden md:flex">
|
||||
<template v-for="item in navItems" :key="item.key">
|
||||
<a-dropdown v-if="item.children?.length" :trigger="['hover']">
|
||||
<a class="nav-link" :class="{ active: isActive(item) }" @click.prevent>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item
|
||||
v-for="child in item.children"
|
||||
:key="child.key"
|
||||
@click="onNavClick(child)"
|
||||
>
|
||||
{{ child.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<NuxtLink
|
||||
v-else-if="item.to"
|
||||
class="nav-link"
|
||||
:class="{ active: isActive(item) }"
|
||||
:to="item.to"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
|
||||
<a
|
||||
v-else
|
||||
class="nav-link"
|
||||
:class="{ active: isActive(item) }"
|
||||
:href="item.href"
|
||||
:target="item.target || undefined"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</template>
|
||||
</nav>
|
||||
<div class="nav-spacer md:hidden" />
|
||||
</div>
|
||||
</div>
|
||||
</a-affix>
|
||||
</header>
|
||||
|
||||
<a-drawer v-model:open="open" title="导航" placement="right">
|
||||
<a-menu mode="inline" :selected-keys="selectedKeys">
|
||||
<template v-for="item in navItems" :key="item.key">
|
||||
<a-menu-item v-if="!item.children?.length" :key="item.key" @click="onNavClick(item)">
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
<a-sub-menu v-else :key="item.key" :title="item.label">
|
||||
<a-menu-item
|
||||
v-for="child in item.children"
|
||||
:key="child.key"
|
||||
@click="onNavClick(child)"
|
||||
>
|
||||
{{ child.label }}
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</template>
|
||||
</a-menu>
|
||||
|
||||
<div class="mt-4">
|
||||
<a-button v-if="!isAuthed" block type="primary" @click="onNav('/login')">登录</a-button>
|
||||
<template v-else>
|
||||
<a-button block @click="goConsoleCenter">管理中心</a-button>
|
||||
<a-button block @click="goDeveloperCenter">开发者中心</a-button>
|
||||
<a-button block @click="onNav('/profile')">个人资料</a-button>
|
||||
<a-button block danger class="mt-2" @click="logout">退出登录</a-button>
|
||||
</template>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { mainNav } from '@/config/nav'
|
||||
import { getUserInfo } from '@/api/layout'
|
||||
import type { User } from '@/api/system/user/model'
|
||||
import type { CmsNavigation } from '@/api/cms/cmsNavigation/model'
|
||||
import { getToken, removeToken } from '@/utils/token-util'
|
||||
import { clearAuthz, hasRole, setAuthzFromUser } from '@/utils/permission'
|
||||
import { UserOutlined } from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
const route = useRoute()
|
||||
const open = ref(false)
|
||||
const keywords = ref('')
|
||||
|
||||
type HeaderNavItem = {
|
||||
key: string
|
||||
label: string
|
||||
to?: string
|
||||
href?: string
|
||||
target?: string
|
||||
children?: HeaderNavItem[]
|
||||
}
|
||||
|
||||
const { data: siteInfo } = useSiteInfo()
|
||||
|
||||
const selectedKeys = computed(() => {
|
||||
const flatten = (items: HeaderNavItem[]) =>
|
||||
items.flatMap((i) => [i, ...(i.children?.length ? flatten(i.children) : [])])
|
||||
const all = flatten(navItems.value)
|
||||
|
||||
const exactHit = all.find((n) => n.to === route.path)
|
||||
if (exactHit) return [exactHit.key]
|
||||
|
||||
const prefixHit = all
|
||||
.filter((n) => n.to && n.to !== '/' && route.path.startsWith(n.to))
|
||||
.sort((a, b) => (b.to?.length ?? 0) - (a.to?.length ?? 0))[0]
|
||||
if (prefixHit) return [prefixHit.key]
|
||||
|
||||
const home = all.find((n) => n.to === '/')
|
||||
return home ? [home.key] : []
|
||||
})
|
||||
|
||||
type SiteInfoData = {
|
||||
websiteName?: unknown
|
||||
websiteLogo?: unknown
|
||||
websiteIcon?: unknown
|
||||
topNavs?: unknown
|
||||
setting?: unknown
|
||||
config?: unknown
|
||||
} & Record<string, unknown>
|
||||
|
||||
const siteData = computed<SiteInfoData | null>(() => {
|
||||
const data = siteInfo.value?.data
|
||||
if (data && typeof data === 'object') return data as SiteInfoData
|
||||
return null
|
||||
})
|
||||
|
||||
function pickString(source: unknown, key: string) {
|
||||
if (!source || typeof source !== 'object') return ''
|
||||
const record = source as Record<string, unknown>
|
||||
const value = record[key]
|
||||
return typeof value === 'string' ? value.trim() : ''
|
||||
}
|
||||
|
||||
const siteName = computed(() => {
|
||||
const websiteName = siteData.value?.websiteName
|
||||
return typeof websiteName === 'string' && websiteName.trim() ? websiteName.trim() : '桂乐淘'
|
||||
})
|
||||
|
||||
const showBrandbar = computed(() => {
|
||||
const p = route.path || '/'
|
||||
if (p === '/') return true
|
||||
// 文章列表、单页详情、文章详情都显示 brandbar
|
||||
return p === '/articles' || p.startsWith('/article/') || p.startsWith('/page/') || p.startsWith('/item/')
|
||||
})
|
||||
|
||||
const logoUrl = computed(() => {
|
||||
const data = siteData.value
|
||||
const logo = typeof data?.websiteLogo === 'string' ? data.websiteLogo.trim() : ''
|
||||
const icon = typeof data?.websiteIcon === 'string' ? data.websiteIcon.trim() : ''
|
||||
return (
|
||||
logo ||
|
||||
icon ||
|
||||
'https://oss.wsdns.cn/20251226/675876f9f5a84732b22efc02b275440a.png'
|
||||
)
|
||||
})
|
||||
|
||||
const siteSlogan = computed(() => {
|
||||
const data = siteData.value
|
||||
const slogan =
|
||||
pickString(data?.setting, 'slogan') ||
|
||||
pickString(data?.setting, 'subtitle') ||
|
||||
pickString(data?.config, 'slogan')
|
||||
return slogan || 'XINGYUSI BANKRUPTCY TRANSACTION SERVICE PLATFORM'
|
||||
})
|
||||
|
||||
const missionText = computed(() => '致力于企业纾困和破产事务服务')
|
||||
const valuesText = computed(() => '真诚 · 奉献 · 规范 · 聚力')
|
||||
|
||||
function normalizePath(path: unknown) {
|
||||
if (typeof path !== 'string') return ''
|
||||
const p = path.trim()
|
||||
if (!p) return ''
|
||||
if (/^https?:\/\//i.test(p)) return p
|
||||
if (p.startsWith('/')) return p
|
||||
return `/${p}`
|
||||
}
|
||||
|
||||
function normalizeNavTree(list: CmsNavigation[]): HeaderNavItem[] {
|
||||
const normalizeOne = (n: CmsNavigation): HeaderNavItem => {
|
||||
const label = String(n.title || n.label || '').trim() || '未命名'
|
||||
const rawPath = normalizePath(n.path)
|
||||
const isExternal = /^https?:\/\//i.test(rawPath)
|
||||
const children =
|
||||
Array.isArray(n.children) && n.children.length
|
||||
? n.children
|
||||
.slice()
|
||||
.filter((c) => (c.hide ?? 0) !== 1)
|
||||
.sort((a, b) => (a.sortNumber ?? 0) - (b.sortNumber ?? 0))
|
||||
.map(normalizeOne)
|
||||
: undefined
|
||||
const key = String(n.code || n.navigationId || rawPath || label)
|
||||
const target = n.target ? String(n.target) : (isExternal ? '_blank' : undefined)
|
||||
return {
|
||||
key,
|
||||
label,
|
||||
...(isExternal ? { href: rawPath } : { to: rawPath || '/' }),
|
||||
target,
|
||||
...(children?.length ? { children } : {})
|
||||
}
|
||||
}
|
||||
|
||||
return list
|
||||
.filter((n) => (n.hide ?? 0) !== 1)
|
||||
.slice()
|
||||
.sort((a, b) => (a.sortNumber ?? 0) - (b.sortNumber ?? 0))
|
||||
.map(normalizeOne)
|
||||
}
|
||||
|
||||
const navItems = computed<HeaderNavItem[]>(() => {
|
||||
const apiNavs = siteData.value?.topNavs
|
||||
if (Array.isArray(apiNavs) && apiNavs.length) {
|
||||
return normalizeNavTree(apiNavs as CmsNavigation[])
|
||||
}
|
||||
// Fallback when CMS has not configured topNavs.
|
||||
return mainNav.map((n) => ({ key: n.key || n.to, label: n.label, to: n.to }))
|
||||
})
|
||||
|
||||
function isActive(item: HeaderNavItem) {
|
||||
const isHit = (candidate: HeaderNavItem): boolean => {
|
||||
if (candidate.to && candidate.to === route.path) return true
|
||||
return !!candidate.children?.some(isHit)
|
||||
}
|
||||
return isHit(item)
|
||||
}
|
||||
|
||||
function onNavClick(item: HeaderNavItem) {
|
||||
open.value = false
|
||||
if (item.href) {
|
||||
window.open(item.href, item.target || '_blank')
|
||||
return
|
||||
}
|
||||
if (item.to) navigateTo(item.to)
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
if (!keywords.value.trim()) return
|
||||
navigateTo({ path: '/articles', query: { keywords: keywords.value.trim() } })
|
||||
}
|
||||
|
||||
const token = ref('')
|
||||
const user = ref<User | null>(null)
|
||||
const isAuthed = computed(() => !!token.value)
|
||||
const userName = computed(() => String(user.value?.nickname || user.value?.username || '已登录'))
|
||||
const userAvatar = computed(() => {
|
||||
const candidate =
|
||||
user.value?.avatarUrl ||
|
||||
user.value?.avatar ||
|
||||
user.value?.merchantAvatar ||
|
||||
user.value?.logo ||
|
||||
''
|
||||
if (typeof candidate !== 'string') return ''
|
||||
const normalized = candidate.trim()
|
||||
if (!normalized || normalized === 'null' || normalized === 'undefined') return ''
|
||||
return normalized
|
||||
})
|
||||
|
||||
function onNav(to: string) {
|
||||
open.value = false
|
||||
navigateTo(to)
|
||||
}
|
||||
|
||||
const todayText = computed(() => {
|
||||
const d = new Date()
|
||||
const week = ['日', '一', '二', '三', '四', '五', '六'][d.getDay()] || ''
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}年${pad(d.getMonth() + 1)}月${pad(d.getDate())}日 星期${week}`
|
||||
})
|
||||
|
||||
async function refreshAuth() {
|
||||
token.value = getToken()
|
||||
if (!token.value) {
|
||||
user.value = null
|
||||
clearAuthz()
|
||||
return
|
||||
}
|
||||
try {
|
||||
user.value = await getUserInfo()
|
||||
setAuthzFromUser(user.value)
|
||||
} catch {
|
||||
// token may be expired; keep authed UI but without profile info
|
||||
clearAuthz()
|
||||
}
|
||||
}
|
||||
|
||||
function goConsoleCenter() {
|
||||
if (!isAuthed.value) return navigateTo('/login')
|
||||
open.value = false
|
||||
navigateTo('/console')
|
||||
}
|
||||
|
||||
function goDeveloperCenter() {
|
||||
if (!isAuthed.value) return navigateTo('/login')
|
||||
open.value = false
|
||||
if (!hasRole('developer')) return message.error('您还不是开发者')
|
||||
navigateTo('/developer')
|
||||
}
|
||||
|
||||
function logout() {
|
||||
removeToken()
|
||||
try {
|
||||
localStorage.removeItem('TenantId')
|
||||
localStorage.removeItem('UserId')
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
clearAuthz()
|
||||
user.value = null
|
||||
token.value = ''
|
||||
open.value = false
|
||||
navigateTo('/')
|
||||
}
|
||||
|
||||
function onUserMenuClick(info: { key: string }) {
|
||||
if (info.key === 'console') return goConsoleCenter()
|
||||
if (info.key === 'developer') return goDeveloperCenter()
|
||||
if (info.key === 'profile') return navigateTo('/profile')
|
||||
if (info.key === 'logout') return logout()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refreshAuth()
|
||||
|
||||
window.addEventListener('auth-token-changed', refreshAuth)
|
||||
window.addEventListener('storage', refreshAuth)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('auth-token-changed', refreshAuth)
|
||||
window.removeEventListener('storage', refreshAuth)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.site-header {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.topbar-left {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.topbar-search {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.topbar-user {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.brandbar {
|
||||
background:
|
||||
linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
|
||||
radial-gradient(circle at 25% 20%, rgba(220, 38, 38, 0.12), transparent 60%),
|
||||
radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.12), transparent 55%),
|
||||
linear-gradient(180deg, #f2f4f7, #ffffff);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 28px;
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.brand-sub {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.brand-mission {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.brand-values {
|
||||
margin-top: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: #c30000;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 48px;
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-brand-name {
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 18px;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-spacer {
|
||||
height: 48px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user