perf: standard code format in the views folder

.vscode/settings.json

@@ -33,5 +33,6 @@
   "i18n-ally.enabledParsers": ["yaml", "js"],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",
-  "i18n-ally.enabledFrameworks": ["vue"]
+  "i18n-ally.enabledFrameworks": ["vue"],
+  "iconify.excludes": ["el"]
 }

src/views/able/ant-anchor.vue

@@ -12,19 +12,25 @@ function handleAnchorClick(e, link) {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium"
+        <span class="font-medium">
-          >仿antdv锚点，采用<el-link
+          仿antdv锚点，采用
+          <el-link
             href="https://www.npmjs.com/package/@pureadmin/components"
             target="_blank"
             style="font-size: 16px; margin: 0 4px 5px"
-            >@pureadmin/components</el-link
+          >
-          >，完全兼容antdv的<el-link
+            @pureadmin/components
+          </el-link>
+          ，完全兼容antdv的
+          <el-link
             href="https://next.antdv.com/components/anchor-cn"
             target="_blank"
             style="font-size: 16px; margin: 0 4px 5px"
-            >Anchor</el-link
+          >
-          >写法</span
+            Anchor
-        >
+          </el-link>
+          写法
+        </span>
       </div>
     </template>
     <div class="w-400px">

src/views/able/ant-tabs.vue

@@ -13,19 +13,25 @@ const callback = (val: string) => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium"
+        <span class="font-medium">
-          >仿antdv标签页，采用<el-link
+          仿antdv标签页，采用
+          <el-link
             href="https://www.npmjs.com/package/@pureadmin/components"
             target="_blank"
             style="font-size: 16px; margin: 0 4px 5px"
-            >@pureadmin/components</el-link
+          >
-          >，完全兼容antdv的<el-link
+            @pureadmin/components
+          </el-link>
+          ，完全兼容antdv的
+          <el-link
             href="https://next.antdv.com/components/tabs-cn"
             target="_blank"
             style="font-size: 16px; margin: 0 4px 5px"
-            >Tabs</el-link
+          >
-          >写法</span
+            Tabs
-        >
+          </el-link>
+          写法
+        </span>
       </div>
     </template>
     <el-radio-group v-model="mode" size="small" class="mb-2">

src/views/able/ant-treeSelect.vue

@@ -122,19 +122,25 @@ const onLoadData = treeNode => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium"
+        <span class="font-medium">
-          >仿antdv树选择，采用<el-link
+          仿antdv树选择，采用
+          <el-link
             href="https://www.npmjs.com/package/@pureadmin/components"
             target="_blank"
             style="font-size: 16px; margin: 0 4px 5px"
-            >@pureadmin/components</el-link
+          >
-          >，完全兼容antdv的<el-link
+            @pureadmin/components
+          </el-link>
+          ，完全兼容antdv的
+          <el-link
             href="https://next.antdv.com/components/tree-select-cn"
             target="_blank"
             style="font-size: 16px; margin: 0 4px 5px"
-            >TreeSelect</el-link
+          >
-          >写法</span
+            TreeSelect
-        >
+          </el-link>
+          写法
+        </span>
       </div>
     </template>
     <div class="flex justify-around flex-wrap">
@@ -171,9 +177,9 @@ const onLoadData = treeNode => {
           :max-tag-count="10"
         >
           <template #title="{ title, value }">
-            <span v-if="value === '0-0-1-0'" style="color: #1890ff">{{
+            <span v-if="value === '0-0-1-0'" style="color: #1890ff">
-              title
+              {{ title }}
-            }}</span>
+            </span>
             <template v-else>{{ title }}</template>
           </template>
         </TreeSelect>

src/views/able/barcode.vue

@@ -30,12 +30,15 @@ const barcodes = [
     <el-card>
       <template #header>
         <div class="font-medium">
-          条形码（基于<el-link
+          条形码（基于
+          <el-link
             href="https://lindell.me/JsBarcode/"
             target="_blank"
             style="font-size: 16px; margin: 0 5px 4px 0"
-            >JsBarcode</el-link
+          >
-          >生成）
+            JsBarcode
+          </el-link>
+          生成）
         </div>
       </template>
       <el-row :gutter="12">

src/views/able/cascader.vue

@@ -36,12 +36,13 @@ const handleChange = value => {
           <div class="leading-10">
             <div>绑定值：{{ selectedOptions1 }}</div>
             <div>
-              区域码转汉字：{{ CodeToText[selectedOptions1[0]] }},{{
+              区域码转汉字：
-                CodeToText[selectedOptions1[1]]
+              {{ CodeToText[selectedOptions1[0]] }},
-              }}
+              {{ CodeToText[selectedOptions1[1]] }}
             </div>
             <div>
-              汉字转区域码：{{
+              汉字转区域码：
+              {{
                 convertTextToCode(
                   CodeToText[selectedOptions1[0]],
                   CodeToText[selectedOptions1[1]]
@@ -64,12 +65,13 @@ const handleChange = value => {
           <div class="leading-10">
             <div>绑定值：{{ selectedOptions3 }}</div>
             <div>
-              区域码转汉字：{{ CodeToText[selectedOptions3[0]] }},{{
+              区域码转汉字：
-                CodeToText[selectedOptions3[1]]
+              {{ CodeToText[selectedOptions3[0]] }},
-              }}
+              {{ CodeToText[selectedOptions3[1]] }}
             </div>
             <div>
-              汉字转区域码：{{
+              汉字转区域码：
+              {{
                 convertTextToCode(
                   CodeToText[selectedOptions3[0]],
                   CodeToText[selectedOptions3[1]]
@@ -92,12 +94,14 @@ const handleChange = value => {
           <div class="leading-10">
             <div>绑定值：{{ selectedOptions2 }}</div>
             <div>
-              区域码转汉字：{{ CodeToText[selectedOptions2[0]] }},{{
+              区域码转汉字：
-                CodeToText[selectedOptions2[1]]
+              {{ CodeToText[selectedOptions2[0]] }},
-              }},{{ CodeToText[selectedOptions2[2]] }}
+              {{ CodeToText[selectedOptions2[1]] }},
+              {{ CodeToText[selectedOptions2[2]] }}
             </div>
             <div>
-              汉字转区域码：{{
+              汉字转区域码：
+              {{
                 convertTextToCode(
                   CodeToText[selectedOptions2[0]],
                   CodeToText[selectedOptions2[1]],
@@ -121,12 +125,14 @@ const handleChange = value => {
           <div class="leading-10">
             <div>绑定值：{{ selectedOptions4 }}</div>
             <div>
-              区域码转汉字：{{ CodeToText[selectedOptions4[0]] }},{{
+              区域码转汉字：
-                CodeToText[selectedOptions4[1]]
+              {{ CodeToText[selectedOptions4[0]] }},
-              }},{{ CodeToText[selectedOptions4[2]] }}
+              {{ CodeToText[selectedOptions4[1]] }},
+              {{ CodeToText[selectedOptions4[2]] }}
             </div>
             <div>
-              汉字转区域码：{{
+              汉字转区域码：
+              {{
                 convertTextToCode(
                   CodeToText[selectedOptions4[0]],
                   CodeToText[selectedOptions4[1]],

src/views/able/debounce.vue

@@ -27,12 +27,12 @@ const throttleClick = useThrottleFn(handle, 1000, false);
         所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
         秒内又触发了事件，则会重新计算函数执行时间。
       </div>
-      <el-button @click="immediateDebounce"
+      <el-button @click="immediateDebounce">
-        >连续点击我，只会执行最后一次点击事件，立即执行</el-button
+        连续点击我，只会执行最后一次点击事件，立即执行
-      >
+      </el-button>
-      <el-button @click="debounceClick"
+      <el-button @click="debounceClick">
-        >连续点击我，只会执行最后一次点击事件，延后执行</el-button
+        连续点击我，只会执行最后一次点击事件，延后执行
-      >
+      </el-button>
     </el-card>
     <el-card>
       <template #header>
@@ -42,9 +42,9 @@ const throttleClick = useThrottleFn(handle, 1000, false);
         所谓节流，就是指连续触发事件但是在 n
         秒中只执行一次函数。节流会稀释函数的执行频率。
       </div>
-      <el-button @click="throttleClick"
+      <el-button @click="throttleClick">
-        >连续点击我，每一秒只会执行一次点击事件</el-button
+        连续点击我，每一秒只会执行一次点击事件
-      >
+      </el-button>
     </el-card>
   </div>
 </template>

src/views/able/menu-tree.vue

@@ -48,16 +48,18 @@ const filterMethod = (query: string, node: treeNode) => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium"
+        <span class="font-medium">
-          >菜单树结构（采用element-plus的
+          菜单树结构（采用element-plus的
           <el-link
             href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
             target="_blank"
             :icon="useRenderIcon('node-tree')"
             style="font-size: 16px; margin: 0 5px 4px 0"
-            >Tree V2</el-link
+          >
-          >组件并支持国际化）</span
+            Tree V2
-        >
+          </el-link>
+          组件并支持国际化）
+        </span>
       </div>
     </template>
     <el-input

src/views/able/qrcode.vue

@@ -23,12 +23,15 @@ const disabledClick = () => {
     <el-card>
       <template #header>
         <div class="font-medium">
-          二维码（基于<el-link
+          二维码（基于
+          <el-link
             href="https://github.com/soldair/node-qrcode"
             target="_blank"
             style="font-size: 16px; margin: 0 5px 4px 0"
-            >qrcode</el-link
+          >
-          >生成）
+            qrcode
+          </el-link>
+          生成）
         </div>
       </template>
       <el-row :gutter="20" justify="space-between">

src/views/able/swiper.vue

@@ -102,12 +102,15 @@ const swiperExample: SwiperExample[] = [
   <el-card>
     <template #header>
       <div class="font-medium">
-        Swiper插件（<el-link
+        Swiper插件（
+        <el-link
           href="https://github.com/nolimits4web/swiper"
           target="_blank"
           style="font-size: 16px; margin: 0 5px 4px 0"
-          >github地址</el-link
+        >
-        >）
+          github地址
+        </el-link>
+        ）
       </div>
     </template>
     <el-row :gutter="10">

src/views/able/watermark.vue

@@ -14,19 +14,19 @@ const { setWatermark, clear } = useWatermark();
         <span class="font-medium">页面水印功能</span>
       </div>
     </template>
-    <span>请输入要创建水印的值：</span
+    <span> 请输入要创建水印的值：</span>
-    ><el-input
+    <el-input
       class="mb-4 mr-4"
       style="width: 200px"
       v-model="value"
       clearable
     />
-    <span>请选择要创建水印的颜色：</span
+    <span>请选择要创建水印的颜色：</span>
-    ><el-color-picker v-model="color" show-alpha />
+    <el-color-picker v-model="color" show-alpha />
     <br />
-    <el-button @click="setWatermark(value, { fillStyle: color })"
+    <el-button @click="setWatermark(value, { fillStyle: color })">
-      >创建</el-button
+      创建
-    >
+    </el-button>
     <el-button @click="clear">清除</el-button>
   </el-card>
 </template>

src/views/about/index.vue

@@ -70,11 +70,11 @@ Object.keys(devDependencies).forEach(key => {
           </a>
         </el-descriptions-item>
         <el-descriptions-item label="QQ交流群" label-align="left" align="left">
-          <a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank"
+          <a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank">
-            ><span style="color: var(--el-color-primary)"
+            <span style="color: var(--el-color-primary)">
-              >点击链接加入群聊【Pure Admin】</span
+              点击链接加入群聊【Pure Admin】
-            ></a
+            </span>
-          >
+          </a>
         </el-descriptions-item>
       </el-descriptions>
     </el-card>

src/views/components/contextmenu/menuDynamic.vue

@@ -7,20 +7,21 @@
 
     <v-contextmenu ref="contextmenu">
       <v-contextmenu-group title="操作">
-        <v-contextmenu-item :hide-on-click="false" @click="extra.push('item')"
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('item')">
-          >添加菜单</v-contextmenu-item
+          添加菜单
-        >
+        </v-contextmenu-item>
-        <v-contextmenu-item :hide-on-click="false" @click="extra.push('group')"
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('group')">
-          >添加菜单组</v-contextmenu-item
+          添加菜单组
-        >
+        </v-contextmenu-item>
         <v-contextmenu-item
           :hide-on-click="false"
           @click="extra.push('submenu')"
-          >添加子菜单</v-contextmenu-item
-        >
-        <v-contextmenu-item :hide-on-click="false" @click="extra.pop()"
-          >删除</v-contextmenu-item
         >
+          添加子菜单
+        </v-contextmenu-item>
+        <v-contextmenu-item :hide-on-click="false" @click="extra.pop()">
+          删除
+        </v-contextmenu-item>
       </v-contextmenu-group>
 
       <template v-for="(item, index) of extra" :key="index">

src/views/components/draggable/index.vue

@@ -51,15 +51,17 @@ onMounted(() => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span
+        <span>
-          >拖拽组件，采用开源的<el-link
+          拖拽组件，采用开源的
+          <el-link
             href="https://sortablejs.github.io/vue.draggable.next/#/simple"
             target="_blank"
             :icon="useRenderIcon('rank')"
             style="font-size: 16px; margin: 0 4px 5px"
-            >vuedraggable</el-link
+          >
-          ></span
+            vuedraggable
-        >
+          </el-link>
+        </span>
       </div>
     </template>
     <div class="drag-container">

src/views/components/seamless-scroll/index.vue

@@ -56,8 +56,9 @@ function changeDirection(val) {
           <el-button class="button" type="text" @click="changeDirection('top')">
             <span
               :style="{ color: classOption.direction === 'top' ? 'red' : '' }"
-              >向上滚动</span
             >
+              向上滚动
+            </span>
           </el-button>
           <el-button
             class="button"
@@ -68,8 +69,9 @@ function changeDirection(val) {
               :style="{
                 color: classOption.direction === 'bottom' ? 'red' : ''
               }"
-              >向下滚动</span
             >
+              向下滚动
+            </span>
           </el-button>
           <el-button
             class="button"
@@ -78,8 +80,9 @@ function changeDirection(val) {
           >
             <span
               :style="{ color: classOption.direction === 'left' ? 'red' : '' }"
-              >向左滚动</span
             >
+              向左滚动
+            </span>
           </el-button>
           <el-button
             class="button"
@@ -88,8 +91,9 @@ function changeDirection(val) {
           >
             <span
               :style="{ color: classOption.direction === 'right' ? 'red' : '' }"
-              >向右滚动</span
             >
+              向右滚动
+            </span>
           </el-button>
         </div>
       </template>

src/views/components/video/index.vue

@@ -29,14 +29,16 @@ onMounted(() => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium"
+        <span class="font-medium">
-          >视频组件，采用开源的<el-link
+          视频组件，采用开源的
+          <el-link
             href="https://v2.h5player.bytedance.com"
             target="_blank"
             :icon="useRenderIcon('video-play')"
             style="font-size: 16px; margin: 0 4px 5px"
-            >西瓜播放器</el-link
+          >
-          ></span
+            西瓜播放器
+          </el-link></span
         >
       </div>
     </template>

src/views/editor/index.vue

@@ -24,7 +24,7 @@ onMounted(() => {
   }, 1500);
 });
 
-const toolbarConfig = { excludeKeys: "fullScreen" };
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
 const editorConfig = { placeholder: "请输入内容..." };
 
 // 组件销毁时，也及时销毁编辑器
@@ -43,14 +43,16 @@ const handleCreated = editor => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium"
+        <span class="font-medium">
-          >编辑器组件，采用开源的<el-link
+          编辑器组件，采用开源的
+          <el-link
             href="https://www.wangeditor.com"
             target="_blank"
             :icon="useRenderIcon('edit')"
             style="font-size: 16px; margin: 0 4px 5px"
-            >wangeditor</el-link
+          >
-          ></span
+            wangeditor
+          </el-link></span
         >
       </div>
     </template>

src/views/error/403.vue

@@ -55,8 +55,9 @@ import noAccess from "/@/assets/status/403.svg?component";
             delay: 500
           }
         }"
-        >返回首页</el-button
       >
+        返回首页
+      </el-button>
     </div>
   </div>
 </template>

src/views/error/404.vue

@@ -55,8 +55,9 @@ import noExist from "/@/assets/status/404.svg?component";
             delay: 500
           }
         }"
-        >返回首页</el-button
       >
+        返回首页
+      </el-button>
     </div>
   </div>
 </template>

src/views/error/500.vue

@@ -55,8 +55,9 @@ import noServer from "/@/assets/status/500.svg?component";
             delay: 500
           }
         }"
-        >返回首页</el-button
       >
+        返回首页
+      </el-button>
     </div>
   </div>
 </template>

src/views/flow-chart/index.vue

@@ -62,15 +62,17 @@ onMounted(() => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium"
+        <span class="font-medium">
-          >流程图组件，采用开源的<el-link
+          流程图组件，采用开源的
+          <el-link
             href="http://logic-flow.org/"
             target="_blank"
             :icon="useRenderIcon('set-up')"
             style="font-size: 16px; margin: 0 4px 5px"
-            >LogicFlow</el-link
+          >
-          ></span
+            LogicFlow
-        >
+          </el-link>
+        </span>
       </div>
     </template>
     <div class="logic-flow-view">

src/views/guide/index.vue

@@ -68,9 +68,9 @@ const guide = () => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium"
+        <span class="font-medium">
-          >引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能</span
+          引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能
-        >
+        </span>
       </div>
     </template>
     <el-button

src/views/list/card/components/Card.vue

@@ -73,12 +73,12 @@ const cardLogoClass = computed(() => [
             <IconifyIconOffline icon="more-vertical" class="icon-more" />
             <template #dropdown>
               <el-dropdown-menu :disabled="!product.isSetup">
-                <el-dropdown-item @click="handleClickManage(product)"
+                <el-dropdown-item @click="handleClickManage(product)">
-                  >管理</el-dropdown-item
+                  管理
-                >
+                </el-dropdown-item>
-                <el-dropdown-item @click="handleClickDelete(product)"
+                <el-dropdown-item @click="handleClickDelete(product)">
-                  >删除</el-dropdown-item
+                  删除
-                >
+                </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>

src/views/list/card/components/DialogForm.vue

@@ -139,9 +139,9 @@ const rules = {
     </el-form>
     <template #footer>
       <el-button @click="closeDialog">取消</el-button>
-      <el-button type="primary" @click="submitForm(ruleFormRef)"
+      <el-button type="primary" @click="submitForm(ruleFormRef)">
-        >确定</el-button
+        确定
-      >
+      </el-button>
     </template>
   </el-dialog>
 </template>

src/views/list/card/index.vue

@@ -97,9 +97,9 @@ const handleManageProduct = product => {
 <template>
   <div class="main">
     <div class="w-full flex justify-between mb-4">
-      <el-button :icon="useRenderIcon('add')" @click="formDialogVisible = true"
+      <el-button :icon="useRenderIcon('add')" @click="formDialogVisible = true">
-        >新建产品</el-button
+        新建产品
-      >
+      </el-button>
       <el-input
         style="width: 300px"
         v-model="searchValue"

src/views/permission/page/index.vue

@@ -37,15 +37,16 @@ function changRole() {
           <span style="font-size: 26px">{{ purview }}</span>
           <p style="color: #ffa500">
             查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
-          </p></span
+          </p>
-        >
+        </span>
       </div>
     </template>
     <el-button
       type="primary"
       @click="changRole"
       :icon="useRenderIcon('user', { color: '#fff' })"
-      >切换角色</el-button
     >
+      切换角色
+    </el-button>
   </el-card>
 </template>

src/views/result/fail.vue

@@ -35,13 +35,15 @@
             href="javascript:void(0);"
             class="flex items-center"
             style="color: var(--el-color-primary)"
-            >立即解冻
+          >
+            立即解冻
             <IconifyIconOffline
               icon="arrow-right-s-line"
               color="var(--el-color-primary)"
               width="18px"
               height="18px"
-          /></a>
+            />
+          </a>
         </span>
       </el-descriptions-item>
       <el-descriptions-item>
@@ -57,13 +59,15 @@
             href="javascript:void(0);"
             class="flex items-center"
             style="color: var(--el-color-primary)"
-            >立即升级
+          >
+            立即升级
             <IconifyIconOffline
               icon="arrow-right-s-line"
               color="var(--el-color-primary)"
               width="18px"
               height="18px"
-          /></a>
+            />
+          </a>
         </span>
       </el-descriptions-item>
     </el-descriptions>

src/views/result/success.vue

@@ -47,7 +47,8 @@ const { lastBuildTime } = __APP_INFO__;
                 aria-label="dingding"
                 class="anticon anticon-dingding cursor-pointer flex items-center cursor-pointer"
                 style="color: rgb(0, 160, 233); margin-left: 8px"
-                ><svg
+              >
+                <svg
                   viewBox="64 64 896 896"
                   focusable="false"
                   data-icon="dingding"

src/views/system/dict/config.vue

@@ -106,14 +106,16 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
                 type="text"
                 icon="fa fa-pencil-square-o"
                 @click="editConfig(row)"
-                >编辑</vxe-button
               >
+                编辑
+              </vxe-button>
               <vxe-button
                 type="text"
                 icon="fa fa-trash-o"
                 @click="delConfig(row)"
-                >删除</vxe-button
               >
+                删除
+              </vxe-button>
             </template>
           </vxe-table-column>
         </vxe-table>
@@ -140,9 +142,9 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
                 :indeterminate="configData.isIndeterminate"
                 @change="changeAllEvent"
               />
-              <span class="select-count"
+              <span class="select-count">
-                >已选中{{ configData.selectRecords.length }}条</span
+                已选中{{ configData.selectRecords.length }}条
-              >
+              </span>
               <vxe-button size="small">{{ t("buttons.hsdelete") }}</vxe-button>
             </span>
           </template>

src/views/system/dict/index.vue

@@ -217,24 +217,23 @@ function handleClose() {
         />
       </template>
       <template #tools>
-        <vxe-button
+        <vxe-button icon="fa fa-plus-square-o" status="primary" @click="onAdd">
-          icon="fa fa-plus-square-o"
+          {{ t("buttons.hsadd") }}
-          status="primary"
+        </vxe-button>
-          @click="onAdd"
-          >{{ t("buttons.hsadd") }}</vxe-button
-        >
         <vxe-button
           icon="fa fa-folder-open-o"
           status="primary"
           @click="$refs.xTree.setAllTreeExpand(true)"
-          >{{ t("buttons.hsexpendAll") }}</vxe-button
         >
+          {{ t("buttons.hsexpendAll") }}
+        </vxe-button>
         <vxe-button
           icon="fa fa-folder-o"
           status="primary"
           @click="$refs.xTree.clearTreeExpand()"
-          >{{ t("buttons.hscollapseAll") }}</vxe-button
         >
+          {{ t("buttons.hscollapseAll") }}
+        </vxe-button>
       </template>
     </vxe-toolbar>
 
@@ -269,24 +268,27 @@ function handleClose() {
             type="text"
             icon="fa fa-pencil-square-o"
             @click="onEdit(row)"
-            >编辑</vxe-button
           >
+            编辑
+          </vxe-button>
           <vxe-button
             type="text"
             icon="fa fa-plus-square-o"
             @click="onAddChild(row)"
-            >新增子类型</vxe-button
           >
+            新增子类型
+          </vxe-button>
           <vxe-button
             v-show="row.model"
             type="text"
             icon="fa fa-cog"
             @click="onDeploy(row)"
-            >字典配置</vxe-button
-          >
-          <vxe-button type="text" icon="fa fa-trash-o" @click="confirmEvent"
-            >删除</vxe-button
           >
+            字典配置
+          </vxe-button>
+          <vxe-button type="text" icon="fa fa-trash-o" @click="confirmEvent">
+            删除
+          </vxe-button>
         </template>
       </vxe-table-column>
     </vxe-table>

src/views/welcome/index.vue

@@ -89,9 +89,9 @@ const openDepot = (): void => {
       >
         <el-card style="height: 360px">
           <template #header>
-            <span style="font-size: 16px; font-weight: 500"
+            <span style="font-size: 16px; font-weight: 500">
-              >GitHub滚动信息</span
+              GitHub滚动信息
-            >
+            </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
@@ -123,9 +123,9 @@ const openDepot = (): void => {
       >
         <el-card>
           <template #header>
-            <span style="font-size: 16px; font-weight: 500"
+            <span style="font-size: 16px; font-weight: 500">
-              >GitHub饼图信息</span
+              GitHub饼图信息
-            >
+            </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
@@ -157,9 +157,9 @@ const openDepot = (): void => {
       >
         <el-card>
           <template #header>
-            <span style="font-size: 16px; font-weight: 500"
+            <span style="font-size: 16px; font-weight: 500">
-              >GitHub折线图信息</span
+              GitHub折线图信息
-            >
+            </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
@@ -191,9 +191,9 @@ const openDepot = (): void => {
       >
         <el-card>
           <template #header>
-            <span style="font-size: 16px; font-weight: 500"
+            <span style="font-size: 16px; font-weight: 500">
-              >GitHub柱状图信息</span
+              GitHub柱状图信息
-            >
+            </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>