From 3650e0eda8ccedb8a88f0041e1788fc275b3a9ab Mon Sep 17 00:00:00 2001 From: bielie Date: Tue, 10 Feb 2026 15:50:16 +0800 Subject: [PATCH] Update story summary UI styles --- modules/story-summary/story-summary.css | 483 +++++++++++++++++++++++ modules/story-summary/story-summary.html | 216 +++++++++- 2 files changed, 696 insertions(+), 3 deletions(-) diff --git a/modules/story-summary/story-summary.css b/modules/story-summary/story-summary.css index ec9b19a..5e4e260 100644 --- a/modules/story-summary/story-summary.css +++ b/modules/story-summary/story-summary.css @@ -2903,3 +2903,486 @@ h1 span { #recall-log-content .metric-good { color: #22c55e; } + +/* ═══════════════════════════════════════════════════════════════════════════ + Guide Tab (使用说明) + ═══════════════════════════════════════════════════════════════════════════ */ + +.guide-container { + font-size: .875rem; + line-height: 1.7; + color: var(--txt2); +} + +/* Section */ +.guide-section { + margin-bottom: 28px; + padding-bottom: 24px; + border-bottom: 1px solid var(--bdr2); +} + +.guide-section-last, +.guide-section:last-child { + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; +} + +/* Title */ +.guide-title { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 14px; + font-size: 1rem; + font-weight: 600; + color: var(--txt); +} + +.guide-num { + width: 26px; + height: 26px; + background: var(--acc); + color: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: .8125rem; + flex-shrink: 0; +} + +/* Text */ +.guide-text { + margin-bottom: 8px; + color: var(--txt2); +} + +.guide-text:last-child { + margin-bottom: 0; +} + +.guide-text a { + color: var(--hl); + text-decoration: none; +} + +.guide-text a:hover { + text-decoration: underline; +} + +/* Steps */ +.guide-steps { + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 4px; +} + +.guide-step { + display: flex; + gap: 12px; + align-items: flex-start; +} + +.guide-step-num { + width: 22px; + height: 22px; + background: var(--hl); + color: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: .75rem; + flex-shrink: 0; + margin-top: 2px; +} + +.guide-step-body { + flex: 1; + min-width: 0; +} + +.guide-step-title { + font-weight: 600; + color: var(--txt); + margin-bottom: 2px; + font-size: .875rem; +} + +.guide-step-desc { + color: var(--txt2); + font-size: .8125rem; + line-height: 1.6; +} + +.guide-step-desc a { + color: var(--hl); + text-decoration: none; +} + +.guide-step-desc a:hover { + text-decoration: underline; +} + +.guide-tag { + display: inline-block; + padding: 1px 8px; + background: var(--hl-soft); + color: var(--hl); + border-radius: 10px; + font-size: .6875rem; + font-weight: 500; + vertical-align: middle; + margin-left: 4px; +} + +/* Card List */ +.guide-card-list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + margin-top: 4px; +} + +.guide-card { + padding: 14px 16px; + background: var(--bg3); + border: 1px solid var(--bdr2); + border-radius: 6px; + transition: border-color .2s; +} + +.guide-card:hover { + border-color: var(--bdr); +} + +.guide-card-title { + font-size: .8125rem; + font-weight: 600; + color: var(--txt); + margin-bottom: 6px; +} + +.guide-card-desc { + font-size: .75rem; + color: var(--txt3); + line-height: 1.6; +} + +/* Highlight */ +.guide-highlight { + padding: 16px 20px; + background: linear-gradient(135deg, rgba(216, 122, 122, .06), rgba(216, 122, 122, .02)); + border: 1px solid rgba(216, 122, 122, .2); + border-radius: 8px; + margin-top: 4px; +} + +.guide-highlight-title { + font-weight: 600; + color: var(--txt); + margin-bottom: 8px; + font-size: .875rem; +} + +/* List */ +.guide-list { + margin: 8px 0; + padding-left: 20px; + color: var(--txt2); +} + +.guide-list li { + margin-bottom: 6px; + line-height: 1.6; +} + +.guide-list li:last-child { + margin-bottom: 0; +} + +.guide-list li::marker { + color: var(--hl); +} + +.guide-list a { + color: var(--hl); + text-decoration: none; +} + +.guide-list a:hover { + text-decoration: underline; +} + +.guide-list code { + background: var(--bg3); + padding: 1px 5px; + border-radius: 3px; + font-size: .75rem; + font-family: 'SF Mono', Monaco, Consolas, monospace; + color: var(--txt); +} + +.guide-list-inner { + margin-top: 6px; + margin-bottom: 4px; + padding-left: 18px; +} + +.guide-list-inner li { + margin-bottom: 3px; + font-size: .8125rem; + color: var(--txt3); +} + +.guide-list-inner li::marker { + color: var(--txt3); +} + +/* Tip */ +.guide-tip { + display: flex; + gap: 10px; + align-items: flex-start; + padding: 12px 16px; + background: var(--bg3); + border: 1px solid var(--bdr2); + border-left: 3px solid var(--hl); + border-radius: 0 6px 6px 0; + margin-top: 12px; +} + +.guide-tip-icon { + font-size: 1rem; + flex-shrink: 0; + line-height: 1.5; +} + +.guide-tip-text { + font-size: .8125rem; + color: var(--txt2); + line-height: 1.6; + flex: 1; +} + +/* Tips List */ +.guide-tips-list { + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 4px; +} + +.guide-tips-list .guide-tip { + margin-top: 0; +} + +/* FAQ */ +.guide-faq-list { + display: flex; + flex-direction: column; + gap: 0; + margin-top: 4px; +} + +.guide-faq-item { + padding: 14px 0; + border-bottom: 1px solid var(--bdr2); +} + +.guide-faq-item:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.guide-faq-item:first-child { + padding-top: 0; +} + +.guide-faq-q { + font-weight: 600; + color: var(--txt); + font-size: .8125rem; + margin-bottom: 6px; + display: flex; + align-items: center; + gap: 6px; +} + +.guide-faq-q::before { + content: 'Q'; + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + background: var(--acc); + color: #fff; + border-radius: 3px; + font-size: .625rem; + font-weight: 700; + flex-shrink: 0; +} + +.guide-faq-a { + font-size: .8125rem; + color: var(--txt2); + line-height: 1.6; + padding-left: 24px; +} + +/* ═══════════════════════════════════════════════════════════════════════════ + Guide Tab - Responsive + ═══════════════════════════════════════════════════════════════════════════ */ + +@media (max-width: 768px) { + .guide-container { + font-size: .8125rem; + } + + .guide-title { + font-size: .9375rem; + } + + .guide-num { + width: 24px; + height: 24px; + font-size: .75rem; + } + + .guide-section { + margin-bottom: 20px; + padding-bottom: 18px; + } + + .guide-card-list { + grid-template-columns: 1fr; + gap: 8px; + } + + .guide-card { + padding: 12px 14px; + } + + .guide-step { + gap: 10px; + } + + .guide-step-num { + width: 20px; + height: 20px; + font-size: .6875rem; + } + + .guide-highlight { + padding: 14px 16px; + } + + .guide-tip { + padding: 10px 12px; + } + + .guide-faq-a { + padding-left: 0; + } + + .guide-faq-q::before { + width: 16px; + height: 16px; + font-size: .5625rem; + } +} + +@media (max-width: 480px) { + .guide-container { + font-size: .75rem; + } + + .guide-title { + font-size: .875rem; + gap: 8px; + } + + .guide-num { + width: 22px; + height: 22px; + font-size: .6875rem; + } + + .guide-section { + margin-bottom: 16px; + padding-bottom: 14px; + } + + .guide-steps { + gap: 12px; + } + + .guide-step-title { + font-size: .8125rem; + } + + .guide-step-desc { + font-size: .75rem; + } + + .guide-card-title { + font-size: .75rem; + } + + .guide-card-desc { + font-size: .6875rem; + } + + .guide-highlight { + padding: 12px 14px; + } + + .guide-highlight-title { + font-size: .8125rem; + } + + .guide-list { + padding-left: 16px; + font-size: .75rem; + } + + .guide-list-inner li { + font-size: .75rem; + } + + .guide-tip { + padding: 8px 10px; + gap: 8px; + } + + .guide-tip-icon { + font-size: .875rem; + } + + .guide-tip-text { + font-size: .75rem; + } + + .guide-faq-q { + font-size: .75rem; + } + + .guide-faq-a { + font-size: .75rem; + } + + .guide-faq-item { + padding: 10px 0; + } +} + +@media (hover: none) and (pointer: coarse) { + .guide-card:hover { + border-color: var(--bdr2); + } +} \ No newline at end of file diff --git a/modules/story-summary/story-summary.html b/modules/story-summary/story-summary.html index 23fc7ac..c8d90ad 100644 --- a/modules/story-summary/story-summary.html +++ b/modules/story-summary/story-summary.html @@ -164,6 +164,7 @@
总结设置
向量设置
调试
+
使用说明