mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-08 17:26:41 +08:00
fix: 修复整理历史筛选框和自动分类弹窗对齐
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user