refactor: eslint

frontend/src/stores/dashboard/dashboard.ts

@@ -56,7 +56,8 @@ export const dashboardStore = defineStore('dashboard', {
     },
     updateDashboardInfo(params: any) {
       Object.keys(params).forEach((key: string) => {
-        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
         this.dashboardInfo[key] = params[key]
       })
     },

frontend/src/stores/dashboard/snapshot.ts

@@ -53,13 +53,13 @@ export const snapshotStore = defineStore('snapshot', {
         this.snapshotIndex--
         const componentSnapshot =
           _.cloneDeep(this.snapshotData[this.snapshotIndex]) || getDefaultCanvasInfo()
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         componentSnapshot.dashboardInfo.id = dashboardInfo.value.id
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         componentSnapshot.dashboardInfo.pid = dashboardInfo.value.pid
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         componentSnapshot.dashboardInfo.dataState = dashboardInfo.value.dataState
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         componentSnapshot.dashboardInfo.contentId = dashboardInfo.value.contentId
         this.snapshotPublish(componentSnapshot)
         this.styleChangeTimes++
@@ -72,13 +72,13 @@ export const snapshotStore = defineStore('snapshot', {
       if (this.snapshotIndex < this.snapshotData.length - 1) {
         this.snapshotIndex++
         const snapshotInfo = _.cloneDeep(this.snapshotData[this.snapshotIndex])
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         snapshotInfo.dashboardInfo.id = dashboardInfo.value.id
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         snapshotInfo.dashboardInfo.pid = dashboardInfo.value.pid
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         snapshotInfo.dashboardInfo.dataState = dashboardInfo.value.dataState
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         snapshotInfo.dashboardInfo.contentId = dashboardInfo.value.contentId
         this.snapshotPublish(snapshotInfo)
         this.styleChangeTimes++
@@ -110,7 +110,7 @@ export const snapshotStore = defineStore('snapshot', {
       if (dataPrepareState.value) {
         this.styleChangeTimes = ++this.styleChangeTimes
         // Add a new snapshot
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         this.snapshotData[++this.snapshotIndex] = {
           componentData: _.cloneDeep(componentData.value),
           canvasStyleData: _.cloneDeep(canvasStyleData.value),

frontend/src/utils/canvas.ts

@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 import SnowflakeID from 'snowflake-id'
 
 const snowflake = new SnowflakeID({

frontend/src/views/dashboard/canvas/CanvasCore.vue

@@ -11,7 +11,7 @@ const dashboardStore = dashboardStoreWithOut()
 const canvasLocked = ref(false) // Is the canvas movement locked， Default false
 const emits = defineEmits(['parentAddItemBox'])
 const { curComponentId, curComponent } = storeToRefs(dashboardStore)
-// @ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 let currentInstance
 // Props
 const props = defineProps({
@@ -19,14 +19,17 @@ const props = defineProps({
     type: String,
     default: 'canvas-main',
   },
+  // eslint-disable-next-line vue/require-default-prop
   parentConfigItem: {
     type: Object as PropType<CanvasItem>,
     required: false,
   },
+  // eslint-disable-next-line vue/require-default-prop
   dashboardInfo: {
     type: Object,
     required: false,
   },
+  // eslint-disable-next-line vue/require-default-prop
   canvasStyleData: {
     type: Object,
     required: false,
@@ -191,7 +194,7 @@ function addItemToPositionBox(item: CanvasItem) {
     for (let j = item.y - 1; j < item.y - 1 + item.sizeY; j++) {
       if (pb[j] && pb[j][i]) {
         // Ensure the target location is valid
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         pb[j][i].el = item // Place the item in the corresponding position
       }
     }
@@ -406,7 +409,6 @@ function removeItem(index: number) {
       moveItemUp(upItem, canGoUpRows)
     }
   })
-  // @ts-ignore
   canvasComponentData.value.splice(index, 1)
 }
 
@@ -414,7 +416,6 @@ function getNextDragId() {
   if (!canvasComponentData.value || canvasComponentData.value.length === 0) {
     return 0
   }
-  //@ts-ignore
   const validIds = canvasComponentData.value
     .map((item) => item._dragId)
     .filter((id) => id != null && id !== '') // 过滤 null、undefined 和空字符串
@@ -422,7 +423,7 @@ function getNextDragId() {
   if (validIds.length === 0) {
     return 0
   }
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   const maxDragId = Math.max(...validIds)
   return maxDragId + 1
 }
@@ -457,7 +458,7 @@ function changeToCoord(left: number, top: number, width: number, height: number)
  * Detect for collisions and take appropriate measures
  *
  * @param {CanvasItem} item comparison object
- * @param {CanvasCoord} tCord compares the coordinates of the object
+ * @param {CanvasCoord} tCoord compares the coordinates of the object
  */
 function findClosetCoords(item: CanvasItem, tCoord: CanvasCoord) {
   if (isOverlay) return
@@ -501,7 +502,7 @@ function findClosetCoords(item: CanvasItem, tCoord: CanvasCoord) {
 
 /**
  * Generate coordinates
- * @param {CanvasItem} item: The item object to generate coordinates for
+ * @param item
  */
 function makeCoordinate(item: CanvasItem) {
   let width = cellWidth.value * item.sizeX - baseMarginLeft.value
@@ -524,7 +525,7 @@ function makeCoordinate(item: CanvasItem) {
 
 /**
  * Change the coordinates of the item
- * @param {CanvasItem} item: The item object whose coordinates need to be changed
+ * @param item
  */
 function changeItemCoord(item: CanvasItem) {
   let width = cellWidth.value * item.sizeX - baseMarginLeft.value
@@ -686,7 +687,7 @@ function findBelowItems(item: CanvasItem) {
     for (let row = item.y - 1; row < positionBox.value.length; row++) {
       const target = positionBox.value[row][cell]
       if (target && target.el) {
-        // @ts-ignore
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
         belowItems[target.el._dragId] = target.el
         break
       }
@@ -696,7 +697,6 @@ function findBelowItems(item: CanvasItem) {
   return _.sortBy(Object.values(belowItems), 'y')
 }
 
-// @ts-ignore
 function startResize(e: MouseEvent, point: string, item: CanvasItem, index: number) {
   if (!resizable.value) return
   dashboardStore.setCurComponent(item)
@@ -706,7 +706,6 @@ function startResize(e: MouseEvent, point: string, item: CanvasItem, index: numb
   if (!infoBox.value) {
     infoBox.value = {} // Reinitialize
   }
-  // Get the parent element of. tem
   infoBox.value.resizeItem = item
   infoBox.value.resizeItemIndex = index
   // Drag and drop coordinate points
@@ -724,7 +723,7 @@ function containerMouseDown(e: MouseEvent) {
   }
   infoBox.value.startX = e.pageX
   infoBox.value.startY = e.pageY
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   if (curComponent.value?.component !== 'SQText') {
     e.preventDefault()
     e.stopPropagation()
@@ -792,7 +791,7 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
   }
 
   const target = e.target
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   let className = target.className || ''
 
   if (
@@ -813,13 +812,13 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
 
   infoBox.value.cloneItem = null
   infoBox.value.nowItemNode = null
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   if (target.className.includes('item')) {
     infoBox.value.nowItemNode = target
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     infoBox.value.cloneItem = target.cloneNode(true)
   } else {
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     infoBox.value.nowItemNode = target.closest('.item')
     infoBox.value.cloneItem = infoBox.value.nowItemNode.cloneNode(true)
   }
@@ -936,7 +935,7 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
       if (curActiveMoveInSQTab) {
         if (curActiveMoveInSQTab.moveInActive) {
           const refTabInstance =
-            // @ts-ignore
+            // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
             currentInstance.refs['shape_component_' + curActiveMoveInSQTab.id][0]
           refTabInstance.addTabItem(moveItem)
           removeItemById(moveItem.id)
@@ -949,6 +948,7 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
       if (props.parentConfigItem && props.parentConfigItem.moveOutActive) {
         emits('parentAddItemBox', _.cloneDeep(moveItem))
         removeItemById(moveItem.id)
+        // eslint-disable-next-line vue/no-mutating-props
         props.parentConfigItem.moveOutActive = false
       }
     }
@@ -991,18 +991,16 @@ function nowItemStyle(item: CanvasItem) {
 
 function getList() {
   let returnList = _.sortBy(_.cloneDeep(canvasComponentData.value), 'y')
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   let finalList = []
-  // @ts-ignore
-  _.forEach(returnList, function (item, index) {
+  _.forEach(returnList, function (item) {
     if (_.isEmpty(item)) return
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     delete item['_dragId']
-    // @ts-ignore
     delete item['show']
     finalList.push(item)
   })
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   return finalList
 }
 
@@ -1014,7 +1012,7 @@ function getRenderState() {
   return moveAnimate.value
 }
 
-// @ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 function afterInitOk(func) {
   let timeId = setInterval(() => {
     if (moveAnimate.value) {
@@ -1064,23 +1062,6 @@ function getItemStylePosition(item: CanvasItem) {
   }
 }
 
-// @ts-ignore
-function tabMoveInCheck(cloneRefItem) {
-  //1. If the current cloneItem type is not a tab,
-  // check if there are any tab components with overlapping boundaries (about to overlap) in the top left and right directions of the current Item
-  //2.If there is, the original item of the current cloneItem is not moving (the entire dashboard will not be rearranged)
-  //3. Activate this tab item. At this time, the tab item displays the activation status
-  //4. Release this cloneItem from the main canvas and remove the canvas with the added item
-  const moveItem = infoBox.value.moveItem
-  if (moveItem && moveItem !== 'SQTab') {
-    canvasComponentData.value.forEach((item) => {
-      // Determine the position of SQTab components around moveItem
-      if (item.id !== moveItem.id && item.component === 'SQTab') {
-      }
-    })
-  }
-}
-
 function tabMoveOutCheckSQ() {
   const { cloneItem, moveItem } = infoBox.value
   if (cloneItem && moveItem && props.canvasId.includes('tab') && props.parentConfigItem) {
@@ -1088,6 +1069,7 @@ function tabMoveOutCheckSQ() {
     const width = cloneItem.offsetWidth
     const top = cloneItem.offsetTop
     const { tw } = getItemStylePosition(props.parentConfigItem)
+    // eslint-disable-next-line vue/no-mutating-props
     props.parentConfigItem.moveOutActive =
       left < -tabMoveOutXOffset || top < -tabMoveOutYOffset || left + width - tw > tabMoveOutXOffset
     canvasLocked.value = props.parentConfigItem.moveOutActive

frontend/src/views/dashboard/canvas/DragHandle.vue

@@ -5,6 +5,7 @@ defineProps({
   sizeList: {
     type: Array as PropType<number[]>,
     required: false,
+    // eslint-disable-next-line vue/require-valid-default-prop
     default: [12, 12, 12, 12],
   },
 })
@@ -45,6 +46,7 @@ const shadowStyle = (size: number, index: number) => {
 <template>
   <div
     v-for="(size, index) in sizeList"
+    :key="index"
     class="dragHandle dragArea"
     :style="shadowStyle(size, index)"
   ></div>

frontend/src/views/dashboard/common/HandleMore.vue

@@ -15,6 +15,7 @@ withDefaults(
   defineProps<{
     menuList: Menu[]
     placement?: Placement
+    // eslint-disable-next-line vue/require-default-prop
     iconName?: any
     iconSize?: string
     inTable?: boolean
@@ -48,7 +49,7 @@ const emit = defineEmits(['handleCommand'])
     </el-icon>
     <template #dropdown>
       <el-dropdown-menu :persistent="false">
-        <template v-for="ele in menuList">
+        <template v-for="ele in menuList" :key="ele">
           <el-dropdown-item :divided="ele.divided" :command="ele.command" :disabled="ele.disabled">
             <el-icon v-if="ele.svgName" class="handle-icon" :style="{ fontSize: iconSize }">
               <Icon>

frontend/src/views/dashboard/common/ResourceGroupOpt.vue

@@ -54,7 +54,7 @@ const getTree = async () => {
 }
 
 const optInit = (params: any) => {
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   state.dialogTitle = getTitle(params.opt)
   state.opt = params.opt
   state.id = params.id
@@ -62,7 +62,7 @@ const optInit = (params: any) => {
   state.targetInfo = params.data
   state.nodeType = params.nodeType || 'folder'
   resourceDialogShow.value = true
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   resourceForm.name = params.name || getResourceNewName(params.opt)
   resourceForm.pid = params.pid || 'root'
   if (params.parentSelect) {
@@ -119,7 +119,7 @@ const propsTree = {
   value: 'id',
   label: 'name',
   children: 'children',
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   isLeaf: (node) => !node.children?.length,
 }
 
@@ -154,7 +154,7 @@ const nodeClick = (data: SQTreeNode) => {
 }
 
 const filterMethod = (value: any) => {
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   state.tData = state.tDataSource.filter((item) => item.name.includes(value))
 }
 

frontend/src/views/dashboard/common/ResourceTree.vue

@@ -73,12 +73,7 @@ const state = reactive({
   ],
 })
 
-// @ts-ignore
-const { handleDrop, allowDrop, handleDragStart } = treeDraggableChart(
-  state,
-  'resourceTree',
-  'dashboard'
-)
+const { handleDrop, handleDragStart } = treeDraggableChart(state, 'resourceTree', 'dashboard')
 
 const routerDashboardId = router.currentRoute.value.query.dashboardId
 if (routerDashboardId) {
@@ -87,14 +82,14 @@ if (routerDashboardId) {
 }
 const nodeExpand = (data: any) => {
   if (data.id) {
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     expandedArray.value.push(data.id)
   }
 }
 
 const nodeCollapse = (data: any) => {
   if (data.id) {
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     expandedArray.value.splice(expandedArray.value.indexOf(data.id), 1)
   }
 }
@@ -133,7 +128,7 @@ const getTree = async () => {
     afterTreeInit()
   })
 }
-// @ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 const flattedTree = computed<SQTreeNode[]>(() => {
   return _.filter(flatTree(state.resourceTree), (node) => node.leaf)
 })
@@ -153,7 +148,7 @@ function flatTree(tree: SQTreeNode[]) {
 const afterTreeInit = () => {
   mounted.value = true
   if (selectedNodeKey.value && returnMounted.value) {
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     expandedArray.value = getDefaultExpandedKeys()
     returnMounted.value = false
   }
@@ -161,7 +156,7 @@ const afterTreeInit = () => {
     resourceListTree.value.setCurrentKey(selectedNodeKey.value)
     resourceListTree.value.filter(filterText.value)
     nextTick(() => {
-      // @ts-ignore
+      // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
       document.querySelector('.is-current')?.firstChild?.click()
     })
   })
@@ -172,12 +167,12 @@ const emit = defineEmits(['nodeClick'])
 
 function createNewObject() {}
 
-// @ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 const resourceEdit = (resourceId) => {
   window.open(`#/canvas?resourceId=${resourceId}`, '_blank')
 }
 
-// @ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 const getParentKeys = (tree: any, targetKey: any, parentKeys = []) => {
   for (const node of tree) {
     if (node.id === targetKey) {
@@ -185,7 +180,7 @@ const getParentKeys = (tree: any, targetKey: any, parentKeys = []) => {
     }
     if (node.children) {
       const newParentKeys = [...parentKeys, node.id]
-      // @ts-ignore
+      // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
       const result = getParentKeys(node.children, targetKey, newParentKeys)
       if (result) {
         return result
@@ -214,13 +209,13 @@ onMounted(() => {
   getTree()
 })
 
-// @ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 const addOperation = (params: any) => {
   if (params.opt === 'newLeaf') {
     const newCanvasUrl = '#/canvas?opt=create' + (params?.id ? `&pid=${params?.id}` : '')
     window.open(newCanvasUrl, '_self')
   } else {
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     resourceGroupOptRef.value?.optInit(params)
   }
 }
@@ -243,7 +238,7 @@ const operation = (opt: string, data: SQTreeNode) => {
       })
     })
   } else if (opt === 'rename') {
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     resourceGroupOptRef.value?.optInit({ opt: 'rename', id: data.id, name: data.name })
   }
 }

frontend/src/views/dashboard/components/button-label/ComponentButtonLabel.vue

@@ -2,9 +2,9 @@
 import { toRefs } from 'vue'
 
 const props = defineProps({
-  title: { type: String, required: false },
-  tips: { type: String, required: false },
-  iconName: { type: String, required: false },
+  title: { type: String, required: false, default: '' },
+  tips: { type: String, required: false, default: '' },
+  iconName: { type: String, required: false, default: '' },
   showSplitLine: { type: Boolean, required: false, default: false },
   active: { type: Boolean, required: false, default: false },
 })

frontend/src/views/dashboard/components/component-list.ts

@@ -70,7 +70,7 @@ export const componentsMap = {
 }
 
 export function findComponent(key = 'SQEmpty') {
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   return componentsMap[key] ? componentsMap[key] : SQEmpty
 }
 

frontend/src/views/dashboard/components/sq-tab/CustomTab.vue

@@ -11,14 +11,14 @@ const props = defineProps({
   hideTitle: Boolean,
   /*Color can be a word, such as red; It can also be a color value*/
   //Font color
-  fontColor: String,
+  fontColor: { type: String, default: '' },
   // Activate font color
-  activeColor: String,
+  activeColor: { type: String, default: '' },
   //If the border color is none, there will be no border.
   // If it is none, the activated slide line of the Card type will also disappear
-  borderColor: String,
+  borderColor: { type: String, default: '' },
   //Activate border color currently only for card types
-  borderActiveColor: String,
+  borderActiveColor: { type: String, default: '' },
   //The style type radioGroup is only valid for Card type,
   // and it must be given as borderColor borderActiveColor
   styleType: {

frontend/src/views/dashboard/components/sq-tab/index.vue

@@ -17,7 +17,7 @@ import DashboardEditor from '@/views/dashboard/editor/DashboardEditor.vue'
 
 const editableTabsValue = ref(null)
 const showTabTitleFlag = ref(true)
-// @ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 let currentInstance
 import _ from 'lodash'
 
@@ -72,7 +72,7 @@ function addTab() {
   }
   configItem.value.propValue.push(newTab)
   configItem.value.activeSubTabIndex = configItem.value.propValue.length - 1
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   editableTabsValue.value = newTab.name
 }
 
@@ -132,10 +132,10 @@ const isEditMode = computed(() => true)
 const addTabItem = (item: CanvasItem) => {
   // do addTabItem
   const index = configItem.value.propValue.findIndex(
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     (tabItem) => configItem.value.activeTabName === tabItem.name
   )
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   const refInstance = currentInstance.refs['tabEditorRef_' + index][0]
   const newTabItem = _.cloneDeep(item)
   newTabItem.sizeX = 10

frontend/src/views/dashboard/components/sq-text/index.vue

@@ -86,7 +86,7 @@ const isDisabled = computed(() => props.disabled || !configItem.value.editing)
 
 const setEdit = () => {
   configItem.value.editing = true
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   const ed = tinymce.editors[tinymceId]
   ed.setContent(configItem.value.propValue)
   nextTick(() => {

frontend/src/views/dashboard/components/sq-view/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts"></script>
 
-<template></template>
+<template>
+  <div></div>
+</template>
 
 <style scoped lang="less"></style>

frontend/src/views/dashboard/editor/DashboardEditor.vue

@@ -19,14 +19,17 @@ const props = defineProps({
   parentConfigItem: {
     type: Object as PropType<CanvasItem>,
     required: false,
+    default: null,
   },
   dashboardInfo: {
     type: Object,
     required: false,
+    default: null,
   },
   canvasStyleData: {
     type: Object,
     required: false,
+    default: null,
   },
   canvasComponentData: {
     type: Array as PropType<CanvasItem[]>,
@@ -50,16 +53,16 @@ const props = defineProps({
 const canvasSizeInit = () => {
   sizeInit()
   if (canvasCoreRef.value) {
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     canvasCoreRef.value.sizeInit()
   }
 }
 
 const sizeInit = () => {
   if (dashboardEditorRef.value) {
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     const screenWidth = dashboardEditorRef.value.offsetWidth
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     const screenHeight = dashboardEditorRef.value.offsetHeight
     baseMarginLeft.value = 10
     baseMarginTop.value = 10
@@ -71,7 +74,7 @@ const sizeInit = () => {
 }
 
 const addItemToBox = (item: CanvasItem) => {
-  // @ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   canvasCoreRef.value.addItemBox(item)
 }
 
@@ -85,10 +88,10 @@ onMounted(() => {
   nextTick(() => {
     if (dashboardEditorRef.value) {
       sizeInit()
-      // @ts-ignore
+      // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
       nextTick(() => {
         if (canvasCoreRef.value) {
-          // @ts-ignore
+          // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
           canvasCoreRef.value.init()
         }
       })

frontend/src/views/dashboard/editor/Toolbar.vue

@@ -41,7 +41,7 @@ const saveCanvasWithCheck = () => {
       nodeType: 'leaf',
       parentSelect: true,
     }
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     resourceGroupOptRef.value?.optInit(createParams)
   } else if (dashboardInfo.value.id) {
     const updateParams = {
@@ -63,6 +63,7 @@ const props = defineProps({
   baseParams: {
     type: Object,
     required: false,
+    default: null,
   },
 })
 
@@ -74,10 +75,10 @@ const groupOptFinish = (result: any) => {
 
 const editCanvasName = () => {
   nameEdit.value = true
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   inputName.value = dashboardInfo.value.name
   nextTick(() => {
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     nameInput.value?.focus()
   })
 }
@@ -94,7 +95,7 @@ const closeEditCanvasName = () => {
     editCanvasName()
     return
   }
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   dashboardInfo.value.name = inputName.value
   inputName.value = ''
 }

frontend/src/views/dashboard/editor/index.vue

@@ -24,25 +24,25 @@ const dashboardEditorRef = ref(null)
 const addComponent = (componentType: string) => {
   const component = cloneDeep(findNewComponentFromList(componentType))
   if (component && dashboardEditorRef.value) {
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     component.id = guid()
     if (component.component === 'SQTab') {
       const subTabName = guid('tab')
-      // @ts-ignore
+      // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
       component.propValue[0].name = subTabName
       component.activeTabName = subTabName
     }
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     dashboardEditorRef.value.addItemToBox(component)
   }
 }
 
 onMounted(() => {
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   state.opt = router.currentRoute.value.query.opt
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   state.resourceId = router.currentRoute.value.query.resourceId
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   state.routerPid = router.currentRoute.value.query.pid
   if (state.opt === 'create') {
     dashboardStore.updateDashboardInfo({

frontend/src/views/dashboard/preview/SQPreview.vue

@@ -80,9 +80,9 @@ function nowItemStyle(item: CanvasItem) {
 
 const sizeInit = () => {
   if (previewCanvas.value) {
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     const screenWidth = previewCanvas.value.offsetWidth
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     const screenHeight = previewCanvas.value.offsetHeight
     baseMarginLeft.value = 10
     baseMarginTop.value = 10
@@ -97,7 +97,7 @@ const sizeInit = () => {
 
 onMounted(() => {
   sizeInit()
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   elementResizeDetectorMaker().listenTo(document.getElementById(domId), sizeInit)
 })
 

frontend/src/views/dashboard/preview/SQPreviewHead.vue

@@ -4,7 +4,6 @@ import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import DashboardDetailInfo from '@/views/dashboard/common/DashboardDetailInfo.vue'
 
-const emit = defineEmits(['reload', 'download', 'downloadAsAppTemplate'])
 const preview = () => {
   window.open(`#/dashboard-preview?resourceId=${props.dashboardInfo.id}`, '_blank')
 }

frontend/src/views/dashboard/preview/SQPreviewShow.vue

@@ -55,7 +55,7 @@ const loadCanvasData = (params: any) => {
   dataInitState.value = false
   load_resource_prepare(
     { id: params.id },
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     function ({ dashboardInfo, canvasDataResult, canvasStyleResult, canvasViewInfoPreview }) {
       state.canvasDataPreview = canvasDataResult
       state.canvasStylePreview = canvasStyleResult
@@ -77,7 +77,7 @@ const resourceNodeClick = (prams: any) => {
   loadCanvasData(prams)
 }
 
-//@ts-ignore
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 const previewShowFlag = computed(() => !!state.dashboardInfo?.name)
 
 onBeforeMount(() => {

frontend/src/views/dashboard/preview/SQPreviewSingle.vue

@@ -17,7 +17,7 @@ const state = reactive({
 })
 
 onMounted(() => {
-  //@ts-ignore
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
   state.resourceId = router.currentRoute.value.query.resourceId
   if (state.resourceId) {
     loadCanvasData({ id: state.resourceId })
@@ -28,7 +28,7 @@ const loadCanvasData = (params: any) => {
   dataInitState.value = false
   load_resource_prepare(
     { id: params.id },
-    //@ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     function ({ dashboardInfo, canvasDataResult, canvasStyleResult, canvasViewInfoPreview }) {
       state.canvasDataPreview = canvasDataResult
       state.canvasStylePreview = canvasStyleResult

frontend/src/views/dashboard/preview/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts"></script>
 
-<template></template>
+<template>
+  <div></div>
+</template>
 
 <style scoped lang="less"></style>

frontend/src/views/dashboard/utils/canvasUtils.ts

@@ -38,6 +38,7 @@ export const initCanvasData = (params: any, callBack: () => void) => {
   })
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export const saveDashboardResource = (params: any, callBack: Function) => {
   params['workspace_id'] = workspace_id
   dashboardApi.check_name(params).then((resCheck: any) => {

frontend/src/views/dashboard/utils/treeDraggableChart.ts

@@ -106,7 +106,7 @@ const treeDraggableChart = (state: any, key: any, type: any) => {
     } catch (error) {
       console.error(error)
     }
-    // @ts-ignore
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     delete params.opt
 
     if (dropType === 'inner') {

frontend/src/views/ds/TableList.vue

@@ -83,7 +83,12 @@
             <el-tab-pane :label="t('ds.preview')" name="preview">
               <div style="margin: 16px 0">{{ t('ds.preview_tip') }}</div>
               <el-table :data="previewData.data" style="width: 100%; height: 600px">
-                <el-table-column v-for="c in previewData.fields" :prop="c" :label="c" />
+                <el-table-column
+                  v-for="(c, index) in previewData.fields"
+                  :key="index"
+                  :prop="c"
+                  :label="c"
+                />
               </el-table>
             </el-tab-pane>
           </el-tabs>
@@ -144,6 +149,7 @@ const props = defineProps({
 
 const { t } = useI18n()
 
+// eslint-disable-next-line vue/no-dupe-keys
 const dsId = ref<number>(0)
 const searchValue = ref('')
 const tableList = ref<any>([])

frontend/src/views/ds/index.vue

@@ -28,7 +28,7 @@
     </div>
 
     <div class="connections-container">
-      <template v-for="ds in dsList">
+      <template v-for="ds in dsList" :key="ds">
         <DatasourceItemCard :ds="ds">
           <div class="connection-actions">
             <el-button class="action-btn" circle :icon="List" @click="getTables(ds.id, ds.name)" />