From d47c2020d384e930fdff5ad4dc6bcf56c3375b9f Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 29 Nov 2022 20:41:02 +0800
Subject: [PATCH] refator: button

---
 .../src/hooks/web/useVxeGrid.ts               |  2 +-
 .../views/Profile/components/BasicInfo.vue    |  4 +--
 .../src/views/infra/apiAccessLog/index.vue    |  2 +-
 .../src/views/infra/apiErrorLog/index.vue     |  2 +-
 .../src/views/infra/config/index.vue          | 35 +++++++++----------
 .../src/views/infra/fileList/index.vue        | 16 +++++----
 .../src/views/infra/job/JobLog.vue            |  2 +-
 .../src/views/infra/redis/index.vue           | 32 ++++++++---------
 .../src/views/system/user/index.vue           |  5 +--
 9 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts b/yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts
index 475aeab98..89203c754 100644
--- a/yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts
+++ b/yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts
@@ -44,7 +44,7 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
   /**
    * grid options 初始化
    */
-  const gridOptions = reactive<VxeGridProps>({
+  const gridOptions = reactive<VxeGridProps<any>>({
     loading: true,
     size: currentSize as any,
     height: 730, // 1080高度
diff --git a/yudao-ui-admin-vue3/src/views/Profile/components/BasicInfo.vue b/yudao-ui-admin-vue3/src/views/Profile/components/BasicInfo.vue
index 0d223e40d..b67c17b90 100644
--- a/yudao-ui-admin-vue3/src/views/Profile/components/BasicInfo.vue
+++ b/yudao-ui-admin-vue3/src/views/Profile/components/BasicInfo.vue
@@ -7,8 +7,8 @@
       </el-radio-group>
     </template>
   </Form>
-  <el-button type="primary" @click="submit()">{{ t('common.save') }}</el-button>
-  <el-button type="danger" @click="init()">{{ t('common.reset') }}</el-button>
+  <XButton :title="t('common.save')" @click="submit()" />
+  <XButton type="danger" :title="t('common.reset')" @click="init()" />
 </template>
 <script setup lang="ts">
 import { reactive, onMounted, unref, ref } from 'vue'
diff --git a/yudao-ui-admin-vue3/src/views/infra/apiAccessLog/index.vue b/yudao-ui-admin-vue3/src/views/infra/apiAccessLog/index.vue
index 2ddcffe8c..a5885d352 100644
--- a/yudao-ui-admin-vue3/src/views/infra/apiAccessLog/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/apiAccessLog/index.vue
@@ -31,7 +31,7 @@
     </Descriptions>
     <!-- 操作按钮 -->
     <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+      <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
   </XModal>
 </template>
diff --git a/yudao-ui-admin-vue3/src/views/infra/apiErrorLog/index.vue b/yudao-ui-admin-vue3/src/views/infra/apiErrorLog/index.vue
index bcd34000a..2dd547ad0 100644
--- a/yudao-ui-admin-vue3/src/views/infra/apiErrorLog/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/apiErrorLog/index.vue
@@ -47,7 +47,7 @@
     <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
     <!-- 操作按钮 -->
     <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+      <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
   </XModal>
 </template>
diff --git a/yudao-ui-admin-vue3/src/views/infra/config/index.vue b/yudao-ui-admin-vue3/src/views/infra/config/index.vue
index f9640c341..50a067fcb 100644
--- a/yudao-ui-admin-vue3/src/views/infra/config/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/config/index.vue
@@ -24,30 +24,27 @@
         <span>{{ row.visible ? '是' : '否' }} </span>
       </template>
       <template #actionbtns_default="{ row }">
-        <el-button
-          link
-          type="primary"
+        <!-- 操作：修改 -->
+        <XTextButton
+          preIcon="ep:edit"
+          :title="t('action.edit')"
           v-hasPermi="['infra:config:update']"
           @click="handleUpdate(row.id)"
-        >
-          <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['infra:config:update']"
+        />
+        <!-- 操作：详情 -->
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['infra:config:query']"
           @click="handleDetail(row.id)"
-        >
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
+        />
+        <!-- 操作：删除 -->
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.del')"
           v-hasPermi="['infra:config:delete']"
           @click="handleDelete(row.id)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
-        </el-button>
+        />
       </template>
     </vxe-grid>
   </ContentWrap>
diff --git a/yudao-ui-admin-vue3/src/views/infra/fileList/index.vue b/yudao-ui-admin-vue3/src/views/infra/fileList/index.vue
index 6b1296486..5b3baf297 100644
--- a/yudao-ui-admin-vue3/src/views/infra/fileList/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/fileList/index.vue
@@ -42,7 +42,7 @@
     </Descriptions>
     <!-- 操作按钮 -->
     <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+      <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
   </XModal>
   <XModal v-model="uploadDialogVisible" :title="uploadDialogTitle">
@@ -69,11 +69,15 @@
       </template>
     </el-upload>
     <template #footer>
-      <el-button type="primary" @click="submitFileForm">
-        <Icon icon="ep:upload-filled" />
-        {{ t('action.save') }}
-      </el-button>
-      <el-button @click="uploadDialogVisible = false">{{ t('dialog.close') }}</el-button>
+      <!-- 按钮：保存 -->
+      <XButton
+        type="primary"
+        prefix="ep:upload-filled"
+        :title="t('action.save')"
+        @click="submitFileForm()"
+      />
+      <!-- 按钮：关闭 -->
+      <XButton :title="t('dialog.close')" @click="uploadDialogVisible = false" />
     </template>
   </XModal>
 </template>
diff --git a/yudao-ui-admin-vue3/src/views/infra/job/JobLog.vue b/yudao-ui-admin-vue3/src/views/infra/job/JobLog.vue
index fc33e905a..6726d380d 100644
--- a/yudao-ui-admin-vue3/src/views/infra/job/JobLog.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/job/JobLog.vue
@@ -43,7 +43,7 @@
     </Descriptions>
     <!-- 操作按钮 -->
     <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+      <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
     </template>
   </XModal>
 </template>
diff --git a/yudao-ui-admin-vue3/src/views/infra/redis/index.vue b/yudao-ui-admin-vue3/src/views/infra/redis/index.vue
index 2392158a2..b4689b7aa 100644
--- a/yudao-ui-admin-vue3/src/views/infra/redis/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/redis/index.vue
@@ -44,18 +44,18 @@
           </el-descriptions>
         </el-card>
       </el-col>
-      <el-col :span="12" style="margin-top: 10px">
+      <el-col :span="12" class="mt-3">
         <el-card :gutter="12" shadow="hover">
-          <div ref="commandStatsRef" style="height: 350px"></div>
+          <div ref="commandStatsRef" class="h-88"></div>
         </el-card>
       </el-col>
-      <el-col :span="12" style="margin-top: 10px">
-        <el-card style="margin-left: 10px" :gutter="12" shadow="hover">
-          <div ref="usedmemory" style="height: 350px"></div>
+      <el-col :span="12" class="mt-3">
+        <el-card class="ml-3" :gutter="12" shadow="hover">
+          <div ref="usedmemory" class="h-88"></div>
         </el-card>
       </el-col>
     </el-row>
-    <el-row style="margin-top: 10px">
+    <el-row class="mt-3">
       <el-col :span="24" class="card-box" shadow="hover">
         <el-card>
           <el-table
@@ -81,7 +81,7 @@
   </el-scrollbar>
   <XModal v-model="dialogVisible" :title="keyTemplate + ' 模板'">
     <el-row>
-      <el-col :span="14" style="margin-top: 10px">
+      <el-col :span="14" class="mt-3">
         <el-card shadow="always">
           <template #header>
             <div class="card-header">
@@ -96,27 +96,23 @@
             </el-table-column>
             <el-table-column label="操作" align="right" width="60">
               <template #default="{ row }">
-                <el-button link type="primary" @click="handleDeleteKey(row)">
-                  <Icon icon="ep:delete" />
-                </el-button>
+                <XTextButton preIcon="ep:delete" @click="handleDeleteKey(row)" />
               </template>
             </el-table-column>
           </el-table>
         </el-card>
       </el-col>
-      <el-col :span="10" style="margin-top: 10px">
+      <el-col :span="10" class="mt-3">
         <el-card shadow="always">
           <template #header>
             <div class="card-header">
               <span>缓存内容</span>
-              <el-button
-                link
-                type="primary"
+              <XTextButton
+                preIcon="ep:refresh"
+                title="清理全部"
                 @click="handleDeleteKeys(keyTemplate)"
-                style="float: right; padding: 3px 0"
-              >
-                <Icon icon="ep:refresh" />清理全部
-              </el-button>
+                class="float-right p-1"
+              />
             </div>
           </template>
           <el-descriptions :column="1">
diff --git a/yudao-ui-admin-vue3/src/views/system/user/index.vue b/yudao-ui-admin-vue3/src/views/system/user/index.vue
index 81efdc5d0..db00d4311 100644
--- a/yudao-ui-admin-vue3/src/views/system/user/index.vue
+++ b/yudao-ui-admin-vue3/src/views/system/user/index.vue
@@ -210,10 +210,7 @@
   <XModal v-model="importDialogVisible" :title="importDialogTitle">
     <el-form class="drawer-multiColumn-form" label-width="150px">
       <el-form-item label="模板下载 :">
-        <el-button type="primary" @click="handleImportTemp">
-          <Icon icon="ep:download" />
-          点击下载
-        </el-button>
+        <XButton type="primary" prefix="ep:download" title="点击下载" @click="handleImportTemp()" />
       </el-form-item>
       <el-form-item label="文件上传 :">
         <el-upload