feat: tailwind 样式&依赖升级

frontend/package.json

@@ -36,13 +36,13 @@
   "dependencies": {
     "@7polo/kity": "2.0.8",
     "@7polo/kityminder-core": "1.4.53",
-    "@arco-design/web-vue": "^2.46.2",
+    "@arco-design/web-vue": "^2.47.0",
     "@arco-themes/vue-ms-theme-default": "^0.0.12",
     "@form-create/arco-design": "^3.1.21",
     "@vueuse/core": "^9.13.0",
-    "ace-builds": "^1.21.1",
+    "ace-builds": "^1.22.0",
     "axios": "^0.24.0",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.8",
     "echarts": "^5.4.2",
     "hotbox-minder": "1.0.15",
     "jsonpath-picker-vanilla": "^1.2.4",
@@ -50,51 +50,52 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.3",
     "pinia-plugin-persistedstate": "^3.1.0",
     "query-string": "^8.1.0",
     "sortablejs": "^1.15.0",
     "vue": "^3.3.4",
     "vue-echarts": "^6.5.5",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.2.2",
     "vue3-ace-editor": "^2.2.2"
   },
   "devDependencies": {
     "@arco-plugins/vite-vue": "^1.4.5",
-    "@commitlint/cli": "^17.6.3",
+    "@commitlint/cli": "^17.6.5",
-    "@commitlint/config-conventional": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.5",
-    "@types/lodash": "^4.14.194",
+    "@types/lodash": "^4.14.195",
     "@types/lodash-es": "^4.17.7",
     "@types/mockjs": "^1.0.7",
     "@types/nprogress": "^0.2.0",
     "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.9",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
-    "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/coverage-c8": "^0.31.4",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/test-utils": "^2.3.2",
     "autoprefixer": "^10.4.14",
     "consola": "^2.15.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.40.0",
+    "eslint": "^8.42.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.12.0",
+    "eslint-plugin-vue": "^9.14.1",
     "fast-glob": "^3.2.12",
     "husky": "^8.0.3",
-    "jsdom": "^22.0.0",
+    "jsdom": "^22.1.0",
     "less": "^4.1.3",
-    "less-loader": "^11.1.0",
+    "less-loader": "^11.1.2",
     "lint-staged": "^13.2.2",
     "mockjs": "^1.1.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-html": "^1.5.0",
+    "postcss-import": "^15.1.0",
     "postcss-less": "^6.0.0",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
@@ -102,8 +103,8 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.62.1",
     "stylelint": "^14.16.1",
-    "stylelint-config-html": "^1.0.0",
+    "stylelint-config-html": "^1.1.0",
-    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-recommended-less": "^1.0.4",
@@ -111,19 +112,19 @@
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-config-standard-scss": "^4.0.0",
-    "stylelint-less": "^1.0.5",
+    "stylelint-less": "^1.0.6",
     "stylelint-order": "^5.0.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^4.9.5",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^3.2.6",
+    "vite": "^3.2.7",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vite-svg-loader": "^3.6.0",
-    "vitest": "^0.31.0",
+    "vitest": "^0.31.4",
     "vue-tsc": "^1.6.5"
   },
   "engines": {

frontend/postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer')],
+  plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')],
 };

frontend/src/assets/style/arco-reset.less

