From b65956ef8f1d011fd75c579409a67b8aaffd5dec Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Fri, 27 Dec 2024 16:09:14 +0800
Subject: [PATCH] style(tables): unify components of some tables

---
 src/components/ArrayEditorTable.vue           |  8 ++--
 src/components/ObjectArrayEditor.vue          |  8 ++--
 src/views/Auth/components/AuthzManager.vue    | 39 ++++++++++---------
 .../Dashboard/components/NodesGraphCard.vue   |  4 +-
 src/views/Diagnose/LogTrace/LogTrace.vue      | 12 +-----
 .../Gateway/components/topicEditList.vue      |  8 ++--
 6 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/src/components/ArrayEditorTable.vue b/src/components/ArrayEditorTable.vue
index fbf8398fe..fb214309c 100644
--- a/src/components/ArrayEditorTable.vue
+++ b/src/components/ArrayEditorTable.vue
@@ -7,14 +7,14 @@
     </el-table-column>
     <el-table-column v-if="!disabled" width="100">
       <template #header>
-        <a href="javascript:;" class="btn" @click="addColumn">
+        <el-button link type="primary" @click="addColumn">
           {{ $t('Base.add') }}
-        </a>
+        </el-button>
       </template>
       <template #default="{ $index }">
-        <a href="javascript:;" class="btn" @click="deleteItem($index)">
+        <el-button link type="primary" @click="deleteItem($index)">
           {{ $t('Base.delete') }}
-        </a>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
diff --git a/src/components/ObjectArrayEditor.vue b/src/components/ObjectArrayEditor.vue
index 1e453d044..7acc3a6e7 100644
--- a/src/components/ObjectArrayEditor.vue
+++ b/src/components/ObjectArrayEditor.vue
@@ -34,14 +34,14 @@
     </el-table-column>
     <el-table-column width="80px" v-if="!disabled">
       <template #header>
-        <a href="javascript:;" @click="addItem">
+        <el-button link type="primary" @click="addItem">
           {{ $t('Base.add') }}
-        </a>
+        </el-button>
       </template>
       <template #default="{ $index }">
-        <a href="javascript:;" @click="deleteItem($index)">
+        <el-button link type="primary" @click="deleteItem($index)">
           {{ $t('Base.delete') }}
-        </a>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
diff --git a/src/views/Auth/components/AuthzManager.vue b/src/views/Auth/components/AuthzManager.vue
index c82ec165f..d836ff30b 100644
--- a/src/views/Auth/components/AuthzManager.vue
+++ b/src/views/Auth/components/AuthzManager.vue
@@ -211,28 +211,30 @@
               </el-table-column>
               <el-table-column align="right" max-width="160px">
                 <template #header>
-                  <a href="javascript:;" class="btn" @click="addColumn">
+                  <el-button link type="primary" class="btn" @click="addColumn">
                     {{ $t('Base.add') }}
-                  </a>
+                  </el-button>
                 </template>
                 <template #default="{ row, $index }">
-                  <a
-                    href="javascript:;"
-                    :class="['btn', { disabled: $index === 0 }]"
+                  <el-button
+                    link
+                    type="primary"
+                    :disabled="$index === 0"
                     @click="handleUp(row, $index)"
                   >
                     {{ $t('Base.up') }}
-                  </a>
-                  <a
-                    href="javascript:;"
-                    :class="['btn', { disabled: $index === rulesData.length - 1 }]"
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    :disabled="$index === rulesData.length - 1"
                     @click="handleDown(row, $index)"
                   >
                     {{ $t('Base.down') }}
-                  </a>
-                  <a href="javascript:;" class="btn" @click="deleteItem(row, $index)">
+                  </el-button>
+                  <el-button link type="primary" class="btn" @click="deleteItem(row, $index)">
                     {{ $t('Base.delete') }}
-                  </a>
+                  </el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -661,12 +663,13 @@ export default defineComponent({
   }
   .form-table {
     .cell {
-      .btn.disabled {
-        cursor: not-allowed;
-        color: var(--color-text-placeholder);
-      }
-      .btn + .btn {
-        margin-left: 8px;
+      .el-button {
+        padding: 0;
+        margin-right: 0;
+        border: none;
+        & + .el-button {
+          margin-left: 8px;
+        }
       }
     }
   }
diff --git a/src/views/Dashboard/components/NodesGraphCard.vue b/src/views/Dashboard/components/NodesGraphCard.vue
index aaf34253b..ba0c508df 100644
--- a/src/views/Dashboard/components/NodesGraphCard.vue
+++ b/src/views/Dashboard/components/NodesGraphCard.vue
@@ -12,9 +12,9 @@
         <div class="node-info" v-if="currentInfo">
           <div class="node-card-header">
             <div class="node-title">{{ tl('nodeData') }}</div>
-            <a class="nodes-link" href="javascript:;" @click="$router.push('nodes')">
+            <router-link class="nodes-link" :to="{ name: 'nodes' }">
               {{ tl('viewNodes') }}<el-icon><Right /></el-icon>
-            </a>
+            </router-link>
           </div>
           <div class="node-card-body">
             <el-row :gutter="26">
diff --git a/src/views/Diagnose/LogTrace/LogTrace.vue b/src/views/Diagnose/LogTrace/LogTrace.vue
index fb27699e6..adad1a642 100644
--- a/src/views/Diagnose/LogTrace/LogTrace.vue
+++ b/src/views/Diagnose/LogTrace/LogTrace.vue
@@ -10,17 +10,9 @@
     <el-table :data="traceTable" v-loading="traceTbLoading" class="data-table">
       <el-table-column :label="$t('LogTrace.name')" prop="name" :min-width="100">
         <template #default="{ row }">
-          <a
-            href="javascript:;"
-            @click="
-              $router.push({
-                name: 'log-trace-detail',
-                params: { id: row.name },
-              })
-            "
-          >
+          <router-link :to="{ name: 'log-trace-detail', params: { id: row.name } }">
             {{ row.name }}
-          </a>
+          </router-link>
         </template>
       </el-table-column>
       <el-table-column :label="$t('LogTrace.type')" prop="type" :min-width="100">
diff --git a/src/views/Gateway/components/topicEditList.vue b/src/views/Gateway/components/topicEditList.vue
index 62c00ba49..4561916f1 100644
--- a/src/views/Gateway/components/topicEditList.vue
+++ b/src/views/Gateway/components/topicEditList.vue
@@ -23,14 +23,14 @@
         </el-table-column>
         <el-table-column width="80">
           <template #header="scope">
-            <TableButton @click="addTopic()" :disabled="disableAdd(scope)">
+            <el-button link type="primary" @click="addTopic()" :disabled="disableAdd(scope)">
               {{ $t('Base.add') }}
-            </TableButton>
+            </el-button>
           </template>
           <template #default="{ row }">
-            <TableButton @click="delTopic(row)">
+            <el-button link type="primary" @click="delTopic(row)">
               {{ $t('Base.delete') }}
-            </TableButton>
+            </el-button>
           </template>
         </el-table-column>
       </el-table>