From 89d51d2afc8ca565d12abdcdcd9c3c5993102e32 Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Mon, 24 Mar 2025 11:36:34 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20config=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/AstrBotConfig.vue   | 500 +++++++++++++-----
 1 file changed, 359 insertions(+), 141 deletions(-)

diff --git a/dashboard/src/components/shared/AstrBotConfig.vue b/dashboard/src/components/shared/AstrBotConfig.vue
index 2796f95d..2e24af80 100644
--- a/dashboard/src/components/shared/AstrBotConfig.vue
+++ b/dashboard/src/components/shared/AstrBotConfig.vue
@@ -1,156 +1,374 @@
 <template>
-    <div style="margin-bottom: 6px;" v-if="iterable && metadata[metadataKey]?.type === 'object'">
-        <v-list-item-title style="font-weight: bold;">
-            {{ metadata[metadataKey]?.description }} ({{ metadataKey }})
-        </v-list-item-title>
-        <v-list-item-subtitle style="font-size: 12px;">
-            <span v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint"
-                style="opacity: 1.0;">‼️</span>
-            {{ metadata[metadataKey]?.hint }}
-        </v-list-item-subtitle>
+  <div class="config-section" v-if="iterable && metadata[metadataKey]?.type === 'object'">
+    <v-list-item-title class="config-title">
+      {{ metadata[metadataKey]?.description }} <span class="metadata-key">({{ metadataKey }})</span>
+    </v-list-item-title>
+    <v-list-item-subtitle class="config-hint">
+      <span v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint" class="important-hint">‼️</span>
+      {{ metadata[metadataKey]?.hint }}
+    </v-list-item-subtitle>
+  </div>
+
+  <v-card-text class="px-0 py-1">
+    <!-- Object Type Configuration -->
+    <div v-if="metadata[metadataKey]?.type === 'object' || metadata[metadataKey]?.config_template" class="object-config">
+      <div v-for="(val, key, index) in iterable" :key="key" class="config-item">
+        <!-- Nested Object -->
+        <div v-if="metadata[metadataKey].items[key]?.type === 'object'" class="nested-object">
+          <div v-if="metadata[metadataKey].items[key] && !metadata[metadataKey].items[key]?.invisible" class="nested-container">
+            <v-expand-transition>
+              <AstrBotConfig :metadata="metadata[metadataKey].items" :iterable="iterable[key]" :metadataKey="key">
+              </AstrBotConfig>
+            </v-expand-transition>
+          </div>
+        </div>
+        
+        <!-- Regular Property -->
+        <template v-else>
+          <v-row v-if="!metadata[metadataKey].items[key]?.invisible" class="config-row">
+            <v-col cols="12" sm="6" class="property-info">
+              <v-list-item density="compact">
+                <v-list-item-title class="property-name">
+                  <span v-if="metadata[metadataKey].items[key]?.description">
+                    {{ metadata[metadataKey].items[key]?.description }}
+                    <span class="property-key">({{ key }})</span>
+                  </span>
+                  <span v-else>{{ key }}</span>
+                </v-list-item-title>
+
+                <v-list-item-subtitle class="property-hint">
+                  <span v-if="metadata[metadataKey].items[key]?.obvious_hint && metadata[metadataKey].items[key]?.hint" 
+                        class="important-hint">‼️</span>
+                  {{ metadata[metadataKey].items[key]?.hint }}
+                </v-list-item-subtitle>
+              </v-list-item>
+            </v-col>
+
+            <v-col cols="12" sm="1" class="d-flex align-center type-indicator">
+              <v-chip v-if="!metadata[metadataKey].items[key]?.invisible" 
+                     color="primary" 
+                     label 
+                     size="x-small" 
+                     variant="flat">
+                {{ metadata[metadataKey].items[key]?.type || 'string' }}
+              </v-chip>
+            </v-col>
+
+            <v-col cols="12" sm="5" class="config-input">
+              <div v-if="metadata[metadataKey].items[key]" class="w-100">
+                <!-- Select input -->
+                <v-select
+                  v-if="metadata[metadataKey].items[key]?.options && !metadata[metadataKey].items[key]?.invisible"
+                  v-model="iterable[key]"
+                  :items="metadata[metadataKey].items[key]?.options"
+                  :disabled="metadata[metadataKey].items[key]?.readonly"
+                  density="compact"
+                  variant="outlined"
+                  class="config-field"
+                  hide-details
+                ></v-select>
+                
+                <!-- String input -->
+                <v-text-field
+                  v-else-if="metadata[metadataKey].items[key]?.type === 'string' && !metadata[metadataKey].items[key]?.invisible"
+                  v-model="iterable[key]"
+                  density="compact"
+                  variant="outlined"
+                  class="config-field"
+                  hide-details
+                ></v-text-field>
+                
+                <!-- Numeric input -->
+                <v-text-field
+                  v-else-if="(metadata[metadataKey].items[key]?.type === 'int' || metadata[metadataKey].items[key]?.type === 'float') && !metadata[metadataKey]?.invisible"
+                  v-model="iterable[key]"
+                  density="compact"
+                  variant="outlined"
+                  class="config-field"
+                  type="number"
+                  hide-details
+                ></v-text-field>
+                
+                <!-- Text area -->
+                <v-textarea
+                  v-else-if="metadata[metadataKey].items[key]?.type === 'text' && !metadata[metadataKey].items[key]?.invisible"
+                  v-model="iterable[key]"
+                  variant="outlined"
+                  auto-grow
+                  rows="3"
+                  class="config-field"
+                  hide-details
+                ></v-textarea>
+                
+                <!-- Boolean switch -->
+                <v-switch
+                  v-else-if="metadata[metadataKey].items[key]?.type === 'bool' && !metadata[metadataKey].items[key]?.invisible"
+                  v-model="iterable[key]"
+                  color="primary"
+                  inset
+                  density="compact"
+                  hide-details
+                ></v-switch>
+                
+                <!-- List item -->
+                <ListConfigItem
+                  v-else-if="metadata[metadataKey].items[key]?.type === 'list' && !metadata[metadataKey].items[key]?.invisible"
+                  :value="iterable[key]"
+                  class="config-field"
+                />
+              </div>
+              
+              <!-- Fallback for unknown metadata -->
+              <div v-else class="w-100">
+                <v-text-field 
+                  v-model="iterable[key]" 
+                  :label="key" 
+                  density="compact"
+                  variant="outlined"
+                  class="config-field"
+                  hide-details
+                ></v-text-field>
+              </div>
+            </v-col>
+          </v-row>
+
+          <v-divider 
+            v-if="index !== Object.keys(iterable).length - 1 && !metadata[metadataKey].items[key]?.invisible"
+            class="config-divider"
+          ></v-divider>
+        </template>
+      </div>
     </div>
