ygxbnet/dypid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin): 重构部分页面样式代码，修剪多余代码
部署开发环境 / deploy-dev (push) Successful in 1m38s
Details

Browse Source 
- 将AdminView中的header和main标签替换为el-header和el-main组件
- 移除自定义的导航菜单样式，使用Element Plus的导航组件
- 将管理员下拉菜单替换为el-dropdown组件
- 更新所有颜色变量为Element Plus的CSS变量
- 移除自定义按钮和表单样式，统一使用Element Plus组件
- 优化响应式布局和间距处理
This commit is contained in:
YGXB_net
2026-06-14 01:23:33 +08:00
parent ae0dddd255
commit 4e0b283fa9
6 changed files with 67 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.vue
+4 -148
View File
@@ -12,16 +12,6 @@ const themeMode = ref('light')
<style> <style>
:root { :root {
--primary-color: #409eff;
--primary-light: #79bbff;
--success-color: #67c23a;
--warning-color: #e6a23c;
--danger-color: #f56c6c;
--info-color: #909399;
--text-primary: #303133;
--text-regular: #606266;
--text-secondary: #909399;
--border-color: #dcdfe6;
--bg-page: #f5f7fa; --bg-page: #f5f7fa;
--bg-card: #ffffff; --bg-card: #ffffff;
--bg-header: #ffffff; --bg-header: #ffffff;
@@ -33,7 +23,7 @@ const themeMode = ref('light')
box-sizing: border-box; box-sizing: border-box;
} }
html, body, #app { html, body {
height: 100%; height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
} }
@@ -56,154 +46,20 @@ html, body, #app {
.page-title { .page-title {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--el-text-color-primary);
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--el-border-color);
} }
/* Section 标题 */ /* Section 标题 */
.section-title { .section-title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--el-text-color-primary);
margin: 20px 0 16px; margin: 20px 0 16px;
} }
/* 按钮组样式 */
.btn-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* 表格工具栏 */
.table-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
/* Flex 布局工具类 */
.flex-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
/* Gap 间距 */
.gap-sm {
gap: 8px;
}
.gap-md {
gap: 12px;
}
.gap-lg {
gap: 16px;
}
/* 间距工具类 */
.mt-sm {
margin-top: 8px;
}
.mt-md {
margin-top: 16px;
}
.mt-lg {
margin-top: 24px;
}
.mb-sm {
margin-bottom: 8px;
}
.mb-md {
margin-bottom: 16px;
}
.mb-lg {
margin-bottom: 24px;
}
.ml-sm {
margin-left: 8px;
}
.ml-md {
margin-left: 12px;
}
.ml-lg {
margin-left: 16px;
}
.mr-sm {
margin-right: 8px;
}
.mr-md {
margin-right: 12px;
}
.mr-lg {
margin-right: 16px;
}
/* 文本工具类 */
.text-primary {
color: var(--text-primary);
}
.text-success {
color: var(--success-color);
}
.text-warning {
color: var(--warning-color);
}
.text-danger {
color: var(--danger-color);
}
.text-info {
color: var(--info-color);
}
/* 加载动画 */
.loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
/* 空状态 */
.empty-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 48px;
color: var(--text-secondary);
}
/* 响应式 */ /* 响应式 */
@media (max-width: 768px) { @media (max-width: 768px) {
.content-card { .content-card {
web/src/components/AddDataDialog.vue
+1 -1
View File
@@ -135,7 +135,7 @@ const handleUpload = async () => {
.progress-text { .progress-text {
font-size: 14px; font-size: 14px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
white-space: nowrap; white-space: nowrap;
} }
web/src/views/AdminView.vue
+31 -87
View File
@@ -30,23 +30,18 @@ const logout = () => {
<template> <template>
<div class="admin-layout"> <div class="admin-layout">
<header class="admin-header"> <el-header class="admin-header">
<div class="header-left"> <div class="header-left">
<div class="logo"> <div class="logo">
<el-icon size="24"> DYPID 管理后台
<Edit/>
</el-icon>
<span class="logo-text">DYPID 管理后台</span>
</div> </div>
</div> </div>
<nav class="header-nav"> <nav class="header-nav">
<div <div v-for="item in menuItems" class="nav-item"
v-for="item in menuItems" :key="item.key"
:key="item.key" :class="{ active: activeIndex === item.key }"
class="nav-item" @click="handleSelect(item.key)"
:class="{ active: activeIndex === item.key }"
@click="handleSelect(item.key)"
> >
<el-icon> <el-icon>
<component :is="item.icon"/> <component :is="item.icon"/>
@@ -56,34 +51,32 @@ const logout = () => {
</nav> </nav>
<div class="header-right"> <div class="header-right">
<div v-if="store.isAdmin" class="admin-badge"> <el-dropdown v-if="store.isAdmin">
<el-icon> <el-button :icon="User">管理员</el-button>
<User/>
</el-icon>
<span>管理员</span>
</div>
<el-button
v-if="store.isAdmin"
type="danger"
plain
size="small"
@click="logout"
>
<el-icon>
<CloseBold/>
</el-icon>
退出
</el-button>
</div>
</header>
<main class="admin-main"> <template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="logout()">
<el-text type="danger">
<el-icon>
<CloseBold/>
</el-icon>
退出登录
</el-text>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
<el-main>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<component :is="Component"/> <component :is="Component"/>
</transition> </transition>
</router-view> </router-view>
</main> </el-main>
</div> </div>
</template> </template>
@@ -99,10 +92,8 @@ const logout = () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 24px;
height: 60px;
background: var(--bg-header); background: var(--bg-header);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--el-border-color);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@@ -117,21 +108,11 @@ const logout = () => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
color: var(--primary-color); color: var(--el-color-primary);
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
} }
.logo-text {
display: none;
}
@media (min-width: 768px) {
.logo-text {
display: inline;
}
}
.header-nav { .header-nav {
display: flex; display: flex;
gap: 8px; gap: 8px;
@@ -144,18 +125,18 @@ const logout = () => {
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
color: var(--text-regular); color: var(--el-text-color-regular);
font-size: 14px; font-size: 14px;
transition: all 0.2s; transition: all 0.2s;
} }
.nav-item:hover { .nav-item:hover {
background: var(--bg-page); background: var(--bg-page);
color: var(--text-primary); color: var(--el-text-color-primary);
} }
.nav-item.active { .nav-item.active {
background: var(--primary-color); background: var(--el-color-primary);
color: #fff; color: #fff;
} }
@@ -165,37 +146,8 @@ const logout = () => {
gap: 12px; gap: 12px;
} }
.admin-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--danger-color);
color: #fff;
border-radius: 20px;
font-size: 13px;
}
.admin-main {
flex: 1;
padding: 24px 48px;
max-width: 100%;
overflow-x: auto;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.admin-header { .admin-header {
padding: 0 16px;
flex-wrap: wrap; flex-wrap: wrap;
height: auto; height: auto;
padding: 12px 16px; padding: 12px 16px;
@@ -212,13 +164,5 @@ const logout = () => {
padding: 8px 12px; padding: 8px 12px;
font-size: 13px; font-size: 13px;
} }
.nav-item span {
display: none;
}
.admin-main {
padding: 16px;
}
} }
</style> </style>
web/src/views/HomeView.vue
+14 -27
View File
@@ -3,7 +3,7 @@ import {onMounted, onUnmounted, ref} from 'vue'
import api from "@/api" import api from "@/api"
import {useRoute} from "vue-router" import {useRoute} from "vue-router"
import {ElMessage} from "element-plus" import {ElMessage} from "element-plus"
import {DataAnalysis, Document, Key, Search, Upload, Warning} from '@element-plus/icons-vue' import {DataAnalysis, Document, Key, Plus, Search, Warning} from '@element-plus/icons-vue'
import AddDataDialog from "@/components/AddDataDialog.vue"; import AddDataDialog from "@/components/AddDataDialog.vue";
const route = useRoute() const route = useRoute()
@@ -71,36 +71,23 @@ const statCards = [
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="content-card" style="max-width: 1600px;"> <div class="content-card" style="max-width: 1600px">
<div class="page-header"> <div class="page-header">
<div class="page-title">Token 信息查询</div> <div class="page-title">Token 信息查询</div>
<div class="header-subtitle">输入 Token 以查看去重和缓存信息</div> <div class="header-subtitle">输入 Token 以查看去重和缓存信息</div>
</div> </div>
<div class="search-box"> <div class="search-box">
<el-input <el-input placeholder="输入 Token" size="large" clearable class="token-input"
v-model="inputToken" v-model="inputToken" @change="inputChange"/>
placeholder="输入 Token"
clearable
size="large"
class="token-input"
@change="inputChange"
>
<template #prefix>
<el-icon>
<Search/>
</el-icon>
</template>
</el-input>
<el-button type="primary" size="large" @click="refresh" :loading="loading"> <el-button type="primary" size="large"
@click="refresh" :loading="loading" :icon="Search">
查询 查询
</el-button> </el-button>
<el-button type="success" size="large" @click="showAddDataDialog = true"> <el-button type="success" size="large" class=""
<el-icon> @click="showAddDataDialog = true" :icon="Plus">
<Upload/>
</el-icon>
增加数据 增加数据
</el-button> </el-button>
</div> </div>
@@ -155,7 +142,7 @@ const statCards = [
} }
.header-subtitle { .header-subtitle {
color: var(--text-secondary); color: var(--el-text-color-secondary);
margin-top: 8px; margin-top: 8px;
} }
@@ -193,7 +180,7 @@ const statCards = [
.auto-refresh { .auto-refresh {
font-size: 12px; font-size: 12px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
} }
.stat-cards { .stat-cards {
@@ -233,14 +220,14 @@ const statCards = [
.stat-label { .stat-label {
font-size: 13px; font-size: 13px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
margin-bottom: 4px; margin-bottom: 4px;
} }
.stat-value { .stat-value {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--el-text-color-primary);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@@ -250,7 +237,7 @@ const statCards = [
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
font-size: 13px; font-size: 13px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
} }
.empty-state { .empty-state {
@@ -258,7 +245,7 @@ const statCards = [
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 64px; padding: 64px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
} }
.empty-text { .empty-text {
web/src/views/admin/TokenDetailView.vue
+10 -11
View File
@@ -318,7 +318,6 @@ const statCards = [
<style scoped> <style scoped>
.token-detail { .token-detail {
max-width: 1600px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
padding: 0; padding: 0;
@@ -345,7 +344,7 @@ const statCards = [
} }
.no-permission-text { .no-permission-text {
color: var(--text-secondary); color: var(--el-text-color-secondary);
} }
/* Token 选择 */ /* Token 选择 */
@@ -359,7 +358,7 @@ const statCards = [
.update-time { .update-time {
font-size: 13px; font-size: 13px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
} }
/* 信息卡片 */ /* 信息卡片 */
@@ -411,14 +410,14 @@ const statCards = [
.stat-label { .stat-label {
font-size: 13px; font-size: 13px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
margin-bottom: 4px; margin-bottom: 4px;
} }
.stat-value { .stat-value {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--el-text-color-primary);
word-break: break-all; word-break: break-all;
} }
@@ -430,7 +429,7 @@ const statCards = [
.section-subtitle { .section-subtitle {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--el-text-color-secondary);
margin: 24px 0 16px; margin: 24px 0 16px;
} }
@@ -462,12 +461,12 @@ const statCards = [
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--primary-color); background: var(--el-color-primary);
color: #fff; color: #fff;
} }
.action-icon.warning { .action-icon.warning {
background: var(--warning-color); background: var(--el-color-warning);
} }
.action-info { .action-info {
@@ -478,13 +477,13 @@ const statCards = [
.action-label { .action-label {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--el-text-color-primary);
margin-bottom: 4px; margin-bottom: 4px;
} }
.action-desc { .action-desc {
font-size: 13px; font-size: 13px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
} }
/* 空状态 */ /* 空状态 */
@@ -493,7 +492,7 @@ const statCards = [
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 64px; padding: 64px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
} }
.empty-text { .empty-text {
web/src/views/admin/TokenManageView.vue
+7 -7
View File
@@ -261,7 +261,8 @@ const deleteToken = async (row: any) => {
<span class="table-count">共 {{ tableData.length }} 条</span> <span class="table-count">共 {{ tableData.length }} 条</span>
</div> </div>
<el-table :data="tableData" v-loading="loading" stripe style="width: 100%"> <el-table empty-text="没有数据" stripe style="width: 100%"
:data="tableData" v-loading="loading">
<el-table-column prop="token" label="Token" min-width="100" show-overflow-tooltip> <el-table-column prop="token" label="Token" min-width="100" show-overflow-tooltip>
<template #default="{ row }"> <template #default="{ row }">
<div class="token-cell"> <div class="token-cell">
@@ -385,7 +386,6 @@ const deleteToken = async (row: any) => {
<style scoped> <style scoped>
.token-manage { .token-manage {
max-width: 1600px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
padding: 0; padding: 0;
@@ -416,13 +416,13 @@ const deleteToken = async (row: any) => {
.login-title { .login-title {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--el-text-color-primary);
margin-bottom: 8px; margin-bottom: 8px;
} }
.login-subtitle { .login-subtitle {
font-size: 14px; font-size: 14px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
margin-bottom: 32px; margin-bottom: 32px;
} }
@@ -446,7 +446,7 @@ const deleteToken = async (row: any) => {
.form-title { .form-title {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--el-text-color-primary);
margin-bottom: 16px; margin-bottom: 16px;
} }
@@ -479,7 +479,7 @@ const deleteToken = async (row: any) => {
.table-count { .table-count {
font-size: 13px; font-size: 13px;
color: var(--text-secondary); color: var(--el-text-color-secondary);
} }
.token-cell { .token-cell {
@@ -494,7 +494,7 @@ const deleteToken = async (row: any) => {
} }
.notes-text { .notes-text {
color: var(--text-secondary); color: var(--el-text-color-secondary);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;