<script lang="ts" setup>
|
import { computed, reactive, ref, toRefs } from 'vue';
|
|
import AiChat from './AiChat.vue';
|
import Contacts from './Contacts.vue';
|
import Reply from './Reply.vue';
|
|
defineOptions({ name: 'ChatModal' });
|
|
defineProps({
|
isTwinkle: { type: Boolean, default: false },
|
});
|
|
const emit = defineEmits(['toggleTwinkle']);
|
|
defineExpose({
|
openModal,
|
closeModal,
|
});
|
|
interface State {
|
visible: boolean;
|
fullScreen: boolean;
|
activeLeftKey: string;
|
}
|
|
const tabList = [
|
{
|
id: '1',
|
icon: 'icon-ym icon-ym-ai',
|
checkedIcon: 'icon-ym icon-ym-ai',
|
fullName: '大迈AI智能助手',
|
},
|
{
|
id: '2',
|
icon: 'icon-ym icon-ym-contacts',
|
checkedIcon: 'icon-ym icon-ym-contacts-checked',
|
fullName: '通讯录',
|
},
|
{
|
id: '3',
|
icon: 'icon-ym icon-ym-chat',
|
checkedIcon: 'icon-ym icon-ym-chat-checked',
|
fullName: '内部聊天',
|
},
|
];
|
|
const state = reactive<State>({
|
visible: false,
|
fullScreen: false,
|
activeLeftKey: '1',
|
});
|
const { visible, activeLeftKey, fullScreen } = toRefs(state);
|
const replyRef = ref(null);
|
|
const getModalTitle = computed(() => {
|
const index = tabList.findIndex((o) => o.id === state.activeLeftKey);
|
return tabList[index]?.fullName;
|
});
|
|
function openModal() {
|
if (state.visible) return;
|
state.fullScreen = false;
|
state.activeLeftKey = '1';
|
state.visible = true;
|
}
|
function closeModal() {
|
state.visible = false;
|
}
|
function handleFullScreen() {
|
state.fullScreen = !state.fullScreen;
|
}
|
function toggleTab(id) {
|
if (state.activeLeftKey === id) return;
|
state.activeLeftKey = id;
|
}
|
function toReply(data) {
|
state.activeLeftKey = '3';
|
(replyRef.value as any)?.addNewChat(data);
|
}
|
function toggleTwinkle(boo) {
|
emit('toggleTwinkle', boo);
|
}
|
</script>
|
<template>
|
<div class="jnpf-chat-modal" :class="{ 'jnpf-chat-modal-fullScreen': fullScreen }" v-if="visible">
|
<div class="chat-modal-left-pane">
|
<div class="chat-tabs">
|
<div
|
class="chat-tab-item"
|
v-for="item in tabList"
|
:key="item.id"
|
:class="{ 'chat-tab-item__active': activeLeftKey === item.id }"
|
@click="toggleTab(item.id)">
|
<i :class="item.checkedIcon" v-if="activeLeftKey === item.id"></i>
|
<i :class="item.icon" v-else></i>
|
</div>
|
</div>
|
</div>
|
<div class="chat-modal-center-pane">
|
<div class="chat-modal-center-pane__header">
|
<div class="chat-header-title">{{ getModalTitle }}</div>
|
<div class="chat-header-actions">
|
<a-tooltip title="缩小" :z-index="1000000" v-if="fullScreen">
|
<i class="icon-ym icon-ym-reduce chat-header-actions-item" @click="handleFullScreen"></i>
|
</a-tooltip>
|
<a-tooltip title="放大" :z-index="1000000" v-else>
|
<i class="icon-ym icon-ym-enlarge chat-header-actions-item" @click="handleFullScreen"></i>
|
</a-tooltip>
|
<a-tooltip title="关闭" :z-index="1000000">
|
<i class="icon-ym icon-ym-fail chat-header-actions-item" @click="closeModal"></i>
|
</a-tooltip>
|
</div>
|
</div>
|
<div class="chat-modal-center-pane__main">
|
<AiChat v-show="activeLeftKey === '1'" />
|
<Contacts v-show="activeLeftKey === '2'" @to-reply="toReply" />
|
<Reply ref="replyRef" @toggle-twinkle="toggleTwinkle" v-show="activeLeftKey === '3'" />
|
</div>
|
</div>
|
</div>
|
</template>
|
<style lang="scss">
|
@use './style/index.scss' as *;
|
</style>
|
