feat(core): 初始化项目基础架构和CMS功能模块
- 添加Docker相关配置文件(.dockerignore, .env.example, .gitignore) - 实现服务端API代理功能，支持文件、模块和服务器API转发 - 创建文章详情页、栏目文章列表页和单页内容展示页面 - 集成Ant Design Vue组件库并实现SSR样式提取功能 - 定义API响应数据结构类型和应用布局组件 - 开发开发者应用中心和文章管理页面 - 实现CMS导航菜单获取和多租户切换功能
This commit is contained in:
246
app/layouts/site.vue
Normal file
246
app/layouts/site.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<a-layout class="min-h-screen layout-shell">
|
||||
<a-layout class="w-full px-4 py-4">
|
||||
<ConsoleHeader
|
||||
product-label="云·企业官网"
|
||||
default-jump-key="site"
|
||||
:user="user"
|
||||
:user-display-name="userDisplayName"
|
||||
:user-menu-items="userMenuItems"
|
||||
@user-menu-click="onUserMenuClick"
|
||||
/>
|
||||
|
||||
<a-layout class="body">
|
||||
<a-layout-sider
|
||||
class="sider"
|
||||
:width="240"
|
||||
breakpoint="lg"
|
||||
theme="light"
|
||||
:trigger="null"
|
||||
collapsible
|
||||
v-model:collapsed="collapsed"
|
||||
>
|
||||
<div class="sider-brand" :class="{ collapsed }">
|
||||
<a-avatar shape="square" :size="28" src="https://oss.wsdns.cn/20250215/2016c6f2da074b09b11a0e3603f5be23.png">
|
||||
<template #icon>
|
||||
<AppstoreOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div v-if="!collapsed" class="sider-title">
|
||||
云·企业官网
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-menu
|
||||
mode="inline"
|
||||
theme="light"
|
||||
:selected-keys="selectedKeys"
|
||||
:inline-collapsed="collapsed"
|
||||
@click="onMenuClick"
|
||||
>
|
||||
<a-menu-item v-for="item in menu" :key="item.to">
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
|
||||
<div
|
||||
class="sider-collapse-trigger"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-label="collapsed ? '展开菜单' : '收起菜单'"
|
||||
@click="toggleCollapsed"
|
||||
@keydown.enter.prevent="toggleCollapsed"
|
||||
@keydown.space.prevent="toggleCollapsed"
|
||||
>
|
||||
<RightOutlined :style="{fontSize: '10px', paddingRight: '4px'}" v-if="collapsed" />
|
||||
<LeftOutlined :style="{fontSize: '10px', paddingRight: '4px'}" v-else />
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-layout class="main">
|
||||
<a-layout-content class="content">
|
||||
<a-spin v-if="!ready" size="large" tip="加载中..." class="spin" />
|
||||
<template v-else>
|
||||
<slot />
|
||||
</template>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
import { AppstoreOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
|
||||
import { siteNav } from '@/config/site-nav'
|
||||
import { getUserInfo } from '@/api/layout'
|
||||
import { getToken, removeToken } from '@/utils/token-util'
|
||||
import { clearAuthz, setAuthzFromUser } from '@/utils/permission'
|
||||
import type { User } from '@/api/system/user/model'
|
||||
|
||||
const route = useRoute()
|
||||
const collapsed = ref(false)
|
||||
|
||||
const menu = computed(() => siteNav)
|
||||
const user = ref<User | null>(null)
|
||||
|
||||
const userDisplayName = computed(() => {
|
||||
const u = user.value
|
||||
const nickname = u?.nickname?.trim()
|
||||
const username = u?.username?.trim()
|
||||
const phone = u?.phone?.trim()
|
||||
const mobile = u?.mobile?.trim()
|
||||
if (nickname) return nickname
|
||||
if (username) return username
|
||||
if (phone) return phone
|
||||
if (mobile) return mobile
|
||||
return '当前用户'
|
||||
})
|
||||
|
||||
const userMenuItems = [
|
||||
{ key: 'home', label: '返回首页' },
|
||||
{ key: 'logout', label: '退出登录' },
|
||||
]
|
||||
|
||||
const selectedKeys = computed(() => {
|
||||
const match = menu.value.find((item) => route.path === item.to)
|
||||
if (match) return [match.to]
|
||||
if (route.path.startsWith('/site')) return ['/site']
|
||||
return []
|
||||
})
|
||||
|
||||
function onMenuClick(info: { key: string }) {
|
||||
navigateTo(String(info.key))
|
||||
}
|
||||
|
||||
function toggleCollapsed() {
|
||||
collapsed.value = !collapsed.value
|
||||
}
|
||||
|
||||
function logout() {
|
||||
removeToken()
|
||||
try {
|
||||
localStorage.removeItem('TenantId')
|
||||
localStorage.removeItem('UserId')
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
clearAuthz()
|
||||
navigateTo('/')
|
||||
}
|
||||
|
||||
function onUserMenuClick(key: string) {
|
||||
if (key === 'home') navigateTo('/')
|
||||
if (key === 'logout') logout()
|
||||
}
|
||||
|
||||
const ready = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
clearAuthz()
|
||||
message.error('请先登录')
|
||||
await navigateTo('/login')
|
||||
ready.value = true
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const me = await getUserInfo()
|
||||
user.value = me
|
||||
setAuthzFromUser(me)
|
||||
} catch {
|
||||
user.value = null
|
||||
clearAuthz()
|
||||
}
|
||||
|
||||
ready.value = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-shell {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.sider {
|
||||
border-radius: 12px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.sider-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 16px 10px;
|
||||
}
|
||||
|
||||
.sider-brand.collapsed {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sider-title {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-inline) {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
.sider-collapse-trigger {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -16px;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-left: 0;
|
||||
border-radius: 0 9999px 9999px 0;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sider-collapse-trigger:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.sider-collapse-trigger:active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.body {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 520px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.spin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 380px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user