feat: complete web application — FastAPI backend + Vue 3 SPA frontend
- Full FastAPI backend with JWT auth, file management, processing pipeline, memory CRUD, barcode mappings, config management, cloud sync - Vue 3 + Element Plus frontend with dashboard, task history, HTTP logs, memory editor, barcode editor, config editor, sync page - HTTP request logging middleware with SQLite persistence - Task history tracking with progress and retry support - File metadata recording for upload/download operations - WebAuth section in config.ini for bcrypt password storage - Bug fix: logs.py count query returns tuple not dict Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,379 @@
|
||||
<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 -->
|
||||
<nav class="sidebar-nav">
|
||||
<router-link
|
||||
v-for="item in navItems"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
class="nav-item"
|
||||
:class="{ active: route.path === item.path }"
|
||||
>
|
||||
<el-icon :size="20"><component :is="item.icon" /></el-icon>
|
||||
<transition name="fade">
|
||||
<span v-if="!isCollapse" class="nav-label">{{ item.label }}</span>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<span v-if="!isCollapse && item.badge" class="nav-badge">{{ item.badge }}</span>
|
||||
</transition>
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<!-- 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">
|
||||
<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 :model="pwdForm" label-width="70px">
|
||||
<el-form-item label="旧密码">
|
||||
<el-input v-model="pwdForm.old_password" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码">
|
||||
<el-input v-model="pwdForm.new_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 } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
HomeFilled, Memo, Connection, Setting, Cloudy, Timer, Notebook,
|
||||
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: '' })
|
||||
|
||||
const navItems: { path: string; label: string; icon: any; badge?: string }[] = [
|
||||
{ path: '/', label: '处理中心', icon: HomeFilled },
|
||||
{ path: '/tasks', label: '任务历史', icon: Timer },
|
||||
{ path: '/logs', label: '日志中心', icon: Notebook },
|
||||
{ path: '/memory', label: '记忆库', icon: Memo },
|
||||
{ path: '/barcodes', label: '条码映射', icon: Connection },
|
||||
{ path: '/config', label: '系统配置', icon: Setting },
|
||||
{ path: '/sync', label: '云端同步', icon: Cloudy },
|
||||
]
|
||||
|
||||
const pageTitle = computed(() => {
|
||||
const item = navItems.find(n => n.path === route.path)
|
||||
return item?.label || '处理中心'
|
||||
})
|
||||
|
||||
function handleCommand(cmd: string) {
|
||||
if (cmd === 'logout') {
|
||||
authStore.logout()
|
||||
router.push('/login')
|
||||
} else if (cmd === 'password') {
|
||||
pwdForm.old_password = ''
|
||||
pwdForm.new_password = ''
|
||||
showPwd.value = true
|
||||
}
|
||||
}
|
||||
|
||||
async function changePassword() {
|
||||
if (!pwdForm.new_password) { ElMessage.warning('请输入新密码'); return }
|
||||
try {
|
||||
await api.post('/auth/change-password', pwdForm)
|
||||
ElMessage.success('密码修改成功')
|
||||
showPwd.value = false
|
||||
} catch (err: any) {
|
||||
ElMessage.error(err.response?.data?.detail || '修改失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
.sidebar {
|
||||
background: var(--bg-sidebar);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s var(--ease-out);
|
||||
overflow: hidden;
|
||||
border-right: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.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: linear-gradient(135deg, rgba(255,193,7,0.15), rgba(255,193,7,0.05));
|
||||
border: 1px solid rgba(255,193,7,0.2);
|
||||
color: var(--amber-400);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
/* ── Nav items ── */
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--text-sidebar);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s var(--ease-out);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: var(--text-sidebar-active);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: rgba(255,193,7,0.1);
|
||||
color: var(--amber-400);
|
||||
}
|
||||
|
||||
.nav-item.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: var(--amber-400);
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
background: var(--amber-400);
|
||||
color: #000;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
.sidebar-footer {
|
||||
padding: 12px;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.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: #fff;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
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: linear-gradient(135deg, var(--primary), #7c3aed);
|
||||
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);
|
||||
}
|
||||
|
||||
/* ── 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>
|
||||
Reference in New Issue
Block a user