feat: 类型帖互动、积分经济与发帖体验
补齐问答采纳/重开、投票匿名与有票禁编、悬赏过期退回、抽奖回帖开奖，并接入积分账本与发帖附件可见性。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -113,6 +113,497 @@ body {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 全站悬停即显提示气泡（配合 TipHost + data-tip，替代原生 title 延迟） */
|
||||
.j13-tip-bubble {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
max-width: min(280px, calc(100vw - 20px));
|
||||
padding: 5px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 0.01em;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--panel);
|
||||
background: color-mix(in srgb, var(--ink) 92%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--ink) 88%, transparent);
|
||||
box-shadow: var(--shadow);
|
||||
animation: j13-tip-in 80ms ease-out;
|
||||
}
|
||||
.dark .j13-tip-bubble {
|
||||
color: var(--ink);
|
||||
background: color-mix(in srgb, var(--panel-2) 94%, var(--ink));
|
||||
border-color: var(--line-2);
|
||||
}
|
||||
@keyframes j13-tip-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.j13-tip-bubble {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
发帖台：文档式舞台（对齐私信页体量；不改动全站 .field）
|
||||
控件：白底 + 单层描边；聚焦同 j13-chat-search
|
||||
============================================================ */
|
||||
.j13-compose-page {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
/* Suspense / 客户端壳层也要把高度往下传 */
|
||||
.j13-compose-page > :last-child {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.j13-compose-stage {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: visible;
|
||||
}
|
||||
.j13-compose-body {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 1.35rem 1.35rem 0.85rem;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.j13-compose-body {
|
||||
padding: 1.5rem 1.75rem 0.9rem;
|
||||
gap: 1.15rem;
|
||||
}
|
||||
}
|
||||
.j13-compose-actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.75rem 1rem;
|
||||
padding: 1rem 1.5rem 1.25rem;
|
||||
border-top: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.j13-compose-actions {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 元信息：板块固定宽 + 标签吃满剩余 + 可见性 */
|
||||
.j13-compose-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 0.85rem 1rem;
|
||||
}
|
||||
.j13-compose-meta-board {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
flex: 0 1 220px;
|
||||
}
|
||||
.j13-compose-meta-tags {
|
||||
flex: 1 1 240px;
|
||||
min-width: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.j13-compose-meta-access {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
flex: 0 1 200px;
|
||||
}
|
||||
|
||||
.j13-compose-typebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.j13-compose-typechip {
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
color: var(--ink-2);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
.j13-compose-typechip:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
color: var(--accent);
|
||||
}
|
||||
.j13-compose-typechip.is-on {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
|
||||
color: var(--accent);
|
||||
}
|
||||
.j13-compose-typechip:disabled:not(.is-on) {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.j13-compose-typepanel {
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--line));
|
||||
background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
|
||||
}
|
||||
.j13-compose-attach-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
}
|
||||
.j13-interact-card {
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: color-mix(in srgb, var(--tint) 65%, var(--panel));
|
||||
}
|
||||
|
||||
.j13-compose-field {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
font-family: var(--font-sans);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.j13-compose-field::placeholder { color: var(--ink-3); }
|
||||
.j13-compose-field:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.j13-compose-field:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.j13-compose-title {
|
||||
width: 100%;
|
||||
padding: 0.25rem 0 0.75rem;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.3;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
.j13-compose-title::placeholder {
|
||||
color: var(--ink-3);
|
||||
font-weight: 700;
|
||||
}
|
||||
.j13-compose-title:focus {
|
||||
outline: none;
|
||||
border-bottom-color: var(--accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 标签：对齐私信搜索 —— 同高、同聚焦，输入无内层描边；白底避免灰块 */
|
||||
.j13-tag-field {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 2.5rem;
|
||||
padding: 4px 12px;
|
||||
cursor: text;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.j13-tag-field:focus-within {
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.j13-tag-field-input,
|
||||
.j13-tag-field-input:focus,
|
||||
.j13-tag-field-input:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.j13-board-picker { position: relative; }
|
||||
.j13-board-trigger {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0 12px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
color: var(--ink);
|
||||
text-align: left;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j13-board-trigger:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--line-2) 40%, var(--line));
|
||||
}
|
||||
.j13-board-trigger:focus { outline: none; }
|
||||
.j13-board-trigger:focus-visible,
|
||||
.j13-board-trigger[aria-expanded="true"] {
|
||||
outline: none !important;
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.j13-board-trigger:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.j13-board-trigger-ico {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 7px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-board-menu {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
padding: 6px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.j13-board-option {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease;
|
||||
}
|
||||
.j13-board-option:hover,
|
||||
.j13-board-option.is-active,
|
||||
.j13-board-option.is-selected {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
.j13-board-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0 12px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
color: var(--ink-2);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 正文画布占满剩余高度 */
|
||||
.j13-compose-canvas {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.j13-md-editor {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
}
|
||||
.j13-md-editor.is-fullscreen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
margin: 0;
|
||||
padding: 1rem 1.25rem 1.25rem;
|
||||
background: var(--panel);
|
||||
border: 0;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.j13-md-toolbar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px 0 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: transparent;
|
||||
}
|
||||
.j13-md-tool {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
color: var(--ink-2);
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.j13-md-tool:hover:not(:disabled) {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
.j13-md-tool:disabled { opacity: 0.4; }
|
||||
.j13-md-tool:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.j13-md-mode {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.j13-md-mode button {
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.j13-md-mode button.is-on {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
.j13-md-textarea {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-height: 320px;
|
||||
height: 100%;
|
||||
resize: none;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
background: transparent !important;
|
||||
padding: 1rem 0 0.75rem !important;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 15.5px !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
.j13-md-editor.is-fullscreen .j13-md-textarea,
|
||||
.j13-md-editor.is-fullscreen .j13-md-preview {
|
||||
min-height: 0;
|
||||
}
|
||||
.j13-md-textarea::placeholder { color: var(--ink-3); }
|
||||
.j13-md-textarea:focus,
|
||||
.j13-md-textarea:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
.j13-md-preview {
|
||||
flex: 1 1 auto;
|
||||
min-height: 320px;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 0 0.75rem;
|
||||
background: transparent;
|
||||
}
|
||||
.j13-md-foot {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 0 0;
|
||||
font-size: 12.5px;
|
||||
color: var(--ink-3);
|
||||
border-top: 1px solid var(--line);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.j13-compose-shell {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
/* 发帖/编辑：占满 main 剩余高度，减少卡片下方空余（保留页脚） */
|
||||
body:has([data-compose-viewport]) #main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
/* 略收紧上下边距，把高度留给舞台 */
|
||||
padding-top: 1.15rem;
|
||||
padding-bottom: 1.15rem;
|
||||
}
|
||||
body:has([data-compose-viewport]) #main > [data-compose-viewport] {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 聊天页：整页锁在视口内，避免「页面滚动 + 对话区滚动」双滚动条 */
|
||||
body:has([data-chat-viewport]) {
|
||||
height: 100dvh;
|
||||
@@ -511,6 +1002,28 @@ a.j13-mention-token:hover {
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge-type {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 11px;
|
||||
background: color-mix(in srgb, var(--accent) 12%, var(--tint));
|
||||
color: var(--accent);
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge-access {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 11px;
|
||||
background: var(--tint);
|
||||
color: var(--ink-2);
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 帖子列表中的板块小标签：全站统一浅灰配色，避免每行多色眩目 */
|
||||
.j13-board-tag {
|
||||
|
||||
Reference in New Issue
Block a user