first commit
This commit is contained in:
祀梦
391
frontend/src/App.vue
Normal file
391
frontend/src/App.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<script setup>
|
||||
import { RouterView, useRoute } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const route = useRoute()
|
||||
const activeMenu = computed(() => route.path)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
class="side-menu"
|
||||
router
|
||||
>
|
||||
<div class="logo-section">
|
||||
<div class="logo">🌸</div>
|
||||
<div class="logo-text">代理池</div>
|
||||
</div>
|
||||
|
||||
<el-menu-item index="/dashboard">
|
||||
<template #title>
|
||||
<span class="menu-icon">🏠</span>
|
||||
<span>总览</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/proxies">
|
||||
<template #title>
|
||||
<span class="menu-icon">📋</span>
|
||||
<span>代理列表</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/crawler">
|
||||
<template #title>
|
||||
<span class="menu-icon">🎀</span>
|
||||
<span>任务管理</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/plugins">
|
||||
<template #title>
|
||||
<span class="menu-icon">🔌</span>
|
||||
<span>插件管理</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/settings">
|
||||
<template #title>
|
||||
<span class="menu-icon">⚙️</span>
|
||||
<span>设置</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<div class="main-content">
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* 全局样式修正 */
|
||||
:root {
|
||||
--menu-bg: #FFFFFF;
|
||||
--menu-text: #666666;
|
||||
--menu-active-text: #FF6B9D;
|
||||
--menu-hover-bg: #FFF0F5;
|
||||
--menu-border: #FFB6C1;
|
||||
--theme-bg: #FAFAFA;
|
||||
--theme-bg-card: #FFFFFF;
|
||||
--theme-border: #FFE4EC;
|
||||
--theme-primary: #FF6B9D;
|
||||
--theme-text: #333333;
|
||||
--theme-text-secondary: #999999;
|
||||
--theme-bg-light: #FFF9FB;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.side-menu {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
border-right: 1px solid rgba(255, 107, 157, 0.15);
|
||||
box-shadow: 4px 0 20px rgba(255, 107, 157, 0.1);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 35px 0;
|
||||
border-bottom: 1px solid rgba(255, 107, 157, 0.15);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-section::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #FF6B9D, transparent);
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 52px;
|
||||
margin-bottom: 10px;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #FF6B9D;
|
||||
text-shadow: 0 0 20px rgba(255, 107, 157, 0.3);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
:deep(.el-menu) {
|
||||
border-right: none;
|
||||
background-color: transparent;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
border-radius: 12px;
|
||||
margin: 8px 12px;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: var(--theme-text-secondary);
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item::before) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background: var(--theme-primary);
|
||||
transform: scaleY(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item:hover) {
|
||||
background: rgba(0, 212, 255, 0.1) !important;
|
||||
color: var(--theme-primary);
|
||||
transform: translateX(8px);
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
|
||||
:deep(.el-menu-item:hover::before) {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active) {
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #00B8E0 100%) !important;
|
||||
color: var(--theme-bg) !important;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active::before) {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: var(--theme-bg);
|
||||
}
|
||||
|
||||
/* 全局覆盖Element Plus黑色边框 */
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px var(--theme-border) inset !important;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper:hover) {
|
||||
box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
|
||||
}
|
||||
|
||||
:deep(.el-select__wrapper) {
|
||||
box-shadow: 0 0 0 1px var(--theme-border) inset !important;
|
||||
}
|
||||
|
||||
:deep(.el-select__wrapper:hover) {
|
||||
box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
|
||||
}
|
||||
|
||||
:deep(.el-select__wrapper.is-focused) {
|
||||
box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
|
||||
}
|
||||
|
||||
:deep(.el-input-number__decrease),
|
||||
:deep(.el-input-number__increase) {
|
||||
background: var(--theme-bg-light);
|
||||
color: var(--theme-text-secondary);
|
||||
border: 1px solid var(--theme-border) !important;
|
||||
}
|
||||
|
||||
:deep(.el-input-number__decrease:hover),
|
||||
:deep(.el-input-number__increase:hover) {
|
||||
background: rgba(255, 107, 157, 0.1);
|
||||
color: var(--theme-primary);
|
||||
border-color: var(--theme-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-input-number__decrease.is-disabled),
|
||||
:deep(.el-input-number__increase.is-disabled) {
|
||||
color: #ccc !important;
|
||||
border-color: var(--theme-border) !important;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
border: 1px solid var(--theme-border) !important;
|
||||
}
|
||||
|
||||
:deep(.el-button--primary) {
|
||||
background: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%) !important;
|
||||
border-color: #FF6B9D !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.el-button--success) {
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%) !important;
|
||||
border-color: #00D4FF !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.el-button--warning) {
|
||||
background: linear-gradient(135deg, #FFB800 0%, #FFD000 100%) !important;
|
||||
border-color: #FFB800 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.el-button--danger) {
|
||||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%) !important;
|
||||
border-color: #FF6B6B !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.el-card) {
|
||||
border: 1px solid var(--theme-border) !important;
|
||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
border: 1px solid var(--theme-border) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table th.el-table__cell) {
|
||||
background: var(--theme-bg-light) !important;
|
||||
color: var(--theme-text) !important;
|
||||
border-bottom: 1px solid var(--theme-border) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table td.el-table__cell) {
|
||||
border-bottom: 1px solid var(--theme-border) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__border-left) {
|
||||
border-left: 1px solid var(--theme-border) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__border-right) {
|
||||
border-right: 1px solid var(--theme-border) !important;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
border: 1px solid var(--theme-border) !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner:hover) {
|
||||
border-color: var(--theme-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
||||
background: var(--theme-primary) !important;
|
||||
border-color: var(--theme-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
|
||||
background: #f5f5f5 !important;
|
||||
border-color: #e4e7ed !important;
|
||||
}
|
||||
|
||||
:deep(.el-pagination button) {
|
||||
border: 1px solid var(--theme-border) !important;
|
||||
background: var(--theme-bg-light) !important;
|
||||
color: var(--theme-text-secondary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-pagination button:hover) {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: var(--theme-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-pagination li.is-active) {
|
||||
background: var(--theme-primary) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.el-pager li) {
|
||||
background: var(--theme-bg-light) !important;
|
||||
color: var(--theme-text-secondary) !important;
|
||||
border: 1px solid var(--theme-border) !important;
|
||||
}
|
||||
|
||||
/* 下拉面板样式 */
|
||||
:deep(.el-select-dropdown) {
|
||||
border: 1px solid var(--theme-border) !important;
|
||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item) {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item:hover) {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: var(--theme-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item.is-selected) {
|
||||
color: var(--theme-primary) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user