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

feat(ui): 优化会话操作图标并增加流式加载指示

This commit is contained in:
肖应宇 2026-04-10 10:00:48 +08:00
parent 3bab2b008f
commit 375a7bd16e
8 changed files with 128 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/icons/custom/DeleteIcon.vue
View File

@ -1,8 +1,8 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
<path d="M0.5 2.9H2.9M13.3 2.9H10.9M10.9 2.9V2.5C10.9 1.39543 10.0046 0.5 8.9 0.5H4.9C3.79543 0.5 2.9 1.39543 2.9 2.5V2.9M10.9 2.9H2.9" stroke="#666666" stroke-linecap="round"/>
<path d="M2.09985 5.3V12.1C2.09985 13.2046 2.99528 14.1 4.09985 14.1H9.69986C10.8044 14.1 11.6999 13.2046 11.6999 12.1V5.3M5.29985 6.1V12.5M8.49985 6.1V12.5" stroke="#666666" stroke-linecap="round"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M1.6001 3.19999H4.0001M14.4001 3.19999H12.0001M12.0001 3.19999V2.79999C12.0001 1.69542 11.1047 0.799988 10.0001 0.799988H6.0001C4.89553 0.799988 4.0001 1.69542 4.0001 2.79999V3.19999M12.0001 3.19999H4.0001" stroke="currentColor" stroke-linecap="round" />
<path d="M3.19995 5.59998V12.4C3.19995 13.5045 4.09538 14.4 5.19995 14.4H10.8C11.9045 14.4 12.8 13.5045 12.8 12.4V5.59998M6.39995 6.39998V12.8M9.59995 6.39998V12.8" stroke="currentColor" stroke-linecap="round" />
</svg>
</template>
<script setup lang="ts">

6
src/components/icons/custom/EditIcon.vue
View File

@ -1,8 +1,8 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M11.7854 6.40508L3.71021 14.4783H1.51099V12.2791L9.58423 4.2039L11.7854 6.40508ZM12.3801 1.52031C12.4497 1.52042 12.5204 1.54921 12.5735 1.60234L14.387 3.41484C14.4383 3.46622 14.467 3.53595 14.467 3.6082C14.467 3.66395 14.4509 3.71702 14.4211 3.76152L14.387 3.80254L13.3225 4.86699L11.1213 2.66582L12.1858 1.60234L12.1887 1.60039C12.2399 1.5487 12.3071 1.52031 12.3801 1.52031Z" stroke="#666666" stroke-linejoin="round"/>
<path d="M6 14.5H14.5" stroke="#666666" stroke-linecap="round"/>
</svg>
<path d="M11.7854 6.40509L3.71021 14.4783H1.51099V12.2791L9.58423 4.20392L11.7854 6.40509ZM12.3801 1.52032C12.4497 1.52043 12.5204 1.54923 12.5735 1.60236L14.387 3.41486C14.4383 3.46624 14.467 3.53597 14.467 3.60822C14.467 3.66397 14.4509 3.71704 14.4211 3.76154L14.387 3.80255L13.3225 4.867L11.1213 2.66583L12.1858 1.60236L12.1887 1.6004C12.2399 1.54872 12.3071 1.52032 12.3801 1.52032Z" stroke="currentColor" stroke-linejoin="round" />
<path d="M6 14.5H14.5" stroke="currentColor" stroke-linecap="round" />
</svg>
</template>
<script setup lang="ts">

