laoxong/AstrBot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎈 perf: 优化配置页的显示

Browse Source
This commit is contained in:
Soulter
2025-03-18 00:16:47 +08:00
parent ad6487d042
commit 75dace2dee
2 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/shared/AstrBotConfig.vue
+36 -28
View File
@@ -1,9 +1,6 @@
<template>
<div style="margin-bottom: 6px;" v-if="iterable && metadata[metadataKey]?.type === 'object'">
<v-list-item-title style="font-weight: bold;">
<v-chip color="primary" label size="x-small" class="mb-1">
object
</v-chip>
{{ metadata[metadataKey]?.description }} ({{ metadataKey }})
</v-list-item-title>
<v-list-item-subtitle style="font-size: 12px;">
@@ -13,26 +10,22 @@
</v-list-item-subtitle>
</div>
<v-card-text style="padding: 12px;">
<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">
<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;">
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-row v-else style="margin: 0;">
<v-col cols="6">
<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;">
<v-chip v-if="!metadata[metadataKey].items[key]?.invisible" color="primary" label
size="x-small" class="mb-1">{{
metadata[metadataKey].items[key]?.type }}
</v-chip>
{{ metadata[metadataKey].items[key]?.description + '(' + key + ')' }}
</v-list-item-title>
@@ -45,7 +38,14 @@
</v-list-item>
</v-col>
<v-col cols="6">
<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 }}
</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"
@@ -76,23 +76,19 @@
<v-text-field v-model="iterable[key]" :label="key" variant="outlined" dense></v-text-field>
</div>
</v-col>
<v-divider class="mb-4" style="border-color: #ccc; margin-left: -18px; margin-right: -18px;"
v-if="index !== Object.keys(iterable).length - 1"></v-divider>
</v-row>
<v-divider style="border-color: #ccc;" v-if="index !== Object.keys(iterable).length - 1"></v-divider>
</div>
<div v-else>
<v-row>
<v-col cols="6">
<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">
<v-chip v-if="!metadata[metadataKey]?.invisible" color="primary" label size="x-small"
class="mb-1">{{
metadata[metadataKey]?.type }}
</v-chip>
{{ metadata[metadataKey]?.description + '(' + metadataKey + ')' }}
</v-list-item-title>
<v-list-item-subtitle style="font-size: 12px;">
@@ -101,23 +97,35 @@
</v-list-item-subtitle>
</v-list-item>
</v-col>
<v-col cols="6">
<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"></v-select>
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"></v-text-field>
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"></v-text-field>
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"></v-textarea>
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"></v-switch>
v-model="iterable[metadataKey]" color="primary" hide-details></v-switch>
<ListConfigItem
v-else-if="metadata[metadataKey]?.type === 'list' && !metadata[metadataKey]?.invisible"
:value="iterable[metadataKey]" />
@@ -125,7 +133,7 @@
</v-col>
</v-row>
<v-divider class="mb-4" style="border-color: #ddd; margin-left: -18px; margin-right: -18px;"></v-divider>
<v-divider style="border-color: #ddd;"></v-divider>
</div>
</v-card-text>
</template>
dashboard/src/views/ConfigPage.vue
+1 -4
View File
@@ -44,11 +44,8 @@ import config from '@/config';
<div v-if="metadata[key]['metadata'][key2]?.config_template"
v-show="key2 !== 'platform' && key2 !== 'provider'" style="border: 1px solid #e0e0e0; padding: 8px; margin-bottom: 16px; border-radius: 10px">
<!-- 带有 config_template 的配置项 -->
<v-list-item-title>
<v-list-item-title style="font-weight: bold;">
{{ metadata[key]['metadata'][key2]['description'] }} ({{ key2 }})
<v-chip color="primary" label size="x-small" class="mb-1">
object
</v-chip>
</v-list-item-title>
<v-tabs style="margin-top: 16px;" align-tabs="left" color="deep-purple-accent-4"