Skip to content

Commit b95a427

Browse files
QAbot-zhQAbot-zh
committed
feat: 优化侧边栏会话管理功能
1 parent 02b8707 commit b95a427

File tree

8 files changed

+528
-203
lines changed

8 files changed

+528
-203
lines changed

‎app/components/chat-list.module.scss‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
.chat-list {
2+
// 容器样式（如需要可添加）
3+
}
4+
5+
.chat-item {
6+
padding: 10px 14px;
7+
background-color: var(--white);
8+
border-radius: 10px;
9+
margin-bottom: 10px;
10+
box-shadow: var(--card-shadow);
11+
transition: background-color 0.3s ease;
12+
cursor: pointer;
13+
user-select: none;
14+
border: 2px solid transparent;
15+
position: relative;
16+
content-visibility: auto;
17+
18+
&:hover {
19+
background-color: var(--hover-color);
20+
}
21+
}
22+
23+
.chat-item-selected {
24+
border-color: var(--primary);
25+
}
26+
27+
.chat-item-title {
28+
font-size: var(--text-sm);
29+
font-weight: bolder;
30+
display: block;
31+
width: calc(100% - 15px);
32+
overflow: hidden;
33+
text-overflow: ellipsis;
34+
white-space: nowrap;
35+
animation: slide-in ease 0.3s;
36+
}
37+
38+
.chat-item-pinned {
39+
background-color: #c9ddfe;
40+
}
41+
42+
/* 右侧操作区域：与标题同行，靠右 */
43+
.chat-item-actions {
44+
position: absolute;
45+
top: 10px;
46+
right: 10px;
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
width: 24px;
51+
height: 24px;
52+
}
53+
54+
.chat-item-actions-narrow {
55+
top: 4px;
56+
right: 4px;
57+
}
58+
59+
/* 置顶图标指示器：和更多按钮占据相同位置 */
60+
.chat-item-pin-indicator {
61+
position: absolute;
62+
opacity: 0.6;
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
67+
svg {
68+
width: 14px;
69+
height: 14px;
70+
}
71+
}
72+
73+
/* hover 时隐藏置顶图标 */
74+
.chat-item:hover .chat-item-pin-indicator {
75+
display: none;
76+
}
77+
78+
/* 更多按钮：和置顶图标占据相同位置 */
79+
.chat-item-more {
80+
position: absolute;
81+
opacity: 0;
82+
cursor: pointer;
83+
display: flex;
84+
align-items: center;
85+
justify-content: center;
86+
width: 24px;
87+
height: 24px;
88+
border-radius: 4px;
89+
transition: all 0.2s ease;
90+
91+
svg {
92+
width: 16px;
93+
height: 16px;
94+
}
95+
96+
&:hover {
97+
background-color: rgba(0, 0, 0, 0.1);
98+
}
99+
}
100+
101+
.chat-item:hover .chat-item-more {
102+
opacity: 0.7;
103+
}
104+
105+
.chat-item:hover .chat-item-more:hover {
106+
opacity: 1;
107+
}
108+
109+
/* 下拉菜单 */
110+
.chat-item-dropdown {
111+
position: fixed;
112+
background-color: var(--white);
113+
border-radius: 8px;
114+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
115+
min-width: 140px;
116+
padding: 4px 0;
117+
z-index: 1000;
118+
animation: slide-in ease 0.15s;
119+
}
120+
121+
.chat-item-dropdown-item {
122+
display: flex;
123+
align-items: center;
124+
padding: 8px 12px;
125+
cursor: pointer;
126+
transition: background-color 0.15s ease;
127+
gap: 10px;
128+
color: var(--black);
129+
font-size: var(--text-xs);
130+
131+
&:hover {
132+
background-color: var(--hover-color);
133+
}
134+
135+
&.danger {
136+
color: #dc2626;
137+
138+
&:hover {
139+
background-color: rgba(220, 38, 38, 0.1);
140+
}
141+
}
142+
}
143+
144+
.chat-item-dropdown-icon {
145+
display: flex;
146+
align-items: center;
147+
justify-content: center;
148+
width: 16px;
149+
height: 16px;
150+
151+
svg {
152+
width: 16px;
153+
height: 16px;
154+
}
155+
}
156+
157+
.chat-item-dropdown-label {
158+
font-size: var(--text-xs);
159+
white-space: nowrap;
160+
}
161+
162+
.chat-item-info {
163+
display: flex;
164+
justify-content: space-between;
165+
color: rgb(166, 166, 166);
166+
font-size: var(--text-xs);
167+
margin-top: 8px;
168+
animation: slide-in ease 0.3s;
169+
}
170+
171+
.chat-item-count,
172+
.chat-item-date {
173+
overflow: hidden;
174+
text-overflow: ellipsis;
175+
white-space: nowrap;
176+
font-size: var(--text-xs);
177+
}
178+
179+
/* narrow 模式下的样式 */
180+
.chat-item-narrow-mode {
181+
padding: 0;
182+
min-height: 50px;
183+
display: flex;
184+
justify-content: center;
185+
align-items: center;
186+
transition: all ease 0.3s;
187+
overflow: visible;
188+
189+
&:hover {
190+
.chat-item-narrow {
191+
transform: scale(0.7) translateX(-50%);
192+
}
193+
}
194+
}
195+
196+
.chat-item-narrow {
197+
line-height: 0;
198+
font-weight: lighter;
199+
color: var(--black);
200+
transform: translateX(0);
201+
transition: all ease 0.3s;
202+
padding: 4px;
203+
display: flex;
204+
flex-direction: column;
205+
justify-content: center;
206+
}
207+
208+
.chat-item-avatar {
209+
display: flex;
210+
justify-content: center;
211+
opacity: 0.2;
212+
position: absolute;
213+
transform: scale(4);
214+
}
215+
216+
.chat-item-narrow-count {
217+
font-size: var(--text-2xl);
218+
font-weight: bolder;
219+
text-align: center;
220+
color: var(--primary);
221+
opacity: 0.6;
222+
}

0 commit comments

Comments
 (0)