Refine responsive input action visibility

This commit is contained in:
jxxghp
2026-08-06 08:21:49 +08:00
parent fd1bf8df7f
commit 8d18f82e68
6 changed files with 27 additions and 8 deletions

View File

@@ -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]"

View File

@@ -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]"

View File

@@ -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')"

View File

@@ -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')"

View 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')
})
})

View File

@@ -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;
}