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>
<VDivider />
<VCardActions>
<VCardActions class="classification-help-dialog__actions">
<VSpacer />
<VBtn color="primary" variant="tonal" prepend-icon="mdi-check" @click="close">
{{ t('setting.classification.helpClose') }}
@@ -80,6 +80,10 @@ function close(): void {
</template>
<style scoped>
.classification-help-dialog__actions {
padding: 16px 24px;
}
.classification-help-dialog__content {
display: grid;
gap: 0;
@@ -147,6 +151,10 @@ function close(): void {
}
@media (max-width: 599px) {
.classification-help-dialog__actions {
padding-inline: 14px;
}
.classification-help-dialog__content {
padding-inline: 14px;
}
+15 -6
View File
@@ -1649,7 +1649,7 @@ onUnmounted(() => {
:placeholder="t('transferHistory.searchPlaceholder')"
:aria-label="t('transferHistory.searchPlaceholder')"
prepend-inner-icon="mdi-magnify"
variant="plain"
variant="outlined"
single-line
hide-details
clearable
@@ -1661,7 +1661,7 @@ onUnmounted(() => {
item-value="value"
:prepend-inner-icon="currentStatusFilter.icon"
density="compact"
variant="plain"
variant="outlined"
hide-details
class="transfer-history-desktop-status"
:aria-label="t('transferHistory.statusFilter.label')"
@@ -2245,22 +2245,31 @@ onUnmounted(() => {
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;
margin: 0;
}
.transfer-history-desktop-filter-group :deep(.v-field) {
.transfer-history-desktop-filter-group .v-input .v-field {
border-radius: 0;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: transparent !important;
box-shadow: none !important;
}
.transfer-history-desktop-filter-group :deep(.v-field__outline),
.transfer-history-desktop-filter-group :deep(.v-field__overlay) {
.transfer-history-desktop-filter-group .v-field__outline,
.transfer-history-desktop-filter-group .v-field__overlay {
display: none;
}
// 组合框随工具栏拉高时,文字行与两侧图标仍共用同一条中心线。
.transfer-history-desktop-filter-group .v-field__field {
align-items: center;
}
.transfer-history-desktop-search {
flex: 1 1 auto;
min-inline-size: 12rem;
@@ -455,7 +455,6 @@ describe('TransferHistoryView', () => {
expect(transferHistorySource).toContain('class="transfer-history-desktop-filter-group"')
expect(transferHistorySource).toContain('class="text-disabled transfer-history-desktop-search"')
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('border-inline-start: 1px solid')
expect(transferHistorySource).not.toContain(':label="t(\'transferHistory.statusFilter.label\')"')
@@ -467,6 +466,27 @@ describe('TransferHistoryView', () => {
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 () => {
mocks.desktop = false
const requests: Array<Record<string, unknown>> = []
@@ -464,12 +464,8 @@ watch(analysisTab, tab => {
{{ t('setting.classification.unsaved') }}
</VChip>
</div>
<VBtn
icon="mdi-help-circle-outline"
variant="text"
:aria-label="t('setting.classification.helpButton')"
@click="helpDialog = true"
>
<VBtn icon variant="text" :aria-label="t('setting.classification.helpButton')" @click="helpDialog = true">
<VIcon icon="mdi-help-circle-outline" />
<VTooltip activator="parent" location="bottom">
{{ t('setting.classification.helpButton') }}
</VTooltip>
@@ -719,7 +715,7 @@ watch(analysisTab, tab => {
.classification-settings__header-actions {
display: flex;
align-items: flex-start;
align-items: center;
gap: 0.5rem;
}
@@ -355,7 +355,9 @@ describe('AccountSettingClassification', () => {
const user = userEvent.setup()
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')
expect(dialog).toHaveTextContent('自动分类使用说明')
@@ -363,6 +365,9 @@ describe('AccountSettingClassification', () => {
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 () => {