+    
+    <!-- Simple Value Configuration -->
+    <div v-else class="simple-config">
+      <v-row class="config-row">
+        <v-col cols="12" sm="6" class="property-info">
+          <v-list-item density="compact">
+            <v-list-item-title class="property-name">
+              {{ metadata[metadataKey]?.description }}
+              <span class="property-key">({{ metadataKey }})</span>
+            </v-list-item-title>
 
-    <v-card-text style="padding: 0px;">
-        <div v-for="(val, key, index) in iterable" :key="key" style="margin-bottom: 0.5px;"
-            v-if="metadata[metadataKey]?.type === 'object' || metadata[metadataKey]?.config_template">
+            <v-list-item-subtitle class="property-hint">
+              <span v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint" class="important-hint">‼️</span>
+              {{ metadata[metadataKey]?.hint }}
+            </v-list-item-subtitle>
+          </v-list-item>
+        </v-col>
 
-            <div v-if="metadata[metadataKey].items[key]?.type === 'object'" style="padding-left: 16px;">
-                <div v-if="metadata[metadataKey].items[key] && !metadata[metadataKey].items[key]?.invisible"
-                    style="border: 1px solid #e0e0e0; padding: 8px; margin-bottom: 16px; border-radius: 10px; margin-top: 16px">
-                    <AstrBotConfig :metadata="metadata[metadataKey].items" :iterable="iterable[key]" :metadataKey=key>
-                    </AstrBotConfig>
-                </div>
-            </div>
+        <v-col cols="12" sm="1" class="d-flex align-center type-indicator">
+          <v-chip v-if="!metadata[metadataKey]?.invisible" 
+                 color="primary" 
+                 label 
+                 size="x-small"
+                 variant="flat">
+            {{ metadata[metadataKey]?.type }}
+          </v-chip>
+        </v-col>
 
