refactor: 升级antd版本到4.0

package.json

@@ -17,21 +17,22 @@
     "@ssthouse/vue3-tree-chart": "^0.2.6",
     "@vue-js-cron/ant": "^1.1.2",
     "@vueuse/core": "^9.13.0",
-    "ant-design-vue": "^3.3.0-beta.4",
+    "ant-design-vue": "^4.0.0-rc.3",
     "axios": "^1.3.5",
-    "babel-plugin-import": "^1.13.6",
     "codemirror": "^6.0.1",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.7",
     "html2canvas": "^1.4.1",
     "mitt": "^3.0.0",
+    "normalize.css": "^8.0.1",
     "path-browserify": "^1.0.1",
     "pinia": "^2.0.33",
     "style-resources-loader": "^1.5.0",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0",
     "vue-hooks-plus": "^1.6.2",
-    "vue-router": "^4.0.3"
+    "vue-router": "^4.0.3",
+    "w3c-keyname": "^2.2.8"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.4.0",

src/App.vue

@@ -7,11 +7,20 @@
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
+
+import { ConfigProvider } from 'ant-design-vue'
 dayjs.locale('zh-cn')
 
+// ConfigProvider.config({
+//   theme: {
+//     primaryColor: '#fff'
+//   }
+// })
+
 console.log('process.env:', process.env)
 
 </script>
 <style lang="less">
 @import '~@/styles/theme.less';
+
 </style>

src/main.ts

@@ -4,13 +4,11 @@ import router from './router'
 import '@/router/before'
 import { createPinia } from 'pinia'
 import antd from 'ant-design-vue'
-// import 'ant-design-vue/dist/antd.less'
-// import '@/styles/index.less'
-import 'ant-design-vue/dist/antd.css'
 import UsePro from './utils/UsePro'
 import { assets } from '@/utils/static'
 import cronAnt from '@vue-js-cron/ant'
 import '@vue-js-cron/ant/dist/ant.css'
+import 'normalize.css'
 
 const pinia = createPinia()
 

src/pages/Iot/dataServer/openApi.vue

@@ -60,7 +60,7 @@
 
 <modal-pro
   title="创建Appid"
-  :visible="state.visible"
+  :open="state.visible"
   @cancel="state.visible = false"
   @ok="ok"
 >
@@ -71,7 +71,7 @@
   style="{width: 600px;}"
   size="large"
   title="api详情"
-  v-model:visible="state.detailVisible"
+  v-model:open="state.detailVisible"
   destroyOnClose
   @close="state.spnningLoading = true"
 >

src/pages/Iot/devOps/msgTracking.vue

@@ -70,7 +70,7 @@
   </a-card>
 
   <a-drawer
-    v-model:visible="state.drawerVisible"
+    v-model:open="state.drawerVisible"
     size="large"
     class="custom-class"
     title="选择设备"

src/pages/Iot/devOps/nowAlert.vue

@@ -44,7 +44,7 @@
 
   <modal-pro
     :label="modelTitle"
-    :visible="state.visible"
+    :open="state.visible"
     @cancel="state.visible = false"
     @ok="state.visible = false"
   >

src/pages/Iot/devOps/onlineTest.vue

@@ -77,7 +77,7 @@
                                 title="消息追踪"
                                 :mask="false"
                                 placement="left"
-                                :visible="state.msgTrackVisible"
+                                :open="state.msgTrackVisible"
                                 :get-container="false"
                                 :style="{ position: 'absolute' }"
                                 headerStyle="{text-align: center;}"
@@ -176,7 +176,7 @@
     </a-row>
 
 <a-drawer
-    v-model:visible="state.drawerVisible"
+    v-model:open="state.drawerVisible"
     size="large"
     class="custom-class"
     title="选择设备"

src/pages/Iot/device/components/cloudview.vue

@@ -46,7 +46,7 @@
 
   <modal-pro
     style="width: 700px;"
-    :title="modalTitle"
+    :open="modalTitle"
     :visible="state.visible"
     @cancel="state.visible = false"
     @ok="ok"
@@ -124,7 +124,7 @@
   <modal-pro
     title="下发消息"
     layout="vertical"
-    :visible="state.detailVisible"
+    :open="state.detailVisible"
     @cancel="state.detailVisible = false"
   >
     <a-descriptions

src/pages/Iot/device/components/deviceTag.vue

@@ -28,7 +28,7 @@
   <modal-pro
     style="width: 700px;"
     title="绑定标签"
-    :visible="state.visible"
+    :open="state.visible"
     @cancel="state.visible = false"
     @ok="ok"
   >

