perf: optimize the code

@@ -3,8 +3,11 @@
   import { DropMenu } from '/@/components/Dropdown';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { Tooltip } from 'ant-design-vue';
-  // import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  import { isBataBoardSharePage, MoreActionEvent } from '../../config/config';
+  import {
+    isBataBoardSharePage,
+    MoreActionEvent,
+    VisualComponentPermission,
+  } from '../../config/config';
   import { computed } from '@vue/reactivity';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { DataSource } from '/@/api/dataBoard/model';
@@ -19,9 +22,9 @@
   const { hasPermission } = usePermission();
   const dropMenuList = computed<DropMenu[]>(() => {
     const basicMenu: DropMenu[] = [];
-    const hasUpdatePermission = hasPermission('api:yt:data_component:update:update');
-    const hasDeletePermission = hasPermission('api:yt:data_component:delete');
-    const hasCopyPermission = hasPermission('api:yt:dataBoardDetail:copy');
+    const hasUpdatePermission = hasPermission(VisualComponentPermission.UPDATE);
+    const hasDeletePermission = hasPermission(VisualComponentPermission.DELETE);
+    const hasCopyPermission = hasPermission(VisualComponentPermission.COPY);
     if (hasUpdatePermission)
       basicMenu.push({
         text: '编辑组件',
@@ -69,7 +72,6 @@
         >
           <Tooltip :title="item.deviceName" placement="topLeft">
             <div class="flex p-1">
-              <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
               <div class="truncate font-bold">{{ item.deviceRename || item.deviceName }}</div>
             </div>
           </Tooltip>

@@ -2,8 +2,6 @@
   import { useSlots } from 'vue';
   import { useUpdateCenter } from '../../hook/useUpdateCenter';
   import { FrontDataSourceRecord } from '../../types/type';
-  // import type { WidgetWrapperRegister } from './type';
-  // import { DataSource } from '/@/api/dataBoard/model';
 
   const props = defineProps<{
     dataSource: FrontDataSourceRecord[];
@@ -61,14 +59,14 @@
     height: 100%;
     background-color: #fff;
     border-radius: 3px;
-    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
   }
+
   .widget-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-
     width: 100%;
     height: 100%;
   }

-// import { DataBoardLayoutInfo } from '../../types/type';
-
-// export type WidgetWrapperRegister = (dataSource: DataBoardLayoutInfo['record'][]) => any;

@@ -4,7 +4,19 @@ export enum MoreActionEvent {
   DELETE = 'delete',
 }
 
-// export enum
+export enum VisualBoardPermission {
+  UPDATE = 'api:yt:data_board:update:update',
+  DELETE = 'api:yt:data_board:delete',
+  CREATE = '',
+  DETAIL = 'api:yt:data_component:list',
+}
+
+export enum VisualComponentPermission {
+  UPDATE = 'api:yt:data_component:update:update',
+  DELETE = 'api:yt:data_component:delete',
+  COPY = 'api:yt:dataBoardDetail:copy',
+  CREATE = 'api:yt:data_component:add:post',
+}
 
 export const DEFAULT_MAX_COL = 24;
 export const DEFAULT_WIDGET_WIDTH = 6;

@@ -16,6 +16,7 @@
     DEFAULT_WIDGET_WIDTH,
     isBataBoardSharePage,
     MoreActionEvent,
+    VisualComponentPermission,
   } from '../config/config';
   import {
     addDataComponent,
@@ -391,7 +392,7 @@
         </div>
       </template>
       <template #extra>
-        <Authority value="api:yt:data_component:add:post">
+        <Authority :value="VisualComponentPermission.CREATE">
           <Button v-if="!getIsSharePage" type="primary" @click="handleOpenCreatePanel">
             创建组件
           </Button>
@@ -439,7 +440,6 @@
               :data-source="item.record.dataSource"
             >
               <template #header>
-                <!-- <div>header</div> -->
                 <BaseWidgetHeader
                   :record="item.record.dataSource"
                   :id="item.record.id"
@@ -448,11 +448,6 @@
                 >
                   <template #moreAction>
                     <Tooltip title="趋势">
-                      <!-- <LineChartOutlined
-                        v-if="!getIsSharePage"
-                        class="cursor-pointer mx-1"
-                        @click="handleOpenHistroyDataModal(item.record.dataSource)"
-                      /> -->
                       <img
                         :src="trendIcon"
                         v-if="!getIsSharePage"
@@ -494,14 +489,18 @@
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: #fff;
     border: none !important;
+
     /* border: 1px solid black; */
   }
+
   .vue-grid-item .resizing {
     opacity: 0.9;
   }
+
   .vue-grid-item .static {
     background: #cce;
   }
+
   .vue-grid-item .text {
     font-size: 24px;
     text-align: center;
@@ -514,16 +513,20 @@
     height: 100%;
     width: 100%;
   }
+
   .vue-grid-item .no-drag {
     height: 100%;
     width: 100%;
   }
+
   .vue-grid-item .minMax {
     font-size: 12px;
   }
+
   .vue-grid-item .add {
     cursor: pointer;
   }
+
   .vue-draggable-handle {
     position: absolute;
     width: 20px;

@@ -8,6 +8,10 @@ interface GapRecord {
   endIndex: Nullable<number>;
 }
 
+/**
+ * @description calculate where to place the component
+ * @returns
+ */
 export function useCalcGridLayout() {
   const calcLayoutInfo = (
     layoutInfo: Layout[],

@@ -7,7 +7,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { DropMenu } from '/@/components/Dropdown';
-  import { DATA_BOARD_SHARE_URL, MoreActionEvent } from './config/config';
+  import { DATA_BOARD_SHARE_URL, MoreActionEvent, VisualBoardPermission } from './config/config';
   import { useModal } from '/@/components/Modal';
   import PanelDetailModal from './components/PanelDetailModal.vue';
   import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
@@ -90,8 +90,8 @@
 
   const { hasPermission } = usePermission();
   const dropMenuList = computed<DropMenu[]>(() => {
-    const hasUpdatePermission = hasPermission('api:yt:data_board:update:update');
-    const hasDeletePermission = hasPermission('api:yt:data_board:delete');
+    const hasUpdatePermission = hasPermission(VisualBoardPermission.UPDATE);
+    const hasDeletePermission = hasPermission(VisualBoardPermission.DELETE);
     const basicMenu: DropMenu[] = [];
     if (hasUpdatePermission)
       basicMenu.push({
@@ -160,7 +160,7 @@
   const [registerModal, { openModal }] = useModal();
 
   const handleViewBoard = (record: DataBoardRecord) => {
-    const hasDetailPermission = hasPermission('api:yt:data_component:list');
+    const hasDetailPermission = hasPermission(VisualBoardPermission.DETAIL);
     if (hasDetailPermission) {
       const boardId = encode(record.id);
       const boardName = encode(record.name);
@@ -179,8 +179,6 @@
       '.ant-spin-container'
     ) as HTMLElement;
     listContainerEl &&
-      // (listContainerEl.style.minHeight = listContainerHeight + 'px') &&
-      // (listContainerEl.style.maxHeight = listContainerHeight + 'px') &&
       (listContainerEl.style.height = listContainerHeight + 'px') &&
       (listContainerEl.style.overflowY = 'auto') &&
       (listContainerEl.style.overflowX = 'hidden');