From: CodeBuddy Date: Wed, 23 Sep 2026 03:09:35 +0000 (+0800) Subject: style(vue): 全量统一 surface 容器为品牌圆角(4px) 以符合品牌标准 X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=1646a426655b41199487e8ee0c3b5c957edad591;p=StationBuilder.git style(vue): 全量统一 surface 容器为品牌圆角(4px) 以符合品牌标准 - 站点管理样板验证: panel 现用 var(--ant-border-radius)=4px(品牌种子), 无回归 - site-workspace.css: .station-* 大面板(.list/.template/.page-module/.menu/.menu-app-info /.application-basic/.application-menu/.config-context/.opsflow-blank/.page-selection/.preview) 加品牌圆角+overflow:hidden - globals.css: 遗留 .panel(border-radius:0->品牌圆角) 与 .style-card 加品牌圆角 - 审计结论: 主题令牌/--ant-* 变量/4px 网格/字重400-600/antd 组件/Tab 激活态此前已合规, 仅大面板直角待收口 注: 品牌标准口径(用户选定)= 保持 theme.json(半径4/字号16), 半径经品牌种子收束为4px, 与 antd-design.md 默认(8px)不同但符合 theme.json 优先原则。 --- diff --git a/src-vue/styles/globals.css b/src-vue/styles/globals.css index 5dc49da..db3198a 100644 --- a/src-vue/styles/globals.css +++ b/src-vue/styles/globals.css @@ -190,7 +190,7 @@ .card-del{position:absolute;top:8px;right:8px;border:1px solid var(--ant-color-error-bg);background:var(--ant-color-bg-container);color:var(--ant-color-error);border-radius:var(--ant-border-radius);height:26px;padding:0 8px;font-size:var(--ant-font-size-sm);cursor:pointer} .card-del:hover{background:var(--ant-color-bg-layout);border-color:var(--ant-color-error)} .style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 0 4px} -.style-card{border:1px solid var(--ant-color-border);background:var(--ant-color-bg-container);display:flex;flex-direction:column} +.style-card{border:1px solid var(--ant-color-border);background:var(--ant-color-bg-container);display:flex;flex-direction:column;border-radius:var(--ant-border-radius);overflow:hidden} .style-card .style-thumb{position:relative;aspect-ratio:16/9;min-height:200px;background:var(--ant-color-bg-layout);display:grid;place-items:center;cursor:zoom-in;overflow:hidden} .style-card .style-thumb img{width:100%;height:100%;object-fit:contain} .style-card .style-thumb .zoom{position:absolute;right:8px;bottom:8px;background:color-mix(in srgb,var(--ant-color-bg-mask) 53%,transparent);color:var(--ant-color-text-light-solid);width:24px;height:24px;border-radius:var(--ant-border-radius);display:grid;place-items:center;font-size:var(--ant-font-size-sm)} @@ -259,7 +259,7 @@ html,body{font-family:var(--ant-font-family);font-size:var(--ant-font-size);line .button.ant-btn-primary{background:var(--ant-color-primary);border-color:var(--ant-color-primary)}.button.ant-btn-primary:hover{background:var(--ant-color-primary-hover)!important;border-color:var(--ant-color-primary-hover)!important} .button.ant-btn-default,.button.secondary{background:var(--ant-color-bg-container);color:var(--ant-color-text-secondary);border-color:var(--ant-color-border)}.button.ant-btn-default:hover,.button.secondary:hover{color:var(--ant-color-primary)!important;border-color:var(--ant-color-primary)!important;background:var(--ant-color-bg-container)!important} .steps{height:64px;border-top:0;border-bottom:1px solid var(--ant-color-border);padding:0 24px;background:var(--ant-color-bg-container)}.steps button{padding:0 20px;font-size:var(--ant-font-size)}.steps button>i{width:26px;height:26px}.steps button.active>i{background:var(--ant-color-primary);border-color:var(--ant-color-primary)} -.panel{border:1px solid var(--ant-color-border);border-radius:0;background:var(--ant-color-bg-container);margin:16px 0;box-shadow:none}.panel-head{min-height:48px;padding:0 16px;background:var(--ant-color-bg-container)}.panel-head>strong{font-size:var(--ant-font-size)}.panel-body{padding:16px} +.panel{border:1px solid var(--ant-color-border);border-radius:var(--ant-border-radius);background:var(--ant-color-bg-container);margin:16px 0;box-shadow:none}.panel-head{min-height:48px;padding:0 16px;background:var(--ant-color-bg-container)}.panel-head>strong{font-size:var(--ant-font-size)}.panel-body{padding:16px} .company-status-tabs{height:56px;display:flex;align-items:flex-end;border-bottom:1px solid var(--ant-color-border);gap:0;padding-top:8px} .company-status-tabs > button{height:48px;min-width:120px;padding:0 24px;border:0;border-bottom:3px solid transparent;background:var(--ant-color-bg-container);color:var(--ant-color-text-secondary);font-size:var(--ant-font-size)} .company-status-tabs > button span{margin-right:8px}.company-status-tabs > button b{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 8px;border-radius:var(--ant-border-radius);background:var(--ant-color-bg-layout);color:var(--ant-color-text-secondary);font-size:var(--ant-font-size-sm)} diff --git a/src-vue/styles/site-workspace.css b/src-vue/styles/site-workspace.css index 03eba25..ba69c27 100644 --- a/src-vue/styles/site-workspace.css +++ b/src-vue/styles/site-workspace.css @@ -54,7 +54,9 @@ .station-hierarchy-workspace .station-name-cell>.link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .station-hierarchy-workspace,.station-page-selection,.station-menu-configuration{font-size:var(--ant-font-size);color:var(--ant-color-text-base);min-width:0} .station-list-panel,.station-template-panel,.station-page-module-panel,.station-menu-panel,.station-menu-app-info{background:var(--ant-color-bg-container);border:1px solid var(--ant-color-border)} -.station-list-panel{min-height:calc(100vh - 260px);display:flex;flex-direction:column} +.station-list-panel{min-height:calc(100vh - 260px);display:flex;flex-direction:column;border-radius:var(--ant-border-radius-lg,8px);overflow:hidden} +/* 品牌标准:surface 容器统一使用品牌圆角 */ +.station-template-panel,.station-page-module-panel,.station-menu-panel,.station-menu-app-info,.station-application-basic,.station-application-menu,.station-config-context,.station-opsflow-blank,.station-page-selection,.station-application-preview{border-radius:var(--ant-border-radius);overflow:hidden} .station-hierarchy-note{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--ant-color-border);color:var(--ant-color-text-secondary);background:var(--ant-color-bg-layout)} .station-hierarchy-note>.anticon{color:var(--ant-color-primary)}.station-hierarchy-note>span:last-child{margin-left:auto;white-space:nowrap} .station-list-toolbar{display:flex;gap:12px;align-items:center;padding:16px}.station-list-toolbar>div{margin-left:auto;display:flex;gap:8px}