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

2023-12-12 11:27:27 +08:00
parent f198d2b9a2
commit d9ec9fd1e1
13 changed files with 371 additions and 286 deletions
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -553,41 +553,47 @@ onMounted(() => {
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-space :size="8" align="center">
-          <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 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>
      </template>

--- a/src/views/system/dict/data.vue
+++ b/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()">
-            <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 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>
      </template>

--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -553,49 +553,56 @@ onMounted(() => {
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-space :size="8" align="center">
-          <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 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>
      </template>

--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -492,32 +492,38 @@ onMounted(() => {
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-space :size="8" align="center">
-          <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 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>
      </template>

--- a/src/views/system/role/auth-user.vue
+++ b/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()">
-            <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 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>
      </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)"
--- a/src/views/system/role/index.vue
+++ b/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>

--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -890,40 +890,46 @@ onMounted(() => {
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-space :size="8" align="center">
-          <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 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>
      </template>