修改第五步空白的问题

yangyin

2024-11-22 c10af99bb6639ec4b66c0e639361307917550d20

 src/views/project/ch/home/component/waterRight/top.vue

@@ -1,90 +1,90 @@
<template>
   <div class="flex items-center flex-column mt-20">
      <div class="flex items-center">
         <img src="/static/images/logo/logo-mini.svg" alt="logo" class="layout-logo-medium-img" />
         <p class="set-waterTitle"><strong>水务 AI</strong>汇聚全球 AI 精髓</p>
      </div>
      <div class="flex items-center pc-roleList">
         <div v-for="(item, index) in state.roleList" :key="index" class="flex items-center pl-6" @click="handleClick(item)">
            <el-tooltip :content="item.content" placement="top" effect="light" popper-class="my-pop">
               <div class="modelItem cursor-pointer flex items-center" :class="{ modelItemActive: item.id === state.activeRole }">
                  <img :src="item.icon" alt="icon" class="set-icon box-border" />
                  <span>{{ item.title }}</span>
               </div>
            </el-tooltip>
         </div>
         <div class="flex items-center cursor-pointer pl-5">
            <div class="modelItem cursor-pointer flex items-center">
               <img src="/static/images/wave/More.png" alt="icon" class="set-icon box-border" />
               <span>更多</span>
            </div>
         </div>
      </div>
      <div class="playInput hl_input">
         <div class="assembly flex">
            <el-button title="插件菜单" class="label flex items-center cursor-pointer" link>
               <img src="/static/images/wave/PlugIn.png" class="set-icon box-border" />
            </el-button>
         </div>
         <div class="set-input">
            <el-input v-model="state.inputAnswer" placeholder="在这里输入您的问题开始和AI对话" class="set-inputAnswer" />
         </div>
         <div class="h100 flex items-center">
            <div class="upload_img">
               <div class="cursor-pointer flex items-center">
                  <el-button title="AI看图" class="set-button" link>
                     <el-icon style="font-size: 24px !important">
                        <ele-Picture />
                     </el-icon>
                  </el-button>
                  <el-button title="AI看图" class="set-button" link>
                     <el-icon style="font-size: 24px !important">
                        <ele-Headset />
                     </el-icon>
                  </el-button>
                  <el-button title="AI看图" class="set-button" link>
                     <el-icon style="font-size: 24px !important" color="#409efc">
                        <ele-Position />
                     </el-icon>
                  </el-button>
               </div>
            </div>
         </div>
      </div>
   <div class="flex items-center">
      <img src="/static/images/logo/logoWithNoName.png" alt="logo" class="layout-logo-medium-img" />
      <p class="set-waterTitle"><strong>WI 水务智能管家</strong>智慧水务助手</p>
   </div>
   <div class="flex items-center pc-roleList"></div>
   <PlayBar v-model="inputValue" @send-click="sendClick" :is-home="true" />
</template>

<script setup lang="ts">
import { reactive } from 'vue';
let state = reactive({
   roleList: [
      {
         id: 1,
         icon: '/static/images/wave/Glm.jpg',
         title: '水务GLM',
         content: '使用最为广泛的知名AI模型，响应速度快，智能化程度高，擅长多领域问题解决，包括创作、翻译、多语种百科知识、数学问题等。',
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { GetLLMList, setHistoryGroupTitle } from '/@/api/ai/chat';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import router from '/@/router';
import { activeChatRoom, activeLLMId, activeSectionAId } from '/@/stores/chatRoom';
import { handleNormalAuth } from '/@/utils/request';

const emits = defineEmits(['sendClick']);
const inputValue = ref('新建对话开始');

const sendClick = async (cb) => {
   if (!inputValue.value.trim()) return;

   if (!handleNormalAuth()) {
      return;
   }

   const res = await setHistoryGroupTitle({
      history_group_id: activeChatRoom.value.id,
      title: inputValue.value,
   });
   if (!res.json_ok) {
      return ElMessage.error('修改聊天室名称失败');
   }

   activeChatRoom.value.title = inputValue.value;
   activeChatRoom.value.isInitial = false;
   router.push({
      name: 'AskAnswer',
      query: {
         id: activeChatRoom.value.id,
      },
      {
         id: 2,
         icon: '/static/images/wave/Glm.jpg',
         title: '水务-3.5',
         content:
            '目前业界最强大的模型，在需要高级推理、深度指令理解和更具创造力的任务中，表现比其他模型更强，例如复杂的文本和逻辑分析、复杂的数学问题等。',
      },
      {
         id: 3,
         icon: '/static/images/wave/Glm.jpg',
         title: '水务-4.0',
         content:
            '目前业界最强大的模型，在需要高级推理、深度指令理解和更具创造力的任务中，表现比其他模型更强，例如复杂的文本和逻辑分析、复杂的数学问题等。',
      },
   ],
   activeRole: 0,
   inputAnswer: '',
});
const handleClick = (item) => {
   state.activeRole = item.id;
   });
};

const llmList = ref([]);
const iconList = ['/static/images/wave/Glm.jpg', '/static/images/wave/Glm.jpg', '/static/images/wave/Glm.jpg'];
const getLLMList = async () => {
   const res = await GetLLMList();

   const resData = (res?.llm_list || []) as any[];
   llmList.value = resData.map((item, index) => ({
      get logicId() {
         return this.logicModel.id;
      },
      get logicTitle() {
         return this.logicModel.title;
      },
      icon: iconList[index],
      logicModel: {
         ...item,
      },
   }));
   const first = llmList.value?.[0];
   first && setLLm(first.logicId);
};

const setLLm = async (llmId: string) => {
   // const res = await SetLLM({
   //    llm: llmId,
   // });
   activeLLMId.value = llmId;

   return true;
};
const handleClick = (item) => {
   setLLm(item.logicId);
};

const updateChatInput = (val) => {
   inputValue.value = val;
};

defineExpose({
   updateChatInput,
});
</script>
<style scoped lang="scss">
.set-waterTitle {
@@ -120,6 +120,11 @@
      height: 20px;
      position: relative;
   }
   .set-icon-more {
      width: 16px;
      height: 16px;
      position: relative;
   }
   span {
      margin-left: 8px;
      font-weight: 500;
@@ -130,59 +135,6 @@
   background-color: #1c86ff;
   border-color: #1c86ff;
   color: #fff;
}
.playInput {
   align-items: flex-start;
   width: 760px;
   position: relative;
   padding: 4px 4px 4px 12px;

   display: flex;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border-radius: 22px;
   border: 1px solid #00000030;
   -webkit-box-shadow: 0 0 0 1px transparent, 0 3px 16px 0 #dee0f3;
   box-shadow: 0 0 0 1px transparent, 0 3px 16px 0 #dee0f3;
   -webkit-transition: border-color 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
   transition: border-color 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
   -o-transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
   transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
   transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
   background-color: #fff;
   .assembly {
      position: relative;
      align-self: flex-end;
      margin-right: 12px;
      .label {
         height: 38px;
      }
   }
   .set-input {
      position: relative;
      vertical-align: bottom;
      font-size: 14px;
      display: inline-block;
      width: 100%;
      .set-inputAnswer {
         min-height: 36px;
         height: 36px;
         padding: 3px 0;
         line-height: 20px;
         border: none;
         background-color: transparent;
         color: #333;
         font-size: 15px;
      }
   }
}
.set-button {
   :deep(.el-button .is-link) {
      height: unset !important;
   }
}
</style>
<style lang="scss">