施工：手机端第四批 P3a（智能选股/策略跟踪/问师/复盘助手）
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
施工员
@@ -2139,10 +2139,573 @@
|
||||
.m-tag--dir-down { background: var(--market-down-soft); color: var(--market-down); }
|
||||
.m-tag--dir-flat { background: var(--surface-muted); color: var(--text-secondary); }
|
||||
|
||||
/* ===== 第四批（P3）：智能选股 / 策略跟踪 / 复盘助手 / 问师 ===== */
|
||||
|
||||
/* 日期按钮右侧文本 */
|
||||
.m-date-btn .m-date-btn-label {
|
||||
font-size: var(--font-size-caption);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* 通用：旋转动画（用于刷新按钮/等待 spinner） */
|
||||
@keyframes m-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.is-spinning { animation: m-spin 800ms linear infinite; transform-origin: 50% 50%; }
|
||||
|
||||
/* ============== 聊天工作台（复盘助手 + 问师）============== */
|
||||
.m-chat-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--mobile-header-height) - var(--mobile-tabbar-height) - var(--mobile-safe-bottom));
|
||||
height: calc(100dvh - var(--mobile-header-height) - var(--mobile-tabbar-height) - var(--mobile-safe-bottom));
|
||||
background: var(--canvas);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m-chat-stream {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
padding: 12px 12px 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.m-chat-msg {
|
||||
display: flex;
|
||||
max-width: 82%;
|
||||
margin-top: 8px;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.m-chat-msg:first-child { margin-top: 12px; }
|
||||
|
||||
.m-chat-msg--user { align-self: flex-end; }
|
||||
.m-chat-msg--ai { align-self: flex-start; }
|
||||
|
||||
.m-chat-bubble {
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.m-chat-msg--user .m-chat-bubble {
|
||||
background: var(--action);
|
||||
color: var(--text-inverse);
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.m-chat-msg--ai .m-chat-bubble {
|
||||
background: var(--surface);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.m-chat-bubble p { margin: 0 0 6px; white-space: normal; }
|
||||
.m-chat-bubble p:last-child { margin-bottom: 0; }
|
||||
.m-chat-bubble ul { margin: 0; padding-left: 16px; }
|
||||
.m-chat-bubble li { margin: 2px 0; }
|
||||
.m-chat-bubble h4 { margin: 6px 0 4px; font-size: 14px; font-weight: 600; }
|
||||
.m-chat-bubble blockquote {
|
||||
margin: 4px 0;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid var(--border-strong);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.m-chat-bubble--error {
|
||||
background: var(--warning-soft);
|
||||
border-color: var(--warning-soft);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.m-chat-retry {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--action);
|
||||
font-size: 13px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.m-chat-stamp {
|
||||
align-self: center;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-tertiary);
|
||||
margin: 12px 0 4px;
|
||||
}
|
||||
|
||||
.m-chat-skeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.m-chat-bubble-skel {
|
||||
height: 44px;
|
||||
background: var(--surface-muted);
|
||||
border-radius: 12px;
|
||||
animation: m-skeleton 1.2s ease-in-out infinite;
|
||||
}
|
||||
.m-chat-bubble-skel--ai { align-self: flex-start; }
|
||||
.m-chat-bubble-skel--user { background: var(--action-soft); }
|
||||
|
||||
@keyframes m-skeleton {
|
||||
0%, 100% { opacity: 0.55; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 流式光标 */
|
||||
.m-chat-cursor {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: var(--action);
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 2px;
|
||||
animation: m-cursor-blink 800ms steps(1) infinite;
|
||||
}
|
||||
@keyframes m-cursor-blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
50.01%, 100% { opacity: 0; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.m-chat-cursor { animation: none; }
|
||||
.m-chat-typing i { animation: none; }
|
||||
}
|
||||
|
||||
/* 等待三点 */
|
||||
.m-chat-typing {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.m-chat-typing i {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--text-tertiary);
|
||||
border-radius: 50%;
|
||||
animation: m-typing 1.2s ease-in-out infinite;
|
||||
}
|
||||
.m-chat-typing i:nth-child(2) { animation-delay: 0.15s; }
|
||||
.m-chat-typing i:nth-child(3) { animation-delay: 0.3s; }
|
||||
@keyframes m-typing {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-3px); opacity: 1; }
|
||||
}
|
||||
|
||||
/* 引导问题 / 继续追问胶囊 */
|
||||
.m-chat-presets {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 12px 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.m-chat-presets::-webkit-scrollbar { display: none; }
|
||||
.m-chat-preset-list {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
padding-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.m-chat-preset-list .m-source-tab {
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--surface);
|
||||
color: var(--text-secondary);
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.m-chat-followup-row {
|
||||
margin-top: 8px;
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
max-width: 82%;
|
||||
}
|
||||
.m-chat-followup-row .m-source-tab {
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--surface);
|
||||
color: var(--text-secondary);
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.m-chat-empty-hint {
|
||||
margin-top: 8px;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-tertiary);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* 输入区 */
|
||||
.m-chat-input-bar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
padding: 8px 12px calc(8px + var(--mobile-safe-bottom));
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
/* 键盘弹起时由 --m-keyboard-inset 推上 */
|
||||
transform: translateY(calc(-1 * var(--m-keyboard-inset, 0px)));
|
||||
padding-bottom: calc(8px + var(--mobile-safe-bottom) + var(--m-keyboard-inset, 0px));
|
||||
}
|
||||
|
||||
.m-chat-input-wrap {
|
||||
flex: 1 1 auto;
|
||||
background: var(--surface-muted);
|
||||
border-radius: 12px;
|
||||
padding: 4px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.m-chat-input {
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
max-height: 116px;
|
||||
resize: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px; /* 防止 iOS 聚焦自动放大 */
|
||||
line-height: 1.5;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.m-chat-input::placeholder { color: var(--text-tertiary); }
|
||||
|
||||
.m-chat-send {
|
||||
flex: 0 0 44px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--action);
|
||||
color: var(--text-inverse);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: transform var(--motion-press) var(--ease-press),
|
||||
background-color var(--motion-press-release) var(--ease-press),
|
||||
opacity var(--motion-press-release) var(--ease-press);
|
||||
}
|
||||
.m-chat-send:active { transform: scale(0.94); }
|
||||
.m-chat-send:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
.m-chat-send--stop {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.m-chat-send--stop svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }
|
||||
|
||||
/* 导师胶囊条（消息区顶部） */
|
||||
.m-chat-mentor-bar {
|
||||
flex: 0 0 auto;
|
||||
padding: 8px 12px 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.m-mentor-pill {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--action-soft);
|
||||
color: var(--action);
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-mentor-pill:active { transform: scale(0.97); }
|
||||
.m-mentor-pill-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 2px;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: var(--action);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.m-mentor-grade {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.m-mentor-grade--a { background: var(--warning-soft); color: var(--warning); }
|
||||
.m-mentor-grade--b { background: var(--action-soft); color: var(--action); }
|
||||
.m-mentor-grade--c { background: var(--surface-muted); color: var(--text-secondary); }
|
||||
|
||||
/* ============== 导师抽屉 ============== */
|
||||
.m-mentor-drawer-body { padding-bottom: 16px; }
|
||||
.m-mentor-drawer-search {
|
||||
position: relative;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.m-mentor-drawer-search .m-form-field,
|
||||
.m-mentor-drawer-search.m-form-field {
|
||||
padding-left: 36px;
|
||||
}
|
||||
.m-mentor-drawer-search-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-tertiary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.m-mentor-drawer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.m-mentor-row {
|
||||
appearance: none;
|
||||
background: var(--surface);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 12px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 64px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-mentor-row:active { background: var(--surface-hover); }
|
||||
.m-mentor-row.is-current { background: var(--surface-selected); }
|
||||
.m-mentor-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||||
.m-mentor-row-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
|
||||
.m-mentor-row-tag { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.m-mentor-row-grade { margin-left: auto; }
|
||||
.m-mentor-row-check { color: var(--action); display: inline-flex; }
|
||||
|
||||
/* ============== 智能选股 ============== */
|
||||
.m-screener-stage {
|
||||
margin: 12px 12px 8px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.m-screener-stage-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
.m-screener-stage-label { font-size: 12px; color: var(--text-secondary); }
|
||||
.m-screener-stage-time { font-size: 11.5px; color: var(--text-tertiary); }
|
||||
.m-screener-stage-name { font-size: 15px; font-weight: 600; color: var(--action); }
|
||||
.m-screener-stage-conf { font-size: 12px; color: var(--text-tertiary); margin-left: 8px; }
|
||||
.m-screener-stage-reason {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m-screener-views {
|
||||
margin: 0 12px 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.m-screener-strategy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 12px 8px;
|
||||
padding: 0 12px;
|
||||
height: 44px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
appearance: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.m-screener-strategy:active { background: var(--surface-hover); }
|
||||
.m-screener-strategy-icon { color: var(--action); display: inline-flex; }
|
||||
.m-screener-strategy-name { font-size: 14px; font-weight: 600; }
|
||||
.m-screener-strategy-status { font-size: 12px; color: var(--text-tertiary); margin-left: auto; }
|
||||
.m-screener-strategy-chevron { color: var(--text-tertiary); display: inline-flex; }
|
||||
|
||||
.m-screener-foot {
|
||||
margin: 12px 12px 24px;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.m-screener-drawer-search {
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.m-screener-drawer-search .m-form-field,
|
||||
.m-screener-drawer-search.m-form-field {
|
||||
padding-left: 36px;
|
||||
}
|
||||
.m-screener-drawer-search-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-tertiary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.m-screener-drawer-cats {
|
||||
margin-bottom: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.m-screener-drawer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.m-screener-drawer-row {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 12px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 56px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.m-screener-drawer-row:active { background: var(--surface-hover); }
|
||||
.m-screener-drawer-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.m-strategy-status { font-size: 12px; color: var(--text-primary); }
|
||||
.m-strategy-status--warn { color: var(--warning); }
|
||||
.m-strategy-status--muted { color: var(--text-secondary); }
|
||||
.m-strategy-check { color: var(--action); display: inline-flex; }
|
||||
|
||||
.m-score-up { color: var(--market-up); font-weight: 600; }
|
||||
|
||||
/* 详情 Sheet 内嵌的选股 / 跟踪分组 */
|
||||
.m-detail-foot { margin-top: 16px; padding: 0 12px 16px; }
|
||||
.m-detail-group { margin-bottom: 16px; }
|
||||
.m-detail-group-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: var(--font-size-label);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.m-detail-group-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13.5px;
|
||||
gap: 12px;
|
||||
}
|
||||
.m-detail-group-label { color: var(--text-secondary); flex: 0 0 auto; }
|
||||
.m-detail-group-value { color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.m-detail-group-value.up { color: var(--market-up); }
|
||||
.m-detail-group-value.down { color: var(--market-down); }
|
||||
|
||||
.m-screener-detail-actions,
|
||||
.m-tracking-detail-actions { margin-top: 16px; padding: 0 4px; }
|
||||
.m-screener-detail-actions .m-btn-primary,
|
||||
.m-tracking-detail-actions .m-btn-primary { width: 100%; }
|
||||
|
||||
.m-btn-danger { background: var(--market-up); }
|
||||
.m-btn-danger:active { background: var(--market-up); transform: scale(0.97); }
|
||||
.m-btn-disabled,
|
||||
.m-btn-primary:disabled { background: var(--surface-muted); color: var(--text-secondary); cursor: not-allowed; transform: none; }
|
||||
|
||||
/* 确认抽屉 */
|
||||
.m-confirm-body { padding-bottom: 8px; }
|
||||
.m-confirm-text { font-size: 14px; color: var(--text-primary); line-height: 1.5; margin: 0 0 16px; }
|
||||
.m-confirm-actions { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 8px; }
|
||||
.m-confirm-actions .m-btn-cancel { background: var(--surface-muted); color: var(--text-primary); }
|
||||
.m-confirm-actions .m-btn-cancel:active { background: var(--surface-hover); }
|
||||
|
||||
/* ============== 策略跟踪 ============== */
|
||||
.m-strip--5 { grid-template-columns: repeat(5, 1fr); }
|
||||
@media (max-width: 360px) {
|
||||
.m-strip--5 .m-strip-value { font-size: 11px; }
|
||||
.m-strip--5 .m-strip-label { font-size: 9.5px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.m-rotation-chip:active,
|
||||
.m-dragon-card:active,
|
||||
.m-range-tab:active {
|
||||
.m-range-tab:active,
|
||||
.m-screener-strategy:active,
|
||||
.m-mentor-pill:active,
|
||||
.m-chat-send:active,
|
||||
.m-screener-drawer-row:active,
|
||||
.m-mentor-row:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user