feat: 移动收齐侧边栏功能按钮到对话区域Header,删除侧边栏Header;扩大对话区域padding-left-right,解除输出框max-width使其对齐对话区域;
This commit is contained in:
parent
6858914e0f
commit
52fba50c9b
|
|
@ -3,12 +3,12 @@
|
||||||
<!-- 左侧:侧边栏切换和标题 -->
|
<!-- 左侧:侧边栏切换和标题 -->
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<button
|
<button
|
||||||
v-if="showSidebarToggle"
|
|
||||||
class="toggle-sidebar-btn"
|
class="toggle-sidebar-btn"
|
||||||
title="切换侧边栏 (Ctrl+B)"
|
title="切换侧边栏 (Ctrl+B)"
|
||||||
@click="$emit('toggle-sidebar')"
|
@click="$emit('toggle-sidebar')"
|
||||||
>
|
>
|
||||||
<Menu :size="20" />
|
<Menu v-if="showSidebarToggle" :size="20" />
|
||||||
|
<ChevronLeft v-else :size="18" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="conversation-info">
|
<div class="conversation-info">
|
||||||
|
|
@ -93,6 +93,7 @@ import {
|
||||||
Minimize2,
|
Minimize2,
|
||||||
Trash2,
|
Trash2,
|
||||||
Download,
|
Download,
|
||||||
|
ChevronLeft,
|
||||||
MoreHorizontal,
|
MoreHorizontal,
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
Pin,
|
Pin,
|
||||||
|
|
|
||||||
|
|
@ -392,14 +392,14 @@ watch(
|
||||||
|
|
||||||
&.wide-mode {
|
&.wide-mode {
|
||||||
.input-container {
|
.input-container {
|
||||||
max-width: 1000px;
|
min-width: 1000px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: 16px 24px 24px;
|
padding: 16px 150px 24px;
|
||||||
background: linear-gradient(to top, white 80%, transparent);
|
background: linear-gradient(to top, white 80%, transparent);
|
||||||
|
|
||||||
.dark & {
|
.dark & {
|
||||||
|
|
@ -408,12 +408,13 @@ watch(
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
max-width: 800px;
|
width: 100%;
|
||||||
margin: 0 auto;
|
min-width: 1000px;
|
||||||
|
// margin: 0 auto;
|
||||||
transition: max-width 0.3s ease;
|
transition: max-width 0.3s ease;
|
||||||
|
|
||||||
&.wide {
|
&.wide {
|
||||||
max-width: 1000px;
|
min-width: 1000px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -276,7 +276,7 @@ setCustomComponents("playground-demo", {
|
||||||
.message-bubble {
|
.message-bubble {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
padding: 20px 24px;
|
padding: 20px 150px;
|
||||||
animation: fadeIn 0.3s ease;
|
animation: fadeIn 0.3s ease;
|
||||||
|
|
||||||
&.role-user {
|
&.role-user {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
>
|
>
|
||||||
<div class="sidebar-inner">
|
<div class="sidebar-inner">
|
||||||
<!-- 头部 -->
|
<!-- 头部 -->
|
||||||
<div class="sidebar-header">
|
<!-- <div class="sidebar-header">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<Bot :size="24" class="logo-icon" />
|
<Bot :size="24" class="logo-icon" />
|
||||||
<span v-show="!isCollapsed" class="logo-text">Kexue AI Chat</span>
|
<span v-show="!isCollapsed" class="logo-text">Kexue AI Chat</span>
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
>
|
>
|
||||||
<ChevronLeft :size="18" :class="{ rotated: isCollapsed }" />
|
<ChevronLeft :size="18" :class="{ rotated: isCollapsed }" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- 模型选择 -->
|
<!-- 模型选择 -->
|
||||||
<div v-show="!isCollapsed" class="model-selector-section">
|
<div v-show="!isCollapsed" class="model-selector-section">
|
||||||
|
|
@ -60,13 +60,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 搜索框 -->
|
<!-- 搜索框 -->
|
||||||
<div class="search-section">
|
<!-- <div class="search-section">
|
||||||
<div class="search-box" @click="openSearch">
|
<div class="search-box" @click="openSearch">
|
||||||
<Search :size="16" />
|
<Search :size="16" />
|
||||||
<span class="search-placeholder">搜索对话...</span>
|
<span class="search-placeholder">搜索对话...</span>
|
||||||
<kbd class="search-kbd">⌘K</kbd>
|
<kbd class="search-kbd">⌘K</kbd>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- 对话列表 -->
|
<!-- 对话列表 -->
|
||||||
<div class="conversations-section">
|
<div class="conversations-section">
|
||||||
|
|
@ -93,8 +93,8 @@
|
||||||
<!-- 最近对话 -->
|
<!-- 最近对话 -->
|
||||||
<div class="conversation-group">
|
<div class="conversation-group">
|
||||||
<div class="group-header">
|
<div class="group-header">
|
||||||
<Clock :size="14" />
|
<!-- <Clock :size="14" /> -->
|
||||||
<span>最近</span>
|
<span>对话历史</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="group-list">
|
<div class="group-list">
|
||||||
<ConversationItem
|
<ConversationItem
|
||||||
|
|
@ -130,12 +130,14 @@
|
||||||
<Moon v-else-if="currentTheme === 'dark'" :size="18" />
|
<Moon v-else-if="currentTheme === 'dark'" :size="18" />
|
||||||
<Monitor v-else :size="18" />
|
<Monitor v-else :size="18" />
|
||||||
</button>
|
</button>
|
||||||
<button class="footer-btn" @click="openShortcuts" title="快捷键">
|
<!-- 键盘快捷键 -->
|
||||||
|
<!-- <button class="footer-btn" @click="openShortcuts" title="快捷键">
|
||||||
<Keyboard :size="18" />
|
<Keyboard :size="18" />
|
||||||
</button>
|
</button> -->
|
||||||
<button class="footer-btn" @click="openSettings" title="设置">
|
<!-- dev人员可用 -->
|
||||||
|
<!-- <button class="footer-btn" @click="openSettings" title="设置">
|
||||||
<Settings :size="18" />
|
<Settings :size="18" />
|
||||||
</button>
|
</button> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue