duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance dark mode support across various components

Browse Source 
- Updated styles in AccountSetting, SystemConfig, Version, and other components to improve dark mode visibility.
- Added dark mode classes for text and background colors to ensure better contrast and readability.
- Modified CSS variables in dark.css for consistent theming.
- Improved accessibility by ensuring all text elements are legible in dark mode.
This commit is contained in:
duanshuwen
2026-04-15 21:17:08 +08:00
parent 43801ba51b
commit 364db041eb
62 changed files with 650 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/home/ChatHistory.vue
View File

@@ -17,7 +17,7 @@
</div>
<div
class="flex items-center justify-center m-2 bg-white rounded-lg p-2.5 border-[#E5E8EE] shadow-sm text-center cursor-pointer hover:bg-[#F5F7FA] hover:text-[#2B7FFF] hover:border-[#2B7FFF]"
class="flex items-center justify-center m-2 bg-white dark:bg-[#1f1f22] rounded-lg p-2.5 border border-[#E5E8EE] dark:border-[#2a2a2d] shadow-sm text-center cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d] hover:text-[#2B7FFF] hover:border-[#2B7FFF]"
@click="addNewChat">
<RiAddLine />
<span v-if="!sidebarCollapsed" class="whitespace-nowrap">新对话</span>
@@ -32,8 +32,8 @@
<ul class="list-none">
<li v-for="item in bucket.sessions" :key="item.conversationId" @click="selectedHistoryMessage(item.conversationId)"
:class="[
'flex items-center gap-2 p-2 text-gray-600 rounded-lg cursor-pointer transition-colors mb-2',
item.conversationId === selectedConversationId ? 'bg-white shadow-sm border-[#E5E8EE] py-1.5 relative z-10' : 'hover:bg-gray-200'
'flex items-center gap-2 p-2 text-gray-600 dark:text-gray-400 rounded-lg cursor-pointer transition-colors mb-2',
item.conversationId === selectedConversationId ? 'bg-white dark:bg-[#1f1f22] shadow-sm border border-[#E5E8EE] dark:border-[#2a2a2d] py-1.5 relative z-10' : 'hover:bg-gray-200 dark:hover:bg-gray-700/50'
]">
<span class="w-2 h-2 rounded-full bg-[#BEDBFF] flex-none"></span>
<div class="flex-1 min-w-0">

10
src/pages/home/TaskCenter.vue
View File

