Skip to content

Commit 0c54f5b

Browse files
1myuan1myuan
committed
refactor: chat left menu
1 parent 089b690 commit 0c54f5b

File tree

5 files changed

+232
-95
lines changed

5 files changed

+232
-95
lines changed

‎ui/src/locales/lang/en-US/views/tool.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default {
99
toolStore: {
1010
title: 'Tool Store',
1111
createFromToolStore: 'Create from Tool Store',
12+
internal: 'Built in system',
1213
recommend: 'Recommended',
1314
webSearch: 'Web Search',
1415
databaseQuery: 'Database Query',

‎ui/src/locales/lang/zh-CN/views/tool.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export default {
77
toolStore: {
88
title: '工具商店',
99
createFromToolStore: '从工具商店创建',
10+
internal: '系统内置',
1011
recommend: '推荐',
1112
webSearch: '联网搜索',
1213
databaseQuery: '数据库查询',

‎ui/src/locales/lang/zh-Hant/views/tool.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default {
99
toolStore: {
1010
title: '工具商店',
1111
createFromToolStore: '從工具商店創建',
12+
internal: '系统内置',
1213
recommend: '推薦',
1314
webSearch: '聯網搜索',
1415
databaseQuery: '數據庫查詢',

‎ui/src/views/chat/pc/index.vue

Lines changed: 191 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44
:class="classObj"
55
v-loading="loading"
66
:style="{
7-
'--el-color-primary': applicationDetail?.custom_theme?.theme_color,
8-
'--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
7+
'--el-color-primary': applicationDetail?.custom_theme?.theme_color,
8+
'--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
99
}"
1010
>
11-
<div class="flex">
12-
<div class="chat-pc__left border-r">
13-
<div class="p-16-24 pb-0">
14-
<div class="flex align-center mb-16">
15-
<div class="flex">
11+
<div class="flex h-full w-full">
12+
<div class="chat-pc__left">
13+
<el-menu class="w-full h-full" :default-active="currentChatId" :collapse="isPcCollapse" collapse-transition popper-class="chat-pc-popper">
14+
<div style="padding: 16px 18px 0 18px;">
15+
<div class="flex align-center mb-16">
16+
<div class="flex">
1617
<el-avatar
1718
v-if="isAppIcon(applicationDetail?.icon)"
1819
shape="square"
@@ -23,70 +24,123 @@
2324
</el-avatar>
2425
<LogoIcon v-else height="28px" style="width: 28px; height: 28px; display: block" />
2526
</div>
26-
<h4>{{ applicationDetail?.name }}</h4>
27+
<h4 v-show="!isPcCollapse">{{ applicationDetail?.name }}</h4>
2728
</div>
28-
<el-button class="add-button w-full primary" @click="newChat">
29+
<el-button v-show="!isPcCollapse" class="add-button w-full primary" @click="newChat">
2930
<AppIcon iconName="app-create-chat"></AppIcon>
3031
<span class="ml-4">{{ $t('chat.createChat') }}</span>
3132
</el-button>
32-
<p class="mt-20 mb-8">{{ $t('chat.history') }}</p>
33-
</div>
34-
<div class="left-height pt-0">
35-
<el-scrollbar>
36-
<div class="p-8 pt-0">
37-
<common-list
38-
:style="{
39-
'--el-color-primary': applicationDetail?.custom_theme?.theme_color,
40-
'--el-color-primary-light-9': hexToRgba(
41-
applicationDetail?.custom_theme?.theme_color,
42-
0.1,
43-
),
44-
}"
45-
:data="chatLogData"
46-
class="mt-8"
47-
v-loading="left_loading"
48-
:defaultActive="currentChatId"
49-
@click="clickListHandle"
50-
@mouseenter="mouseenter"
51-
@mouseleave="mouseId = ''"
52-
>
53-
<template #default="{ row }">
54-
<div class="flex-between">
55-
<span :title="row.abstract">
56-
{{ row.abstract }}
57-
</span>
58-
<div @click.stop v-show="mouseId === row.id && row.id !== 'new'">
59-
<el-dropdown trigger="click" :teleported="false">
60-
<el-icon class="rotate-90 mt-4"><MoreFilled /></el-icon>
61-
<template #dropdown>
62-
<el-dropdown-menu>
63-
<el-dropdown-item @click.stop="editLogTitle(row)">
64-
<el-icon><EditPen /></el-icon>
65-
{{ $t('common.edit') }}
66-
</el-dropdown-item>
67-
<el-dropdown-item @click.stop="deleteLog(row)">
68-
<el-icon><Delete /></el-icon>
69-
{{ $t('common.delete') }}
70-
</el-dropdown-item>
71-
</el-dropdown-menu>
72-
</template>
73-
</el-dropdown>
33+
<p v-show="!isPcCollapse" class="mt-20 mb-8">{{ $t('chat.history') }}</p>
34+
</div>
35+
<div v-show="!isPcCollapse" class="left-height pt-0">
36+
<el-scrollbar>
37+
<div class="p-8 pt-0">
38+
<common-list
39+
:style="{
40+
'--el-color-primary': applicationDetail?.custom_theme?.theme_color,
41+
'--el-color-primary-light-9': hexToRgba(
42+
applicationDetail?.custom_theme?.theme_color,
43+
0.1,
44+
),
45+
}"
46+
:data="chatLogData"
47+
class="mt-8"
48+
v-loading="left_loading"
49+
:defaultActive="currentChatId"
50+
@click="clickListHandle"
51+
@mouseenter="mouseenter"
52+
@mouseleave="mouseId = ''"
53+
>
54+
<template #default="{ row }">
55+
<div class="flex-between">
56+
<span :title="row.abstract">
57+
{{ row.abstract }}
58+
</span>
59+
<div @click.stop v-show="mouseId === row.id && row.id !== 'new'">
60+
<el-dropdown trigger="click" :teleported="false">
61+
<el-icon class="rotate-90 mt-4"><MoreFilled /></el-icon>
62+
<template #dropdown>
63+
<el-dropdown-menu>
64+
<el-dropdown-item @click.stop="editLogTitle(row)">
65+
<el-icon><EditPen /></el-icon>
66+
{{ $t('common.edit') }}
67+
</el-dropdown-item>
68+
<el-dropdown-item @click.stop="deleteLog(row)">
69+
<el-icon><Delete /></el-icon>
70+
{{ $t('common.delete') }}
71+
</el-dropdown-item>
72+
</el-dropdown-menu>
73+
</template>
74+
</el-dropdown>
75+
</div>
7476
</div>
75-
</div>
76-
</template>
77+
</template>
7778

78-
<template #empty>
79-
<div class="text-center">
80-
<el-text type="info">{{ $t('chat.noHistory') }}</el-text>
79+
<template #empty>
80+
<div class="text-center">
81+
<el-text type="info">{{ $t('chat.noHistory') }}</el-text>
82+
</div>
83+
</template>
84+
</common-list>
85+
</div>
86+
<div v-if="chatLogData?.length" class="gradient-divider lighter mt-8">
87+
<span>{{ $t('chat.only20history') }}</span>
88+
</div>
89+
</el-scrollbar>
90+
</div>
91+
<el-menu-item index="1" v-show="isPcCollapse" @click="newChat">
92+
<AppIcon iconName="app-create-chat"></AppIcon>
93+
<template #title>{{ $t('chat.createChat') }}</template>
94+
</el-menu-item>
95+
<el-sub-menu v-show="isPcCollapse" index="2">
96+
<template #title>
97+
<el-icon>
98+
<location />
99+
</el-icon>
100+
</template>
101+
<el-menu-item-group v-loading="left_loading">
102+
<template #title><span>{{ $t('chat.history') }}</span></template>
103+
<el-menu-item v-for="row in chatLogData" :index="row.id" :key="row.id" @click="clickListHandle(row)">
104+
<div class="flex-between w-full lighter">
105+
<span :title="row.abstract">
106+
{{ row.abstract }}
107+
</span>
108+
<div @click.stop class="flex" v-show="mouseId === row.id && row.id !== 'new'">
109+
<el-dropdown trigger="click" :teleported="false">
110+
<el-icon class="rotate-90 mt-4">
111+
<MoreFilled />
112+
</el-icon>
113+
<template #dropdown>
114+
<el-dropdown-menu>
115+
<el-dropdown-item @click.stop="editLogTitle(row)">
116+
<el-icon>
117+
<EditPen />
118+
</el-icon>
119+
{{ $t('common.edit') }}
120+
</el-dropdown-item>
121+
<el-dropdown-item @click.stop="deleteLog(row)">
122+
<el-icon>
123+
<Delete />
124+
</el-icon>
125+
{{ $t('common.delete') }}
126+
</el-dropdown-item>
127+
</el-dropdown-menu>
128+
</template>
129+
</el-dropdown>
81130
</div>
82-
</template>
83-
</common-list>
131+
</div>
132+
</el-menu-item>
133+
</el-menu-item-group>
134+
<div v-if="!chatLogData?.length" class="text-center">
135+
<el-text type="info">{{ $t('chat.noHistory') }}</el-text>
84136
</div>
85-
<div v-if="chatLogData?.length" class="gradient-divider lighter mt-8">
86-
<span>{{ $t('chat.only20history') }}</span>
87-
</div>
88-
</el-scrollbar>
89-
</div>
137+
</el-sub-menu>
138+
</el-menu>
139+
<el-button v-if="!common.isMobile()" class="pc-collapse" circle size="small" @click="isPcCollapse = !isPcCollapse">
140+
<el-icon>
141+
<component :is=" isPcCollapse ? 'Fold' : 'Expand'" />
142+
</el-icon>
143+
</el-button>
90144
</div>
91145
<div class="chat-pc__right">
92146
<div class="mb-24 p-16-24 flex-between">
@@ -150,7 +204,7 @@
150204
</template>
151205

152206
<script setup lang="ts">
153-
import { ref, onMounted, nextTick, computed } from 'vue'
207+
import { ref, onMounted, nextTick, computed, watch } from 'vue'
154208
import { marked } from 'marked'
155209
import { saveAs } from 'file-saver'
156210
import chatAPI from '@/api/chat/chat'
@@ -167,6 +221,12 @@ const { user, chatLog, common } = useStore()
167221
const EditTitleDialogRef = ref()
168222
169223
const isCollapse = ref(false)
224+
const isPcCollapse = ref(false)
225+
watch(()=> common.device, () => {
226+
if(common.isMobile()) {
227+
isPcCollapse.value = false
228+
}
229+
})
170230
171231
const customStyle = computed(() => {
172232
return {
@@ -383,14 +443,15 @@ const init = () => {
383443
// ) {
384444
// getChatLog(applicationDetail.value.id)
385445
// }
386-
getChatLog(applicationDetail.value.id)
446+
getChatLog(applicationDetail.value?.id)
387447
}
388448
onMounted(() => {
389449
init()
390450
})
391451
</script>
392452
<style lang="scss">
393453
.chat-pc {
454+
height: 100%;
394455
overflow: hidden;
395456
background: #eef1f4;
396457
@@ -408,11 +469,40 @@ onMounted(() => {
408469
}
409470
410471
&__left {
411-
background:
412-
linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
413-
#eef1f4;
472+
position: relative;
473+
474+
.el-menu {
475+
background:
476+
linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
477+
#eef1f4;
478+
479+
&:not(.el-menu--collapse) {
480+
width: 280px;
481+
}
414482
415-
width: 280px;
483+
.el-menu-item:hover {
484+
background: transparent;
485+
}
486+
487+
&.el-menu--collapse {
488+
.el-menu-item,.el-menu-tooltip__trigger,.el-sub-menu__title {
489+
padding: 0;
490+
}
491+
492+
.el-menu-item .el-menu-tooltip__trigger,.el-sub-menu__title {
493+
position: static;
494+
width: 40px;
495+
height: 40px;
496+
border-radius: 6px;
497+
align-items: center;
498+
justify-content: center;
499+
margin: 0 auto;
500+
}
501+
.el-menu-item:hover .el-menu-tooltip__trigger,.el-sub-menu__title:hover {
502+
background-color: #1F23291A;
503+
}
504+
}
505+
}
416506
417507
.add-button {
418508
border: 1px solid var(--el-color-primary);
@@ -421,10 +511,17 @@ onMounted(() => {
421511
.left-height {
422512
height: calc(100vh - 140px);
423513
}
514+
515+
.pc-collapse {
516+
position: absolute;
517+
top: 20px;
518+
right: -12px;
519+
box-shadow: 0px 5px 10px 0px #1F23291A;
520+
}
424521
}
425522
426523
&__right {
427-
width: calc(100% - 280px);
524+
flex: 1;
428525
overflow: hidden;
429526
position: relative;
430527
box-sizing: border-box;
@@ -464,6 +561,27 @@ onMounted(() => {
464561
display: none;
465562
}
466563
}
564+
565+
.chat-pc-popper {
566+
.el-menu-item-group__title {
567+
padding-bottom: 16px;
568+
font-weight: 500;
569+
color: var(--app-text-color-secondary);
570+
}
571+
.el-menu-item {
572+
border-radius: 6px;
573+
height: 40px;
574+
margin: 0 8px;
575+
padding-left: 8px;
576+
padding-right: 8px;
577+
&:hover {
578+
background-color: #1F23291A;
579+
}
580+
&.is-active {
581+
background-color: #3370FF1A;
582+
}
583+
}
584+
}
467585
// 适配移动端
468586
.mobile {
469587
.chat-pc {
@@ -489,6 +607,9 @@ onMounted(() => {
489607
width: 100%;
490608
z-index: 99;
491609
height: calc(100vh);
610+
.el-menu {
611+
width: 100%;
612+
}
492613
}
493614
}
494615
.collapse {

0 commit comments

Comments
 (0)