Skip to content

Commit 36c53e1

Browse files
imchatkitimchatkit
committed
init布局2
1 parent d7b5716 commit 36c53e1

File tree

3 files changed

+136
-97
lines changed

3 files changed

+136
-97
lines changed

‎.cursorrule

Lines changed: 20 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -101,67 +101,23 @@ src/
101101
根据企业微信PC端的实际布局设计，我为您整理以下结构特点描述：
102102

103103
### 一、整体布局结构（三栏式设计）
104-
1. 左侧导航区 (宽度280px±)
105-
- 顶部企业Logo区域（支持切换企业）
106-
- 消息/通讯录/文档/工作台四联导航按钮
107-
- 会话列表（包含单聊/群聊/服务号）按时间排序，支持置顶
108-
2. 中间主工作区
109-
- 当前会话标题栏（含成员管理/会话设置）
110-
- 消息瀑布流展示（支持文件/审批/日程等富交互消息）
111-
- 输入面板（多模态输入：文字/表情/文件拖拽/截图）
112-
3. 右侧扩展面板 (宽度320px±)
113-
- 联系人信息卡（含组织架构树）
114-
- 群成员列表（带部门标签）
115-
- 当前文件/链接共享区
116-
- 快捷应用入口（审批/日报等）
117-
### 二、特色交互设计
118-
1. 全局搜索栏 （顶部中央位置）
119-
- 支持消息/联系人/文件综合搜索
120-
- 快捷键唤醒（Ctrl+Q）
121-
2. 多会话管理
122-
- 仿浏览器标签页（最多开10个会话）
123-
- 未读消息红点计数（含消息免打扰模式）
124-
3. 状态指示系统
125-
- 界面右下角常驻：网络状态/安全认证标识
126-
- 托盘图标（Windows任务栏）显示未读数
127-
128-
### 三、与您项目结构的对应优化建议
129-
1. 在 `MainLayout` 中：
130-
```vue
131-
<!-- 建议添加 -->
132-
<div class="global-search-bar">
133-
<SearchInput @search="handleGlobalSearch" />
134-
<div class="quick-actions">
135-
<button @click="toggleSessionTabs">会话标签</button>
136-
<UnreadCounter :count="totalUnread" />
137-
</div>
138-
</div>
139-
```
140-
141-
2. 右侧面板可扩展性设计：
142-
```scss
143-
.right-panel {
144-
// 添加企业微信式折叠控制
145-
.panel-collapser {
146-
position: absolute;
147-
left: -12px;
148-
top: 50%;
149-
transform: translateY(-50%);
150-
cursor: pointer;
151-
&:hover { /* ... */ }
152-
}
153-
154-
// 组织架构树样式
155-
.org-tree {
156-
@apply overflow-y-auto h-[calc(100vh-200px)];
157-
li::before { /* 树形连接线 */ }
158-
}
159-
}
160-
```
161-
162-
### 四、交互细节增强建议
163-
1. 实现会话列表的「未读提及」高亮效果
164-
2. 添加消息气泡的上下文菜单（回复/转发/收藏）
165-
3. 输入框支持@成员智能提示（对接 `ContactList` 组件）
166-
4. 系统通知采用toast形式从右下角弹出（兼容Electron托盘提醒）
167-
该布局方案既保留了传统IM的交互习惯，又融入了企业级应用的高效特性，建议在您的 `views` 模块中分阶段实现这些布局特性。
104+
### 一、整体布局分析
105+
从图片可以看出采用了经典的 双栏布局 设计：
106+
107+
1. 左侧会话列表区 (固定宽度约280px)
108+
- 顶部搜索栏，支持快速检索会话
109+
- 会话列表区域，包含：
110+
- 头像（支持圆形/方形区分个人/群组）
111+
- 会话名称 + 最后消息预览
112+
- 时间戳和未读消息提示
113+
- 底部工具栏（可展开/收起）
114+
2. 右侧聊天主区域 (自适应宽度)
115+
- 顶部会话信息栏：显示当前聊天对象名称
116+
- 中部消息展示区：
117+
- 采用瀑布流布局
118+
- 消息气泡左右分布（对方在左/自己在右）
119+
- 支持富媒体消息（图片/文件预览）
120+
- 底部输入区：
121+
- 工具栏（表情/图片/文件等功能按钮）
122+
- 文本输入框
123+
- 发送按钮

