Improve responsive input layouts and mobile control widths

src/plugins/vuetify/AppInput.ts

@@ -54,6 +54,21 @@ function mergeDescribedBy(...values: unknown[]) {
   )].join(' ')
 }
 
+/**
+ * 将移动端右栏宽度参数转换为可用的 CSS 长度。
+ */
+function normalizeMobileControlWidth(value: number | string | undefined) {
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value)) return undefined
+
+    return `${Math.min(100, Math.max(0, value))}%`
+  }
+
+  if (typeof value !== 'string') return undefined
+
+  return value.trim() || undefined
+}
+
 /**
  * 为原生 Vuetify 录入组件创建小屏两栏适配器，桌面端保持原组件渲染路径。
  */
@@ -66,6 +81,10 @@ export function createResponsiveInputAdapter(component: Component, options: Resp
         type: Boolean,
         default: true,
       },
+      mobileControlWidth: {
+        type: [Number, String],
+        default: undefined,
+      },
     },
     /**
      * 根据 Vuetify 断点切换布局，并保留原生控件常用的公开方法。
@@ -107,6 +126,7 @@ export function createResponsiveInputAdapter(component: Component, options: Resp
         const hintId = `${controlId}-hint`
         const rootClass = attrs.class
         const rootStyle = attrs.style
+        const mobileControlWidth = normalizeMobileControlWidth(props.mobileControlWidth)
         const controlAttrs: Record<string, unknown> = { ...attrs }
 
         for (const key of ['class', 'hint', 'label', 'persistent-hint', 'persistentHint', 'style']) {
@@ -156,7 +176,12 @@ export function createResponsiveInputAdapter(component: Component, options: Resp
             },
             rootClass,
           ],
-          style: rootStyle,
+          style: [
+            rootStyle,
+            mobileControlWidth
+              ? { '--app-responsive-input-control-width': mobileControlWidth }
+              : undefined,
+          ],
         }, [
           h('div', { class: 'app-responsive-input__meta' }, [
             h('label', { class: 'app-responsive-input__label', for: controlId }, labelContent),