feat: 样式布局, 组件抽离

src/App.vue

@@ -27,12 +27,12 @@ const themeOverrides: GlobalThemeOverrides = {
     arrowColorChildActive: primaryColor
   },
   Scrollbar: {
-    width: '2px',
+    width: '1px',
   },
   Select: {
     peers: {
       InternalSelection: {
-        textColor: '5E5E5E',
+        textColor: '#5E5E5E',
         borderHover: '1px solid #2454FF',
         borderFocus: '1px solid #2454FF',
         placeholderColor: '#ccc',

src/assets/styles/common.scss

@@ -1,10 +1,3 @@
-.carbon-desc-container {
-  font-size: 18px;
-  text-align: center;
-  line-height: 26px;
-  color: $t-color-sub;
-}
-
 @font-face {
   font-display: swap;
   font-family: 'AlimamaShuHeiTi';
@@ -13,4 +6,21 @@
   url('@/assets/font/AlimamaShuHeiTi-Bold.ttf') format('ttf');
   font-weight: normal;
   font-style: normal;
+}
+
+// chat 布局相关
+.chat-ask_icon, .chat-answer_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #A8D3F1;
+  border-radius: 50%;
+  background-color: #ECF2FF;
+}
+
+.chat-answer_icon {
+  border: 1px solid #E5ECF0;
+  background: #fff;
 }

src/assets/styles/mixins.scss

@@ -30,4 +30,11 @@ $flex-params: (
   display: -webkit-box;
   -webkit-line-clamp: $num;
   -webkit-box-orient: vertical;
+}
+
+
+@mixin layout($w, $h, $rounded){
+  width: $w;
+  height: $h;
+  border-radius: $rounded;
 }

src/assets/svgs/chat/avatar.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.55542 4.24146L5.29842 5.87121V15.5485L0.55542 17.9935V4.24146Z" fill="#739FFF"/>
+<path d="M5.29842 19.333C7.52592 19.249 8.99967 17.9935 9.48717 16.7155L5.29842 15.5485L0.55542 17.9935L5.29842 19.333Z" fill="#B3CBFF"/>
+<path d="M0.55542 2.97024L5.29842 0.666992C7.04367 1.25199 8.36967 1.73649 9.27792 2.11974C15.6702 4.81824 18.5179 15.2207 9.48792 18.8605C13.0549 14.1805 10.3879 6.41424 5.02167 4.67649C4.18167 4.40424 2.69292 3.83649 0.55542 2.97024Z" fill="#005AFF"/>
+</svg>

src/assets/svgs/chat/avatars.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.55542 2.97024L5.29842 0.666992C7.04367 1.25199 8.36967 1.73649 9.27792 2.11974C15.6702 4.81824 18.5179 15.2207 9.48792 18.8605C13.0549 14.1805 10.3879 6.41424 5.02167 4.67649C4.18167 4.40424 2.69292 3.83649 0.55542 2.97024Z" fill="#005AFF"/>
+</svg>

src/assets/svgs/chat/icon-copy.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33337 12.6666H13.6667V5.33325H10V1.33325H4.33337V12.6666Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 1.33325L13.6667 5.33325" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.33337 6.66675V14.6667H9.33337" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.33337 6.66675H7.66671" stroke="currentColor" stroke-linecap="round"/>
+<path d="M6.33337 9.33325H10.3334" stroke="currentColor" stroke-linecap="round"/>
+</svg>

src/assets/svgs/chat/icon-no.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.20012 9.79999V12.2C9.20012 13.1941 8.39426 14 7.40012 14L5.00012 8.59999V1.99999H11.9721C12.5705 1.99322 13.0824 2.42836 13.1721 3.01999L14.0001 8.41999C14.053 8.76809 13.9503 9.12182 13.7193 9.38749C13.4882 9.65316 13.1522 9.80399 12.8001 9.79999H9.20012Z" stroke="currentColor" stroke-linejoin="round"/>
+<path d="M5 8.66655H3.398C2.69511 8.67899 2.09423 8.09675 2 7.40012V3.20012C2.09423 2.50345 2.69511 1.98769 3.398 2.00012H5V8.66655Z" stroke="currentColor" stroke-linejoin="round"/>
+</svg>

src/assets/svgs/chat/icon-yes.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.20012 6.20001V3.80001C9.20012 2.80589 8.39426 2 7.40012 2L5.00012 7.40001V14H11.9721C12.5705 14.0068 13.0824 13.5716 13.1721 12.98L14.0001 7.58001C14.053 7.23191 13.9503 6.87818 13.7193 6.61251C13.4882 6.34684 13.1522 6.19601 12.8001 6.20001H9.20012Z" stroke="currentColor" stroke-linejoin="round"/>
+<path d="M5 7.33345H3.398C2.69511 7.32101 2.09423 7.90325 2 8.59988V12.7999C2.09423 13.4965 2.69511 14.0123 3.398 13.9999H5V7.33345Z" stroke="currentColor" stroke-linejoin="round"/>
+</svg>

src/components/BaseButton/index.vue

@@ -1,5 +1,16 @@
 <script setup>
+import SvgIcon from '@/components/SvgIcon';
 
+defineProps({
+  iconName: {
+    type: String,
+    default: 'tool-add-circle'
+  }
+})
+
+const emit = defineEmits(['click']);
+
+const handleClick = () => emit('click');
 </script>
 
 <template>
@@ -10,9 +21,13 @@
     bg-[#2454FF]
     text-[#fff] text-[14px]
     space-x-[6px] leading-[20px]
-  ">
-    <SvgIcon name="tool-add-circle"></SvgIcon>
-    <span>新建对话</span>
+  "
+  @click="handleClick"
+  >
+    <SvgIcon :name="iconName"></SvgIcon>
+    <span>
+      <slot></slot>
+    </span>
   </button>
 </template>
 

src/components/BaseInput/index.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { ref } from 'vue';
+import { NSelect, NInput, NSwitch } from 'naive-ui';
+import SvgIcon from '@/components/SvgIcon';
+
+const inputInstRef = ref(null);
+const inputValue = ref(null);
+const isFocusState = ref(false);
+const value = ref();
+
+const focusInput = _ => isFocusState.value = true;
+
+const blurInput = _ => isFocusState.value = false;
+
+const handleInpFocus = () => {
+  inputInstRef.value?.focus()
+}
+
+</script>
+<template>
+  <div class="chat-inp-inner border-[1px]" :class="[{ 'border-[#2454FF]': isFocusState }]">
+    <div class="inp-wrapper flex-1" @click="handleInpFocus">
+      <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>
+</template>
+
+<style scoped lang="scss">
+.chat-inp-inner {
+  position: relative;
+  @include flex(x, center, between);
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0px 3px 12px 0px #97D3FF40;
+
+  .inp-wrapper {
+    padding: 17px 0px 17px 34px;
+  }
+
+  .submit-btn {
+    @include flex(x, center, center);
+    width: 84px;
+
+    .btn {
+      @include flex(x, center, center);
+      width: 50px;
+      height: 32px;
+      border-radius: 32px;
+      transition: all .3s;
+    }
+  }
+}
+</style>

src/components/Layout/TheChatView.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { ref } from 'vue';
+import { NSelect } from 'naive-ui';
+import SvgIcon from '@/components/SvgIcon';
+import BasePopover from "@/components/BasePopover";
+
+const value = ref();
+
+const options = [
+  {
+    label: "水厂的名称不要太长",
+    value: 'song0',
+  },
+  {
+    label: '信义污水厂',
+    value: 'song1'
+  },
+]
+
+</script>
+
+<template>
+  <div class="chat-container h-full flex-1">
+    <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>
+      <main class="chat-main w-[800px] h-full m-auto flex flex-col justify-between">
+        <div class="chat-scroll">
+          <slot></slot>
+        </div>
+
+        <div class="chat-footer">
+          <slot name="footer"/>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chat-container {
+  padding: 20px 20px 20px 0;
+
+  .chat-wrapper {
+    border: 1px solid #fff;
+    background: linear-gradient(180deg, rgba(238, 253, 255, 0.5) 0%, rgba(231, 243, 252, 0.5) 100%);
+
+    .chat-main {
+      height: calc(100% - 82px);
+      color: #1A2029;
+
+      .chat-scroll {
+        flex: 1;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+
+        &::-webkit-scrollbar {
+          width: 0px;
+          overflow-y: scroll;
+        }
+      }
+
+      .chat-footer {
+        padding-bottom: 30px;
+      }
+    }
+  }
+}
+</style>

src/components/Layout/TheSubMenuCard.vue

@@ -0,0 +1,53 @@
+<script setup lang="jsx">
+import { storeToRefs } from 'pinia';
+import { NScrollbar } from 'naive-ui';
+import { useAppStore } from '@/stores/modules/app';
+import SvgIcon from '@/components/SvgIcon';
+
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const appStore = useAppStore();
+
+const { subMenuCollapse } = storeToRefs(appStore);
+
+const changeCollapse = () => appStore.toggleSubMenuCollapse();
+
+</script>
+
+<template>
+  <div class="sub-menu-container w-[190px] h-full py-[18px]" v-show="subMenuCollapse">
+
+    <div class="flex items-center justify-between w-full px-[11px] pb-[22px]">
+      <p class="text-[#1A2029] text-[14px] font-bold">{{ title }}</p>
+      <SvgIcon name="tool-arrow-right" :size="20" class="cursor-pointer" @click="changeCollapse"></SvgIcon>
+    </div>
+
+    <div class="w-full">
+      <slot name="top" />
+    </div>
+
+    <div class="sub-menu-main w-full h-full">
+      <NScrollbar class="h-full">
+        <slot></slot>
+      </NScrollbar>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sub-menu-container {
+  @include flex(y, start, start);
+  border-left: 1px solid #DBE6EE;
+
+  .sub-menu-main {
+    // height: calc(100% - 106px);
+    width: 100%;
+    flex: 1;
+  }
+}
+</style>

src/components/RecodeCardItem/index.vue

@@ -0,0 +1,54 @@
+<script setup>
+import SvgIcon from '@/components/SvgIcon';
+</script>
+
+<template>
+  <div class="recode-card-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>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.recode-card-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>

src/components/SvgIcon/index.vue

@@ -8,7 +8,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NIcon } from "naive-ui"
+import { NIcon } from 'naive-ui'
+
 const props = defineProps({
   prefix: {
     type: String,

src/router/index.js

@@ -12,13 +12,18 @@ const router = createRouter({
     {
       path: '/',
       name: 'theBaseLayout',
-      component: () => import('@/components/Layout/TheChatLayout.vue'),
+      component: () => import('@/components/Layout/ThePublicLayout.vue'),
       children: [
         {
-          path: 'analyse',
-          name: 'Analyse',
+          path: 'answer',
+          name: 'Answer',
           component: () => import('@/views/answer/AnswerView.vue')
-        }
+        },
+        {
+          path: 'water-warn',
+          name: 'WaterWarn',
+          component: () => import('@/views/analyse/WaterView.vue')
+        },
       ]
     },
   ]

src/views/analyse/WaterView.vue

@@ -0,0 +1,29 @@
+<script setup>
+import SvgIcon from '@/components/SvgIcon';
+import BaseButton from "@/components/BaseButton";
+import RecodeCardItem from '@/components/RecodeCardItem';
+
+import TheSubMenu from '@/components/Layout/TheSubMenuCard.vue';
+import TheChatView from '@/components/Layout/TheChatView.vue';
+import BaseInput from '@/components/BaseInput';
+
+// 新建对话
+const handleCreateDialog = () => {
+  console.log("handleCreateDialog");
+}
+</script>
+
+<template>
+  <section class="flex items-start h-full">
+    <TheSubMenu title="历史记录">
+      <template #top>
+        <div class="create-btn px-[11px] pb-[22px]">
+          <BaseButton @click="handleCreateDialog">新建对话</BaseButton>
+        </div>
+      </template>
+      <div class="pr-[4px] text-[#5e5e5e]">
+        <RecodeCardItem v-for="item in 100" :key="item" />
+      </div>
+    </TheSubMenu>
+  </section>
+</template>

src/views/answer/AnswerView.vue

@@ -1,248 +1,133 @@
-<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';
+<script setup>
 import SvgIcon from '@/components/SvgIcon';
 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;
+import RecodeCardItem from '@/components/RecodeCardItem';
 
-const blurInput = _ => isFocusState.value = false;
+import TheSubMenu from '@/components/Layout/TheSubMenuCard.vue';
+import TheChatView from '@/components/Layout/TheChatView.vue';
+import BaseInput from '@/components/BaseInput';
 
-const handleInpFocus = () => {
-  console.log(123);
-  inputInstRef.value?.focus()
+// 新建对话
+const handleCreateDialog = () => {
+  console.log("handleCreateDialog");
 }
 </script>
 
 <template>
   <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>
+    <TheSubMenu title="历史记录">
+
+      <template #top>
+        <div class="create-btn px-[11px] pb-[22px]">
+          <BaseButton @click="handleCreateDialog">新建对话</BaseButton>
         </div>
+      </template>
+
+      <div class="pr-[4px] text-[#5e5e5e]">
+        <RecodeCardItem v-for="item in 100" :key="item" />
       </div>
-      <!-- 历史列表 -->
-      <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>
+
+    </TheSubMenu>
+
+    <TheChatView>
+      <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 hover:text-[#2E5CFF]/90">
+            帮我做一份如何快速入手污水处理厂的相关工作的学习计划？
+          </dd>
+          <dd class="mb-[19px] text-[15px] text-[#2E5CFF] leading-[21px] cursor-pointer hover:text-[#2E5CFF]/90">
+            硝化作用的速度快慢与哪些因素有关？</dd>
+          <dd class="text-[15px] text-[#2E5CFF] leading-[21px] cursor-pointer hover:text-[#2E5CFF]/90">污泥回流比如何计算？</dd>
+        </dl>
+      </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="ask-inner">
+        <div class="chat-ask_icon">
+          <SvgIcon name="chat-avatar" size="20" />
+        </div>
+        <p class="flex-1 pt-[6px] ml-[16px] text-[15px] font-bold leading-[24px]">帮我看一下COD现在的指标是什么，COD是什么意思？</p>
+      </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 class="answer-inner">
+        <div class="answer-card">
+          <div class="chat-answer_icon">
+            <SvgIcon name="common-logo" size="30" />
           </div>
+          <p class="flex-1 pt-[6px] ml-[16px] text-[15px] leading-[24px]">
+            COD，即化学需氧量，是衡量水中有机物质含量的重要指标。它反映了水中可氧化有机物的量，通常用来评估水体的污染程度。水中的有机物主要来源于工业废水、生活污水、农药残留等，这些有机物不仅会导致水质变差，还会对生物和人类健康产生负面影响。因此，通过测定COD值，可以了解水中有机污染物的含量，进而评估水体的污染程度。这对于制定环境保护政策、控制污染源、保障水资源安全等方面都具有重要的指导意义
+          </p>
+        </div>
+        <ul class="answer-btn-group">
+          <li class="btn">
+            <SvgIcon name="chat-icon-copy" size="16" />
+          </li>
+          <li class="line"></li>
+          <li class="btn">
+            <SvgIcon name="chat-icon-yes" size="16" />
+          </li>
+          <li class="line"></li>
+          <li class="btn">
+            <SvgIcon name="chat-icon-no" size="16" />
+          </li>
+        </ul>
+      </div>
 
-        </main>
+      <template #footer>
+        <BaseInput></BaseInput>
+      </template>
+    </TheChatView>
 
-      </div>
-    </div>
   </section>
 </template>
 
 <style scoped lang="scss">
-.chat-main {
-  height: calc(100% - 82px);
-}
 
-.chat-footer {
-  padding-bottom: 30px;
+.ask-inner {
+  @include flex(x, start, start);
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
 
-  .chat-inp-inner {
-    position: relative;
-    @include flex(x, center, between);
+.answer-inner {
+  margin-bottom: 20px;
+  .answer-card {
+    @include flex(x, start, start);
+    padding: 20px;
     border-radius: 8px;
     background: #fff;
-    box-shadow: 0px 3px 12px 0px #97D3FF40;
-
-    .inp-wrapper {
-      padding: 17px 0px 17px 34px;
-    }
-
-    .submit-btn {
-      @include flex(x, center, center);
-      width: 84px;
-
-      .btn {
-        @include flex(x, center, center);
-        width: 50px;
-        height: 32px;
-        border-radius: 32px;
-        transition: all .3s;
-      }
-    }
   }
-}
 
-.chat-container {
-  padding: 20px 20px 20px 0;
+  .answer-btn-group {
+    @include flex(x, center, end);
+    padding-top: 6px;
 
-  .chat-wrapper {
-    border: 1px solid #fff;
-    background: linear-gradient(180deg, rgba(238, 253, 255, 0.5) 0%, rgba(231, 243, 252, 0.5) 100%);
-  }
-}
-
-.sub-menu-container {
-  border-left: 1px solid #DBE6EE;
-
-  .history-content {
-    height: calc(100% - 106px);
-
-    .history-item {
-      position: relative;
-      @include flex(y, start, center);
-      height: 60px;
-      padding: 0 10px 0 12px;
-      transition: bakground .3s;
+    .btn {
+      @include flex(x, center, center);
+      @include layout(28px, 28px, 4px);
+      color: #89909B;
       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;
-        }
+        background: #DBEFFF;
+        color: #2454FF;
       }
     }
+
+    .line {
+      @include layout(1px, 12px, 0);
+      margin: 0 5px;
+      background: #D3D0E1;
+    }
   }
 }
 </style>