施工(HEL-105): 手机端第四批 P3b 我的复盘五页——自选股/交易日志/每日复盘/个股笔记/提醒中心
- 新增 review 五页路由与渲染（COMPLEX_PAGES/LOADERS 注册 setupReviewPage/loadReview） - 自选股：颜色圆点+关注分列表、无排序例外、点行双图详情、移出自选本地同步 - 交易日志：五格汇总条、动作徽标、盈亏红绿、详情 Sheet 编辑/删除、全屏表单（13 字段） - 每日复盘：查看态三卡+历史复盘分组+日期切换、全屏编辑表单（三 textarea） - 个股笔记：按股票分组列表、详情抽屉、新增笔记页（股票搜索选择器） - 提醒中心：类型徽标/未读/到期规则、全部已读、新增提醒抽屉、关联股票详情 - 表单控件族（text/textarea/number/date/胶囊组/股票搜索）、字数统计、必填校验、提交条贴键盘 - 图标补充 check/check-check/star/scroll-text/calendar-check/sticky-note/bell - 全屏表单返回拦截（capture 阶段）与放弃编辑确认；零新依赖、仅动 m/ 前端 Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
施工员
@@ -2751,7 +2751,380 @@
|
||||
.m-mentor-pill:active,
|
||||
.m-chat-send:active,
|
||||
.m-screener-drawer-row:active,
|
||||
.m-mentor-row:active {
|
||||
.m-mentor-row:active,
|
||||
.m-seg-opt:active,
|
||||
.m-note-card:active,
|
||||
.m-alert-row:active,
|
||||
.m-daily-history-row:active,
|
||||
.m-stock-picker-row:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============== 我的复盘（P3b） ============== */
|
||||
.m-num-strong { font-weight: 600; }
|
||||
.m-cell-text--empty { color: var(--text-tertiary); }
|
||||
|
||||
/* 自选股：颜色圆点标记 */
|
||||
.m-stock--watch { flex-direction: row; align-items: center; gap: 8px; }
|
||||
.m-stock-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
|
||||
.m-stock-copy .m-stock-name { max-width: 100%; }
|
||||
.m-watch-dot { flex: 0 0 auto; width: 4px; height: 14px; border-radius: 999px; }
|
||||
.m-watch-dot--red { background: var(--market-up); }
|
||||
.m-watch-dot--blue { background: var(--action); }
|
||||
.m-watch-dot--green { background: var(--market-down); }
|
||||
.m-watch-dot--amber { background: var(--warning); }
|
||||
|
||||
/* 交易动作徽标 */
|
||||
.m-trade-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.m-trade-badge--up { background: var(--market-up-soft); color: var(--market-up); }
|
||||
.m-trade-badge--down { background: var(--market-down-soft); color: var(--market-down); }
|
||||
.m-trade-badge--flat { background: var(--surface-muted); color: var(--text-secondary); }
|
||||
|
||||
/* 详情 Sheet 内的通用正文块 */
|
||||
.m-detail-text {
|
||||
padding: 10px 12px;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 交易详情 */
|
||||
.m-trade-detail { padding: 0 12px; }
|
||||
.m-trade-detail-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 9px 12px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-size: 13.5px;
|
||||
gap: 12px;
|
||||
}
|
||||
.m-trade-detail-label { color: var(--text-secondary); flex: 0 0 auto; }
|
||||
.m-trade-detail-value { color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; word-break: break-word; }
|
||||
.m-trade-detail-value.up { color: var(--market-up); }
|
||||
.m-trade-detail-value.down { color: var(--market-down); }
|
||||
|
||||
/* 每日复盘 */
|
||||
.m-daily-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 2px 8px;
|
||||
}
|
||||
.m-daily-date { font-size: 13px; color: var(--text-secondary); }
|
||||
.m-daily-edit {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--action);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
}
|
||||
.m-daily-edit:active { opacity: 0.7; }
|
||||
.m-daily-card {
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
}
|
||||
.m-daily-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
|
||||
.m-daily-card-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
|
||||
.m-daily-delete {
|
||||
margin: 8px 2px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--market-up);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
height: auto;
|
||||
}
|
||||
.m-daily-delete:active { opacity: 0.7; }
|
||||
.m-daily-history { margin: 4px 0 16px; }
|
||||
.m-daily-history-list { display: flex; flex-direction: column; }
|
||||
.m-daily-history-row {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 2px;
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-daily-history-row:active { background: var(--surface-hover); }
|
||||
.m-daily-history-row.is-active { background: var(--surface-selected); }
|
||||
.m-daily-history-date { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; }
|
||||
.m-daily-history-line { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* 个股笔记 */
|
||||
.m-note-group { margin-bottom: 16px; }
|
||||
.m-note-group-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
height: 40px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.m-note-group-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
|
||||
.m-note-group-code { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
|
||||
.m-note-group-count { margin-left: auto; font-size: 12px; color: var(--text-tertiary); }
|
||||
.m-note-group-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.m-note-card {
|
||||
appearance: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.m-note-card:active { background: var(--surface-hover); transform: scale(0.99); }
|
||||
.m-note-card-date { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
|
||||
.m-note-card-body {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.m-note-card-plan {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.m-note-detail-block { margin-bottom: 16px; }
|
||||
|
||||
/* 提醒中心 */
|
||||
.m-alert-tabs { margin-bottom: 12px; }
|
||||
.m-alert-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--market-up);
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.m-alert-list { display: flex; flex-direction: column; }
|
||||
.m-alert-row {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 12px 4px;
|
||||
min-height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
.m-alert-row:active { background: var(--surface-hover); }
|
||||
.m-alert-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
|
||||
.m-alert-row-top { display: flex; align-items: center; gap: 8px; }
|
||||
.m-alert-row-date { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
|
||||
.m-alert-row-title { font-size: 14px; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
|
||||
.m-alert-row.is-unread .m-alert-row-title { font-weight: 600; }
|
||||
.m-alert-row.is-read .m-alert-row-title { color: var(--text-secondary); font-weight: 400; }
|
||||
.m-alert-unread-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--action); }
|
||||
.m-alert-row-summary {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.m-alert-row-chevron { flex: 0 0 auto; color: var(--text-tertiary); display: inline-flex; }
|
||||
.m-alert-kind {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.m-alert-kind--action { background: var(--action-soft); color: var(--action); }
|
||||
.m-alert-kind--warn { background: var(--warning-soft); color: var(--warning); }
|
||||
.m-alert-kind--down { background: var(--market-down-soft); color: var(--market-down); }
|
||||
.m-alert-detail { padding: 0 4px; }
|
||||
.m-alert-detail-title { margin: 12px 0 4px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
|
||||
.m-alert-detail-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
|
||||
.m-alert-stock {
|
||||
appearance: none;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--surface);
|
||||
color: var(--action);
|
||||
border-radius: 999px;
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
margin: 8px 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-alert-stock:active { background: var(--action-soft); }
|
||||
|
||||
/* 表单控件族 */
|
||||
.m-form-field textarea {
|
||||
min-height: 88px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
}
|
||||
.m-form-field textarea:focus { outline: none; border-color: var(--action); }
|
||||
.m-form-field input[type="date"] { padding-right: 36px; }
|
||||
.m-form-field .m-field-req {
|
||||
font-style: normal;
|
||||
color: var(--market-up);
|
||||
margin-left: 2px;
|
||||
}
|
||||
.m-field-textarea { display: flex; flex-direction: column; gap: 2px; }
|
||||
.m-form-field .m-field-counter { font-size: 11.5px; color: var(--text-tertiary); text-align: right; }
|
||||
.m-form-field .m-field-error { font-size: 12px; color: var(--market-up); }
|
||||
.m-form-field.is-invalid input,
|
||||
.m-form-field.is-invalid textarea { border-color: var(--market-up); }
|
||||
.m-input-unit { position: relative; display: flex; align-items: center; }
|
||||
.m-input-unit input { width: 100%; padding-right: 40px; }
|
||||
.m-form-field .m-input-unit-suffix {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
}
|
||||
.m-input-date { position: relative; display: flex; align-items: center; }
|
||||
.m-input-date input { width: 100%; }
|
||||
.m-input-date input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 100%; height: 100%; cursor: pointer; }
|
||||
.m-form-field .m-input-date-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-tertiary);
|
||||
display: inline-flex;
|
||||
pointer-events: none;
|
||||
}
|
||||
.m-seg { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.m-seg-opt {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-seg-opt:active { transform: scale(0.97); }
|
||||
.m-seg-opt.active {
|
||||
background: var(--action-soft);
|
||||
border-color: var(--action);
|
||||
color: var(--action);
|
||||
font-weight: 600;
|
||||
}
|
||||
.m-stock-picker { position: relative; }
|
||||
.m-stock-picker-results {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--elevation-float);
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
}
|
||||
.m-stock-picker-row {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-stock-picker-row:active { background: var(--surface-hover); }
|
||||
.m-stock-picker-row-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
|
||||
.m-stock-picker-row-sub { font-size: 11.5px; color: var(--text-tertiary); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.m-stock-picker-row-code { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
|
||||
.m-stock-picker-empty { padding: 12px; font-size: 13px; color: var(--text-tertiary); text-align: center; }
|
||||
.m-stock-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
}
|
||||
.m-stock-chip-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
|
||||
.m-stock-chip-code { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
|
||||
.m-stock-chip-clear {
|
||||
margin-left: auto;
|
||||
color: var(--text-tertiary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
padding: 4px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-stock-chip-clear:active { color: var(--text-primary); }
|
||||
|
||||
/* 全屏表单页 */
|
||||
.m-form-body { padding: 12px 12px 16px; }
|
||||
.m-form-bar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 12px calc(8px + var(--mobile-safe-bottom));
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
transform: translateY(calc(-1 * var(--m-keyboard-inset, 0px)));
|
||||
}
|
||||
|
||||
+1277
-1
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user