fix: ::v-deep 警告和types报错

src/components/handsontable/Handsontable.vue

@@ -10,20 +10,32 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';
-import Handsontable from '@sc/handsontable';
-import { TreeNode } from '@sc/tree';
-import debounce from 'lodash/debounce';
-import { off } from '@/utils/frontend/dom';
-import useClickPosition from './composables/useClickPosition';
-import useInstance from './composables/useInstance';
-import useTableSettings, { getColumnsSettings, getTableData, overwriteReadOnly } from './composables/useTableSettings';
-import './renderer/registerRenderers';
-import { Hot } from '@/types/components';
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
+import Handsontable from "@sc/handsontable";
+import { TreeNode } from "@sc/tree";
+import debounce from "lodash/debounce";
+import { off } from "@/utils/frontend/dom";
+import useClickPosition from "./composables/useClickPosition";
+import useInstance from "./composables/useInstance";
+import useTableSettings, {
+  getColumnsSettings,
+  getTableData,
+  overwriteReadOnly,
+} from "./composables/useTableSettings";
+import "./renderer/registerRenderers";
+import { Hot } from "@/types/components/hot";
 // import './cell-types/registerCellTypes';
 
 export default defineComponent({
-  name: 'Handsontable',
+  name: "Handsontable",
   props: {
     // 表格的数据
     data: {
@@ -43,7 +55,7 @@ export default defineComponent({
     // 边框, none 表示没有边框
     border: {
       type: String,
-      default: 'top,right,bottom,left',
+      default: "top,right,bottom,left",
     },
     // 整个表格是否只读
     readOnly: {
@@ -70,15 +82,18 @@ export default defineComponent({
 
     type RowHeaders = boolean | ((visualRow: number) => number);
     const getRowHeader = (): RowHeaders => {
-      if (tableSettings.rowHeaders !== undefined) return tableSettings.rowHeaders as any;
+      if (tableSettings.rowHeaders !== undefined)
+        return tableSettings.rowHeaders as any;
       return props.tree
         ? (visualRow: number) => {
-          if (instance) {
-            const rowSourceData = instance.getSourceDataAtRow(instance.toPhysicalRow(visualRow)) as TreeNode;
-            return rowSourceData.getCtx().row() + 1;
+            if (instance) {
+              const rowSourceData = instance.getSourceDataAtRow(
+                instance.toPhysicalRow(visualRow)
+              ) as TreeNode;
+              return rowSourceData.getCtx().row() + 1;
+            }
+            return visualRow;
           }
-          return visualRow;
-        }
         : true;
     };
     // 重新渲染，供外界调用
@@ -104,7 +119,7 @@ export default defineComponent({
       })();
 
       // 改变窗口大小监听事件
-      window.addEventListener('resize', onResize);
+      window.addEventListener("resize", onResize);
     });
 
     const { readOnly, tree } = toRefs(props);
@@ -146,7 +161,7 @@ export default defineComponent({
       const { columnsMeta } = newSettings;
       columnsMeta &&
         columnsMeta.forEach((columnMeta: any) => {
-          if (columnMeta.renderer === 'wc.switcherRenderer') {
+          if (columnMeta.renderer === "wc.switcherRenderer") {
             delete columnMeta.renderer;
           }
         });
@@ -157,27 +172,28 @@ export default defineComponent({
     // 组件 unmount 之前销毁 handsontable 实例
     onBeforeUnmount(() => {
       if (instance) {
-        window.removeEventListener('resize', onResize);
+        window.removeEventListener("resize", onResize);
 
         // 移除所有的监听器
         // Handsontable.hooks.destroy && Handsontable.hooks.destroy(instance);
         instance.destroy();
         instance = null;
       }
-      if (clickPositionHandler) off(document.body, 'mouseup', clickPositionHandler);
+      if (clickPositionHandler)
+        off(document.body, "mouseup", clickPositionHandler);
     });
 
     // 边框样式
     const borderStyle = computed(() => {
-      if (props.border === 'none') {
+      if (props.border === "none") {
         return {
-          border: 'none',
+          border: "none",
         };
       }
-      const borders = props.border.split(',');
+      const borders = props.border.split(",");
       const style = {} as any;
-      borders.forEach(border => {
-        style[`border-${border}`] = '1px solid #d4d4d4';
+      borders.forEach((border) => {
+        style[`border-${border}`] = "1px solid #d4d4d4";
       });
       return style;
     });
@@ -207,11 +223,11 @@ export default defineComponent({
   height: 100%;
   overflow: hidden;
 
-  /* ::v-deep > .ht_master {
+  /* > :deep(.ht_master) {
   } */
 
-  ::v-deep > .ht_clone_top_left_corner,
-  ::v-deep > .ht_clone_top {
+  > :deep(.ht_clone_top_left_corner),
+  > :deep(.ht_clone_top) {
     .htCore {
       .real-th {
         position: relative;
@@ -239,10 +255,10 @@ export default defineComponent({
     }
   }
 
-  /* ::v-deep > .ht_clone_bottom {
+  /* > :deep(.ht_clone_bottom) {
   } */
 
-  ::v-deep > .ht_clone_left {
+  > :deep(.ht_clone_left) {
     // overflow: visible !important;
 
     .wtHolder {
@@ -267,7 +283,7 @@ export default defineComponent({
     }
   }
 
-  ::v-deep > .ht_clone_top_left_corner {
+  > :deep(.ht_clone_top_left_corner) {
     .htCore {
       thead {
         tr {
@@ -279,15 +295,15 @@ export default defineComponent({
     }
   }
 
-  /*  ::v-deep > .handsontableInputHolder {
+  /*  :deep( > .handsontableInputHolder){
   }
  */
-  ::v-deep > .ht_master,
-  ::v-deep > .ht_clone_top,
-  ::v-deep > .ht_clone_bottom,
-  ::v-deep > .ht_clone_left,
-  ::v-deep > .ht_clone_top_left_corner,
-  ::v-deep > .handsontableInputHolder {
+  > :deep(.ht_master),
+  > :deep(.ht_clone_top),
+  > :deep(.ht_clone_bottom),
+  > :deep(.ht_clone_left),
+  > :deep(.ht_clone_top_left_corner),
+  > :deep(.handsontableInputHolder) {
     .htCore {
       td,
       th {
@@ -295,9 +311,11 @@ export default defineComponent({
         &.current-row {
           background-color: $light-sky-blue !important;
         }
+
         &.show-highlight {
           background-color: #c1e1fc !important;
         }
+
         // 当前选中单元格的样式
         &.current {
           &.highlight {
@@ -374,7 +392,7 @@ export default defineComponent({
   }
 
   // 没有左边框
-  ::v-deep > .ht_clone_left {
+  > :deep(.ht_clone_left) {
     .htCore {
       th {
         border-left: none;
@@ -382,7 +400,7 @@ export default defineComponent({
     }
   }
 
-  ::v-deep > .ht_clone_top_left_corner {
+  > :deep(.ht_clone_top_left_corner) {
     .htCore {
       thead {
         th:first-child {
@@ -393,12 +411,12 @@ export default defineComponent({
   }
 
   // 没有上边框
-  ::v-deep > .ht_master,
-  ::v-deep > .ht_clone_top,
-  ::v-deep > .ht_clone_bottom,
-  ::v-deep > .ht_clone_left,
-  ::v-deep > .ht_clone_top_left_corner,
-  ::v-deep > .handsontableInputHolder {
+  > :deep(.ht_master),
+  > :deep(.ht_clone_top),
+  > :deep(.ht_clone_bottom),
+  > :deep(.ht_clone_left),
+  > :deep(.ht_clone_top_left_corner),
+  > :deep(.handsontableInputHolder) {
     .htCore {
       thead {
         tr {
@@ -407,6 +425,7 @@ export default defineComponent({
           }
         }
       }
+
       /*tbody {
         tr {
           td {
@@ -417,14 +436,15 @@ export default defineComponent({
     }
   }
 
-  ::v-deep .red {
+  :deep(.red) {
     color: red !important;
   }
 
-  ::v-deep .green {
+  :deep(.green) {
     color: green !important;
   }
-  ::v-deep .stateCheckBox::after {
+
+  :deep(.stateCheckBox::after) {
     content: "";
     display: block;
     width: 7px;
@@ -434,13 +454,13 @@ export default defineComponent({
   }
 
   // 调整列大小的手柄
-  ::v-deep .manualColumnResizer {
+  :deep(.manualColumnResizer) {
     cursor: ew-resize;
     transform: translateX(3px);
   }
 
   // 调整行大小的手柄
-  ::v-deep .manualRowResizer {
+  :deep(.manualRowResizer) {
     cursor: ns-resize;
     transform: translateY(3px);
   }

src/components/popover/Popover.vue

@@ -7,12 +7,12 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { hidePopover } from './composables/popoverHelp';
-import { Position } from './composables/types';
+import { defineComponent, ref } from "vue";
+import { hidePopover } from "./composables/popoverHelp";
+import { Position } from "./composables/types";
 
 export default defineComponent({
-  name: 'Popover',
+  name: "Popover",
   props: {
     top: { type: Number, default: 0 }, // 定位坐标top
     left: { type: Number, default: 0 }, // 定位坐标left
@@ -21,48 +21,52 @@ export default defineComponent({
     tranWidth: { type: Number, default: 0 }, // 向左偏移量，一般在handsontable中才需要,
     style: {},
     // popover方向 ，horizontal为水平方向（左右显示），vertical为垂直方向（上下显示）
-    direction: { type: String, default: 'horizontal' },
+    direction: { type: String, default: "horizontal" },
   },
-  emits: ['destroy'],
+  emits: ["destroy"],
   setup(props) {
     const { scrollWidth, scrollHeight } = document.body;
-    let tipClassName = 'tipPosition tip';
+    let tipClassName = "tipPosition tip";
     const tipPosition: Position = {};
     // 鼠标离开组件时，销毁组件
     const toclosePopover = () => {
       hidePopover();
     };
     // 水平显示（只在左或者右显示）
-    if (props.direction === 'horizontal') {
-      tipClassName += 'H';
+    if (props.direction === "horizontal") {
+      tipClassName += "H";
       if (props.top > scrollHeight / 2) {
-        tipClassName += 'Bottom';
-        tipPosition.bottom = `${scrollHeight - props.top - props.tranHeight - 8}px`;
+        tipClassName += "Bottom";
+        tipPosition.bottom = `${
+          scrollHeight - props.top - props.tranHeight - 8
+        }px`;
       } else {
-        tipClassName += 'Top';
+        tipClassName += "Top";
         tipPosition.top = `${props.top - 10}px`;
       }
       if (props.left > scrollWidth / 2) {
-        tipClassName += 'Right';
+        tipClassName += "Right";
         tipPosition.right = `${scrollWidth - props.left + 8}px`;
       } else {
-        tipClassName += 'Left';
+        tipClassName += "Left";
         tipPosition.left = `${props.left + props.tranWidth + 8}px`;
       }
     } else {
-      tipClassName += 'V';
+      tipClassName += "V";
       if (props.top > scrollHeight / 2) {
-        tipClassName += 'Top';
+        tipClassName += "Top";
         tipPosition.bottom = `${scrollHeight - props.top + 8}px`;
       } else {
-        tipClassName += 'Bottom';
+        tipClassName += "Bottom";
         tipPosition.top = `${props.top + props.tranHeight + 8}px`;
       }
       if (props.left > scrollWidth / 2) {
-        tipClassName += 'Right';
-        tipPosition.right = `${scrollWidth - props.left - props.tranWidth / 2}px`;
+        tipClassName += "Right";
+        tipPosition.right = `${
+          scrollWidth - props.left - props.tranWidth / 2
+        }px`;
       } else {
-        tipClassName += 'Left';
+        tipClassName += "Left";
         tipPosition.left = `${props.left + props.tranWidth / 2}px`;
       }
     }
@@ -72,7 +76,7 @@ export default defineComponent({
     const popoverStyle = ref({
       ...objStyle,
       ...tipPosition,
-      display: 'block',
+      display: "block",
     });
 
     return { popoverStyle, tipClassName, toclosePopover, tipPosition };
@@ -93,7 +97,7 @@ export default defineComponent({
 }
 
 .tipHBottomRight:after {
-  content: '';
+  content: "";
   width: 0;
   height: 0;
   border-style: solid;
@@ -105,7 +109,7 @@ export default defineComponent({
 }
 
 .tipHTopRight:after {
-  content: '';
+  content: "";
   width: 0;
   height: 0;
   border-style: solid;
@@ -117,7 +121,7 @@ export default defineComponent({
 }
 
 .tipHTopLeft:after {
-  content: '';
+  content: "";
   width: 0;
   height: 0;
   border-style: solid;
@@ -129,7 +133,7 @@ export default defineComponent({
 }
 
 .tipHBottomLeft:after {
-  content: '';
+  content: "";
   width: 0;
   height: 0;
   border-style: solid;
@@ -144,11 +148,11 @@ export default defineComponent({
   transform: translateX(50%);
 
   &:after {
-    content: '';
+    content: "";
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 0px 8px 8px 8px;
+    border-width: 0 8px 8px 8px;
     border-color: transparent transparent $light-black transparent;
     position: absolute;
     top: -6px;
@@ -161,7 +165,7 @@ export default defineComponent({
   transform: translateX(50%);
 
   &:after {
-    content: '';
+    content: "";
     width: 0;
     height: 0;
     border-style: solid;
@@ -178,11 +182,11 @@ export default defineComponent({
   transform: translateX(-50%);
 
   &:after {
-    content: '';
+    content: "";
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 8px 8px 0px 8px;
+    border-width: 8px 8px 0 8px;
     border-color: $light-black transparent transparent transparent;
     position: absolute;
     bottom: -6px;
@@ -195,11 +199,11 @@ export default defineComponent({
   transform: translateX(-50%);
 
   &:after {
-    content: '';
+    content: "";
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 0px 8px 8px 8px;
+    border-width: 0 8px 8px 8px;
     border-color: transparent transparent $light-black transparent;
     position: absolute;
     top: -6px;
@@ -207,15 +211,15 @@ export default defineComponent({
     transform: translateX(50%);
   }
 }
-::v-deep .jobContent {
+:deep(.jobContent) {
   margin-bottom: 20px;
   color: $blue;
   max-width: 320px;
 }
-::v-deep .characterText {
+:deep(.characterText) {
   color: #fff;
 }
-::v-deep .unNormal {
+:deep(.unNormal) {
   color: $blue;
 }
 </style>

src/components/resizable-layout/ResizableLayout.vue

@@ -5,17 +5,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, provide, PropType } from 'vue';
-import mitt, { Emitter } from 'mitt';
-import ResizableLayoutItem from './ResizableLayoutItem.vue';
-import { EmitterType } from '@/constants/emitter';
-import ProvideInject from '@/constants/provideInject';
+import { defineComponent, provide, PropType } from "vue";
+import mitt, { Emitter } from "mitt";
+import ResizableLayoutItem from "./ResizableLayoutItem.vue";
+import { EmitterType } from "@/constants/emitter";
+import ProvideInject from "@/constants/provideInject";
+import ResizableLayout from "@/types/components/resizable-layout";
 
 interface DOMElement extends HTMLElement {
   [key: string]: any;
 }
 
-type Direction = 'horizontal' | 'vertical';
+type Direction = "horizontal" | "vertical";
 
 /**
  * 由于 Composition Api 的限制，通过slot动态插入的子组件难以直接访问父组件定义在 setup 中的方法(父组件也难以直接访问子组件定义在 setup 中的方法)，
@@ -28,14 +29,14 @@ type Direction = 'horizontal' | 'vertical';
  */
 
 export default defineComponent({
-  name: 'resizable-layout',
+  name: "resizable-layout",
   props: {
     // 布局的方向：横向或纵向
     direction: {
       type: String as PropType<Direction>,
-      default: 'horizontal',
+      default: "horizontal",
       validator: (direction: Direction) => {
-        return ['horizontal', 'vertical'].includes(direction);
+        return ["horizontal", "vertical"].includes(direction);
       },
     },
     // 防抖函数中需要延迟的毫秒数
@@ -59,7 +60,7 @@ export default defineComponent({
   computed: {
     // 将 props 中的 direction 转为 css3 中 flex-direction 属性对应的值
     flexDirection(): string {
-      return this.direction === 'vertical' ? 'column' : 'row';
+      return this.direction === "vertical" ? "column" : "row";
     },
     styleObj(): { flexDirection: string } {
       return {
@@ -73,10 +74,16 @@ export default defineComponent({
       const children = slots.default();
       if (
         children.some(
-          child => child.type !== ResizableLayoutItem && !child.type.toString().startsWith('Symbol(') // Symbol(Comment) 代表注释
+          (child) =>
+            child.type !== ResizableLayoutItem &&
+            !child.type.toString().startsWith("Symbol(") // Symbol(Comment) 代表注释
         )
       ) {
-        console.error('<resizable-layout> 中只能直接包含 <resizable-layout-item> 子组件', children);
+        // eslint-disable-next-line no-console
+        console.error(
+          "<resizable-layout> 中只能直接包含 <resizable-layout-item> 子组件",
+          children
+        );
       }
     }
   },
@@ -102,7 +109,7 @@ export default defineComponent({
       self.currentMoveId = null; // symbol 类型，当前move事件的唯一标志
 
       // 拖拽条移动事件监听
-      if (self.flexDirection === 'column') {
+      if (self.flexDirection === "column") {
         self.emitter.on(EmitterType.DRAG_BAR_MOVE, self.verticalHandler);
       } else {
         self.emitter.on(EmitterType.DRAG_BAR_MOVE, self.horizontalHandler);
@@ -117,8 +124,8 @@ export default defineComponent({
       const childElements = parentElement.children;
       for (let i = 0; i < childElements.length; i += 1) {
         const element = childElements[i] as HTMLElement;
-        element.setAttribute('data-index', `${i}`);
-        element.setAttribute('data-size', `${element.offsetWidth}`);
+        element.setAttribute("data-index", `${i}`);
+        element.setAttribute("data-size", `${element.offsetWidth}`);
         this.layoutItemElements[i] = element;
       }
     },
@@ -131,7 +138,7 @@ export default defineComponent({
         // 重新设置 html 的 data- 属性
         this.setHtmlDataAttribute();
 
-        this.layoutItemInstances.map(instance => {
+        this.layoutItemInstances.map((instance) => {
           // 在 ResizableLayoutItem 中的 unmounted 函数中添加了 $unmounted 字段，
           // 标记该对象已经 unmounted
           if (!instance.$unmounted) {
@@ -156,7 +163,7 @@ export default defineComponent({
 
     // 返回 data-size
     getSize(element: HTMLElement) {
-      return parseInt(element.getAttribute('data-size') || '0', 10);
+      return parseInt(element.getAttribute("data-size") || "0", 10);
     },
 
     // 重新分配子组件的 flex-grow
@@ -167,7 +174,8 @@ export default defineComponent({
       let allFitMinWidth = true;
       // 需要调整大小的子组件
       for (let i = index, sign = 1; i <= index + 1; i += 1, sign = -sign) {
-        const flexGrow = this.getSize(this.layoutItemElements[i]) + sign * distance;
+        const flexGrow =
+          this.getSize(this.layoutItemElements[i]) + sign * distance;
         if (flexGrow < this.layoutItemsMinSize[i]) {
           allFitMinWidth = false;
           break;
@@ -181,12 +189,15 @@ export default defineComponent({
       // 需要调整大小的子组件的前面的子组件
       // 他们保持原来的尺寸就好
       for (let i = 0; i < index; i += 1) {
-        this.layoutItemInstances[i].AdjustFlexGrow(this.getSize(this.layoutItemElements[i]));
+        this.layoutItemInstances[i].AdjustFlexGrow(
+          this.getSize(this.layoutItemElements[i])
+        );
       }
 
       // 需要调整大小的子组件
       for (let i = index, sign = 1; i <= index + 1; i += 1, sign = -sign) {
-        const flexGrow = this.getSize(this.layoutItemElements[i]) + sign * distance;
+        const flexGrow =
+          this.getSize(this.layoutItemElements[i]) + sign * distance;
         // 通知子组件调整自身大小
         this.layoutItemInstances[i].AdjustFlexGrow(flexGrow);
         // 通知子组件触发 resize 事件
@@ -196,7 +207,9 @@ export default defineComponent({
       // 需要调整大小的子组件的后面的子组件
       // 他们保持原来的尺寸就好
       for (let i = index + 2; i < this.layoutItemInstances.length; i += 1) {
-        this.layoutItemInstances[i].AdjustFlexGrow(this.getSize(this.layoutItemElements[i]));
+        this.layoutItemInstances[i].AdjustFlexGrow(
+          this.getSize(this.layoutItemElements[i])
+        );
       }
     },
 
@@ -207,8 +220,8 @@ export default defineComponent({
         // 一个新的move事件，即鼠标松开了之后重新按下之后的move事件
         (this as any).currentMoveId = moveId;
         // 设置子组件的 data-size，用于记录在 "重新分配子组件的 flex-grow" 之前，各子组件的宽度
-        this.layoutItemElements.map(element => {
-          element.setAttribute('data-size', `${element[sizeProperty]}`);
+        this.layoutItemElements.map((element) => {
+          element.setAttribute("data-size", `${element[sizeProperty]}`);
           return element;
         });
       }
@@ -217,12 +230,12 @@ export default defineComponent({
 
     // 水平布局拖拽监听
     horizontalHandler(moveParam: ResizableLayout.IMoveParam) {
-      this.moveHandler('offsetWidth', moveParam);
+      this.moveHandler("offsetWidth", moveParam);
     },
 
     // 垂直布局拖拽监听
     verticalHandler(moveParam: ResizableLayout.IMoveParam) {
-      this.moveHandler('offsetHeight', moveParam);
+      this.moveHandler("offsetHeight", moveParam);
     },
   },
 });
@@ -235,7 +248,7 @@ export default defineComponent({
   width: 100%;
   height: 100%;
 
-  ::v-deep > .resizable-layout-item {
+  > :deep(.resizable-layout-item) {
     &:last-child {
       > .drag-bar {
         display: none;

src/styles/_mixin.scss

@@ -325,14 +325,14 @@
     justify-content: space-around;
     align-items: center;
 
-    ::v-deep .el-select {
+    :deep(.el-select) {
       display: block;
       margin-right: 6px;
       height: 30px !important;
       line-height: 30px !important;
     }
 
-    ::v-deep .el-input {
+    :deep(.el-input) {
       display: flex;
       align-items: center;
       height: 30px;

src/views/data-library/style.scss

@@ -37,7 +37,7 @@
           border-color: #eee;
         }
 
-        ::v-deep .el-card__body {
+        :deep(.el-card__body) {
           @apply text-center;
           padding: 16px;
 

src/views/main-frame/style.scss

@@ -49,7 +49,7 @@
       @apply flex-1;
       margin-left: 10px;
 
-      ::v-deep .el-breadcrumb__item {
+      :deep(.el-breadcrumb__item) {
         @media (max-width: 900px) {
           display: none;
         }

src/views/project-list/style.scss

@@ -41,7 +41,7 @@
       }
     }
 
-    ::v-deep .el-table {
+    :deep(.el-table) {
       width: 100%;
       background-color: #fff;
       border: 1px solid $border-grey;
@@ -109,7 +109,7 @@
       }
     }
 
-    ::v-deep .el-pagination {
+    :deep(.el-pagination) {
       @apply text-center;
       margin-top: 16px;
 

src/views/project/overview/style.scss

@@ -7,7 +7,7 @@
     margin-bottom: 16px;
   }
 
-  ::v-deep .el-descriptions {
+  :deep(.el-descriptions) {
     .el-descriptions__label {
       margin-right: 0;
     }
@@ -16,7 +16,7 @@
 
   .el-row {
     &.first-row {
-      ::v-deep .el-card {
+      :deep(.el-card) {
         .el-card__body {
           @apply flex flex-col items-center;
           .icon {
@@ -51,7 +51,7 @@
     }
   }
 
-  ::v-deep .el-table {
+  :deep(.el-table) {
     width: 100%;
     background-color: #fff;
     border: none;
@@ -109,7 +109,7 @@
     }
   }
 
-  ::v-deep .el-pagination {
+  :deep(.el-pagination) {
     @apply text-center;
     margin-top: 16px;
 

src/views/project/process/style.scss

@@ -57,7 +57,7 @@
         }
       }
 
-      ::v-deep .el-tree {
+      :deep(.el-tree) {
         .el-tree-node__content {
           @apply cursor-default;
           background: transparent !important;

src/views/project/style.scss

@@ -29,7 +29,7 @@
       padding: 16px 32px;
     }
 
-    ::v-deep .el-descriptions {
+    :deep(.el-descriptions) {
       padding: 0 32px;
 
       .el-descriptions__label {

src/views/project/summary/components/bottom-tabs/style.scss

@@ -4,7 +4,7 @@
   border: 1px solid #e8eaec;
   box-shadow: none;
 
-  ::v-deep .el-tabs__header {
+  :deep(.el-tabs__header) {
     background-color: #f4f5f7;
 
     .el-tabs__nav-prev,
@@ -25,7 +25,7 @@
     }
   }
 
-  ::v-deep .el-tabs__content {
+  :deep(.el-tabs__content) {
     padding: 0;
     height: calc(100% - 35px);
 

src/views/project/summary/components/subject-tree/style.scss

@@ -44,7 +44,7 @@
     overflow: hidden;
 
     .subject-tree {
-      ::v-deep .el-tree-node {
+      :deep(.el-tree-node) {
         width: 100%;
 
         &.is-current {

src/views/workbench/Workbench.vue

@@ -1,14 +1,6 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
-import getPath, { post } from "@/apis/controller/index";
 import breadcrumbStore from "@/store/modules/breadcrumb";
 
-const handleClick = async () => {
-  console.log(await getPath());
-  console.log("----");
-  console.log(await post("1"));
-};
-
 const { setBreadcrumb } = breadcrumbStore;
 setBreadcrumb([
   {
@@ -19,7 +11,6 @@ setBreadcrumb([
 
 <template>
   <article class="workbench-page">
-    <!-- <el-button @click="handleClick">按钮</el-button> -->
     <header class="header">
       <h1 class="title">工作台</h1>
       <section class="content">
@@ -115,7 +106,7 @@ setBreadcrumb([
           <template #header>
             <div class="card-header">
               <span class="text">
-                <img src="@/assets/like-icon.svg" alt class="icon" />
+                <img src="@/assets/like-icon.svg" alt="" class="icon" />
                 快捷操作
               </span>
             </div>
@@ -195,7 +186,7 @@ setBreadcrumb([
           <template #header>
             <div class="card-header">
               <span class="text">
-                <img src="@/assets/enterprise-icon.svg" alt class="icon" />
+                <img src="@/assets/enterprise-icon.svg" alt="" class="icon" />
                 成员
               </span>
             </div>

src/views/workbench/style.scss

@@ -80,7 +80,7 @@
     }
 
     .col {
-      ::v-deep .el-card {
+      :deep(.el-card) {
         border: none;
 
         .el-card__header {