26
src/components/icons/custom/PinActionIcon.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M5.43994 0.5H5.44189L7.99268 0.507812H8.0083L10.5581 0.5H10.5601C10.6453 0.500024 10.7177 0.541283 10.7603 0.600586L10.7925 0.666016C10.8015 0.697293 10.8004 0.716064 10.7954 0.732422C10.7899 0.750047 10.767 0.804834 10.6704 0.886719L10.6411 0.914062L10.0366 1.51758C9.84509 1.70911 9.74857 1.9731 9.76904 2.23926L9.77002 2.24121L10.0864 6.15332V6.1543C10.1201 6.56503 10.2691 6.95616 10.5151 7.28418L10.6265 7.4209L11.5933 8.5127C11.6397 8.56497 11.6702 8.62659 11.6841 8.68945L11.6929 8.75293C11.6937 8.78175 11.6899 8.8027 11.686 8.81641C11.6827 8.82804 11.6786 8.83521 11.6733 8.8418C11.6651 8.85078 11.647 8.8623 11.6216 8.8623H11.6206L8.87158 8.84277H7.12842L4.37939 8.8623H4.37842C4.34895 8.8623 4.33235 8.84936 4.32764 8.84375L4.32666 8.84277C4.32122 8.83606 4.31665 8.82825 4.31299 8.81543C4.30892 8.80101 4.30578 8.77903 4.30615 8.74902C4.30865 8.66986 4.34102 8.58452 4.40479 8.5127H4.40576L5.37256 7.4209C5.68385 7.06918 5.8747 6.62516 5.91162 6.15332L6.229 2.24121V2.23926C6.24675 2.00853 6.1773 1.77409 6.02783 1.58984L5.95947 1.51465L5.34521 0.900391L5.32959 0.886719L5.27002 0.831055C5.22258 0.780136 5.2087 0.745665 5.20459 0.732422C5.19958 0.716074 5.19847 0.697262 5.20752 0.666016C5.23456 0.573903 5.32611 0.500071 5.43994 0.5Z"
stroke="currentColor"
/>
<path d="M8 9V15.5" stroke="currentColor" stroke-linecap="round" />
</svg>
</template>
<script setup lang="ts">
withDefaults(
defineProps<{
size?: number;
}>(),
{
size: 18,
},
);
</script>

27
src/components/icons/custom/PinOffActionIcon.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M5.43994 0.5H5.44189L7.99268 0.507812H8.0083L10.5581 0.5H10.5601C10.6453 0.500024 10.7177 0.541283 10.7603 0.600586L10.7925 0.666016C10.8015 0.697293 10.8004 0.716064 10.7954 0.732422C10.7899 0.750047 10.767 0.804834 10.6704 0.886719L10.6411 0.914062L10.0366 1.51758C9.84509 1.70911 9.74857 1.9731 9.76904 2.23926L9.77002 2.24121L10.0864 6.15332V6.1543C10.1201 6.56503 10.2691 6.95616 10.5151 7.28418L10.6265 7.4209L11.5933 8.5127C11.6397 8.56497 11.6702 8.62659 11.6841 8.68945L11.6929 8.75293C11.6937 8.78175 11.6899 8.8027 11.686 8.81641C11.6827 8.82804 11.6786 8.83521 11.6733 8.8418C11.6651 8.85078 11.647 8.8623 11.6216 8.8623H11.6206L8.87158 8.84277H7.12842L4.37939 8.8623H4.37842C4.34895 8.8623 4.33235 8.84936 4.32764 8.84375L4.32666 8.84277C4.32122 8.83606 4.31665 8.82825 4.31299 8.81543C4.30892 8.80101 4.30578 8.77903 4.30615 8.74902C4.30865 8.66986 4.34102 8.58452 4.40479 8.5127H4.40576L5.37256 7.4209C5.68385 7.06918 5.8747 6.62516 5.91162 6.15332L6.229 2.24121V2.23926C6.24675 2.00853 6.1773 1.77409 6.02783 1.58984L5.95947 1.51465L5.34521 0.900391L5.32959 0.886719L5.27002 0.831055C5.22258 0.780136 5.2087 0.745665 5.20459 0.732422C5.19958 0.716074 5.19847 0.697262 5.20752 0.666016C5.23456 0.573903 5.32611 0.500071 5.43994 0.5Z"
stroke="currentColor"
/>
<path d="M8 9V15.5" stroke="currentColor" stroke-linecap="round" />
<path d="M12 4L8 8L4 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</template>
<script setup lang="ts">
withDefaults(
defineProps<{
size?: number;
}>(),
{
size: 18,
},
);
</script>

19
src/components/icons/custom/ShareIcon.vue
View File

