🏗 refactor: improve styling and layout of AstrBotConfig component for enhanced readability

This commit is contained in:
Soulter
2025-03-13 15:59:20 +08:00
parent c5e944744b
commit 4fe1ebaa5b
@@ -1,6 +1,6 @@
<template>
<div style="margin-bottom: 6px;" v-if="iterable && metadata[metadataKey]?.type === 'object'">
<v-list-item-title>
<v-list-item-title style="font-weight: bold;">
{{ metadata[metadataKey]?.description }} ({{ metadataKey }})
<v-chip color="primary" label size="x-small" class="mb-1">
object
@@ -25,10 +25,10 @@
</div>
</div>
<v-row v-else>
<v-row v-else style="margin: 0;">
<v-col cols="6">
<v-list-item>
<v-list-item-title style="font-size: 14px;">
<v-list-item-title style="font-size: 14px; font-weight: bold;">
{{ metadata[metadataKey].items[key]?.description + '(' + key + ')' }}
<v-chip v-if="!metadata[metadataKey].items[key]?.invisible" color="primary" label
size="x-small" class="mb-1">{{
@@ -70,7 +70,7 @@
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"></v-switch>
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]" />
@@ -80,6 +80,8 @@
<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: #ddd; margin-left: -18px; margin-right: -18px;" ></v-divider>
</v-row>
</div>
@@ -88,7 +90,7 @@
<v-row>
<v-col cols="6">
<v-list-item>
<v-list-item-title style="font-size: 14px;">
<v-list-item-title style="font-size: 14px; font-weight: bold">
{{ metadata[metadataKey]?.description + '(' + metadataKey + ')' }}
<v-chip v-if="!metadata[metadataKey]?.invisible" color="primary" label size="x-small"
class="mb-1">{{
@@ -125,6 +127,8 @@
</div>
</v-col>
</v-row>
<v-divider class="mb-4" style="border-color: #ddd; margin-left: -18px; margin-right: -18px;" ></v-divider>
</div>
</v-card-text>
</template>