Files
ProxyPool/frontend/src/styles/element-plus.css
祀梦 a79f78b338 重构代理池系统:简化架构并增强核心功能
后端变更:
- 移除 tasks_manager.py 和 core/auth.py,简化架构
- 新增 core/scheduler.py 验证调度器,替代原有任务管理
- 大幅优化 api_server.py:统一错误处理、增强参数验证、支持调度器控制
- validator.py 增强 SOCKS4/SOCKS5 代理验证支持
- config.py 清理废弃配置(WebSocket、API Key、认证开关)
- SQLite 数据库操作性能优化

前端变更:
- 移除任务管理页面 (CrawlerTasks) 和 WebSocket 相关代码
- 路由简化为 4 个核心页面:总览、代理列表、插件管理、设置
- 提取前端工具函数(clipboard、confirm、format)和 API 类型定义
- 优化 CSS 架构:完善 variables、utilities、element-plus 样式
- Dashboard、Plugins、ProxyList、Settings 页面 UI/UX 优化
- App.vue 响应式侧边栏和页面过渡动画优化

其他:
- 移除 PowerShell 启动脚本,简化 Windows 批处理脚本
- 新增 README_SOCKS.md SOCKS 代理支持文档
- .env.example 和 .gitignore 更新
2026-04-02 11:23:23 +08:00

594 lines
14 KiB
CSS