src/pages/Iot/device/components/overview.vue

@@ -57,7 +57,7 @@
 
   <modal-pro
     label="修改设备名称"
-    :visible="state.visible"
+    :open="state.visible"
     @cancel="state.visible = false"
     @ok="ok"
   >

src/pages/Iot/device/components/subDevice.vue

@@ -66,7 +66,7 @@
   <modal-pro
     label="添加子设备"
     style="width: 700px;"
-    :visible="state.visible"
+    :open="state.visible"
     @close="state.visible = false"
     @ok="ok"
   >

src/pages/Iot/device/group.vue

@@ -147,7 +147,7 @@
 
  <!-- 绑定设备抽屉 -->
  <a-drawer
-    v-model:visible="state.drawerVisible"
+    v-model:open="state.drawerVisible"
     size="large"
     class="custom-class"
     title="绑定设备"
@@ -213,7 +213,7 @@
   <!-- 添加根设备群组 -->
   <modal-pro
     :title="state.groupOpra === 'add' ? '添加设备群组' : '删除设备群组'"
-    :visible="state.groupModalVisible"
+    :open="state.groupModalVisible"
     @cancel="state.groupModalVisible = false"
     @ok="ok"
   >

src/pages/Iot/device/index.vue

@@ -79,7 +79,7 @@
 
   <a-modal
     title="单设备注册"
-    :visible="state.visible"
+    :open="state.visible"
     @cancel="state.visible = false"
     @ok="ok"
   >

src/pages/Iot/model/components/modelDefine.vue

@@ -70,7 +70,7 @@
   </a-table>
   <a-modal
     :title="modalTitle"
-    :visible="state.attrVisible"
+    :open="state.attrVisible"
     @cancel="state.attrVisible = false"
     @ok="ok('attr')"
     ok-text="确定"
@@ -110,7 +110,7 @@
   <a-modal
     width="50%"
     :title="modalTitle"
-    :visible="state.cmdVisible"
+    :open="state.cmdVisible"
     @cancel="state.cmdVisible = false"
     @ok="ok('cmd')"
     ok-text="确定"
@@ -179,7 +179,7 @@
 
   <a-modal
     title="新增参数"
-    :visible="state.cmdParamsvisible"
+    :open="state.cmdParamsvisible"
     @cancel="state.cmdParamsvisible = false"
     @ok="okCmdParams"
     ok-text="确定"

src/pages/Iot/model/index.vue

@@ -65,7 +65,7 @@
 
   <a-modal
     :title="modalTitle"
-    :visible="state.visible"
+    :open="state.visible"
     ok-text="确定"
     cancel-text="取消"
     @cancel="closeModel"

src/pages/Iot/model/models.vue

@@ -35,7 +35,7 @@
 
 <modal-pro
   label="选择产品"
-  :visible="state.visible"
+  :open="state.visible"
   @cancel="state.visible = false"
   @ok="ok"
 >

src/pages/Iot/rule/forwardRule.vue

@@ -117,7 +117,7 @@
 <modal-pro
   width="1000px"
   label="创建规则"
-  :visible="state.visible"
+  :open="state.visible"
   @cancel="state.visible = false"
   @ok="ok('visible')"
 >
@@ -169,7 +169,7 @@
 <modal-pro
   style="width: 800px"
   label="转发目标"
-  :visible="state.targetVisible"
+  :open="state.targetVisible"
   :ok-text=" state.stepCount === 0 ? '下一步' : '确定'"
   @cancel="state.targetVisible = false"
   @ok="ok('targetVisible')"
@@ -342,7 +342,7 @@
 <modal-pro
   style="width: 1000px"
   label="详情"
-  :visible="state.detailVisible"
+  :open="state.detailVisible"
   @cancel="state.detailVisible = false"
   @ok="state.detailVisible  = false"
 >
@@ -391,7 +391,7 @@
 
 <modal-pro
   label="调试"
-  :visible="state.testVisble"
+  :open="state.testVisble"
   @cancel="state.testVisble = false"
   @ok="dispatchDebug"
   style="width: 640px;"

src/pages/Iot/rule/linkRules.vue

@@ -59,7 +59,7 @@
   <modal-pro
     style="width: 1400px;"
     :label=" state.opraState !== 'preview' ? '创建联动规则' : '查看详情'"
-    :visible="state.visible"
+    :open="state.visible"
     destroyOnClose
     @cancel="state.visible = false"
     @ok="ok"
@@ -261,7 +261,7 @@
 
   <modal-pro
     label="选择"
-    :visible="state.formVisible"
+    :open="state.formVisible"
     @cancel="state.formVisible = false"
     @ok="selectConditionAndAction"
     style="width: 700px;"
