Skip to content

phsl / admin

Go to a project
Commit a4a376b1 by hhhero
Options

Merge remote-tracking branch 'yudao-ui-admin-vue3/dev' into dev 

# Conflicts:
#	package.json
parents 33b0b5ce 677767fd
Showing with 650 additions and 333 deletions
README.md
......@@ -191,26 +191,24 @@ ps：核心功能已经实现，正在对接微信小程序中...
### 商城系统
演示地址：<https://doc.iocoder.cn/mall-preview/>
![功能图](/.image/common/mall-feature.png)
![功能图](/.image/common/mall-preview.png)
_前端基于 crmeb uniapp 经过授权重构，优化代码实现，接入芋道快速开发平台_
演示地址：<https://doc.iocoder.cn/mall-preview/>
### ERP 系统
![功能图](/.image/common/erp-feature.png)
演示地址：<https://doc.iocoder.cn/erp-preview/>
### CRM 系统
![功能图](/.image/common/erp-feature.png)
![功能图](/.image/common/crm-feature.png)
### CRM 系统
演示地址：<https://doc.iocoder.cn/crm-preview/>
![功能图](/.image/common/crm-feature.png)
## 🐷 演示图
### 系统功能
......
src/api/ai/image/index.ts
......@@ -56,6 +56,10 @@ export const ImageApi = {
getImagePageMy: async (params: PageParam) => {
return await request.get({ url: `/ai/image/my-page`, params })
},
// 获取公开的绘图记录
getImagePagePublic: async (params) => {
return await request.get({ url: `/ai/image/public-page`, params })
},
// 获取【我的】绘图记录
getImageMy: async (id: number) => {
return await request.get({ url: `/ai/image/get-my?id=${id}` })
......
src/api/ai/write/index.ts
......@@ -17,7 +17,7 @@ export interface WriteVO {
platform?: string // 平台
model?: string // 模型
generatedContent?: string // 生成的内容
errorMessage: string // 错误信息
errorMessage?: string // 错误信息
createTime?: Date // 创建时间
}
......
src/api/mall/product/history.ts 0 → 100644
import request from '@/config/axios'
/**
* 获得商品浏览记录分页
*
* @param params 请求参数
*/
export const getBrowseHistoryPage = (params: any) => {
return request.get({ url: '/product/browse-history/page', params })
}
src/components/MarkdownView/index.vue
<template>
<div ref="contentRef" class="markdown-view" v-html="contentHtml"></div>
<!-- <div ref="contentRef" class="markdown-view" v-html="contentHtml"></div>-->
<div ref="contentRef" class="markdown-view" v-html="renderedMarkdown"></div>
</template>
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import { marked } from 'marked'
import {useClipboard} from '@vueuse/core'
import MarkdownIt from 'markdown-it'
import 'highlight.js/styles/vs2015.min.css'
import hljs from 'highlight.js'
......@@ -19,45 +20,26 @@ const props = defineProps({
const message = useMessage() // 消息弹窗
const { copy } = useClipboard() // 初始化 copy 到粘贴板
const contentRef = ref()
const contentHtml = ref<any>() // 渲染的html内容
const { content } = toRefs(props) // 将 props 变为引用类型
// 代码高亮：https://highlightjs.org/
// 转换 markdown：marked
/** marked 渲染器 */
const renderer = {
code(code, language, c) {
let highlightHtml
try {
highlightHtml = hljs.highlight(code, { language: language, ignoreIllegals: true }).value
} catch (e) {
// skip
const md = new MarkdownIt({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
const copyHtml = `<div id="copy" data-copy='${str}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(lang, str, true).value}</code></pre>`
} catch (__) {}
}
const copyHtml = `<div id="copy" data-copy='${code}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
return `<pre style="position: relative;">${copyHtml}<code class="hljs">${highlightHtml}</code></pre>`
return ``
}
}
// 配置 marked
marked.use({
renderer: renderer
})
});
/** 监听 content 变化 */
watch(content, async (newValue, oldValue) => {
await renderMarkdown(newValue)
})
/** 渲染 markdown */
const renderMarkdown = async (content: string) => {
contentHtml.value = await marked(content)
}
const renderedMarkdown = computed(() => {
return md.render(props.content);
});
/** 初始化 **/
onMounted(async () => {
// 解析转换 markdown
await renderMarkdown(props.content as string)
// 添加 copy 监听
contentRef.value.addEventListener('click', (e: any) => {
if (e.target.id === 'copy') {
......
src/views/ai/image/square/index.vue 0 → 100644
<template>
<div class="square-container">
<el-input
v-model="searchText"
style="width: 100%; margin-bottom: 20px"
size="large"
placeholder="请输入要搜索的内容"
:suffix-icon="Search"
@keyup.enter="handleSearch"
/>
<div class="gallery">
<div v-for="item in publicList" :key="item.id" class="gallery-item">
<img :src="item.picUrl" class="img" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ImageApi, ImageVO } from '@/api/ai/image'
import { Search } from '@element-plus/icons-vue'
/** 属性 */
// TODO @fan：queryParams 里面搞分页哈。
const pageNo = ref<number>(1)
const pageSize = ref<number>(20)
const publicList = ref<ImageVO[]>([])
const searchText = ref<string>('')
/** 获取数据 */
const getListData = async () => {
const res = await ImageApi.getImagePagePublic({
pageNo: pageNo.value,
pageSize: pageSize.value,
prompt: searchText.value
})
publicList.value = res.list as ImageVO[]
}
/** 搜索 */
const handleSearch = async () => {
await getListData()
}
onMounted(async () => {
await getListData()
})
</script>
<style scoped lang="scss">
.square-container {
background-color: #fff;
padding: 20px;
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
//max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.gallery-item {
position: relative;
overflow: hidden;
background: #f0f0f0;
cursor: pointer;
transition: transform 0.3s;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-item:hover {
transform: scale(1.05);
}
}
</style>
src/views/ai/music/components/index.vue
<template>
<div class="flex h-1/1">
<div class="flex h-full items-stretch">
<!-- 模式 -->
<Mode class="flex-none" @generate-music="generateMusic"/>
<!-- 音频列表 -->
......@@ -13,8 +13,13 @@ import List from './list/index.vue'
defineOptions({ name: 'Index' })
const listRef = ref<{generateMusic: (...args) => void} | null>(null)
const listRef = ref<Nullable<{generateMusic: (...args) => void}>>(null)
/*
*@Description: 拿到左侧配置信息调用右侧音乐生成的方法
*@MethodAuthor: xiaohong
*@Date: 2024-07-19 11:13:38
*/
function generateMusic (args: {formData: Recordable}) {
unref(listRef)?.generateMusic(args.formData)
}
......
src/views/ai/music/components/list/audioBar/index.vue
<template>
<div class="h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none">播放器</div>
<div class="flex items-center justify-between px-2 h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none">
<!-- 歌曲信息 -->
<div class="flex gap-[10px]">
<el-image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" class="w-[45px]"/>
<div>
<div>{{currentSong.name}}</div>
<div class="text-[12px] text-gray-400">{{currentSong.singer}}</div>
</div>
</div>
<!-- 音频controls -->
<div class="flex gap-[12px] items-center">
<Icon icon="majesticons:back-circle" :size="20" class="text-gray-300 cursor-pointer"/>
<Icon :icon="audioProps.paused ? 'mdi:arrow-right-drop-circle' : 'solar:pause-circle-bold'" :size="30" class=" cursor-pointer" @click="toggleStatus('paused')"/>
<Icon icon="majesticons:next-circle" :size="20" class="text-gray-300 cursor-pointer"/>
<div class="flex gap-[16px] items-center">
<span>{{audioProps.currentTime}}</span>
<el-slider v-model="audioProps.duration" color="#409eff" class="w-[160px!important] "/>
<span>{{ audioProps.duration }}</span>
</div>
<!-- 音频 -->
<audio v-bind="audioProps" ref="audioRef" controls v-show="!audioProps" @timeupdate="audioTimeUpdate">
<source :src="audioUrl"/>
</audio>
</div>
<!-- 音量控制器 -->
<div class="flex gap-[16px] items-center">
<Icon :icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'" :size="20" class="cursor-pointer" @click="toggleStatus('muted')"/>
<el-slider v-model="audioProps.volume" color="#409eff" class="w-[160px!important] "/>
</div>
</div>
</template>
<script lang="ts" setup>
import { formatPast } from '@/utils/formatTime'
import audioUrl from '@/assets/audio/response.mp3'
defineOptions({ name: 'Index' })
const currentSong = inject('currentSong', {})
const audioRef = ref<Nullable<HTMLElement>>(null)
// 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
const audioProps = reactive({
autoplay: true,
paused: false,
currentTime: '00:00',
duration: '00:00',
muted: false,
volume: 50,
})
function toggleStatus (type: string) {
audioProps[type] = !audioProps[type]
if (type === 'paused' && audioRef.value) {
if (audioProps[type]) {
audioRef.value.pause()
} else {
audioRef.value.play()
}
}
}
// 更新播放位置
function audioTimeUpdate (args) {
audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss')
}
</script>
src/views/ai/music/components/list/index.vue
<template>
<div class="flex flex-col h-full">
<div class="flex flex-col">
<div class="flex-auto flex overflow-hidden">
<el-tabs v-model="currentType" class="flex-auto px-[var(--app-content-padding)]">
<!-- 我的创作 -->
<el-tab-pane label="我的创作" v-loading="loading" name="mine">
<el-tab-pane v-loading="loading" label="我的创作" name="mine">
<el-row v-if="mySongList.length" :gutter="12">
<el-col v-for="song in mySongList" :key="song.id" :span="24">
<songCard v-bind="song"/>
<songCard :songInfo="song" @play="setCurrentSong(song)"/>
</el-col>
</el-row>
<el-empty v-else description="暂无音乐"/>
</el-tab-pane>
<!-- 试听广场 -->
<el-tab-pane label="试听广场" v-loading="loading" name="square">
<el-tab-pane v-loading="loading" label="试听广场" name="square">
<el-row v-if="squareSongList.length" v-loading="loading" :gutter="12">
<el-col v-for="song in squareSongList" :key="song.id" :span="24">
<songCard v-bind="song"/>
<songCard :songInfo="song" @play="setCurrentSong(song)"/>
</el-col>
</el-row>
<el-empty v-else description="暂无音乐"/>
</el-tab-pane>
</el-tabs>
<!-- songInfo -->
<songInfo v-bind="squareSongList[0]" class="flex-none"/>
<songInfo class="flex-none"/>
</div>
<audioBar class="flex-none"/>
</div>
......@@ -36,13 +36,18 @@ import audioBar from './audioBar/index.vue'
defineOptions({ name: 'Index' })
const currentType = ref('mine')
// loading 状态
const loading = ref(false)
// 当前音乐
const currentSong = ref({})
const mySongList = ref<Recordable[]>([])
const squareSongList = ref<Recordable[]>([])
provide('currentSong', currentSong)
/*
*@Description: 调接口生成音乐列表
*@MethodAuthor: xiaohong
......@@ -57,7 +62,7 @@ function generateMusic (formData: Recordable) {
id: index,
audioUrl: '',
videoUrl: '',
title: '我走后',
title: '我走后' + index,
imageUrl: 'https://www.carsmp3.com/data/attachment/forum/201909/19/091020q5kgre20fidreqyt.jpg',
desc: 'Metal, symphony, film soundtrack, grand, majesticMetal, dtrack, grand, majestic',
date: '2024年04月30日 14:02:57',
......@@ -76,6 +81,15 @@ function generateMusic (formData: Recordable) {
}, 3000)
}
/*
*@Description: 设置当前播放的音乐
*@MethodAuthor: xiaohong
*@Date: 2024-07-19 11:22:33
*/
function setCurrentSong (music: Recordable) {
currentSong.value = music
}
defineExpose({
generateMusic
})
......@@ -86,9 +100,9 @@ defineExpose({
:deep(.el-tabs) {
display: flex;
flex-direction: column;
.el-tabs__content{
padding: 0 7px;
overflow: auto;
}
.el-tabs__content {
padding: 0 7px;
overflow: auto;
}
}
</style>
src/views/ai/music/components/list/songCard/index.vue
<template>
<div class="flex bg-[var(--el-bg-color-overlay)] p-12px mb-12px rounded-1">
<el-image :src="imageUrl" class="flex-none w-80px"/>
<div class="relative" @click="playSong">
<el-image :src="songInfo.imageUrl" class="flex-none w-80px"/>
<div class="bg-black bg-op-40 absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer">
<Icon :icon="currentSong.id === songInfo.id ? 'solar:pause-circle-bold':'mdi:arrow-right-drop-circle'" :size="30" />
</div>
</div>
<div class="ml-8px">
<div>{{ title }}</div>
<div>{{ songInfo.title }}</div>
<div class="mt-8px text-12px text-[var(--el-text-color-secondary)] line-clamp-2">
{{ desc }}
{{ songInfo.desc }}
</div>
</div>
</div>
......@@ -15,15 +20,17 @@
defineOptions({ name: 'Index' })
defineProps({
imageUrl: {
type: String
},
title: {
type: String
},
desc: {
type: String
songInfo: {
type: Object,
default: () => ({})
}
})
const emits = defineEmits(['play'])
const currentSong = inject('currentSong', {})
function playSong () {
emits('play')
}
</script>
src/views/ai/music/components/list/songInfo/index.vue
<template>
<ContentWrap class="w-300px mb-[0!important] line-height-24px">
<el-image :src="imageUrl"/>
<div class="">{{ title }}</div>
<div class="text-[var(--el-text-color-secondary)] text-12px line-clamp-1">{{ desc }}</div>
<div class="text-[var(--el-text-color-secondary)] text-12px">{{ date }}</div>
<el-image :src="currentSong.imageUrl"/>
<div class="">{{ currentSong.title }}</div>
<div class="text-[var(--el-text-color-secondary)] text-12px line-clamp-1">
{{ currentSong.desc }}
</div>
<div class="text-[var(--el-text-color-secondary)] text-12px">
{{ currentSong.date }}
</div>
<el-button size="small" round class="my-6px">信息复用</el-button>
<div class="text-[var(--el-text-color-secondary)] text-12px" v-html="lyric"></div>
<div class="text-[var(--el-text-color-secondary)] text-12px" v-html="currentSong.lyric"></div>
</ContentWrap>
</template>
......@@ -13,21 +17,6 @@
defineOptions({ name: 'Index' })
defineProps({
imageUrl: {
type: String
},
title: {
type: String
},
desc: {
type: String
},
date: {
type: String
},
lyric: {
type: String
}
})
const currentSong = inject('currentSong', {})
</script>
src/views/ai/music/components/mode/index.vue
<template>
<ContentWrap class="w-300px h-full">
<ContentWrap class="w-300px h-full mb-[0!important]">
<el-radio-group v-model="generateMode" class="mb-15px">
<el-radio-button label="desc">
描述模式
......@@ -28,10 +28,7 @@ const emits = defineEmits(['generate-music'])
const generateMode = ref('lyric')
interface ModeRef {
formData: Recordable
}
const modeRef = ref<ModeRef | null>(null)
const modeRef = ref<Nullable<{ formData: Recordable }>>(null)
/*
*@Description: 根据信息生成音乐
......@@ -39,6 +36,6 @@ const modeRef = ref<ModeRef | null>(null)
*@Date: 2024-06-27 16:40:16
*/
function generateMusic () {
emits('generate-music', {formData: unref(modeRef)?.formData.value})
emits('generate-music', {formData: unref(modeRef)?.formData})
}
</script>
src/views/ai/write/index/components/Right.vue
<template>
<el-card class="my-card h-full">
<template #header
><h3 class="m-0 px-7 shrink-0 flex items-center justify-between">
<template #header>
<h3 class="m-0 px-7 shrink-0 flex items-center justify-between">
<span>预览</span>
<!-- 展示在右上角 -->
<el-button color="#846af7" v-show="showCopy" @click="copyContent" size="small">
......@@ -10,8 +10,8 @@
</template>
复制
</el-button>
</h3></template
>
</h3>
</template>
<div ref="contentRef" class="hide-scroll-bar h-full box-border overflow-y-auto">
<div class="w-full min-h-full relative flex-grow bg-white box-border p-3 sm:p-7">
......@@ -105,7 +105,7 @@ watch(copied, (val) => {
}
}
.my-card{
.my-card {
display: flex;
flex-direction: column;
......
src/views/ai/write/index/components/Tag.vue
<!-- 标签选项 -->
<template>
<div class="flex flex-wrap gap-[8px]">
<span
......
src/views/ai/write/index/index.vue
......@@ -20,7 +20,7 @@
<script setup lang="ts">
import Left from './components/Left.vue'
import Right from './components/Right.vue'
import { WriteApi } from '@/api/ai/write'
import { WriteApi, WriteVO } from '@/api/ai/write'
import { WriteExample } from '@/views/ai/utils/constants'
const message = useMessage()
......@@ -37,7 +37,7 @@ const stopStream = () => {
/** 执行写作 */
const rightRef = ref<InstanceType<typeof Right>>()
const submit = (data) => {
const submit = (data: WriteVO) => {
abortController.value = new AbortController()
writeResult.value = ''
isWriting.value = true
......
src/views/mall/promotion/kefu/components/KeFuConversationList.vue
......@@ -21,9 +21,9 @@
</div>
<div class="ml-10px w-100%">
<div class="flex justify-between items-center w-100%">
<span>{{ item.userNickname }}</span>
<span class="username">{{ item.userNickname }}</span>
<span class="color-[#989EA6]">
{{ formatDate(item.lastMessageTime) }}
{{ formatPast(item.lastMessageTime, 'YYYY-mm-dd') }}
</span>
</div>
<!-- 最后聊天内容 -->
......@@ -70,7 +70,7 @@
<script lang="ts" setup>
import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import { useEmoji } from './tools/emoji'
import { formatDate } from '@/utils/formatTime'
import { formatPast } from '@/utils/formatTime'
import { KeFuMessageContentTypeEnum } from './tools/constants'
import { useAppStore } from '@/store/modules/app'
......@@ -185,6 +185,16 @@ watch(showRightMenu, (val) => {
background-color: #fff;
transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
.username {
min-width: 0;
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.last-message {
width: 200px;
overflow: hidden; // 隐藏超出的文本
......
src/views/mall/promotion/kefu/components/KeFuMessageList.vue
......@@ -40,19 +40,54 @@
v-if="item.senderType === UserTypeEnum.MEMBER"
:src="conversation.userAvatar"
alt="avatar"
class="w-60px h-60px"
/>
<div
:class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
class="p-10px"
>
<!-- 文本消息 -->
<TextMessageItem :message="item" />
<MessageItem :message="item">
<template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
<div
v-dompurify-html="replaceEmoji(item.content)"
class="flex items-center"
></div>
</template>
</MessageItem>
<!-- 图片消息 -->
<ImageMessageItem :message="item" />
<MessageItem :message="item">
<el-image
v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
:initial-index="0"
:preview-src-list="[item.content]"
:src="item.content"
class="w-200px"
fit="contain"
preview-teleported
/>
</MessageItem>
<!-- 商品消息 -->
<ProductMessageItem :message="item" />
<MessageItem :message="item">
<ProductItem
v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
:picUrl="getMessageContent(item).picUrl"
:price="getMessageContent(item).price"
:skuText="getMessageContent(item).introduction"
:title="getMessageContent(item).spuName"
:titleWidth="400"
class="max-w-70%"
priceColor="#FF3000"
/>
</MessageItem>
<!-- 订单消息 -->
<OrderMessageItem :message="item" />
<MessageItem :message="item">
<OrderItem
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
:message="item"
class="max-w-70%"
/>
</MessageItem>
</div>
<el-avatar
v-if="item.senderType === UserTypeEnum.ADMIN"
......@@ -97,24 +132,24 @@ import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/mes
import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
import PictureSelectUpload from './tools/PictureSelectUpload.vue'
import TextMessageItem from './message/TextMessageItem.vue'
import ImageMessageItem from './message/ImageMessageItem.vue'
import ProductMessageItem from './message/ProductMessageItem.vue'
import OrderMessageItem from './message/OrderMessageItem.vue'
import { Emoji } from './tools/emoji'
import ProductItem from './message/ProductItem.vue'
import OrderItem from './message/OrderItem.vue'
import { Emoji, useEmoji } from './tools/emoji'
import { KeFuMessageContentTypeEnum } from './tools/constants'
import { isEmpty } from '@/utils/is'
import { UserTypeEnum } from '@/utils/constants'
import { formatDate } from '@/utils/formatTime'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { debounce } from 'lodash-es'
import { jsonParse } from '@/utils'
dayjs.extend(relativeTime)
defineOptions({ name: 'KeFuMessageList' })
const message = ref('') // 消息弹窗
const { replaceEmoji } = useEmoji()
const messageTool = useMessage()
const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
......@@ -126,18 +161,11 @@ const queryParams = reactive({
})
const total = ref(0) // 消息总条数
const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
/** 获悉消息内容 */
const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
/** 获得消息列表 */
const getMessageList = async (val: KeFuConversationRespVO, conversationChange: boolean) => {
// 会话切换,重置相关参数
if (conversationChange) {
queryParams.pageNo = 1
messageList.value = []
total.value = 0
loadHistory.value = false
refreshContent.value = false
}
conversation.value = val
queryParams.conversationId = val.id
const getMessageList = async () => {
const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
total.value = res.total
// 情况一：加载最新消息
......@@ -146,14 +174,18 @@ const getMessageList = async (val: KeFuConversationRespVO, conversationChange: b
} else {
// 情况二：加载历史消息
for (const item of res.list) {
if (messageList.value.some((val) => val.id === item.id)) {
continue
}
messageList.value.push(item)
pushMessage(item)
}
}
refreshContent.value = true
await scrollToBottom()
}
/** 添加消息 */
const pushMessage = (message: any) => {
if (messageList.value.some((val) => val.id === message.id)) {
return
}
messageList.value.push(message)
}
/** 按照时间倒序，获取消息列表 */
......@@ -163,20 +195,49 @@ const getMessageList0 = computed(() => {
})
/** 刷新消息列表 */
const refreshMessageList = async () => {
const refreshMessageList = async (message?: any) => {
if (!conversation.value) {
return
}
queryParams.pageNo = 1
await getMessageList(conversation.value, false)
if (typeof message !== 'undefined') {
// 当前查询会话与消息所属会话不一致则不做处理
if (message.conversationId !== conversation.value.id) {
return
}
pushMessage(message)
} else {
// TODO @puhui999：不基于 page 做。而是流式分页；通过 createTime 排序查询；
queryParams.pageNo = 1
await getMessageList()
}
if (loadHistory.value) {
// 右下角显示有新消息提示
showNewMessageTip.value = true
} else {
// 滚动到最新消息处
await handleToNewMessage()
}
}
defineExpose({ getMessageList, refreshMessageList })
/** 获得新会话的消息列表 */
// TODO @puhui999：可优化：可以考虑本地做每个会话的消息 list 缓存；然后点击切换时，读取缓存；然后异步获取新消息，merge 下；
const getNewMessageList = async (val: KeFuConversationRespVO) => {
// 会话切换,重置相关参数
queryParams.pageNo = 1
messageList.value = []
total.value = 0
loadHistory.value = false
refreshContent.value = false
// 设置会话相关属性
conversation.value = val
queryParams.conversationId = val.id
// 获取消息
await refreshMessageList()
}
defineExpose({ getNewMessageList, refreshMessageList })
const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
const skipGetMessageList = computed(() => {
// 已加载到最后一页的话则不触发新的消息获取
......@@ -221,9 +282,7 @@ const sendMessage = async (msg: any) => {
await KeFuMessageApi.sendKeFuMessage(msg)
message.value = ''
// 加载消息列表
await getMessageList(conversation.value, false)
// 滚动到最新消息处
await scrollToBottom()
await refreshMessageList()
}
/** 滚动到底部 */
......@@ -248,17 +307,24 @@ const handleToNewMessage = async () => {
await scrollToBottom()
}
/** 加载历史消息 */
const loadHistory = ref(false) // 加载历史消息
const handleScroll = async ({ scrollTop }) => {
/** 处理消息列表滚动事件(debounce 限流) */
const handleScroll = debounce(({ scrollTop }) => {
if (skipGetMessageList.value) {
return
}
// 触顶自动加载下一页数据
if (scrollTop === 0) {
await handleOldMessage()
if (Math.floor(scrollTop) === 0) {
handleOldMessage()
}
}
const wrap = scrollbarRef.value?.wrapRef
// 触底重置
if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
loadHistory.value = false
refreshMessageList()
}
}, 200)
/** 加载历史消息 */
const handleOldMessage = async () => {
// 记录已有页面高度
const oldPageHeight = innerRef.value?.clientHeight
......@@ -268,7 +334,7 @@ const handleOldMessage = async () => {
loadHistory.value = true
// 加载消息列表
queryParams.pageNo += 1
await getMessageList(conversation.value, false)
await getMessageList()
// 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)
}
......
src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue 0 → 100644
<!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 -->
<template>
<div v-show="!isEmpty(conversation)" class="kefu">
<div class="header-title h-60px flex justify-center items-center">他的足迹</div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="最近浏览" name="a" />
<el-tab-pane label="订单列表" name="b" />
</el-tabs>
<div>
<el-scrollbar ref="scrollbarRef" always height="calc(100vh - 400px)" @scroll="handleScroll">
<!-- 最近浏览 -->
<ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
<!-- 订单列表 -->
<OrderBrowsingHistory v-if="activeName === 'b'" ref="orderBrowsingHistoryRef" />
</el-scrollbar>
</div>
</div>
<el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
</template>
<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import ProductBrowsingHistory from './ProductBrowsingHistory.vue'
import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import { isEmpty } from '@/utils/is'
import { debounce } from 'lodash-es'
import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar'
defineOptions({ name: 'MemberBrowsingHistory' })
const activeName = ref('a')
/** tab 切换 */
const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
const handleClick = async (tab: TabsPaneContext) => {
activeName.value = tab.paneName as string
await nextTick()
await getHistoryList()
}
/** 获得历史数据 */
// TODO @puhui：不要用 a、b 哈。就订单列表、浏览列表这种噶
const getHistoryList = async () => {
switch (activeName.value) {
case 'a':
await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
break
case 'b':
await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value)
break
default:
break
}
}
/** 加载下一页数据 */
const loadMore = async () => {
switch (activeName.value) {
case 'a':
await productBrowsingHistoryRef.value?.loadMore()
break
case 'b':
await orderBrowsingHistoryRef.value?.loadMore()
break
default:
break
}
}
/** 浏览历史初始化 */
const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
const initHistory = async (val: KeFuConversationRespVO) => {
activeName.value = 'a'
conversation.value = val
await nextTick()
await getHistoryList()
}
defineExpose({ initHistory })
/** 处理消息列表滚动事件(debounce 限流) */
const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
const handleScroll = debounce(() => {
const wrap = scrollbarRef.value?.wrapRef
// 触底重置
if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
loadMore()
}
}, 200)
</script>
<style lang="scss" scoped>
.header-title {
border-bottom: #e4e0e0 solid 1px;
}
</style>
src/views/mall/promotion/kefu/components/history/OrderBrowsingHistory.vue 0 → 100644
<template>
<OrderItem v-for="item in list" :key="item.id" :order="item" class="mb-10px" />
</template>
<script lang="ts" setup>
import OrderItem from '@/views/mall/promotion/kefu/components/message/OrderItem.vue'
import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import { getOrderPage } from '@/api/mall/trade/order'
import { concat } from 'lodash-es'
defineOptions({ name: 'OrderBrowsingHistory' })
const list = ref<any>([]) // 列表
const total = ref(0) // 总数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: 0
})
const skipGetMessageList = computed(() => {
// 已加载到最后一页的话则不触发新的消息获取
return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
}) // 跳过消息获取
/** 获得浏览记录 */
const getHistoryList = async (val: KeFuConversationRespVO) => {
queryParams.userId = val.userId
const res = await getOrderPage(queryParams)
total.value = res.total
list.value = res.list
}
/** 加载下一页数据 */
const loadMore = async () => {
if (skipGetMessageList.value) {
return
}
queryParams.pageNo += 1
const res = await getOrderPage(queryParams)
total.value = res.total
concat(list.value, res.list)
}
defineExpose({ getHistoryList, loadMore })
</script>
src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue 0 → 100644
<template>
<ProductItem
v-for="item in list"
:key="item.id"
:picUrl="item.picUrl"
:price="item.price"
:skuText="item.introduction"
:title="item.spuName"
:titleWidth="400"
class="mb-10px"
priceColor="#FF3000"
/>
</template>
<script lang="ts" setup>
import { getBrowseHistoryPage } from '@/api/mall/product/history'
import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import { concat } from 'lodash-es'
defineOptions({ name: 'ProductBrowsingHistory' })
const list = ref<any>([]) // 列表
const total = ref(0) // 总数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: 0,
userDeleted: false
})
const skipGetMessageList = computed(() => {
// 已加载到最后一页的话则不触发新的消息获取
return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
}) // 跳过消息获取
/** 获得浏览记录 */
const getHistoryList = async (val: KeFuConversationRespVO) => {
queryParams.userId = val.userId
const res = await getBrowseHistoryPage(queryParams)
total.value = res.total
list.value = res.list
}
/** 加载下一页数据 */
const loadMore = async () => {
if (skipGetMessageList.value) {
return
}
queryParams.pageNo += 1
const res = await getBrowseHistoryPage(queryParams)
total.value = res.total
concat(list.value, res.list)
}
defineExpose({ getHistoryList, loadMore })
</script>
<style lang="scss" scoped></style>
src/views/mall/promotion/kefu/components/index.ts
import KeFuConversationList from './KeFuConversationList.vue'
import KeFuMessageList from './KeFuMessageList.vue'
import MemberBrowsingHistory from './history/MemberBrowsingHistory.vue'
export { KeFuConversationList, KeFuMessageList }
export { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory }
src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue → src/views/mall/promotion/kefu/components/message/MessageItem.vue
<template>
<!-- 图片消息 -->
<template v-if="KeFuMessageContentTypeEnum.IMAGE === message.contentType">
<div
:class="[
message.senderType === UserTypeEnum.MEMBER
? `ml-10px`
: message.senderType === UserTypeEnum.ADMIN
? `mr-10px`
: ''
]"
>
<el-image
:initial-index="0"
:preview-src-list="[message.content]"
:src="message.content"
class="w-200px"
fit="contain"
preview-teleported
/>
</div>
</template>
<!-- 消息组件 -->
<div
:class="[
message.senderType === UserTypeEnum.MEMBER
? `ml-10px`
: message.senderType === UserTypeEnum.ADMIN
? `mr-10px`
: ''
]"
>
<slot></slot>
</div>
</template>
<script lang="ts" setup>
import { KeFuMessageContentTypeEnum } from '../tools/constants'
import { UserTypeEnum } from '@/utils/constants'
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
defineOptions({ name: 'ImageMessageItem' })
defineOptions({ name: 'MessageItem' })
defineProps<{
message: KeFuMessageRespVO
}>()
......
src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue → src/views/mall/promotion/kefu/components/message/OrderItem.vue
<template>
<!-- 图片消息 -->
<template v-if="KeFuMessageContentTypeEnum.ORDER === message.contentType">
<div
:class="[
message.senderType === UserTypeEnum.MEMBER
? `ml-10px`
: message.senderType === UserTypeEnum.ADMIN
? `mr-10px`
: ''
]"
>
<div :key="getMessageContent.id" class="order-list-card-box mt-14px">
<div class="order-card-header flex items-center justify-between p-x-20px">
<div class="order-no">订单号：{{ getMessageContent.no }}</div>
<div :class="formatOrderColor(getMessageContent)" class="order-state font-26">
{{ formatOrderStatus(getMessageContent) }}
</div>
</div>
<div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
<ProductItem
:num="item.count"
:picUrl="item.picUrl"
:price="item.price"
:skuText="item.properties.map((property: any) => property.valueName).join(' ')"
:title="item.spuName"
/>
<div v-if="isObject(getMessageContent)">
<div :key="getMessageContent.id" class="order-list-card-box mt-14px">
<div class="order-card-header flex items-center justify-between p-x-20px">
<div class="order-no">订单号：{{ getMessageContent.no }}</div>
<div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
{{ formatOrderStatus(getMessageContent) }}
</div>
<div class="pay-box mt-30px flex justify-end pr-20px">
<div class="flex items-center">
<div class="discounts-title pay-color"
>共 {{ getMessageContent?.productCount }} 件商品,总金额:
</div>
<div class="discounts-money pay-color">
￥{{ fenToYuan(getMessageContent?.payPrice) }}
</div>
</div>
<div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
<ProductItem
:num="item.count"
:picUrl="item.picUrl"
:price="item.price"
:skuText="item.properties.map((property: any) => property.valueName).join(' ')"
:title="item.spuName"
/>
</div>
<div class="pay-box flex justify-end pr-20px">
<div class="flex items-center">
<div class="discounts-title pay-color"
>共 {{ getMessageContent?.productCount }} 件商品,总金额:
</div>
<div class="discounts-money pay-color">
￥{{ fenToYuan(getMessageContent?.payPrice) }}
</div>
</div>
</div>
</div>
</template>
</div>
</template>
<script lang="ts" setup>
import { KeFuMessageContentTypeEnum } from '../tools/constants'
import ProductItem from './ProductItem.vue'
import { UserTypeEnum } from '@/utils/constants'
import { fenToYuan, jsonParse } from '@/utils'
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
import { fenToYuan } from '@/utils'
import { isObject } from '@/utils/is'
import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
defineOptions({ name: 'OrderMessageItem' })
defineOptions({ name: 'OrderItem' })
const props = defineProps<{
message: KeFuMessageRespVO
message?: KeFuMessageRespVO
order?: any
}>()
const getMessageContent = computed(() => JSON.parse(props.message.content))
const getMessageContent = computed(() =>
typeof props.message !== 'undefined' ? jsonParse(props!.message!.content) : props.order
)
/**
* 格式化订单状态的颜色
......@@ -108,23 +100,23 @@ function formatOrderStatus(order: any) {
background-color: #e2e2e2;
.order-card-header {
height: 80px;
height: 28px;
.order-no {
font-size: 26px;
font-size: 16px;
font-weight: 500;
}
}
.pay-box {
.discounts-title {
font-size: 24px;
font-size: 16px;
line-height: normal;
color: #999999;
}
.discounts-money {
font-size: 24px;
font-size: 16px;
line-height: normal;
color: #999;
font-family: OPPOSANS;
......@@ -134,34 +126,6 @@ function formatOrderStatus(order: any) {
color: #333;
}
}
.order-card-footer {
height: 100px;
.more-item-box {
padding: 20px;
.more-item {
height: 60px;
.title {
font-size: 26px;
}
}
}
.more-btn {
color: #999999;
font-size: 24px;
}
.content {
width: 154px;
color: #333333;
font-size: 26px;
font-weight: 500;
}
}
}
.warning-color {
......
src/views/mall/promotion/kefu/components/message/ProductItem.vue
......@@ -110,33 +110,25 @@ const skuString = computed(() => {
</script>
<style lang="scss" scoped>
.score-img {
width: 36px;
height: 36px;
margin: 0 4px;
}
.ss-order-card-warp {
padding: 20px;
border-radius: 10px;
background-color: #e2e2e2;
.img-box {
width: 164px;
height: 164px;
width: 80px;
height: 80px;
border-radius: 10px;
overflow: hidden;
.order-img {
width: 164px;
height: 164px;
width: 80px;
height: 80px;
}
}
.box-right {
flex: 1;
// width: 500px;
// height: 164px;
position: relative;
.tool-box {
......@@ -147,13 +139,13 @@ const skuString = computed(() => {
}
.title-text {
font-size: 28px;
font-size: 16px;
font-weight: 500;
line-height: 40px;
line-height: 20px;
}
.spec-text {
font-size: 24px;
font-size: 16px;
font-weight: 400;
color: #999999;
min-width: 0;
......@@ -165,15 +157,15 @@ const skuString = computed(() => {
}
.price-text {
font-size: 24px;
font-size: 16px;
font-weight: 500;
font-family: OPPOSANS;
}
.total-text {
font-size: 24px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
line-height: 16px;
color: #999999;
margin-left: 8px;
}
......
src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue deleted 100644 → 0
<template>
<!-- 图片消息 -->
<template v-if="KeFuMessageContentTypeEnum.PRODUCT === message.contentType">
<div
:class="[
message.senderType === UserTypeEnum.MEMBER
? `ml-10px`
: message.senderType === UserTypeEnum.ADMIN
? `mr-10px`
: ''
]"
>
<ProductItem
:picUrl="getMessageContent.picUrl"
:price="getMessageContent.price"
:skuText="getMessageContent.introduction"
:title="getMessageContent.spuName"
:titleWidth="400"
priceColor="#FF3000"
/>
</div>
</template>
</template>
<script lang="ts" setup>
import { KeFuMessageContentTypeEnum } from '../tools/constants'
import ProductItem from './ProductItem.vue'
import { UserTypeEnum } from '@/utils/constants'
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
defineOptions({ name: 'ProductMessageItem' })
const props = defineProps<{
message: KeFuMessageRespVO
}>()
/** 获悉消息内容 */
const getMessageContent = computed(() => JSON.parse(props.message.content))
</script>
src/views/mall/promotion/kefu/components/message/TextMessageItem.vue deleted 100644 → 0
<template>
<!-- 文本消息 -->
<template v-if="KeFuMessageContentTypeEnum.TEXT === message.contentType">
<div
v-dompurify-html="replaceEmoji(message.content)"
:class="[
message.senderType === UserTypeEnum.MEMBER
? `ml-10px`
: message.senderType === UserTypeEnum.ADMIN
? `mr-10px`
: ''
]"
class="flex items-center"
></div>
</template>
</template>
<script lang="ts" setup>
import { KeFuMessageContentTypeEnum } from '../tools/constants'
import { UserTypeEnum } from '@/utils/constants'
import { useEmoji } from '../tools/emoji'
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
defineOptions({ name: 'TextMessageItem' })
defineProps<{
message: KeFuMessageRespVO
}>()
const { replaceEmoji } = useEmoji()
</script>
src/views/mall/promotion/kefu/index.vue
<template>
<el-row :gutter="10">
<!-- 会话列表 -->
<el-col :span="8">
<el-col :span="6">
<ContentWrap>
<KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
</ContentWrap>
</el-col>
<!-- 会话详情（选中会话的消息列表） -->
<el-col :span="16">
<el-col :span="12">
<ContentWrap>
<KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
</ContentWrap>
</el-col>
<!-- 会员足迹（选中会话的会员足迹） -->
<el-col :span="6">
<ContentWrap>
<MemberBrowsingHistory ref="memberBrowsingHistoryRef" />
</ContentWrap>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import { KeFuConversationList, KeFuMessageList } from './components'
import { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } from './components'
import { WebSocketMessageTypeConstants } from './components/tools/constants'
import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import { getAccessToken } from '@/utils/auth'
......@@ -58,14 +64,16 @@ watchEffect(() => {
// 2.2 消息类型：KEFU_MESSAGE_TYPE
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
// 刷新会话列表
// TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
getConversationList()
// 刷新消息列表
keFuChatBoxRef.value?.refreshMessageList()
keFuChatBoxRef.value?.refreshMessageList(JSON.parse(jsonMessage.content))
return
}
// 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
// 刷新会话列表
// TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
getConversationList()
}
} catch (error) {
......@@ -81,8 +89,10 @@ const getConversationList = () => {
/** 加载指定会话的消息列表 */
const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
const handleChange = (conversation: KeFuConversationRespVO) => {
keFuChatBoxRef.value?.getMessageList(conversation, true)
keFuChatBoxRef.value?.getNewMessageList(conversation)
memberBrowsingHistoryRef.value?.initHistory(conversation)
}
/** 初始化 */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment