fix(desktop): минимальный остаток — через WalletCard, чтобы тоже бежал

Карточка «Минимальный неснижаемый остаток» рисовалась вручную сырыми
canon-классами .wallet в обход WalletCard, поэтому marquee на неё не
распространялся (бежали только программные кошельки). Переведена на
<WalletCard neutral> — DRY + бегущая строка заголовка/подписи бесплатно.
WalletCard: program стал опциональным, добавлен neutral-вариант подсветки
иконки (--p-canvas-2/--p-ink-2) вместо акцента программы.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
coopops
2026-06-09 18:21:01 +00:00
parent 8d5ff83c05
commit e3f399c0e8
3 changed files with 37 additions and 27 deletions
@@ -1,8 +1,12 @@
export type WalletProgram = 'blagorost' | 'wallet' | 'generator';
export interface WalletCardProps {
/** Программа — задаёт акцент (--prog-blagorost / --prog-wallet / --prog-generator) */
program: WalletProgram;
/** Программа — задаёт акцент (--prog-blagorost / --prog-wallet / --prog-generator).
* Можно опустить вместе с `neutral` для непрограммной карточки (напр. мин. остаток). */
program?: WalletProgram;
/** Нейтральная подсветка иконки (--p-canvas-2 / --p-ink-2) вместо акцента программы.
* Для непрограммных сущностей — минимальный неснижаемый остаток и т.п. */
neutral?: boolean;
/** Заголовок карточки. Default по программе: blagorost → «Благорост», wallet → «Кошелёк», generator → «Генератор» */
title?: string;
/** Дополнительная подпись под заголовком */
@@ -69,13 +69,26 @@ const DEFAULT_ICONS: Record<WalletProgram, string> = {
generator: 'bolt',
};
const resolvedTitle = computed(() => props.title ?? DEFAULT_TITLES[props.program]);
const resolvedIcon = computed(() => props.icon ?? DEFAULT_ICONS[props.program]);
const resolvedTitle = computed(
() => props.title ?? (props.program ? DEFAULT_TITLES[props.program] : ''),
);
const resolvedIcon = computed(
() => props.icon ?? (props.program ? DEFAULT_ICONS[props.program] : 'savings'),
);
const progStyle = computed<CSSProperties>(() => ({
'--prog-bg': `var(--prog-${props.program}-soft)`,
'--prog-fg': `var(--prog-${props.program})`,
} as CSSProperties));
const progStyle = computed<CSSProperties>(() => {
// Нейтральная карточка (или без программы) — приглушённая иконка без акцента.
if (props.neutral || !props.program) {
return {
'--prog-bg': 'var(--p-canvas-2)',
'--prog-fg': 'var(--p-ink-2)',
} as CSSProperties;
}
return {
'--prog-bg': `var(--prog-${props.program}-soft)`,
'--prog-fg': `var(--prog-${props.program})`,
} as CSSProperties;
});
// Бегущая строка при переполнении. Если заголовок/подпись не влезают в свою
// колонку — вместо обрезки «…» текст плавно прокручивается туда-обратно, чтобы
@@ -1,21 +1,19 @@
<template lang="pug">
.wallet-programs(v-if='canonPrograms.length > 0 || minimumBalance')
//- Минимальный неснижаемый остаток — отдельная сущность пайщика
//- (паевой взнос). Та же canon-разметка .wallet, чтобы встать
//- в общую сетку, но с нейтральной подсветкой иконки. Первым,
//- (паевой взнос). Тот же WalletCard (нейтральный вариант), чтобы получить
//- общую сетку И бегущую строку при переполнении заголовка/подписи. Первым,
//- т.к. это базовая защита средств пайщика — раньше кошельков.
.wallet.wallet--minimum(v-if='minimumBalance')
span.wallet__icon
q-icon(name='savings')
.wallet__main
.wallet__title(title='Минимальный неснижаемый остаток') Минимальный неснижаемый остаток
.wallet__sub(title='Возвращается при выходе из кооператива') Возвращается при выходе из кооператива
.wallet__amount
.wallet__metric
.wallet__metric-val
| {{ minimumBalance.amount }}
span.ccy &nbsp;{{ minimumBalance.symbol }}
.wallet__metric-label Зарезервировано
WalletCard(
v-if='minimumBalance',
neutral,
icon='savings',
title='Минимальный неснижаемый остаток',
subtitle='Возвращается при выходе из кооператива',
:balance='minimumBalance.amount',
:symbol='minimumBalance.symbol',
balance-label='Зарезервировано'
)
WalletCard(
v-for='entry in canonPrograms',
@@ -119,9 +117,4 @@ const minimumBalance = computed<MinimumBalance | undefined>(() => {
flex-direction: column;
gap: var(--p-3, 12px);
}
.wallet--minimum {
--prog-bg: var(--p-canvas-2);
--prog-fg: var(--p-ink-2);
}
</style>