feat: 移动收齐侧边栏功能按钮到对话区域Header,删除侧边栏Header;扩大对话区域padding-left-right,解除输出框max-width使其对齐对话区域;

This commit is contained in:
SuperManTouX 2026-03-06 11:51:58 +08:00
parent 6858914e0f
commit 52fba50c9b
4 changed files with 22 additions and 18 deletions

View File

@ -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,

View File

@ -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>

View File

@ -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 {

View File

@ -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>