优化前端代码架构 - 提取CSS变量和工具类
主要改进： - 新增 variables.css 统一管理所有主题相关的CSS变量 - 新增 utilities.css 提供可复用的工具类组件 - 重构所有Vue组件，移除重复的CSS代码 - 统一使用CSS变量实现一致的粉色主题(#FF6B9D) - 改进代码组织结构，提升可维护性 - 优化样式继承和复用机制 修改文件： - 新增：frontend/src/styles/variables.css, utilities.css - 重构：App.vue, 所有视图组件和组件文件 - 更新：style.css, element-plus.css 技术亮点： - 模块化CSS架构，使用@import导入 - 统一的颜色、间距、阴影、过渡效果变量 - 卡片、按钮、布局等通用工具类 - 响应式设计支持
This commit is contained in:
祀梦
@@ -60,43 +60,6 @@ const activeMenu = computed(() => route.path)
|
||||
</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;
|
||||
@@ -107,7 +70,7 @@ body {
|
||||
.side-menu {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
border-right: 1px solid rgba(255, 107, 157, 0.15);
|
||||
border-right: 1px solid var(--border);
|
||||
box-shadow: 4px 0 20px rgba(255, 107, 157, 0.1);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: blur(10px);
|
||||
@@ -119,7 +82,7 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 35px 0;
|
||||
border-bottom: 1px solid rgba(255, 107, 157, 0.15);
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -131,38 +94,20 @@ body {
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #FF6B9D, transparent);
|
||||
background: linear-gradient(90deg, transparent, var(--primary), 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;
|
||||
color: var(--primary);
|
||||
text-shadow: 0 0 20px rgba(255, 107, 157, 0.3);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
@@ -181,8 +126,8 @@ body {
|
||||
: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);
|
||||
transition: var(--transition-hover);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -195,14 +140,14 @@ body {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background: var(--theme-primary);
|
||||
background: var(--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);
|
||||
color: var(--primary);
|
||||
transform: translateX(8px);
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
@@ -212,8 +157,8 @@ body {
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active) {
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #00B8E0 100%) !important;
|
||||
color: var(--theme-bg) !important;
|
||||
background: var(--gradient-cyan) !important;
|
||||
color: var(--bg-page) !important;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
@@ -225,167 +170,6 @@ body {
|
||||
.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;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,15 +20,13 @@ defineProps({
|
||||
<style scoped>
|
||||
.header-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 107, 157, 0.15);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
color: var(--theme-primary);
|
||||
color: var(--primary);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@@ -129,24 +129,8 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
border-radius: 20px;
|
||||
border-radius: var(--radius-xl);
|
||||
min-height: 400px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 107, 157, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-primary);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
size="large"
|
||||
class="action-btn"
|
||||
:loading="loading"
|
||||
@click="$emit('start-crawler')"
|
||||
@click="$emit('startCrawler')"
|
||||
>
|
||||
<span class="btn-icon">🚀</span>
|
||||
立即更新
|
||||
@@ -51,23 +51,8 @@ defineEmits(['start-crawler', 'export', 'clean'])
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
border-radius: 20px;
|
||||
border-radius: var(--radius-xl);
|
||||
min-height: 400px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 107, 157, 0.15);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-primary);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
@@ -82,33 +67,17 @@ defineEmits(['start-crawler', 'export', 'clean'])
|
||||
height: 60px;
|
||||
font-size: 16px;
|
||||
border-radius: 14px;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.15);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
box-shadow: 0 8px 20px rgba(255, 107, 157, 0.25);
|
||||
}
|
||||
|
||||
:deep(.action-btn .el-button__content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,11 +33,11 @@ defineProps({
|
||||
|
||||
<style scoped>
|
||||
.stat-card {
|
||||
border-radius: 20px;
|
||||
min-height: 180px;
|
||||
border-radius: var(--radius-xl);
|
||||
min-height: 120px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 107, 157, 0.15);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: var(--transition-hover);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -45,7 +45,7 @@ defineProps({
|
||||
.stat-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 8px 24px rgba(255, 107, 157, 0.15);
|
||||
border-color: var(--theme-primary);
|
||||
border-color: var(--cyan);
|
||||
}
|
||||
|
||||
.stat-card.total {
|
||||
@@ -71,26 +71,26 @@ defineProps({
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 48px;
|
||||
font-size: 32px;
|
||||
margin-right: 20px;
|
||||
filter: drop-shadow(0 0 15px rgba(255, 107, 157, 0.3));
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-text);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@@ -1,39 +1,6 @@
|
||||
:root {
|
||||
--theme-primary: #00D4FF;
|
||||
--theme-primary-light: #00B8E0;
|
||||
--theme-primary-dark: #0090B0;
|
||||
--theme-bg: linear-gradient(135deg, #0A0E27 0%, #1A1F3A 50%, #162032 100%);
|
||||
--theme-bg-solid: #0A0E27;
|
||||
--theme-bg-light: #1A1F3A;
|
||||
--theme-bg-card: rgba(26, 31, 58, 0.95);
|
||||
--theme-text: #E0E6FF;
|
||||
--theme-text-secondary: #9CA3AF;
|
||||
--theme-border: #2D3748;
|
||||
--theme-border-light: #3A4558;
|
||||
--theme-gradient-1: linear-gradient(135deg, #00D4FF 0%, #00B8E0 100%);
|
||||
--theme-gradient-2: linear-gradient(135deg, #FF6B9D 0%, #FF8E53 100%);
|
||||
--theme-gradient-3: linear-gradient(135deg, #00FF88 0%, #00CC6A 100%);
|
||||
|
||||
--el-color-primary: #00D4FF;
|
||||
--el-color-primary-light-3: #00B8E0;
|
||||
--el-color-primary-light-5: #4A90E2;
|
||||
--el-color-primary-light-7: #00B8FF;
|
||||
--el-color-primary-light-8: #00D4FF;
|
||||
--el-color-primary-light-9: #00E5FF;
|
||||
--el-color-primary-dark-2: #0090B0;
|
||||
--el-color-success: #00FF88;
|
||||
--el-color-warning: #FFB800;
|
||||
--el-color-danger: #FF3366;
|
||||
--el-color-info: #A855F7;
|
||||
--el-bg-color: #0A0E27;
|
||||
--el-bg-color-page: #0A0E27;
|
||||
--el-text-color-primary: #E0E6FF;
|
||||
--el-text-color-regular: #9CA3AF;
|
||||
--el-border-color: #2D3748;
|
||||
--el-border-color-light: #2D3748;
|
||||
--el-fill-color-blank: #1A1F3A;
|
||||
--el-fill-color-light: #1A1F3A;
|
||||
}
|
||||
@import './styles/variables.css';
|
||||
@import './styles/utilities.css';
|
||||
@import './styles/element-plus.css';
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -44,14 +11,41 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--theme-text);
|
||||
background: var(--theme-bg);
|
||||
background-attachment: fixed;
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-page);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--cyan);
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--cyan-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--bg-page);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
@@ -61,331 +55,33 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--theme-primary);
|
||||
transition: color 0.3s ease;
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--theme-primary-light);
|
||||
@keyframes shimmer {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.15);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background-color: var(--theme-bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.el-card:hover {
|
||||
box-shadow: 0 8px 32px rgba(0, 212, 255, 0.2);
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background: var(--theme-gradient-1);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
color: #0A0E27;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-button--primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.el-button--primary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.el-button--success {
|
||||
background: var(--theme-gradient-3);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
color: #0A0E27;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-button--success::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.el-button--success:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.el-button--success:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 255, 136, 0.4);
|
||||
}
|
||||
|
||||
.el-button--danger {
|
||||
background: var(--theme-gradient-2);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-button--danger::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.el-button--danger:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.el-button--danger:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.4);
|
||||
}
|
||||
|
||||
.el-button--warning {
|
||||
background-color: #FFB800;
|
||||
border-color: #FFB800;
|
||||
border-radius: 8px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
color: #0A0E27;
|
||||
}
|
||||
|
||||
.el-button--warning:hover {
|
||||
background-color: #E5A600;
|
||||
border-color: #E5A600;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
|
||||
}
|
||||
|
||||
.el-button--default {
|
||||
border: 1px solid var(--theme-border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 600;
|
||||
background-color: var(--theme-bg-light);
|
||||
color: var(--theme-text);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-button--default:hover {
|
||||
border-color: var(--theme-primary);
|
||||
color: var(--theme-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 1px var(--theme-border) inset;
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--theme-bg-light);
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px var(--theme-primary-light) inset;
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 2px var(--theme-primary) inset;
|
||||
}
|
||||
|
||||
.el-select .el-input__wrapper {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--theme-border);
|
||||
background-color: var(--theme-bg-card);
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background-color: var(--theme-bg-light);
|
||||
color: var(--theme-primary);
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid var(--theme-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
border-bottom: 1px solid var(--theme-border);
|
||||
background-color: var(--theme-bg-card);
|
||||
}
|
||||
|
||||
.el-table tr:hover > td {
|
||||
background-color: var(--theme-bg-light);
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--theme-border);
|
||||
padding: 4px 12px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.el-tag--primary {
|
||||
background-color: rgba(0, 212, 255, 0.15);
|
||||
color: var(--theme-primary);
|
||||
border-color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.el-tag--success {
|
||||
background-color: rgba(0, 255, 136, 0.15);
|
||||
color: #00FF88;
|
||||
border-color: #00FF88;
|
||||
}
|
||||
|
||||
.el-tag--warning {
|
||||
background-color: rgba(255, 184, 0, 0.15);
|
||||
color: #FFB800;
|
||||
border-color: #FFB800;
|
||||
}
|
||||
|
||||
.el-tag--danger {
|
||||
background-color: rgba(255, 51, 102, 0.15);
|
||||
color: #FF3366;
|
||||
border-color: #FF3366;
|
||||
}
|
||||
|
||||
.el-tag--info {
|
||||
background-color: rgba(168, 85, 247, 0.15);
|
||||
color: #A855F7;
|
||||
border-color: #A855F7;
|
||||
}
|
||||
|
||||
.el-rate__icon {
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
|
||||
background-color: var(--theme-primary);
|
||||
color: #0A0E27;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .btn-prev {
|
||||
background-color: var(--theme-bg-light);
|
||||
color: var(--theme-primary);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--theme-border);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .btn-next:hover,
|
||||
.el-pagination.is-background .btn-prev:hover {
|
||||
background-color: var(--theme-primary);
|
||||
color: #0A0E27;
|
||||
border-color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.el-pagination.is-background .el-pager li {
|
||||
background-color: var(--theme-bg-light);
|
||||
color: var(--theme-primary);
|
||||
border-radius: 6px;
|
||||
margin: 0 4px;
|
||||
border: 1px solid var(--theme-border);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .el-pager li:hover {
|
||||
background-color: var(--theme-primary-light);
|
||||
color: #0A0E27;
|
||||
}
|
||||
|
||||
.el-message {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
background-color: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.el-message--success .el-message__content {
|
||||
color: #00FF88;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-message--error .el-message__content {
|
||||
color: #FF3366;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-message--warning .el-message__content {
|
||||
color: #FFB800;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-message--info .el-message__content {
|
||||
color: #A855F7;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-progress-bar__inner {
|
||||
background: var(--theme-gradient-1);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-progress-bar__inner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: progressShine 2s infinite;
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progressShine {
|
||||
@@ -396,174 +92,3 @@ a:hover {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
background-color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.el-switch.is-checked .el-switch__action {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.el-alert {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--theme-border);
|
||||
background-color: var(--theme-bg-card);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.el-alert--success {
|
||||
background-color: rgba(0, 255, 136, 0.1);
|
||||
border-color: #00FF88;
|
||||
}
|
||||
|
||||
.el-alert--info {
|
||||
background-color: rgba(168, 85, 247, 0.1);
|
||||
border-color: #A855F7;
|
||||
}
|
||||
|
||||
.el-alert--warning {
|
||||
background-color: rgba(255, 184, 0, 0.1);
|
||||
border-color: #FFB800;
|
||||
}
|
||||
|
||||
.el-alert--error {
|
||||
background-color: rgba(255, 51, 102, 0.1);
|
||||
border-color: #FF3366;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
background-color: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
background-color: var(--theme-bg-light);
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
color: var(--theme-primary);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--theme-border);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--theme-bg-card);
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:hover {
|
||||
background-color: var(--theme-bg-light);
|
||||
color: var(--theme-primary);
|
||||
border-radius: 6px;
|
||||
margin: 2px 6px;
|
||||
}
|
||||
|
||||
.el-notification {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.el-notification__title {
|
||||
color: var(--theme-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
border-bottom: 1px solid var(--theme-border);
|
||||
padding: 16px 20px;
|
||||
background-color: var(--theme-bg-light);
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 20px;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: var(--theme-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-input-number {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-input-number .el-input__wrapper {
|
||||
border-radius: 8px;
|
||||
background-color: var(--theme-bg-light);
|
||||
}
|
||||
|
||||
.el-radio-button__inner {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--theme-border);
|
||||
background-color: var(--theme-bg-light);
|
||||
color: var(--theme-text);
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-radio-button__original-radio:checked + .el-radio-button__inner {
|
||||
background-color: var(--theme-primary);
|
||||
border-color: var(--theme-primary);
|
||||
color: #0A0E27;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: 1px solid var(--theme-border);
|
||||
background-color: var(--theme-bg);
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
border-radius: 8px;
|
||||
margin: 4px 8px;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.el-menu-item:hover {
|
||||
background-color: var(--theme-bg-light);
|
||||
color: var(--theme-primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-color: var(--theme-primary);
|
||||
color: #0A0E27;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--theme-bg);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme-border-light);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--theme-primary-light);
|
||||
}
|
||||
|
||||
@@ -1,177 +1,160 @@
|
||||
/* Element Plus 全局样式覆盖 - 强制去除所有黑色边框 */
|
||||
|
||||
/* 输入框 */
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover,
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||
}
|
||||
|
||||
/* 下拉选择框 */
|
||||
.el-select__wrapper {
|
||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
||||
}
|
||||
|
||||
.el-select__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||
}
|
||||
|
||||
.el-select__wrapper:hover,
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||
}
|
||||
|
||||
.el-select__placeholder {
|
||||
color: #999999 !important;
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.el-select__caret {
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #333333 !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-selected {
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 数字输入框 */
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
background: #FFF9FB !important;
|
||||
color: #999999 !important;
|
||||
border: 1px solid #FFE4EC !important;
|
||||
background: var(--bg-light) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-input-number__decrease:hover,
|
||||
.el-input-number__increase:hover {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
border-color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-input-number__decrease.is-disabled,
|
||||
.el-input-number__increase.is-disabled {
|
||||
color: #cccccc !important;
|
||||
border-color: #FFE4EC !important;
|
||||
color: #ccc !important;
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
.el-input-number__wrapper {
|
||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
||||
}
|
||||
|
||||
.el-input-number__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||
}
|
||||
|
||||
.el-input-number__wrapper:hover,
|
||||
.el-input-number__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.el-button {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%) !important;
|
||||
border-color: #FF6B9D !important;
|
||||
background: var(--gradient-primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
background: linear-gradient(135deg, #FF5A8F 0%, #FF7FA7 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.el-button--success {
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%) !important;
|
||||
border-color: #00D4FF !important;
|
||||
background: var(--gradient-cyan) !important;
|
||||
border-color: var(--cyan) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-button--success:hover {
|
||||
background: linear-gradient(135deg, #00C4F0 0%, #00D4E8 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.el-button--warning {
|
||||
background: linear-gradient(135deg, #FFB800 0%, #FFD000 100%) !important;
|
||||
border-color: #FFB800 !important;
|
||||
background: var(--gradient-yellow) !important;
|
||||
border-color: var(--yellow) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-button--warning:hover {
|
||||
background: linear-gradient(135deg, #FFA700 0%, #FFC000 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.el-button--danger {
|
||||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%) !important;
|
||||
border-color: #FF6B6B !important;
|
||||
background: var(--gradient-danger) !important;
|
||||
border-color: var(--danger) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-button--danger:hover {
|
||||
background: linear-gradient(135deg, #FF5A5A 0%, #FF7A7A 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.el-card {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
background: var(--bg-card) !important;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
.el-table {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background: #FFF9FB !important;
|
||||
color: #333333 !important;
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
background: var(--bg-light) !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell {
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-table__border-left {
|
||||
border-left: 1px solid #FFE4EC !important;
|
||||
border-left: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-table__border-right {
|
||||
border-right: 1px solid #FFE4EC !important;
|
||||
border-right: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-table tr:hover > td {
|
||||
@@ -179,22 +162,21 @@
|
||||
}
|
||||
|
||||
.el-table__body tr.current-row > td.el-table__cell {
|
||||
background: #FFE4EC !important;
|
||||
background: var(--border) !important;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
.el-checkbox__inner {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.el-checkbox__inner:hover {
|
||||
border-color: #FF6B9D !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background: #FF6B9D !important;
|
||||
border-color: #FF6B9D !important;
|
||||
background: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-disabled .el-checkbox__inner {
|
||||
@@ -202,79 +184,71 @@
|
||||
border-color: #e4e7ed !important;
|
||||
}
|
||||
|
||||
/* 分页器 */
|
||||
.el-pagination button {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
background: #FFF9FB !important;
|
||||
color: #999999 !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
background: var(--bg-light) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.el-pagination button:hover {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-pagination li.is-active {
|
||||
background: #FF6B9D !important;
|
||||
background: var(--primary) !important;
|
||||
color: white !important;
|
||||
border-color: #FF6B9D !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
background: #FFF9FB !important;
|
||||
color: #999999 !important;
|
||||
border: 1px solid #FFE4EC !important;
|
||||
background: var(--bg-light) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-pager li:hover {
|
||||
color: #FF6B9D !important;
|
||||
}
|
||||
|
||||
/* Tag */
|
||||
.el-tag {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-tag--primary {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
border-color: rgba(255, 107, 157, 0.3) !important;
|
||||
}
|
||||
|
||||
.el-tag--success {
|
||||
background: rgba(0, 212, 255, 0.1) !important;
|
||||
color: #00D4FF !important;
|
||||
color: var(--cyan) !important;
|
||||
border-color: rgba(0, 212, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.el-tag--warning {
|
||||
background: rgba(255, 184, 0, 0.1) !important;
|
||||
color: #FFB800 !important;
|
||||
color: var(--yellow) !important;
|
||||
border-color: rgba(255, 184, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.el-tag--danger {
|
||||
background: rgba(255, 107, 107, 0.1) !important;
|
||||
color: #FF6B6B !important;
|
||||
color: var(--danger) !important;
|
||||
border-color: rgba(255, 107, 107, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Rate 评分 */
|
||||
.el-rate__icon {
|
||||
color: #FFE4EC !important;
|
||||
color: var(--border) !important;
|
||||
}
|
||||
|
||||
.el-rate__icon.hover {
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Dialog 对话框 */
|
||||
.el-dialog {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
@@ -282,96 +256,111 @@
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
border-top: 1px solid #FFE4EC !important;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
/* Dropdown 下拉菜单 */
|
||||
.el-dropdown-menu {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
color: #333333 !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:hover {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Scrollbar 滚动条 */
|
||||
.el-scrollbar__wrap::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
|
||||
background: #FFE4EC;
|
||||
border-radius: 3px;
|
||||
background: var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap::-webkit-scrollbar-thumb:hover {
|
||||
background: #FF6B9D;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* Form 表单 */
|
||||
.el-form-item__label {
|
||||
color: #666666 !important;
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.el-form-item__error {
|
||||
color: #FF6B6B !important;
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
/* Message 消息提示 */
|
||||
.el-message {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
.el-message--success {
|
||||
background: rgba(0, 212, 255, 0.1) !important;
|
||||
border-color: rgba(0, 212, 255, 0.3) !important;
|
||||
color: #00D4FF !important;
|
||||
color: var(--cyan) !important;
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
background: rgba(255, 107, 107, 0.1) !important;
|
||||
border-color: rgba(255, 107, 107, 0.3) !important;
|
||||
color: #FF6B6B !important;
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
background: rgba(255, 184, 0, 0.1) !important;
|
||||
border-color: rgba(255, 184, 0, 0.3) !important;
|
||||
color: #FFB800 !important;
|
||||
color: var(--yellow) !important;
|
||||
}
|
||||
|
||||
.el-message--info {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
border-color: rgba(255, 107, 157, 0.3) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* MessageBox 弹窗 */
|
||||
.el-message-box {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
.el-message-box__header {
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-message-box__title {
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-message-box__content {
|
||||
color: #333333 !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
border-top: 1px solid #FFE4EC !important;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-alert--success {
|
||||
background-color: rgba(0, 255, 136, 0.1) !important;
|
||||
border-color: var(--green) !important;
|
||||
}
|
||||
|
||||
.el-alert--info {
|
||||
background-color: rgba(255, 107, 157, 0.1) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-alert--warning {
|
||||
background-color: rgba(255, 184, 0, 0.1) !important;
|
||||
border-color: var(--yellow) !important;
|
||||
}
|
||||
|
||||
.el-alert--error {
|
||||
background-color: rgba(255, 51, 102, 0.1) !important;
|
||||
border-color: var(--danger) !important;
|
||||
}
|
||||
|
||||
190
frontend/src/styles/utilities.css
Normal file
190
frontend/src/styles/utilities.css
Normal file
@@ -0,0 +1,190 @@
|
||||
.card-base {
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-hover);
|
||||
}
|
||||
|
||||
.card-base:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.btn-base {
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
transition: var(--transition-base);
|
||||
border: 1px solid var(--border);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: var(--gradient-cyan);
|
||||
border-color: var(--cyan);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: var(--gradient-yellow);
|
||||
border-color: var(--yellow);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--gradient-danger);
|
||||
border-color: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
background: var(--bg-page);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stat-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.text-cyan {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.bg-gradient-cyan {
|
||||
background: var(--gradient-cyan);
|
||||
}
|
||||
|
||||
.border-pink {
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
43
frontend/src/styles/variables.css
Normal file
43
frontend/src/styles/variables.css
Normal file
@@ -0,0 +1,43 @@
|
||||
:root {
|
||||
--primary: #FF6B9D;
|
||||
--primary-light: #FF8FB3;
|
||||
--primary-dark: #FF5A8F;
|
||||
|
||||
--cyan: #00D4FF;
|
||||
--cyan-light: #00E5FF;
|
||||
--cyan-dark: #00B8E0;
|
||||
|
||||
--green: #34D399;
|
||||
--yellow: #FFB800;
|
||||
--danger: #FF6B6B;
|
||||
--purple: #A855F7;
|
||||
|
||||
--bg-page: #FAFAFA;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-light: #FFF9FB;
|
||||
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #999999;
|
||||
--text-muted: #666666;
|
||||
|
||||
--border: #FFE4EC;
|
||||
--border-light: #FFD6E3;
|
||||
|
||||
--gradient-primary: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%);
|
||||
--gradient-cyan: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%);
|
||||
--gradient-yellow: linear-gradient(135deg, #FFB800 0%, #FFD000 100%);
|
||||
--gradient-danger: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%);
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 20px;
|
||||
|
||||
--shadow-sm: 0 2px 8px rgba(255, 107, 157, 0.08);
|
||||
--shadow-md: 0 4px 12px rgba(255, 107, 157, 0.15);
|
||||
--shadow-lg: 0 8px 20px rgba(255, 107, 157, 0.2);
|
||||
|
||||
--transition-base: all 0.3s ease;
|
||||
--transition-hover: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="crawler-tasks">
|
||||
<div class="page-container">
|
||||
<PageHeader title="任务管理" icon="🎀" />
|
||||
|
||||
<el-card class="control-card" shadow="hover">
|
||||
@@ -32,7 +32,6 @@
|
||||
@click="handleStart"
|
||||
:loading="crawler.running"
|
||||
:disabled="crawler.running"
|
||||
class="start-btn"
|
||||
>
|
||||
<span class="btn-icon">🚀</span>
|
||||
开始任务
|
||||
@@ -42,7 +41,6 @@
|
||||
size="large"
|
||||
@click="handleStop"
|
||||
:disabled="!crawler.running"
|
||||
class="stop-btn"
|
||||
>
|
||||
<span class="btn-icon">⏹️</span>
|
||||
停止任务
|
||||
@@ -159,11 +157,6 @@ const crawlProgress = computed(() => {
|
||||
return Math.round((crawler.progress.current / crawler.progress.total) * 100)
|
||||
})
|
||||
|
||||
const verifyProgress = computed(() => {
|
||||
if (crawler.progress.total === 0) return 0
|
||||
return Math.round((crawler.progress.current / crawler.progress.total) * 100)
|
||||
})
|
||||
|
||||
function formatTime(timeStr) {
|
||||
if (!timeStr) return '-'
|
||||
const date = new Date(timeStr)
|
||||
@@ -212,17 +205,9 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.crawler-tasks {
|
||||
padding: 20px;
|
||||
background: var(--theme-bg);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.control-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 16px;
|
||||
background: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -234,7 +219,7 @@ onUnmounted(() => {
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.control-content {
|
||||
@@ -249,7 +234,7 @@ onUnmounted(() => {
|
||||
|
||||
.control-label {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
margin-right: 20px;
|
||||
min-width: 100px;
|
||||
}
|
||||
@@ -264,23 +249,6 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.start-btn, .stop-btn {
|
||||
padding: 15px 40px;
|
||||
font-size: 16px;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.start-btn:hover:not(:disabled) {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(255, 107, 157, 0.3);
|
||||
}
|
||||
|
||||
.stop-btn:hover:not(:disabled) {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
@@ -288,9 +256,7 @@ onUnmounted(() => {
|
||||
|
||||
.progress-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 16px;
|
||||
background: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.progress-content {
|
||||
@@ -303,7 +269,7 @@ onUnmounted(() => {
|
||||
|
||||
.progress-label {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -314,7 +280,7 @@ onUnmounted(() => {
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
color: var(--theme-primary);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -335,12 +301,12 @@ onUnmounted(() => {
|
||||
|
||||
.status-label {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 16px;
|
||||
color: #FF6B9D;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -361,17 +327,17 @@ onUnmounted(() => {
|
||||
|
||||
.stat-item.success {
|
||||
background: rgba(52, 211, 153, 0.1);
|
||||
border: 2px solid #34D399;
|
||||
border: 2px solid var(--green);
|
||||
}
|
||||
|
||||
.stat-item.failed {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 2px solid #EF4444;
|
||||
.stat-item.verified {
|
||||
background: rgba(255, 107, 157, 0.1);
|
||||
border: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -381,17 +347,15 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.stat-item.success .stat-value {
|
||||
color: #34D399;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.stat-item.failed .stat-value {
|
||||
color: #EF4444;
|
||||
.stat-item.verified .stat-value {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.scheduled-card {
|
||||
border-radius: 16px;
|
||||
background: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.scheduled-content {
|
||||
@@ -406,7 +370,7 @@ onUnmounted(() => {
|
||||
|
||||
.scheduled-label {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
margin-right: 20px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<div class="page-container">
|
||||
<PageHeader title="代理池管理系统" icon="🔮" />
|
||||
|
||||
<el-row :gutter="20" class="stats-row">
|
||||
@@ -63,7 +63,6 @@ const crawler = useCrawlerStore()
|
||||
|
||||
const stats = computed(() => proxyStore.stats)
|
||||
|
||||
// 监听爬虫状态，任务结束时自动刷新数据
|
||||
watch(() => crawler.running, async (newVal, oldVal) => {
|
||||
if (oldVal === true && newVal === false) {
|
||||
await proxyStore.fetchStats()
|
||||
@@ -141,12 +140,6 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
padding: 20px;
|
||||
background: var(--theme-bg);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -156,10 +149,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.status-card {
|
||||
border-radius: 20px;
|
||||
border-radius: var(--radius-xl);
|
||||
margin-bottom: 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 107, 157, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@@ -178,7 +169,7 @@ onUnmounted(() => {
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
color: #FF6B9D;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 10px rgba(255, 107, 157, 0.3);
|
||||
}
|
||||
@@ -186,24 +177,13 @@ onUnmounted(() => {
|
||||
.status-message {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #9CA3AF;
|
||||
color: var(--text-secondary);
|
||||
padding: 15px;
|
||||
background: rgba(26, 31, 58, 0.5);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="plugins">
|
||||
<div class="page-container">
|
||||
<PageHeader title="插件管理" icon="🔌" />
|
||||
|
||||
<el-card class="plugins-card" shadow="hover" v-loading="pluginsStore.loading">
|
||||
@@ -126,16 +126,8 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plugins {
|
||||
padding: 20px;
|
||||
background: var(--theme-bg);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.plugins-card {
|
||||
border-radius: 16px;
|
||||
background: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -147,7 +139,7 @@ onMounted(async () => {
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.plugin-name {
|
||||
@@ -161,7 +153,7 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.plugin-description {
|
||||
color: var(--theme-text-secondary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -178,7 +170,7 @@ onMounted(async () => {
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--theme-text-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
@@ -187,23 +179,20 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.stat-value.success {
|
||||
color: #34D399;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.stat-value.failed {
|
||||
color: #F56C6C;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.last-run {
|
||||
color: var(--theme-text-secondary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-switch__label) {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="proxy-list">
|
||||
<div class="page-container">
|
||||
<PageHeader title="代理列表" icon="📋" />
|
||||
|
||||
<el-card class="filter-card" shadow="hover">
|
||||
<el-form :inline="true" :model="filterForm" class="filter-form">
|
||||
<el-form :inline="true" :model="filterForm" class="form-row">
|
||||
<el-form-item label="协议类型">
|
||||
<el-select v-model="filterForm.protocol" placeholder="全部" clearable style="width: 120px">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
@@ -23,11 +23,11 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch" class="search-btn">
|
||||
<el-button type="primary" @click="handleSearch">
|
||||
<span class="btn-icon">🔍</span>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset" class="reset-btn">
|
||||
<el-button @click="handleReset">
|
||||
<span class="btn-icon">🔄</span>
|
||||
重置
|
||||
</el-button>
|
||||
@@ -63,7 +63,6 @@
|
||||
v-loading="proxyStore.loading"
|
||||
@selection-change="handleSelectionChange"
|
||||
:row-style="{ cursor: 'pointer' }"
|
||||
class="proxy-table"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="ip" label="IP地址" width="150" />
|
||||
@@ -82,7 +81,6 @@
|
||||
disabled
|
||||
show-score
|
||||
:score-template="scope.row.score ? '{value}' : '0'"
|
||||
text-color="var(--theme-primary)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -93,7 +91,6 @@
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.stop="handleCopy(scope.row)"
|
||||
class="action-btn"
|
||||
>
|
||||
复制
|
||||
</el-button>
|
||||
@@ -101,7 +98,6 @@
|
||||
type="danger"
|
||||
size="small"
|
||||
@click.stop="handleDelete(scope.row)"
|
||||
class="action-btn"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
@@ -118,7 +114,6 @@
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
class="pagination"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -251,41 +246,12 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.proxy-list {
|
||||
padding: 20px;
|
||||
background: var(--theme-bg);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 16px;
|
||||
background: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-btn, .reset-btn {
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-btn:hover, .reset-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.2);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -297,7 +263,7 @@ onMounted(() => {
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #FF6B9D;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
@@ -305,18 +271,9 @@ onMounted(() => {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.proxy-table {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: scale(1.05);
|
||||
.btn-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
@@ -325,8 +282,4 @@ onMounted(() => {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,64 +1,148 @@
|
||||
<template>
|
||||
<div class="settings">
|
||||
<PageHeader title="设置" icon="⚙️" />
|
||||
<div class="page-container">
|
||||
<PageHeader title="系统设置" icon="⚙️" />
|
||||
|
||||
<el-card class="settings-card" shadow="hover">
|
||||
<el-card class="settings-card" shadow="hover" v-loading="loading">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">📝 关于</span>
|
||||
<span class="card-title">🎨 基础配置</span>
|
||||
<el-button type="primary" @click="handleSave" size="large" :loading="saving">
|
||||
<span class="btn-icon">💾</span>
|
||||
保存配置
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="about-content">
|
||||
<div class="about-item">
|
||||
<span class="about-label">项目名称</span>
|
||||
<span class="about-value">代理池管理系统</span>
|
||||
</div>
|
||||
<div class="about-item">
|
||||
<span class="about-label">版本号</span>
|
||||
<span class="about-value">v1.0.0</span>
|
||||
</div>
|
||||
<div class="about-item">
|
||||
<span class="about-label">后端API</span>
|
||||
<span class="about-value">http://localhost:3000</span>
|
||||
</div>
|
||||
<div class="about-item">
|
||||
<span class="about-label">前端服务</span>
|
||||
<span class="about-value">http://localhost:8080</span>
|
||||
</div>
|
||||
<div class="about-item">
|
||||
<span class="about-label">数据库</span>
|
||||
<span class="about-value">SQLite</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form :model="settings" label-width="150px" class="settings-form">
|
||||
<el-form-item label="数据库路径">
|
||||
<el-input v-model="settings.db_path" placeholder="数据库文件路径" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="爬取超时">
|
||||
<el-input-number
|
||||
v-model="settings.crawl_timeout"
|
||||
:min="5"
|
||||
:max="120"
|
||||
:step="5"
|
||||
class="setting-input"
|
||||
/>
|
||||
<span class="setting-suffix">秒</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="验证超时">
|
||||
<el-input-number
|
||||
v-model="settings.validation_timeout"
|
||||
:min="3"
|
||||
:max="60"
|
||||
:step="1"
|
||||
class="setting-input"
|
||||
/>
|
||||
<span class="setting-suffix">秒</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最大重试次数">
|
||||
<el-input-number
|
||||
v-model="settings.max_retries"
|
||||
:min="0"
|
||||
:max="10"
|
||||
class="setting-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="默认并发数">
|
||||
<el-input-number
|
||||
v-model="settings.default_concurrency"
|
||||
:min="10"
|
||||
:max="200"
|
||||
:step="10"
|
||||
class="setting-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最低代理分数">
|
||||
<el-input-number
|
||||
v-model="settings.min_proxy_score"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:step="1"
|
||||
class="setting-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="代理过期时间">
|
||||
<el-input-number
|
||||
v-model="settings.proxy_expiry_days"
|
||||
:min="1"
|
||||
:max="30"
|
||||
:step="1"
|
||||
class="setting-input"
|
||||
/>
|
||||
<span class="setting-suffix">天</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import PageHeader from '../components/PageHeader.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const settings = reactive({
|
||||
db_path: '',
|
||||
crawl_timeout: 30,
|
||||
validation_timeout: 10,
|
||||
max_retries: 3,
|
||||
default_concurrency: 50,
|
||||
min_proxy_score: 5,
|
||||
proxy_expiry_days: 7
|
||||
})
|
||||
|
||||
async function fetchSettings() {
|
||||
loading.value = true
|
||||
try {
|
||||
const response = await fetch('http://localhost:8923/api/settings')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
Object.assign(settings, data)
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
saving.value = true
|
||||
try {
|
||||
const response = await fetch('http://localhost:8923/api/settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(settings)
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
ElMessage.success('配置保存成功啦~')
|
||||
} else {
|
||||
ElMessage.error('配置保存失败呢~')
|
||||
}
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchSettings()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings {
|
||||
padding: 20px;
|
||||
background: var(--theme-bg);
|
||||
min-height: 100vh;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 12px;
|
||||
background: var(--theme-bg-card);
|
||||
border: 1px solid var(--theme-border);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--theme-primary);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -69,132 +153,26 @@ import PageHeader from '../components/PageHeader.vue'
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-primary);
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
.settings-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--theme-border);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.setting-item:hover {
|
||||
background-color: var(--theme-bg-light);
|
||||
border-radius: 8px;
|
||||
padding: 20px 10px;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
flex: 1;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.setting-desc {
|
||||
font-size: 14px;
|
||||
color: var(--theme-text-secondary);
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.setting-input {
|
||||
width: 150px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.setting-actions {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
padding: 12px 30px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--theme-primary);
|
||||
border: none;
|
||||
color: var(--theme-bg);
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
padding: 12px 30px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--theme-bg-light);
|
||||
border: 1px solid var(--theme-border);
|
||||
color: var(--theme-text);
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
.setting-suffix {
|
||||
margin-left: 10px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.about-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid var(--theme-border);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.about-item:hover {
|
||||
background-color: var(--theme-bg-light);
|
||||
border-radius: 8px;
|
||||
padding: 15px 10px;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
.about-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.about-label {
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.about-value {
|
||||
font-size: 16px;
|
||||
color: var(--theme-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user