Skip to content

Commit 89ec07a

Browse files
SoulterSoulter
authored
style: standardize dashboard dialog styling (#9062)
1 parent 758e432 commit 89ec07a

57 files changed

Lines changed: 245 additions & 227 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎AGENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ ruff check .
5151
6. For path handling, use `pathlib.Path` instead of string paths, and use `astrbot.core.utils.path_utils` to get the AstrBot data and temp directory.
5252
7. When backend API routes, request/response schemas, or OpenAPI definitions change, regenerate the frontend API client by running `cd dashboard && pnpm generate:api`.
5353
8. When updating the project version, keep `[project].version` in `pyproject.toml` and `__version__` in `astrbot/__init__.py` in sync. `VERSION` in `astrbot/core/config/default.py` should derive from `astrbot.__version__` instead of hardcoding a separate version string.
54+
9. When designing WebUI dialogs, use `text-h3 pa-4 pb-0 pl-6` as the base class for dialog titles, and use `variant="text"` or `variant="tonal"` for dialog buttons.
5455

5556
### KISS and First Principles
5657

‎dashboard/src/components/ConfirmDialog.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<v-dialog v-model="isOpen" max-width="400">
33
<v-card>
4-
<v-card-title class="text-h3 pl-6 pt-4">{{ title }}</v-card-title>
4+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">{{ title }}</v-card-title>
55
<v-card-text>{{ message }}</v-card-text>
66
<v-card-actions>
77
<v-spacer></v-spacer>
8-
<v-btn color="gray" @click="handleCancel">{{ t('core.common.dialog.cancelButton') }}</v-btn>
9-
<v-btn color="red" @click="handleConfirm">{{ t('core.common.dialog.confirmButton') }}</v-btn>
8+
<v-btn color="gray" variant="text" @click="handleCancel">{{ t('core.common.dialog.cancelButton') }}</v-btn>
9+
<v-btn color="red" variant="tonal" @click="handleConfirm">{{ t('core.common.dialog.confirmButton') }}</v-btn>
1010
</v-card-actions>
1111
</v-card>
1212
</v-dialog>

‎dashboard/src/components/chat/Chat.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -445,7 +445,7 @@
445445
/>
446446
<v-dialog v-model="sessionTitleDialogOpen" max-width="420">
447447
<v-card>
448-
<v-card-title class="text-h6">
448+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">
449449
{{ tm("conversation.editDisplayName") }}
450450
</v-card-title>
451451
<v-card-text>
@@ -466,6 +466,7 @@
466466
</v-btn>
467467
<v-btn
468468
color="primary"
469+
variant="tonal"
469470
:loading="savingSessionTitle"
470471
@click="saveSessionTitleDialog"
471472
>

‎dashboard/src/components/chat/ConfigSelector.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
<v-dialog v-model="dialog" max-width="480">
2424
<v-card>
25-
<v-card-title class="d-flex align-center justify-space-between">
25+
<v-card-title class="text-h3 pa-4 pb-0 pl-6 d-flex align-center justify-space-between">
2626
<span>选择配置文件</span>
2727
<v-btn icon variant="text" @click="closeDialog">
2828
<v-icon>mdi-close</v-icon>
@@ -60,6 +60,7 @@
6060
<v-btn variant="text" @click="closeDialog">取消</v-btn>
6161
<v-btn
6262
color="primary"
63+
variant="tonal"
6364
@click="confirmSelection"
6465
:disabled="!tempSelectedConfig"
6566
:loading="saving"

‎dashboard/src/components/chat/ProjectDialog.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-dialog v-model="isOpen" max-width="500" @update:model-value="handleDialogChange">
33
<v-card>
4-
<v-card-title class="dialog-title">
4+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">
55
{{ isEditing ? tm('project.edit') : tm('project.create') }}
66
</v-card-title>
77
<v-card-text>

‎dashboard/src/components/config/UnsavedChangesConfirmDialog.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-dialog v-model="isOpen" max-width="480" persistent>
33
<v-card>
4-
<v-card-title class="dialog-title d-flex align-center justify-space-between">
4+
<v-card-title class="text-h3 pa-4 pb-0 pl-6 d-flex align-center justify-space-between">
55
<span>{{ title }}</span>
66
<v-btn icon="mdi-close" variant="text" @click="handleClose"></v-btn>
77
</v-card-title>
@@ -15,8 +15,8 @@
1515
</v-card-text>
1616
<v-card-actions>
1717
<v-spacer></v-spacer>
18-
<v-btn color="gray" @click="handleCancel">{{ t('core.common.dialog.cancelButton') }}</v-btn>
19-
<v-btn color="red" @click="handleConfirm" class="confirm-button">{{ t('core.common.dialog.confirmButton') }}</v-btn>
18+
<v-btn color="gray" variant="text" @click="handleCancel">{{ t('core.common.dialog.cancelButton') }}</v-btn>
19+
<v-btn color="red" variant="tonal" @click="handleConfirm" class="confirm-button">{{ t('core.common.dialog.confirmButton') }}</v-btn>
2020
</v-card-actions>
2121
</v-card>
2222
</v-dialog>

‎dashboard/src/components/extension/McpServersSection.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
</template>
4949
<template v-slot:default="{ isActive }">
5050
<v-card style="padding: 16px;">
51-
<v-card-title class="d-flex align-center">
51+
<v-card-title class="text-h3 pa-4 pb-0 pl-6 d-flex align-center">
5252
<span>{{ tm('mcpServers.status.availableTools') }}</span>
5353
</v-card-title>
5454
<v-card-text>
@@ -164,7 +164,7 @@
164164
<!-- 添加/编辑 MCP 服务器对话框 -->
165165
<v-dialog v-model="showMcpServerDialog" max-width="750px">
166166
<v-card>
167-
<v-card-title class="pa-4 pl-6">
167+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">
168168
<v-icon class="me-2">{{ isEditMode ? 'mdi-pencil' : 'mdi-plus' }}</v-icon>
169169
<span>{{ isEditMode ? tm('dialogs.addServer.editTitle') : tm('dialogs.addServer.title') }}</span>
170170
</v-card-title>
@@ -228,7 +228,7 @@
228228
<v-btn variant="text" @click="testServerConnection" :disabled="loading">
229229
{{ tm('dialogs.addServer.buttons.testConnection') }}
230230
</v-btn>
231-
<v-btn color="primary" @click="saveServer" :loading="loading" :disabled="!isServerFormValid">
231+
<v-btn color="primary" variant="tonal" @click="saveServer" :loading="loading" :disabled="!isServerFormValid">
232232
{{ tm('dialogs.addServer.buttons.save') }}
233233
</v-btn>
234234
</v-card-actions>
@@ -238,7 +238,7 @@
238238
<!-- 同步 MCP 服务器对话框 -->
239239
<v-dialog v-model="showSyncMcpServerDialog" max-width="500px" persistent>
240240
<v-card>
241-
<v-card-title class="bg-primary text-white py-3">
241+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">
242242
<span>同步外部平台 MCP 服务器</span>
243243
</v-card-title>
244244

@@ -284,7 +284,7 @@
284284
<v-btn variant="text" @click="showSyncMcpServerDialog = false" :disabled="loading">
285285
{{ tm('dialogs.addServer.buttons.cancel') }}
286286
</v-btn>
287-
<v-btn color="primary" @click="syncMcpServers" :loading="loading" :disabled="loading">
287+
<v-btn color="primary" variant="tonal" @click="syncMcpServers" :loading="loading" :disabled="loading">
288288
{{ tm('dialogs.addServer.buttons.sync') }}
289289
</v-btn>
290290
</v-card-actions>

‎dashboard/src/components/extension/SkillsSection.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -372,9 +372,9 @@
372372

373373
<v-dialog v-model="uploadDialog" max-width="880px" :persistent="uploading">
374374
<v-card class="skills-upload-dialog">
375-
<v-card-title class="skills-upload-dialog__header px-6 pt-6 pb-2">
375+
<v-card-title class="text-h3 pa-4 pb-0 pl-6 skills-upload-dialog__header">
376376
<div class="skills-upload-dialog__heading">
377-
<div class="text-h4 font-weight-medium">
377+
<div>
378378
{{ tm("skills.uploadDialogTitle") }}
379379
</div>
380380
</div>
@@ -565,7 +565,7 @@
565565
</v-btn>
566566
<v-btn
567567
class="skills-upload-dialog__action-btn"
568-
variant="flat"
568+
variant="tonal"
569569
color="primary"
570570
:loading="uploading"
571571
:disabled="!hasUploadableItems"
@@ -579,13 +579,13 @@
579579

580580
<v-dialog v-model="deleteDialog" max-width="400px">
581581
<v-card>
582-
<v-card-title>{{ tm("skills.deleteTitle") }}</v-card-title>
582+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">{{ tm("skills.deleteTitle") }}</v-card-title>
583583
<v-card-text>{{ tm("skills.deleteMessage") }}</v-card-text>
584584
<v-card-actions class="d-flex justify-end">
585585
<v-btn variant="text" @click="deleteDialog = false">{{
586586
tm("skills.cancel")
587587
}}</v-btn>
588-
<v-btn color="error" :loading="deleting" @click="deleteSkill">
588+
<v-btn color="error" variant="tonal" :loading="deleting" @click="deleteSkill">
589589
{{ t("core.common.itemCard.delete") }}
590590
</v-btn>
591591
</v-card-actions>
@@ -598,9 +598,9 @@
598598
:persistent="editorDialog.saving"
599599
>
600600
<v-card class="skill-editor-dialog">
601-
<v-card-title class="skill-editor-dialog__header">
601+
<v-card-title class="text-h3 pa-4 pb-0 pl-6 skill-editor-dialog__header">
602602
<div>
603-
<div class="text-h3 font-weight-bold">
603+
<div>
604604
{{ editorDialog.skillName }}
605605
</div>
606606
</div>
@@ -713,7 +713,7 @@
713713
</v-btn>
714714
<v-btn
715715
color="primary"
716-
variant="flat"
716+
variant="tonal"
717717
:loading="editorDialog.saving"
718718
:disabled="
719719
!editorDialog.filePath ||
@@ -730,7 +730,7 @@
730730

731731
<v-dialog v-model="payloadDialog.show" max-width="820px">
732732
<v-card>
733-
<v-card-title>{{ tm("skills.neoPayloadTitle") }}</v-card-title>
733+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">{{ tm("skills.neoPayloadTitle") }}</v-card-title>
734734
<v-card-text>
735735
<pre class="payload-preview">{{ payloadDialog.content }}</pre>
736736
</v-card-text>
@@ -1892,7 +1892,6 @@ export default {
18921892
display: flex;
18931893
justify-content: space-between;
18941894
gap: 16px;
1895-
padding: 18px 22px 14px;
18961895
}
18971896
18981897
.skill-editor-dialog__body {

‎dashboard/src/components/extension/componentPanel/components/DetailsDialog.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const getPermissionLabel = (permission: string): string => {
4848
<template>
4949
<v-dialog :model-value="show" @update:model-value="emit('update:show', $event)" max-width="500">
5050
<v-card v-if="command">
51-
<v-card-title class="text-h5">{{ tm('dialogs.details.title') }}</v-card-title>
51+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">{{ tm('dialogs.details.title') }}</v-card-title>
5252
<v-card-text>
5353
<v-list density="compact">
5454
<v-list-item>

‎dashboard/src/components/extension/componentPanel/components/RenameDialog.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ watch(showAliasEditor, (open) => {
5959
<template>
6060
<v-dialog :model-value="show" @update:model-value="emit('update:show', $event)" max-width="500">
6161
<v-card>
62-
<v-card-title class="text-h5">{{ tm('dialogs.rename.title') }}</v-card-title>
62+
<v-card-title class="text-h3 pa-4 pb-0 pl-6">{{ tm('dialogs.rename.title') }}</v-card-title>
6363
<v-card-text>
6464
<v-text-field
6565
:model-value="newName"
@@ -99,7 +99,7 @@ watch(showAliasEditor, (open) => {
9999
</div>
100100
<v-btn
101101
prepend-icon="mdi-plus"
102-
variant="outlined"
102+
variant="tonal"
103103
color="primary"
104104
block
105105
size="small"
@@ -119,7 +119,7 @@ watch(showAliasEditor, (open) => {
119119
</v-btn>
120120
<v-btn
121121
color="primary"
122-
variant="text"
122+
variant="tonal"
123123
:loading="loading"
124124
@click="emit('confirm')"
125125
>

0 commit comments

Comments
 (0)