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 {
font-size: 13px;
font-size: 14px;
color: #6b7280;
user-select: none;
white-space: nowrap;

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

@ -516,6 +516,7 @@ watch(
.chat-main {
display: flex;
flex-direction: column;
min-width: 900px;
flex: 1;
height: 100vh;
background: #ffffff;
@ -545,8 +546,7 @@ watch(
}
.input-container {
margin: auto;
width: 55%;
margin: 0 22%;
// min-width: 1000px;
// margin: 0 auto;
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>
<button
class="action-btn confirm"
:disabled="selectedMessageCount === 0"
@click="handleConfirmShare"
>
<button class="action-btn confirm" :disabled="selectedMessageCount === 0" @click="handleConfirmShare">
确认分享
</button>
</div>
@ -26,36 +22,21 @@
<div ref="containerRef" class="message-list" @scroll="handleScroll">
<!-- 欢迎界面 -->
<WelcomeScreen
v-if="visibleMessages.length === 0"
@select="$emit('select-suggestion', $event)"
/>
<WelcomeScreen v-if="visibleMessages.length === 0" @select="$emit('select-suggestion', $event)" />
<!-- 消息列表 -->
<template v-else>
<div class="messages-wrapper">
<TransitionGroup name="message">
<MessageBubble
v-for="(message, index) in visibleMessages"
:key="message.id"
:message="message"
:show-timestamp="showTimestamp"
:compact="compact"
:is-New="index === visibleMessages.length - 1"
: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"
<MessageBubble v-for="(message, index) in visibleMessages" :key="message.id" :message="message"
:show-timestamp="showTimestamp" :compact="compact" :is-New="index === visibleMessages.length - 1"
: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)"
@enter-select-mode="handleEnterSelectMode(message.id)"
/>
@enter-select-mode="handleEnterSelectMode(message.id)" />
</TransitionGroup>
<!-- 正在输入指示器 -->
@ -75,11 +56,7 @@
</div>
<!-- 回到底部按钮 -->
<Transition name="fade">
<button
v-if="showScrollButton"
class="scroll-bottom-btn"
@click="handleScrollToBottom"
>
<button v-if="showScrollButton" class="scroll-bottom-btn" @click="handleScrollToBottom">
<ChevronDown :size="20" />
<span v-if="newMessageCount > 0" class="new-count">
{{ newMessageCount }}
@ -301,6 +278,7 @@ onMounted(() => {
.message-list-container {
flex: 1;
position: relative;
min-width: 900px;
min-height: 0;
}
@ -359,6 +337,7 @@ onMounted(() => {
&:nth-child(1) {
animation-delay: -0.32s;
}
&:nth-child(2) {
animation-delay: -0.16s;
}
@ -366,7 +345,7 @@ onMounted(() => {
}
.typing-text {
font-size: 13px;
font-size: 14px;
color: #9ca3af;
}
@ -451,6 +430,7 @@ onMounted(() => {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
@ -458,12 +438,14 @@ onMounted(() => {
}
@keyframes typingBounce {
0%,
80%,
100% {
transform: scale(0.7);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
@ -512,7 +494,7 @@ onMounted(() => {
padding: 8px 16px;
border: none;
border-radius: 8px;
font-size: 13px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;

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

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

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

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

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

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

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

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

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

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

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

@ -361,17 +361,17 @@ setCustomComponents("playground-demo", {
.message-body {
position: relative;
&::after {
content: "";
position: absolute;
bottom: 12px;
right: 12px;
width: 8px;
height: 8px;
background: #3b82f6;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
// &::after {
// content: "";
// position: absolute;
// bottom: 12px;
// right: 12px;
// width: 8px;
// height: 8px;
// background: #3b82f6;
// border-radius: 50%;
// animation: pulse 1.5s infinite;
// }
}
}
}
@ -573,7 +573,7 @@ setCustomComponents("playground-demo", {
border-radius: 6px;
background: #ef4444;
color: white;
font-size: 13px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease;
@ -599,7 +599,7 @@ setCustomComponents("playground-demo", {
border-radius: 20px;
background: white;
color: #374151;
font-size: 13px;
font-size: 14px;
cursor: pointer;
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 class="thinking-title">
<!-- TODO: 深度思考样式 -->
<span class="text-lg"> 深度思考</span>
<span > 深度思考</span>
<!-- 加载动画 -->
<span v-if="node.loading" class="thinking-dots visible" aria-hidden="true">
<span class="dot dot-1" />
@ -86,7 +86,7 @@ async function textCopy(data: any) {
<!-- 可折叠的内容区域 -->
<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" />
</div>
</div>
@ -108,6 +108,7 @@ async function textCopy(data: any) {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 15px 0;
border-bottom: 1px solid #e2e8f0;
gap: 12px;
cursor: pointer;
@ -159,7 +160,7 @@ line-height: 21px;
.thinking-content {
color: var(--9-999999, #999);
font-family: "Microsoft YaHei";
font-size: 13px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;

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

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

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

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

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

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

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

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

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

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

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

@ -210,11 +210,22 @@ function handleDelete() {
.item-title {
font-weight: 700;
}
}
&.active:hover {
.item-actions {
opacity: 1;
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 {
font-size: 13px;
font-size: 14px;
color: #6b7280;
text-align: center;
@ -92,7 +92,7 @@ function handleShareCurrent() {
flex: 1;
padding: 8px 12px;
border-radius: 10px;
font-size: 13px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;

2
src/styles/main.scss
View File

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

6
src/views/ShareView.vue
View File

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