refactor: 合并为单 crate，前端改为内嵌 React 控制台
合并 stash-cli / stash-core 为根目录单 crate（lib + bin），新增 React + Vite + TS 控制台替换 Askama 模板。 build.rs 用 walkdir 把 stash-web/dist 同步到 $OUT_DIR/web，由 include_dir! 编译期内嵌，产出单文件二进制。 路由改为 / 与 /assets/** 走内嵌前端，其余交给 ServeDir，缺失路径返回内置 404。同步更新依赖、.gitignore 与 README。
This commit is contained in:
@@ -0,0 +1,939 @@
|
||||
/* ============ 基础 ============ */
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-main);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* 仅屏幕阅读器可见 */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ============ 顶栏 ============ */
|
||||
|
||||
.topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: var(--top-nav-height);
|
||||
background-color: var(--card-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
/* 顶栏内容与下方 .layout 使用同一套宽度与左右内边距，
|
||||
这样 logo、右侧图标才能和侧栏、内容区严格对齐 */
|
||||
.topbar-inner {
|
||||
width: 100%;
|
||||
max-width: var(--layout-max-width);
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: #0f172a;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* 跑马灯 */
|
||||
|
||||
.ticker {
|
||||
flex: 1;
|
||||
max-width: 560px;
|
||||
height: 36px;
|
||||
margin: 0 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#000 10%,
|
||||
#000 90%,
|
||||
transparent
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#000 10%,
|
||||
#000 90%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.ticker-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
white-space: nowrap;
|
||||
animation: ticker 26s linear infinite;
|
||||
}
|
||||
|
||||
.ticker:hover .ticker-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.ticker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13.5px;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.ticker-tag {
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary-color);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes ticker {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶栏操作 */
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.icon-button svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.icon-button[data-spinning='true'] svg,
|
||||
.service-action[data-spinning='true'] svg {
|
||||
animation: spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============ 搜索框 ============ */
|
||||
|
||||
.search-row {
|
||||
position: fixed;
|
||||
top: 76px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: min(480px, calc(100vw - 48px));
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--text-sub);
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 13.5px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
}
|
||||
|
||||
.search-clear:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.search-clear svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2.4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
/* ============ 双列布局 ============ */
|
||||
|
||||
.layout {
|
||||
width: 100%;
|
||||
max-width: var(--layout-max-width);
|
||||
/* 宽屏时整体居中，避免内容全部贴左 */
|
||||
margin: var(--top-nav-height) auto 0;
|
||||
height: calc(100vh - var(--top-nav-height));
|
||||
padding: 36px 24px 0 20px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* 左侧栏 */
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
margin-top: 68px;
|
||||
}
|
||||
|
||||
/* 用户资料模块（数据占位，见 profile.ts） */
|
||||
|
||||
.profile-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 18px 14px 14px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.profile-avatar svg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.profile-badge {
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--card-bg);
|
||||
background-color: #f59e0b;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.profile-role {
|
||||
padding: 1px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
margin: 2px 0 0;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.55;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.profile-location {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nav-card {
|
||||
padding: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
color: var(--text-sub);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-count {
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
background-color: #f1f5f9;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-trailing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-link.active .nav-count,
|
||||
.nav-link:hover .nav-count {
|
||||
background-color: #fff;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
color: var(--text-muted);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.nav-item.open > .nav-link .nav-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.submenu {
|
||||
list-style: none;
|
||||
padding-left: 12px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
|
||||
}
|
||||
|
||||
.nav-item.open > .submenu {
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.submenu .nav-link {
|
||||
padding: 7px 12px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.submenu .nav-link > span:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-empty {
|
||||
color: var(--text-muted);
|
||||
cursor: default;
|
||||
font-size: 12.5px;
|
||||
padding: 7px 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 本地服务面板：独立模块，不与导航项混排 */
|
||||
|
||||
.service-panel {
|
||||
padding: 12px 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.service-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.service-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background-color: #f1f5f9;
|
||||
font-size: 11px;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.service-pill.is-on {
|
||||
background-color: rgba(34, 197, 94, 0.12);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.service-stats {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.service-stats > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.service-stats dt {
|
||||
flex-shrink: 0;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
.service-stats dd {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 面板底部操作：重新扫描 / 查看接口 */
|
||||
.service-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.service-action {
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text-sub);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
color 0.2s,
|
||||
background-color 0.2s;
|
||||
}
|
||||
|
||||
.service-action:not(:disabled):hover {
|
||||
border-color: var(--primary-color);
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.service-action:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.service-action svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
flex-shrink: 0;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #cbd5e1;
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.status-dot.is-on {
|
||||
background-color: #22c55e;
|
||||
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
|
||||
}
|
||||
|
||||
/* 右侧内容 */
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding-top: 52px;
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
/* 顶部留出渐隐区，避免第一个分区标题被 mask 吃掉 */
|
||||
padding-top: 24px;
|
||||
padding-right: 4px;
|
||||
padding-bottom: 40px;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
#000 22px,
|
||||
#000 100%
|
||||
);
|
||||
mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 100%);
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.content-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* 右上角数量角标：粉色渐变胶囊 */
|
||||
.section-badge {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 26px;
|
||||
height: 20px;
|
||||
padding: 0 9px;
|
||||
border-radius: 999px;
|
||||
background-image: linear-gradient(90deg, #ff8a8a 0%, #f42a63 100%);
|
||||
box-shadow: 0 2px 6px rgba(244, 42, 99, 0.28);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.section-group + .section-group {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
background-color: var(--card-bg);
|
||||
box-shadow: var(--shadow-card);
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s,
|
||||
border-color 0.2s;
|
||||
animation: card-in 0.28s ease backwards;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(59, 130, 246, 0.35);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin-top: 2px;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-sub);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 路径类描述用等宽字体，普通文案保持无衬线 */
|
||||
.card-desc.is-mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
@keyframes card-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 空状态 / 错误 */
|
||||
|
||||
.notice {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 36px 24px;
|
||||
border: 1px dashed var(--border-color);
|
||||
border-radius: var(--radius-main);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--text-sub);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.notice strong {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.notice code {
|
||||
padding: 1px 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #eef2f7;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.notice-error {
|
||||
border-style: solid;
|
||||
border-color: #f3c6c6;
|
||||
background-color: #fff7f7;
|
||||
}
|
||||
|
||||
.notice-error strong {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.notice-action {
|
||||
align-self: flex-start;
|
||||
margin-top: 8px;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background-color: var(--card-bg);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
color 0.2s;
|
||||
}
|
||||
|
||||
.notice-action:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* 回到顶部 */
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background-color: #e2e8f0;
|
||||
color: #1e293b;
|
||||
box-shadow: var(--shadow-card);
|
||||
cursor: pointer;
|
||||
z-index: 90;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
transform 0.2s;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
background-color: #cbd5e1;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.back-to-top svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* ============ 响应式 ============ */
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
:root {
|
||||
--sidebar-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.app {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.topbar-inner {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ticker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
position: static;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
width: auto;
|
||||
height: 44px;
|
||||
margin: 16px 16px 0;
|
||||
}
|
||||
|
||||
.layout {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
overflow: visible;
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user