qak2019
/
cents
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rearrange quick entry metadata

This commit is contained in:
openclaw 2026-07-23 00:13:38 +08:00
parent ad62aac6af
commit 7747323588
2 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/web/src/components/QuickEntryDrawer.vue
View File

@ -59,6 +59,7 @@ const selectedParent = computed(() => categoryPath.value[0]);
const categoryPathLabel = computed(() =>
[typeOption.value.label, ...categoryPath.value.map((category) => category.label)].join(">"),
);
const categoryDisplayLabel = computed(() => selectedCategory.value?.label ?? typeOption.value.label);
const calculatedAmount = computed(() => evaluateExpression(expression.value));
const hasCalculation = computed(() => /[+-]/.test(expression.value));
const calculationLabel = computed(() => expression.value.replaceAll("-", "−").replaceAll("+", " + ").replaceAll("−", " − "));
@ -377,24 +378,12 @@ function saveEntry() {
<strong class="amount-value">{{ displayAmount }}</strong>
</div>
<span v-if="hasCalculation" class="calculation-line">{{ calculationLabel }}</span>
<button class="quick-ledger-target" type="button" @click="openLedgerPicker">
<BookOpen :size="13" />
<span>记入 {{ selectedLedgerLabel }}</span>
<ChevronDown :size="13" />
</button>
</div>
<button class="header-date-button" :class="{ invalid: !occurredAtValid }" type="button" :aria-invalid="!occurredAtValid" @click="openDatePicker">
<CalendarDays :size="16" />
<span>{{ dateLabel }}</span>
<button class="quick-ledger-target" type="button" @click="openLedgerPicker">
<BookOpen :size="14" />
<span>记入 {{ selectedLedgerLabel }}</span>
<ChevronDown :size="13" />
</button>
<input
ref="dateInput"
v-model="occurredAt"
class="native-date-input"
type="datetime-local"
aria-label="发生时间"
tabindex="-1"
/>
</header>
<div class="entry-meta-row">
@ -409,6 +398,19 @@ function saveEntry() {
/>
</label>
<button class="header-date-button" :class="{ invalid: !occurredAtValid }" type="button" :aria-invalid="!occurredAtValid" @click="openDatePicker">
<CalendarDays :size="15" />
<span>{{ dateLabel }}</span>
</button>
<input
ref="dateInput"
v-model="occurredAt"
class="native-date-input"
type="datetime-local"
aria-label="发生时间"
tabindex="-1"
/>
<div class="category-selector-anchor" :class="{ 'selector-open': selectorOpen }">
<button
type="button"
@ -420,7 +422,7 @@ function saveEntry() {
>
<Check v-if="selectorOpen" :size="22" />
<component v-else :is="selectedCategory?.icon ?? typeOption.icon" :size="17" />
<span>{{ selectorOpen ? "确定" : categoryPathLabel }}</span>
<span>{{ selectorOpen ? "确定" : categoryDisplayLabel }}</span>
</button>
<Transition name="coordinate-selector">

21
apps/web/src/styles.css
View File

@ -660,14 +660,14 @@ input:focus-visible {
.quick-ledger-target {
position: relative;
width: max-content;
max-width: 190px;
min-height: 23px;
max-width: min(190px, 48vw);
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 4px;
overflow: hidden;
border-radius: 6px;
padding: 2px 5px;
padding: 0 8px;
background: #eaf6f3;
color: #087f72;
font-size: 11px;
@ -737,7 +737,7 @@ input:focus-visible {
.entry-meta-row {
height: 56px;
display: grid;
grid-template-columns: minmax(90px, 1fr) auto;
grid-template-columns: minmax(64px, 1fr) auto auto;
align-items: center;
gap: 8px;
border-top: 1px solid #e4ece9;
@ -855,7 +855,7 @@ input:focus-visible {
.meta-category-button {
position: relative;
z-index: 3;
max-width: min(190px, 48vw);
max-width: 120px;
min-height: 32px;
display: inline-flex;
align-items: center;
@ -1380,17 +1380,22 @@ input:focus-visible {
}
.entry-meta-row {
grid-template-columns: minmax(76px, 1fr) auto;
gap: 6px;
grid-template-columns: minmax(54px, 1fr) auto auto;
gap: 5px;
padding-right: 12px;
padding-left: 12px;
}
.meta-category-button {
max-width: 48vw;
max-width: 92px;
}
.header-date-button {
padding: 0 6px;
}
.quick-ledger-target {
max-width: 46vw;
padding: 0 7px;
}