mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-08-13 17:44:52 +08:00
Refine responsive input action visibility
This commit is contained in:
@@ -299,7 +299,6 @@ onMounted(() => {
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="mediaId"
|
||||
class="app-responsive-input--keep-append-action"
|
||||
:label="mediaIdLabel"
|
||||
:placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
|
||||
:rules="[numberValidator]"
|
||||
|
||||
@@ -241,7 +241,6 @@ onMounted(() => {
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="mediaId"
|
||||
class="app-responsive-input--keep-append-action"
|
||||
:label="mediaIdLabel"
|
||||
:placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
|
||||
:rules="[numberValidator]"
|
||||
|
||||
@@ -1514,7 +1514,6 @@ onUnmounted(() => {
|
||||
<VCol cols="12" md="4">
|
||||
<VTextField
|
||||
v-model="transferForm.media_id"
|
||||
class="app-responsive-input--keep-append-action"
|
||||
:disabled="transferForm.type_name === ''"
|
||||
:label="mediaIdLabel"
|
||||
:placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
|
||||
|
||||
@@ -147,7 +147,6 @@ watch(mediaSource, () => {
|
||||
<VCol cols="12" md="4">
|
||||
<VTextField
|
||||
v-model="mediaId"
|
||||
class="app-responsive-input--keep-append-action"
|
||||
:disabled="mediaType === ''"
|
||||
:label="mediaIdLabel"
|
||||
:placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
|
||||
|
||||
19
src/styles/__tests__/responsiveInputActions.spec.ts
Normal file
19
src/styles/__tests__/responsiveInputActions.spec.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { readFileSync } from 'node:fs'
|
||||
import { resolve } from 'node:path'
|
||||
import { cwd } from 'node:process'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
describe('mobile responsive input actions', () => {
|
||||
it('keeps functional trailing controls without restoring decorative icons', () => {
|
||||
const commonStyles = readFileSync(resolve(cwd(), 'src/styles/common.scss'), 'utf8')
|
||||
|
||||
expect(commonStyles).toMatch(
|
||||
/\.app-responsive-input__native \.v-field__clearable,\s*\.app-responsive-input__native\s+\.v-field__append-inner:has\([\s\S]*?\)\s*\{\s*display: inline-flex;/,
|
||||
)
|
||||
expect(commonStyles).toContain("[role='button']:not(")
|
||||
expect(commonStyles).toContain('.v-select__menu-icon')
|
||||
expect(commonStyles).toContain('.v-autocomplete__menu-icon')
|
||||
expect(commonStyles).toContain('.v-combobox__menu-icon')
|
||||
expect(commonStyles).not.toContain('app-responsive-input--keep-append-action')
|
||||
})
|
||||
})
|
||||
@@ -543,16 +543,20 @@ html[data-theme-radius='extra'] {
|
||||
min-inline-size: 0;
|
||||
}
|
||||
|
||||
// 移动录入行只保留值本身,统一移除字段内部的装饰与操作图标。
|
||||
// 移动录入行隐藏字段内部的装饰图标,避免挤压右栏中的实际内容。
|
||||
.app-responsive-input__native .v-field__prepend-inner,
|
||||
.app-responsive-input__native .v-field__append-inner,
|
||||
.app-responsive-input__native .v-field__clearable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 少数字段的内嵌图标承担了唯一的交互入口(如按名称搜索媒体编号),
|
||||
// 不是纯装饰,移动端也需要保留可点击。
|
||||
.app-responsive-input--keep-append-action .app-responsive-input__native .v-field__append-inner {
|
||||
// 清除控件与具备按钮语义的末端操作仍需可用;下拉箭头仅重复整字段操作,不单独展示。
|
||||
.app-responsive-input__native .v-field__clearable,
|
||||
.app-responsive-input__native
|
||||
.v-field__append-inner:has(
|
||||
button,
|
||||
[role='button']:not(.v-select__menu-icon, .v-autocomplete__menu-icon, .v-combobox__menu-icon)
|
||||
) {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user