--修正后的小屏按钮挤兑问题

src/views/system/config/index.vue

@@ -552,54 +552,48 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
-          <div class="button-container">
-            <a-button
-              type="primary"
-              class="primary-button"
-              @click.prevent="fnModalVisibleByEdit()"
-              v-perms:has="['system:config:add']"
-            >
-              <template #icon><PlusOutlined /></template>
-              {{ t('common.addText') }}
-            </a-button>
-            <a-button
-              type="default"
-              danger
-              class="danger-button"
-              :disabled="tableState.selectedRowKeys.length <= 0"
-              @click.prevent="fnRecordDelete()"
-              v-perms:has="['system:config:remove']"
-            >
-              <template #icon><DeleteOutlined /></template>
-              {{ t('common.deleteText') }}
-            </a-button>
-            <a-button
-              type="dashed"
-              danger
-              class="danger-button"
-              @click.prevent="fnRefreshCache"
-              v-perms:has="['system:config:remove']"
-            >
-              <template #icon><SyncOutlined /></template>
-              {{ t('views.system.config.refreshCache') }}
-            </a-button>
-            <a-button
-              type="dashed"
-              @click.prevent="fnExportList()"
-              class="dashed-button"
-              v-perms:has="['system:config:export']"
-            >
-              <template #icon><ExportOutlined /></template>
-              {{ t('common.export') }}
-            </a-button>
-          </div>
-        </a-space>
+        <div class="button-container">
+          <a-button
+            type="primary"
+            @click.prevent="fnModalVisibleByEdit()"
+            v-perms:has="['system:config:add']"
+          >
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            @click.prevent="fnRecordDelete()"
+            v-perms:has="['system:config:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            danger
+            @click.prevent="fnRefreshCache"
+            v-perms:has="['system:config:remove']"
+          >
+            <template #icon><SyncOutlined /></template>
+            {{ t('views.system.config.refreshCache') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            @click.prevent="fnExportList()"
+            v-perms:has="['system:config:export']"
+          >
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -648,7 +642,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->

src/views/system/dict/data.vue

@@ -561,52 +561,43 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
-          <div class="button-container">
-            <a-button
-              type="default"
-              class="primary-button"
-              @click.prevent="fnClose()"
-            >
-              <template #icon><CloseOutlined /></template>
-              {{ t('common.close') }}
-            </a-button>
-            <a-button
-              type="primary"
-              class="primary-button"
-              @click.prevent="fnModalVisibleByEdit()"
-              v-perms:has="['system:dict:add']"
-            >
-              <template #icon><PlusOutlined /></template>
-              {{ t('common.addText') }}
-            </a-button>
-            <a-button
-              type="default"
-              danger
-              class="danger-button"
-              :disabled="tableState.selectedRowKeys.length <= 0"
-              @click.prevent="fnRecordDelete()"
-              v-perms:has="['system:dict:remove']"
-            >
-              <template #icon><DeleteOutlined /></template>
-              {{ t('common.deleteText') }}
-            </a-button>
-            <a-button
-              type="dashed"
-              class="dashed-button"
-              @click.prevent="fnExportList()"
-              v-perms:has="['system:dict:export']"
-            >
-              <template #icon><ExportOutlined /></template>
-              {{ t('common.export') }}
-            </a-button>
-          </div>
-        </a-space>
+        <div class="button-container">
+          <a-button type="default" @click.prevent="fnClose()">
+            <template #icon><CloseOutlined /></template>
+            {{ t('common.close') }}
+          </a-button>
+          <a-button
+            type="primary"
+            @click.prevent="fnModalVisibleByEdit()"
+            v-perms:has="['system:dict:add']"
+          >
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            @click.prevent="fnRecordDelete()"
+            v-perms:has="['system:dict:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            @click.prevent="fnExportList()"
+            v-perms:has="['system:dict:export']"
+          >
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -655,7 +646,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->

src/views/system/dict/index.vue

@@ -552,63 +552,56 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
-          <div class="button-container">
-            <a-button
-              type="primary"
-              class="primary-button"
-              @click.prevent="fnModalVisibleByEdit()"
-              v-perms:has="['system:dict:add']"
-            >
-              <template #icon><PlusOutlined /></template>
-              {{ t('common.addText') }}
-            </a-button>
-            <a-button
-              type="default"
-              danger
-              class="danger-button"
-              :disabled="tableState.selectedRowKeys.length <= 0"
-              @click.prevent="fnRecordDelete()"
-              v-perms:has="['system:dict:remove']"
-            >
-              <template #icon><DeleteOutlined /></template>
-              {{ t('common.deleteText') }}
-            </a-button>
-            <a-button
-              type="default"
-              class="primary-button"
-              @click.prevent="fnDataView()"
-              v-perms:has="['system:dict:data']"
-            >
-              <template #icon><ContainerOutlined /></template>
-              {{ t('views.system.dict.dictData') }}
-            </a-button>
-            <a-button
-              type="dashed"
-              danger
-              class="danger-button"
-              @click.prevent="fnRefreshCache"
-              v-perms:has="['system:dict:remove']"
-            >
-              <template #icon><SyncOutlined /></template>
-              {{ t('views.system.dict.reload') }}
-            </a-button>
-            <a-button
-              type="dashed"
-              class="dashed-button"
-              @click.prevent="fnExportList()"
-              v-perms:has="['system:dict:export']"
-            >
-              <template #icon><ExportOutlined /></template>
-              {{ t('common.export') }}
-            </a-button>
-          </div>
-        </a-space>
+        <div class="button-container">
+          <a-button
+            type="primary"
+            @click.prevent="fnModalVisibleByEdit()"
+            v-perms:has="['system:dict:add']"
+          >
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            @click.prevent="fnRecordDelete()"
+            v-perms:has="['system:dict:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+          <a-button
+            type="default"
+            @click.prevent="fnDataView()"
+            v-perms:has="['system:dict:data']"
+          >
+            <template #icon><ContainerOutlined /></template>
+            {{ t('views.system.dict.dictData') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            danger
+            @click.prevent="fnRefreshCache"
+            v-perms:has="['system:dict:remove']"
+          >
+            <template #icon><SyncOutlined /></template>
+            {{ t('views.system.dict.reload') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            @click.prevent="fnExportList()"
+            v-perms:has="['system:dict:export']"
+          >
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -657,7 +650,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->

src/views/system/post/index.vue

@@ -491,45 +491,39 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
-          <div class="button-container">
-            <a-button
-              type="primary"
-              class="primary-button"
-              @click.prevent="fnModalVisibleByEdit()"
-              v-perms:has="['system:post:add']"
-            >
-              <template #icon><PlusOutlined /></template>
-              {{ t('common.addText') }}
-            </a-button>
-            <a-button
-              type="default"
-              danger
-              class="danger-button"
-              :disabled="tableState.selectedRowKeys.length <= 0"
-              @click.prevent="fnRecordDelete()"
-              v-perms:has="['system:post:remove']"
-            >
-              <template #icon><DeleteOutlined /></template>
-              {{ t('common.deleteText') }}
-            </a-button>
-            <a-button
-              type="dashed"
-              class="dashed-button"
-
-              @click.prevent="fnExportList()"
-              v-perms:has="['system:post:export']"
-            >
-              <template #icon><ExportOutlined /></template>
-              {{ t('common.export') }}
-            </a-button>
-          </div>
-        </a-space>
+        <div class="button-container">
+          <a-button
+            type="primary"
+            @click.prevent="fnModalVisibleByEdit()"
+            v-perms:has="['system:post:add']"
+          >
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            @click.prevent="fnRecordDelete()"
+            v-perms:has="['system:post:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            @click.prevent="fnExportList()"
+            v-perms:has="['system:post:export']"
+          >
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -578,7 +572,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->

src/views/system/role/auth-user.vue

@@ -394,43 +394,35 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
-          <div class="button-container">
-            <a-button
-              type="default"
-              class="primary-button"
-              @click.prevent="fnClose()"
-            >
-              <template #icon><CloseOutlined /></template>
-              {{ t('common.cancel') }}
-            </a-button>
-            <a-button
-              type="primary"
-              class="primary-button"
-              @click.prevent="fnModalVisibleBySelectUser()"
-              v-perms:has="['system:role:add']"
-            >
-              <template #icon><UsergroupAddOutlined /></template>
-              {{ t('views.system.role.distributeUser') }}
-            </a-button>
-            <a-button
-              type="default"
-              danger
-              class="danger-button"
-              :disabled="tableState.selectedRowKeys.length <= 0"
-              @click.prevent="fnRecordDelete('0')"
-              v-perms:has="['system:role:remove']"
-            >
-              <template #icon><UsergroupDeleteOutlined /></template>
-              {{ t('views.system.role.batchCancel') }}
-            </a-button>
-          </div>
-        </a-space>
+        <div class="button-container">
+          <a-button type="default" @click.prevent="fnClose()">
+            <template #icon><CloseOutlined /></template>
+            {{ t('common.cancel') }}
+          </a-button>
+          <a-button
+            type="primary"
+            @click.prevent="fnModalVisibleBySelectUser()"
+            v-perms:has="['system:role:add']"
+          >
+            <template #icon><UsergroupAddOutlined /></template>
+            {{ t('views.system.role.distributeUser') }}
+          </a-button>
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            @click.prevent="fnRecordDelete('0')"
+            v-perms:has="['system:role:remove']"
+          >
+            <template #icon><UsergroupDeleteOutlined /></template>
+            {{ t('views.system.role.batchCancel') }}
+          </a-button>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -479,7 +471,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->

src/views/system/role/index.vue

@@ -815,12 +815,9 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
-          <div class="button-container">
-
+        <div class="button-container">
           <a-button
             type="primary"
-            class="primary-button"
             @click.prevent="fnModalVisibleByEdit()"
             v-perms:has="['system:role:add']"
           >
@@ -830,8 +827,6 @@ onMounted(() => {
           <a-button
             type="default"
             danger
-            class="danger-button"
-
             :disabled="tableState.selectedRowKeys.length <= 0"
             @click.prevent="fnRecordDelete()"
             v-perms:has="['system:role:remove']"
@@ -847,8 +842,7 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-          </div>
-        </a-space>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -1242,7 +1236,10 @@ onMounted(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.role.createTime')" name="createTime">
+            <a-form-item
+              :label="t('views.system.role.createTime')"
+              name="createTime"
+            >
               <span v-if="+modalState.from.createTime > 0">
                 {{ parseDateToStr(+modalState.from.createTime) }}
               </span>
@@ -1251,12 +1248,18 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item  :label="t('views.system.role.roleSort')" name="roleSort">
+            <a-form-item
+              :label="t('views.system.role.roleSort')"
+              name="roleSort"
+            >
               {{ modalState.from.roleSort }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item  :label="t('views.system.role.roleStatus')" name="status">
+            <a-form-item
+              :label="t('views.system.role.roleStatus')"
+              name="status"
+            >
               <DictTag
                 :options="dict.sysNormalDisable"
                 :value="modalState.from.status"
@@ -1266,17 +1269,20 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item  :label="t('views.system.role.roleName')" name="roleName">
+            <a-form-item
+              :label="t('views.system.role.roleName')"
+              name="roleName"
+            >
               {{ modalState.from.roleName }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item  :label="t('views.system.role.roleKey')" name="roleKey">
+            <a-form-item :label="t('views.system.role.roleKey')" name="roleKey">
               {{ modalState.from.roleKey }}
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item  :label="t('views.system.role.roleMark')" name="remark">
+        <a-form-item :label="t('views.system.role.roleMark')" name="remark">
           {{ modalState.from.remark }}
         </a-form-item>
 
@@ -1299,21 +1305,21 @@ onMounted(() => {
               :checked="modalState.deptTree.expandedKeys.length > 0"
               @change="(e:any) => fnModalExpandedKeys(e.target.checked, 'dept')"
             >
-              {{t('views.system.role.openSwitch')}}
+              {{ t('views.system.role.openSwitch') }}
             </a-checkbox>
             <a-checkbox
               id="dept_2"
               :checked="modalState.from.deptIds.length > 0"
               @change="(e:any) => fnModalCheckedKeys(e.target.checked, 'dept')"
             >
-            {{t('views.system.role.selAllSwitch')}}
+              {{ t('views.system.role.selAllSwitch') }}
             </a-checkbox>
             <a-checkbox
               id="dept_1"
               :checked="modalState.from.deptCheckStrictly === '1'"
               @change="(e:any) => fnModalCheckStrictly(e.target.checked, 'dept')"
             >
-            {{t('views.system.role.relationSwitch')}}
+              {{ t('views.system.role.relationSwitch') }}
             </a-checkbox>
           </a-space>
           <a-tree

src/views/system/user/index.vue

@@ -889,53 +889,47 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
-          <div class="button-container">
-            <a-button
-              type="primary"
-              class="primary-button"
-              @click.prevent="fnModalVisibleByEdit()"
-              v-perms:has="['system:user:add']"
-            >
-              <template #icon><PlusOutlined /></template>
-              {{ t('common.addText') }}
-            </a-button>
-            <a-button
-              type="default"
-              danger
-              class="danger-button"
-              :disabled="tableState.selectedRowKeys.length <= 0"
-              @click.prevent="fnRecordDelete()"
-              v-perms:has="['system:user:remove']"
-            >
-              <template #icon><DeleteOutlined /></template>
-              {{ t('common.deleteText') }}
-            </a-button>
-            <a-button
-              type="dashed"
-              class="dashed-button"
-              @click.prevent="fnModalUploadImportOpen()"
-              v-perms:has="['system:user:import']"
-            >
-              <template #icon><ImportOutlined /></template>
-              {{ t('common.import') }}
-            </a-button>
-            <a-button
-              type="dashed"
-              class="dashed-button"
-              @click.prevent="fnExportList()"
-              v-perms:has="['system:user:export']"
-            >
-              <template #icon><ExportOutlined /></template>
-              {{ t('common.export') }}
-            </a-button>
-          </div>
-        </a-space>
+        <div class="button-container">
+          <a-button
+            type="primary"
+            @click.prevent="fnModalVisibleByEdit()"
+            v-perms:has="['system:user:add']"
+          >
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            @click.prevent="fnRecordDelete()"
+            v-perms:has="['system:user:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            @click.prevent="fnModalUploadImportOpen()"
+            v-perms:has="['system:user:import']"
+          >
+            <template #icon><ImportOutlined /></template>
+            {{ t('common.import') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            @click.prevent="fnExportList()"
+            v-perms:has="['system:user:export']"
+          >
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -984,7 +978,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->