修复当小屏时按钮显示不出问题

src/views/faultManage/active-alarm/index.vue

@@ -851,8 +851,11 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
+          <div class="button-container">
+
           <a-button
             type="primary"
+            class="primary-button"
             @click.prevent="fnCancelConfirm()"
             :disabled="state.selectedRowKeys.length <= 0"
           >
@@ -862,7 +865,7 @@ onMounted(() => {
             {{ t('views.faultManage.activeAlarm.updateConfirm') }}
           </a-button>
 
-          <a-button type="primary" @click.prevent="fnSync()">
+          <a-button type="primary" class="primary-button" @click.prevent="fnSync()">
             <template #icon>
               <ReloadOutlined />
             </template>
@@ -872,6 +875,7 @@ onMounted(() => {
           <a-button
             type="primary"
             danger
+            class="danger-button"
             @click.prevent="fnClear()"
             :disabled="state.selectedRowKeys.length !== 1"
           >
@@ -881,15 +885,16 @@ onMounted(() => {
             {{ t('views.faultManage.activeAlarm.clear') }}
           </a-button>
 
-          <a-button type="primary" @click.prevent="fnShowSet()">
+          <a-button type="primary" class="primary-button" @click.prevent="fnShowSet()">
             <template #icon> <SettingOutlined /> </template>
             {{ t('views.faultManage.activeAlarm.disPlayFilfter') }}
           </a-button>
 
-          <a-button type="primary" @click.prevent="fnExportAll()">
+          <a-button type="primary" class="primary-button"  @click.prevent="fnExportAll()">
             <template #icon> <export-outlined /> </template>
             {{ t('views.faultManage.activeAlarm.exportAll') }}
           </a-button>
+          </div>
         </a-space>
       </template>
 

src/views/monitor/job/index.vue

@@ -646,8 +646,11 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <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="['monitor:job:add']"
           >
@@ -657,6 +660,7 @@ onMounted(() => {
           <a-button
             type="default"
             danger
+            class="danger-button"
             :disabled="tableState.selectedRowKeys.length <= 0"
             @click.prevent="fnRecordDelete()"
             v-perms:has="['monitor:job:remove']"
@@ -666,6 +670,7 @@ onMounted(() => {
           </a-button>
           <a-button
             type="dashed"
+            class="dashed-button"
             @click.prevent="fnExportList()"
             v-perms:has="['monitor:job:export']"
           >
@@ -674,6 +679,7 @@ onMounted(() => {
           </a-button>
           <a-button
             type="default"
+            class="dashed-button"
             @click.prevent="fnJobLogView()"
             v-perms:has="['monitor:job:query']"
           >
@@ -683,12 +689,14 @@ onMounted(() => {
           <a-button
             type="dashed"
             danger
+            class="dashed-button"
             @click.prevent="fnResetQueueJob"
             v-perms:has="['monitor:job:remove']"
           >
             <template #icon><SyncOutlined /></template>
             {{ t('views.monitor.job.resetQueue') }}
           </a-button>
+          </div>
         </a-space>
       </template>
 

src/views/monitor/job/log.vue

@@ -492,37 +492,46 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button type="default" @click.prevent="fnClose()">
+          <div class="button-container">
-            <template #icon><CloseOutlined /></template>
+            <a-button
-            {{ t('common.close') }}
+              type="default"
-          </a-button>
+              class="primary-button"
-          <a-button
+              @click.prevent="fnClose()"
-            type="default"
+            >
-            danger
+              <template #icon><CloseOutlined /></template>
-            :disabled="tableState.selectedRowKeys.length <= 0"
+              {{ t('common.close') }}
-            @click.prevent="fnRecordDelete()"
+            </a-button>
-            v-perms:has="['monitor:job:remove']"
+            <a-button
-          >
+              type="default"
-            <template #icon><DeleteOutlined /></template>
+              danger
-            {{ t('common.deleteText') }}
+              class="danger-button"
-          </a-button>
+              :disabled="tableState.selectedRowKeys.length <= 0"
-          <a-button
+              @click.prevent="fnRecordDelete()"
-            type="dashed"
+              v-perms:has="['monitor:job:remove']"
-            danger
+            >
-            @click.prevent="fnCleanList()"
+              <template #icon><DeleteOutlined /></template>
-            v-perms:has="['monitor:job:remove']"
+              {{ t('common.deleteText') }}
-          >
+            </a-button>
-            <template #icon><DeleteOutlined /></template>
+            <a-button
-            {{ t('views.monitor.jobLog.clearText') }}
+              type="dashed"
-          </a-button>
+              danger
-          <a-button
+              class="danger-button"
-            type="dashed"
+              @click.prevent="fnCleanList()"
-            @click.prevent="fnExportList()"
+              v-perms:has="['monitor:job:remove']"
-            v-perms:has="['monitor:job:export']"
+            >
-          >
+              <template #icon><DeleteOutlined /></template>
-            <template #icon><ExportOutlined /></template>
+              {{ t('views.monitor.jobLog.clearText') }}
-            {{ t('common.export') }}
+            </a-button>
-          </a-button>
+            <a-button
+              type="dashed"
+              class="dashed-button"
+              @click.prevent="fnExportList()"
+              v-perms:has="['monitor:job:export']"
+            >
+              <template #icon><ExportOutlined /></template>
+              {{ t('common.export') }}
+            </a-button>
+          </div>
         </a-space>
       </template>
 

src/views/neUser/auth/index.vue

@@ -729,67 +729,71 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+          <div class="button-container">
-            <template #icon>
+            <a-button type="primary" class="primary-button" @click.prevent="fnModalVisibleByEdit()">
-              <PlusOutlined />
+              <template #icon>
-            </template>
+                <PlusOutlined />
-            {{ t('common.addText') }}
+              </template>
-          </a-button>
+              {{ t('common.addText') }}
+            </a-button>
 
-          <a-button type="primary" @click.prevent="fnModalVisibleByBatch(1)">
+            <a-button type="primary" class="primary-button"  @click.prevent="fnModalVisibleByBatch(1)">
-            <template #icon>
+              <template #icon>
-              <PlusOutlined />
+                <PlusOutlined />
-            </template>
+              </template>
-            {{ t('views.neUser.auth.batchAddText') }}
+              {{ t('views.neUser.auth.batchAddText') }}
-          </a-button>
+            </a-button>
-          <a-button
-            type="primary"
-            danger
-            ghost
-            @click.prevent="fnModalVisibleByBatch(0)"
-          >
-            <template #icon>
-              <DeleteOutlined />
-            </template>
-            {{ t('views.neUser.auth.batchDelText') }}
-          </a-button>
-          <a-popconfirm
-            :title="t('views.neUser.auth.loadDataConfirm')"
-            :ok-text="t('common.ok')"
-            :cancel-text="t('common.cancel')"
-            :disabled="modalState.loadDataLoading"
-            @confirm="fnLoadData"
-          >
             <a-button
-              type="dashed"
+              type="primary"
               danger
-              :disabled="modalState.loadDataLoading"
+              class="danger-button"
-              :loading="modalState.loadDataLoading"
+              ghost
+              @click.prevent="fnModalVisibleByBatch(0)"
             >
-              <template #icon><SyncOutlined /></template>
+              <template #icon>
-              {{ t('views.neUser.auth.loadData') }}
+                <DeleteOutlined />
+              </template>
+              {{ t('views.neUser.auth.batchDelText') }}
             </a-button>
-          </a-popconfirm>
+            <a-popconfirm
+              :title="t('views.neUser.auth.loadDataConfirm')"
+              :ok-text="t('common.ok')"
+              :cancel-text="t('common.cancel')"
+              :disabled="modalState.loadDataLoading"
+              @confirm="fnLoadData"
+            >
+              <a-button
+                type="dashed"
+                danger
+                class="dashed-button"
+                :disabled="modalState.loadDataLoading"
+                :loading="modalState.loadDataLoading"
+              >
+                <template #icon><SyncOutlined /></template>
+                {{ t('views.neUser.auth.loadData') }}
+              </a-button>
+            </a-popconfirm>
 
-          <a-button type="dashed" @click.prevent="fnModalUploadImportOpen">
+            <a-button  class="dashed-button" type="dashed" @click.prevent="fnModalUploadImportOpen">
-            <template #icon><ImportOutlined /></template>
+              <template #icon><ImportOutlined /></template>
-            {{ t('views.neUser.auth.import') }}
+              {{ t('views.neUser.auth.import') }}
-          </a-button>
-
-          <a-popconfirm
-            :title="t('views.neUser.auth.exportConfirm')"
-            ok-text="TXT"
-            ok-type="default"
-            @confirm="fnExportList('txt')"
-            :show-cancel="false"
-            cancel-text="CSV"
-            @cancel="fnExportList('csv')"
-          >
-            <a-button type="dashed">
-              <template #icon><ExportOutlined /></template>
-              {{ t('views.neUser.auth.export') }}
             </a-button>
-          </a-popconfirm>
+
+            <a-popconfirm
+              :title="t('views.neUser.auth.exportConfirm')"
+              ok-text="TXT"
+              ok-type="default"
+              @confirm="fnExportList('txt')"
+              :show-cancel="false"
+              cancel-text="CSV"
+              @cancel="fnExportList('csv')"
+            >
+              <a-button  class="dashed-button" type="dashed">
+                <template #icon><ExportOutlined /></template>
+                {{ t('views.neUser.auth.export') }}
+              </a-button>
+            </a-popconfirm>
+          </div>
         </a-space>
       </template>
 

src/views/neUser/pcf/index.vue

@@ -568,7 +568,8 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+          <div class="button-container">
+          <a-button type="primary" class="primary-button" @click.prevent="fnModalVisibleByEdit()">
             <template #icon>
               <PlusOutlined />
             </template>
@@ -578,6 +579,7 @@ onMounted(() => {
           <a-button
             type="primary"
             ghost
+            class="primary-button"
             @click.prevent="fnModalVisibleByBatch('add')"
           >
             <template #icon>
@@ -588,6 +590,7 @@ onMounted(() => {
           <a-button
             type="primary"
             ghost
+            class="primary-button"
             @click.prevent="fnModalVisibleByBatch('update')"
           >
             <template #icon>
@@ -599,6 +602,7 @@ onMounted(() => {
             type="primary"
             danger
             ghost
+            class="danger-button"
             @click.prevent="fnModalVisibleByBatch('delete')"
           >
             <template #icon>
@@ -607,7 +611,7 @@ onMounted(() => {
             {{ t('views.neUser.pcf.batchDelText') }}
           </a-button>
 
-          <a-button type="dashed" @click.prevent="fnModalUploadImportOpen">
+          <a-button type="dashed" class="dashed-button" @click.prevent="fnModalUploadImportOpen">
             <template #icon><ImportOutlined /></template>
             {{ t('views.neUser.pcf.import') }}
           </a-button>
@@ -620,11 +624,12 @@ onMounted(() => {
             cancel-text="CSV"
             @cancel="fnExportList('csv')"
           >
-            <a-button type="dashed">
+            <a-button type="dashed" class="dashed-button">
               <template #icon><ExportOutlined /></template>
               {{ t('views.neUser.pcf.export') }}
             </a-button>
           </a-popconfirm>
+          </div>
         </a-space>
       </template>
 

src/views/neUser/sub/index.vue

@@ -963,14 +963,15 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+          <div class="button-container">
+          <a-button type="primary"  class="primary-button" @click.prevent="fnModalVisibleByEdit()">
             <template #icon>
               <PlusOutlined />
             </template>
             {{ t('common.addText') }}
           </a-button>
 
-          <a-button type="primary" @click.prevent="fnModalVisibleByBatch(1)">
+          <a-button type="primary" class="primary-button"  @click.prevent="fnModalVisibleByBatch(1)">
             <template #icon>
               <PlusOutlined />
             </template>
@@ -980,6 +981,7 @@ onMounted(() => {
             type="primary"
             danger
             ghost
+            class="danger-button"
             @click.prevent="fnModalVisibleByBatch(0)"
           >
             <template #icon>
@@ -997,6 +999,7 @@ onMounted(() => {
             <a-button
               type="dashed"
               danger
+              class="dashed-button"
               :disabled="modalState.loadDataLoading"
               :loading="modalState.loadDataLoading"
             >
@@ -1007,7 +1010,7 @@ onMounted(() => {
             </a-button>
           </a-popconfirm>
 
-          <a-button type="dashed" @click.prevent="fnModalUploadImportOpen">
+          <a-button type="dashed" class="dashed-button" @click.prevent="fnModalUploadImportOpen">
             <template #icon>
               <ImportOutlined />
             </template>
@@ -1023,13 +1026,14 @@ onMounted(() => {
             cancel-text="CSV"
             @cancel="fnExportList('csv')"
           >
-            <a-button type="dashed">
+            <a-button type="dashed" class="dashed-button">
               <template #icon>
                 <ExportOutlined />
               </template>
               {{ t('views.neUser.sub.export') }}
             </a-button>
           </a-popconfirm>
+          </div>
         </a-space>
       </template>
 

src/views/system/config/index.vue

@@ -553,41 +553,47 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button
+          <div class="button-container">
-            type="primary"
+            <a-button
-            @click.prevent="fnModalVisibleByEdit()"
+              type="primary"
-            v-perms:has="['system:config:add']"
+              class="primary-button"
-          >
+              @click.prevent="fnModalVisibleByEdit()"
-            <template #icon><PlusOutlined /></template>
+              v-perms:has="['system:config:add']"
-            {{ t('common.addText') }}
+            >
-          </a-button>
+              <template #icon><PlusOutlined /></template>
-          <a-button
+              {{ t('common.addText') }}
-            type="default"
+            </a-button>
-            danger
+            <a-button
-            :disabled="tableState.selectedRowKeys.length <= 0"
+              type="default"
-            @click.prevent="fnRecordDelete()"
+              danger
-            v-perms:has="['system:config:remove']"
+              class="danger-button"
-          >
+              :disabled="tableState.selectedRowKeys.length <= 0"
-            <template #icon><DeleteOutlined /></template>
+              @click.prevent="fnRecordDelete()"
-            {{ t('common.deleteText') }}
+              v-perms:has="['system:config:remove']"
-          </a-button>
+            >
-          <a-button
+              <template #icon><DeleteOutlined /></template>
-            type="dashed"
+              {{ t('common.deleteText') }}
-            danger
+            </a-button>
-            @click.prevent="fnRefreshCache"
+            <a-button
-            v-perms:has="['system:config:remove']"
+              type="dashed"
-          >
+              danger
-            <template #icon><SyncOutlined /></template>
+              class="danger-button"
-            {{ t('views.system.config.refreshCache') }}
+              @click.prevent="fnRefreshCache"
-          </a-button>
+              v-perms:has="['system:config:remove']"
-          <a-button
+            >
-            type="dashed"
+              <template #icon><SyncOutlined /></template>
-            @click.prevent="fnExportList()"
+              {{ t('views.system.config.refreshCache') }}
-            v-perms:has="['system:config:export']"
+            </a-button>
-          >
+            <a-button
-            <template #icon><ExportOutlined /></template>
+              type="dashed"
-            {{ t('common.export') }}
+              @click.prevent="fnExportList()"
-          </a-button>
+              class="dashed-button"
+              v-perms:has="['system:config:export']"
+            >
+              <template #icon><ExportOutlined /></template>
+              {{ t('common.export') }}
+            </a-button>
+          </div>
         </a-space>
       </template>
 

src/views/system/dict/data.vue

@@ -562,36 +562,45 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button type="default" @click.prevent="fnClose()">
+          <div class="button-container">
-            <template #icon><CloseOutlined /></template>
+            <a-button
-            {{ t('common.close') }}
+              type="default"
-          </a-button>
+              class="primary-button"
-          <a-button
+              @click.prevent="fnClose()"
-            type="primary"
+            >
-            @click.prevent="fnModalVisibleByEdit()"
+              <template #icon><CloseOutlined /></template>
-            v-perms:has="['system:dict:add']"
+              {{ t('common.close') }}
-          >
+            </a-button>
-            <template #icon><PlusOutlined /></template>
+            <a-button
-            {{ t('common.addText') }}
+              type="primary"
-          </a-button>
+              class="primary-button"
-          <a-button
+              @click.prevent="fnModalVisibleByEdit()"
-            type="default"
+              v-perms:has="['system:dict:add']"
-            danger
+            >
-            :disabled="tableState.selectedRowKeys.length <= 0"
+              <template #icon><PlusOutlined /></template>
-            @click.prevent="fnRecordDelete()"
+              {{ t('common.addText') }}
-            v-perms:has="['system:dict:remove']"
+            </a-button>
-          >
+            <a-button
-            <template #icon><DeleteOutlined /></template>
+              type="default"
-            {{ t('common.deleteText') }}
+              danger
-          </a-button>
+              class="danger-button"
-          <a-button
+              :disabled="tableState.selectedRowKeys.length <= 0"
-            type="dashed"
+              @click.prevent="fnRecordDelete()"
-            @click.prevent="fnExportList()"
+              v-perms:has="['system:dict:remove']"
-            v-perms:has="['system:dict:export']"
+            >
-          >
+              <template #icon><DeleteOutlined /></template>
-            <template #icon><ExportOutlined /></template>
+              {{ t('common.deleteText') }}
-            {{ t('common.export') }}
+            </a-button>
-          </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>
       </template>
 

src/views/system/dict/index.vue

@@ -553,49 +553,56 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button
+          <div class="button-container">
-            type="primary"
+            <a-button
-            @click.prevent="fnModalVisibleByEdit()"
+              type="primary"
-            v-perms:has="['system:dict:add']"
+              class="primary-button"
-          >
+              @click.prevent="fnModalVisibleByEdit()"
-            <template #icon><PlusOutlined /></template>
+              v-perms:has="['system:dict:add']"
-            {{ t('common.addText') }}
+            >
-          </a-button>
+              <template #icon><PlusOutlined /></template>
-          <a-button
+              {{ t('common.addText') }}
-            type="default"
+            </a-button>
-            danger
+            <a-button
-            :disabled="tableState.selectedRowKeys.length <= 0"
+              type="default"
-            @click.prevent="fnRecordDelete()"
+              danger
-            v-perms:has="['system:dict:remove']"
+              class="danger-button"
-          >
+              :disabled="tableState.selectedRowKeys.length <= 0"
-            <template #icon><DeleteOutlined /></template>
+              @click.prevent="fnRecordDelete()"
-            {{ t('common.deleteText') }}
+              v-perms:has="['system:dict:remove']"
-          </a-button>
+            >
-          <a-button
+              <template #icon><DeleteOutlined /></template>
-            type="default"
+              {{ t('common.deleteText') }}
-            @click.prevent="fnDataView()"
+            </a-button>
-            v-perms:has="['system:dict:data']"
+            <a-button
-          >
+              type="default"
-            <template #icon><ContainerOutlined /></template>
+              class="primary-button"
-            {{ t('views.system.dict.dictData') }}
+              @click.prevent="fnDataView()"
-          </a-button>
+              v-perms:has="['system:dict:data']"
-          <a-button
+            >
-            type="dashed"
+              <template #icon><ContainerOutlined /></template>
-            danger
+              {{ t('views.system.dict.dictData') }}
-            @click.prevent="fnRefreshCache"
+            </a-button>
-            v-perms:has="['system:dict:remove']"
+            <a-button
-          >
+              type="dashed"
-            <template #icon><SyncOutlined /></template>
+              danger
-            {{ t('views.system.dict.reload') }}
+              class="danger-button"
-          </a-button>
+              @click.prevent="fnRefreshCache"
-          <a-button
+              v-perms:has="['system:dict:remove']"
-            type="dashed"
+            >
-            @click.prevent="fnExportList()"
+              <template #icon><SyncOutlined /></template>
-            v-perms:has="['system:dict:export']"
+              {{ t('views.system.dict.reload') }}
-          >
+            </a-button>
-            <template #icon><ExportOutlined /></template>
+            <a-button
-            {{ t('common.export') }}
+              type="dashed"
-          </a-button>
+              class="dashed-button"
+              @click.prevent="fnExportList()"
+              v-perms:has="['system:dict:export']"
+            >
+              <template #icon><ExportOutlined /></template>
+              {{ t('common.export') }}
+            </a-button>
+          </div>
         </a-space>
       </template>
 

src/views/system/post/index.vue

@@ -492,32 +492,38 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button
+          <div class="button-container">
-            type="primary"
+            <a-button
-            @click.prevent="fnModalVisibleByEdit()"
+              type="primary"
-            v-perms:has="['system:post:add']"
+              class="primary-button"
-          >
+              @click.prevent="fnModalVisibleByEdit()"
-            <template #icon><PlusOutlined /></template>
+              v-perms:has="['system:post:add']"
-            {{ t('common.addText') }}
+            >
-          </a-button>
+              <template #icon><PlusOutlined /></template>
-          <a-button
+              {{ t('common.addText') }}
-            type="default"
+            </a-button>
-            danger
+            <a-button
-            :disabled="tableState.selectedRowKeys.length <= 0"
+              type="default"
-            @click.prevent="fnRecordDelete()"
+              danger
-            v-perms:has="['system:post:remove']"
+              class="danger-button"
-          >
+              :disabled="tableState.selectedRowKeys.length <= 0"
-            <template #icon><DeleteOutlined /></template>
+              @click.prevent="fnRecordDelete()"
-            {{ t('common.deleteText') }}
+              v-perms:has="['system:post:remove']"
-          </a-button>
+            >
-          <a-button
+              <template #icon><DeleteOutlined /></template>
-            type="dashed"
+              {{ t('common.deleteText') }}
-            @click.prevent="fnExportList()"
+            </a-button>
-            v-perms:has="['system:post:export']"
+            <a-button
-          >
+              type="dashed"
-            <template #icon><ExportOutlined /></template>
+              class="dashed-button"
-            {{ t('common.export') }}
+
-          </a-button>
+              @click.prevent="fnExportList()"
+              v-perms:has="['system:post:export']"
+            >
+              <template #icon><ExportOutlined /></template>
+              {{ t('common.export') }}
+            </a-button>
+          </div>
         </a-space>
       </template>
 

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

@@ -395,28 +395,36 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button type="default" @click.prevent="fnClose()">
+          <div class="button-container">
-            <template #icon><CloseOutlined /></template>
+            <a-button
-            {{ t('common.cancel') }}
+              type="default"
-          </a-button>
+              class="primary-button"
-          <a-button
+              @click.prevent="fnClose()"
-            type="primary"
+            >
-            @click.prevent="fnModalVisibleBySelectUser()"
+              <template #icon><CloseOutlined /></template>
-            v-perms:has="['system:role:add']"
+              {{ t('common.cancel') }}
-          >
+            </a-button>
-            <template #icon><UsergroupAddOutlined /></template>
+            <a-button
-            {{ t('views.system.role.distributeUser') }}
+              type="primary"
-          </a-button>
+              class="primary-button"
-          <a-button
+              @click.prevent="fnModalVisibleBySelectUser()"
-            type="default"
+              v-perms:has="['system:role:add']"
-            danger
+            >
-            :disabled="tableState.selectedRowKeys.length <= 0"
+              <template #icon><UsergroupAddOutlined /></template>
-            @click.prevent="fnRecordDelete('0')"
+              {{ t('views.system.role.distributeUser') }}
-            v-perms:has="['system:role:remove']"
+            </a-button>
-          >
+            <a-button
-            <template #icon><UsergroupDeleteOutlined /></template>
+              type="default"
-            {{ t('views.system.role.batchCancel') }}
+              danger
-          </a-button>
+              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>
       </template>
 
@@ -498,7 +506,9 @@ onMounted(() => {
           <template v-if="column.key === 'userId'">
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>{{t('views.system.role.cancelGive')}}</template>
+                <template #title>{{
+                  t('views.system.role.cancelGive')
+                }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnRecordDelete(record.userId)"

src/views/system/role/index.vue

@@ -816,8 +816,11 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <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:role:add']"
           >
@@ -827,6 +830,8 @@ onMounted(() => {
           <a-button
             type="default"
             danger
+            class="danger-button"
+
             :disabled="tableState.selectedRowKeys.length <= 0"
             @click.prevent="fnRecordDelete()"
             v-perms:has="['system:role:remove']"
@@ -842,6 +847,7 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
+          </div>
         </a-space>
       </template>
 

src/views/system/user/index.vue

@@ -890,40 +890,46 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button
+          <div class="button-container">
-            type="primary"
+            <a-button
-            @click.prevent="fnModalVisibleByEdit()"
+              type="primary"
-            v-perms:has="['system:user:add']"
+              class="primary-button"
-          >
+              @click.prevent="fnModalVisibleByEdit()"
-            <template #icon><PlusOutlined /></template>
+              v-perms:has="['system:user:add']"
-            {{ t('common.addText') }}
+            >
-          </a-button>
+              <template #icon><PlusOutlined /></template>
-          <a-button
+              {{ t('common.addText') }}
-            type="default"
+            </a-button>
-            danger
+            <a-button
-            :disabled="tableState.selectedRowKeys.length <= 0"
+              type="default"
-            @click.prevent="fnRecordDelete()"
+              danger
-            v-perms:has="['system:user:remove']"
+              class="danger-button"
-          >
+              :disabled="tableState.selectedRowKeys.length <= 0"
-            <template #icon><DeleteOutlined /></template>
+              @click.prevent="fnRecordDelete()"
-            {{ t('common.deleteText') }}
+              v-perms:has="['system:user:remove']"
-          </a-button>
+            >
-          <a-button
+              <template #icon><DeleteOutlined /></template>
-            type="dashed"
+              {{ t('common.deleteText') }}
-            @click.prevent="fnModalUploadImportOpen()"
+            </a-button>
-            v-perms:has="['system:user:import']"
+            <a-button
-          >
+              type="dashed"
-            <template #icon><ImportOutlined /></template>
+              class="dashed-button"
-            {{ t('common.import') }}
+              @click.prevent="fnModalUploadImportOpen()"
-          </a-button>
+              v-perms:has="['system:user:import']"
-          <a-button
+            >
-            type="dashed"
+              <template #icon><ImportOutlined /></template>
-            @click.prevent="fnExportList()"
+              {{ t('common.import') }}
-            v-perms:has="['system:user:export']"
+            </a-button>
-          >
+            <a-button
-            <template #icon><ExportOutlined /></template>
+              type="dashed"
-            {{ t('common.export') }}
+              class="dashed-button"
-          </a-button>
+              @click.prevent="fnExportList()"
+              v-perms:has="['system:user:export']"
+            >
+              <template #icon><ExportOutlined /></template>
+              {{ t('common.export') }}
+            </a-button>
+          </div>
         </a-space>
       </template>