From 90de5a3de29ada96b8b0a7f7ce4225faf430bcd5 Mon Sep 17 00:00:00 2001 From: xuans Date: Tue, 20 Oct 2026 01:35:16 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E4=BB=AA=E8=A1=A8?= =?UTF-8?q?=E7=9B=98=E6=89=98=E7=AE=A1=E5=9F=9F=E5=90=8D=E4=B8=8E=E6=9C=8D?= =?UTF-8?q?=E5=8A=A1=E5=99=A8=E8=B5=84=E4=BA=A7=E8=A1=A8=E6=A0=BC=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E7=AC=A6=E5=90=88=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/Dashboard/Dashboard.css | 156 ++++++- frontend/src/views/Dashboard/Dashboard.vue | 487 ++++++++++++--------- 2 files changed, 437 insertions(+), 206 deletions(-) diff --git a/frontend/src/views/Dashboard/Dashboard.css b/frontend/src/views/Dashboard/Dashboard.css index 5472638..91c869b 100644 --- a/frontend/src/views/Dashboard/Dashboard.css +++ b/frontend/src/views/Dashboard/Dashboard.css @@ -1,4 +1,4 @@ -.page-shell { +.page-shell { max-width: 1180px; margin: 0 auto; padding: 42px 28px 70px; @@ -1094,3 +1094,157 @@ code { align-self: flex-start; } } + +/* 统一资产明细表格规范 */ +.scert-table-container { + overflow-x: auto; + border: 1px solid #e2e8f0; + border-radius: 10px; + background: #ffffff; +} +.scert-asset-table { + width: 100%; + border-collapse: collapse; + text-align: left; + font-size: 13px; +} +.scert-asset-table thead tr { + background: #f8fafc; + border-bottom: 1px solid #e2e8f0; + color: #64748b; + font-size: 12px; +} +.scert-asset-table th { + padding: 12px 18px; + font-weight: 600; +} +.scert-asset-table tbody tr { + border-bottom: 1px solid #f1f5f9; +} +.scert-asset-table tbody tr:last-child { + border-bottom: none; +} +.scert-asset-table td { + padding: 14px 18px; + vertical-align: middle; +} +.col-seq { + color: #94a3b8; + font-weight: 600; +} +.asset-name-line { + display: flex; + align-items: center; + gap: 8px; +} +.asset-name-line strong { + font-size: 14px; + color: #0f172a; +} +.asset-subtext { + font-size: 12px; + color: #64748b; + margin-top: 2px; +} +.code-text { + font-family: monospace; + color: #334155; + font-size: 12px; +} +.auth-title { + font-size: 12px; + font-weight: 500; + color: #0f172a; +} +.fingerprint-text { + font-size: 11px; + color: #94a3b8; + font-family: monospace; + margin-top: 2px; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.badge-tag { + display: inline-flex; + align-items: center; + font-size: 11px; + padding: 2px 7px; + border-radius: 4px; + font-weight: 500; + background: #e2e8f0; + color: #475569; +} +.badge-tag.primary { + background: #dbeafe; + color: #1e40af; +} +.badge-tag.success { + background: #dcfce7; + color: #166534; +} +.badge-tag.warning { + background: #fef3c7; + color: #92400e; +} +.badge-tag.secondary { + background: #f1f5f9; + color: #475569; +} +.row-actions-table { + display: inline-flex; + align-items: center; + gap: 10px; +} + +/* 域名配置：筛选工具栏与资产明细大表格 (结合 domain_opt4 与 domain_opt6) */ +.domain-filter-bar { + display: flex; + justify-content: space-between; + align-items: center; + gap: 14px; + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 10px; + padding: 12px 18px; + margin-bottom: 16px; + flex-wrap: wrap; +} +.domain-filter-group { + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; +} +.domain-search-input { + padding: 7px 12px; + border: 1px solid #cbd5e1; + border-radius: 6px; + font-size: 13px; + min-width: 240px; + outline: none; + background: #ffffff; +} +.domain-search-input:focus { + border-color: #2563eb; + box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); +} +.domain-filter-select { + padding: 7px 12px; + border: 1px solid #cbd5e1; + border-radius: 6px; + font-size: 13px; + background: #f8fafc; + outline: none; +} +.domain-table-actions { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} +.domain-table-actions .text-button { + padding: 2px 6px; + font-size: 12px; +} diff --git a/frontend/src/views/Dashboard/Dashboard.vue b/frontend/src/views/Dashboard/Dashboard.vue index a10377e..b1fd6bf 100644 --- a/frontend/src/views/Dashboard/Dashboard.vue +++ b/frontend/src/views/Dashboard/Dashboard.vue @@ -187,7 +187,7 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi
-
+

首页概览

@@ -195,123 +195,138 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi
当前登录与托管资源
-
-
- 当前用户 - {{ currentUser?.account || "—" }} - {{ currentUser?.email || "未绑定邮箱" }} -
-
- 服务状态 - - - {{ status ? "核心服务运行中" : "等待连接核心服务" }} - - 版本 {{ status?.version || "—" }} -
-
- 托管域名 - {{ domains.length }} 个 - 已配置的证书管理对象 -
-
-
-
- 服务版本 - {{ status?.version || "—" }} -
-
- 数据库 - {{ - displayLabel( - { sqlite: "SQLite", mysql: "MySQL" }, - status?.database_driver, - ) - }} -
-
- HTTPS 模式 - {{ displayLabel(httpsModeLabels, status?.https_mode) }} -
-
- 托管域名 - {{ domains.length }} 个 -
+ + +
+
+ 系统与服务运行摘要 + 当前登录与安全状态正常 +
+
+
+ 核心服务状态 + + + {{ status ? "核心服务运行中" : "等待连接核心服务" }} + + 已安全接入后台核心引擎 +
+
+ 当前用户 + + {{ currentUser?.email || "未绑定邮箱" }} +
+
+ 托管域名 + {{ domains.length }} 个 + 已配置并建立自动监控 +
+
+ +
+
+ 服务版本 + {{ status?.version || "—" }} +
+
+ 数据库 + {{ + displayLabel( + { sqlite: "SQLite (嵌入式)", mysql: "MySQL" }, + status?.database_driver, + ) + }} +
+
+ HTTPS 模式 + {{ displayLabel(httpsModeLabels, status?.https_mode) }} +
+
+ SSL 自动推送 + 运行中 +
+
-
-
-

当前托管域名

- 证书状态、到期时间和部署服务器 + +
+
+
+ 当前托管域名与证书状态 + 共 {{ domains.length }} 个证书管理对象 +
+
+ +
- -
-
正在读取域名状态……
-
- 还没有托管域名 - 添加第一个域名，开始管理证书申请和自动续期。 -
-
-
-
- {{ item.name }} - {{ certificateTypeLabel(item) }} + +
正在读取域名状态……
+
+ 还没有托管域名 + 添加第一个域名，开始管理证书申请和自动续期。 +
+
+
+
+ {{ item.name }} + {{ certificateTypeLabel(item) }} +
+
+ 证书状态 + + + {{ displayLabel(domainStatusLabels, item.status) }} + + +
+
+ 到期时间 + {{ formatDate(item.expires_at) }} + {{ daysRemaining(item.expires_at) }} +
+
+ 部署服务器 + + {{ + (domainServers[item.id] || []) + .map((server) => server.name) + .join("、") || "未配置" + }} + + {{ item.auto_renew ? "自动续期已开启" : "自动续期已关闭" }} +
+
+
+
+ + 显示第 {{ domainPageStart }}-{{ domainPageEnd }} 条，共 {{ domains.length }} 条 + +
+ + 第 {{ domainPage }} / {{ domainPageCount }} 页 +
-
- 证书状态 - - - {{ displayLabel(domainStatusLabels, item.status) }} - - -
-
- 到期时间 - {{ formatDate(item.expires_at) }} - {{ daysRemaining(item.expires_at) }} -
-
- 部署服务器 - - {{ - (domainServers[item.id] || []) - .map((server) => server.name) - .join("、") || "未配置" - }} - - {{ item.auto_renew ? "自动续期已开启" : "自动续期已关闭" }} -
-
-
-
- - 显示第 {{ domainPageStart }}-{{ domainPageEnd }} 条，共 {{ domains.length }} 条 - -
- - 第 {{ domainPage }} / {{ domainPageCount }} 页 -
@@ -348,70 +363,111 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi 添加托管域名
-
-
-
-
- {{ item.name }}{{ - displayLabel(domainStatusLabels, item.status) - }} -
-
- {{ - certificateTypeLabel(item) - }} - {{ - displayLabel(environmentLabels, item.acme_environment) - }} - {{ - item.auto_renew ? "自动续期已开启" : "自动续期已关闭" - }} - {{ (item.sans || []).length }} 个证书标识 - 部署服务器：{{ - (domainServers[item.id] || []) - .map((server) => server.name) - .join("、") || "未配置" - }} -
+
+ +
+
+ + +
-
- {{ daysRemaining(item.expires_at) }}{{ formatDate(item.expires_at) }} -
-
- - - - - -
-
-
- + -
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
序号托管域名 / 证书分类证书状态有效期预警部署目标服务器自动续期证书操作
{{ index + 1 }} +
+ {{ item.name }} + {{ certificateTypeLabel(item) }} +
+
+ 环境: {{ displayLabel(environmentLabels, item.acme_environment) }} + + ({{ (item.sans || []).length }} 个标识) + +
+ 		+ + {{ displayLabel(domainStatusLabels, item.status) }} + + +
{{ daysRemaining(item.expires_at) }}
+
{{ formatDate(item.expires_at) }}
+ 		+
+ {{ + (domainServers[item.id] || []) + .map((server) => server.name) + .join("、") || "未配置" + }} +
+
+ {{ (domainServers[item.id] || [])[0].address }} +
+ 		+ + {{ item.auto_renew ? '已开启' : '未开启' }} + + +
+ + + + + + + +
+
+
+
+ +

远程部署

@@ -420,41 +476,62 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi 共 {{ servers.length }} 台配置
- 还没有部署服务器添加部署服务器后，证书申请成功可自动部署。
-
-
-
-
- {{ item.name }}{{ displayLabel(webServerLabels, item.web_server) }} -
-
- {{ item.username }}@{{ item.address }}:{{ item.port }}{{ serverAuthLabel(item) }}指纹：{{ item.host_key_fingerprint }} -
-
-
- -
-
+
+ + + + + + + + + + + + + + + + + + + + + + + +
序号服务器名称 / 角色Web 容器连接端点 (SSH)认证方式与主机指纹部署状态操作
{{ index + 1 }} +
+ {{ item.name }} + 本机默认 (主) + 推送从机 +
+
{{ index === 0 ? "主线证书自动签发与直接落盘部署" : "多机泛域名证书跨主机 SSH 自动下发同步" }}
+ 		+ {{ displayLabel(webServerLabels, item.web_server) }} + + {{ item.username }}@{{ item.address }}:{{ item.port }} + +
{{ serverAuthLabel(item) }}
+
指纹: {{ item.host_key_fingerprint || "未记录指纹" }}
+ 		+ 正常待命 + +
+ + +
+