@@ -2,11 +2,11 @@
   /** 表格样式  **/
   .arco-table-cell {
     .circle {
-      display: inline-block;
+      @apply inline-block rounded-full;
+
       margin-right: 4px;
       width: 6px;
       height: 6px;
-      border-radius: 50%;
       background-color: rgb(var(--blue-6));
       &.pass {
         background-color: rgb(var(--green-6));

frontend/src/assets/style/global.less

@@ -4,21 +4,19 @@
 @tailwind components;
 @tailwind utilities;
 * {
-  box-sizing: border-box;
+  @apply box-border;
 }
 html,
 body {
-  margin: 0;
+  @apply m-0 h-full w-full p-0;
-  padding: 0;
+
-  width: 100%;
-  height: 100%;
   font-size: 14px;
   background-color: var(--color-bg-1);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 }
 .echarts-tooltip-diy {
-  border: none !important;
+  @apply !border-none;
 
   /* Note: backdrop-filter has minimal browser support */
 
@@ -26,8 +24,8 @@ body {
   background: linear-gradient(304.17deg, rgb(253 254 255 / 60%) -6.04%, rgb(244 247 252 / 60%) 85.2%) !important;
   backdrop-filter: blur(10px) !important;
   .content-panel {
-    display: flex;
+    @apply flex justify-between;
-    justify-content: space-between;
+
     margin-bottom: 4px;
     padding: 0 9px;
     width: 164px;
@@ -41,20 +39,19 @@ body {
     margin: 0 0 10px;
   }
   p {
-    margin: 0;
+    @apply m-0;
   }
   .tooltip-title,
   .tooltip-value {
-    display: flex;
+    @apply flex items-center text-right font-bold;
-    align-items: center;
+
     font-size: 13px;
-    font-weight: bold;
-    text-align: right;
     color: #1d2129;
     line-height: 15px;
   }
   .tooltip-item-icon {
-    display: inline-block;
+    @apply inline-block;
+
     margin-right: 8px;
     width: 10px;
     height: 10px;
@@ -62,12 +59,13 @@ body {
   }
 }
 .general-card {
-  border: none;
+  @apply border-none;
+
   border-radius: 4px;
   & > .arco-card-header {
+    @apply h-auto border-none;
+
     padding: 20px;
-    height: auto;
-    border: none;
   }
   & > .arco-card-body {
     padding: 0 20px 20px;

frontend/src/components/footer/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout-footer class="footer">{{ props.text }}</a-layout-footer>
+  <a-layout-footer class="footer h-[40px]">{{ props.text }}</a-layout-footer>
 </template>
 
 <script lang="ts" setup>
@@ -15,11 +15,8 @@
 
 <style lang="less" scoped>
   .footer {
-    display: flex;
+    @apply flex items-center justify-center text-center;
-    justify-content: center;
+
-    align-items: center;
-    height: 40px;
-    text-align: center;
     color: var(--color-text-2);
   }
 </style>

frontend/src/components/global-setting/block.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="block">
+  <div class="mb-[24px]">
-    <h5 class="title">{{ title }}</h5>
+    <h5 class="title my-[10px] p-0 text-[14px]">{{ title }}</h5>
-    <div v-for="option in options" :key="option.name" class="switch-wrapper">
+    <div v-for="option in options" :key="option.name" class="switch-wrapper h-[32px]">
       <span>{{ $t(option.name) }}</span>
       <form-wrapper
         :type="option.type || 'switch'"
@@ -51,18 +51,10 @@
 </script>
 
 <style scoped lang="less">
-  .block {
-    margin-bottom: 24px;
-  }
   .title {
-    margin: 10px 0;
+    @apply mx-0 p-0;
-    padding: 0;
-    font-size: 14px;
   }
   .switch-wrapper {
-    display: flex;
+    @apply flex items-center justify-between;
-    justify-content: space-between;
-    align-items: center;
-    height: 32px;
   }
 </style>

frontend/src/components/global-setting/index.vue

@@ -1,5 +1,6 @@
+<!-- eslint-disable prettier/prettier -->
 <template>
-  <div v-if="!appStore.navbar" class="fixed-settings" @click="setVisible">
+  <div v-if="!appStore.navbar" class="fixed-settings top-[280px]" @click="setVisible">
     <a-button type="primary">
       <template #icon>
         <icon-settings />
@@ -82,9 +83,7 @@
 
 <style scoped lang="less">
   .fixed-settings {
-    position: fixed;
+    @apply fixed right-0;
-    top: 280px;
-    right: 0;
     svg {
       font-size: 18px;
       vertical-align: -4px;

frontend/src/components/menu/index.vue

@@ -149,8 +149,7 @@
 <style lang="less" scoped>
   :deep(.arco-menu-inner) {
     .arco-menu-inline-header {
-      display: flex;
+      @apply flex items-center;
-      align-items: center;
     }
     .arco-icon {
       &:not(.arco-icon-down) {

frontend/src/components/message-box/index.vue

@@ -97,17 +97,21 @@
 
 <style scoped lang="less">
   :deep(.arco-popover-popup-content) {
-    padding: 0;
+    @apply p-0;
   }
   :deep(.arco-list-item-meta) {
-    align-items: flex-start;
+    @apply items-start;
   }
   :deep(.arco-tabs-nav) {
-    padding: 14px 0 12px 16px;
+    @apply pr-0;
+
+    padding-top: 14px;
+    padding-bottom: 12px;
+    padding-left: 16px;
     border-bottom: 1px solid var(--color-neutral-3);
   }
   :deep(.arco-tabs-content) {
-    padding-top: 0;
+    @apply pt-0;
     .arco-result-subtitle {
       color: rgb(var(--gray-6));
     }

frontend/src/components/message-box/list.vue

@@ -97,32 +97,34 @@
       border-bottom: 1px solid rgb(var(--gray-3));
     }
     .arco-list-item-extra {
-      position: absolute;
+      @apply absolute;
+
       right: 20px;
     }
     .arco-list-item-meta-content {
-      flex: 1;
+      @apply flex-1;
     }
     .item-wrap {
-      cursor: pointer;
+      @apply cursor-pointer;
     }
     .time-text {
       font-size: 12px;
       color: rgb(var(--gray-6));
     }
     .arco-empty {
-      display: none;
+      @apply hidden;
     }
     .arco-list-footer {
-      padding: 0;
+      @apply border-t-0 p-0;
-      height: 50px;
+
-      border-top: none;
       line-height: 50px;
+      height: 50px;
       .arco-space-item {
-        width: 100%;
+        @apply w-full;
+
         border-right: 1px solid rgb(var(--gray-3));
         &:last-child {
-          border-right: none;
+          @apply border-r-0;
         }
       }
       .add-border-top {
@@ -130,10 +132,10 @@
       }
     }
     .footer-wrap {
-      text-align: center;
+      @apply text-center;
     }
     .arco-typography {
-      margin-bottom: 0;
+      @apply mb-0;
     }
     .add-border {
       border-top: 1px solid rgb(var(--gray-3));

frontend/src/components/minder-editor/main/header.vue

@@ -62,34 +62,30 @@
   @import '../style/header';
   .mind_tab-content {
     .tab-icons {
-      background-image: url('@/assets/images/minder/icons.png');
+      @apply bg-[url('@/assets/images/minder/icons.png')] bg-no-repeat;
-      background-repeat: no-repeat;
     }
   }
 </style>
 
 <style lang="less" scoped>
   header {
+    @apply bg-white;
+
     font-size: 12px;
-    background-color: #ffffff;
     & > ul {
-      display: flex;
+      @apply m-0 flex items-center p-0;
-      align-items: center;
+
-      margin: 0;
-      padding: 0;
       height: 30px;
       background-color: #e1e1e1;
       li {
-        line-height: 30px;
+        @apply inline-flex h-full  list-none;
-        display: inline-flex;
+
         width: 80px;
-        height: 100%;
+        line-height: 30px;
-        list-style: none;
         a {
-          width: inherit;
+          @apply text-center no-underline;
+
           font-size: 14px;
-          text-align: center;
-          text-decoration: none;
           color: #337ab7;
         }
         a:hover,
@@ -98,9 +94,9 @@
         }
       }
       li.selected {
-        background: #ffffff;
+        @apply bg-white;
         a {
-          color: #000000;
+          @apply text-black;
         }
       }
     }

frontend/src/components/minder-editor/main/mainEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="mec" class="minder-container" :style="{ height: `${props.height}px` }">
-    <a-button type="primary" :disabled="props.disabled" class="save-btn" @click="save">{{
+    <a-button type="primary" :disabled="props.disabled" class="save-btn bottom-[30px] right-[30px]" @click="save">{{
       t('minder.main.main.save')
     }}</a-button>
     <navigator />
@@ -131,11 +131,9 @@
 <style lang="less">
   @import '../style/editor.less';
   .save-btn {
-    position: absolute;
+    @apply absolute;
-    right: 30px;
-    bottom: 30px;
   }
   .minder-container {
-    position: relative;
+    @apply relative;
   }
 </style>

frontend/src/components/minder-editor/main/navigator.vue

@@ -309,8 +309,8 @@
   });
 </script>
 
-<style scoped>
+<style lang="less" scoped>
   .nav-btn .icon {
-    background: url('@/assets/images/minder/icons.png');
+    background-image: url('@/assets/images/minder/icons.png');
   }
 </style>

frontend/src/components/minder-editor/menu/edit/expand.vue

@@ -34,6 +34,6 @@
 
 <style lang="less" scoped>
   .dropdown-link {
-    cursor: pointer;
+    @apply cursor-pointer;
   }
 </style>

frontend/src/components/minder-editor/menu/edit/selection.vue

@@ -118,6 +118,6 @@
 
 <style lang="less" scoped>
   .dropdown-link {
-    cursor: pointer;
+    @apply cursor-pointer;
   }
 </style>

frontend/src/components/minder-editor/menu/edit/sequenceBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div :disabled="commandDisabled">
-    <a-button class="delete-btn" shape="circle" @click="execCommand()">
+    <a-button class="delete-btn mx-[4px] my-0 h-[23px] w-[23px] !p-[2px]" shape="circle" @click="execCommand()">
       <template #icon>
         <icon-delete />
       </template>
@@ -9,7 +9,7 @@
       <a-button
         v-if="pIndex != 0"
         :key="item"
-        class="priority-btn"
+        class="priority-btn mr-[4px] h-[22px] w-[22px] rounded-[8px] pr-[5px] text-[12px]"
         :class="'priority-btn_' + pIndex"
         size="small"
         @click="execCommand(pIndex)"
@@ -83,26 +83,13 @@
 
 <style lang="less" scoped>
   .delete-btn {
-    margin: 0 4px;
-    padding: 2px !important;
-    width: 23px;
-    height: 23px;
     i {
       width: 1em !important;
       height: 1em !important;
     }
   }
   .priority-btn {
-    margin-right: 4px;
+    @apply border-none p-0 italic text-white;
-    padding: 0;
-    padding-right: 5px;
-    width: 22px;
-    height: 22px;
-    font-size: 12px;
-    border: 0;
-    border-radius: 8px;
-    color: white;
-    font-style: italic;
   }
   .priority-btn_1 {
     border-bottom: 3px solid #840023;

frontend/src/components/minder-editor/menu/edit/tagBox.vue

@@ -81,12 +81,12 @@
 
 <style lang="less" scoped>
   .arco-tag {
+    @apply border-none text-black;
+
     margin-right: 4px;
-    border: 0;
-    color: black;
   }
   .arco-tag:hover {
-    cursor: pointer;
+    @apply cursor-pointer;
   }
   .arco-tag:first-child {
     margin-left: 4px;

frontend/src/components/minder-editor/menu/view/fontOperation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="font-group">
+  <div class="font-group ml-[10px]">
     <a-select
       v-model="fontFamilyDefaultValue"
       :placeholder="t('minder.menu.font.font')"
@@ -37,7 +37,7 @@
         }"
       />
     </a-select>
-    <span class="font-btn">
+    <span class="font-btn mt-[2px]">
       <span
         class="menu-btn tab-icons font-bold"
         :class="{ selected: boldSelected }"
@@ -258,12 +258,3 @@
     }
   }
 </script>
-
-<style lang="less" scoped>
-  .font-group {
-    margin-left: 10px;
-  }
-  .font-btn {
-    margin-top: 2px;
-  }
-</style>

frontend/src/components/minder-editor/menu/view/mold.vue

@@ -57,9 +57,9 @@
 <style lang="less">
   .toggle {
     .arco-dropdown-list {
-      display: grid;
+      @apply col-span-2 grid;
+
       padding: 5px;
-      grid-template-columns: 1fr 1fr;
       gap: 5px;
     }
   }
@@ -72,27 +72,27 @@
     background-repeat: no-repeat;
   }
   .mold-group {
-    position: relative;
+    @apply relative flex items-center justify-center;
-    display: flex;
+
-    justify-content: center;
-    align-items: center;
     width: 80px;
     .dropdown-toggle {
-      display: flex;
+      @apply flex;
+
       margin-top: 5px;
       width: 50px;
       height: 50px;
     }
   }
   .dropdown-link {
-    position: absolute;
+    @apply absolute cursor-pointer;
+
     right: 3px;
     bottom: 2px;
-    cursor: pointer;
   }
   .mold-loop(@i) when (@i > 0) {
     .mold-@{i} {
-      display: flex;
+      @apply flex;
+
       margin-top: 5px;
       width: 50px;
       height: 50px;

frontend/src/components/minder-editor/menu/view/viewMenu.vue

@@ -29,7 +29,8 @@
   .menu-container {
     height: 60px;
     i {
-      display: inline-block;
+      @apply inline-block;
+
       width: 20px;
       height: 20px;
     }

frontend/src/components/minder-editor/style/dropdown-list.less

@@ -10,9 +10,9 @@
   height: 170px;
   font-size: 12px;
   .dropdown-item {
-    display: inline-block;
+    @apply inline-block p-0;
+
     margin: 5px;
-    padding: 0;
     width: 50px;
     height: 40px;
   }
@@ -29,12 +29,12 @@
   width: 120px;
   font-size: 12px;
   .mold-icons {
-    background-repeat: no-repeat;
+    @apply bg-no-repeat;
   }
   .dropdown-item {
-    display: inline-block;
+    @apply inline-block p-0;
+
     margin: 5px;
-    padding: 0;
     width: 100px;
     height: 30px;
   }

frontend/src/components/minder-editor/style/editor.less

@@ -2,58 +2,40 @@
 @import url('navigator.less');
 @import url('hotbox.less');
 .km-editor {
+  @apply overflow-hidden;
+
   z-index: 2;
-  overflow: hidden;
 }
 .km-editor > .mask {
-  position: absolute;
+  @apply absolute bottom-0 left-0 right-0 top-0 block bg-transparent;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: block;
-  background-color: transparent;
 }
 .km-editor > .receiver {
-  position: absolute;
+  @apply pointer-events-none absolute left-0 top-0 box-border w-auto select-text overflow-hidden break-words break-all border-none bg-white opacity-0 outline-none;
-  top: 0;
+
-  left: 0;
   z-index: -1000;
-  overflow: hidden;
   margin-top: -5px;
   margin-left: -3px;
   padding: 3px 5px;
-  width: auto;
   max-width: 300px;
   min-height: 1.4em;
   font-size: 14px;
-  border: none;
-  background: white;
-  opacity: 0;
-  outline: none;
   box-shadow: 0 0 20px;
   line-height: 1.4em;
-  box-sizing: border-box;
-  word-break: break-all;
-  word-wrap: break-word;
-  user-select: text;
-  pointer-events: none;
   &.debug {
-    z-index: 0;
+    @apply z-0 bg-none opacity-100;
-    background: none;
+
-    opacity: 1;
     outline: 1px solid green;
   }
   &.input {
+    @apply bg-white opacity-100 outline-none;
+
     z-index: 999;
-    background: white;
-    opacity: 1;
-    outline: none;
     pointer-events: all;
   }
 }
 div.minder-editor-container {
-  position: absolute;
+  @apply absolute bottom-0 left-0 right-0;
+
   top: 40px;
   right: 0;
   bottom: 0;
@@ -61,35 +43,25 @@ div.minder-editor-container {
   font-family: Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
 }
 .minder-editor {
-  position: absolute;
+  @apply absolute bottom-0 left-0 right-0;
+
   top: 92px;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 .minder-viewer {
-  position: absolute;
+  @apply absolute bottom-0 left-0 right-0 top-0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 .control-panel {
-  position: absolute;
+  @apply absolute bottom-0 right-0 top-0;
-  top: 0;
+
-  right: 0;
-  bottom: 0;
   width: 250px;
   border-left: 1px solid #cccccc;
 }
 .minder-divider {
-  position: absolute;
+  @apply absolute bottom-0 top-0 cursor-ew-resize;
-  top: 0;
+
   right: 250px;
-  bottom: 0;
   width: 2px;
   background-color: rgb(251 251 251);
-  cursor: ew-resize;
 }
 .hotbox .state .button.enabled.selected .key,
 .hotbox .state .ring .key {
@@ -98,12 +70,12 @@ div.minder-editor-container {
 }
 .hotbox .state .bottom .button .label,
 .hotbox .state .top .button .label {
-  font-weight: 600;
+  @apply font-semibold;
 }
 .hotbox .exp .ring .button .label {
   margin-top: 28px;
   margin-left: -2px;
 }
 .hotbox .exp .ring .button .key {
-  display: none;
+  @apply hidden;
 }

frontend/src/components/minder-editor/style/header.less

@@ -1,40 +1,39 @@
 @import 'mixin.less';
 @import 'dropdown-list.less';
 .mind-tab-panel {
-  width: 100%;
+  @apply h-full w-full;
-  height: 100%;
   .menu-container {
-    display: flex;
+    @apply flex;
     & > div {
-      display: inline-flex;
+      @apply inline-flex flex-wrap items-center overflow-hidden;
-      align-items: center;
+
-      overflow: hidden;
       border-right: 1px dashed #eeeeee;
-      flex-wrap: wrap;
     }
     & > div:last-of-type {
-      border-right: none;
+      @apply border-r-0;
     }
   }
   .menu-btn {
-    display: inline-flex;
+    @apply inline-flex cursor-pointer;
-    cursor: pointer;
     @include flexcenter;
   }
   .menu-btn:not([disabled='true']):hover {
     background-color: @btn-hover-color;
   }
   .tab-icons {
-    display: inline-block;
+    @apply inline-flex;
+
     width: 20px;
     height: 20px;
   }
   .do-group {
+    @apply h-full w-[40px];
+
     padding: 0 5px;
     width: 40px;
-    height: 100%;
     p {
-      margin: 0;
+      @apply m-0;
+
       height: 50%;
       @include flexcenter;
     }
@@ -48,7 +47,7 @@
   .insert-group {
     width: 110px;
     & > div {
-      margin: 0 5px;
+      margin: 5px 0;
     }
     .insert-sibling-box {
       i {
@@ -94,12 +93,11 @@
     width: 185px;
     @include flexcenter;
     button {
-      padding: 0;
+      @apply bg-no-repeat p-0;
+
       width: 45px;
       height: 20px;
-      font-size: inherit;
       background-position: right;
-      background-repeat: no-repeat;
       @include button;
       @include flexcenter;
       span {
@@ -110,15 +108,15 @@
       background-color: @btn-hover-color;
     }
     & > div {
+      @apply h-full flex-wrap;
+
       width: 60px;
-      height: 100%;
-      font-size: inherit;
-      flex-wrap: wrap;
       @include flexcenter;
     }
     .insert {
+      @apply bg-no-repeat;
+
       height: 25px;
-      background-repeat: no-repeat;
     }
     .link {
       .insert {
@@ -141,12 +139,12 @@
     width: 135px;
     @include flexcenter;
     ul {
-      margin: 0;
+      @apply m-0 list-none p-0;
-      padding: 0;
+
       width: 120px;
-      list-style: none;
       li {
-        display: inline-block;
+        @apply inline-block;
+
         margin: 2px;
         width: 20px;
         height: 20px;
@@ -174,37 +172,35 @@
   .arrange-group {
     width: 65px;
     .arrange {
-      flex-wrap: wrap;
+      @apply flex-wrap;
       @include flexcenter;
     }
     .tab-icons {
-      display: inline-block;
+      @apply m-0 inline-block bg-no-repeat;
-      margin: 0;
+
       width: 25px;
       height: 25px;
       background-position: 0 -150px;
-      background-repeat: no-repeat;
     }
   }
   .style-group {
-    width: 150px;
+    @apply w-[150px];
     .clear-style-btn {
-      flex-wrap: wrap;
+      @apply w-[65px] flex-wrap;
-      width: 65px;
       @include flexcenter;
       .tab-icons {
-        display: inline-block;
+        @apply m-0 inline-block bg-no-repeat;
-        margin: 0;
+
         width: 25px;
         height: 25px;
         background-position: 0 -175px;
-        background-repeat: no-repeat;
       }
     }
     .copy-paste-panel {
-      width: 70px;
+      @apply w-[70px];
       .tab-icons {
-        display: inline-block;
+        @apply inline-block;
+
         width: 20px;
         height: 20px;
       }
@@ -234,7 +230,8 @@
     }
     .font-bold,
     .font-italic {
-      display: inline-block;
+      @apply my-0 inline-block;
+
       margin: 0 3px;
       width: 20px;
       height: 20px;
@@ -251,8 +248,7 @@
     margin: 0 5px;
     width: 60px;
     button {
-      border: none;
+      @apply border-none outline-none;
-      outline: none;
     }
     @include flexcenter;
     span {

frontend/src/components/minder-editor/style/hotbox.less

@@ -1,35 +1,31 @@
 .hotbox {
-  position: absolute;
+  @apply absolute left-0 top-0 overflow-visible;
-  top: 0;
+
-  left: 0;
-  overflow: visible;
   font-family: Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
   .state {
-    position: absolute;
+    @apply absolute hidden overflow-visible;
-    display: none;
-    overflow: visible;
     .center,
     .ring {
       .button {
-        position: absolute;
+        @apply absolute rounded-full;
+
         margin-top: -35px;
         margin-left: -35px;
         width: 70px;
         height: 70px;
-        border-radius: 100%;
         box-shadow: 0 0 30px rgb(0 0 0 / 30%);
       }
       .label,
       .key {
-        display: block;
+        @apply block text-center;
-        text-align: center;
+
         line-height: 1.4em;
       }
       .label {
+        @apply font-normal text-black;
+
         margin-top: 17px;
         font-size: 16px;
-        font-weight: normal;
-        color: black;
         line-height: 1em;
       }
       .key {
@@ -38,36 +34,35 @@
       }
     }
     .ring-shape {
-      position: absolute;
+      @apply absolute  box-content rounded-full;
+
       top: -25px;
       left: -25px;
       border: 25px solid rgb(0 0 0 / 30%);
-      border-radius: 100%;
-      box-sizing: content-box;
     }
     .top,
     .bottom {
-      position: absolute;
+      @apply absolute whitespace-nowrap;
-      white-space: nowrap;
       .button {
-        position: relative;
+        @apply relative inline-block;
-        display: inline-block;
+
         margin: 0 10px;
         padding: 8px 15px;
         border-radius: 15px;
         box-shadow: 0 0 30px rgb(0 0 0 / 30%);
         .label {
+          @apply align-middle text-black;
+
           font-size: 14px;
           line-height: 14px;
-          vertical-align: middle;
-          color: black;
         }
         .key {
+          @apply align-middle;
+
           margin-left: 3px;
           font-size: 12px;
-          color: #999999;
           line-height: 12px;
-          vertical-align: middle;
+          color: #999999;
           &::before {
             content: '(';
           }
@@ -78,34 +73,34 @@
       }
     }
     .button {
-      overflow: hidden;
+      @apply cursor-default overflow-hidden;
-      background: #f9f9f9;
+
-      cursor: default;
+      background-color: #f9f9f9;
       .key,
       .label {
         opacity: 0.3;
       }
     }
     .button.enabled {
-      background: white;
+      @apply bg-white;
       .key,
       .label {
-        opacity: 1;
+        @apply opacity-100;
       }
       &:hover {
         background: lighten(rgb(228 93 92), 5%);
         .label {
-          color: white;
+          @apply text-white;
         }
         .key {
           color: lighten(rgb(228 93 92), 30%);
         }
       }
       &.selected {
+        background-color: rgb(228 93 92);
         animation: selected 0.1s ease;
-        background: rgb(228 93 92);
         .label {
-          color: white;
+          @apply text-white;
         }
         .key {
           color: lighten(rgb(228 93 92), 30%);
@@ -113,9 +108,9 @@
       }
       &.pressed,
       &:active {
-        background: #ff974d;
+        @apply bg-[#ff974d];
         .label {
-          color: white;
+          @apply text-white;
         }
         .key {
           color: lighten(#ff974d, 30%);
@@ -124,7 +119,7 @@
     }
   }
   .state.active {
-    display: block;
+    @apply block;
   }
 }
 
@@ -140,11 +135,10 @@
   }
 }
 .hotbox-key-receiver {
-  position: absolute;
+  @apply absolute m-0 outline-none;
-  top: -999999px;
+
-  left: -999999px;
+  top: -9999px;
-  margin: 0;
+  left: -9999px;
   width: 20px;
   height: 20px;
-  outline: none;
 }

frontend/src/components/minder-editor/style/mixin.less

@@ -1,21 +1,16 @@
 @btn-hover-color: #eee;
 *[disabled='true'] {
-  opacity: 0.5;
+  @apply opacity-50;
 }
 
 .block() {
-  width: 100%;
+  @apply h-full w-full;
-  height: 100%;
 }
 
 .button() {
-  border: none;
+  @apply border-none bg-transparent outline-none;
-  background: transparent;
-  outline: none;
 }
 
 .flexcenter() {
-  display: flex;
+  @apply flex items-center justify-center;
-  justify-content: center;
-  align-items: center;
 }

frontend/src/components/minder-editor/style/navigator.less

@@ -1,24 +1,25 @@
 .nav-bar {
-  position: absolute;
+  @apply absolute z-10 text-white;
+
   bottom: 10px;
   left: 10px;
-  z-index: 10;
   padding: 5px 0;
   width: 35px;
   height: 200px;
   border-radius: 4px;
-  color: #ffffff;
+  background-color: #fc8383;
-  background: #fc8383;
   box-shadow: 3px 3px 10px rgb(0 0 0 / 20%);
   transition: -webkit-transform 0.7s 0.1s ease;
   transition: transform 0.7s 0.1s ease;
   .nav-btn {
+    @apply text-center;
+
     width: 35px;
     height: 24px;
     line-height: 24px;
-    text-align: center;
     .icon {
-      display: block;
+      @apply block;
+
       margin: 2px auto;
       width: 20px;
       height: 20px;
@@ -34,62 +35,63 @@
     background-position: 0 -750px;
   }
   .hand .icon {
-    margin: 0 auto;
+    @apply mx-auto my-0;
+
     width: 25px;
     height: 25px;
     background-position: 0 -770px;
   }
   .camera .icon {
-    margin: 0 auto;
+    @apply mx-auto my-0;
+
     width: 25px;
     height: 25px;
     background-position: 0 -870px;
   }
   .nav-trigger .icon {
-    margin: 0 auto;
+    @apply mx-auto my-0;
+
     width: 25px;
     height: 25px;
     background-position: 0 -845px;
   }
   .zoom-pan {
-    position: relative;
+    @apply relative mx-auto overflow-visible bg-white;
-    overflow: visible;
+
     margin: 3px auto;
     width: 2px;
     height: 70px;
-    background: white;
     box-shadow: 0 1px #e50000;
     .origin {
-      position: absolute;
+      @apply absolute bg-transparent;
+
       left: -9px;
       margin-top: -4px;
       width: 20px;
       height: 8px;
-      background: transparent;
       &::after {
-        position: absolute;
+        @apply absolute  block bg-white;
+
         top: 3px;
         left: 7px;
-        display: block;
         width: 6px;
         height: 2px;
-        background: white;
         content: ' ';
       }
     }
     .indicator {
-      position: absolute;
+      @apply absolute  rounded-full bg-white;
+
       left: -3px;
       margin-top: -4px;
       width: 8px;
       height: 8px;
-      border-radius: 100%;
-      background: white;
     }
   }
 }
 .nav-previewer {
-  position: absolute;
+  @apply absolute cursor-crosshair bg-white;
+
   bottom: 30px;
   left: 45px;
   z-index: 9;
@@ -97,15 +99,10 @@
   width: 140px;
   height: 120px;
   border-radius: 0 2px 2px 0;
-  background: #ffffff;
   box-shadow: 0 0 8px rgb(0 0 0 / 20%);
   transition: -webkit-transform 0.7s 0.1s ease;
   transition: transform 0.7s 0.1s ease;
-  cursor: crosshair;
   &.grab {
-    cursor: move;
+    @apply cursor-grabbing;
-    cursor: grabbing;
-    cursor: grabbing;
-    cursor: grabbing;
   }
 }

frontend/src/components/navbar/index.vue

@@ -207,33 +207,33 @@
 
 <style scoped lang="less">
   .navbar {
-    display: flex;
+    @apply flex h-full justify-between;
-    justify-content: space-between;
+
-    height: 100%;
     background-color: var(--color-bg-3);
   }
   .left-side {
-    display: flex;
+    @apply flex items-center;
-    align-items: center;
+
     padding-left: 20px;
   }
   .center-side {
-    flex: 1;
+    @apply flex-1;
   }
   .right-side {
-    display: flex;
+    @apply flex list-none;
+
     padding-right: 20px;
-    list-style: none;
     :deep(.locale-select) {
       border-radius: 20px;
     }
     li {
-      display: flex;
+      @apply flex items-center;
-      align-items: center;
+
       padding: 0 10px;
     }
     a {
-      text-decoration: none;
+      @apply no-underline;
+
       color: var(--color-text-1);
     }
     .nav-btn {
@@ -243,7 +243,8 @@
     }
     .trigger-btn,
     .ref-btn {
-      position: absolute;
+      @apply absolute;
+
       bottom: 14px;
     }
     .trigger-btn {
@@ -255,7 +256,7 @@
 <style lang="less">
   .message-popover {
     .arco-popover-content {
-      margin-top: 0;
+      @apply mt-0;
     }
   }
 </style>

frontend/src/components/project-selection/index.vue

@@ -32,7 +32,8 @@
 <style lang="less" scoped>
   .project-selection {
     & .arco-select-view-single {
-      border: none;
+      @apply border-none;
+
       color: #323233;
       background-color: var(--color-bg-1);
     }

frontend/src/components/svg-icon/index.vue

@@ -24,7 +24,8 @@
 
 <style scoped lang="less">
   .c-icon {
-    position: relative;
+    @apply relative;
+
     width: v-bind(width);
     height: v-bind(height);
   }

frontend/src/components/tab-bar/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="tab-bar-container">
     <a-affix ref="affixRef" :offset-top="offsetTop">
-      <div class="tab-bar-box">
+      <div class="tab-bar-box pl-[20px]">
-        <div class="tab-bar-scroll">
+        <div class="tab-bar-scroll leading-[32px]">
-          <div class="tags-wrap">
+          <div class="tags-wrap h-[48px] px-0 py-[4px]">
             <tab-item v-for="(tag, index) in tabList" :key="tag.fullPath" :index="index" :item-data="tag" />
           </div>
         </div>
-        <div class="tag-bar-operation"></div>
+        <div class="tag-bar-operation h-[32px] w-[100px]"></div>
       </div>
     </a-affix>
   </div>
@@ -50,39 +50,30 @@
 
 <style scoped lang="less">
   .tab-bar-container {
-    position: relative;
+    @apply relative;
+
     background-color: var(--color-bg-1);
     .tab-bar-box {
-      display: flex;
+      @apply flex p-0;
-      padding: 0 0 0 20px;
+
       border-bottom: 1px solid var(--color-border);
       background-color: var(--color-bg-1);
       .tab-bar-scroll {
-        overflow: hidden;
+        @apply flex-1 overflow-hidden;
-        height: 32px;
-        flex: 1;
         .tags-wrap {
-          overflow-x: auto;
+          @apply overflow-x-auto whitespace-nowrap;
-          padding: 4px 0;
-          height: 48px;
-          white-space: nowrap;
           :deep(.arco-tag) {
-            display: inline-flex;
+            @apply inline-flex cursor-pointer items-center;
-            align-items: center;
+
             margin-right: 6px;
-            cursor: pointer;
             &:first-child {
               .arco-tag-close-btn {
-                display: none;
+                @apply hidden;
               }
             }
           }
         }
       }
     }
-    .tag-bar-operation {
-      width: 100px;
-      height: 32px;
-    }
   }
 </style>

frontend/src/components/tab-bar/tab-item.vue

@@ -157,7 +157,8 @@
 
 <style scoped lang="less">
   .tag-link {
-    text-decoration: none;
+    @apply no-underline;
+
     color: var(--color-text-2);
   }
   .link-activated {

frontend/src/components/theme-box/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-badge class="theme-badge" :count="theme ? 1 : 0" dot>
+  <a-badge class="theme-badge bottom-[124px] right-[70px]" :count="theme ? 1 : 0" dot>
     <a-button
       class="theme-badge-button"
       :shape="hover ? 'round' : 'circle'"
@@ -16,7 +16,7 @@
   </a-badge>
   <a-modal :visible="modalVisible" :width="900" @ok="modalVisible = false" @cancel="modalVisible = false">
     <template #title>
-      <div class="theme-box-header">
+      <div class="theme-box-header pr-[24px]">
         <span>{{ t('themeBox.installTheme') }}</span>
       </div>
     </template>
@@ -82,7 +82,7 @@
         </Empty>
       </template>
     </a-row>
-    <div class="theme-box-bottom">
+    <div class="theme-box-bottom mt-[20px]">
       <a-pagination :total="total" :current="page" :page-size="6" @change="onPageChange" />
     </div>
     <template v-if="theme" #footer>
@@ -242,39 +242,30 @@
 <style scoped lang="less">
   .theme-box {
     &-header {
-      display: flex;
+      @apply flex w-full items-center justify-between;
-      justify-content: space-between;
-      align-items: center;
-      padding-right: 24px;
-      width: 100%;
     }
     &-card {
       &-link {
-        opacity: 0;
+        @apply opacity-0;
+
         transition: opacity 100ms;
       }
       &:hover &-link {
-        opacity: 1;
+        @apply opacity-100;
       }
       :deep(.arco-card-meta-title) {
         line-height: 25px;
       }
     }
     &-bottom {
-      display: flex;
+      @apply flex justify-end;
-      justify-content: flex-end;
-      margin-top: 20px;
     }
     &-footer {
-      display: flex;
+      @apply flex items-center justify-between;
-      justify-content: space-between;
-      align-items: center;
     }
   }
   .theme-badge {
-    position: fixed;
+    @apply fixed;
-    right: 70px;
-    bottom: 124px;
     &-button {
       border: 1px solid var(--color-fill-3) !important;
       background: var(--color-bg-5) !important;

frontend/src/layout/default-layout.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout class="layout arco-reset" :class="{ mobile: appStore.hideMenu }">
-    <div v-if="navbar" class="layout-navbar">
+    <div v-if="navbar" class="layout-navbar z-[100]">
       <NavBar />
     </div>
     <a-layout>
@@ -8,7 +8,7 @@
         <a-layout-sider
           v-if="renderMenu"
           v-show="!hideMenu"
-          class="layout-sider"
+          class="layout-sider z-[99]"
           breakpoint="xl"
           :collapsed="collapsed"
           :collapsible="true"
@@ -105,42 +105,33 @@
   @nav-size-height: 56px;
   @layout-max-width: 1100px;
   .layout {
-    width: 100%;
+    @apply h-full w-full;
-    height: 100%;
   }
   .layout-navbar {
-    position: fixed;
+    @apply fixed left-0 top-0 w-full;
-    top: 0;
+
-    left: 0;
-    z-index: 100;
-    width: 100%;
     height: @nav-size-height;
   }
   .layout-sider {
-    position: fixed;
+    @apply fixed left-0 top-0 h-full shadow-none;
-    top: 0;
+
-    left: 0;
-    z-index: 99;
-    height: 100%;
     transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
     > :deep(.arco-layout-sider-children) {
-      overflow-y: hidden;
+      @apply overflow-y-hidden;
     }
   }
   .menu-wrapper {
-    overflow: auto;
+    @apply h-full overflow-auto overflow-x-hidden;
-    overflow-x: hidden;
-    height: 100%;
     :deep(.arco-menu) {
       ::-webkit-scrollbar {
         width: 12px;
         height: 4px;
       }
       ::-webkit-scrollbar-thumb {
+        @apply bg-clip-padding;
+
         border: 4px solid transparent;
-        border-radius: 7px;
         background-color: var(--color-bg-6);
-        background-clip: padding-box;
       }
       ::-webkit-scrollbar-thumb:hover {
         background-color: var(--color-bg-6);
@@ -162,9 +153,13 @@
     }
   }
   .layout-content {
-    overflow-y: hidden;
+    @apply overflow-y-hidden;
+
     min-height: 100vh;
-    background-color: var(--color-fill-2);
+    background-color: var(--color-bg-3);
     transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+    .arco-layout-content {
+      padding: 16px 0 0 16px;
+    }
   }
 </style>

frontend/src/views/api-test/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="my-container">
+  <div class="h-[100vh] bg-white px-[20px] py-[16px] pb-0">
     <div class="mb-10">表格</div>
     <ms-base-table v-bind="propsRes" v-on="propsEvent">
       <template #createTime="{ record }">
@@ -91,12 +91,3 @@
     fetchData();
   });
 </script>
-
-<style>
-  .my-container {
-    padding: 16px 20px;
-    padding-bottom: 0;
-    height: 100vh;
-    background-color: #ffffff;
-  }
-</style>

frontend/src/views/component/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="my-container">
+  <div class="h-[100vh] bg-white px-[20px] py-[16px] pb-0">
     <div>流程编辑器</div>
     <FlowEditor />
     <a-divider />
@@ -40,12 +40,3 @@
   const aceTheme = ref<ThemeType>('github_dark');
   const aceLang = ref<LangType>('javascript');
 </script>
-
-<style>
-  .my-container {
-    padding: 16px 20px;
-    padding-bottom: 0;
-    height: 100vh;
-    background-color: #ffffff;
-  }
-</style>

frontend/src/views/exception/403/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="my-container">
+  <div class="my-container h-[calc(100% - 40px)] px-[20px] pb-[20px] pt-0">
     <Breadcrumb :items="['menu.exception', 'menu.exception.403']" />
-    <div class="content">
+    <div class="content rounded-[4px]">
       <a-result class="result" status="403" :subtitle="$t('exception.result.403.description')" />
       <a-button key="back" type="primary">
         {{ $t('exception.result.403.back') }}
@@ -20,18 +20,10 @@
 
 <style scoped lang="less">
   .my-container {
-    padding: 0 20px 20px;
-    height: calc(100% - 40px);
     :deep(.content) {
-      position: relative;
+      @apply relative flex h-full flex-col items-center justify-center text-center;
-      display: flex;
+
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      border-radius: 4px;
-      text-align: center;
       background-color: var(--color-bg-1);
-      flex-direction: column;
     }
   }
 </style>

frontend/src/views/exception/404/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="my-container">
+  <div class="my-container h-[calc(100% - 40px)] px-[20px] pb-[20px] pt-0">
     <Breadcrumb :items="['menu.exception', 'menu.exception.404']" />
-    <div class="content">
+    <div class="content rounded-[4px]">
       <a-result class="result" status="404" :subtitle="$t('exception.result.404.description')"> </a-result>
       <div class="operation-row">
         <a-button key="again" style="margin-right: 16px">
@@ -25,18 +25,10 @@
 
 <style scoped lang="less">
   .my-container {
-    padding: 0 20px 20px;
-    height: calc(100% - 40px);
     :deep(.content) {
-      position: relative;
+      @apply relative flex h-full flex-col items-center justify-center text-center;
-      display: flex;
+
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      border-radius: 4px;
-      text-align: center;
       background-color: var(--color-bg-1);
-      flex-direction: column;
     }
   }
 </style>

frontend/src/views/exception/500/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="my-container">
+  <div class="my-container h-[calc(100% - 40px)] px-[20px] pb-[20px] pt-0">
     <Breadcrumb :items="['menu.exception', 'menu.exception.500']" />
-    <div class="content">
+    <div class="content rounded-[4px]">
       <a-result class="result" status="500" :subtitle="$t('exception.result.500.description')" />
       <a-button key="back" type="primary">
         {{ $t('exception.result.500.back') }}
@@ -20,18 +20,10 @@
 
 <style scoped lang="less">
   .my-container {
-    padding: 0 20px 20px;
-    height: calc(100% - 40px);
     :deep(.content) {
-      position: relative;
+      @apply relative flex h-full flex-col items-center justify-center text-center;
-      display: flex;
+
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      border-radius: 4px;
-      text-align: center;
       background-color: var(--color-bg-1);
-      flex-direction: column;
     }
   }
 </style>

frontend/src/views/login/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="my-container">
+  <div class="my-container h-[100vh] w-[100vw] min-w-[1440px]">
-    <a-row class="login-box flex flex-row">
+    <a-row class="flex h-[730px] flex-row">
       <a-col :span="11"> <loginForm /></a-col>
       <a-divider direction="vertical" />
       <a-col :span="11"> <banner /></a-col>
@@ -15,12 +15,8 @@
 
 <style lang="less" scoped>
   .my-container {
-    width: 100vw;
-    min-width: 1440px;
-    height: 100vh;
     .login-box {
       margin-top: calc(50vh - 400px);
-      height: 730px;
     }
     .arco-divider-vertical {
       height: 52em;

frontend/src/views/not-found/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div class="absolute left-[50%] top-[50%] ml-[-95px] mt-[-121px] text-center">
     <a-result class="result" status="404" :subtitle="'not found'"> </a-result>
     <div class="operation-row">
       <a-button key="back" type="primary" @click="back"> back </a-button>
@@ -16,15 +16,3 @@
     router.push({ name: 'Workplace' });
   };
 </script>
-
-<style scoped lang="less">
-  .content {
-    // padding-top: 100px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -121px;
-    margin-left: -95px;
-    text-align: center;
-  }
-</style>