-            <v-row v-else style="margin: 0; align-items: center;">
-                <v-col cols="6" style="padding: 0px;">
-                    <v-list-item>
-                        <v-list-item-title style="font-size: 14px; font-weight: bold;">
-                            <span v-if="metadata[metadataKey].items[key]?.description">{{ metadata[metadataKey].items[key]?.description + '(' + key + ')' }}</span>
-                            <span v-else>{{ key }}</span>
-                        </v-list-item-title>
+        <v-col cols="12" sm="5" class="config-input">
+          <div class="w-100">
+            <!-- Select input -->
+            <v-select
+              v-if="metadata[metadataKey]?.options && !metadata[metadataKey]?.invisible"
+              v-model="iterable[metadataKey]"
+              :items="metadata[metadataKey]?.options"
+              :disabled="metadata[metadataKey]?.readonly"
+              density="compact"
+              variant="outlined"
+              class="config-field"
+              hide-details
+            ></v-select>
+            
+            <!-- String input -->
+            <v-text-field
+              v-else-if="metadata[metadataKey]?.type === 'string' && !metadata[metadataKey]?.invisible"
+              v-model="iterable[metadataKey]"
+              density="compact"
+              variant="outlined"
+              class="config-field"
+              hide-details
+            ></v-text-field>
+            
+            <!-- Numeric input -->
+            <v-text-field
+              v-else-if="(metadata[metadataKey]?.type === 'int' || metadata[metadataKey]?.type === 'float') && !metadata[metadataKey]?.invisible"
+              v-model="iterable[metadataKey]"
+              density="compact"
+              variant="outlined"
+              class="config-field"
+              type="number"
+              hide-details
+            ></v-text-field>
+            
+            <!-- Text area -->
+            <v-textarea
+              v-else-if="metadata[metadataKey]?.type === 'text' && !metadata[metadataKey]?.invisible"
+              v-model="iterable[metadataKey]"
+              variant="outlined"
+              auto-grow
+              rows="3"
+              class="config-field"
+              hide-details
+            ></v-textarea>
+            
+            <!-- Boolean switch -->
+            <v-switch
+              v-else-if="metadata[metadataKey]?.type === 'bool' && !metadata[metadataKey]?.invisible"
+              v-model="iterable[metadataKey]"
+              color="primary"
+              inset
+              density="compact"
+              hide-details
+            ></v-switch>
+            
+            <!-- List item -->
+            <ListConfigItem
+              v-else-if="metadata[metadataKey]?.type === 'list' && !metadata[metadataKey]?.invisible"
+              :value="iterable[metadataKey]"
+              class="config-field"
+            />
+          </div>
+        </v-col>
+      </v-row>
 