‎src/App.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@ import { isWeb } from './modules/web-adapter'
66
77
// 检测运行环境
88
const runningEnvironment = ref('web')
9+
// 主题设置
10+
const isDarkTheme = ref(false)
11+
12+
// 切换主题
13+
const toggleTheme = () => {
14+
isDarkTheme.value = !isDarkTheme.value
15+
}
916
1017
onMounted(() => {
1118
// 根据运行环境设置相应的配置
@@ -36,7 +43,7 @@ const initWebFeatures = () => {
3643
</script>
3744

3845
<template>
39-
<div class="app-container" :class="runningEnvironment">
46+
<div class="app-container" :class="[runningEnvironment, { 'dark-theme': isDarkTheme }]">
4047
<MainLayout />
4148
</div>
4249
</template>

‎src/views/MainLayout.vue

Lines changed: 108 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,20 @@ import MessageInputPanel from '../components/chat/InputPanel.vue'
99
import ChatToolsPanel from './components/ChatToolsPanel.vue'
1010
import FilePreviewPanel from './components/FilePreviewPanel.vue'
1111
import SystemStatusBar from './components/SystemStatusBar.vue'
12+
import ContactList from './ContactList.vue'
13+
import ChatWindow from './ChatWindow.vue'
1214
1315
// 当前选中的联系人
1416
const currentContact = ref(null)
1517
1618
// 消息列表
1719
const messages = ref([])
1820
21+
// 处理选择联系人
22+
const handleSelectContact = (contact) => {
23+
currentContact.value = contact
24+
}
25+
1926
// 处理发送消息
2027
const handleSend = (message) => {
2128
// 这里应该调用消息服务发送消息
@@ -36,25 +43,35 @@ const handleSend = (message) => {
3643
<template>
3744
<!-- 三栏响应式布局 -->
3845
<div class="main-container">
39-
<!-- 左侧导航 (宽度可折叠) -->
40-
<div class="left-nav">
46+
<!-- 左侧图标导航栏 -->
47+
<div class="left-sidebar">
48+
<div class="nav-icons">
49+
<div class="nav-icon active">
50+
<i class="icon-chat">💬</i>
51+
</div>
52+
<div class="nav-icon">
53+
<i class="icon-contacts">👥</i>
54+
</div>
55+
<div class="nav-icon">
56+
<i class="icon-discover">🔍</i>
57+
</div>
58+
<div class="nav-icon">
59+
<i class="icon-me">👤</i>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<!-- 中间联系人列表区 -->
65+
<div class="middle-panel">
4166
<UserProfile />
4267
<ContactSearch />
43-
<ContactCategoryTabs />
68+
<ContactList @select="handleSelectContact" />
4469
</div>
4570

46-
<!-- 中间主聊天区 -->
71+
<!-- 右侧聊天主区域 -->
4772
<div class="main-chat">
4873
<ChatHeader :current-contact="currentContact" />
49-
<MessageList :messages="messages" />
50-
<MessageInputPanel @send="handleSend" />
51-
</div>
52-
53-
<!-- 右侧信息面板 (Electron下可独立窗口) -->
54-
<div class="right-panel">
55-
<ChatToolsPanel />
56-
<FilePreviewPanel />
57-
<SystemStatusBar />
74+
<ChatWindow :contact="currentContact" :messages="messages" @send="handleSend" />
5875
</div>
5976
</div>
6077
</template>
@@ -68,7 +85,51 @@ const handleSend = (message) => {
6885
background-color: var(--bg-color);
6986
}
7087
71-
.left-nav {
88+
.left-sidebar {
89+
width: 60px;
90+
background-color: #2e2e2e;
91+
display: flex;
92+
flex-direction: column;
93+
align-items: center;
94+
flex-shrink: 0;
95+
}
96+
97+
.nav-icons {
98+
display: flex;
99+
flex-direction: column;
100+
align-items: center;
101+
padding-top: 20px;
102+
width: 100%;
103+
}
104+
105+
.nav-icon {
106+
width: 100%;
107+
height: 60px;
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
cursor: pointer;
112+
color: #999;
113+
font-size: 24px;
114+
position: relative;
115+
}
116+
117+
.nav-icon.active {
118+
color: #fff;
119+
}
120+
121+
.nav-icon.active::after {
122+
content: '';
123+
position: absolute;
124+
left: 0;
125+
top: 50%;
126+
transform: translateY(-50%);
127+
width: 3px;
128+
height: 20px;
129+
background-color: #07c160;
130+
}
131+
132+
.middle-panel {
72133
width: 280px;
73134
border-right: 1px solid var(--border-color);
74135
display: flex;
@@ -87,25 +148,20 @@ const handleSend = (message) => {
87148
position: relative;
88149
}
89150
90-
.right-panel {
91-
width: 280px;
92-
border-left: 1px solid var(--border-color);
93-
display: flex;
94-
flex-direction: column;
95-
background-color: var(--bg-secondary);
96-
flex-shrink: 0;
97-
}
98-
99151
/* 响应式布局 */
100152
@media screen and (max-width: 1200px) {
101-
.right-panel {
153+
.middle-panel {
102154
width: 240px;
103155
}
104156
}
105157
106158
@media screen and (max-width: 992px) {
107-
.left-nav {
108-
width: 240px;
159+
.left-sidebar {
160+
width: 50px;
161+
}
162+
163+
.middle-panel {
164+
width: 220px;
109165
}
110166
}
111167
@@ -114,16 +170,36 @@ const handleSend = (message) => {
114170
flex-direction: column;
115171
}
116172
117-
.left-nav {
173+
.left-sidebar {
118174
width: 100%;
119-
height: 60px;
175+
height: 50px;
120176
flex-direction: row;
121-
border-right: none;
122-
border-bottom: 1px solid #e0e0e0;
123177
}
124178
125-
.right-panel {
126-
display: none;
179+
.nav-icons {
180+
flex-direction: row;
181+
padding-top: 0;
182+
}
183+
184+
.nav-icon {
185+
height: 50px;
186+
width: 25%;
187+
}
188+
189+
.nav-icon.active::after {
190+
left: 50%;
191+
top: 0;
192+
transform: translateX(-50%);
193+
width: 20px;
194+
height: 3px;
195+
}
196+
197+
.middle-panel {
198+
width: 100%;
199+
height: 60px;
200+
flex-direction: row;
201+
border-right: none;
202+
border-bottom: 1px solid var(--border-color);
127203
}
128204
}
129205

0 commit comments

Comments
 (0)