|
@@ -30,7 +30,7 @@
|
|
|
<!-- 聊天对话区域 -->
|
|
|
<div class="room-container-body">
|
|
|
<div v-show="false" class="chat-roomings-tip-box">
|
|
|
- <span style="color: #307ef2;font-size14px;">当前用户正在被人工接待...</span>
|
|
|
+ <span style="color: #307ef2, font-size14px">当前用户正在被人工接待...</span>
|
|
|
<Button class="chat-roomings-tip-btn" size="small">自动回复</Button>
|
|
|
</div>
|
|
|
<div v-show="false" class="room-container-body-messages">
|
|
@@ -45,36 +45,100 @@
|
|
|
<div class="chat-roomings__message">
|
|
|
<div class="send-message">
|
|
|
<div class="editor">
|
|
|
+ <!-- 聊天框上部表情区域 -->
|
|
|
<div class="header">
|
|
|
<div class="left-part">
|
|
|
- <div class="img-emo"></div>
|
|
|
+ <div class="img-emoji"></div>
|
|
|
<div class="img-file"></div>
|
|
|
<div class="img-link"></div>
|
|
|
<div class="img-text"></div>
|
|
|
- <!-- <SmileOutlined />
|
|
|
- <FolderOutlined />
|
|
|
- <LayoutOutlined /> -->
|
|
|
</div>
|
|
|
- <div class="right-part"></div>
|
|
|
+ <div class="right-part" @click="handleShowHistory">
|
|
|
+ <div class="img-record"></div>
|
|
|
+ <div style="font-size: 14px; color: #666">聊天记录</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 聊天框中部输入内容区域 -->
|
|
|
+ <!-- @focus="handleFocus"
|
|
|
+ @blur="handleBlur" -->
|
|
|
+ <Textarea
|
|
|
+ class="textarea"
|
|
|
+ v-model:value="area.content"
|
|
|
+ :rows="8"
|
|
|
+ :maxlength="1000"
|
|
|
+ placeholder="在这里输入文字"
|
|
|
+ ></Textarea>
|
|
|
+ <!-- 底部区域 -->
|
|
|
+ <div class="footer">
|
|
|
+ <span>按下ctrl+enter换行</span>
|
|
|
+ <Button size="small" type="primary" class="send-msg">发送</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 聊天记录弹窗 -->
|
|
|
+ <Modal
|
|
|
+ width="550px"
|
|
|
+ v-model:open="visible"
|
|
|
+ title="的聊天记录(99)"
|
|
|
+ @ok="handleConfigOk"
|
|
|
+ @cancel="handleConfigCancel"
|
|
|
+ class="custom-modal"
|
|
|
+ >
|
|
|
+ <Input placeholder="搜索文件" v-model="searchQuery" @input="filterFiles" />
|
|
|
+ <List item-layout="horizontal" :dataSource="filteredFiles" bordered>
|
|
|
+ <template #item="{ item }">
|
|
|
+ <ListItem>
|
|
|
+ <ListItemMeta :title="item.title" :description="`最后修改日期:${item.date}`" />
|
|
|
+ <div>{{ emoji(item.status) }}</div>
|
|
|
+ </ListItem>
|
|
|
+ </template>
|
|
|
+ </List>
|
|
|
+ </Modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { onMounted, ref, reactive } from 'vue';
|
|
|
+ import { onMounted, ref, reactive,computed } from 'vue';
|
|
|
import Split from 'split.js';
|
|
|
- import { Popover, Switch, Badge, Button } from 'ant-design-vue';
|
|
|
- import { EllipsisOutlined, FileSearchOutlined, LoadingOutlined ,SmileOutlined,FolderOutlined,LayoutOutlined} from '@ant-design/icons-vue';
|
|
|
+ import {
|
|
|
+ Popover,
|
|
|
+ Switch,
|
|
|
+ Badge,
|
|
|
+ Button,
|
|
|
+ Textarea,
|
|
|
+ Modal,
|
|
|
+ ListItem,
|
|
|
+ List,
|
|
|
+ Input,
|
|
|
+ ListItemMeta,
|
|
|
+ } from 'ant-design-vue';
|
|
|
+ import { EllipsisOutlined, FileSearchOutlined, LoadingOutlined } from '@ant-design/icons-vue';
|
|
|
+
|
|
|
+ import { useDebounce } from '@vueuse/core';
|
|
|
+ const visible = ref(false);
|
|
|
+ const searchQuery = ref('');
|
|
|
+ const debouncedSearchQuery = useDebounce(searchQuery, 300);
|
|
|
|
|
|
+ const filteredFiles = computed(() => {
|
|
|
+ if (!debouncedSearchQuery.value) {
|
|
|
+ return files.value;
|
|
|
+ }
|
|
|
+ return files.value.filter((file) => file.title.includes(debouncedSearchQuery.value));
|
|
|
+ });
|
|
|
const splitContainer = ref(null);
|
|
|
const state = reactive({
|
|
|
aiChecked: true,
|
|
|
});
|
|
|
-
|
|
|
+ const area = reactive({
|
|
|
+ content: '',
|
|
|
+ });
|
|
|
+ const files = ref([
|
|
|
+ { title: '北京市场报告.doc', status: '😄', date: '2024/07/24' },
|
|
|
+ { title: '上海市场报告.doc', status: '😞', date: '2024/07/24' },
|
|
|
+ // 更多文件...
|
|
|
+ ]);
|
|
|
onMounted(() => {
|
|
|
Split([splitContainer.value.children[0], splitContainer.value.children[1]], {
|
|
|
sizes: [55, 45], // 初始高度百分比
|
|
@@ -89,6 +153,19 @@
|
|
|
},
|
|
|
});
|
|
|
});
|
|
|
+ function handleShowHistory() {
|
|
|
+ visible.value = true;
|
|
|
+ console.log('show history');
|
|
|
+ }
|
|
|
+ function handleConfigOk() {
|
|
|
+ console.log('config ok');
|
|
|
+ }
|
|
|
+ function handleConfigCancel() {
|
|
|
+ console.log('config cancel');
|
|
|
+ }
|
|
|
+ const emoji = (status: string) => {
|
|
|
+ return status;
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
@@ -99,17 +176,9 @@
|
|
|
}
|
|
|
|
|
|
.panel {
|
|
|
- overflow: auto;
|
|
|
+ // overflow: auto;
|
|
|
+ overflow: hidden;
|
|
|
background-color: #fcfcfc;
|
|
|
- // padding: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .top-panel {
|
|
|
- // border-bottom: 1px solid #d9d9d9;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-panel {
|
|
|
- // border-top: 1px solid #d9d9d9;
|
|
|
}
|
|
|
|
|
|
::v-deep .gutter {
|
|
@@ -250,10 +319,10 @@
|
|
|
height: 100%;
|
|
|
background: #fcfcfc;
|
|
|
}
|
|
|
- .editor{
|
|
|
+ .editor {
|
|
|
position: static;
|
|
|
}
|
|
|
- .header{
|
|
|
+ .header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
@@ -261,14 +330,74 @@
|
|
|
background: #fcfcfc;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
- .left-part{
|
|
|
+ .left-part {
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .img-emoji {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0 10px;
|
|
|
+ background-image: url('@/assets/images/emoj.png');
|
|
|
+ }
|
|
|
+ .img-file {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0 10px;
|
|
|
+ background-image: url('@/assets/images/file.png');
|
|
|
+ }
|
|
|
+ .img-link {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0 10px;
|
|
|
+ background-image: url('@/assets/images/link.png');
|
|
|
+ }
|
|
|
+ .img-text {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0 10px;
|
|
|
+ background-image: url('@/assets/images/text.png');
|
|
|
+ }
|
|
|
+ .right-part {
|
|
|
display: flex;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- .img-emo{
|
|
|
+ .img-record {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
background-size: contain;
|
|
|
margin: 0 10px;
|
|
|
- background-image: url('@/assets/images/icon-emoji.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-image: url('@/assets/images/record.png');
|
|
|
+ }
|
|
|
+ ::v-deep .ant-input {
|
|
|
+ border: none;
|
|
|
+ border-radius: 0px;
|
|
|
+ background: #f8f8f8 !important;
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 115px;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 16px;
|
|
|
+ background: #fcfcfc;
|
|
|
+ }
|
|
|
+ .footer span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .send-msg {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #98bff9;
|
|
|
+ border-color: #98bff9;
|
|
|
}
|
|
|
</style>
|