建仓候选行:票名永不截断,维度标签与处置芯片作为整体放不下时换行靠右

上一版把票名和主题都设成可省略,窄栏下票名会被挤成一个字。改成票名不参与收缩,
主题吃剩余宽度、超长省略;三枚维度标签加处置芯片包成一个整体,一行放不下时整体换到
第二行靠右,标签不会被拆成两行。本机假数据预览:右栏 295 像素宽时,等待态的行一行放下,
带「拟建仓」芯片的行标签换到第二行;持仓表综合分析列三枚标签一行放下。

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
zlt 2026-09-15 11:02:02 +08:00
parent 8ff4ea3d8f
commit c3de056089
1 changed files with 18 additions and 10 deletions

View File

@ -351,6 +351,12 @@ body.dock-r:not(.r-fold) .side-r .strip{display:none;}
.sigrow2.old{opacity:.5;}
.sigrow2.clk{cursor:pointer;border-radius:4px;}
.sigrow2.clk:hover{background:rgba(64,120,220,.08);}
/* 建仓候选行 (2026-09-15): 票名永不截断; 主题吃剩余宽度、超长省略; 右侧「三枚维度标签 + 处置芯片」是一个整体,
放不下时整体换到第二行靠右, 不会把标签拆成两行、也不会把票名挤成一个字。 */
.sigrow2.clk{flex-wrap:wrap;row-gap:3px;}
.sigrow2.clk .nm{flex:none;overflow:visible;}
.sigrow2.clk .cat{flex:1 1 0;min-width:0;max-width:max-content;}
.sigrow2.clk .cand-r{flex:none;display:inline-flex;align-items:center;gap:4px;margin-left:auto;}
.lk{cursor:pointer;text-decoration:underline dotted;}
.lk:hover{color:var(--accent,#3a6ea5);}
.pin{font-size:10px;font-weight:700;color:var(--stop);background:var(--stop-weak);border-radius:4px;padding:0 4px;flex:none;}
@ -1292,16 +1298,18 @@ body.dock-r:not(.r-fold) .side-r .strip{display:none;}
<span class="muted mono t">第{{ r.rank }}</span>
<span class="nm" style="text-decoration:underline dotted">{{ r.name || nm(r.ts_code) }}</span>
<span class="cat" v-if="r.theme">{{ r.theme }}</span>
<span class="sp"></span>
<!-- 三枚维度标签 (2026-09-15): 文字是维度名, 颜色是立场, 与提议卡、抽屉同一套; 悬停看立场与依据。 -->
<template v-if="conOf(r.ts_code)">
<span class="dim" :class="dimCls(conOf(r.ts_code).fund)" :title="'基本面 ' + (conOf(r.ts_code).fund||'无读数') + (conOf(r.ts_code).overall ? ' · 质地' + conOf(r.ts_code).overall : '')">基本面</span>
<span class="dim" :class="dimCls(conOf(r.ts_code).tech)" :title="'技术面 ' + (conOf(r.ts_code).tech||'无读数') + (conOf(r.ts_code).phase ? ' · ' + conOf(r.ts_code).phase : '')">技术面</span>
<span class="dim" :class="dimCls(conOf(r.ts_code).timing)" :title="'择时 ' + (conOf(r.ts_code).timing||'无读数')">择时</span>
</template>
<!-- 等待态 (候选观察/技术面待开口/盘中确认中/择时待转多) 不占行内位置 (2026-09-15): 这一栏本来就是
还在评估的票, 原因进悬停; 只有拟建仓、系统已放弃这类有动作意义的才显示芯片。 -->
<span class="disp" v-if="dispOf(r.ts_code).cls !== 'wait'" :class="dispOf(r.ts_code).cls" style="padding:0 6px">{{ dispOf(r.ts_code).label }}</span>
<!-- 右侧整体 (2026-09-15): 三枚维度标签 + 处置芯片, 放不下时整体换行靠右, 样式见 .sigrow2.clk 那几行。 -->
<span class="cand-r">
<!-- 三枚维度标签: 文字是维度名, 颜色是立场, 与提议卡、抽屉同一套; 悬停看立场与依据。 -->
<template v-if="conOf(r.ts_code)">
<span class="dim" :class="dimCls(conOf(r.ts_code).fund)" :title="'基本面 ' + (conOf(r.ts_code).fund||'无读数') + (conOf(r.ts_code).overall ? ' · 质地' + conOf(r.ts_code).overall : '')">基本面</span>
<span class="dim" :class="dimCls(conOf(r.ts_code).tech)" :title="'技术面 ' + (conOf(r.ts_code).tech||'无读数') + (conOf(r.ts_code).phase ? ' · ' + conOf(r.ts_code).phase : '')">技术面</span>
<span class="dim" :class="dimCls(conOf(r.ts_code).timing)" :title="'择时 ' + (conOf(r.ts_code).timing||'无读数')">择时</span>
</template>
<!-- 等待态 (候选观察/技术面待开口/盘中确认中/择时待转多) 不占行内位置: 这一栏本来就是
还在评估的票, 原因进悬停; 只有拟建仓、系统已放弃这类有动作意义的才显示芯片。 -->
<span class="disp" v-if="dispOf(r.ts_code).cls !== 'wait'" :class="dispOf(r.ts_code).cls" style="padding:0 6px">{{ dispOf(r.ts_code).label }}</span>
</span>
</div>
<div class="muted" style="margin-top:6px;font-size:11.5px">
受益层级<span class="help" data-tip="这只票离主题多近:直接受益还是间接受益。上游的选股计划给的。">?</span>