- 统一页面标题、圆角、字体和响应式断点，调整暗色主题及图表配色 - 新增表格列标签插件，在窄屏下将表格转换为卡片布局，优化实例、订单、工单等列表展示 - 支持移动端点击订单行进入详情，并完善订单凭据的打印布局 - 在财务中心展示本月及累计消费，补充充值关闭时的提示 - 优化工单详情布局，将附件上传入口整合至富文本编辑器工具栏 - 调整实例操作按钮、SSH 密钥操作及安全菜单图标 - 为多个页面显式导入 definePageMeta，完善页面元数据声明
This commit is contained in:
145 files changed
+1762
-599
No files matched your search
@@ -1139,6 +1139,13 @@
|
||||
--console-panel-bg: #fff;
|
||||
--console-panel-border: #e2e8f0;
|
||||
--console-panel-shadow: 0 1px 2px #0000001a, 0 1px 3px #0000001a;
|
||||
--page-title-size: 1.25rem;
|
||||
--font-mono:
|
||||
ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo,
|
||||
"HarmonyOS Sans SC", monospace;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 10px;
|
||||
color: var(--p-text-color, #23324d);
|
||||
background: var(--p-content-background, #fff);
|
||||
font-synthesis: none;
|
||||
@@ -1198,7 +1205,7 @@ textarea {
|
||||
[tabindex]:focus-visible,
|
||||
a:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--p-primary-color, #0052d9);
|
||||
outline: 2px solid var(--p-primary-color);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
img,
|
||||
@@ -1223,6 +1230,13 @@ video {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.p-tabs .p-tablist,
|
||||
.p-tabs .p-tablist-tab-list,
|
||||
.p-tabs .p-tab,
|
||||
.p-tabs .p-tab:not(.p-disabled):hover,
|
||||
.p-tabs .p-tabpanels {
|
||||
background: transparent;
|
||||
}
|
||||
.p-datatable {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
@@ -1256,9 +1270,17 @@ video {
|
||||
}
|
||||
}
|
||||
.app-dark {
|
||||
--console-page-bg: #0f172a;
|
||||
--console-panel-bg: #020617;
|
||||
--console-panel-border: #334155;
|
||||
--console-page-bg: #09090b;
|
||||
--console-panel-bg: #18181b;
|
||||
--console-panel-border: #3f3f46;
|
||||
}
|
||||
.app-dark img[src$="/images/brand/logo.png"] {
|
||||
filter: brightness(2.5);
|
||||
}
|
||||
@media print {
|
||||
.app-dark img[src$="/images/brand/logo.png"] {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
.instance-product-status.p-tag-warn {
|
||||
background: var(--p-yellow-100);
|
||||
@@ -1351,7 +1373,7 @@ video {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
overflow-wrap: anywhere;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
@@ -1377,6 +1399,13 @@ video {
|
||||
.config-choice:hover {
|
||||
border-color: var(--p-primary-color);
|
||||
}
|
||||
.config-choice.active:only-child {
|
||||
outline: 0;
|
||||
border-color: var(--p-content-border-color);
|
||||
background: var(--p-content-hover-background);
|
||||
color: var(--p-text-color);
|
||||
cursor: default;
|
||||
}
|
||||
.config-choice:focus-visible,
|
||||
.image-group:focus-visible {
|
||||
outline: 2px solid var(--p-primary-color);
|
||||
@@ -1410,7 +1439,7 @@ video {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.compact .config-choice:only-child {
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.compact .config-choice.active {
|
||||
z-index: 1;
|
||||
@@ -1433,7 +1462,7 @@ video {
|
||||
color: var(--p-text-color);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
@@ -1468,7 +1497,7 @@ video {
|
||||
.config-page .config-checkout {
|
||||
background: var(--p-content-background);
|
||||
border: 1px solid var(--p-content-border-color);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
padding: 16px 14px;
|
||||
@@ -1578,7 +1607,7 @@ video {
|
||||
.config-page .quote-status {
|
||||
background: var(--p-content-hover-background);
|
||||
color: var(--p-text-muted-color);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
@@ -1606,7 +1635,7 @@ video {
|
||||
.config-page .cart-confirmation {
|
||||
background: var(--p-content-hover-background);
|
||||
color: var(--p-text-color);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -1670,7 +1699,7 @@ video {
|
||||
.product-order-page > .config-loading {
|
||||
border: 1px solid var(--p-content-border-color);
|
||||
background: var(--p-content-background);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
}
|
||||
@@ -1693,15 +1722,15 @@ video {
|
||||
top: calc(var(--console-top-offset, 56px) + 20px);
|
||||
}
|
||||
}
|
||||
/* 视口条件 (width<=1199px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<=1199px) {
|
||||
/* 视口条件 (width<1200px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<1200px) {
|
||||
.config-choices,
|
||||
.config-page .image-groups {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
/* 视口条件 (width<=1023px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<=1023px) {
|
||||
/* 视口条件 (width<1024px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<1024px) {
|
||||
.config-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 32px;
|
||||
@@ -1771,8 +1800,8 @@ video {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<=639px) {
|
||||
/* 视口条件 (width<640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<640px) {
|
||||
.config-choices,
|
||||
.config-page .image-groups {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -1847,7 +1876,7 @@ video {
|
||||
.list-head h2 {
|
||||
color: var(--p-text-color);
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-size: var(--page-title-size);
|
||||
font-weight: 600;
|
||||
}
|
||||
.list-head-actions {
|
||||
@@ -1878,7 +1907,7 @@ video {
|
||||
var(--p-content-hover-background) 60%,
|
||||
transparent
|
||||
);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
max-width: 100%;
|
||||
@@ -1893,7 +1922,7 @@ video {
|
||||
cursor: pointer;
|
||||
background: 0 0;
|
||||
border: 1px solid #0000;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 4px 10px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
@@ -1920,7 +1949,7 @@ video {
|
||||
.list-table {
|
||||
background: var(--p-content-background);
|
||||
border: 1px solid var(--p-content-border-color);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
@@ -2120,7 +2149,7 @@ video {
|
||||
color: var(--p-text-color);
|
||||
white-space: nowrap;
|
||||
background: 0 0;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 12px;
|
||||
@@ -2219,21 +2248,21 @@ video {
|
||||
.home-expiring,
|
||||
.home-tickets {
|
||||
grid-column: span 1;
|
||||
min-height: 442px;
|
||||
min-height: 360px;
|
||||
}
|
||||
.home-servers {
|
||||
grid-column: span 2;
|
||||
min-height: 442px;
|
||||
min-height: 360px;
|
||||
}
|
||||
.home-notices,
|
||||
.home-referral {
|
||||
grid-column: span 2;
|
||||
min-height: 316px;
|
||||
min-height: 272px;
|
||||
}
|
||||
.home-card {
|
||||
background: var(--p-content-background);
|
||||
border: 1px solid var(--p-content-border-color, #e2e8f0);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius-md);
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@@ -2291,7 +2320,7 @@ video {
|
||||
background: var(--p-primary-color);
|
||||
min-height: 36px;
|
||||
color: var(--p-primary-contrast-color, #fff);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
@@ -2383,13 +2412,18 @@ button.home-row:hover {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.home-card .list-empty {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
.home-page a:focus-visible,
|
||||
.home-page button:focus-visible {
|
||||
outline: 2px solid var(--p-primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* 视口条件 (width<=1023px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<=1023px) {
|
||||
/* 视口条件 (width<1024px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<1024px) {
|
||||
.home-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@@ -2409,8 +2443,8 @@ button.home-row:hover {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<=639px) {
|
||||
/* 视口条件 (width<640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
||||
@media (width<640px) {
|
||||
.home-grid {
|
||||
flex-direction: column;
|
||||
gap: 21px;
|
||||
@@ -2420,15 +2454,134 @@ button.home-row:hover {
|
||||
min-height: 0;
|
||||
}
|
||||
.home-wallet {
|
||||
min-height: 214px;
|
||||
min-height: 180px;
|
||||
}
|
||||
.home-expiring,
|
||||
.home-servers,
|
||||
.home-tickets {
|
||||
min-height: 330px;
|
||||
min-height: 240px;
|
||||
}
|
||||
.home-expiring {
|
||||
min-height: 0;
|
||||
}
|
||||
.home-notices,
|
||||
.home-referral {
|
||||
min-height: 280px;
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
@media (width<640px) {
|
||||
.list-toolbar-right {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-auto-flow: row dense;
|
||||
gap: 8px;
|
||||
display: grid;
|
||||
}
|
||||
.list-toolbar-right > .list-search,
|
||||
.list-toolbar-right > .p-iconfield,
|
||||
.list-toolbar-right > form {
|
||||
order: -1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.list-toolbar-right > .p-button-text {
|
||||
justify-self: start;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-table-container {
|
||||
overflow: visible;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-table,
|
||||
.p-datatable:not(.no-stack) .p-datatable-tbody {
|
||||
width: 100%;
|
||||
min-width: 0 !important;
|
||||
display: block;
|
||||
}
|
||||
.list-table:has(.p-datatable:not(.no-stack)) {
|
||||
overflow-x: visible;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-thead {
|
||||
display: none;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-tbody > tr {
|
||||
border-bottom: 1px solid var(--p-content-border-color);
|
||||
padding: 10px 14px;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-tbody > tr:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-tbody > tr > td {
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal !important;
|
||||
border: 0 !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
padding: 5px 0 !important;
|
||||
display: flex;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-tbody > tr > td::before {
|
||||
content: attr(data-label);
|
||||
color: var(--p-text-muted-color);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-datatable:not(.no-stack)
|
||||
.p-datatable-tbody
|
||||
> tr
|
||||
> td[data-label=""]::before,
|
||||
.p-datatable:not(.no-stack)
|
||||
.p-datatable-tbody
|
||||
> tr
|
||||
> td:not([data-label])::before {
|
||||
display: none;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-tbody > tr > td[data-label=""] {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.p-datatable:not(.no-stack)
|
||||
.p-datatable-tbody
|
||||
> tr
|
||||
> td:first-child:has(> .p-checkbox) {
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 14px;
|
||||
}
|
||||
.p-datatable:not(.no-stack)
|
||||
.p-datatable-tbody
|
||||
> tr:has(> td:first-child > .p-checkbox)
|
||||
> td:nth-child(2) {
|
||||
padding-right: 32px !important;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-tbody > tr > td > * {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-tbody > tr > td > div {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.p-datatable:not(.no-stack) .p-datatable-empty-message > td {
|
||||
text-align: center;
|
||||
padding: 0 !important;
|
||||
display: block;
|
||||
}
|
||||
.table-scroll-hint {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (width<640px) {
|
||||
.list-toolbar:not(:has(> .list-toolbar-right)) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
display: grid;
|
||||
}
|
||||
.list-toolbar:not(:has(> .list-toolbar-right)) > .list-search {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user