CNWei/stash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 统一前后台宽度与数值标尺，站点外壳改用 @stash/ui

Browse Source 
对应风格审计的 1-4 条：

1. 宽度：后台内容区改为与页头内层同宽同左缘（1380 - 40 = 1340），
   修掉品牌 x=50、卡片 x=280 的错位
2. 阴影：--su-shadow-card / hover 的覆盖从 .app 挪到 :root，前后台同一套
3. 死代码：删除未被引用的 App.tsx（436 行）、AdminPage.tsx（54KB）与 .content-veil 样式
4. 标尺：37 处脱离 4/8/12/16/20/24/32/40 与字阶的间距/字号/圆角/行高改为令牌
   （含新增的 --su-font-size-2xl）；6px 的认证角标按图标保留并注明原因

顺带把重复实现收进库：
- 页头品牌 -> Brand
- 页头滚动信息 -> Ticker（含实测宽度的无缝循环）
- 搜索框 -> SearchField（variant=card），删除 components/search/SearchBar.tsx
- 后台「首页 Logo」预览与后台页头同样复用 Brand
This commit is contained in:
CNWei
2026-11-01 15:28:22 +08:00
parent 59fd61d832
commit 8a782099f5
7 changed files with 90 additions and 2554 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stash-web/src/App.css
+50 -159
View File
@@ -1,14 +1,17 @@
/* 页面级样式：只保留「组件库没有」的部分（背景、外壳、封面兜底、正文版式）。
颜色 / 间距 / 字号全部取自 @stash/ui 的令牌。 */
/* 主题级覆盖：放 :root 而不是 .app，前后台两个壳才能拿到同一套阴影 */
:root {
--su-shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
--su-shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
}
.app {
position: relative;
z-index: 1;
/* 透明：让固定背景图从下面透出来（Layout 默认有底色） */
background-color: transparent;
/* 旧版影子是 2% / 6%，比库默认更深，属于主题级覆盖 */
--su-shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
--su-shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
}
/* 顶部背景图：固定 65vh，底部渐隐到页面底色 */
@@ -45,32 +48,7 @@
padding: 0 var(--su-space-5);
}
.site-brand {
display: flex;
align-items: center;
gap: var(--su-space-2);
}
.site-brand-mark {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--su-radius-pill);
background-color: var(--su-text-main);
color: var(--su-white);
font-size: var(--su-font-size-base);
font-weight: var(--su-font-weight-strong);
}
.site-brand-logo {
width: 32px;
height: 32px;
border-radius: var(--su-radius-sm);
object-fit: contain;
}
/* 后台「首页 Logo」的实时预览 */
/* 后台「首页 Logo」的实时预览：外观交给库里的 Brand，这里只管外框 */
.brand-preview {
display: flex;
align-items: center;
@@ -81,42 +59,9 @@
background-color: var(--su-bg-card);
}
.site-brand-name {
font-size: var(--su-font-size-lg);
line-height: var(--su-line-height-lg);
letter-spacing: 0.04em;
}
/* ---------- 页头滚动信息 ---------- */
.header-ticker {
flex: 1;
min-width: 0;
overflow: hidden;
mask-image: linear-gradient(
90deg,
transparent 0,
#000 32px,
#000 calc(100% - 32px),
transparent 100%
);
}
.header-ticker-track {
display: flex;
width: max-content;
animation: header-ticker 24s linear infinite;
}
/* 每组占满整条轨道宽度：任何时候只看到一份信息，滚动时下一份从右侧进入 */
.header-ticker-group {
display: inline-flex;
align-items: center;
justify-content: space-evenly;
gap: var(--su-space-8);
min-width: 100%;
}
/* 跑马灯外壳在 @stash/ui 的 Ticker 里，这里只剩每条信息的排版 */
.header-ticker-item {
display: inline-flex;
align-items: center;
@@ -127,24 +72,6 @@
white-space: nowrap;
}
@keyframes header-ticker {
from {
transform: translateX(0);
}
/* 位移量由 SiteHeader 量出「一组」的真实宽度写进 --ticker-shift；
回退值仅在第一帧兜底，正常情况不会用到 */
to {
transform: translateX(var(--ticker-shift, -33.3333%));
}
}
@media (prefers-reduced-motion: reduce) {
.header-ticker-track {
animation: none;
}
}
.header-actions {
margin-left: auto;
}
@@ -158,21 +85,6 @@
padding: var(--su-space-8) 0 calc(var(--su-space-10) + var(--su-space-1));
}
.search-row {
width: min(480px, 100%);
height: 44px;
}
/* 旧版搜索是「浅边框 + 卡片阴影」，聚焦时不额外加边框/焦点环 */
.search-row > *:first-child,
.search-row > *:first-child:focus-within {
border-color: var(--su-border);
border-radius: var(--su-radius-md);
box-shadow: var(--su-shadow-card);
}
/* 搜索框保持实底清晰，透明度/虚化只作用于周围区域 */
/* ---------- 两栏骨架 ---------- */
.content {
@@ -183,30 +95,6 @@
padding-bottom: var(--su-space-10);
}
/* 顶部渐隐：sticky 固定在滚动区顶端，内容从下面淡出而不是被硬切 */
.content-veil {
position: sticky;
top: 0;
z-index: 5;
height: 32px;
/* 抵消自身高度 + 父容器 gap，避免把首张卡片往下顶 */
margin-bottom: calc(-32px - var(--su-space-5));
pointer-events: none;
opacity: 0;
background: linear-gradient(to bottom, var(--su-bg-page) 0%, transparent 100%);
transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
}
.content-veil.is-visible {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.content-veil {
transition: none;
}
}
.sidebar {
display: flex;
flex-direction: column;
@@ -220,8 +108,8 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 18px 14px 14px;
gap: var(--su-space-2);
padding: var(--su-space-5) var(--su-space-4) var(--su-space-4);
text-align: center;
}
@@ -230,11 +118,11 @@
}
.profile-role {
padding: 1px 8px;
padding: 0 var(--su-space-2);
border: 1px solid var(--su-border);
border-radius: var(--su-radius-pill);
font-size: var(--su-font-size-xs);
line-height: 18px;
line-height: var(--su-line-height-sm);
color: var(--su-text-sub);
}
@@ -246,7 +134,7 @@
.profile-location {
margin-top: 2px;
font-size: var(--su-font-size-xs);
line-height: 18px;
line-height: var(--su-line-height-sm);
color: var(--su-text-muted);
}
@@ -256,30 +144,30 @@
}
.service-panel {
padding: 12px 14px;
padding: var(--su-space-3) var(--su-space-4);
}
/* 旧版标题与统计值的行高比库默认更紧 */
.service-panel h2 {
line-height: 20px;
line-height: var(--su-line-height-sm);
}
/* 旧版连接状态药丸：22 高、12px */
.service-status {
height: 22px;
padding: 0 10px;
padding: 0 var(--su-space-3);
font-size: var(--su-font-size-xs);
}
/* 旧版统计行是 12/18 */
.service-stats span {
line-height: 18px;
line-height: var(--su-line-height-sm);
}
.service-stats {
display: flex;
flex-direction: column;
gap: 6px;
gap: var(--su-space-2);
margin-top: 10px;
}
@@ -334,10 +222,10 @@
right: -18px;
height: 16px;
min-width: 16px;
padding: 0 4px;
border-radius: 8px;
padding: 0 var(--su-space-1);
border-radius: var(--su-radius-sm);
box-shadow: 0 1px 3px color-mix(in srgb, var(--su-color-danger) 30%, transparent);
font-size: 12px;
font-size: var(--su-font-size-xs);
font-weight: var(--su-font-weight-strong);
line-height: 1;
}
@@ -356,7 +244,7 @@
width: 4px;
height: 16px;
margin-right: var(--su-space-2);
border-radius: 2px;
border-radius: var(--su-radius-xs);
background-color: var(--su-color-primary);
}
@@ -379,7 +267,7 @@
.group-crumbs {
display: flex;
align-items: center;
gap: 6px;
gap: var(--su-space-2);
padding: var(--su-space-2) var(--su-space-3);
}
@@ -401,7 +289,7 @@
width: 4px;
height: 16px;
margin-right: var(--su-space-2);
border-radius: 2px;
border-radius: var(--su-radius-xs);
background-color: var(--su-color-primary);
}
@@ -410,8 +298,8 @@
.app-card {
display: flex;
align-items: center;
gap: 15px;
padding: 6px 0;
gap: var(--su-space-4);
padding: var(--su-space-2) 0;
border-radius: var(--su-radius-sm);
}
@@ -422,7 +310,7 @@
.app-card-info {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--su-space-1);
min-width: 0;
}
@@ -430,13 +318,15 @@
.app-card-avatar {
width: 48px;
height: 48px;
font-size: 18px;
font-size: var(--su-font-size-lg);
}
.app-card-avatar > span + span {
width: 10px;
height: 10px;
border-width: 1px;
/* 6px 不是文字尺寸：这是 10px 圆标里的一枚「✓」字形，按图标对待；
设计系统的字阶（12 起）不覆盖这种装饰字形 */
font-size: 6px;
}
@@ -495,7 +385,7 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0 4px;
padding: var(--su-space-3) 0 var(--su-space-1);
text-align: center;
}
@@ -509,7 +399,7 @@
border-radius: 50%;
background-color: var(--su-color-primary-soft);
color: var(--su-color-primary);
font-size: 24px;
font-size: var(--su-font-size-xl);
line-height: 1;
}
@@ -529,7 +419,7 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 28px;
padding: var(--su-space-6);
}
.item-title {
@@ -545,7 +435,7 @@
/* 旧版标签：2px 10px、12px、主色浅底 */
.item-tag {
height: 22px;
padding: 0 10px;
padding: 0 var(--su-space-3);
font-size: var(--su-font-size-xs);
}
@@ -565,7 +455,7 @@
.item-cover {
display: grid;
place-items: center;
margin: 18px 0 10px;
margin: var(--su-space-5) 0 var(--su-space-3);
overflow: hidden;
background-color: var(--su-color-primary-soft);
color: var(--su-color-primary);
@@ -590,13 +480,13 @@
}
.item-cover-letter {
font-size: 32px;
font-size: var(--su-font-size-2xl);
color: var(--su-text-sub);
}
.item-quote {
display: flex;
gap: 6px;
gap: var(--su-space-2);
width: 100%;
margin-top: 18px;
text-align: left;
@@ -604,7 +494,7 @@
.item-quote-mark {
flex-shrink: 0;
font-size: 32px;
font-size: var(--su-font-size-2xl);
font-weight: var(--su-font-weight-strong);
line-height: 1;
color: color-mix(in srgb, var(--su-color-danger) 35%, transparent);
@@ -647,7 +537,7 @@
flex: 1;
align-items: center;
justify-content: center;
gap: 6px;
gap: var(--su-space-2);
height: 36px;
border-radius: var(--su-radius-cover);
background-color: var(--su-color-primary);
@@ -717,7 +607,7 @@
display: flex;
flex-direction: column;
gap: var(--su-space-3);
padding: 32px 40px 40px;
padding: var(--su-space-8) var(--su-space-10) var(--su-space-10);
}
.article-lead {
@@ -735,7 +625,7 @@
.related-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
gap: var(--su-space-4) var(--su-space-6);
margin-top: var(--su-space-4);
}
@@ -749,9 +639,9 @@
.related-item {
display: flex;
align-items: center;
gap: 10px;
gap: var(--su-space-3);
width: 100%;
padding: 4px;
padding: var(--su-space-1);
border-radius: var(--su-radius-cover);
text-align: left;
transition: background-color var(--su-duration-fast) var(--su-ease-in-out);
@@ -862,9 +752,10 @@
}
.admin-main {
width: min(880px, calc(100% - 48px));
/* 与页头内层同宽同左缘：页头 1380 减左右各 20 的内边距 = 内容从 50 起 */
width: min(var(--su-layout-width), 100%);
margin: 0 auto;
padding: var(--su-space-8) 0 var(--su-space-10);
padding: var(--su-space-8) var(--su-space-5) var(--su-space-10);
}
.admin-locked {
@@ -1434,7 +1325,7 @@ a.entry-href:hover {
.cards-side-list {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--su-space-1);
}
.cards-side-item {
@@ -1564,18 +1455,18 @@ a.entry-href:hover {
.card-order-cell {
display: flex;
align-items: center;
gap: 2px;
gap: var(--su-space-1);
}
/* 分组管理里状态为「关闭」的分组：卡片里只能看、不能勾选 */
.group-off-tag {
display: inline-block;
padding: 0 8px;
padding: 0 var(--su-space-2);
border-radius: var(--su-radius-pill);
background-color: var(--su-gray-2);
color: var(--su-text-muted);
font-size: var(--su-font-size-xs);
line-height: 20px;
line-height: var(--su-line-height-sm);
white-space: nowrap;
}