kexueadmin
/
ai-chat-ui
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(ui): 提交其余界面改动

This commit is contained in:
肖应宇 2026-04-09 15:35:23 +08:00
parent 47adf9d2cf
commit 88e43c1763
19 changed files with 72 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/chat/ChatHeader.vue
View File

@ -263,7 +263,7 @@ if (typeof window !== "undefined") {
} }
.learning-mode-label { .learning-mode-label {
font-size: 13px; font-size: 14px;
color: #6b7280; color: #6b7280;
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;

4
src/components/chat/ChatMain.vue
View File

@ -516,6 +516,7 @@ watch(
.chat-main { .chat-main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 900px;
flex: 1; flex: 1;
height: 100vh; height: 100vh;
background: #ffffff; background: #ffffff;
@ -545,8 +546,7 @@ watch(
} }
.input-container { .input-container {
margin: auto; margin: 0 22%;
width: 55%;
// min-width: 1000px; // min-width: 1000px;
// margin: 0 auto; // margin: 0 auto;
transition: max-width 0.3s ease; transition: max-width 0.3s ease;

54
src/components/chat/MessageList.vue
View File

@ -13,11 +13,7 @@
<button class="action-btn cancel" @click="handleCancelSelect"> <button class="action-btn cancel" @click="handleCancelSelect">
取消 取消
</button> </button>
<button <button class="action-btn confirm" :disabled="selectedMessageCount === 0" @click="handleConfirmShare">
class="action-btn confirm"
:disabled="selectedMessageCount === 0"
@click="handleConfirmShare"
>
确认分享 确认分享
</button> </button>
</div> </div>
@ -26,36 +22,21 @@
<div ref="containerRef" class="message-list" @scroll="handleScroll"> <div ref="containerRef" class="message-list" @scroll="handleScroll">
<!-- 欢迎界面 --> <!-- 欢迎界面 -->
<WelcomeScreen <WelcomeScreen v-if="visibleMessages.length === 0" @select="$emit('select-suggestion', $event)" />
v-if="visibleMessages.length === 0"
@select="$emit('select-suggestion', $event)"
/>
<!-- 消息列表 --> <!-- 消息列表 -->
<template v-else> <template v-else>
<div class="messages-wrapper"> <div class="messages-wrapper">
<TransitionGroup name="message"> <TransitionGroup name="message">
<MessageBubble <MessageBubble v-for="(message, index) in visibleMessages" :key="message.id" :message="message"
v-for="(message, index) in visibleMessages" :show-timestamp="showTimestamp" :compact="compact" :is-New="index === visibleMessages.length - 1"
:key="message.id" :is-message-select-mode="isMessageSelectMode" :is-selected="isMessageSelected(message.id)"
:message="message" @retry="$emit('retry', message.id)" @regenerate="$emit('regenerate', message.id)"
:show-timestamp="showTimestamp" @copy="handleCopy(message)" @like="handleLike(message)" @dislike="handleDislike(message)"
:compact="compact" @select-suggestion="$emit('select-suggestion', $event)" @preview-image="handlePreviewImage"
:is-New="index === visibleMessages.length - 1" @play-video="handlePlayVideo" @download-file="handleDownloadFile"
:is-message-select-mode="isMessageSelectMode"
:is-selected="isMessageSelected(message.id)"
@retry="$emit('retry', message.id)"
@regenerate="$emit('regenerate', message.id)"
@copy="handleCopy(message)"
@like="handleLike(message)"
@dislike="handleDislike(message)"
@select-suggestion="$emit('select-suggestion', $event)"
@preview-image="handlePreviewImage"
@play-video="handlePlayVideo"
@download-file="handleDownloadFile"
@toggle-select="handleToggleMessageSelect(message.id)" @toggle-select="handleToggleMessageSelect(message.id)"
@enter-select-mode="handleEnterSelectMode(message.id)" @enter-select-mode="handleEnterSelectMode(message.id)" />
/>
</TransitionGroup> </TransitionGroup>
<!-- 正在输入指示器 --> <!-- 正在输入指示器 -->
@ -75,11 +56,7 @@
</div> </div>
<!-- 回到底部按钮 --> <!-- 回到底部按钮 -->
<Transition name="fade"> <Transition name="fade">
<button <button v-if="showScrollButton" class="scroll-bottom-btn" @click="handleScrollToBottom">
v-if="showScrollButton"
class="scroll-bottom-btn"
@click="handleScrollToBottom"
>
<ChevronDown :size="20" /> <ChevronDown :size="20" />
<span v-if="newMessageCount > 0" class="new-count"> <span v-if="newMessageCount > 0" class="new-count">
{{ newMessageCount }} {{ newMessageCount }}
@ -301,6 +278,7 @@ onMounted(() => {
.message-list-container { .message-list-container {
flex: 1; flex: 1;
position: relative; position: relative;
min-width: 900px;
min-height: 0; min-height: 0;
} }
@ -359,6 +337,7 @@ onMounted(() => {
&:nth-child(1) { &:nth-child(1) {
animation-delay: -0.32s; animation-delay: -0.32s;
} }
&:nth-child(2) { &:nth-child(2) {
animation-delay: -0.16s; animation-delay: -0.16s;
} }
@ -366,7 +345,7 @@ onMounted(() => {
} }
.typing-text { .typing-text {
font-size: 13px; font-size: 14px;
color: #9ca3af; color: #9ca3af;
} }
@ -451,6 +430,7 @@ onMounted(() => {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@ -458,12 +438,14 @@ onMounted(() => {
} }
@keyframes typingBounce { @keyframes typingBounce {
0%, 0%,
80%, 80%,
100% { 100% {
transform: scale(0.7); transform: scale(0.7);
opacity: 0.5; opacity: 0.5;
} }
40% { 40% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
@ -512,7 +494,7 @@ onMounted(() => {
padding: 8px 16px; padding: 8px 16px;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;

6
src/components/chat/WelcomeScreen.vue
View File

@ -272,7 +272,7 @@ const suggestions = computed(() => {
p { p {
margin: 0; margin: 0;
font-size: 13px; font-size: 14px;
color: #6b7280; color: #6b7280;
line-height: 1.5; line-height: 1.5;
@ -330,12 +330,10 @@ const suggestions = computed(() => {
} }
// TODO: 悬浮边框和背景颜色 // TODO: 悬浮边框和背景颜色
&:hover { &:hover {
border-color: #3b82f6;
background: rgba(59, 130, 246, 0.05); background: rgba(59, 130, 246, 0.05);
.arrow-icon { .arrow-icon {
transform: translateX(4px); transform: translateX(4px);
color: #3b82f6;
} }
} }
@ -367,7 +365,7 @@ const suggestions = computed(() => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; font-size: 14px;
color: #9ca3af; color: #9ca3af;
kbd { kbd {

2
src/components/input/ChatInput.vue
View File

@ -667,7 +667,7 @@ onMounted(() => {
background: var(---FFFFFF, #FFF); background: var(---FFFFFF, #FFF);
border: 1px solid transparent; border: 1px solid transparent;
color: var(--6-666666, #666); color: var(--6-666666, #666);
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;

2
src/components/input/UploadActionCards.vue
View File

@ -153,7 +153,7 @@ function handleClick(action: UploadAction) {
} }
.card-title { .card-title {
font-size: 13px; font-size: 14px;
font-weight: 700; font-weight: 700;
line-height: 1.1; line-height: 1.1;
} }

4
src/components/message/CodeBlock.vue
View File

@ -120,7 +120,7 @@ function toggleExpand() {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #a6adc8; color: #a6adc8;
@ -170,7 +170,7 @@ function toggleExpand() {
code { code {
font-family: "JetBrains Mono", "Fira Code", "Monaco", monospace; font-family: "JetBrains Mono", "Fira Code", "Monaco", monospace;
font-size: 13px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
color: #cdd6f4; color: #cdd6f4;
tab-size: 2; tab-size: 2;

2
src/components/message/MessageActions.vue
View File

@ -276,7 +276,7 @@ if (typeof window !== "undefined") {
border-radius: 8px; border-radius: 8px;
background: transparent; background: transparent;
color: #374151; color: #374151;
font-size: 13px; font-size: 14px;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;

26
src/components/message/MessageBubble.vue
View File

@ -361,17 +361,17 @@ setCustomComponents("playground-demo", {
.message-body { .message-body {
position: relative; position: relative;
&::after { // &::after {
content: ""; // content: "";
position: absolute; // position: absolute;
bottom: 12px; // bottom: 12px;
right: 12px; // right: 12px;
width: 8px; // width: 8px;
height: 8px; // height: 8px;
background: #3b82f6; // background: #3b82f6;
border-radius: 50%; // border-radius: 50%;
animation: pulse 1.5s infinite; // animation: pulse 1.5s infinite;
} // }
} }
} }
} }
@ -573,7 +573,7 @@ setCustomComponents("playground-demo", {
border-radius: 6px; border-radius: 6px;
background: #ef4444; background: #ef4444;
color: white; color: white;
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background 0.2s ease; transition: background 0.2s ease;
@ -599,7 +599,7 @@ setCustomComponents("playground-demo", {
border-radius: 20px; border-radius: 20px;
background: white; background: white;
color: #374151; color: #374151;
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;

7
src/components/message/components/ThinkingNode.vue
View File

@ -64,7 +64,7 @@ async function textCopy(data: any) {
</div> --> </div> -->
<div class="thinking-title"> <div class="thinking-title">
<!-- TODO: 深度思考样式 --> <!-- TODO: 深度思考样式 -->
<span class="text-lg"> 深度思考</span> <span > 深度思考</span>
<!-- 加载动画 --> <!-- 加载动画 -->
<span v-if="node.loading" class="thinking-dots visible" aria-hidden="true"> <span v-if="node.loading" class="thinking-dots visible" aria-hidden="true">
<span class="dot dot-1" /> <span class="dot dot-1" />
@ -86,7 +86,7 @@ async function textCopy(data: any) {
<!-- 可折叠的内容区域 --> <!-- 可折叠的内容区域 -->
<div class="thinking-content" :class="{ collapsed }"> <div class="thinking-content" :class="{ collapsed }">
<div class="mt-3 text-sm leading-relaxed dark:text-slate-100"> <div class="mt-3 text-[13px] leading-relaxed dark:text-slate-100">
<MarkdownRender :content="node.content" @copy="textCopy" /> <MarkdownRender :content="node.content" @copy="textCopy" />
</div> </div>
</div> </div>
@ -108,6 +108,7 @@ async function textCopy(data: any) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 0 15px 0;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
gap: 12px; gap: 12px;
cursor: pointer; cursor: pointer;
@ -159,7 +160,7 @@ line-height: 21px;
.thinking-content { .thinking-content {
color: var(--9-999999, #999); color: var(--9-999999, #999);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 13px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;

4
src/components/modals/SettingsModal.vue
View File

@ -746,7 +746,7 @@ function handleClearData() {
border-radius: 10px; border-radius: 10px;
background: white; background: white;
color: #6b7280; color: #6b7280;
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -786,7 +786,7 @@ function handleClearData() {
border-radius: 8px; border-radius: 8px;
background: transparent; background: transparent;
color: #6b7280; color: #6b7280;
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;

4
src/components/modals/ShareModal.vue
View File

@ -354,7 +354,7 @@ watch(show, (newVal: boolean) => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; font-size: 14px;
color: #4b5563; color: #4b5563;
.dark & { .dark & {
@ -495,7 +495,7 @@ watch(show, (newVal: boolean) => {
padding: 12px; padding: 12px;
background: rgba(59, 130, 246, 0.05); background: rgba(59, 130, 246, 0.05);
border-radius: 10px; border-radius: 10px;
font-size: 13px; font-size: 14px;
color: #3b82f6; color: #3b82f6;
.dark & { .dark & {

8
src/components/modals/ShareResultModal.vue
View File

@ -262,7 +262,7 @@ watch(show, (newVal: boolean) => {
.share-section { .share-section {
.share-label { .share-label {
display: block; display: block;
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #374151; color: #374151;
margin-bottom: 8px; margin-bottom: 8px;
@ -282,7 +282,7 @@ watch(show, (newVal: boolean) => {
padding: 12px 14px; padding: 12px 14px;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 10px; border-radius: 10px;
font-size: 13px; font-size: 14px;
color: #1f2937; color: #1f2937;
background: #f9fafb; background: #f9fafb;
@ -307,7 +307,7 @@ watch(show, (newVal: boolean) => {
border-radius: 10px; border-radius: 10px;
background: #f3f4f6; background: #f3f4f6;
color: #374151; color: #374151;
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -336,7 +336,7 @@ watch(show, (newVal: boolean) => {
padding: 12px; padding: 12px;
background: rgba(245, 158, 11, 0.1); background: rgba(245, 158, 11, 0.1);
border-radius: 10px; border-radius: 10px;
font-size: 13px; font-size: 14px;
color: #f59e0b; color: #f59e0b;
} }

2
src/components/modals/ShortcutsModal.vue
View File

@ -264,7 +264,7 @@ function close() {
} }
.tip { .tip {
font-size: 13px; font-size: 14px;
color: #9ca3af; color: #9ca3af;
kbd { kbd {

2
src/components/sidebar/ChatSidebar.vue
View File

@ -583,7 +583,7 @@ onBeforeUnmount(() => {
.search-placeholder { .search-placeholder {
flex: 1; flex: 1;
font-size: 13px; font-size: 14px;
} }
.search-kbd { .search-kbd {

11
src/components/sidebar/ConversationItem.vue
View File

@ -210,11 +210,22 @@ function handleDelete() {
.item-title { .item-title {
font-weight: 700; font-weight: 700;
} }
}
&.active:hover {
.item-actions { .item-actions {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
.pin-indicator {
opacity: 0;
}
.item-content {
flex: 0 1 clamp(72px, 28%, 96px);
max-width: clamp(72px, 28%, 96px);
}
} }
} }

4
src/components/sidebar/ShareButton.vue
View File

@ -74,7 +74,7 @@ function handleShareCurrent() {
} }
.select-info { .select-info {
font-size: 13px; font-size: 14px;
color: #6b7280; color: #6b7280;
text-align: center; text-align: center;
@ -92,7 +92,7 @@ function handleShareCurrent() {
flex: 1; flex: 1;
padding: 8px 12px; padding: 8px 12px;
border-radius: 10px; border-radius: 10px;
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;

2
src/styles/main.scss
View File

@ -39,7 +39,7 @@
--header-height: 60px; --header-height: 60px;
--app-text-color: #333; --app-text-color: #333;
--app-font-family: "Microsoft YaHei", sans-serif; --app-font-family: "Microsoft YaHei", sans-serif;
--app-font-size: 12px; --app-font-size: 14px;
--app-font-style: normal; --app-font-style: normal;
--app-font-weight: 400; --app-font-weight: 400;
--app-line-height: normal; --app-line-height: normal;

6
src/views/ShareView.vue
View File

@ -347,7 +347,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 13px; font-size: 14px;
color: #6b7280; color: #6b7280;
&.expired { &.expired {
@ -411,7 +411,7 @@ onMounted(() => {
} }
.verify-error { .verify-error {
font-size: 13px; font-size: 14px;
color: #ef4444; color: #ef4444;
margin: 0; margin: 0;
} }
@ -482,7 +482,7 @@ onMounted(() => {
} }
.conversation-count { .conversation-count {
font-size: 13px; font-size: 14px;
color: #6b7280; color: #6b7280;
} }