Initial commit: AIGC项目完整代码
This commit is contained in:
AIGC Developer
84
demo/frontend/src/components/Footer.vue
Normal file
84
demo/frontend/src/components/Footer.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<el-footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-info">
|
||||
<p>© 2024 AIGC Demo. All rights reserved.</p>
|
||||
<p>基于 Vue.js 3 + Element Plus 构建</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="#" class="footer-link">关于我们</a>
|
||||
<a href="#" class="footer-link">联系我们</a>
|
||||
<a href="#" class="footer-link">隐私政策</a>
|
||||
<a href="#" class="footer-link">服务条款</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Footer组件逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
height: 60px;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-info p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: #606266;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
268
demo/frontend/src/components/NavBar.vue
Normal file
268
demo/frontend/src/components/NavBar.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<el-header class="navbar">
|
||||
<div class="navbar-container">
|
||||
<!-- Logo -->
|
||||
<div class="navbar-brand">
|
||||
<router-link to="/" class="brand-link">
|
||||
<span class="brand-text">AIGC Demo</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<el-menu
|
||||
mode="horizontal"
|
||||
class="navbar-menu"
|
||||
background-color="#409EFF"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b"
|
||||
router
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
<el-menu-item index="/welcome">
|
||||
<span>欢迎页</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/home">
|
||||
<span>首页</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-if="userStore.isAuthenticated" index="/profile">
|
||||
<span>个人主页</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-if="userStore.isAuthenticated" index="/orders">
|
||||
<span>订单管理</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-if="userStore.isAuthenticated" index="/payments">
|
||||
<span>支付记录</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-if="userStore.isAdmin" index="/admin/orders">
|
||||
<span>后台管理</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-if="userStore.isAdmin" index="/admin/users">
|
||||
<span>用户管理</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-if="userStore.isAdmin" index="/admin/dashboard">
|
||||
<span>数据仪表盘</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<!-- 快速切换提示（暂时隐藏） -->
|
||||
<!-- <div class="quick-switch-hint" v-if="showShortcutHint">
|
||||
<el-tooltip content="使用 Alt + 数字键快速切换页面" placement="bottom">
|
||||
<el-icon><Keyboard /></el-icon>
|
||||
</el-tooltip>
|
||||
</div> -->
|
||||
|
||||
<!-- 用户菜单 -->
|
||||
<div class="navbar-user">
|
||||
<template v-if="userStore.isAuthenticated">
|
||||
<el-dropdown @command="handleUserCommand">
|
||||
<span class="user-dropdown">
|
||||
<span>{{ userStore.username }}</span>
|
||||
<el-tag v-if="userStore.user?.points" size="small" type="success" class="points-tag">
|
||||
{{ userStore.user.points }}积分
|
||||
</el-tag>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="profile">
|
||||
个人资料
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="userStore.isAdmin" command="admin">
|
||||
后台管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="settings">
|
||||
设置
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">
|
||||
退出登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-button type="primary" plain @click="$router.push('/login')">
|
||||
登录
|
||||
</el-button>
|
||||
<el-button type="success" plain @click="$router.push('/register')">
|
||||
注册
|
||||
</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
|
||||
// 显示快捷键提示（暂时禁用）
|
||||
// const showShortcutHint = ref(true)
|
||||
|
||||
// 快速切换处理函数
|
||||
const handleMenuSelect = (index) => {
|
||||
// 使用replace而不是push，避免浏览器历史记录堆积
|
||||
router.replace(index)
|
||||
}
|
||||
|
||||
// 暂时禁用快捷键功能，确保基本功能正常
|
||||
// const handleKeydown = (event) => {
|
||||
// // 快捷键功能暂时禁用
|
||||
// }
|
||||
|
||||
// onMounted(() => {
|
||||
// // 暂时不添加键盘事件监听
|
||||
// })
|
||||
|
||||
// onUnmounted(() => {
|
||||
// // 暂时不移除键盘事件监听
|
||||
// })
|
||||
|
||||
const handleUserCommand = async (command) => {
|
||||
switch (command) {
|
||||
case 'profile':
|
||||
ElMessage.info('个人资料功能开发中')
|
||||
break
|
||||
case 'admin':
|
||||
router.push('/admin/dashboard')
|
||||
break
|
||||
case 'settings':
|
||||
ElMessage.info('设置功能开发中')
|
||||
break
|
||||
case 'logout':
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
await userStore.logoutUser()
|
||||
ElMessage.success('退出登录成功')
|
||||
router.push('/')
|
||||
} catch (error) {
|
||||
// 用户取消
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
flex: 1;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.navbar-menu .el-menu-item {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.navbar-menu .el-menu-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.navbar-user {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.user-dropdown:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.points-tag {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-dropdown .el-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.navbar-user .el-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.shortcut-hint {
|
||||
font-size: 10px;
|
||||
opacity: 0.7;
|
||||
margin-left: 8px;
|
||||
padding: 2px 4px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.quick-switch-hint {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.quick-switch-hint:hover {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user