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

fix(web): 恢复与旧版一致的布局与组件参数

Browse Source 
- 布局：Layout 使用 contained(1380)+gutter20+siderWidth240+gap20、solid 60px 页头、整屏内部滚动
- 搜索框恢复悬浮居中；侧栏与内容恢复 52/88px 顶部偏移
- 新增并使用 @stash/ui 的 Cover（海报 2:3 / 图文 4:3 / 宽图）替换手写封面
- 头像恢复 64px 品牌底色；正文恢复 14/1.9；详情标题、标签、引用、统计、跳转按原版还原
- 分区卡 padding 20、分区标题 16、网格间距 12/16 对齐原值
This commit is contained in:
stash
2026-10-28 18:12:14 +08:00
parent 64f1fbf906
commit 1bdcca025b
20 changed files with 319 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stash-web/src/App.css
+210 -105
View File
@@ -1,26 +1,41 @@
/* 页面级样式：只保留「组件库没有」的部分（背景、外壳、封面比例、正文版式）。
颜色 / 间距 / 字号全部取自 @stash/ui 的令牌，组件内部样式不要再在这里覆盖。 */
/* 页面级样式：只保留「组件库没有」的部分（背景、外壳、封面兜底、正文版式）。
颜色 / 间距 / 字号全部取自 @stash/ui 的令牌。 */
.app {
background-color: var(--su-bg-page);
position: relative;
z-index: 1;
/* 透明：让固定背景图从下面透出来（Layout 默认有底色） */
background-color: transparent;
}
/* 顶部背景图：固定 65vh，底部渐隐到页面底色 */
.site-background {
position: fixed;
inset: 0 0 auto;
z-index: -1;
z-index: 0;
height: 65vh;
background: url('./assets/site-bg.jpg') center top / cover no-repeat;
opacity: 0.16;
mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
pointer-events: none;
}
.site-background::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80%;
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
}
/* ---------- 页头 ---------- */
.site-header-inner {
display: flex;
align-items: center;
gap: var(--su-space-6);
height: 64px;
justify-content: space-between;
gap: var(--su-space-4);
height: var(--su-header-height);
}
.site-brand {
@@ -34,10 +49,10 @@
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--su-radius-sm);
background-color: var(--su-color-primary);
border-radius: var(--su-radius-pill);
background-color: var(--su-text-main);
color: var(--su-white);
font-size: var(--su-font-size-md);
font-size: var(--su-font-size-base);
font-weight: var(--su-font-weight-strong);
}
@@ -56,46 +71,50 @@
margin-left: auto;
}
/* ---------- 搜索：悬浮在页头下方居中 ---------- */
.search-row {
position: fixed;
top: 76px;
left: 50%;
z-index: var(--su-z-header);
width: min(480px, calc(100vw - 48px));
height: 44px;
transform: translateX(-50%);
}
/* ---------- 两栏骨架 ---------- */
.content {
display: flex;
flex-direction: column;
gap: var(--su-space-4);
padding-top: var(--su-space-2);
}
/* 搜索框吸在页头下方，滚动时内容从它下面穿过 */
.search-row {
position: sticky;
top: 64px;
z-index: var(--su-z-header);
padding: var(--su-space-2) 0;
background-color: color-mix(in srgb, var(--su-bg-page) 88%, transparent);
backdrop-filter: blur(8px);
gap: var(--su-space-5);
padding-top: 88px;
padding-bottom: var(--su-space-10);
}
.sidebar {
position: sticky;
top: 84px;
display: flex;
flex-direction: column;
gap: var(--su-space-3);
padding: var(--su-space-4) var(--su-space-4) var(--su-space-4) 0;
gap: var(--su-space-4);
padding-top: 88px;
}
.profile-card,
.service-panel,
.nav-card {
flex-shrink: 0;
}
/* ---------- 侧栏卡片 ---------- */
.profile-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--su-space-2);
gap: 6px;
padding: 18px 14px 14px;
text-align: center;
}
.service-panel {
padding: 12px 14px;
}
.service-stats {
display: flex;
flex-direction: column;
@@ -107,10 +126,16 @@
max-width: 140px;
}
.nav-card {
padding: var(--su-space-2);
}
/* ---------- 首页分区 ---------- */
.home-view {
display: flex;
flex-direction: column;
gap: var(--su-space-4);
gap: var(--su-space-5);
}
.section-header {
@@ -131,10 +156,9 @@
.app-card {
display: flex;
align-items: center;
gap: var(--su-space-3);
padding: var(--su-space-2);
gap: 15px;
padding: 6px 0;
border-radius: var(--su-radius-sm);
transition: background-color var(--su-duration-fast) var(--su-ease-in-out);
}
.app-card:hover {
@@ -148,50 +172,7 @@
min-width: 0;
}
/* ---------- 封面卡（海报 / 图文） ---------- */
.cover-card {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: var(--su-radius-sm);
background-color: var(--su-bg-light);
text-align: left;
}
.cover {
display: block;
width: 100%;
object-fit: cover;
transition: transform var(--su-duration-base) var(--su-ease-in-out);
}
.cover--poster {
aspect-ratio: 2 / 3;
}
.cover--article {
aspect-ratio: 4 / 3;
}
.cover-card:hover .cover {
transform: scale(1.04);
}
.cover-caption {
position: absolute;
inset: auto 0 0;
display: -webkit-box;
overflow: hidden;
padding: 24px var(--su-space-2) var(--su-space-2);
background: linear-gradient(transparent, rgb(0 0 0 / 62%));
color: var(--su-white);
font-size: var(--su-font-size-sm);
line-height: var(--su-line-height-sm);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* ---------- 图文白卡 ---------- */
.ces-card {
overflow: hidden;
@@ -200,6 +181,7 @@
.ces-body {
display: flex;
flex-direction: column;
gap: var(--su-space-1);
padding: var(--su-space-3);
text-align: left;
}
@@ -218,23 +200,63 @@
.detail-view {
display: flex;
flex-direction: column;
gap: var(--su-space-4);
gap: var(--su-space-5);
}
.detail-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px var(--su-space-5);
}
.detail-back {
color: var(--su-color-primary);
font-size: var(--su-font-size-md);
font-weight: var(--su-font-weight-bold);
cursor: pointer;
}
.detail-back:hover {
opacity: 0.8;
}
.detail-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--su-space-3);
padding: 12px 0 4px;
text-align: center;
}
.detail-hero-icon {
font-size: 24px;
font-size: 40px;
line-height: 1;
}
.item-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 28px;
}
.item-title {
justify-content: center;
gap: 6px;
}
.item-edit {
margin-left: var(--su-space-2);
margin-left: var(--su-space-1);
font-size: var(--su-font-size-sm);
color: var(--su-color-primary);
vertical-align: middle;
cursor: pointer;
}
.item-edit:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.item-cover {
@@ -268,14 +290,64 @@
}
.item-quote {
padding: var(--su-space-3) var(--su-space-4);
border-left: 2px solid var(--su-color-primary);
border-radius: 0 var(--su-radius-sm) var(--su-radius-sm) 0;
background-color: var(--su-bg-subtle);
display: flex;
gap: 6px;
width: 100%;
margin-top: 18px;
text-align: left;
}
.item-quote-mark {
font-size: var(--su-font-size-lg);
line-height: 1;
color: var(--su-color-primary);
}
.item-quote-text {
font-size: var(--su-font-size-md);
line-height: 1.7;
color: var(--su-text-sub);
}
.item-actions {
margin-top: var(--su-space-4);
display: flex;
align-items: center;
gap: var(--su-space-2);
width: 100%;
margin-top: 18px;
}
/* 统计小药丸：浏览 / 点赞的底 */
.item-stat {
min-width: 56px;
height: 36px;
padding: 0 var(--su-space-3);
border-radius: var(--su-radius-cover);
background-color: var(--su-bg-page);
}
/* 跳转按钮占满剩余宽度 */
.item-jump {
display: inline-flex;
flex: 1;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
border-radius: var(--su-radius-cover);
background-color: var(--su-color-primary);
color: var(--su-white);
font-size: var(--su-font-size-md);
transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
}
.item-jump:hover:not(:disabled) {
opacity: 0.8;
}
.item-jump:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.item-banner {
@@ -292,16 +364,28 @@
gap: var(--su-space-2);
}
.article-body {
display: flex;
flex-direction: column;
gap: var(--su-space-3);
.article-heading {
max-width: 760px;
font-size: var(--su-font-size-xl);
font-weight: var(--su-font-weight-strong);
line-height: 1.4;
}
.article-meta-dot {
color: var(--su-text-muted);
}
.article-body-card {
overflow: hidden;
}
.article-body {
display: flex;
flex-direction: column;
gap: var(--su-space-3);
padding: 32px 40px 40px;
}
.article-lead {
margin-bottom: var(--su-space-2);
}
@@ -314,12 +398,27 @@
/* ---------- 推荐阅读 ---------- */
.related-item {
.related-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
margin-top: var(--su-space-4);
}
.related-title {
display: flex;
align-items: center;
gap: var(--su-space-2);
padding: var(--su-space-2);
border-radius: var(--su-radius-sm);
margin-bottom: var(--su-space-4);
}
.related-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 4px;
border-radius: var(--su-radius-cover);
text-align: left;
transition: background-color var(--su-duration-fast) var(--su-ease-in-out);
}
@@ -340,6 +439,7 @@
gap: var(--su-space-1);
height: 32px;
padding: 0 var(--su-space-3);
border: 1px solid var(--su-border);
border-radius: var(--su-radius-sm);
font-size: var(--su-font-size-sm);
color: var(--su-text-sub);
@@ -364,11 +464,10 @@
@media (max-width: 1100px) {
.sidebar {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--su-space-3);
padding: var(--su-space-4);
padding: 0 var(--su-space-4) var(--su-space-4);
}
.profile-card {
@@ -382,6 +481,17 @@
.header-info {
display: none;
}
.search-row {
position: static;
width: 100%;
height: 36px;
transform: none;
}
.content {
padding-top: var(--su-space-4);
}
}
@media (max-width: 820px) {
@@ -389,17 +499,12 @@
display: none;
}
.search-row {
top: 60px;
}
.site-header-inner {
height: 60px;
height: 56px;
}
}
@media (prefers-reduced-motion: reduce) {
.cover,
.app-card,
.related-item,
.link-button {