fix: 修复整理历史筛选框和自动分类弹窗对齐

This commit is contained in:
jxxghp
2026-09-05 22:57:58 +08:00
parent 12b047330e
commit e6d11030a9
5 changed files with 54 additions and 16 deletions
@@ -69,7 +69,7 @@ function close(): void {
</VCardText> </VCardText>
<VDivider /> <VDivider />
<VCardActions> <VCardActions class="classification-help-dialog__actions">
<VSpacer /> <VSpacer />
<VBtn color="primary" variant="tonal" prepend-icon="mdi-check" @click="close"> <VBtn color="primary" variant="tonal" prepend-icon="mdi-check" @click="close">
{{ t('setting.classification.helpClose') }} {{ t('setting.classification.helpClose') }}
@@ -80,6 +80,10 @@ function close(): void {
</template> </template>
<style scoped> <style scoped>
.classification-help-dialog__actions {
padding: 16px 24px;
}
.classification-help-dialog__content { .classification-help-dialog__content {
display: grid; display: grid;
gap: 0; gap: 0;
@@ -147,6 +151,10 @@ function close(): void {
} }
@media (max-width: 599px) { @media (max-width: 599px) {
.classification-help-dialog__actions {
padding-inline: 14px;
}
.classification-help-dialog__content { .classification-help-dialog__content {
padding-inline: 14px; padding-inline: 14px;
} }
+15 -6
View File
@@ -1649,7 +1649,7 @@ onUnmounted(() => {
:placeholder="t('transferHistory.searchPlaceholder')" :placeholder="t('transferHistory.searchPlaceholder')"
:aria-label="t('transferHistory.searchPlaceholder')" :aria-label="t('transferHistory.searchPlaceholder')"
prepend-inner-icon="mdi-magnify" prepend-inner-icon="mdi-magnify"
variant="plain" variant="outlined"
single-line single-line
hide-details hide-details
clearable clearable
@@ -1661,7 +1661,7 @@ onUnmounted(() => {
item-value="value" item-value="value"
:prepend-inner-icon="currentStatusFilter.icon" :prepend-inner-icon="currentStatusFilter.icon"
density="compact" density="compact"
variant="plain" variant="outlined"
hide-details hide-details
class="transfer-history-desktop-status" class="transfer-history-desktop-status"
:aria-label="t('transferHistory.statusFilter.label')" :aria-label="t('transferHistory.statusFilter.label')"
@@ -2245,22 +2245,31 @@ onUnmounted(() => {
box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.12); box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.12);
} }
.transfer-history-desktop-filter-group :deep(.v-input) { // 当前样式未 scoped,直接限定组合框后代,保留 outlined 控件的居中和图标留白。
.transfer-history-desktop-filter-group .v-input {
grid-template-rows: 1fr;
min-inline-size: 0; min-inline-size: 0;
margin: 0; margin: 0;
} }
.transfer-history-desktop-filter-group :deep(.v-field) { .transfer-history-desktop-filter-group .v-input .v-field {
border-radius: 0; border-radius: 0;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
} }
.transfer-history-desktop-filter-group :deep(.v-field__outline), .transfer-history-desktop-filter-group .v-field__outline,
.transfer-history-desktop-filter-group :deep(.v-field__overlay) { .transfer-history-desktop-filter-group .v-field__overlay {
display: none; display: none;
} }
// 组合框随工具栏拉高时,文字行与两侧图标仍共用同一条中心线。
.transfer-history-desktop-filter-group .v-field__field {
align-items: center;
}
.transfer-history-desktop-search { .transfer-history-desktop-search {
flex: 1 1 auto; flex: 1 1 auto;
min-inline-size: 12rem; min-inline-size: 12rem;
@@ -455,7 +455,6 @@ describe('TransferHistoryView', () => {
expect(transferHistorySource).toContain('class="transfer-history-desktop-filter-group"') expect(transferHistorySource).toContain('class="transfer-history-desktop-filter-group"')
expect(transferHistorySource).toContain('class="text-disabled transfer-history-desktop-search"') expect(transferHistorySource).toContain('class="text-disabled transfer-history-desktop-search"')
expect(transferHistorySource).toContain('class="transfer-history-desktop-status"') expect(transferHistorySource).toContain('class="transfer-history-desktop-status"')
expect(transferHistorySource).toContain('variant="plain"')
expect(transferHistorySource).toContain('transfer-history-desktop-filter-group:focus-within') expect(transferHistorySource).toContain('transfer-history-desktop-filter-group:focus-within')
expect(transferHistorySource).toContain('border-inline-start: 1px solid') expect(transferHistorySource).toContain('border-inline-start: 1px solid')
expect(transferHistorySource).not.toContain(':label="t(\'transferHistory.statusFilter.label\')"') expect(transferHistorySource).not.toContain(':label="t(\'transferHistory.statusFilter.label\')"')
@@ -467,6 +466,27 @@ describe('TransferHistoryView', () => {
expect(mobileTitlebarSource).not.toContain('settings-icon-button') expect(mobileTitlebarSource).not.toContain('settings-icon-button')
}) })
it('keeps native outlined alignment and icon insets inside the shared desktop border', () => {
const desktopFilterSource = transferHistorySource.slice(
transferHistorySource.indexOf('class="transfer-history-desktop-filter-group"'),
transferHistorySource.indexOf('<VCol cols="4" md="4"'),
)
expect(desktopFilterSource.match(/variant="outlined"/g)).toHaveLength(2)
expect(desktopFilterSource).not.toContain('variant="plain"')
expect(transferHistorySource).toContain('.transfer-history-desktop-filter-group .v-input .v-field {')
expect(transferHistorySource).toContain(
'.transfer-history-desktop-filter-group .v-input {\n grid-template-rows: 1fr;',
)
expect(transferHistorySource).toContain(
'.transfer-history-desktop-filter-group .v-field__outline,\n.transfer-history-desktop-filter-group .v-field__overlay {\n display: none;',
)
expect(transferHistorySource).not.toContain('.transfer-history-desktop-filter-group :deep(')
expect(transferHistorySource).toContain(
'.transfer-history-desktop-filter-group .v-field__field {\n align-items: center;',
)
})
it('selects a mobile status from the titlebar dropdown and refreshes with the explicit status query', async () => { it('selects a mobile status from the titlebar dropdown and refreshes with the explicit status query', async () => {
mocks.desktop = false mocks.desktop = false
const requests: Array<Record<string, unknown>> = [] const requests: Array<Record<string, unknown>> = []
@@ -464,12 +464,8 @@ watch(analysisTab, tab => {
{{ t('setting.classification.unsaved') }} {{ t('setting.classification.unsaved') }}
</VChip> </VChip>
</div> </div>
<VBtn <VBtn icon variant="text" :aria-label="t('setting.classification.helpButton')" @click="helpDialog = true">
icon="mdi-help-circle-outline" <VIcon icon="mdi-help-circle-outline" />
variant="text"
:aria-label="t('setting.classification.helpButton')"
@click="helpDialog = true"
>
<VTooltip activator="parent" location="bottom"> <VTooltip activator="parent" location="bottom">
{{ t('setting.classification.helpButton') }} {{ t('setting.classification.helpButton') }}
</VTooltip> </VTooltip>
@@ -719,7 +715,7 @@ watch(analysisTab, tab => {
.classification-settings__header-actions { .classification-settings__header-actions {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 0.5rem; gap: 0.5rem;
} }
@@ -355,7 +355,9 @@ describe('AccountSettingClassification', () => {
const user = userEvent.setup() const user = userEvent.setup()
await renderWithProviders(AccountSettingClassification) await renderWithProviders(AccountSettingClassification)
await user.click(await screen.findByRole('button', { name: '查看自动分类帮助' })) const helpButton = await screen.findByRole('button', { name: '查看自动分类帮助' })
expect(helpButton.querySelector('.v-icon')).toBeInTheDocument()
await user.click(helpButton)
const dialog = await screen.findByRole('dialog') const dialog = await screen.findByRole('dialog')
expect(dialog).toHaveTextContent('自动分类使用说明') expect(dialog).toHaveTextContent('自动分类使用说明')
@@ -363,6 +365,9 @@ describe('AccountSettingClassification', () => {
expect(dialog).toHaveTextContent('预览分类结果') expect(dialog).toHaveTextContent('预览分类结果')
expect(dialog).toHaveTextContent('查看影响范围') expect(dialog).toHaveTextContent('查看影响范围')
expect(dialog).toHaveTextContent('查看历史和回退') expect(dialog).toHaveTextContent('查看历史和回退')
expect(
screen.getByRole('button', { name: '知道了' }).closest('.classification-help-dialog__actions'),
).not.toBeNull()
}) })
it('replaces category, fallback, and rule slices without losing the rest of the draft', async () => { it('replaces category, fallback, and rule slices without losing the rest of the draft', async () => {