调整为按需加载，element样式调整为皮肤模式，不再使用全局变量覆盖。 (#1349)

* 调整element为自动按需引入，减少打包体积。

* 调整element样式变更为变量模式不再使用全局css覆盖

* 修改element自动化模板适配element皮肤变量模式

---------

Co-authored-by: piexlmax<303176530@qq.com>

web/src/view/superAdmin/menu/menu.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="small" type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
+        <el-button type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
       </div>
 
       <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
@@ -36,21 +36,19 @@
         <el-table-column align="left" fixed="right" label="操作" width="300">
           <template #default="scope">
             <el-button
-              size="small"
               type="primary"
               link
               icon="plus"
               @click="addMenu(scope.row.ID)"
             >添加子菜单</el-button>
             <el-button
-              size="small"
               type="primary"
               link
               icon="edit"
               @click="editMenu(scope.row.ID)"
             >编辑</el-button>
             <el-button
-              size="small"
+
               type="primary"
               link
               icon="delete"
@@ -81,10 +79,10 @@
         </el-form-item>
         <el-form-item prop="path" style="width:30%">
           <template #label>
-            <div style="display:inline-flex">
-              路由Path
-              <el-checkbox v-model="checkFlag" style="float:right;margin-left:20px;">添加参数</el-checkbox>
-            </div>
+            <span style="display: inline-flex;align-items: center;">
+              <span>路由Path</span>
+              <el-checkbox v-model="checkFlag" style="margin-left:12px;height: auto">添加参数</el-checkbox>
+            </span>
           </template>
 
           <el-input
@@ -113,7 +111,7 @@
         </el-form-item>
         <el-form-item label="文件路径" prop="component" style="width:60%">
           <el-input v-model="form.component" autocomplete="off" placeholder="页面:view/xxx/xx.vue 插件:plugin/xx/xx.vue" @blur="fmtComponent" />
-          <span style="font-size:12px;margin-right:12px;">如果菜单包含子菜单，请创建router-view二级路由页面或者</span><el-button style="margin-top:4px" size="small" @click="form.component = 'view/routerHolder.vue'">点我设置</el-button>
+          <span style="font-size:12px;margin-right:12px;">如果菜单包含子菜单，请创建router-view二级路由页面或者</span><el-button style="margin-top:4px" @click="form.component = 'view/routerHolder.vue'">点我设置</el-button>
         </el-form-item>
         <el-form-item label="展示名称" prop="meta.title" style="width:30%">
           <el-input v-model="form.meta.title" autocomplete="off" />
@@ -165,12 +163,11 @@
       </el-form>
       <div>
         <el-button
-          size="small"
           type="primary"
           icon="edit"
           @click="addParameter(form)"
         >新增菜单参数</el-button>
-        <el-table :data="form.parameters" style="width: 100%">
+        <el-table :data="form.parameters" style="width: 100%;margin-top: 12px;">
           <el-table-column align="left" prop="type" label="参数类型" width="180">
             <template #default="scope">
               <el-select v-model="scope.row.type" placeholder="请选择">
@@ -198,7 +195,7 @@
               <div>
                 <el-button
                   type="danger"
-                  size="small"
+
                   icon="delete"
                   @click="deleteParameter(form.parameters,scope.$index)"
                 >删除</el-button>
@@ -209,12 +206,11 @@
 
         <el-button
           style="margin-top:12px"
-          size="small"
           type="primary"
           icon="edit"
           @click="addBtn(form)"
         >新增可控按钮</el-button>
-        <el-table :data="form.menuBtn" style="width: 100%">
+        <el-table :data="form.menuBtn" style="width: 100%;margin-top: 12px;">
           <el-table-column align="left" prop="name" label="按钮名称" width="180">
             <template #default="scope">
               <div>
@@ -234,7 +230,7 @@
               <div>
                 <el-button
                   type="danger"
-                  size="small"
+
                   icon="delete"
                   @click="deleteBtn(form.menuBtn,scope.$index)"
                 >删除</el-button>
@@ -245,8 +241,8 @@
       </div>
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="small" @click="closeDialog">取 消</el-button>
-          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+          <el-button type="primary" @click="enterDialog">确 定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -336,7 +332,6 @@ const deleteBtn = async(btns, index) => {
   const res = await canRemoveAuthorityBtnApi({ id: btn.ID })
   if (res.code === 0) {
     btns.splice(index, 1)
-    return
   }
 }