perf: 优化告警列表组件,少于十条数据是不滚动

@@ -110,7 +110,7 @@
             fill: none;
             stroke: white;
             stroke-dasharray: 6% 29%;
-            stroke-width: 5px;
+            stroke-width: 3px;
             stroke-dashoffset: 0%;
             animation: stroke-offset 5.5s infinite linear;
         }

@@ -53,9 +53,9 @@ const getTitle = computed(() => {
         </p>
       </div>
     </template>
-    <span :class="prefixCls">
+    <span :class="prefixCls" class="flex items-center">
       <component :is="slot as RendererElement" v-if="slots?.default" />
-      <Icon v-if="!slots?.default" icon="ph:question" class="svg:text-base" />
+      <Icon v-if="!slots?.default" icon="ph:question" class="cursor-pointer text-base" />
     </span>
   </Tooltip>
 </template>

@@ -253,7 +253,7 @@ export default defineComponent({
         return renderLabel
 
       return (
-        <span>
+        <span class='flex items-center'>
           {renderLabel}
           <BasicHelp placement="top" class="mx-1" text={getHelpMessage} {...helpComponentProps} />
         </span>

@@ -28,7 +28,6 @@ const [registerForm, formActionType] = useForm({
   schemas: formSchemas,
   showActionButtonGroup: false,
   layout: FormLayoutEnum.VERTICAL,
-  labelWidth: 70,
   getPopupContainer: () => document.body,
   fieldMapToTime: [[AlarmListFieldsEnum.ALARM_LIST_QUERY_DATE, [AlarmListFieldsEnum.START_TIME, AlarmListFieldsEnum.END_TIME], DateFormatEnum.X]],
 })
@@ -82,7 +81,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="m-1 w-full">
+  <div class="m-1 w-full alarm-list-config-from">
     <Divider orientation="left" class="!text-sm">
       数据绑定
     </Divider>
@@ -95,6 +94,14 @@ onMounted(async () => {
   </div>
 </template>
 
-<style>
-
+<style lang="less" scoped>
+// .alarm-list-config-form {
+// :deep(.ant-picker-input.ant-picker-input-active) {
+//   >input {
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     white-space: nowrap;
+//   }
+// }
+// }
 </style>

@@ -133,6 +133,14 @@ export const formSchemas: FormSchema[] = [
     label: AlarmListFieldsNameEnum.ALARM_LIST_INTERVAL,
     component: ComponentEnum.INPUT_NUMBER,
     required: false,
+    componentProps: {
+      min: 0,
+    },
+    renderComponentContent: () => {
+      return {
+        addonAfter: () => '秒',
+      }
+    },
   },
   {
     field: AlarmListFieldsEnum.ALARM_LIST_POLLING,
@@ -140,5 +148,13 @@ export const formSchemas: FormSchema[] = [
     component: ComponentEnum.INPUT_NUMBER,
     defaultValue: 30,
     required: false,
+    componentProps: {
+      min: 1,
+    },
+    renderComponentContent: () => {
+      return {
+        addonAfter: () => '秒',
+      }
+    },
   },
 ]

 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, unref } from 'vue'
-import { Divider, Tag } from 'ant-design-vue'
+import { Tag } from 'ant-design-vue'
+import { useIntervalFn } from '@vueuse/core'
 import { ScrollList } from './ScrollList'
 import { fetchAlarmList } from '@/api/alarm'
 import type { AlarmListItemType } from '@/api/alarm/model'
@@ -14,10 +15,6 @@ const props = defineProps<{
   config: CreateComponentType
 }>()
 
-const getCellBounds = computed(
-  () => props.config.cellBounds || { width: 290, height: 230, x: 0, y: 0 },
-)
-
 const contentDataStore = useContentDataStore()
 
 const initOptions = reactive<{
@@ -67,7 +64,7 @@ onMounted(async () => {
     // 预览模式
     await initFetchAlarmList()
     if (initOptions.polling)
-      setInterval(initFetchAlarmList, initOptions.polling * 1000)
+      useIntervalFn(initFetchAlarmList, (initOptions.polling || 30) * 1000)
   }
   else {
     const statusList = Object.values(AlarmStatusEnum)
@@ -90,16 +87,13 @@ onMounted(async () => {
   <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
     <ScrollList
       v-model="initOptions.scroll" :single-wait-time="initOptions.interval" :list="initOptions.alarmList"
-      :limit-scroll-num="10" :is-rem-unit="true" :delay="10" :wheel="true" hover :style="{
-        width: `${getCellBounds.width}px`,
-        height: `${getCellBounds.height}px`,
-      }"
+      :is-rem-unit="true" :delay="10" :wheel="true" hover
     >
-      <div v-for="(item, index) in initOptions.alarmList" :key="index" class="flex flex-col items-start h-15 px-2">
-        <p class="text-xs">
+      <div v-for="(item, index) in initOptions.alarmList" :key="index" class="flex flex-col items-start p-2 border-gray-600 border-b border-solid border-t-transparent border-l-transparent border-r-transparent">
+        <div class="text-xs mb-2">
           <span>设备:</span>
           <span class="ml-1">{{ item.deviceAlias || item.deviceName }}</span>
-        </p>
+        </div>
         <div class="flex items-center justify-between -mt-2 text-xs">
           <span>时间:</span>
           <span class="ml-1">{{ item.startTs }}</span>
@@ -107,19 +101,17 @@ onMounted(async () => {
             {{ AlarmStatusNameEnum[item.status] }}
           </Tag>
         </div>
-        <Divider class="mt-2 divider" />
       </div>
     </ScrollList>
   </div>
 </template>
 
 <style scoped lang="less">
-.seamless-scroll::-webkit-scrollbar {
-  display: none;
+.seamless-scroll {
+
+  ::-webkit-scrollbar {
+    display: none;
 
-  .divider {
-    height: 0.3px;
-    background-color: black;
   }
 }
 </style>