@ -1,18 +1,11 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_75_622)">
<circle cx="10.5" cy="2.5" r="2" stroke="#666666"/>
<circle cx="3.5" cy="7.5" r="2" stroke="#666666"/>
<path d="M8.79367 3.71881L5.19458 6.28959" stroke="#666666" stroke-linecap="round"/>
<path d="M5 9L9.5 12" stroke="#666666" stroke-linecap="round"/>
<circle cx="12" cy="13" r="2.5" stroke="#666666"/>
</g>
<defs>
<clipPath id="clip0_75_622">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
<circle cx="10.5" cy="2.5" r="2" stroke="currentColor" />
<circle cx="3.5" cy="7.5" r="2" stroke="currentColor" />
<path d="M8.79367 3.71881L5.19458 6.28959" stroke="currentColor" stroke-linecap="round" />
<path d="M5 9L9.5 12" stroke="currentColor" stroke-linecap="round" />
<circle cx="12" cy="13" r="2.5" stroke="currentColor" />
</svg>
</template>
<script setup lang="ts">

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

@ -130,11 +130,13 @@
</template>
<!-- 加载动画 -->
<!-- <div v-if="message.isStreaming && !message.content.text" class="loading-dots">
<span></span>
<span></span>
<span></span>
</div> -->
<div
v-if="message.role === 'assistant' && message.isStreaming"
class="loading-spinner-row"
aria-label="模型正在生成中"
>
<span class="loading-spinner" aria-hidden="true"></span>
</div>
</div>
<!-- 操作栏 -->
@ -451,11 +453,9 @@ setCustomComponents("playground-demo", {
// markstream-vue 样式覆盖
.text-content {
:deep(p) {
margin: 0 0 12px;
margin: 0 0 16px;
&:last-child {
margin-bottom: 0;
}
}
:deep(ul),
@ -834,6 +834,26 @@ display: flex;
}
}
.loading-spinner-row {
display: flex;
align-items: center;
padding: 8px 0 0;
}
.loading-spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(102, 102, 102, 0.25);
border-top-color: #666666;
border-radius: 50%;
animation: spin 0.8s linear infinite;
.dark & {
border-color: rgba(255, 255, 255, 0.25);
border-top-color: #f3f4f6;
}
}
@keyframes fadeIn {
from {
opacity: 0;
@ -875,6 +895,12 @@ display: flex;
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
// 消息选择复选框
.message-checkbox {
position: absolute;

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

@ -39,12 +39,11 @@
<n-tooltip :style="{ borderRadius: '5px', padding: '7px 15px' }">
<template #trigger>
<button
class="action-btn"
class="action-btn pin-toggle-btn"
@click="handleTogglePin"
>
<!-- TODO: 取消置顶图标 -->
<PinOff v-if="conversation.pinned" :size="14" />
<PinIcon v-else :size="14" />
<PinOffActionIcon v-if="conversation.pinned" :size="14" />
<PinActionIcon v-else :size="14" />
</button>
</template>
{{ conversation.pinned ? '取消置顶' : '置顶' }}
@ -83,7 +82,6 @@
<script setup lang="ts">
import { ref, computed, nextTick } from "vue";
import {
PinOff,
Check,
} from "@/components/icons";
import { formatTimestamp } from "@/utils/helpers";
@ -91,6 +89,8 @@ import type { Conversation } from "@/types/chat";
import { NTooltip } from "naive-ui";
import MessageIcon from "../icons/custom/MessageIcon.vue";
import PinIcon from "../icons/custom/PinIcon.vue";
import PinActionIcon from "../icons/custom/PinActionIcon.vue";
import PinOffActionIcon from "../icons/custom/PinOffActionIcon.vue";
import EditIcon from "../icons/custom/EditIcon.vue";
import DeleteIcon from "../icons/custom/DeleteIcon.vue";
import ShareIcon from "../icons/custom/ShareIcon.vue";
@ -326,7 +326,7 @@ function handleDelete() {
&:hover {
background: rgba(0, 0, 0, 0.1);
color: #374151;
color: #000F33;
.dark & {
background: rgba(255, 255, 255, 0.1);
@ -335,8 +335,23 @@ function handleDelete() {
}
&.delete:hover {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
color: #f86361;
}
}
.pin-toggle-btn {
color: #666666;
.dark & {
color: #666666;
}
&:hover {
color: #000f33;
.dark & {
color: #000f33;
}
}
}

4
src/styles/main.scss
View File

@ -91,3 +91,7 @@ body,
opacity: 0;
transform: translateX(-20px);
}
hr.hr-node[custom-id="playground-demo"]{
margin: 1rem 0;
}