feat: 更新 AgentAssistantWidget 组件的空状态样式和文本内容

This commit is contained in:
jxxghp
2026-06-16 22:23:37 +08:00
parent 61749e3595
commit cd69172a99
5 changed files with 55 additions and 18 deletions

View File

@@ -493,8 +493,11 @@ onScopeDispose(() => {
<main ref="messageListRef" class="agent-assistant-messages">
<div v-if="!hasMessages" class="agent-assistant-empty">
<VIcon icon="mdi-creation-outline" size="34" />
<div class="text-subtitle-2 mt-3">{{ t('agentAssistant.emptyTitle') }}</div>
<div class="agent-assistant-empty__mark">
<VIcon icon="lucide:sparkles" size="28" />
</div>
<div class="agent-assistant-empty__title">{{ t('agentAssistant.emptyTitle') }}</div>
<div class="agent-assistant-empty__subtitle">{{ t('agentAssistant.emptySubtitle') }}</div>
</div>
<div
@@ -630,7 +633,7 @@ onScopeDispose(() => {
.agent-assistant-fab {
position: fixed;
z-index: 2100;
z-index: 1000;
display: grid;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
border-radius: 999px 0 0 999px;
@@ -644,7 +647,7 @@ onScopeDispose(() => {
inset-block-start: 50%;
inset-inline-end: 0;
place-items: center;
transform: translate(1.35rem, -50%);
transform: translate(1rem, -50%);
transition:
inset-inline-end 0.2s ease,
transform 0.18s ease,
@@ -724,13 +727,46 @@ onScopeDispose(() => {
}
.agent-assistant-empty {
display: grid;
color: rgba(var(--v-theme-on-surface), 0.58);
min-block-size: 55%;
place-content: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(var(--v-theme-on-surface), 0.7);
min-block-size: 100%;
padding-block: 2rem 1.25rem;
padding-inline: 0.25rem;
text-align: center;
}
.agent-assistant-empty__mark {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--v-theme-primary), 0.18);
border-radius: 8px;
background: rgba(var(--v-theme-primary), 0.1);
block-size: 3.75rem;
box-shadow: inset 0 1px 0 rgba(var(--v-theme-on-primary), 0.1);
color: rgb(var(--v-theme-primary));
inline-size: 3.75rem;
margin-block-end: 1rem;
}
.agent-assistant-empty__title {
color: rgba(var(--v-theme-on-surface), 0.9);
font-size: 1.1rem;
font-weight: 700;
line-height: 1.35;
}
.agent-assistant-empty__subtitle {
color: rgba(var(--v-theme-on-surface), 0.58);
font-size: 0.86rem;
line-height: 1.55;
margin-block-start: 0.4rem;
max-inline-size: 21rem;
}
.agent-assistant-message {
display: flex;
flex-direction: column;
@@ -1013,13 +1049,9 @@ onScopeDispose(() => {
}
@media (width <= 600px) {
.agent-assistant-fab {
inset-block: auto max(5rem, calc(env(safe-area-inset-bottom, 0px) + 5rem));
transform: translateX(1.35rem);
}
.agent-assistant-fab:hover {
transform: translateX(0);
.agent-assistant-empty {
justify-content: flex-start;
padding-block-start: 2.75rem;
}
.agent-assistant-messages {

View File

@@ -703,7 +703,8 @@ export default {
ready: 'Ready',
thinking: 'Thinking',
newChat: 'New Chat',
emptyTitle: 'Ask about sites, subscriptions, downloads, or organization tasks',
emptyTitle: 'What should we handle today?',
emptySubtitle: 'Ask about sites, subscriptions, downloads, or organization tasks.',
placeholder: 'Ask MoviePilot...',
stop: 'Stop generating',
download: 'Download',

View File

@@ -699,7 +699,8 @@ export default {
ready: '随时待命',
thinking: '思考中',
newChat: '新会话',
emptyTitle: '可以直接询问站点、订阅、下载和整理任务',
emptyTitle: '今天想处理什么?',
emptySubtitle: '站点、订阅、下载、整理任务,都可以直接问我。',
placeholder: '询问 MoviePilot...',
stop: '停止生成',
download: '下载',

View File

@@ -699,7 +699,8 @@ export default {
ready: '隨時待命',
thinking: '思考中',
newChat: '新會話',
emptyTitle: '可以直接詢問站點、訂閱、下載和整理任務',
emptyTitle: '今天想處理什麼?',
emptySubtitle: '站點、訂閱、下載、整理任務,都可以直接問我。',
placeholder: '詢問 MoviePilot...',
stop: '停止生成',
download: '下載',

View File

@@ -2,6 +2,7 @@
<script lang="ts" setup>
import { useToast } from 'vue-toastification'
import api from '@/api'
import { useGlobalSettingsStore } from '@/stores'
import { DownloaderConf, MediaServerConf } from '@/api/types'
import DownloaderCard from '@/components/cards/DownloaderCard.vue'
import MediaServerCard from '@/components/cards/MediaServerCard.vue'
@@ -17,6 +18,7 @@ const display = useDisplay()
const theme = useTheme()
const isTransparentTheme = computed(() => theme.name.value === 'transparent')
const globalSettingsStore = useGlobalSettingsStore()
// 国际化
const { t } = useI18n()