From 2ac87e2592a31e335ea804cc9f667c5cc94753c6 Mon Sep 17 00:00:00 2001 From: mac Date: Thu, 16 Jul 2026 15:57:47 +0800 Subject: [PATCH] merge(frontend): sync main styles with auth flow --- frontend/public/logo-qiniu.png | Bin 0 -> 4830 bytes frontend/src/components/AuditLogTable.vue | 4 +- frontend/src/components/Layout/AppHeader.vue | 95 +++- frontend/src/components/Layout/AppSidebar.vue | 24 +- frontend/src/components/SubsystemCard.vue | 30 +- frontend/src/composables/useTheme.ts | 68 +++ frontend/src/layouts/DefaultLayout.vue | 4 +- frontend/src/styles/global.css | 523 +++++++++++++++++- frontend/src/styles/variables.css | 162 ++++++ frontend/src/views/audit/LoginAudit.vue | 20 +- frontend/src/views/audit/OpsAudit.vue | 20 +- frontend/src/views/auth/Login.vue | 22 +- frontend/src/views/cluster/ClusterList.vue | 163 +----- frontend/src/views/config/ConfigCenter.vue | 234 +------- frontend/src/views/dashboard/Index.vue | 214 +------ frontend/src/views/monitor/Monitor.vue | 122 +--- frontend/src/views/resource/Management.vue | 239 +------- frontend/src/views/resource/StatusBoard.vue | 189 +------ frontend/src/views/service/Catalog.vue | 39 +- frontend/src/views/service/Management.vue | 237 +------- frontend/src/views/subsystem/Navigation.vue | 26 +- frontend/src/views/task/TaskCenter.vue | 184 +----- 22 files changed, 921 insertions(+), 1698 deletions(-) create mode 100644 frontend/public/logo-qiniu.png create mode 100644 frontend/src/composables/useTheme.ts diff --git a/frontend/public/logo-qiniu.png b/frontend/public/logo-qiniu.png new file mode 100644 index 0000000000000000000000000000000000000000..f871591a465ea9501c7116e6ed691d0a8487f49c GIT binary patch literal 4830 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
-
xi
+ logo xinfra 统一基础设施平台
● 生产环境 @@ -11,6 +11,14 @@ 搜索集群 / 节点 / 服务实例 ⌘K +
+ + + + + + +
{{ userInitial }}
@@ -25,7 +33,9 @@ diff --git a/frontend/src/views/audit/OpsAudit.vue b/frontend/src/views/audit/OpsAudit.vue index e79875b..cf0adf7 100644 --- a/frontend/src/views/audit/OpsAudit.vue +++ b/frontend/src/views/audit/OpsAudit.vue @@ -53,23 +53,5 @@ onMounted(() => { diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue index 3943bca..2d39019 100644 --- a/frontend/src/views/auth/Login.vue +++ b/frontend/src/views/auth/Login.vue @@ -9,7 +9,9 @@

{{ title }}

{{ subtitle }}

- {{ buttonText }} + @@ -48,10 +50,14 @@ onMounted(() => { width: 400px; background: var(--bg-panel); border: 1px solid var(--line); - border-radius: 12px; + border-radius: var(--radius-xl); padding: 40px; } +.login-btn { + width: 100%; +} + .login-header { text-align: center; margin-bottom: 32px; @@ -70,15 +76,15 @@ onMounted(() => { .login-header .brand .mark { width: 36px; height: 36px; - border-radius: 8px; - background: linear-gradient(135deg, var(--accent), #1C8F69); + border-radius: var(--radius-lg); + background: linear-gradient(135deg, var(--accent), var(--accent-end)); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 16px; font-weight: 600; - color: #08140F; + color: var(--bg-deep); } .login-header h2 { @@ -117,7 +123,7 @@ onMounted(() => { } :deep(.el-input__wrapper:hover) { - border-color: #3A4356; + border-color: var(--hover-border); } :deep(.el-input__wrapper.is-focus) { @@ -131,11 +137,11 @@ onMounted(() => { :deep(.el-button--primary) { background: var(--accent); border-color: var(--accent); - color: #06150F; + color: var(--bg-deep); font-weight: 600; } :deep(.el-button--primary:hover) { - background: #55E8B3; + opacity: 0.9; } diff --git a/frontend/src/views/cluster/ClusterList.vue b/frontend/src/views/cluster/ClusterList.vue index 8234378..0ddd7fe 100644 --- a/frontend/src/views/cluster/ClusterList.vue +++ b/frontend/src/views/cluster/ClusterList.vue @@ -64,7 +64,7 @@ {{ node.name }} {{ node.ip }} {{ node.label }} - {{ node.taint }} + {{ node.taint }} {{ node.spec }} {{ node.cpu }}% ● {{ node.status }} @@ -86,170 +86,17 @@ const clusters = ref([ ]) const nodes = ref([ - { name: 'bj-node-014', ip: '10.21.4.14', label: 'business-line=kodo', labelColor: '#8EC8FF', labelBorder: '#1C3A5C', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 58, cpuClass: '', status: 'Ready', statusClass: 'ok' }, - { name: 'bj-node-015', ip: '10.21.4.15', label: 'business-line=kodo', labelColor: '#8EC8FF', labelBorder: '#1C3A5C', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 62, cpuClass: '', status: 'Ready', statusClass: 'ok' }, - { name: 'bj-node-031', ip: '10.21.4.31', label: 'business-line=las', labelColor: '#C9A6FF', labelBorder: '#3A2C5C', taint: 'las:NoSchedule', spec: '32C/128G', cpu: 88, cpuClass: 'warn', status: '资源告警', statusClass: 'warn' }, + { name: 'bj-node-014', ip: '10.21.4.14', label: 'business-line=kodo', labelColor: 'var(--tag-blue-text)', labelBorder: 'var(--tag-blue-border)', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 58, cpuClass: '', status: 'Ready', statusClass: 'ok' }, + { name: 'bj-node-015', ip: '10.21.4.15', label: 'business-line=kodo', labelColor: 'var(--tag-blue-text)', labelBorder: 'var(--tag-blue-border)', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 62, cpuClass: '', status: 'Ready', statusClass: 'ok' }, + { name: 'bj-node-031', ip: '10.21.4.31', label: 'business-line=las', labelColor: 'var(--tag-purple-text)', labelBorder: 'var(--tag-purple-border)', taint: 'las:NoSchedule', spec: '32C/128G', cpu: 88, cpuClass: 'warn', status: '资源告警', statusClass: 'warn' }, { name: 'bj-node-048', ip: '10.21.4.48', label: '未分配', labelColor: 'var(--text-dim)', labelBorder: 'var(--line)', taint: '—', spec: '32C/128G', cpu: 4, cpuClass: '', status: 'Ready · 空闲', statusClass: 'ok' }, ]) diff --git a/frontend/src/views/config/ConfigCenter.vue b/frontend/src/views/config/ConfigCenter.vue index c28aa19..1492e83 100644 --- a/frontend/src/views/config/ConfigCenter.vue +++ b/frontend/src/views/config/ConfigCenter.vue @@ -31,7 +31,7 @@
同步状态
-
● 正常
+
● 正常
最近发布 09:12:30
@@ -41,10 +41,10 @@

统一入口

Apollo Portal · LDAP 单点登录 -
+
- +

Apollo Portal

apollo.xinfra.internal
@@ -81,7 +81,7 @@ {{ cluster.name }} cluster={{ cluster.cluster }} - {{ cluster.address }} + {{ cluster.address }} {{ cluster.type }} {{ cluster.biz }} {{ cluster.items }} @@ -109,241 +109,17 @@ const clusters = ref([ diff --git a/frontend/src/views/dashboard/Index.vue b/frontend/src/views/dashboard/Index.vue index efa84f2..fb1764d 100644 --- a/frontend/src/views/dashboard/Index.vue +++ b/frontend/src/views/dashboard/Index.vue @@ -31,7 +31,7 @@
进行中任务
-
2
+
2
1 个待关注
@@ -46,7 +46,7 @@
IDC-华北机房 - 46节点 + 46节点
@@ -55,7 +55,7 @@
IDC-华东机房 - 52节点 + 52节点
@@ -64,7 +64,7 @@
阿里云-华南 - 30节点 + 30节点
@@ -127,107 +127,7 @@ const refresh = () => { diff --git a/frontend/src/views/monitor/Monitor.vue b/frontend/src/views/monitor/Monitor.vue index d63a4f8..5fe24ab 100644 --- a/frontend/src/views/monitor/Monitor.vue +++ b/frontend/src/views/monitor/Monitor.vue @@ -7,7 +7,7 @@
-
+

VictoriaMetrics · 指标概览

@@ -94,123 +94,5 @@ const logs = ref([ diff --git a/frontend/src/views/resource/Management.vue b/frontend/src/views/resource/Management.vue index 91af0bb..9d9ad77 100644 --- a/frontend/src/views/resource/Management.vue +++ b/frontend/src/views/resource/Management.vue @@ -31,7 +31,7 @@
最近一次同步
-
● 正常
+
● 正常
07:39:10 · 新增 3 条
@@ -58,7 +58,7 @@ - +
@@ -84,11 +84,11 @@ {{ item.hostname }} - {{ item.asset_number }} + {{ item.asset_number }} {{ item.type }} {{ item.location }} {{ item.ip }} - {{ item.spec }} + {{ item.spec }} {{ item.business_line }} {{ item.source }} ● {{ item.status }} @@ -127,234 +127,17 @@ const resources = ref([ diff --git a/frontend/src/views/resource/StatusBoard.vue b/frontend/src/views/resource/StatusBoard.vue index 324b683..f8e1d17 100644 --- a/frontend/src/views/resource/StatusBoard.vue +++ b/frontend/src/views/resource/StatusBoard.vue @@ -26,17 +26,17 @@
P0 / Disaster 告警
-
1
-
来自 VictoriaMetrics
+
1
+
来自 VictoriaMetrics
P1 / High 告警
-
5
+
5
来自 Zabbix · 4 条 / VM · 1 条
-
+

物理机状态 · 按机房

@@ -131,184 +131,5 @@ const refresh = () => { diff --git a/frontend/src/views/service/Catalog.vue b/frontend/src/views/service/Catalog.vue index de32d0f..1be61fb 100644 --- a/frontend/src/views/service/Catalog.vue +++ b/frontend/src/views/service/Catalog.vue @@ -30,11 +30,11 @@ import { ref } from 'vue' import { ElMessage } from 'element-plus' const services = ref([ - { name: 'MySQL', icon: 'My', bgColor: '#1C2E4A', iconColor: '#7FB8FF', description: '一主多从，自动注册进 open-cdm 数据源，支持 LDAP 账号统一审核 SQL 上线。', playbook: 'roles/mysql-deploy', version: 'v8.0.36' }, - { name: 'Redis', icon: 'Rd', bgColor: '#3A1C28', iconColor: '#FF8E9C', description: '支持 Standalone / Sentinel / Cluster，部署完成后自动注册进 CacheCloud。', playbook: 'roles/redis-deploy', version: 'v7.2' }, - { name: 'openresty', icon: 'Or', bgColor: '#1C3A2E', iconColor: '#7FFFC2', description: '容器化部署在 K8s 内，作为业务边缘网关，支持灰度路由配置。', playbook: 'roles/openresty-deploy', version: 'v1.25' }, - { name: 'dpvs', icon: 'Dp', bgColor: '#3A2E1C', iconColor: '#FFC97A', description: '四层负载均衡，直接管理宿主机网络命名空间，不纳入容器编排。', playbook: 'roles/dpvs-deploy', version: 'v1.9' }, - { name: 'PgSQL', icon: 'Pg', bgColor: '#2E1C3A', iconColor: '#C9A6FF', description: '流复制主从架构，规划中 · 第二期接入 open-cdm 统一审核体系。', playbook: 'roles/pgsql-deploy', version: '规划中' }, + { name: 'MySQL', icon: 'My', bgColor: 'var(--tag-blue-bg)', iconColor: 'var(--tag-blue-text)', description: '一主多从，自动注册进 open-cdm 数据源，支持 LDAP 账号统一审核 SQL 上线。', playbook: 'roles/mysql-deploy', version: 'v8.0.36' }, + { name: 'Redis', icon: 'Rd', bgColor: 'var(--logo-cc-bg)', iconColor: 'var(--err)', description: '支持 Standalone / Sentinel / Cluster，部署完成后自动注册进 CacheCloud。', playbook: 'roles/redis-deploy', version: 'v7.2' }, + { name: 'openresty', icon: 'Or', bgColor: 'var(--logo-dm-bg)', iconColor: 'var(--tag-green-text)', description: '容器化部署在 K8s 内，作为业务边缘网关，支持灰度路由配置。', playbook: 'roles/openresty-deploy', version: 'v1.25' }, + { name: 'dpvs', icon: 'Dp', bgColor: 'var(--logo-qp-bg)', iconColor: 'var(--tag-amber-text)', description: '四层负载均衡，直接管理宿主机网络命名空间，不纳入容器编排。', playbook: 'roles/dpvs-deploy', version: 'v1.9' }, + { name: 'PgSQL', icon: 'Pg', bgColor: 'var(--tag-purple-bg)', iconColor: 'var(--tag-purple-text)', description: '流复制主从架构，规划中 · 第二期接入 open-cdm 统一审核体系。', playbook: 'roles/pgsql-deploy', version: '规划中' }, ]) const handleDeploy = (service: any) => { @@ -43,42 +43,19 @@ const handleDeploy = (service: any) => { diff --git a/frontend/src/views/subsystem/Navigation.vue b/frontend/src/views/subsystem/Navigation.vue index 1a4785c..cfd1244 100644 --- a/frontend/src/views/subsystem/Navigation.vue +++ b/frontend/src/views/subsystem/Navigation.vue @@ -44,29 +44,5 @@ onMounted(async () => { diff --git a/frontend/src/views/task/TaskCenter.vue b/frontend/src/views/task/TaskCenter.vue index 53bf7e6..dcd1882 100644 --- a/frontend/src/views/task/TaskCenter.vue +++ b/frontend/src/views/task/TaskCenter.vue @@ -7,7 +7,7 @@
-
+

任务列表

@@ -18,7 +18,7 @@ ● {{ task.status }} {{ task.name }} - {{ task.playbook }} + {{ task.playbook }} @@ -83,138 +83,13 @@ const logs = ref([