feat: 模型Select移动到Sidebar；更改新建对话Button、模型Select的样式，两个组件黑夜模式适配；；更改Sidebar标题为Kexue；更改对话首页标题为Kexue；隐藏Header中的两个按钮；
This commit is contained in:
SuperManTouX
parent
6984a09737
commit
e4b12ae5f5
|
|
@ -19,48 +19,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间：模型选择（可选） -->
|
||||
<div class="header-center">
|
||||
<button class="model-selector" @click="showModelMenu = !showModelMenu">
|
||||
<Sparkles :size="16" />
|
||||
<span>{{ currentModel }}</span>
|
||||
<ChevronDown :size="14" />
|
||||
</button>
|
||||
|
||||
<Transition name="dropdown">
|
||||
<div v-if="showModelMenu" class="model-menu">
|
||||
<button
|
||||
v-for="model in models"
|
||||
:key="model.id"
|
||||
class="model-option"
|
||||
:class="{ active: model.id === currentModelId }"
|
||||
@click="selectModel(model.id, model.name)"
|
||||
>
|
||||
<div class="model-info">
|
||||
<span class="model-name">{{ model.name }}</span>
|
||||
<span class="model-desc">{{ model.description }}</span>
|
||||
</div>
|
||||
<Check
|
||||
v-if="model.id === currentModelId"
|
||||
:size="16"
|
||||
class="check-icon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：操作按钮 -->
|
||||
<div class="header-right">
|
||||
<!-- 对话大小切换 -->
|
||||
<button
|
||||
<!-- <button
|
||||
class="header-btn"
|
||||
:title="isWideMode ? '标准视图' : '宽屏视图'"
|
||||
@click="$emit('toggle-wide-mode')"
|
||||
>
|
||||
<Maximize2 v-if="!isWideMode" :size="18" />
|
||||
<Minimize2 v-else :size="18" />
|
||||
</button>
|
||||
</button> -->
|
||||
|
||||
<!-- 清空对话 -->
|
||||
<button
|
||||
|
|
@ -83,13 +52,13 @@
|
|||
</button>
|
||||
|
||||
<!-- 更多操作 -->
|
||||
<button
|
||||
<!-- <button
|
||||
class="header-btn"
|
||||
title="更多选项"
|
||||
@click="showMoreMenu = !showMoreMenu"
|
||||
>
|
||||
<MoreHorizontal :size="18" />
|
||||
</button>
|
||||
</button> -->
|
||||
|
||||
<Transition name="dropdown">
|
||||
<div v-if="showMoreMenu" class="more-menu">
|
||||
|
|
@ -117,12 +86,9 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Menu,
|
||||
Sparkles,
|
||||
ChevronDown,
|
||||
Check,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Trash2,
|
||||
|
|
@ -134,7 +100,6 @@ import {
|
|||
Settings,
|
||||
} from "@/components/icons";
|
||||
import { useSettingsStore } from "@/stores/settings.ts";
|
||||
import { chatApi } from "@/services/api.ts";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
|
@ -165,37 +130,9 @@ const emit = defineEmits<{
|
|||
"conversation-settings": [];
|
||||
}>();
|
||||
|
||||
const showModelMenu = ref(false);
|
||||
const showMoreMenu = ref(false);
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const currentModel = ref(localStorage.getItem("modelSelect") || "");
|
||||
const currentModelId = ref(settingsStore.getSelectedModelId());
|
||||
const models: any = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
chatApi.getModels().then((res: any) => {
|
||||
models.value = res;
|
||||
// 初始化模型显示名称
|
||||
const model = models.value?.find((m: any) => m.id === currentModelId.value);
|
||||
if (model) {
|
||||
currentModel.value = model.name;
|
||||
} else if (models.value.length > 0) {
|
||||
currentModel.value = models.value[0].name;
|
||||
currentModelId.value = models.value[0].id;
|
||||
}
|
||||
localStorage.setItem("modelSelect", currentModel.value);
|
||||
});
|
||||
});
|
||||
|
||||
function selectModel(modelId: string, modelName: string) {
|
||||
currentModel.value = modelName;
|
||||
currentModelId.value = modelId;
|
||||
localStorage.setItem("modelSelect", modelName);
|
||||
settingsStore.setSelectedModelId(modelId); // 更新选中的模型 ID
|
||||
showModelMenu.value = false;
|
||||
}
|
||||
|
||||
function handleClear() {
|
||||
if (confirm("确定要清空当前对话吗？此操作不可恢复。")) {
|
||||
emit("clear");
|
||||
|
|
@ -220,9 +157,6 @@ function handleArchive() {
|
|||
// 点击外部关闭菜单
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest(".model-selector") && !target.closest(".model-menu")) {
|
||||
showModelMenu.value = false;
|
||||
}
|
||||
if (!target.closest(".header-btn") && !target.closest(".more-menu")) {
|
||||
showMoreMenu.value = false;
|
||||
}
|
||||
|
|
@ -306,114 +240,6 @@ if (typeof window !== "undefined") {
|
|||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.model-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
.dark & {
|
||||
background: #2d2d3d;
|
||||
border-color: #374151;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
svg:first-child {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
}
|
||||
|
||||
.model-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 280px;
|
||||
padding: 8px;
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
|
||||
.dark & {
|
||||
background: #1e1e2e;
|
||||
border-color: #2d2d3d;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.model-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: #f3f4f6;
|
||||
|
||||
.dark & {
|
||||
background: #2d2d3d;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
|
||||
.model-name {
|
||||
color: #3b82f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.model-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.model-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
|
||||
.dark & {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
}
|
||||
|
||||
.model-desc {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -522,9 +348,4 @@ if (typeof window !== "undefined") {
|
|||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.header-center .dropdown-enter-from,
|
||||
.header-center .dropdown-leave-to {
|
||||
transform: translateX(-50%) translateY(-8px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
<div class="logo-glow"></div>
|
||||
</div>
|
||||
<h1 class="title">AI 智能助手</h1>
|
||||
<h1 class="title">Kexue AI 智能助手</h1>
|
||||
<p class="subtitle">我可以帮助你解答问题、生成内容、分析数据等</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="sidebar-header">
|
||||
<div class="logo">
|
||||
<Bot :size="24" class="logo-icon" />
|
||||
<span v-show="!isCollapsed" class="logo-text">AI Chat</span>
|
||||
<span v-show="!isCollapsed" class="logo-text">Kexue AI Chat</span>
|
||||
</div>
|
||||
<button
|
||||
class="collapse-btn"
|
||||
|
|
@ -20,6 +20,37 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 模型选择 -->
|
||||
<div v-show="!isCollapsed" class="model-selector-section">
|
||||
<button class="model-selector" @click="showModelMenu = !showModelMenu">
|
||||
<Sparkles :size="16" />
|
||||
<span class="model-name-display">{{ currentModel }}</span>
|
||||
<ChevronDown :size="14" />
|
||||
</button>
|
||||
|
||||
<Transition name="dropdown">
|
||||
<div v-if="showModelMenu" class="model-menu">
|
||||
<button
|
||||
v-for="model in models"
|
||||
:key="model.id"
|
||||
class="model-option"
|
||||
:class="{ active: model.id === currentModelId }"
|
||||
@click="selectModel(model.id, model.name)"
|
||||
>
|
||||
<div class="model-info">
|
||||
<span class="model-name">{{ model.name }}</span>
|
||||
<span class="model-desc">{{ model.description }}</span>
|
||||
</div>
|
||||
<Check
|
||||
v-if="model.id === currentModelId"
|
||||
:size="16"
|
||||
class="check-icon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- 新建对话按钮 -->
|
||||
<div class="new-chat-section">
|
||||
<button class="new-chat-btn" @click="handleNewChat">
|
||||
|
|
@ -114,10 +145,11 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
import { useSettingsStore } from "@/stores/settings";
|
||||
import { chatApi } from "@/services/api.ts";
|
||||
import ConversationItem from "./ConversationItem.vue";
|
||||
import {
|
||||
Bot,
|
||||
|
|
@ -132,6 +164,9 @@ import {
|
|||
Keyboard,
|
||||
Settings,
|
||||
ChevronLeft,
|
||||
Sparkles,
|
||||
ChevronDown,
|
||||
Check,
|
||||
} from "@/components/icons";
|
||||
|
||||
const chatStore = useChatStore();
|
||||
|
|
@ -148,6 +183,35 @@ const {
|
|||
|
||||
const currentTheme = computed(() => settings.value.theme);
|
||||
|
||||
// 模型选择相关
|
||||
const showModelMenu = ref(false);
|
||||
const currentModel = ref(localStorage.getItem("modelSelect") || "");
|
||||
const currentModelId = ref(settingsStore.getSelectedModelId());
|
||||
const models: any = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
chatApi.getModels().then((res: any) => {
|
||||
models.value = res;
|
||||
// 初始化模型显示名称
|
||||
const model = models.value?.find((m: any) => m.id === currentModelId.value);
|
||||
if (model) {
|
||||
currentModel.value = model.name;
|
||||
} else if (models.value.length > 0) {
|
||||
currentModel.value = models.value[0].name;
|
||||
currentModelId.value = models.value[0].id;
|
||||
}
|
||||
localStorage.setItem("modelSelect", currentModel.value);
|
||||
});
|
||||
});
|
||||
|
||||
function selectModel(modelId: string, modelName: string) {
|
||||
currentModel.value = modelName;
|
||||
currentModelId.value = modelId;
|
||||
localStorage.setItem("modelSelect", modelName);
|
||||
settingsStore.setSelectedModelId(modelId); // 更新选中的模型 ID
|
||||
showModelMenu.value = false;
|
||||
}
|
||||
|
||||
// 方法
|
||||
function handleNewChat() {
|
||||
chatStore.createConversation();
|
||||
|
|
@ -211,13 +275,25 @@ function startResize(e: MouseEvent) {
|
|||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
}
|
||||
|
||||
// 点击外部关闭模型菜单
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest(".model-selector") && !target.closest(".model-menu")) {
|
||||
showModelMenu.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-sidebar {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background: #f8fafc;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
|
@ -310,8 +386,147 @@ function startResize(e: MouseEvent) {
|
|||
}
|
||||
}
|
||||
|
||||
.model-selector-section {
|
||||
position: relative;
|
||||
padding: 12px 16px 6px;
|
||||
}
|
||||
|
||||
.model-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
border-radius: 10px;
|
||||
background: #f3f4f5;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
.dark & {
|
||||
background: #2d2d3d;
|
||||
border-color: #374151;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
svg:first-child {
|
||||
color: #8b5cf6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.model-name-display {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.model-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
min-width: 200px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
|
||||
.dark & {
|
||||
background: #1e1e2e;
|
||||
border-color: #2d2d3d;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.model-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: #f3f4f6;
|
||||
|
||||
.dark & {
|
||||
background: #2d2d3d;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
|
||||
.model-name {
|
||||
color: #3b82f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.model-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.model-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.dark & {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
}
|
||||
|
||||
.model-desc {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #3b82f6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 下拉动画
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.new-chat-section {
|
||||
padding: 12px 16px;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
|
|
@ -320,10 +535,9 @@ function startResize(e: MouseEvent) {
|
|||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px dashed #d1d5db;
|
||||
padding: 6px 12px;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
background: #f3f4f5;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
|
@ -331,19 +545,22 @@ function startResize(e: MouseEvent) {
|
|||
transition: all 0.2s ease;
|
||||
|
||||
.dark & {
|
||||
border-color: #4b5563;
|
||||
background: #2d2d3d;
|
||||
color: #e5e7eb;
|
||||
&:hover {
|
||||
background: #0475ed;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #3b82f6;
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
color: #3b82f6;
|
||||
background: #000f33;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 0 16px 12px;
|
||||
padding: 6px 16px 12px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
|
|
|
|||
Loading…
Reference in New Issue