@@ -639,7 +639,7 @@
   <modal-pro
     style="width: 700px;height: 500px;"
     label="选择设备"
-    :visible="state.deviceModalVisible"
+    :open="state.deviceModalVisible"
     @cancel="state.deviceModalVisible = false"
     @ok="selectDevice"
   >
@@ -650,7 +650,7 @@
 
   <modal-pro
     label="调试"
-    :visible="state.testVisble"
+    :open="state.testVisble"
     @cancel="state.testVisble = false"
     @ok="dispatchDebug"
     style="width: 640px;"

src/pages/Iot/sys/notice.vue

@@ -73,7 +73,7 @@
 
   <modal-pro
     :label="modalTitle"
-    :visible="state.visible"
+    :open="state.visible"
     destroyOnClose
     @cancel="state.visible = false"
     @ok="ok"

src/pages/Iot/sys/noticeway.vue

@@ -33,7 +33,7 @@
 </a-spin>
   <modal-pro
     label="修改邮箱"
-    :visible="state.visible"
+    :open="state.visible"
     ok-text="确定"
     cancel-text="取消"
     @cancel="state.visible = false"

src/pages/Iot/task/manage.vue

@@ -79,7 +79,7 @@
   <modal-pro
     style="width: 1000px"
     :label="modalTitle"
-    :visible="state.visible"
+    :open="state.visible"
     destroyOnClose
     @cancel="state.visible = false"
     @ok="ok"
@@ -185,7 +185,7 @@
 <modal-pro
     style="width: 700px;overflow: hidden;"
     label="选择设备"
-    :visible="state.deviceModalVisible"
+    :open="state.deviceModalVisible"
     @cancel="state.deviceModalVisible = false"
     @ok="selectDevice"
   >

src/pages/Iot/task/track.vue

@@ -35,7 +35,7 @@
 <modal-pro
     style="width: 700px;overflow: hidden;"
     label="最终详情"
-    :visible="state.visable"
+    :open="state.visable"
     @cancel="state.visable = false"
     @ok="state.visable = false"
   >

src/pages/rts/gb28181/index.vue

@@ -18,7 +18,7 @@
     </a-card>
     <a-modal
     title="控制设备"
-    :visible="state.controlVisible"
+    :open="state.controlVisible"
     ok-text="确定"
     cancel-text="取消"
     @cancel="closeModel"

src/pages/rts/pull/index.vue

@@ -26,7 +26,7 @@
 
   <modal-pro
     label="创建拉流"
-    :visible="state.visible"
+    :open="state.visible"
     @cancel="state.visible = false "
     @ok="ok"
   >

src/pages/rts/push/index.vue

@@ -26,7 +26,7 @@
 
   <modal-pro
     label="创建推流"
-    :visible="state.visible"
+    :open="state.visible"
     @cancel="state.visible = false "
     @ok="ok"
   >

src/pages/rts/record/index.vue

@@ -58,7 +58,7 @@
   <modal-pro
     style="width: 700px;"
     label="视频流详情"
-    :visible="state.visible"
+    :open="state.visible"
     @cancel="state.visible = false"
     @ok="state.visible = false"
     destroyOnClose
@@ -68,7 +68,7 @@
 
   <modal-pro
     label="录制视频"
-    :visible="state.recordVisible"
+    :open="state.recordVisible"
     @cancel="state.recordVisible = false"
     @ok="recordVideo"
   >

src/pages/rts/stream/index.vue

@@ -23,7 +23,7 @@
   <modal-pro
     style="width: 700px;"
     label="视频流详情"
-    :visible="state.visible"
+    :open="state.visible"
     @cancel="state.visible = false"
     @ok="state.visible = false"
     destroyOnClose

src/styles/theme.less

@@ -1,7 +1,6 @@
 
 
-
-@primary-color: red;
+@primary-color: #1890ff;
 @border-radius-base: 10px;
 
 @label-color: #8a8e99; 
@@ -9,4 +8,8 @@
 @sublabel-color: hsla(0,0%,40%,.4);
 
 
-@bg-color-1: rgba(16,103,238,.04);
+@bg-color-1: rgba(16,103,238,.04);
+
+// @import '~ant-design-vue/dist/antd.less';
+
+// @import '~ant-design-vue/dist/antd.dark.less';

vue.config.js

@@ -16,5 +16,14 @@ module.exports = defineConfig({
         path.resolve(__dirname, '@/src/styes/*.less')
       ]
     }
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        lessOptions: {
+          javascriptEnabled: true
+        }
+      }
+    }
   }
 })