houhuan
7e63dda522
- Call authStore.fetchUser() in onMounted so avatar shows username after refresh - Simplify navigator.onLine checks (remove redundant !== false) - Remove unused navItems array (dead code from earlier iteration) - Add password form validation with confirm password field and rules Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
510 lines
13 KiB
Vue
510 lines
13 KiB
Vue
<template>
|
|
<el-container class="layout">
|
|
<el-aside :width="isCollapse ? '72px' : '240px'" class="sidebar">
|
|
<!-- Logo -->
|
|
<div class="sidebar-logo" @click="isCollapse = !isCollapse">
|
|
<div class="logo-mark">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/>
|
|
<rect x="9" y="3" width="6" height="4" rx="1"/>
|
|
<path d="M9 14l2 2 4-4"/>
|
|
</svg>
|
|
</div>
|
|
<transition name="fade">
|
|
<span v-if="!isCollapse" class="logo-text">益选 OCR</span>
|
|
</transition>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<el-menu
|
|
:default-active="route.path"
|
|
:default-openeds="filesMenuOpen"
|
|
:collapse="isCollapse"
|
|
mode="vertical"
|
|
background-color="transparent"
|
|
text-color="var(--text-sidebar)"
|
|
active-text-color="#fafafa"
|
|
class="sidebar-nav"
|
|
router
|
|
>
|
|
<el-menu-item index="/">
|
|
<el-icon><HomeFilled /></el-icon>
|
|
<template #title>处理中心</template>
|
|
</el-menu-item>
|
|
|
|
<el-sub-menu index="/files">
|
|
<template #title>
|
|
<el-icon><FolderOpened /></el-icon>
|
|
<span>文件处理</span>
|
|
</template>
|
|
<el-menu-item index="/files/orders">采购单</el-menu-item>
|
|
<el-menu-item index="/files/tables">表格处理</el-menu-item>
|
|
<el-menu-item index="/files/images">图片处理</el-menu-item>
|
|
</el-sub-menu>
|
|
|
|
<el-menu-item index="/tasks">
|
|
<el-icon><Timer /></el-icon>
|
|
<template #title>任务历史</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/logs">
|
|
<el-icon><Notebook /></el-icon>
|
|
<template #title>日志中心</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/memory">
|
|
<el-icon><Memo /></el-icon>
|
|
<template #title>记忆库</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/barcodes">
|
|
<el-icon><Connection /></el-icon>
|
|
<template #title>条码映射</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/config">
|
|
<el-icon><Setting /></el-icon>
|
|
<template #title>系统配置</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/sync">
|
|
<el-icon><Cloudy /></el-icon>
|
|
<template #title>云端同步</template>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
|
|
<!-- Collapse toggle -->
|
|
<div class="sidebar-footer">
|
|
<button class="collapse-btn" @click="isCollapse = !isCollapse">
|
|
<el-icon :size="18">
|
|
<DArrowLeft v-if="!isCollapse" />
|
|
<DArrowRight v-else />
|
|
</el-icon>
|
|
</button>
|
|
</div>
|
|
</el-aside>
|
|
|
|
<el-container class="main-container">
|
|
<!-- Header -->
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<h2 class="page-title">{{ pageTitle }}</h2>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<!-- Online indicator -->
|
|
<div v-if="!isOnline" class="offline-badge">
|
|
<span class="offline-dot"></span>
|
|
离线
|
|
</div>
|
|
<el-dropdown @command="handleCommand" trigger="click">
|
|
<div class="user-chip">
|
|
<div class="user-avatar">{{ (authStore.username || 'U')[0].toUpperCase() }}</div>
|
|
<span class="user-name">{{ authStore.username || '用户' }}</span>
|
|
<el-icon :size="14"><ArrowDown /></el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="password">
|
|
<el-icon><Lock /></el-icon>修改密码
|
|
</el-dropdown-item>
|
|
<el-dropdown-item command="logout" divided>
|
|
<el-icon><SwitchButton /></el-icon>退出登录
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content -->
|
|
<main class="content">
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="page" mode="out-in">
|
|
<component :is="Component" />
|
|
</transition>
|
|
</router-view>
|
|
</main>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<!-- Change password dialog -->
|
|
<el-dialog v-model="showPwd" title="修改密码" width="420px" :close-on-click-modal="false">
|
|
<el-form ref="pwdFormRef" :model="pwdForm" :rules="pwdRules" label-width="70px">
|
|
<el-form-item label="旧密码" prop="old_password">
|
|
<el-input v-model="pwdForm.old_password" type="password" show-password />
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="new_password">
|
|
<el-input v-model="pwdForm.new_password" type="password" show-password />
|
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="confirm_password">
|
|
<el-input v-model="pwdForm.confirm_password" type="password" show-password />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="showPwd = false">取消</el-button>
|
|
<el-button type="primary" @click="changePassword">确认修改</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, reactive, onMounted, onUnmounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
|
import {
|
|
HomeFilled, Memo, Connection, Setting, Cloudy, Timer, Notebook, FolderOpened,
|
|
ArrowDown, Lock, SwitchButton, DArrowLeft, DArrowRight
|
|
} from '@element-plus/icons-vue'
|
|
import { useAuthStore } from '../stores/auth'
|
|
import api from '../api'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
|
|
const isCollapse = ref(false)
|
|
const showPwd = ref(false)
|
|
const pwdForm = reactive({ old_password: '', new_password: '', confirm_password: '' })
|
|
const pwdFormRef = ref<FormInstance>()
|
|
const pwdRules: FormRules = {
|
|
old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
|
|
new_password: [
|
|
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
|
{ min: 6, message: '密码至少6位', trigger: 'blur' }
|
|
],
|
|
confirm_password: [
|
|
{ required: true, message: '请确认新密码', trigger: 'blur' },
|
|
{
|
|
validator: (_rule: any, value: string, callback: any) => {
|
|
if (value !== pwdForm.new_password) {
|
|
callback(new Error('两次输入的密码不一致'))
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
}
|
|
const isOnline = ref(navigator.onLine)
|
|
|
|
// Track online/offline status
|
|
function updateOnlineStatus() {
|
|
isOnline.value = navigator.onLine
|
|
}
|
|
onMounted(async () => {
|
|
window.addEventListener('online', updateOnlineStatus)
|
|
window.addEventListener('offline', updateOnlineStatus)
|
|
await authStore.fetchUser()
|
|
})
|
|
onUnmounted(() => {
|
|
window.removeEventListener('online', updateOnlineStatus)
|
|
window.removeEventListener('offline', updateOnlineStatus)
|
|
})
|
|
|
|
const filesMenuOpen = ['/files']
|
|
|
|
const pageTitles: Record<string, string> = {
|
|
'/': '处理中心',
|
|
'/files/orders': '采购单',
|
|
'/files/tables': '表格处理',
|
|
'/files/images': '图片处理',
|
|
'/tasks': '任务历史',
|
|
'/logs': '日志中心',
|
|
'/memory': '记忆库',
|
|
'/barcodes': '条码映射',
|
|
'/config': '系统配置',
|
|
'/sync': '云端同步',
|
|
}
|
|
|
|
const pageTitle = computed(() => {
|
|
return pageTitles[route.path] || '处理中心'
|
|
})
|
|
|
|
function handleCommand(cmd: string) {
|
|
if (cmd === 'logout') {
|
|
authStore.logout()
|
|
router.push('/login')
|
|
} else if (cmd === 'password') {
|
|
pwdForm.old_password = ''
|
|
pwdForm.new_password = ''
|
|
pwdForm.confirm_password = ''
|
|
showPwd.value = true
|
|
}
|
|
}
|
|
|
|
async function changePassword() {
|
|
if (!pwdFormRef.value) return
|
|
await pwdFormRef.value.validate(async (valid) => {
|
|
if (!valid) return
|
|
try {
|
|
await api.post('/auth/change-password', {
|
|
old_password: pwdForm.old_password,
|
|
new_password: pwdForm.new_password
|
|
})
|
|
ElMessage.success('密码修改成功')
|
|
showPwd.value = false
|
|
} catch (err: any) {
|
|
ElMessage.error(err.response?.data?.detail || '修改失败')
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.layout {
|
|
height: 100vh;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar {
|
|
background: #09090b;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: width 0.3s var(--ease-out);
|
|
overflow: hidden;
|
|
border-right: 1px solid #18181b;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 20px 20px 24px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.logo-mark {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: #18181b;
|
|
border: 1px solid #27272a;
|
|
color: #fafafa;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
/* ── Nav items (el-menu) ── */
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
padding: 0 12px;
|
|
border-right: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-menu-item),
|
|
.sidebar-nav :deep(.el-sub-menu__title) {
|
|
height: 42px;
|
|
line-height: 42px;
|
|
border-radius: 10px;
|
|
margin-bottom: 2px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s var(--ease-out);
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-menu-item:hover),
|
|
.sidebar-nav :deep(.el-sub-menu__title:hover) {
|
|
background: rgba(255,255,255,0.06) !important;
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-menu-item.is-active) {
|
|
background: rgba(255,255,255,0.1) !important;
|
|
color: #fafafa !important;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-menu-item.is-active)::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 3px;
|
|
height: 18px;
|
|
border-radius: 0 3px 3px 0;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-sub-menu .el-menu-item) {
|
|
padding-left: 52px !important;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-sub-menu .el-menu) {
|
|
background: rgba(255,255,255,0.03) !important;
|
|
border-radius: 8px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-sub-menu__icon-arrow) {
|
|
color: var(--text-sidebar);
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-menu--collapse .el-sub-menu__title span),
|
|
.sidebar-nav :deep(.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow) {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-nav :deep(.el-menu--collapse .el-menu-item .el-icon),
|
|
.sidebar-nav :deep(.el-menu--collapse .el-sub-menu__title .el-icon) {
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-badge {
|
|
margin-left: auto;
|
|
font-size: 11px;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Footer ── */
|
|
.sidebar-footer {
|
|
padding: 12px;
|
|
border-top: 1px solid #18181b;
|
|
}
|
|
|
|
.collapse-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: none;
|
|
background: rgba(255,255,255,0.04);
|
|
border-radius: 8px;
|
|
color: var(--text-sidebar);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.collapse-btn:hover {
|
|
background: rgba(255,255,255,0.08);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ── Main container ── */
|
|
.main-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
/* ── Topbar ── */
|
|
.topbar {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 28px;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #e4e4e7;
|
|
flex-shrink: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
.user-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px 6px 6px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.user-chip:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: #18181b;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ── Offline badge ── */
|
|
.offline-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 12px;
|
|
border-radius: var(--radius-sm);
|
|
background: rgba(239,68,68,0.1);
|
|
color: #ef4444;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.offline-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #ef4444;
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* ── Content ── */
|
|
.content {
|
|
flex: 1;
|
|
padding: 24px 28px;
|
|
overflow-y: auto;
|
|
background: var(--bg-page);
|
|
}
|
|
|
|
/* ── Transitions ── */
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity 0.2s;
|
|
}
|
|
.fade-enter-from, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.page-enter-active {
|
|
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
|
|
}
|
|
.page-leave-active {
|
|
transition: opacity 0.15s;
|
|
}
|
|
.page-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
.page-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|