@@ -6,20 +6,20 @@
<div class="grid grid-cols-2 gap-4 max-[800px]:grid-cols-1">
<div v-for="item in taskList" :key="item.id" class="flex gap-3 items-start p-3.5
rounded-[10px] border border-[#dfeaf6] bg-white cursor-pointer hover:bg-[#F5F7FA]"
rounded-[10px] border border-[#dfeaf6] dark:border-[#2a2a2d] bg-white dark:bg-[#1f1f22] cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d]"
@click="handleTaskItem(item)">
<div class="w-11 h-11 bg-[#EFF6FF] rounded-lg
border border-dashed border-[#9fc0e8]
<div class="w-11 h-11 bg-[#EFF6FF] dark:bg-[#222225] rounded-lg
border border-dashed border-[#9fc0e8] dark:border-gray-700
flex items-center justify-center
text-[#3b82f6] text-[23px]">
{{ item.icon }}
</div>
<div>
<div class="font-semibold">
<div class="font-semibold dark:text-gray-100">
{{ item.title }}
</div>
<div class="text-[#9aa5b1] text-[13px] mt-1.5">
<div class="text-[#9aa5b1] dark:text-gray-400 text-[13px] mt-1.5">
{{ item.desc }}
</div>
</div>

2
src/pages/home/components/ChatAIMark.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mt-2 text-xs text-gray-400 ">
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
本回答由 AI 生成
</div>
</template>

4
src/pages/home/components/ChatAttach.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="tag-flex flex-wrap pt-3">
<div class="inline-flex items-center justify-center box-border border border-[#E5E8EE] rounded-lg py-0.5 px-2.5 mr-2 mb-2"
<div class="inline-flex items-center justify-center box-border border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg py-0.5 px-2.5 mr-2 mb-2"
v-for="(item, index) in questionList" :key="index" @click="handleClick(item)">
<span class="tag-text-[#2d91ff] text-[10px]">{{ item }}</span>
<span class="text-[#2d91ff] text-[10px]">{{ item }}</span>
</div>
</div>
</template>

8
src/pages/home/components/ChatInputArea.vue
View File

@@ -1,15 +1,15 @@
<template>
<div
class="h-[174px] bg-white rounded-lg border border-[#eef2f6] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between">
<textarea rows="2" placeholder="给我发布或者布置任务" class="flex-1 resize-none outline-none text-sm" :value="modelValue"
class="h-[174px] bg-white dark:bg-[#1f1f22] rounded-lg border border-[#eef2f6] dark:border-[#2a2a2d] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between">
<textarea rows="2" placeholder="给我发布或者布置任务" class="flex-1 resize-none outline-none text-sm bg-transparent dark:text-gray-100" :value="modelValue"
@input="onInput" @keydown.enter="onKeydownEnter" />
<div class="flex justify-between items-end">
<button class="cursor-pointer hover:text-[#2B7FFF]" @click="onAttach">
<button class="cursor-pointer hover:text-[#2B7FFF] dark:text-gray-400" @click="onAttach">
<RiLink />
</button>
<button
class="w-12 h-12 bg-[#F5F7FA] px-2.5 py-1.5 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#2B7FFF] hover:text-[#fff]"
class="w-12 h-12 bg-[#F5F7FA] dark:bg-[#222225] px-2.5 py-1.5 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#2B7FFF] hover:text-[#fff]"
@click="onSend">
<RiStopFill v-if="isSendingMessage" />
<RiSendPlaneFill v-else />

3
src/pages/home/components/ChatLoading.vue
View File

@@ -24,6 +24,9 @@
border-radius: 50%;
margin-right: 3px;
background: #333333;
}
.dark .dot {
background: #9ca3af;
animation: wave 1.3s linear infinite;
}

4
src/pages/home/components/ChatNameTime.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex items-start gap-2 pt-0.5 mb-2" :class="props.showReverse ? 'flex-row-reverse' : 'flex-row'">
<span class="text-xs text-[#4E5969]">{{ props.msg?.messageRole === MessageRole.AI ? 'NIANXX' : '我' }}</span>
<span class="text-xs text-[#86909C]">{{ formattedTime }}</span>
<span class="text-xs text-[#4E5969] dark:text-gray-300">{{ props.msg?.messageRole === MessageRole.AI ? 'NIANXX' : '我' }}</span>
<span class="text-xs text-[#86909C] dark:text-gray-500">{{ formattedTime }}</span>
</div>
</template>

2
src/pages/home/components/ChatOperation.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mt-4 text-gray-500 flex items-center justify-between gap-4 ">
<div class="mt-4 text-gray-500 dark:text-gray-400 flex items-center justify-between gap-4 ">
<RiFileCopyLine size="16px" @click="copyFileClick()" />
<div class="flex items-center gap-4">
<RiShareForwardLine size="16px" @click="shareForwardClick()" />

4
src/pages/home/components/ChatRoleAI.vue
View File

@@ -2,12 +2,12 @@
<div class="max-w-[75%] flex flex-col">
<slot name="header"></slot>
<div v-if="!msg.messageContentList || msg.messageContentList.length === 0"
class="flex flex-row text-sm text-gray-700">
class="flex flex-row text-sm text-gray-700 dark:text-gray-100">
<div v-html="compiledMarkdown"></div>
<ChatLoading v-if="msg.isLoading" />
</div>
<div v-else class="flex flex-col p-2 mb-2 text-sm text-gray-700 bg-[#f7f9fc] rounded-md"
<div v-else class="flex flex-col p-2 mb-2 text-sm text-gray-700 dark:text-gray-100 bg-[#f7f9fc] dark:bg-[#222225] rounded-md"
v-for="(_, index) in msg.messageContentList" :key="index">
<div v-html="compiledAt(index)"></div>
</div>

2
src/pages/home/components/ChatRoleMe.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="max-w-[75%]">
<slot name="header"></slot>
<div class="text-sm text-gray-700 bg-[#f7f9fc] rounded-md px-2 py-2">
<div class="text-sm text-gray-700 dark:text-gray-100 bg-[#f7f9fc] dark:bg-[#222225] rounded-md px-2 py-2">
{{ msg.messageContent }}
</div>
<slot name="footer"></slot>

9
src/pages/home/components/Task.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="task p-[12px]">
<div class="flex border border-[#BEDBFF] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] task-tab">
<div class="flex border border-[#BEDBFF] dark:border-[#2a2a2d] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] dark:bg-[#222225] task-tab">
<div v-for="item in tabs" :key="item.value" class="flex-1 flex text-center items-center h-full align-middle text" :class="active === item.value && 'active'" @click="changeTab(item.value)">
<div class="flex-1">{{ item.name }}<span v-if="item.total">{{`（${item.total > 98 && item.total + '+' || item.total}）`}}</span></div>
</div>
@@ -36,12 +36,19 @@ const changeTab = (val:number) => {
font-size: 14px;
cursor: pointer;
}
.dark .task-tab .text {
color: #9ca3af;
}
.task-tab .active {
position: relative;
color: #2B7FFF;
background: #FFFFFF;
border-radius: 8px;
}
.dark .task-tab .active {
background: #1f1f22;
border-color: #2a2a2d;
}
.task-tab .active::after {
position: absolute;
left: 0;

4
src/pages/home/components/TaskOperationDialog.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-dialog v-model="isVisible" :title="title" width="480" align-center>
<el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="pl-4 pr-4 pt-4">
<el-dialog v-model="isVisible" :title="title" width="480" align-center class="dark-dialog">
<el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="pl-4 pr-4 pt-4 dark-form">
<el-form-item label="选择房型" prop="roomType">
<el-select v-model="form.roomType" placeholder="请选择房型">
<el-option v-for="item in roomList" :label="item.pmsName" :value="item.id" />

14
src/pages/home/components/chat/AttachmentPreview.vue
View File

@@ -1,11 +1,11 @@
<template>
<div
class="relative inline-flex items-center gap-2 px-2 py-1.5 bg-white border border-[#E5E8EE] rounded-lg overflow-hidden"
class="relative inline-flex items-center gap-2 px-2 py-1.5 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg overflow-hidden"
>
<!-- staging overlay -->
<div
v-if="status === 'staging'"
class="absolute inset-0 bg-white/60 flex items-center justify-center z-10"
class="absolute inset-0 bg-white/60 dark:bg-[#1f1f22]/60 flex items-center justify-center z-10"
>
<RiLoader4Line class="animate-spin text-[#2B7FFF]" size="16px" />
</div>
@@ -13,9 +13,9 @@
<!-- error overlay -->
<div
v-if="status === 'error'"
class="absolute inset-0 bg-red-50/80 flex items-center justify-center z-10"
class="absolute inset-0 bg-red-50/80 dark:bg-red-900/30 flex items-center justify-center z-10"
>
<span class="text-[10px] text-red-600 font-medium">{{ errorText || 'Error' }}</span>
<span class="text-[10px] text-red-600 dark:text-red-400 font-medium">{{ errorText || 'Error' }}</span>
</div>
<img
@@ -23,15 +23,15 @@
:src="attachment.preview"
class="w-10 h-10 object-cover rounded"
/>
<div v-else class="w-10 h-10 flex items-center justify-center bg-[#F5F7FA] rounded">
<div v-else class="w-10 h-10 flex items-center justify-center bg-[#F5F7FA] dark:bg-[#222225] rounded">
<RiFileLine size="18px" class="text-gray-400" />
</div>
<div class="flex flex-col min-w-0">
<span class="text-xs text-gray-700 truncate max-w-[120px]">
<span class="text-xs text-gray-700 dark:text-gray-100 truncate max-w-[120px]">
{{ attachment.fileName }}
</span>
<span v-if="attachment.fileSize > 0" class="text-[10px] text-gray-400">
<span v-if="attachment.fileSize > 0" class="text-[10px] text-gray-400 dark:text-gray-500">
{{ formatSize(attachment.fileSize) }}
</span>
</div>

2
src/pages/home/components/chat/ChatActivityIndicator.vue
View File

@@ -2,7 +2,7 @@
<div class="flex items-start gap-3 justify-start">
<ChatAvatar :src="aiAvatarSrc" />
<div
class="px-4 py-3 bg-white border border-[#E5E8EE] rounded-2xl rounded-tl-sm flex items-center gap-2 text-sm text-gray-600"
class="px-4 py-3 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-2xl rounded-tl-sm flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300"
>
<RiLoader4Line class="animate-spin" size="16px" />
<span>{{ text }}</span>

4
src/pages/home/components/chat/ChatEmpty.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col h-full overflow-auto py-6 px-6">
<div class="pt-30">
<h1 class="text-[28px] font-bold mb-7 leading-tight">
<h1 class="text-[28px] font-bold mb-7 leading-tight dark:text-gray-100">
你好，<br />
我今天能帮你什么？
</h1>
@@ -9,7 +9,7 @@
<button
v-for="tag in quickTags"
:key="tag"
class="px-3 py-1.5 rounded-2xl border border-[#E5E8EE] text-[13px] text-[#333] cursor-pointer hover:bg-[#2B7FFF] hover:text-white hover:border-[#2B7FFF] transition-colors"
class="px-3 py-1.5 rounded-2xl border border-[#E5E8EE] dark:border-[#2a2a2d] text-[13px] text-[#333] dark:text-gray-100 cursor-pointer hover:bg-[#2B7FFF] hover:text-white hover:border-[#2B7FFF] transition-colors"
@click="emit('click-tag', tag)"
>
{{ tag }}

2
src/pages/home/components/chat/ChatErrorBar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="error"
class="flex items-center gap-3 px-4 py-2 bg-red-50 border-t border-red-200 text-red-600 text-sm"
class="flex items-center gap-3 px-4 py-2 bg-red-50 dark:bg-red-900/20 border-t border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm"
>
<RiErrorWarningLine size="16px" />
<span class="flex-1">{{ error }}</span>

18
src/pages/home/components/chat/ChatInput.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="bg-white rounded-lg border border-[#eef2f6] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between gap-3"
class="bg-white dark:bg-[#1f1f22] rounded-lg border border-[#eef2f6] dark:border-[#2a2a2d] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between gap-3"
>
<!-- Agent chip -->
<div v-if="agentName" class="flex items-center gap-2">
@@ -8,7 +8,7 @@
@{{ agentName }}
</span>
<button
class="text-gray-400 hover:text-gray-600"
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
@click="emit('clear-agent')"
>
<RiCloseLine size="12px" />
@@ -19,7 +19,7 @@
rows="2"
:value="modelValue"
:placeholder="placeholder"
class="w-full flex-1 resize-none outline-none text-sm text-gray-700"
class="w-full flex-1 resize-none outline-none text-sm text-gray-700 dark:text-gray-100 bg-transparent"
@input="onInput"
@keydown.enter="onEnter"
/>
@@ -29,14 +29,14 @@
<div
v-for="(file, idx) in attachments"
:key="idx"
class="inline-flex items-center gap-2 px-2 py-1 bg-[#F5F7FA] border border-[#E5E8EE] rounded-lg"
class="inline-flex items-center gap-2 px-2 py-1 bg-[#F5F7FA] dark:bg-[#222225] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg"
>
<img
v-if="file.preview && isImageMime(file.mimeType)"
:src="file.preview"
class="w-8 h-8 object-cover rounded"
/>
<span class="text-xs text-gray-600 truncate max-w-[120px]">
<span class="text-xs text-gray-600 dark:text-gray-300 truncate max-w-[120px]">
{{ file.fileName }}
</span>
<button
@@ -51,7 +51,7 @@
<div class="flex justify-between items-end">
<div class="flex items-center gap-1">
<button
class="p-2 rounded-md cursor-pointer hover:bg-[#F5F7FA] hover:text-[#2B7FFF]"
class="p-2 rounded-md cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d] hover:text-[#2B7FFF] dark:text-gray-300"
@click="triggerFileInput"
>
<RiLink size="18px" />
@@ -64,7 +64,7 @@
@change="onFileChange"
/>
<button
class="p-2 rounded-md cursor-pointer hover:bg-[#F5F7FA] hover:text-[#2B7FFF]"
class="p-2 rounded-md cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d] hover:text-[#2B7FFF] dark:text-gray-300"
@click="emit('mention-agent')"
>
<RiAtLine size="18px" />
@@ -75,8 +75,8 @@
class="w-12 h-12 px-2.5 py-1.5 rounded-md flex items-center justify-center cursor-pointer transition-colors"
:class="
isSending
? 'bg-gray-200 text-gray-600'
: 'bg-[#F5F7FA] hover:bg-[#2B7FFF] hover:text-white'
? 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300'
: 'bg-[#F5F7FA] dark:bg-[#222225] hover:bg-[#2B7FFF] hover:text-white'
"
@click="onAction"
>

24
src/pages/home/components/chat/ChatMessage.vue
View File

@@ -10,13 +10,13 @@
class="flex items-start gap-2 pt-0.5 mb-2"
:class="isUser ? 'flex-row-reverse' : 'flex-row'"
>
<span class="text-xs text-[#4E5969]">{{ isUser ? '我' : 'NIANXX' }}</span>
<span class="text-xs text-[#86909C]">{{ formattedTime }}</span>
<span class="text-xs text-[#4E5969] dark:text-gray-300">{{ isUser ? '我' : 'NIANXX' }}</span>
<span class="text-xs text-[#86909C] dark:text-gray-500">{{ formattedTime }}</span>
</div>
<!-- User message -->
<template v-if="isUser">
<div class="text-sm text-gray-700 bg-[#f7f9fc] rounded-md px-3 py-2 whitespace-pre-wrap">
<div class="text-sm text-gray-700 dark:text-gray-100 bg-[#f7f9fc] dark:bg-[#222225] rounded-md px-3 py-2 whitespace-pre-wrap">
{{ displayText }}
</div>
@@ -25,7 +25,7 @@
<div
v-for="file in attachedFiles"
:key="file.fileName"
class="inline-flex items-center gap-2 px-2 py-1 bg-white border border-[#E5E8EE] rounded-lg text-xs text-gray-600"
class="inline-flex items-center gap-2 px-2 py-1 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg text-xs text-gray-600 dark:text-gray-300"
>
<img
v-if="file.preview && isImageMime(file.mimeType)"
@@ -39,21 +39,21 @@
<!-- Assistant message -->
<template v-else>
<div class="flex flex-col text-sm text-gray-700">
<div class="flex flex-col text-sm text-gray-700 dark:text-gray-100">
<!-- Loading -->
<ChatLoading v-if="isStreaming && !displayText && !hasBlocks" />
<!-- Markdown text -->
<div
v-if="markdownHtml"
class="bg-[#f7f9fc] rounded-md px-3 py-2 prose prose-sm"
class="bg-[#f7f9fc] dark:bg-[#222225] rounded-md px-3 py-2 prose prose-sm"
v-html="markdownHtml"
/>
<!-- Thinking block -->
<div
v-if="thinkingText && store.showThinking"
class="mt-2 p-2 rounded bg-gray-100 text-xs text-gray-500 border-l-2 border-[#2B7FFF]"
class="mt-2 p-2 rounded bg-gray-100 dark:bg-[#1f1f22] text-xs text-gray-500 dark:text-gray-400 border-l-2 border-[#2B7FFF]"
>
<div class="font-medium mb-1">思考过程</div>
<pre class="whitespace-pre-wrap font-mono">{{ thinkingText }}</pre>
@@ -63,9 +63,9 @@
<div
v-for="tool in tools"
:key="tool.id || tool.name"
class="mt-2 px-3 py-2 bg-white border border-[#E5E8EE] rounded-lg"
class="mt-2 px-3 py-2 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg"
>
<div class="flex items-center gap-2 text-xs text-gray-600">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-[#2B7FFF]" />
<span class="font-medium">Tool: {{ tool.name }}</span>
<span
@@ -78,7 +78,7 @@
</div>
<pre
v-if="tool.input || tool.arguments"
class="mt-1 text-[11px] text-gray-500 bg-[#F5F7FA] rounded p-1.5 overflow-x-auto"
class="mt-1 text-[11px] text-gray-500 dark:text-gray-400 bg-[#F5F7FA] dark:bg-[#222225] rounded p-1.5 overflow-x-auto"
>{{ JSON.stringify(tool.input ?? tool.arguments, null, 2) }}</pre>
</div>
@@ -86,7 +86,7 @@
<div v-for="(img, idx) in images" :key="idx" class="mt-2">
<img
:src="img.url || `data:${img.mimeType};base64,${img.data}`"
class="max-w-full rounded-md border border-[#E5E8EE]"
class="max-w-full rounded-md border border-[#E5E8EE] dark:border-[#2a2a2d]"
/>
</div>
@@ -102,7 +102,7 @@
<!-- Hover actions -->
<div
class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between gap-4 text-gray-500"
class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between gap-4 text-gray-500 dark:text-gray-400"
>
<div
class="flex items-center gap-1 cursor-pointer hover:text-[#2B7FFF]"

2
src/pages/home/components/chat/ChatTypingIndicator.vue
View File

@@ -2,7 +2,7 @@
<div class="flex items-start gap-3 justify-start">
<ChatAvatar :src="aiAvatarSrc" />
<div
class="px-4 py-3 bg-white border border-[#E5E8EE] rounded-2xl rounded-tl-sm flex items-center gap-1"
class="px-4 py-3 bg-white dark:bg-[#1f1f22] border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-2xl rounded-tl-sm flex items-center gap-1"
>
<span class="dot" />
<span class="dot" />

8
src/pages/home/components/chat/ExecutionGraphCard.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="ml-12 border border-[#E5E8EE] rounded-lg bg-white p-3 max-w-[75%]">
<div class="ml-12 border border-[#E5E8EE] dark:border-[#2a2a2d] rounded-lg bg-white dark:bg-[#1f1f22] p-3 max-w-[75%]">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-medium text-gray-500">{{ agentLabel || '任务执行' }}</span>
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ agentLabel || '任务执行' }}</span>
<span
v-if="active"
class="inline-flex items-center gap-1 text-[10px] text-[#2B7FFF]"
@@ -27,8 +27,8 @@
"
/>
<div class="flex-1 min-w-0">
<div class="text-sm text-gray-700">{{ step.name }}</div>
<div v-if="step.summary" class="text-[11px] text-gray-400 truncate">
<div class="text-sm text-gray-700 dark:text-gray-100">{{ step.name }}</div>
<div v-if="step.summary" class="text-[11px] text-gray-400 dark:text-gray-500 truncate">
{{ step.summary }}
</div>
</div>

4
src/pages/home/index.vue
View File

@@ -2,11 +2,11 @@
<layout>
<div class="flex h-full w-full flex-col md:flex-row">
<ChatHistory class="flex-none" @new-chat="handleNewChat" @select-chat="handleSelectChat" />
<div class="flex-1 mr-2 overflow-hidden bg-white rounded-xl flex flex-col">
<div class="flex-1 mr-2 overflow-hidden bg-white dark:bg-[#1b1b1d] rounded-xl flex flex-col">
<ChatBox class="flex-1" />
<TaskCenter />
</div>
<Task class="w-[392px] h-full rounded-[16px] bg-white" />
<Task class="w-[392px] h-full rounded-[16px] bg-white dark:bg-[#1b1b1d]" />
</div>
<TaskOperationDialog ref="taskOperationDialog" />