feat: 水质报警基本布局

src/App.vue

@@ -2,14 +2,13 @@
 import { RouterView } from 'vue-router';
 import { NConfigProvider } from 'naive-ui';
 import type { GlobalThemeOverrides } from 'naive-ui';
-import { SelectProps, InputProps } from 'naive-ui'
+// import { SelectProps, InputProps } from 'naive-ui'
 
 // type SelectThemeOverrides = NonNullable<SelectProps['themeOverrides']>
-type SelectThemeOverrides = NonNullable<InputProps['themeOverrides']>
+// type SelectThemeOverrides = NonNullable<InputProps['themeOverrides']>
 const primaryColor = '#1A2029';
 
 /**
- * js 文件下使用这个做类型提示
  * @type import('naive-ui').GlobalThemeOverrides
  */
 const themeOverrides: GlobalThemeOverrides = {
@@ -27,7 +26,7 @@ const themeOverrides: GlobalThemeOverrides = {
     arrowColorChildActive: primaryColor
   },
   Scrollbar: {
-    width: '1px',
+    width: '0px',
   },
   Select: {
     peers: {
@@ -49,6 +48,12 @@ const themeOverrides: GlobalThemeOverrides = {
     fontSizeMedium: '15px',
     textColor: '#1A2029',
     placeholderColor: 'rgba(158, 158, 158, 0.6)',
+  },
+  Tabs: {
+    tabBorderColor: '#DAE5ED',
+    tabFontSizeMedium: '12px',
+    tabTextColorLine: '#272D35',
+    tabFontWeightActive: 'bold'
   }
   // Menu: {
   //   itemTextColorHorizontal: '#161616',

src/assets/svgs/tool/up.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.644 6.34995C7.514 9.13345 5.2155 11.35 2.4 11.35L7.644 6.34995ZM7.644 6.34995H10.42L10.095 5.94395L6.095 0.943951L5.9 0.699951L5.705 0.943951L1.705 5.94395L1.38 6.34995H4.15V7.09995C4.15035 7.87465 3.93892 8.63471 3.53856 9.29795C3.13821 9.96118 2.56416 10.5024 1.8785 10.863L1.1145 11.2645L1.975 11.3335C2.1165 11.3445 2.258 11.35 2.4 11.35L7.644 6.34995Z" fill="#F44C49"/>
+</svg>

src/components/BaseButton/index.vue

@@ -3,9 +3,12 @@ import SvgIcon from '@/components/SvgIcon';
 
 defineProps({
   iconName: {
+    type: String
+  },
+  type:{
     type: String,
-    default: 'tool-add-circle'
-  }
+    default: 'primary'
+  } 
 })
 
 const emit = defineEmits(['click']);
@@ -15,16 +18,14 @@ const handleClick = () => emit('click');
 
 <template>
   <button class="
-    custom-btn
     flex items-center justify-center
-    w-full py-[10px] rounded-[6px]
-    bg-[#2454FF]
-    text-[#fff] text-[14px]
-    space-x-[6px] leading-[20px]
+    w-full rounded-[6px]
+    space-x-[6px]
   "
+  :class="['custom-btn_' + type]"
   @click="handleClick"
   >
-    <SvgIcon :name="iconName"></SvgIcon>
+    <SvgIcon :name="iconName" v-if="iconName"></SvgIcon>
     <span>
       <slot></slot>
     </span>
@@ -32,9 +33,24 @@ const handleClick = () => emit('click');
 </template>
 
 <style scoped lang="scss">
-.custom-btn {
+.custom-btn_primary {
+  height: 40px;
+  background: #2454FF;
+  font-size: 14px;
+  color: #fff;
+
   &:hover {
     background: #1D43CC;
   }
 }
+.custom-btn_gray {
+  height: 30px;
+  background: #EBEEFD;
+  font-size: 12px;
+  color: #1D43CC;
+
+  &:hover {
+    background: #ecf0f9;
+  }
+}
 </style>

src/components/BasePopover/index.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps } from 'vue';
 import { NPopover } from 'naive-ui';
 
 defineProps(['placement', 'content'])
@@ -9,8 +8,8 @@ defineProps(['placement', 'content'])
 <template>
   <NPopover
     raw
-    :placement="placement"
     trigger="hover"
+    :placement="placement"
     :arrow-style="{ background: 'rgba(0, 0, 0, 0.6)' }"
   >
     <template #trigger>

src/components/Layout/ThePublicLayout.vue

@@ -12,7 +12,7 @@ import TheMenu from "@/components/Layout/TheMenu.vue";
 
   <div class="viewport">
     <!-- 侧边栏 -->
-    <aside class="aside-container flex flex-col items-center justify-between w-[240px] h-full">
+    <aside class="aside-container flex flex-col flex-shrink-0 items-center justify-between w-[240px] h-full">
       <div class="aside-main_top flex-1 w-full overflow-hidden">
         <TheLogo />
         <div class="menu-cotainer">

src/components/Layout/TheSubMenuCard.vue → src/components/Layout/TheSubMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="jsx">
 import { storeToRefs } from 'pinia';
-import { NScrollbar } from 'naive-ui';
+import { NScrollbar, NInfiniteScroll } from 'naive-ui';
 import { useAppStore } from '@/stores/modules/app';
 import SvgIcon from '@/components/SvgIcon';
 
@@ -11,16 +11,19 @@ defineProps({
   }
 })
 
+const emits = defineEmits(['on-load']);
+
 const appStore = useAppStore();
 
 const { subMenuCollapse } = storeToRefs(appStore);
 
 const changeCollapse = () => appStore.toggleSubMenuCollapse();
 
+const handleLoad = () => emits('on-load');
 </script>
 
 <template>
-  <div class="sub-menu-container w-[190px] h-full py-[18px]" v-show="subMenuCollapse">
+  <div class="sub-menu-container w-[190px] h-full pt-[18px]" v-show="subMenuCollapse" @click="handleLoad">
 
     <div class="flex items-center justify-between w-full px-[11px] pb-[22px]">
       <p class="text-[#1A2029] text-[14px] font-bold">{{ title }}</p>
@@ -32,10 +35,15 @@ const changeCollapse = () => appStore.toggleSubMenuCollapse();
     </div>
 
     <div class="sub-menu-main w-full h-full">
-      <NScrollbar class="h-full">
+      <NInfiniteScroll class="h-full" :distance="10" @load="handleLoad">
         <slot></slot>
-      </NScrollbar>
+        
+        <div class="footer-loading w-full h-[50px]">
+          加载更多
+        </div>
+      </NInfiniteScroll>
     </div>
+
   </div>
 </template>
 
@@ -45,9 +53,20 @@ const changeCollapse = () => appStore.toggleSubMenuCollapse();
   border-left: 1px solid #DBE6EE;
 
   .sub-menu-main {
-    // height: calc(100% - 106px);
+    position: relative;
+    height: calc(100% - 100px);
     width: 100%;
-    flex: 1;
+    // flex: 1;
+  }
+
+  .footer-loading {
+    position: absolute;
+    bottom: 0px;
+    @include flex(x, center, center);
+    display: none;
+    background: linear-gradient(180deg, rgba(229, 235, 247, 0.2) 0%, #E5EBF7 15.45%, #E5EBF7 100%);
+    font-size: 12px;
+    color: #666;
   }
 }
 </style>

src/views/analyse/WaterView.vue

@@ -1,9 +1,10 @@
 <script setup>
+import { NTabs, NTab, NEllipsis } from 'naive-ui';
 import SvgIcon from '@/components/SvgIcon';
 import BaseButton from "@/components/BaseButton";
 import RecodeCardItem from '@/components/RecodeCardItem';
 
-import TheSubMenu from '@/components/Layout/TheSubMenuCard.vue';
+import TheSubMenu from '@/components/Layout/TheSubMenu.vue';
 import TheChatView from '@/components/Layout/TheChatView.vue';
 import BaseInput from '@/components/BaseInput';
 
@@ -11,19 +12,99 @@ import BaseInput from '@/components/BaseInput';
 const handleCreateDialog = () => {
   console.log("handleCreateDialog");
 }
+
+const handleLoad = () => {
+  console.log( "loading" )
+}
 </script>
 
 <template>
   <section class="flex items-start h-full">
-    <TheSubMenu title="历史记录">
+    <TheSubMenu title="水质报警" @onLoad="handleLoad">
       <template #top>
-        <div class="create-btn px-[11px] pb-[22px]">
-          <BaseButton @click="handleCreateDialog">新建对话</BaseButton>
+        <!-- border-b -->
+        <div class="border-[#DAE5ED]">
+          <n-tabs type="line" justify-content="space-evenly">
+            <n-tab name="oasis" tab="正在报警"></n-tab>
+            <n-tab name="thebeatles" tab="历史报警"></n-tab>
+          </n-tabs>
         </div>
       </template>
-      <div class="pr-[4px] text-[#5e5e5e]">
-        <RecodeCardItem v-for="item in 100" :key="item" />
+      <div class="px-[12px] py-[14px] text-[#5e5e5e]">
+        <div class="grid grid-cols-1 gap-[12px]">
+          <div class="card-item" v-for="item in 10">
+            <div class="status-tips status-tips_warning">
+              <span>报警中</span>
+            </div>
+            <dl class="info-list">
+              <dt>
+                <n-ellipsis class="font-bold text-[#1A2029] leading-[20px]">进水总磷超标报警</n-ellipsis>
+              </dt>
+              <dd>
+                <span>报警时间：2024-4-25 21:00</span>
+              </dd>
+              <dd class="flex items-center">
+                <span>报警值：7.87mg/L</span>
+                <SvgIcon name="tool-up" class="ml-[4px]"></SvgIcon>
+              </dd>
+              <dd>
+                <span>报警级别：一级</span>
+              </dd>
+              <dd>
+                <span>报警次数：3</span>
+              </dd>
+            </dl>
+            <BaseButton type="gray" class="mt-[8px]">操作</BaseButton>
+          </div>
+        </div>
       </div>
     </TheSubMenu>
+    <TheChatView></TheChatView>
   </section>
-</template>
+</template>
+
+<style scoped lang="scss">
+.card-item {
+  position: relative;
+  padding: 20px 8px 8px 8px;
+  border-radius: 4px;
+  background: #DDE5EF;
+
+  .status-tips {
+    position: absolute;
+    width: 36px;
+    height: 14px;
+    top: 0;
+    right: 0px;
+    border-radius: 0px 4px 0px 4px;
+    font-size: 8px;
+    text-align: center;
+    line-height: 14px;
+
+    &_warning, &_being {
+      color: #F44C49;
+      background: #FFF0ED;
+    }
+
+    &_success {
+      color: #51BF8E;
+      background: #E9FAF2;
+    }
+
+    &_close {
+      color: #999999;
+      background: #D5D5D5;
+    }
+  }
+
+  .info-list {
+    line-height: 16px;
+    font-size: 11px;
+    color: #5E5E5E;
+
+    dd {
+      margin-top: 4px;
+    }
+  }
+}
+</style>

src/views/answer/AnswerView.vue

@@ -3,7 +3,7 @@ import SvgIcon from '@/components/SvgIcon';
 import BaseButton from "@/components/BaseButton";
 import RecodeCardItem from '@/components/RecodeCardItem';
 
-import TheSubMenu from '@/components/Layout/TheSubMenuCard.vue';
+import TheSubMenu from '@/components/Layout/TheSubMenu.vue';
 import TheChatView from '@/components/Layout/TheChatView.vue';
 import BaseInput from '@/components/BaseInput';