/* ==================== Element Plus 冷灰紫主题覆盖 ==================== */
/* -------------------- 输入框 -------------------- */
.el-input__wrapper {
background-color: var(--surface-3) !important;
box-shadow: 0 0 0 1px var(--border) inset !important;
border-radius: var(--radius-md) !important;
}
.el-input__wrapper:hover,
.el-input__wrapper.is-focus {
box-shadow: 0 0 0 1px var(--primary) inset !important;
}
.el-input__wrapper.is-focus {
box-shadow: 0 0 0 1px var(--primary) inset, var(--shadow-primary-sm) !important;
}
.el-input__inner {
color: var(--text-primary) !important;
}
.el-input__inner::placeholder {
color: var(--text-muted) !important;
}
/* -------------------- 选择器 -------------------- */
.el-select__wrapper {
background-color: var(--surface-3) !important;
box-shadow: 0 0 0 1px var(--border) inset !important;
border-radius: var(--radius-md) !important;
}
.el-select__wrapper:hover,
.el-select__wrapper.is-focused {
box-shadow: 0 0 0 1px var(--primary) inset !important;
}
.el-select__wrapper.is-focused {
box-shadow: 0 0 0 1px var(--primary) inset, var(--shadow-primary-sm) !important;
}
.el-select__placeholder {
color: var(--text-muted) !important;
}
.el-select__caret {
color: var(--text-secondary) !important;
}
.el-select__caret.is-reverse {
color: var(--primary) !important;
}
.el-select-dropdown {
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-lg) !important;
background: var(--surface) !important;
border-radius: var(--radius-md) !important;
}
.el-select-dropdown__item {
color: var(--text-secondary) !important;
}
.el-select-dropdown__item:hover {
background: var(--primary-soft) !important;
color: var(--primary) !important;
}
.el-select-dropdown__item.is-selected {
color: var(--primary) !important;
font-weight: 600;
background: var(--primary-soft) !important;
}
/* -------------------- 数字输入框 -------------------- */
.el-input-number__decrease,
.el-input-number__increase {
background: var(--surface-2) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border) !important;
}
.el-input-number__decrease:hover,
.el-input-number__increase:hover {
background: var(--primary-soft) !important;
color: var(--primary) !important;
border-color: var(--primary) !important;
}
.el-input-number__decrease.is-disabled,
.el-input-number__increase.is-disabled {
color: var(--el-disabled-text) !important;
border-color: var(--border) !important;
}
.el-input-number__wrapper {
background-color: var(--surface-3) !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 var(--primary) inset !important;
}
/* -------------------- 按钮 -------------------- */
.el-button {
border: 1px solid var(--border) !important;
background: var(--surface-2) !important;
color: var(--text-secondary) !important;
border-radius: var(--radius-md) !important;
font-weight: 500;
}
.el-button:hover {
border-color: var(--primary) !important;
color: var(--primary) !important;
background: var(--surface-3) !important;
}
/* 主要按钮 - 深紫实心 */
.el-button--primary {
background: var(--primary-solid) !important;
border-color: var(--primary-solid) !important;
color: white !important;
}
.el-button--primary:hover {
background: var(--primary-solid-hover) !important;
border-color: var(--primary-solid-hover) !important;
box-shadow: var(--shadow-primary-md) !important;
transform: translateY(-1px);
}
/* 成功按钮 - 青绿 */
.el-button--success {
background: var(--success) !important;
border-color: var(--success) !important;
color: var(--bg) !important;
}
.el-button--success:hover {
background: #2DD4BF !important;
border-color: #2DD4BF !important;
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3) !important;
}
/* 警告按钮 - 橙黄 */
.el-button--warning {
background: var(--warning) !important;
border-color: var(--warning) !important;
color: var(--bg) !important;
}
.el-button--warning:hover {
background: #FBBF24 !important;
border-color: #FBBF24 !important;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.3) !important;
}
/* 危险按钮 - 粉红 */
.el-button--danger {
background: var(--danger) !important;
border-color: var(--danger) !important;
color: white !important;
}
.el-button--danger:hover {
background: #FCA5A5 !important;
border-color: #FCA5A5 !important;
box-shadow: 0 0 20px rgba(251, 113, 133, 0.3) !important;
}
/* 纯文字按钮 */
.el-button--text {
background: transparent !important;
border-color: transparent !important;
color: var(--primary) !important;
}
.el-button--text:hover {
color: var(--primary-hover) !important;
background: var(--primary-soft) !important;
}
/* -------------------- 卡片 -------------------- */
.el-card {
border: 1px solid var(--border) !important;
box-shadow: none !important;
background: var(--surface) !important;
border-radius: var(--radius-lg) !important;
}
.el-card:hover {
border-color: var(--border-light) !important;
}
.el-card__header {
border-bottom: 1px solid var(--border) !important;
padding: 16px 20px;
}
.el-card__body {
background: transparent !important;
padding: 20px;
}
/* -------------------- 表格 -------------------- */
.el-table {
border: 1px solid var(--border) !important;
background: var(--surface) !important;
border-radius: var(--radius-lg) !important;
--el-table-row-hover-bg-color: var(--surface-2);
--el-table-current-row-bg-color: var(--primary-soft);
--el-table-header-bg-color: var(--surface-2);
--el-table-tr-bg-color: var(--surface);
--el-table-expanded-cell-bg-color: var(--surface);
}
.el-table th.el-table__cell {
background: var(--surface-2) !important;
color: var(--text-secondary) !important;
border-bottom: 1px solid var(--border) !important;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.el-table td.el-table__cell {
color: var(--text-primary) !important;
border-bottom: 1px solid var(--border) !important;
}
.el-table__border-left {
border-left: 1px solid var(--border) !important;
}
.el-table__border-right {
border-right: 1px solid var(--border) !important;
}
.el-table tr:hover > td {
background: var(--surface-2) !important;
}
.el-table__body tr.current-row > td.el-table__cell {
background: var(--primary-soft) !important;
}
/* 表格行选中左侧高亮条 */
.el-table__body tr.current-row > td.el-table__cell:first-child {
border-left: 3px solid var(--primary) !important;
}
/* -------------------- 复选框 -------------------- */
.el-checkbox__inner {
border: 1px solid var(--border) !important;
background: var(--surface-3) !important;
}
.el-checkbox__inner:hover {
border-color: var(--primary) !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background: var(--primary) !important;
border-color: var(--primary) !important;
}
.el-checkbox__input.is-disabled .el-checkbox__inner {
background: var(--el-disabled-bg) !important;
border-color: var(--el-disabled-border) !important;
}
/* -------------------- 分页 -------------------- */
.el-pagination button {
border: 1px solid var(--border) !important;
background: var(--surface) !important;
color: var(--text-secondary) !important;
border-radius: var(--radius-sm) !important;
}
.el-pagination button:hover {
background: var(--surface-2) !important;
border-color: var(--primary) !important;
color: var(--primary) !important;
}
.el-pagination button:disabled {
background: var(--surface) !important;
color: var(--text-muted) !important;
border-color: var(--border) !important;
}
.el-pager li {
background: var(--surface) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm) !important;
}
.el-pager li:hover {
color: var(--primary) !important;
border-color: var(--primary) !important;
}
.el-pager li.is-active {
background: var(--primary) !important;
color: var(--bg) !important;
border-color: var(--primary) !important;
font-weight: 600;
}
/* -------------------- 标签 -------------------- */
.el-tag {
border-radius: var(--radius-sm) !important;
font-weight: 500;
}
.el-tag--primary {
background: var(--primary-soft) !important;
color: var(--primary) !important;
border-color: rgba(146, 124, 255, 0.3) !important;
}
.el-tag--success {
background: var(--success-soft) !important;
color: var(--success) !important;
border-color: rgba(34, 197, 94, 0.3) !important;
}
.el-tag--warning {
background: var(--warning-soft) !important;
color: var(--warning) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
.el-tag--danger {
background: var(--danger-soft) !important;
color: var(--danger) !important;
border-color: rgba(251, 113, 133, 0.3) !important;
}
.el-tag--info {
background: var(--info-soft) !important;
color: var(--info) !important;
border-color: rgba(56, 189, 248, 0.3) !important;
}
/* -------------------- 评分 -------------------- */
.el-rate__icon {
color: var(--border) !important;
}
.el-rate__icon.hover {
color: var(--primary) !important;
}
/* -------------------- 对话框 -------------------- */
.el-dialog {
border: 1px solid var(--border) !important;
background: var(--surface) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-xl) !important;
}
.el-dialog__header {
border-bottom: 1px solid var(--border) !important;
padding: 16px 20px;
margin: 0;
}
.el-dialog__title {
color: var(--text-primary) !important;
font-weight: 600;
}
.el-dialog__body {
background: transparent !important;
color: var(--text-secondary) !important;
padding: 20px;
}
.el-dialog__footer {
border-top: 1px solid var(--border) !important;
padding: 16px 20px;
}
/* -------------------- 下拉菜单 -------------------- */
.el-dropdown-menu {
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-lg) !important;
background: var(--surface) !important;
border-radius: var(--radius-md) !important;
}
.el-dropdown-menu__item {
color: var(--text-secondary) !important;
}
.el-dropdown-menu__item:hover {
background: var(--primary-soft) !important;
color: var(--primary) !important;
}
/* -------------------- 滚动条 -------------------- */
.el-scrollbar__wrap::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: var(--radius-sm);
}
.el-scrollbar__wrap::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
/* -------------------- 表单 -------------------- */
.el-form-item__label {
color: var(--text-secondary) !important;
font-weight: 500;
}
.el-form-item__error {
color: var(--danger) !important;
}
/* -------------------- 消息提示 -------------------- */
.el-message {
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-lg) !important;
background: var(--surface) !important;
border-radius: var(--radius-md) !important;
}
.el-message--success {
background: var(--surface) !important;
border-color: var(--success) !important;
color: var(--success) !important;
}
.el-message--error {
background: var(--surface) !important;
border-color: var(--danger) !important;
color: var(--danger) !important;
}
.el-message--warning {
background: var(--surface) !important;
border-color: var(--warning) !important;
color: var(--warning) !important;
}
.el-message--info {
background: var(--surface) !important;
border-color: var(--primary) !important;
color: var(--primary) !important;
}
/* -------------------- 消息盒子 -------------------- */
.el-message-box {
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-xl) !important;
background: var(--surface) !important;
border-radius: var(--radius-lg) !important;
}
.el-message-box__header {
border-bottom: 1px solid var(--border) !important;
}
.el-message-box__title {
color: var(--text-primary) !important;
font-weight: 600;
}
.el-message-box__content {
color: var(--text-secondary) !important;
}
.el-message-box__btns {
border-top: 1px solid var(--border) !important;
}
/* -------------------- 警告提示 -------------------- */
.el-alert {
border-radius: var(--radius-md) !important;
}
.el-alert--success {
background-color: var(--success-soft) !important;
border: 1px solid rgba(34, 197, 94, 0.3) !important;
color: var(--success) !important;
}
.el-alert--info {
background-color: var(--primary-soft) !important;
border: 1px solid rgba(146, 124, 255, 0.3) !important;
color: var(--primary) !important;
}
.el-alert--warning {
background-color: var(--warning-soft) !important;
border: 1px solid rgba(245, 158, 11, 0.3) !important;
color: var(--warning) !important;
}
.el-alert--error {
background-color: var(--danger-soft) !important;
border: 1px solid rgba(251, 113, 133, 0.3) !important;
color: var(--danger) !important;
}
/* -------------------- Switch 开关 -------------------- */
.theme-switch.el-switch .el-switch__core {
background: var(--surface-3);
border-color: var(--border);
}
.theme-switch.el-switch.is-checked .el-switch__core {
border-color: var(--primary) !important;
background-color: var(--primary) !important;
}
/* -------------------- 进度条 -------------------- */
.el-progress-bar__outer {
background-color: var(--surface-3) !important;
}
.el-progress-bar__inner {
background: var(--gradient-primary) !important;
}
.el-progress__text {
color: var(--text-secondary) !important;
}
/* -------------------- 菜单 -------------------- */
.el-menu {
background: transparent !important;
border-right: none !important;
}
.el-menu-item {
color: var(--text-secondary) !important;
border-radius: var(--radius-md);
margin: 4px 8px;
}
.el-menu-item:hover {
background: var(--surface-2) !important;
color: var(--primary) !important;
}
.el-menu-item.is-active {
background: var(--primary-soft) !important;
color: var(--primary) !important;
font-weight: 600;
}
/* -------------------- Tabs -------------------- */
.el-tabs__nav-wrap::after {
background-color: var(--border) !important;
}
.el-tabs__item {
color: var(--text-muted) !important;
}
.el-tabs__item:hover {
color: var(--primary) !important;
}
.el-tabs__item.is-active {
color: var(--primary) !important;
}
.el-tabs__active-bar {
background-color: var(--primary) !important;
}
/* -------------------- Tooltip -------------------- */
.el-tooltip__popper {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
color: var(--text-primary) !important;
}