Browse Source

feat: ai助手菜单,新增左侧历史界面样式

hotchicken1996 1 month ago
parent
commit
33c149552d

+ 2 - 2
client/.env.dev

@@ -5,8 +5,8 @@ VITE_DEV=false
 
 # 请求路径
 # VITE_BASE_URL='http://10.10.9.113:48080'
-# VITE_BASE_URL='http://10.10.10.7:18080'
-VITE_BASE_URL='https://oa.zjugis.com:28080'
+ VITE_BASE_URL='http://10.10.10.7:18080'
+#VITE_BASE_URL='https://oa.zjugis.com:28080'
 
 # 上传路径
 VITE_UPLOAD_URL='/infra/file/upload'

BIN
client/src/assets/imgs/ai/msg-icon.png


BIN
client/src/assets/imgs/ai/new_chat_bg.png


BIN
client/src/assets/imgs/ai/new_chat_icon.png


+ 26 - 0
client/src/views/OaSystem/aiQA/components/ChatContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="chat-content">
+    <div class="message-body"></div>
+    <div class="input-body"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chat-content {
+  width: 100%;
+  height: 100%;
+  padding: 25px 50px;
+
+  .message-body {
+  }
+
+  .input-body {
+    width: calc(100% - 50px);
+    margin-left: 50px;
+    background: #f4f7fd;
+    border-radius: 8px 8px 8px 8px;
+  }
+}
+</style>

+ 120 - 0
client/src/views/OaSystem/aiQA/components/historyChat.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import newChatIcon from '@/assets/imgs/ai/new_chat_icon.png'
+import msgIcon from '@/assets/imgs/ai/msg-icon.png'
+
+const searchKey = ref('')
+const handleNewChat = (): void => {
+  console.log('handleNewChat')
+}
+</script>
+
+<template>
+  <div class="ai-history-chat">
+    <div class="new-chat-btn" @click="handleNewChat">
+      <img class="icon" :src="newChatIcon" alt="" />
+      新建对话
+    </div>
+    <div class="search-content">
+      <el-input prefix-icon="Search" type="text" v-model="searchKey" placeholder="搜素历史记录" />
+    </div>
+    <div class="histories-content">
+      <div class="history-body">
+        <img class="icon" :src="msgIcon" alt="" />
+        <span class="text">村庄规划的编制要点是什么?</span>
+      </div>
+    </div>
+    <div class="footer">
+      <!--        <div class="delete-btn">批量删除</div>-->
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ai-history-chat {
+  position: relative;
+  margin-right: 20px;
+  height: 100%;
+  width: 360px;
+  background: #ffffff;
+  border-radius: 20px 20px 20px 20px;
+  padding: 25px 25px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .new-chat-btn {
+    flex-shrink: 0;
+    width: 100%;
+    height: 46px;
+    font-weight: 400;
+    font-size: 18px;
+    color: #ffffff;
+    background-image: url('@/assets/imgs/ai/new_chat_bg.png');
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    .icon {
+      width: 22px;
+      height: 22px;
+      margin-right: 10px;
+    }
+  }
+
+  .search-content {
+    width: 100%;
+    font-size: 16px;
+    color: #8a94a4;
+    margin-top: 20px;
+    flex-shrink: 0;
+    border-bottom: 1px solid #e9ecee;
+    padding-bottom: 10px;
+
+    :deep(.el-input__wrapper) {
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .histories-content {
+    width: 100%;
+    flex-grow: 1;
+    overflow-y: auto;
+
+    .history-body {
+      width: 100%;
+      margin-top: 12px;
+      display: flex;
+      align-items: center;
+      padding: 12px 15px;
+      background: #f4f6f9;
+      border-radius: 8px 8px 8px 8px;
+      font-size: 16px;
+      color: #2d333c;
+
+      .icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 20px 0;
+    display: flex;
+    justify-content: space-between;
+
+    .delete-btn {
+      margin-left: 20px;
+      font-size: 16px;
+      color: #6e7c92;
+    }
+  }
+}
+</style>

+ 32 - 0
client/src/views/OaSystem/aiQA/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import HistoryChat from '@/views/OaSystem/aiQA/components/historyChat.vue'
+
+defineOptions({ name: 'AIQA' })
+/** 初始化 **/
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="ai-q-a-page">
+    <HistoryChat />
+    <div class="right-part"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ai-q-a-page {
+  display: flex;
+  width: 100%;
+  height: calc(100% - 15px);
+  margin-top: 15px;
+  align-items: center;
+  justify-content: space-between;
+
+  .right-part {
+    flex-grow: 1;
+    height: 100%;
+    background: #ffffff;
+    border-radius: 20px 20px 20px 20px;
+  }
+}
+</style>

+ 5 - 1
client/src/views/OaSystem/oaLayout/menus.vue

@@ -30,7 +30,7 @@
           class="menuDiv"
           @mouseenter="handleMouseEnter(item, index)"
           @mouseleave="handleMouseLeave(item, index)"
-          v-show="item.name != '个人档案'"
+          v-show="item.visible && item.name != '个人档案'"
         >
           <el-menu-item @click="menuClick(item, index)" :index="String(index)">
             <Icon :icon="item.icon" />
@@ -287,12 +287,14 @@ onMounted(() => {
     font-size: 14px !important;
     text-align: center;
   }
+
   .menus-btns {
     width: 100%;
     height: 40px;
     padding: 0 20px;
     margin-bottom: 10px;
     position: relative;
+
     .tip {
       background-color: #f00;
       position: absolute;
@@ -306,6 +308,7 @@ onMounted(() => {
       border-radius: 50%;
       text-align: center;
     }
+
     .btn {
       display: flex;
       width: 100%;
@@ -328,6 +331,7 @@ onMounted(() => {
   .menus-tabs {
     width: 100%;
     height: calc(100% - 250px);
+
     .menuDiv {
       position: relative;