Initial commit of akmon project
This commit is contained in:
908
pages/admins/layout.uvue
Normal file
908
pages/admins/layout.uvue
Normal file
@@ -0,0 +1,908 @@
|
||||
<template>
|
||||
<view class="admin-layout">
|
||||
<view class="admin-sidebar" :class="{ collapsed: sidebarCollapsed }">
|
||||
<view class="sidebar-header">
|
||||
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
||||
<text v-if="!sidebarCollapsed" class="logo-text">智跑后台管理</text>
|
||||
<text class="toggle-btn" @click="toggleSidebar">{{ sidebarCollapsed ? '<27>? : '<27>? }}</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="menu-container">
|
||||
<view class="menu-section">
|
||||
<view class="menu-header" v-if="!sidebarCollapsed">
|
||||
<text>数据中心</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/index') }"
|
||||
@click="navigateTo('/pages/admin/index')"
|
||||
>
|
||||
<text class="menu-icon">📊</text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">总览</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/analytics') }"
|
||||
@click="navigateTo('/pages/admin/analytics')"
|
||||
>
|
||||
<text class="menu-icon">📈</text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">数据分析</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-section">
|
||||
<view class="menu-header" v-if="!sidebarCollapsed">
|
||||
<text>学校管理</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/schools') }"
|
||||
@click="navigateTo('/pages/admin/schools/index')"
|
||||
v-if="canViewSchools"
|
||||
>
|
||||
<text class="menu-icon">🏫</text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">学校列表</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/classes') }"
|
||||
@click="navigateTo('/pages/admin/classes/index')"
|
||||
v-if="canManageClass"
|
||||
>
|
||||
<text class="menu-icon">👨></text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">班级管理</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/teachers') }"
|
||||
@click="navigateTo('/pages/admin/teachers/index')"
|
||||
v-if="canManageTeachers"
|
||||
>
|
||||
<text class="menu-icon">👨></text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">教师管理</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-section">
|
||||
<view class="menu-header" v-if="!sidebarCollapsed">
|
||||
<text>训练管理</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/training') }"
|
||||
@click="navigateTo('/pages/admin/training/index')"
|
||||
>
|
||||
<text class="menu-icon">🏃</text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">训练计划</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/assignments') }"
|
||||
@click="navigateTo('/pages/admin/assignments/index')"
|
||||
>
|
||||
<text class="menu-icon">📝</text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">作业管理</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-section">
|
||||
<view class="menu-header" v-if="!sidebarCollapsed">
|
||||
<text>系统设置</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/roles') }"
|
||||
@click="navigateTo('/pages/admin/roles/index')"
|
||||
v-if="canManageRoles"
|
||||
>
|
||||
<text class="menu-icon">🔑</text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">角色权限</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/users') }"
|
||||
@click="navigateTo('/pages/admin/users/index')"
|
||||
v-if="canManageUsers"
|
||||
>
|
||||
<text class="menu-icon">👤</text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">用户管理</text>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
:class="{ active: isActive('/pages/admin/settings') }"
|
||||
@click="navigateTo('/pages/admin/settings/index')"
|
||||
>
|
||||
<text class="menu-icon">⚙️</text>
|
||||
<text v-if="!sidebarCollapsed" class="menu-text">系统设置</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="admin-main" :style="{ marginLeft: sidebarCollapsed ? '60px' : '240px' }">
|
||||
<view class="admin-header">
|
||||
<view class="header-left">
|
||||
<view class="header-title">{{ pageTitle }}</view>
|
||||
</view>
|
||||
|
||||
<view class="header-right">
|
||||
<view class="notification-btn" @click="showNotifications">
|
||||
<text class="notification-icon">🔔</text>
|
||||
<view v-if="unreadCount > 0" class="badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
|
||||
</view>
|
||||
|
||||
<view class="user-dropdown" @click="toggleUserMenu">
|
||||
<image class="avatar" :src="currentUser.avatar_url ?? '/static/avatar-default.png'" mode="aspectFill"></image>
|
||||
<text v-if="!sidebarCollapsed" class="username">{{ currentUser.username }}</text>
|
||||
<text class="dropdown-icon">></text>
|
||||
|
||||
<view class="dropdown-menu" v-if="showUserMenu">
|
||||
<view class="dropdown-item" @click="navigateTo('/pages/user/profile')">
|
||||
<text>个人信息</text>
|
||||
</view>
|
||||
<view class="dropdown-item" @click="changePassword">
|
||||
<text>修改密码</text>
|
||||
</view>
|
||||
<view class="dropdown-item logout" @click="logout">
|
||||
<text>退出登></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="admin-content">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 通知抽屉 -->
|
||||
<view class="notification-drawer" v-if="showNotificationDrawer" @click.stop>
|
||||
<view class="drawer-content" @click.stop>
|
||||
<view class="drawer-header">
|
||||
<text class="drawer-title">消息通知</text>
|
||||
<text class="close-btn" @click="showNotificationDrawer = false">×</text>
|
||||
</view>
|
||||
|
||||
<view class="drawer-tabs">
|
||||
<view
|
||||
class="drawer-tab"
|
||||
:class="{ active: notificationTab === 'unread' }"
|
||||
@click="notificationTab = 'unread'"
|
||||
>
|
||||
未读 ({{ unreadCount }})
|
||||
</view>
|
||||
<view
|
||||
class="drawer-tab"
|
||||
:class="{ active: notificationTab === 'all' }"
|
||||
@click="notificationTab = 'all'"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="drawer-body">
|
||||
<view v-if="loadingNotifications" class="loading-state">
|
||||
<text>加载<E58AA0>?..</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="notifications.length === 0" class="empty-state">
|
||||
<text>暂无通知</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="notification-list">
|
||||
<view
|
||||
v-for="(notification, index) in (filteredNotifications as UTSJSONObject[] ?? [])"
|
||||
:key="notification.get('id')"
|
||||
class="notification-item"
|
||||
:class="{ unread: notification.get('status') === 'unread' }"
|
||||
@click="readNotification(notification)"
|
||||
>
|
||||
<text class="notification-title">{{ notification.get('title') }}</text>
|
||||
<text class="notification-content">{{ notification.get('content') }}</text>
|
||||
<text class="notification-time">{{ formatNotificationTime(`${notification.get('created_at') ?? ''}`) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="drawer-footer">
|
||||
<button v-if="unreadCount > 0" class="mark-all-read" @click="markAllAsRead">
|
||||
全部标为已读
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 修改密码模态框 -->
|
||||
<view class="modal" v-if="showPasswordModal">
|
||||
<view class="modal-content">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">修改密码</text>
|
||||
<text class="close-btn" @click="showPasswordModal = false">×</text>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<view class="form-group">
|
||||
<text class="form-label">当前密码:</text>
|
||||
<input type="password" v-model="passwordForm.oldPassword" placeholder="请输入当前密<E5898D>? />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<text class="form-label">新密<E696B0>?</text>
|
||||
<input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<text class="form-label">确认密码:</text>
|
||||
<input type="password" v-model="passwordForm.confirmPassword" placeholder="请再次输入新密码" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-footer">
|
||||
<button class="cancel-btn" @click="showPasswordModal = false">取消</button>
|
||||
<button class="submit-btn" @click="updatePassword">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 遮罩<E981AE>?-->
|
||||
<view
|
||||
class="overlay"
|
||||
v-if="showUserMenu || showNotificationDrawer"
|
||||
@click="closeAllPopups"
|
||||
></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { hasPermission, getUserPermissions } from '@/utils/permissionService.uts'
|
||||
import { state as userStore, getCurrentUser, logout as doLogout } from '../../utils/store.uts'
|
||||
import { User, Notification, PasswordForm } from './admintypes.uts'
|
||||
import db from '@/components/supadb/aksupainstance.uts'
|
||||
|
||||
// 侧边栏状<E6A08F>?
|
||||
const sidebarCollapsed = ref(false)
|
||||
// 用户相关
|
||||
const currentUser = reactive<User>({
|
||||
id: '', username: '', email: '', avatar_url: '', role: ''
|
||||
})
|
||||
const showUserMenu = ref(false)
|
||||
// 权限状<E99990>?
|
||||
const canManageRoles = ref(false)
|
||||
const canManageUsers = ref(false)
|
||||
const canViewSchools = ref(false)
|
||||
const canManageClass = ref(false)
|
||||
const canManageTeachers = ref(false)
|
||||
// 页面标题
|
||||
const pageTitle = ref('后台管理')
|
||||
// 通知相关
|
||||
const notifications = ref<UTSJSONObject[]>([])
|
||||
const unreadCount = ref(0)
|
||||
const showNotificationDrawer = ref(false)
|
||||
const notificationTab = ref('unread')
|
||||
const loadingNotifications = ref(false)
|
||||
// 修改密码相关
|
||||
const showPasswordModal = ref(false)
|
||||
const passwordForm = reactive<PasswordForm>({
|
||||
oldPassword: '', newPassword: '', confirmPassword: ''
|
||||
})
|
||||
// 计算属性：根据当前选项卡过滤通知
|
||||
const filteredNotifications = computed<UTSJSONObject[]>(() => {
|
||||
if (notificationTab.value === 'unread') {
|
||||
// Replace filter with for loop for UTS compatibility
|
||||
const unreadNotifications: UTSJSONObject[] = []
|
||||
for (let i = 0; i < notifications.value.length; i++) {
|
||||
const n = notifications.value[i]
|
||||
if (n.get('status') === 'unread') {
|
||||
unreadNotifications.push(n)
|
||||
}
|
||||
}
|
||||
return unreadNotifications
|
||||
}
|
||||
return notifications.value
|
||||
})
|
||||
// 获取当前用户信息
|
||||
|
||||
// 检查各项权<E9A1B9>?
|
||||
const checkPermissions = async () => {
|
||||
const userId = currentUser.id
|
||||
canManageRoles.value = await hasPermission({ userId, permissionCode: 'admin.roles.manage' })
|
||||
canManageUsers.value = await hasPermission({ userId, permissionCode: 'admin.users.manage' })
|
||||
canViewSchools.value = await hasPermission({ userId, permissionCode: 'school_admin.class.manage' }) ||
|
||||
await hasPermission({ userId, permissionCode: 'admin.system.manage' })
|
||||
canManageClass.value = await hasPermission({ userId, permissionCode: 'school_admin.class.manage' })
|
||||
canManageTeachers.value = await hasPermission({ userId, permissionCode: 'school_admin.teacher.manage' })
|
||||
}
|
||||
// 设置页面标题，根据当前路<E5898D>?
|
||||
const setPageTitle = () => {
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
// @ts-ignore
|
||||
const route = currentPage?.route ?? ''
|
||||
if (route.includes('/admin/index')) pageTitle.value = '后台首页'
|
||||
else if (route.includes('/admin/schools')) pageTitle.value = '学校管理'
|
||||
else if (route.includes('/admin/classes')) pageTitle.value = '班级管理'
|
||||
else if (route.includes('/admin/teachers')) pageTitle.value = '教师管理'
|
||||
else if (route.includes('/admin/users')) pageTitle.value = '用户管理'
|
||||
else if (route.includes('/admin/roles')) pageTitle.value = '角色权限管理'
|
||||
else if (route.includes('/admin/settings')) pageTitle.value = '系统设置'
|
||||
else if (route.includes('/admin/training')) pageTitle.value = '训练计划'
|
||||
else if (route.includes('/admin/assignments')) pageTitle.value = '作业管理'
|
||||
else if (route.includes('/admin/analytics')) pageTitle.value = '数据分析'
|
||||
else pageTitle.value = '后台管理'
|
||||
}
|
||||
// 获取通知列表
|
||||
const fetchNotifications = async () => {
|
||||
loadingNotifications.value = true
|
||||
try {
|
||||
const { data, error } = await db.from('ak_notifications')
|
||||
.select('*', {})
|
||||
.eq('user_id', currentUser.id)
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(50)
|
||||
.execute()
|
||||
if (error != null) return if (Array.isArray(data)) {
|
||||
notifications.value = data as UTSJSONObject[]
|
||||
|
||||
// Replace filter with for loop for UTS compatibility
|
||||
let unreadCountValue = 0
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const n = data[i] as UTSJSONObject
|
||||
if (n.get('status') === 'unread') {
|
||||
unreadCountValue++
|
||||
}
|
||||
}
|
||||
unreadCount.value = unreadCountValue
|
||||
} else {
|
||||
notifications.value = []
|
||||
unreadCount.value = 0
|
||||
}
|
||||
} catch (error) {
|
||||
} finally {
|
||||
loadingNotifications.value = false
|
||||
}
|
||||
}
|
||||
// 阅读通知
|
||||
const readNotification = async (notification: UTSJSONObject) => {
|
||||
if (notification.get('status') === 'unread') {
|
||||
try {
|
||||
const result = await db.from('ak_notifications')
|
||||
.update({ status: 'read' })
|
||||
.eq('id', `${notification.get('id') ?? ''}`)
|
||||
.execute()
|
||||
const error = result.error
|
||||
if (error == null) {
|
||||
notification.set('status', 'read')
|
||||
unreadCount.value--
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
}
|
||||
// 标记所有为已读
|
||||
const markAllAsRead = async () => {
|
||||
try {
|
||||
const result = await db.from('ak_notifications')
|
||||
.update({ status: 'read' })
|
||||
.eq('user_id', currentUser.id)
|
||||
.eq('status', 'unread')
|
||||
.execute()
|
||||
const error = result.error if (error == null) {
|
||||
// Replace map with for loop for UTS compatibility
|
||||
for (let i = 0; i < notifications.value.length; i++) {
|
||||
const n = notifications.value[i]
|
||||
n.set('status', 'read')
|
||||
}
|
||||
unreadCount.value = 0
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
const padZero = (num: number): string => num < 10 ? `0${num}` : `${num}`
|
||||
const formatNotificationTime = (timeStr: string): string => {
|
||||
const date = new Date(timeStr)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffMins = Math.floor(diffMs / 60000)
|
||||
const diffHours = Math.floor(diffMins / 60)
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
if (diffMins < 1) return '刚刚'
|
||||
else if (diffMins < 60) return `${diffMins}分钟前`
|
||||
else if (diffHours < 24) return `${diffHours}小时前`
|
||||
else if (diffDays < 30) return `${diffDays}天前`
|
||||
else return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`
|
||||
}
|
||||
const toggleSidebar = () => { sidebarCollapsed.value = !sidebarCollapsed.value }
|
||||
const toggleUserMenu = (e: Event) => { e.stopPropagation(); showUserMenu.value = !showUserMenu.value }
|
||||
const closeAllPopups = () => { showUserMenu.value = false; showNotificationDrawer.value = false }
|
||||
const showNotifications = () => { showNotificationDrawer.value = true; fetchNotifications() }
|
||||
const updatePassword = async () => {
|
||||
if (passwordForm.oldPassword == null || passwordForm.oldPassword == '') { uni.showToast({ title: '请输入当前密<E5898D>?, icon: 'none' }); return }
|
||||
if (passwordForm.newPassword == null || passwordForm.newPassword == '') { uni.showToast({ title: '请输入新密码', icon: 'none' }); return }
|
||||
if (passwordForm.newPassword !== passwordForm.confirmPassword) { uni.showToast({ title: '两次输入的密码不一<E4B88D>?, icon: 'none' }); return }
|
||||
try {
|
||||
const { error } = await db.rpc('change_user_password', {
|
||||
p_old_password: passwordForm.oldPassword,
|
||||
p_new_password: passwordForm.newPassword
|
||||
})
|
||||
if (error != null) {
|
||||
uni.showToast({ title: '更新密码失败: ' + (error?.message ?? ''), icon: 'none' }); return
|
||||
}
|
||||
uni.showToast({ title: '密码更新成功', icon: 'success' })
|
||||
showPasswordModal.value = false
|
||||
passwordForm.oldPassword = ''
|
||||
passwordForm.newPassword = ''
|
||||
passwordForm.confirmPassword = ''
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '更新密码失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
const changePassword = () => { showUserMenu.value = false; showPasswordModal.value = true }
|
||||
const logout = async () => {
|
||||
try {
|
||||
await doLogout()
|
||||
uni.reLaunch({ url: '/pages/user/login' })
|
||||
} catch (error) {}
|
||||
}
|
||||
const isActive = (route: string): boolean => {
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
let currentRoute = ''
|
||||
if (currentPage != null && typeof currentPage.route === 'string') {
|
||||
currentRoute = currentPage.route ?? ''
|
||||
}
|
||||
return currentRoute.indexOf(route) !== -1
|
||||
}
|
||||
const navigateTo = (url: string) => { uni.navigateTo({ url }) }
|
||||
const init = async () => {
|
||||
// 检查是否已登录，未登录直接跳转登录<E799BB>?
|
||||
console.log('layout init')
|
||||
const userData = await getCurrentUser()
|
||||
console.log('layout getcurrentuser',userData)
|
||||
if (userData == null || userData.id==null) {
|
||||
uni.redirectTo({ url: '/pages/user/login' })
|
||||
return
|
||||
}
|
||||
else
|
||||
{
|
||||
currentUser.id = userData.id??""
|
||||
currentUser.username = userData.username??""
|
||||
currentUser.email = userData.email??""
|
||||
currentUser.avatar_url = userData.avatar_url
|
||||
currentUser.role = userData.role??"anon"
|
||||
}
|
||||
await checkPermissions()
|
||||
fetchNotifications()
|
||||
setPageTitle()
|
||||
}
|
||||
onMounted(() => { init() })
|
||||
onUnmounted(() => {})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.admin-layout {
|
||||
display: flex;
|
||||
width: 100%; }
|
||||
|
||||
/* 侧边栏样<E6A08F>?*/
|
||||
.admin-sidebar {
|
||||
width: 240px; background-color: #001529;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
transition: width 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-sidebar.collapsed {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 18px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
height: calc(100% - 60px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.menu-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 8px 16px;
|
||||
display: flex; align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 主内容区样式 */
|
||||
.admin-main {
|
||||
flex: 1;
|
||||
margin-left: 240px; transition: margin-left 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
|
||||
.admin-header {
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.notification-btn {
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -8px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
background-color: #f5222d;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
min-width: 120px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-item.logout {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: #f0f2f5;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 通知抽屉样式 */
|
||||
.notification-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 380px;
|
||||
z-index: 1001;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
width: 100%; background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drawer-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.drawer-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.drawer-tab.active {
|
||||
color: #1890ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.drawer-tab.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.drawer-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.loading-state, .empty-state {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notification-item.unread {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notification-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mark-all-read {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 修改密码模态框 */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
width: 400px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.modal-body input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cancel-btn, .submit-btn {
|
||||
padding: 8px 15px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
border: 1px solid #dcdfe6;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 遮罩<E981AE>?*/
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user