|
|
@@ -1,95 +1,248 @@
|
|
|
-<script setup>
|
|
|
+<script setup lang="jsx">
|
|
|
+import { ref } from "vue";
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
+import { NScrollbar, NSelect, NInput, NSwitch } from 'naive-ui';
|
|
|
+import { useAppStore } from '@/stores/modules/app';
|
|
|
import SvgIcon from '@/components/SvgIcon';
|
|
|
-import TheMenu from "@/components/Layout/TheMenu.vue";
|
|
|
+import BaseButton from "@/components/BaseButton";
|
|
|
+import BasePopover from "@/components/BasePopover";
|
|
|
+
|
|
|
+const appStore = useAppStore();
|
|
|
+const { subMenuCollapse } = storeToRefs(appStore);
|
|
|
+
|
|
|
+const inputInstRef = ref(null);
|
|
|
+const inputValue = ref(null);
|
|
|
+const isFocusState = ref(false);
|
|
|
+const value = ref();
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ label: "水厂的名称不要太长",
|
|
|
+ value: 'song0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '信义污水厂',
|
|
|
+ value: 'song1'
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const changeCollapse = () => appStore.toggleSubMenuCollapse();
|
|
|
+
|
|
|
+const renderAvatar = () => {
|
|
|
+ return (
|
|
|
+ <div></div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const focusInput = _ => isFocusState.value = true;
|
|
|
+
|
|
|
+const blurInput = _ => isFocusState.value = false;
|
|
|
+
|
|
|
+const handleInpFocus = () => {
|
|
|
+ console.log(123);
|
|
|
+ inputInstRef.value?.focus()
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="viewport">
|
|
|
- <aside class="aside-container w-60 h-full">
|
|
|
- <div class="logo-main py-[14px] px-[20px]">
|
|
|
- <div class="title flex items-center space-x-2">
|
|
|
- <div class="w-[28px] h-[28px]">
|
|
|
- <SvgIcon name="common-logo" :size="28"></SvgIcon>
|
|
|
- </div>
|
|
|
- <span class="block w-[70px] font-[10px]">人工智能运营体智慧决策助手</span>
|
|
|
+ <section class="flex items-start h-full">
|
|
|
+ <div class="sub-menu-container w-[190px] h-full py-[18px]" v-show="subMenuCollapse">
|
|
|
+ <div class="px-[11px]">
|
|
|
+ <!-- 操作 -->
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <p class="text-[#1A2029] text-[14px] font-bold">历史记录</p>
|
|
|
+ <SvgIcon name="tool-arrow-right" :size="20" class="cursor-pointer" @click="changeCollapse"></SvgIcon>
|
|
|
+ </div>
|
|
|
+ <!-- 新增对话 -->
|
|
|
+ <div class="create-btn py-[22px]">
|
|
|
+ <BaseButton></BaseButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="menu-cotainer">
|
|
|
- <TheMenu></TheMenu>
|
|
|
+ <!-- 历史列表 -->
|
|
|
+ <div class="
|
|
|
+ history-content
|
|
|
+ text-[12px] text-[#5E5E5E] leading-[20px]
|
|
|
+ ">
|
|
|
+ <NScrollbar class="h-full">
|
|
|
+ <ul class="history-list pr-[4px]">
|
|
|
+ <li class="history-item" v-for="item in 100" :key="item">
|
|
|
+ <p class="content">曝气池产生茶色也许文字很很少</p>
|
|
|
+ <p class="time flex item-center justify-between w-full mt-[2px]">
|
|
|
+ <span>2024-04-26 10:12:13</span>
|
|
|
+ <SvgIcon name="tool-bucket-del" size="16" class="del-icon cursor-pointer hidden"></SvgIcon>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </NScrollbar>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-container h-full flex-1 ">
|
|
|
+ <!-- chat header -->
|
|
|
+ <div class="chat-wrapper w-full h-full rounded-[20px]">
|
|
|
+ <div class="chat-header flex items-center justify-end py-[24px] pr-[18px] space-x-[16px]">
|
|
|
+ <!-- 数字人设置 -->
|
|
|
+ <BasePopover placement="bottom" content="数字人设置">
|
|
|
+ <div class="avatar rounded-full w-[24px] h-[24px]">
|
|
|
+ <img src="@/assets/images/chat/img-avatar.png" alt="" class="cursor-pointer">
|
|
|
+ </div>
|
|
|
+ </BasePopover>
|
|
|
+ <!-- 声音开关 -->
|
|
|
+ <SvgIcon name="tool-voice-open" :size="24" class="cursor-pointer"></SvgIcon>
|
|
|
+ <!--分割线 -->
|
|
|
+ <div class="h-[24px] border-r-[1px] border-color-[#D3D0E1]"></div>
|
|
|
+ <!-- 水厂select -->
|
|
|
+ <NSelect v-model:value="value" placeholder="123" :options="options" class="w-[114px]" size="medium"
|
|
|
+ :consistent-menu-width="false" />
|
|
|
+ <!-- 用户头像 -->
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img src="@/assets/images/chat/img-user-avatar.png" alt="" class="w-[32px] mr-[10px] cursor-pointer">
|
|
|
+ <span class="text-[#272D35] text-[12px]">我的昵称</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="warn-container px-[20px]">
|
|
|
- <dl class="warn-content px-[12px] py-[12px]">
|
|
|
- <dt class="title h-[20px] mb-[12px] text-[16px]"></dt>
|
|
|
- <dd class="info">
|
|
|
- <SvgIcon name="menu-warn-tips"></SvgIcon>
|
|
|
- <span class="pl-[4px]">您有100个报警信息，请解决</span>
|
|
|
- </dd>
|
|
|
- <dd class="info">
|
|
|
- <SvgIcon name="menu-warn-tips"></SvgIcon>
|
|
|
- <span class="pl-[4px]">您有100个报警信息，请解决</span>
|
|
|
- </dd>
|
|
|
- </dl>
|
|
|
- </div>
|
|
|
- </aside>
|
|
|
- </div>
|
|
|
+ <main class="chat-main w-[800px] h-full m-auto flex flex-col justify-between">
|
|
|
+ <!-- TODO：这里需要抽离 -->
|
|
|
+ <!-- chat 内容区域 -->
|
|
|
+ <div class="chat-welcome">
|
|
|
+ <div class="
|
|
|
+ welcome
|
|
|
+ flex flex-col items-center justify-between
|
|
|
+ text-center
|
|
|
+ ">
|
|
|
+ <SvgIcon name="common-logo" size="56"></SvgIcon>
|
|
|
+ <p class="py-[10px] text-[#1A2029] text-[36px] font-bold leading-[50px]">您好,我是LibraAI专家问答</p>
|
|
|
+ <p class="text-[#333333] leading-[20px]">期待与您一同规划和完成未来的工作。有任何重点或需讨论的事项，随时告诉我。</p>
|
|
|
+ </div>
|
|
|
+ <!-- 问答列表 -->
|
|
|
+ <dl class="answer-list rounded-[8px] bg-white py-[30px] pl-[82px] mt-[36px]">
|
|
|
+ <dt class="mb-[18px] text-[20px] text-[#1A2029] leading-[28px] font-bold">您可以试着问我：</dt>
|
|
|
+ <dd class="mb-[19px] text-[15px] text-[#2E5CFF] leading-[21px] cursor-pointer">帮我做一份如何快速入手污水处理厂的相关工作的学习计划？
|
|
|
+ </dd>
|
|
|
+ <dd class="mb-[19px] text-[15px] text-[#2E5CFF] leading-[21px] cursor-pointer">硝化作用的速度快慢与哪些因素有关？</dd>
|
|
|
+ <dd class="text-[15px] text-[#2E5CFF] leading-[21px] cursor-pointer">污泥回流比如何计算？</dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="chat-footer">
|
|
|
+ <div class="chat-inp-inner border-[1px]" :class="[{'border-[#2454FF]': isFocusState}]" @click="handleInpFocus">
|
|
|
+ <div class="inp-wrapper flex-1" >
|
|
|
+ <NInput
|
|
|
+ class="flex-1"
|
|
|
+ ref="inputInstRef"
|
|
|
+ v-model:value="inputValue"
|
|
|
+ type="textarea"
|
|
|
+ size="medium"
|
|
|
+ placeholder="输入您的问题或需求，Enter发送，Shift+Enter换行"
|
|
|
+ :autosize="{ minRows: 1, maxRows: 5 }"
|
|
|
+ @focus="focusInput"
|
|
|
+ @blur="blurInput"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="submit-btn">
|
|
|
+ <button class="btn bg-[#1A2029] hover:bg-[#3C4148]">
|
|
|
+ <SvgIcon name="tool-send-plane" size="22"></SvgIcon>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="switch-inner pt-[8px] space-x-[6px]">
|
|
|
+ <NSwitch size="small"></NSwitch>
|
|
|
+ <span class="text-[12px] text-[#9E9E9E]">使用搜索增强</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </main>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.warn-container {
|
|
|
- height: 100px;
|
|
|
+.chat-main {
|
|
|
+ height: calc(100% - 82px);
|
|
|
+}
|
|
|
|
|
|
- .warn-content {
|
|
|
- border: 1px solid #fff;
|
|
|
- border-radius: 6px;
|
|
|
- background: #FAF5F7;
|
|
|
+.chat-footer {
|
|
|
+ padding-bottom: 30px;
|
|
|
|
|
|
- .title {
|
|
|
- background: url("@/assets/images/warn-text.png") left center no-repeat;
|
|
|
- background-size: 62px 14px;
|
|
|
- }
|
|
|
+ .chat-inp-inner {
|
|
|
+ position: relative;
|
|
|
+ @include flex(x, center, between);
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px 3px 12px 0px #97D3FF40;
|
|
|
|
|
|
- .info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 12px;
|
|
|
- color: #333;
|
|
|
- cursor: pointer;
|
|
|
+ .inp-wrapper {
|
|
|
+ padding: 17px 0px 17px 34px;
|
|
|
+ }
|
|
|
|
|
|
- &:not(:last-child) {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
+ .submit-btn {
|
|
|
+ @include flex(x, center, center);
|
|
|
+ width: 84px;
|
|
|
|
|
|
- &:hover {
|
|
|
- color: #5E5E5E;
|
|
|
+ .btn {
|
|
|
+ @include flex(x, center, center);
|
|
|
+ width: 50px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 32px;
|
|
|
+ transition: all .3s;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.viewport {
|
|
|
- @include flex(y, start, start);
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- background: #F2F6FC;
|
|
|
-}
|
|
|
+.chat-container {
|
|
|
+ padding: 20px 20px 20px 0;
|
|
|
|
|
|
-.aside-container {
|
|
|
- border-right: 1px solid #DBE5ED;
|
|
|
+ .chat-wrapper {
|
|
|
+ border: 1px solid #fff;
|
|
|
+ background: linear-gradient(180deg, rgba(238, 253, 255, 0.5) 0%, rgba(231, 243, 252, 0.5) 100%);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.menu-cotainer {
|
|
|
- // padding: 0 7px;
|
|
|
-}
|
|
|
+.sub-menu-container {
|
|
|
+ border-left: 1px solid #DBE6EE;
|
|
|
|
|
|
-.logo-main {
|
|
|
- font-family: AlimamaShuHeiTi;
|
|
|
+ .history-content {
|
|
|
+ height: calc(100% - 106px);
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 10px;
|
|
|
- line-height: 12px;
|
|
|
+ .history-item {
|
|
|
+ position: relative;
|
|
|
+ @include flex(y, start, center);
|
|
|
+ height: 60px;
|
|
|
+ padding: 0 10px 0 12px;
|
|
|
+ transition: bakground .3s;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ @include textLine(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-radius: 2px;
|
|
|
+ background-color: #F5F8FA;
|
|
|
+ box-shadow: 0.5px 0.5px 4px 0px #93A1B233;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ color: #325DF3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .del-icon {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0px;
|
|
|
+ display: block;
|
|
|
+ content: " ";
|
|
|
+ width: 2px;
|
|
|
+ height: 100%;
|
|
|
+ background: #325DF3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
whh
