cieanyau/console-dev
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 优化控制台响应式布局与视觉体验
前端验证 / verify (push) Failing after 15m3s
Details

Browse Source 
- 统一页面标题、圆角、字体和响应式断点，调整暗色主题及图表配色
- 新增表格列标签插件，在窄屏下将表格转换为卡片布局，优化实例、订单、工单等列表展示
- 支持移动端点击订单行进入详情，并完善订单凭据的打印布局
- 在财务中心展示本月及累计消费，补充充值关闭时的提示
- 优化工单详情布局，将附件上传入口整合至富文本编辑器工具栏
- 调整实例操作按钮、SSH 密钥操作及安全菜单图标
- 为多个页面显式导入 definePageMeta，完善页面元数据声明
This commit is contained in:
cneicy committed 2026-11-07 00:09:57 +08:00
1 parent 5d080cacec
commit 42dfead9cd
145 files changed
+1762 -599
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/assets/styles/official-site.pBD-PXD7.css
+45 -45
View File
@@ -4,7 +4,7 @@
min-height: 100vh;
color: var(--p-text-color, #334155);
background: var(--console-page-bg, #f8fafc);
--official-primary: var(--p-primary-color, #0052d9);
--official-primary: var(--p-primary-color);
--official-accent: #eff6ff;
}
.official-site a {
@@ -45,7 +45,7 @@
var(--official-primary) 11%,
var(--p-content-background)
);
border-radius: 5px;
border-radius: var(--radius-md);
justify-content: center;
align-items: flex-end;
gap: 2px;
@@ -108,7 +108,7 @@
.official-mobile-nav a,
.official-nav a {
color: var(--p-text-muted-color);
font-size: 0.92rem;
font-size: 0.9375rem;
transition: color 0.18s;
}
.official-mobile-nav a:hover,
@@ -125,11 +125,11 @@
background: var(--p-content-background);
color: var(--p-text-color);
white-space: nowrap;
border-radius: 4px;
border-radius: var(--radius-sm);
align-items: center;
gap: 7px;
padding: 9px 13px;
font-size: 0.88rem;
font-size: 0.875rem;
transition:
border-color 0.18s,
color 0.18s;
@@ -137,7 +137,7 @@
}
.official-header-login i {
color: var(--official-primary);
font-size: 0.78rem;
font-size: 0.8125rem;
}
.official-header-login:hover {
border-color: var(--official-primary);
@@ -150,7 +150,7 @@
height: 38px;
color: var(--p-text-color);
cursor: pointer;
border-radius: 4px;
border-radius: var(--radius-sm);
display: none;
}
.official-mobile-nav {
@@ -234,12 +234,12 @@
color: var(--p-text-color);
align-items: center;
gap: 7px;
font-size: 0.88rem;
font-size: 0.875rem;
display: inline-flex;
}
.official-hero-features i {
color: var(--official-primary);
font-size: 0.82rem;
font-size: 0.8125rem;
}
.official-contact-actions,
.official-hero-actions {
@@ -250,7 +250,7 @@
}
.official-button {
border: 1px solid #0000;
border-radius: 4px;
border-radius: var(--radius-sm);
justify-content: center;
align-items: center;
gap: 9px;
@@ -292,7 +292,7 @@
color: var(--official-primary);
}
.official-button i {
font-size: 0.8rem;
font-size: 0.8125rem;
}
/* 首屏装饰性网络图由CSS元素组成，与真实资源监控数据无关。 */
.official-hero-visual {
@@ -308,7 +308,7 @@
);
min-height: 315px;
box-shadow: var(--console-panel-shadow);
border-radius: 6px;
border-radius: var(--radius-md);
position: relative;
overflow: hidden;
}
@@ -426,7 +426,7 @@
}
.official-stat-kicker {
color: var(--p-text-muted-color);
font-size: 0.82rem;
font-size: 0.8125rem;
}
.official-stat-value {
color: var(--p-text-color);
@@ -453,7 +453,7 @@
.official-hero-stat p {
color: var(--p-text-muted-color);
margin: 6px 0 0;
font-size: 0.82rem;
font-size: 0.8125rem;
line-height: 1.55;
}
.official-floating-label {
@@ -461,7 +461,7 @@
background: var(--p-content-background);
color: var(--p-text-color);
box-shadow: var(--console-panel-shadow);
border-radius: 4px;
border-radius: var(--radius-sm);
align-items: center;
gap: 8px;
padding: 9px 12px;
@@ -473,7 +473,7 @@
}
.official-floating-label i {
color: var(--official-primary);
font-size: 0.82rem;
font-size: 0.8125rem;
}
.official-section {
margin-top: 52px;
@@ -516,16 +516,16 @@
background: var(--p-content-background);
color: var(--p-text-muted-color);
white-space: nowrap;
border-radius: 4px;
border-radius: var(--radius-sm);
align-items: center;
gap: 6px;
padding: 6px 9px;
font-size: 0.8rem;
font-size: 0.8125rem;
display: inline-flex;
}
.official-section-badges i {
color: var(--official-primary);
font-size: 0.72rem;
font-size: 0.75rem;
}
/* 官网产品卡片网格，不改变商品接口或库存判定。 */
.official-product-grid {
@@ -562,7 +562,7 @@
width: 38px;
height: 38px;
color: var(--official-primary);
border-radius: 4px;
border-radius: var(--radius-sm);
place-items: center;
font-size: 1.2rem;
display: grid;
@@ -584,13 +584,13 @@
color: var(--p-text-muted-color);
letter-spacing: 0.08em;
margin-top: 3px;
font-size: 0.72rem;
font-size: 0.75rem;
display: block;
}
.official-product-title-row > i {
color: var(--p-text-muted-color);
margin-top: 3px;
font-size: 0.88rem;
font-size: 0.875rem;
}
.official-product-description {
min-height: 42px;
@@ -626,17 +626,17 @@
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 0.83rem;
font-size: 0.8125rem;
display: flex;
}
.official-product-features i {
color: var(--official-primary);
font-size: 0.72rem;
font-size: 0.75rem;
}
.official-product-link {
align-items: center;
gap: 7px;
font-size: 0.88rem;
font-size: 0.875rem;
font-weight: 600;
display: inline-flex;
color: var(--official-primary) !important;
@@ -685,7 +685,7 @@
}
.official-infra-stats dt {
color: var(--p-text-muted-color);
font-size: 0.8rem;
font-size: 0.8125rem;
}
.official-infra-stats dd {
color: var(--p-text-color);
@@ -696,7 +696,7 @@
.official-infra-stats dd small {
color: var(--p-text-muted-color);
margin-left: 4px;
font-size: 0.78rem;
font-size: 0.8125rem;
font-weight: 400;
}
.official-infra-visual {
@@ -707,7 +707,7 @@
color-mix(in srgb, var(--official-accent) 70%, var(--p-content-background)),
var(--p-content-background)
);
border-radius: 5px;
border-radius: var(--radius-md);
min-height: 285px;
position: relative;
overflow: hidden;
@@ -772,7 +772,7 @@
.official-infra-card-kicker {
color: var(--official-primary);
letter-spacing: 0.09em;
font-size: 0.72rem;
font-size: 0.75rem;
font-weight: 600;
display: block;
}
@@ -785,7 +785,7 @@
.official-infra-card > p {
color: var(--p-text-muted-color);
margin: 4px 0 14px;
font-size: 0.78rem;
font-size: 0.8125rem;
}
.official-resource-row {
color: var(--p-text-muted-color);
@@ -802,7 +802,7 @@
var(--official-primary) 10%,
var(--console-panel-border)
);
border-radius: 5px;
border-radius: var(--radius-md);
height: 5px;
overflow: hidden;
}
@@ -840,7 +840,7 @@
min-height: 52px;
color: var(--p-text-color);
margin: 10px 0 18px;
font-size: 0.92rem;
font-size: 0.9375rem;
line-height: 1.65;
}
.official-review-person {
@@ -873,7 +873,7 @@
}
.official-review-person strong {
color: var(--p-text-color);
font-size: 0.83rem;
font-size: 0.8125rem;
font-weight: 600;
}
.official-review-person small {
@@ -915,7 +915,7 @@
max-width: 300px;
color: var(--p-text-muted-color);
margin: 15px 0 0;
font-size: 0.83rem;
font-size: 0.8125rem;
line-height: 1.65;
}
.official-footer-groups {
@@ -934,7 +934,7 @@
.official-footer-group h2 {
color: var(--p-text-color);
margin: 2px 0 4px;
font-size: 0.88rem;
font-size: 0.875rem;
font-weight: 600;
}
.official-footer-contact a,
@@ -942,7 +942,7 @@
.official-footer-group a {
color: var(--p-text-muted-color);
margin: 0;
font-size: 0.82rem;
font-size: 0.8125rem;
line-height: 1.5;
}
.official-footer-contact a:hover,
@@ -958,20 +958,20 @@
.official-footer-contact i {
color: var(--official-primary);
margin-top: 2px;
font-size: 0.78rem;
font-size: 0.8125rem;
}
.official-footer-qr {
color: var(--p-text-muted-color);
align-items: center;
gap: 10px;
font-size: 0.76rem;
font-size: 0.75rem;
display: flex;
}
.official-footer-qr img {
border: 1px solid var(--console-panel-border);
-o-object-fit: contain;
object-fit: contain;
border-radius: 4px;
border-radius: var(--radius-sm);
width: 56px;
height: 56px;
}
@@ -984,7 +984,7 @@
align-items: center;
gap: 12px;
margin: 0 auto;
font-size: 0.76rem;
font-size: 0.75rem;
display: flex;
}
.official-footer-bottom > div {
@@ -1032,8 +1032,8 @@
grid-column: 2;
}
}
/* 视口条件 (width<=680px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
@media (width<=680px) {
/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
@media (width<=640px) {
.official-footer-bottom,
.official-footer-main,
.official-header-inner,
@@ -1049,7 +1049,7 @@
}
.official-header-login {
padding: 8px 9px;
font-size: 0.8rem;
font-size: 0.8125rem;
}
.official-menu-toggle {
place-items: center;
@@ -1080,7 +1080,7 @@
}
.official-hero-intro > p {
margin-bottom: 13px;
font-size: 0.92rem;
font-size: 0.9375rem;
}
.official-hero-features {
margin-bottom: 16px;
@@ -1101,7 +1101,7 @@
}
.official-floating-label {
max-width: 48%;
font-size: 0.76rem;
font-size: 0.75rem;
bottom: 17px;
left: 12px;
}