-                        <v-list-item-subtitle style="font-size: 12px;">
-                            <span
-                                v-if="metadata[metadataKey].items[key]?.obvious_hint && metadata[metadataKey].items[key]?.hint"
-                                style="opacity: 1.0;">‼️</span>
-                            {{ metadata[metadataKey].items[key]?.hint }}
-                        </v-list-item-subtitle>
-                    </v-list-item>
-                </v-col>
-
-                <v-col cols="1">
-                    <v-chip v-if="!metadata[metadataKey].items[key]?.invisible" color="primary" label size="x-small"
-                        class="mb-1">{{
-                            metadata[metadataKey].items[key]?.type || 'string' }}
-                    </v-chip>
-                </v-col>
-
-                <v-col cols="5">
-                    <div style="width: 100%;" v-if="metadata[metadataKey].items[key]">
-                        <v-select
-                            v-if="metadata[metadataKey].items[key]?.options && !metadata[metadataKey].items[key]?.invisible"
-                            v-model="iterable[key]" variant="outlined"
-                            :items="metadata[metadataKey].items[key]?.options" dense
-                            :disabled="metadata[metadataKey].items[key]?.readonly" density="compact" flat hide-details
-                            single-line></v-select>
-                        <v-text-field
-                            v-else-if="metadata[metadataKey].items[key]?.type === 'string' && !metadata[metadataKey].items[key]?.invisible"
-                            v-model="iterable[key]" variant="outlined" dense density="compact" flat hide-details
-                            single-line></v-text-field>
-                        <v-text-field
-                            v-else-if="(metadata[metadataKey].items[key]?.type === 'int' || metadata[metadataKey].items[key]?.type === 'float') && !metadata[metadataKey].items[key]?.invisible"
-                            v-model="iterable[key]" variant="outlined" dense density="compact" flat hide-details
-                            single-line></v-text-field>
-                        <v-textarea
-                            v-else-if="metadata[metadataKey].items[key]?.type === 'text' && !metadata[metadataKey].items[key]?.invisible"
-                            v-model="iterable[key]" variant="outlined" dense flat hide-details single-line></v-textarea>
-                        <v-switch
-                            v-else-if="metadata[metadataKey].items[key]?.type === 'bool' && !metadata[metadataKey].items[key]?.invisible"
-                            v-model="iterable[key]" color="primary" hide-details></v-switch>
-                        <ListConfigItem
-                            v-else-if="metadata[metadataKey].items[key]?.type === 'list' && !metadata[metadataKey].items[key]?.invisible"
-                            :value="iterable[key]" />
-                    </div>
-                    <div style="width: 100%;" v-else>
-                        <!-- 在 metadata 中没有 key -->
-                        <v-text-field v-model="iterable[key]" :label="key" variant="outlined" dense density="compact" flat hide-details
-                        single-line></v-text-field>
-                    </div>
-                </v-col>
-
-            </v-row>
-
-            <v-divider style="border-color: #ccc;" v-if="index !== Object.keys(iterable).length - 1 && !metadata[metadataKey].items[key]?.invisible "></v-divider>
-
-        </div>
-        <div v-else>
-
-            <v-row style="margin: 0; align-items: center;">
-                <v-col cols="6" style="padding: 0px;">
-                    <v-list-item>
-                        <v-list-item-title style="font-size: 14px; font-weight: bold">
-                            {{ metadata[metadataKey]?.description + '(' + metadataKey + ')' }}
-                        </v-list-item-title>
-
-                        <v-list-item-subtitle style="font-size: 12px;">
-                            <span v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint">‼️</span>
-                            {{ metadata[metadataKey]?.hint }}
-                        </v-list-item-subtitle>
-                    </v-list-item>
-                </v-col>
-
-                <v-col cols="1">
-                    <v-chip v-if="!metadata[metadataKey]?.invisible" color="primary" label size="x-small"
-                        class="mb-1">{{
-                            metadata[metadataKey]?.type }}
-                    </v-chip>
-                </v-col>
-
-                <v-col cols="5">
-                    <div style="width: 100%;">
-                        <v-select v-if="metadata[metadataKey]?.options && !metadata[metadataKey]?.invisible"
-                            v-model="iterable[metadataKey]" variant="outlined" :items="metadata[metadataKey]?.options"
-                            dense :disabled="metadata[metadataKey]?.readonly" density="compact" flat hide-details
-                            single-line></v-select>
-                        <v-text-field
-                            v-else-if="metadata[metadataKey]?.type === 'string' && !metadata[metadataKey]?.invisible"
-                            v-model="iterable[metadataKey]" variant="outlined" dense density="compact" flat hide-details
-                            single-line></v-text-field>
-                        <v-text-field
-                            v-else-if="(metadata[metadataKey]?.type === 'int' || metadata[metadataKey]?.type === 'float') && !metadata[metadataKey]?.invisible"
-                            v-model="iterable[metadataKey]" variant="outlined" dense density="compact" flat hide-details
-                            single-line></v-text-field>
-                        <v-textarea
-                            v-else-if="metadata[metadataKey]?.type === 'text' && !metadata[metadataKey]?.invisible"
-                            v-model="iterable[metadataKey]" variant="outlined" dense density="compact" flat hide-details
-                            single-line></v-textarea>
-                        <v-switch
-                            v-else-if="metadata[metadataKey]?.type === 'bool' && !metadata[metadataKey]?.invisible"
-                            v-model="iterable[metadataKey]" color="primary" hide-details></v-switch>
-                        <ListConfigItem
-                            v-else-if="metadata[metadataKey]?.type === 'list' && !metadata[metadataKey]?.invisible"
-                            :value="iterable[metadataKey]" />
-                    </div>
-                </v-col>
-            </v-row>
-
-            <v-divider style="border-color: #ddd;"></v-divider>
-        </div>
-    </v-card-text>
+      <v-divider class="my-2 config-divider"></v-divider>
+    </div>
+  </v-card-text>
 </template>
 
 <script>
 import ListConfigItem from './ListConfigItem.vue';
 
 export default {
-    components: {
-        ListConfigItem
+  name: 'AstrBotConfig',
+  components: {
+    ListConfigItem
+  },
+  props: {
+    metadata: {
+      type: Object,
+      required: true
     },
-    props: {
-        metadata: Object,
-        iterable: Object,
-        metadataKey: String
+    iterable: {
+      type: Object,
+      required: true
+    },
+    metadataKey: {
+      type: String,
+      required: true
     }
+  }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.config-section {
+  margin-bottom: 12px;
+}
+
+.config-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--v-primary-darken1);
+}
+
+.config-hint {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  margin-top: 2px;
+}
+
+.metadata-key, .property-key {
+  font-size: 0.85em;
+  opacity: 0.7;
+  font-weight: normal;
+}
+
+.important-hint {
+  opacity: 1;
+  margin-right: 4px;
+}
+
+.object-config, .simple-config {
+  width: 100%;
+}
+
+.config-item {
+  margin-bottom: 2px;
+}
+
+.nested-object {
+  padding-left: 16px;
+}
+
+.nested-container {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 12px;
+  margin: 12px 0;
+  background-color: rgba(0, 0, 0, 0.02);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.config-row {
+  margin: 0;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.config-row:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.property-info {
+  padding: 0;
+}
+
+.property-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.property-hint {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  margin-top: 2px;
+}
+
+.type-indicator {
+  display: flex;
+  justify-content: center;
+}
+
+.config-input {
+  padding: 4px 8px;
+}
+
+.config-field {
+  margin-bottom: 0;
+}
+
+.config-divider {
+  border-color: rgba(0, 0, 0, 0.1);
+  margin: 4px 0;
+}
+
+@media (max-width: 600px) {
+  .nested-object {
+    padding-left: 8px;
+  }
+  
+  .config-row {
+    padding: 8px 0;
+  }
+  
+  .property-info, .type-indicator, .config-input {
+    padding: 4px;
+  }
+}
+</style>
\ No newline at end of file