feat(ui): adopt Deni application shell and shared page styling

This commit is contained in:
cieanyau committed 2026-11-07 02:24:01 +08:00
1 parent ec918674ee
commit 15a44b7314
3 files changed
+1337 -1386

No files matched your search

+46 -33
View File
@@ -1133,21 +1133,29 @@
.pi-spinner:before {
content: "";
}
/* 全局设计变量在这里定义;业务样式通过变量读取主题,不应逐组件硬编码一套颜色。 */
/* Deni _base.scss 的全站语义;业务既有变量统一读取同一套 token。 */
:root {
--console-page-bg: #f8fafc;
--console-panel-bg: #fff;
--console-panel-border: #e2e8f0;
--console-panel-shadow: 0 1px 2px #0000001a, 0 1px 3px #0000001a;
--page-title-size: 1.25rem;
--deni-sidebar-width: 248px;
--deni-topbar-height: 56px;
--deni-content-max: 1440px;
--deni-transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
--deni-panel: var(--p-content-background);
--deni-hover: var(--p-content-hover-background);
--deni-ground: var(--p-surface-50);
--deni-mask: color-mix(in srgb, var(--p-surface-900) 40%, transparent);
--console-page-bg: var(--deni-ground);
--console-panel-bg: var(--deni-panel);
--console-panel-border: var(--p-content-border-color);
--console-panel-shadow: none;
--page-title-size: 20px;
--font-mono:
ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo,
"HarmonyOS Sans SC", monospace;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-lg: 6px;
color: var(--p-text-color, #23324d);
background: var(--p-content-background, #fff);
background: var(--deni-ground);
font-synthesis: none;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
@@ -1160,7 +1168,7 @@
Segoe UI Emoji,
Segoe UI Symbol,
Noto Color Emoji;
font-size: 81.25%;
font-size: 87.5%;
line-height: 1.5;
}
*,
@@ -1270,9 +1278,7 @@ video {
}
}
.app-dark {
--console-page-bg: #09090b;
--console-panel-bg: #18181b;
--console-panel-border: #3f3f46;
--deni-ground: var(--p-surface-950);
}
.app-dark img[src$="/images/brand/logo.png"] {
filter: brightness(2.5);
@@ -1858,17 +1864,17 @@ video {
.config-page > .config-loading-shell {
padding-bottom: 0;
}
/* 以下为业务列表共享外壳;查询、空态、表格与分页需要一起维持窄屏可用性。 */
/* Deni _page.scss 的标题、panel、toolbar、empty-state 规则适配已有业务结构。 */
.list-page {
flex-direction: column;
gap: 24px;
gap: 16px;
min-width: 0;
max-width: 100%;
display: flex;
}
.list-head {
justify-content: space-between;
align-items: center;
align-items: flex-start;
gap: 16px;
min-height: 38px;
display: flex;
@@ -1877,7 +1883,8 @@ video {
color: var(--p-text-color);
margin: 0;
font-size: var(--page-title-size);
font-weight: 600;
font-weight: 650;
letter-spacing: -0.015em;
}
.list-head-actions {
flex-shrink: 0;
@@ -1889,7 +1896,7 @@ video {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 14px;
gap: 8px;
display: flex;
}
.host-list-page .list-toolbar {
@@ -1947,13 +1954,12 @@ video {
width: 280px;
}
.list-table {
background: var(--p-content-background);
background: var(--deni-panel);
border: 1px solid var(--p-content-border-color);
border-radius: var(--radius-md);
min-width: 0;
max-width: 100%;
overflow: hidden;
box-shadow: 0 2px 3px #00000014;
}
.list-table:has(.p-datatable-mask):has(.p-datatable-empty-message) {
min-height: 100dvh;
@@ -1967,7 +1973,7 @@ video {
.list-table .p-datatable-header-cell,
.list-table .p-datatable-tbody > tr > td {
border-color: var(--p-content-border-color);
padding: 18px 14px;
padding: 12px 16px;
}
.list-table .p-tag,
.list-table .p-tag-label {
@@ -1994,22 +2000,29 @@ video {
text-align: center;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 56px 20px;
gap: 6px;
padding: 48px 24px;
display: flex;
}
.list-empty > i {
opacity: 0.5;
font-size: 2.375rem;
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-bottom: 6px;
border: 1px solid var(--p-content-border-color);
border-radius: 6px;
font-size: 16px;
}
.list-empty-title {
color: var(--p-text-color);
font-size: 1.0625rem;
font-size: 14px;
font-weight: 650;
}
.list-empty-desc {
max-width: 42em;
max-width: 380px;
margin: 0;
font-size: 0.9375rem;
font-size: 13px;
line-height: 1.7;
}
.list-foot {
@@ -2260,28 +2273,28 @@ video {
min-height: 272px;
}
.home-card {
background: var(--p-content-background);
background: var(--deni-panel);
border: 1px solid var(--p-content-border-color, #e2e8f0);
border-radius: var(--radius-md);
flex-direction: column;
min-width: 0;
display: flex;
overflow: hidden;
box-shadow: 0 1px 3px #0000001a;
}
.home-card-head {
justify-content: space-between;
align-items: center;
gap: 12px;
min-height: 50px;
padding: 0 14px;
padding: 14px 16px;
border-bottom: 1px solid var(--p-content-border-color);
display: flex;
}
.home-card-title {
color: var(--p-text-color, #334155);
gap: 8px;
margin: 0;
font-weight: 600;
font-weight: 650;
display: flex;
}
.home-card-more,
@@ -2302,13 +2315,13 @@ video {
color: var(--p-primary-color);
}
.home-card-body {
padding: 14px;
padding: 16px;
}
.home-card-foot {
align-items: center;
gap: 7px;
margin-top: auto;
padding: 14px;
padding: 16px;
display: flex;
}
.home-card-foot > * {