重构 monorepo 并完善网页端订阅与首页体验
- 迁移为 frontend-web、frontend-electron、backend-web 与 docker 部署结构 - 网页端：订阅门禁二次弹窗、套餐/支付组件化、顶栏分组对齐 - 首页：最近文件与模板库布局优化，缩略图对齐，下载与删除操作 - 新增管理后台、支付与云端文件 API，更新 README 与项目规范 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
24kycj
@@ -0,0 +1,238 @@
|
||||
@import url('tokens.css');
|
||||
|
||||
.soon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--soon-space-sm);
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: var(--soon-radius-sm);
|
||||
background: var(--soon-accent);
|
||||
color: #fff;
|
||||
font-size: var(--soon-font-md);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s var(--soon-ease), transform 0.15s var(--soon-ease);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.soon-btn:hover {
|
||||
background: var(--soon-accent-hover);
|
||||
}
|
||||
.soon-btn:active { transform: scale(0.98); }
|
||||
.soon-btn--ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--soon-border);
|
||||
color: var(--soon-text);
|
||||
}
|
||||
.soon-btn--ghost:hover { border-color: var(--soon-accent); color: var(--soon-accent); background: transparent; }
|
||||
.soon-btn--sm {
|
||||
height: var(--soon-btn-h-sm);
|
||||
padding: 0 14px;
|
||||
font-size: var(--soon-font-sm);
|
||||
}
|
||||
.soon-btn--block { width: 100%; }
|
||||
|
||||
.soon-input--sm {
|
||||
height: var(--soon-input-h-sm);
|
||||
padding: 0 12px;
|
||||
font-size: var(--soon-font-sm);
|
||||
}
|
||||
|
||||
.soon-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--soon-space-sm);
|
||||
margin: 0 0 var(--soon-space-md);
|
||||
color: var(--soon-text-strong);
|
||||
font-size: var(--soon-font-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
.soon-section-title__badge { margin-left: 0; }
|
||||
|
||||
.soon-portal-topbar__link {
|
||||
color: var(--soon-text);
|
||||
text-decoration: none;
|
||||
font-size: var(--soon-font-sm);
|
||||
}
|
||||
.soon-portal-topbar__link:hover { color: var(--soon-accent); text-decoration: none; }
|
||||
.soon-portal-topbar__link--muted { color: var(--soon-text-muted); }
|
||||
|
||||
.soon-form-label {
|
||||
display: block;
|
||||
margin: 0 0 var(--soon-space-sm);
|
||||
color: var(--soon-text-muted);
|
||||
font-size: var(--soon-font-sm);
|
||||
}
|
||||
.soon-form-field { margin-bottom: var(--soon-space-md); }
|
||||
|
||||
.soon-auth-error-box {
|
||||
display: none;
|
||||
margin-top: var(--soon-space-sm);
|
||||
margin-bottom: var(--soon-space-md);
|
||||
padding: var(--soon-space-sm) var(--soon-space-md);
|
||||
background: rgba(229, 115, 115, 0.12);
|
||||
border: 1px solid rgba(229, 115, 115, 0.35);
|
||||
border-radius: var(--soon-radius-sm);
|
||||
color: var(--soon-danger);
|
||||
font-size: var(--soon-font-sm);
|
||||
}
|
||||
|
||||
.soon-card--lost .rect { border: 1px dashed var(--soon-danger) !important; }
|
||||
|
||||
.soon-pay-banner {
|
||||
position: fixed;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
padding: var(--soon-space-sm) var(--soon-space-lg);
|
||||
background: rgba(0, 150, 136, 0.92);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: var(--soon-font-sm);
|
||||
animation: soon-fadeInUp 0.3s var(--soon-ease);
|
||||
}
|
||||
|
||||
.soon-dialog-body {
|
||||
padding: var(--soon-space-lg);
|
||||
color: var(--soon-text);
|
||||
font-size: var(--soon-font-md);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.soon-skeleton--h80 { height: 80px; }
|
||||
.soon-skeleton--h120 { height: 120px; }
|
||||
.soon-skeleton--h200 { height: 200px; width: 200px; }
|
||||
|
||||
.soon-card {
|
||||
background: var(--soon-bg-panel);
|
||||
border: 1px solid var(--soon-border);
|
||||
border-radius: var(--soon-radius);
|
||||
padding: var(--soon-space-lg);
|
||||
transition: transform 0.2s var(--soon-ease), border-color 0.2s var(--soon-ease);
|
||||
}
|
||||
.soon-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--soon-accent);
|
||||
}
|
||||
|
||||
.soon-input-wrap {
|
||||
position: relative;
|
||||
margin-bottom: var(--soon-space-md);
|
||||
}
|
||||
.soon-input-wrap .soon-input-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.soon-input-wrap .soon-input-icon svg {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke: var(--soon-text-muted);
|
||||
}
|
||||
.soon-input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 0 40px 0 40px;
|
||||
background: var(--soon-bg-deep);
|
||||
border: 1px solid var(--soon-border);
|
||||
border-radius: var(--soon-radius-sm);
|
||||
color: var(--soon-text-strong);
|
||||
font-size: var(--soon-font-md);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.soon-input:focus {
|
||||
border-color: var(--soon-accent);
|
||||
box-shadow: var(--soon-focus-ring);
|
||||
}
|
||||
.soon-input.is-error { border-color: var(--soon-danger); animation: soon-shake 0.3s; }
|
||||
|
||||
.soon-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: var(--soon-font-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
.soon-badge--active { background: rgba(0, 150, 136, 0.2); color: var(--soon-accent); }
|
||||
.soon-badge--disabled { background: rgba(229, 115, 115, 0.2); color: var(--soon-danger); }
|
||||
.soon-badge--pending { background: rgba(255, 183, 77, 0.2); color: var(--soon-warning); }
|
||||
.soon-badge--paid { background: rgba(102, 187, 106, 0.2); color: var(--soon-success); }
|
||||
|
||||
.soon-skeleton {
|
||||
background: linear-gradient(90deg, #2a3036 25%, #3a424a 50%, #2a3036 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: soon-shimmer 1.2s infinite;
|
||||
border-radius: var(--soon-radius-sm);
|
||||
}
|
||||
|
||||
.soon-empty {
|
||||
text-align: center;
|
||||
padding: var(--soon-space-lg) var(--soon-space-md);
|
||||
color: var(--soon-text-muted);
|
||||
}
|
||||
.soon-empty--inline {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 28px 16px 20px;
|
||||
}
|
||||
.soon-home-panel .soon-empty--inline {
|
||||
min-height: 160px;
|
||||
}
|
||||
.soon-empty__icon {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background: transparent;
|
||||
}
|
||||
.soon-empty img.soon-empty__icon {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.soon-empty__title {
|
||||
margin: 0;
|
||||
font-size: var(--soon-font-sm);
|
||||
font-weight: 400;
|
||||
color: var(--soon-text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.soon-empty__hint {
|
||||
margin: 6px 0 0 !important;
|
||||
font-size: var(--soon-font-xs) !important;
|
||||
color: var(--soon-text-muted) !important;
|
||||
opacity: 0.75;
|
||||
line-height: 1.5;
|
||||
max-width: 320px;
|
||||
}
|
||||
.soon-empty__action {
|
||||
margin-top: var(--soon-space-md);
|
||||
}
|
||||
.soon-empty p {
|
||||
margin: 0;
|
||||
font-size: var(--soon-font-md);
|
||||
color: var(--soon-text-strong);
|
||||
}
|
||||
|
||||
.soon-toast-error { color: var(--soon-danger); font-size: var(--soon-font-sm); margin-top: var(--soon-space-sm); }
|
||||
Reference in New Issue
Block a user