feat: enhance BaseFolderItemSelector dialog for mobile responsiveness and improved styling

fix: #5159

dashboard/src/components/folder/BaseFolderItemSelector.vue

@@ -14,8 +14,13 @@
         </div>
 
         <!-- 选择对话框 -->
-        <v-dialog v-model="dialog" max-width="1000px" min-width="800px">
-            <v-card class="selector-dialog-card">
+        <v-dialog
+            v-model="dialog"
+            :max-width="$vuetify.display.smAndDown ? undefined : '1000px'"
+            :min-width="$vuetify.display.smAndDown ? undefined : '800px'"
+            scrollable
+        >
+            <v-card class="selector-dialog-card" :class="{ 'selector-dialog-card-mobile': $vuetify.display.smAndDown }">
                 <v-card-title class="dialog-title d-flex align-center py-4 px-5">
                     <v-icon class="mr-3" color="primary">mdi-account-circle</v-icon>
                     <span>{{ labels.dialogTitle || '选择项目' }}</span>
@@ -23,7 +28,7 @@
 
                 <v-divider />
 
-                <v-card-text class="pa-0" style="height: 600px; max-height: 80vh; overflow: hidden;">
+                <v-card-text class="selector-dialog-content pa-0">
                     <div class="selector-layout">
                         <!-- 左侧文件夹树 -->
                         <div class="folder-sidebar">
@@ -146,7 +151,7 @@
                     </div>
                 </v-card-text>
 
-                <v-card-actions class="pa-4">
+                <v-card-actions class="selector-dialog-actions pa-4">
                     <v-btn v-if="showCreateButton" variant="text" color="primary" prepend-icon="mdi-plus"
                         @click="$emit('create')">
                         {{ labels.createButton || '新建' }}
@@ -406,6 +411,12 @@ export default defineComponent({
     overflow: hidden;
 }
 
+.selector-dialog-content {
+    height: 600px;
+    max-height: 80vh;
+    overflow: hidden;
+}
+
 .dialog-title {
     font-size: 1.25rem;
     font-weight: 500;
@@ -518,21 +529,44 @@ export default defineComponent({
 }
 
 @media (max-width: 600px) {
+    .selector-dialog-card-mobile {
+        border-radius: 0;
+    }
+
+    .selector-dialog-content {
+        height: calc(100vh - 132px);
+        max-height: none;
+    }
+
+    .dialog-title {
+        font-size: 1.05rem;
+        padding: 12px 16px !important;
+    }
+
+    .selector-dialog-actions {
+        padding: 12px 16px !important;
+        gap: 8px;
+    }
+
+    .selector-dialog-actions .v-btn {
+        min-width: 0;
+    }
+
     .selector-layout {
         flex-direction: column;
-        height: auto;
-        max-height: 500px;
+        height: 100%;
+        max-height: none;
     }
 
     .folder-sidebar {
         width: 100%;
         border-right: none;
         border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-        max-height: 150px;
+        max-height: 35vh;
     }
 
     .items-list {
-        max-height: 300px;
+        max-height: none;
     }
 }
 </style>

dashboard/src/components/shared/PersonaForm.vue

@@ -1,11 +1,15 @@
 <template>
-    <v-dialog v-model="showDialog" max-width="500px">
-        <v-card>
-            <v-card-title class="text-h2">
+    <v-dialog
+        v-model="showDialog"
+        :max-width="$vuetify.display.smAndDown ? undefined : '760px'"
+        scrollable
+    >
+        <v-card class="persona-form-card" :class="{ 'persona-form-card-mobile': $vuetify.display.smAndDown }">
+            <v-card-title class="persona-form-title text-h2">
                 {{ editingPersona ? tm('dialog.edit.title') : tm('dialog.create.title') }}
             </v-card-title>
 
-            <v-card-text>
+            <v-card-text class="persona-form-content">
                 <!-- 创建位置提示 -->
                 <v-alert
                     v-if="!editingPersona"
@@ -51,7 +55,7 @@
                                     </v-radio>
                                 </v-radio-group>
 
-                                <div v-if="toolSelectValue === '1'" class="mt-3 ml-8">
+                                <div v-if="toolSelectValue === '1'" class="mt-3 selected-config-area">
 
                                     <!-- 工具搜索 -->
                                     <v-text-field v-model="toolSearch" :label="tm('form.searchTools')"
@@ -178,7 +182,7 @@
                                     <v-radio :label="tm('form.skillsSelectSpecific')" value="1"></v-radio>
                                 </v-radio-group>
 
-                                <div v-if="skillSelectValue === '1'" class="mt-3 ml-8">
+                                <div v-if="skillSelectValue === '1'" class="mt-3 selected-config-area">
                                     <v-text-field v-model="skillSearch" :label="tm('form.searchSkills')"
                                         prepend-inner-icon="mdi-magnify" variant="outlined" density="compact"
                                         hide-details clearable class="mb-3" />
@@ -288,7 +292,7 @@
                 </v-form>
             </v-card-text>
 
-            <v-card-actions>
+            <v-card-actions class="persona-form-actions">
                 <v-btn v-if="editingPersona" color="error" variant="text" @click="deletePersona">
                     {{ tm('buttons.delete') }}
                 </v-btn>
@@ -799,6 +803,32 @@ export default {
 </script>
 
 <style scoped>
+.persona-form-card {
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.persona-form-content {
+    max-height: min(78vh, 760px);
+    overflow-y: auto;
+}
+
+.persona-form-title {
+    line-height: 1.3;
+}
+
+.persona-form-actions {
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+    background: rgb(var(--v-theme-surface));
+    border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.selected-config-area {
+    margin-left: 32px;
+}
+
 .tools-selection {
     max-height: 300px;
     overflow-y: auto;
@@ -812,4 +842,38 @@ export default {
 .v-virtual-scroll {
     padding-bottom: 16px;
 }
+
+@media (max-width: 600px) {
+    .persona-form-card-mobile {
+        border-radius: 0;
+    }
+
+    .persona-form-content {
+        max-height: calc(100vh - 128px);
+        padding: 16px !important;
+    }
+
+    .persona-form-title {
+        font-size: 1.15rem !important;
+        padding: 12px 16px !important;
+    }
+
+    .selected-config-area {
+        margin-left: 0;
+    }
+
+    .tools-selection,
+    .skills-selection {
+        max-height: 38vh;
+    }
+
+    .persona-form-actions {
+        padding: 12px 16px !important;
+        gap: 8px;
+    }
+
+    .persona-form-actions .v-btn {
+        min-width: 0;
+    }
+}
 </style>