|
@@ -91,14 +91,22 @@ import { SessionService } from '../../../core/session.service';
|
|
|
<p>调整全局字号(菜单、列表与对话正文同步),当前 {{ chatFont.size() }}px。</p>
|
|
<p>调整全局字号(菜单、列表与对话正文同步),当前 {{ chatFont.size() }}px。</p>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="font-scale">
|
|
<div class="font-scale">
|
|
|
|
|
+ <!--
|
|
|
|
|
+ 滑块值用**档位下标**(0..7)而不是字号 px(13..20)。
|
|
|
|
|
+ 这样滑块位置、轨道填充、刻度三者共用同一套等分坐标,
|
|
|
|
|
+ 拖动时手柄永远精确落在某个刻度上,不会出现
|
|
|
|
|
+ 「停在两个刻度中间」或「刻度和手柄对不上」。
|
|
|
|
|
+ 对外仍然以 px 形式落到 ChatFontService。
|
|
|
|
|
+ -->
|
|
|
<ui-slider
|
|
<ui-slider
|
|
|
label="字体大小"
|
|
label="字体大小"
|
|
|
- [min]="fontMin"
|
|
|
|
|
- [max]="fontMax"
|
|
|
|
|
|
|
+ [min]="0"
|
|
|
|
|
+ [max]="fontMaxIndex"
|
|
|
[step]="1"
|
|
[step]="1"
|
|
|
|
|
+ [marksEvenly]="true"
|
|
|
[marks]="fontMarks"
|
|
[marks]="fontMarks"
|
|
|
- [value]="chatFont.size()"
|
|
|
|
|
- (valueChange)="setChatFont($event)"
|
|
|
|
|
|
|
+ [value]="chatFont.index()"
|
|
|
|
|
+ (valueChange)="setChatFontIndex($event)"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -527,26 +535,42 @@ export class DkMinePage {
|
|
|
readonly chatFont = inject(ChatFontService);
|
|
readonly chatFont = inject(ChatFontService);
|
|
|
readonly fontMin = CHAT_FONT_SIZES[0];
|
|
readonly fontMin = CHAT_FONT_SIZES[0];
|
|
|
readonly fontMax = CHAT_FONT_SIZES[CHAT_FONT_SIZES.length - 1];
|
|
readonly fontMax = CHAT_FONT_SIZES[CHAT_FONT_SIZES.length - 1];
|
|
|
|
|
+ /** 档位下标上限(滑块用下标而非 px,见模板注释) */
|
|
|
|
|
+ readonly fontMaxIndex = CHAT_FONT_SIZES.length - 1;
|
|
|
/**
|
|
/**
|
|
|
- * 滑块刻度(2026-11-01 按参考稿定稿)。
|
|
|
|
|
|
|
+ * 滑块刻度(2026-11-01 定稿:**严格等分**)。
|
|
|
*
|
|
*
|
|
|
- * 6 个刻度、**每个都画短线**,只有第 1 / 2 / 6 个带文字(小 / 默认 / 大)。
|
|
|
|
|
- * 档位从 CHAT_FONT_SIZES 里按等距取样,保证刻度间距一致 ——
|
|
|
|
|
- * 直接写死数值会在改动字号档位时与滑块对不上。
|
|
|
|
|
|
|
+ * 🔴 刻度数必须等于**档位数**(8 档 → 8 个刻度),否则对不上:
|
|
|
|
|
+ * 滑块是 0..7 共 8 个位置,刻度若只放 6 个(0/3/4/5/6/7),
|
|
|
|
|
+ * 第 2 个刻度落在 3/7≈42.9% 而第 1、3 个在 0% 和 25%,
|
|
|
|
|
+ * 间距就会忽宽忽窄 —— 看起来完全不是「均分」。
|
|
|
|
|
+ * 现在每档一个刻度,8 个刻度严格等距,手柄永远落在刻度上。
|
|
|
*
|
|
*
|
|
|
- * 13 ─ 16 ─ 17 ─ 18 ─ 19 ─ 20
|
|
|
|
|
- * 小 默认 大
|
|
|
|
|
|
|
+ * 下标: 0 1 2 3 4 5 6 7
|
|
|
|
|
+ * 字号: 13 14 15 16 17 18 19 20
|
|
|
|
|
+ * 文字: 小 默认(i=6) 大
|
|
|
|
|
+ *
|
|
|
|
|
+ * 标签位置:小 = 第 1 格(下标 0)、默认 = 默认字号所在格、大 = 最后一格。
|
|
|
*/
|
|
*/
|
|
|
- readonly fontMarks: { value: number; label: string }[] = (() => {
|
|
|
|
|
- const picks = [0, 3, 4, 5, 6, 7];
|
|
|
|
|
- return picks.map((i, idx) => ({
|
|
|
|
|
- value: CHAT_FONT_SIZES[Math.min(i, CHAT_FONT_SIZES.length - 1)],
|
|
|
|
|
- label: idx === 0 ? '小' : idx === 1 ? '默认' : idx === picks.length - 1 ? '大' : '',
|
|
|
|
|
- }));
|
|
|
|
|
- })();
|
|
|
|
|
-
|
|
|
|
|
- setChatFont(px: unknown): void {
|
|
|
|
|
- if (typeof px === 'number') this.chatFont.set(px);
|
|
|
|
|
|
|
+ readonly fontMarks: { value: number; label: string }[] = CHAT_FONT_SIZES.map(
|
|
|
|
|
+ (_px, i) => ({
|
|
|
|
|
+ value: i,
|
|
|
|
|
+ label:
|
|
|
|
|
+ i === 0
|
|
|
|
|
+ ? '小'
|
|
|
|
|
+ : CHAT_FONT_SIZES[i] === DEFAULT_CHAT_FONT
|
|
|
|
|
+ ? '默认'
|
|
|
|
|
+ : i === CHAT_FONT_SIZES.length - 1
|
|
|
|
|
+ ? '大'
|
|
|
|
|
+ : '',
|
|
|
|
|
+ }),
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ /** 滑块给的是档位下标 → 换算成字号 px 落到服务 */
|
|
|
|
|
+ setChatFontIndex(index: unknown): void {
|
|
|
|
|
+ if (typeof index !== 'number') return;
|
|
|
|
|
+ const px = CHAT_FONT_SIZES[index];
|
|
|
|
|
+ if (px !== undefined) this.chatFont.set(px);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
readonly palette = inject(PaletteService);
|
|
readonly palette = inject(PaletteService);
|