✨ feat: 初步实现可视化编辑 object 配置项

Author: Soulter

astrbot/core/config/default.py

@@ -695,6 +695,7 @@
                             "temperature": {"description": "温度", "type": "float"},
                             "top_p": {"description": "Top P值", "type": "float"},
                         },
+                        "editable": True,
                     },
                     "dify_api_key": {
                         "description": "API Key",

dashboard/src/components/shared/AstrBotConfig.vue

@@ -120,16 +120,23 @@
                 </div>
             </div>
         </div>
+
+        <div v-if="metadata[metadataKey]?.editable && metadata[metadataKey]?.type === 'object'">
+            <!-- 可编辑键值对 -->
+            <ObjectConfigItem :object="iterable" :metadata="metadata[metadataKey].items"></ObjectConfigItem>
+        </div>
     </v-card-text>
 </template>
 
 <script>
 import { readonly } from 'vue';
 import ListConfigItem from './ListConfigItem.vue';
+import ObjectConfigItem from './ObjectConfigItem.vue';
 
 export default {
     components: {
-        ListConfigItem
+        ListConfigItem,
+        ObjectConfigItem
     },
     props: {
         metadata: Object,

dashboard/src/components/shared/ObjectConfigItem.vue

@@ -0,0 +1,99 @@
+<template>
+    
+    <span :style="{ color: isAddMode ? '#000' : 'gray', 'margin-right': '8px' }" @click="toggleMode('add')">添加键</span>
+    <span :style="{ color: !isAddMode ? '#000' : 'gray' }" @click="toggleMode('delete')">删除键</span>
+    <div style="display: flex; margin-top: 8px; gap: 16px; align-items:center">
+        <!-- {{ items }} -->
+        <v-text-field v-model="newItemKey" label="键名" style="max-width: 250px;" density="compact"
+            prepend-inner-icon="mdi-alpha-k" variant="solo-filled" flat hide-details single-line
+            rounded="md"></v-text-field>
+        <v-select v-if="isAddMode" hint="类型" style="max-width: 150px;" rounded="md" density="compact" v-model="newItemType" :items="typeOptions"
+            prepend-inner-icon="mdi-alpha-t" variant="solo-filled" flat hide-details single-line>
+        </v-select>
+        <v-btn @click="apply" variant="tonal">
+            确定
+        </v-btn>
+        <small color="error">{{ error }}</small>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ObjectConfigItem',
+    props: {
+        object: {
+            type: Object,
+            default: () => ({}),
+        },
+        metadata: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    data() {
+        return {
+            items: this.object,
+            metadata: this.metadata,
+            newItemKey: '',
+            newItemType: 'string',
+            typeOptions: [
+                'string',
+                'int',
+                'float',
+                'text',
+                'bool',
+                'list',
+                'object',
+            ],
+            error: '',
+            isAddMode: true, // 默认模式为添加键
+
+            defaultValues: {
+                string: '',
+                int: 0,
+                float: 0.0,
+                text: '',
+                bool: false,
+                list: [],
+                object: {},
+            },
+        };
+    },
+    methods: {
+        toggleMode(mode) {
+            this.isAddMode = (mode === 'add');
+            this.newItemKey = '';
+            this.error = '';
+        },
+        apply() {
+            if (this.newItemKey === '') {
+                this.error = '键不能为空';
+                return;
+            }
+            if (this.isAddMode) {
+                if (this.items[this.newItemKey]) {
+                    this.error = '键已存在';
+                    return;
+                }
+                if (!this.newItemType) {
+                    this.error = '请选择类型';
+                    return;
+                }
+                this.items[this.newItemKey] = this.defaultValues[this.newItemType];
+                this.metadata[this.newItemKey] = {
+                    type: this.newItemType,
+                    description: this.newItemKey,
+                };
+                this.newItemType = 'string';
+            } else {
+                delete this.items[this.newItemKey];
+                delete this.metadata[this.newItemKey];
+            }
+            this.newItemKey = '';
+            this.error = '';
+        },
+    },
+};
+</script>
+
+<style></style>