style: change button style

Author: zhengkunwang223

frontend/src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4776196 */
-  src: url('iconfont.woff2?t=1745909790481') format('woff2'),
-       url('iconfont.woff?t=1745909790481') format('woff'),
-       url('iconfont.ttf?t=1745909790481') format('truetype'),
-       url('iconfont.svg?t=1745909790481#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1750234328196') format('woff2'),
+       url('iconfont.woff?t=1750234328196') format('woff'),
+       url('iconfont.ttf?t=1750234328196') format('truetype'),
+       url('iconfont.svg?t=1750234328196#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.p-start:before {
+  content: "\e688";
+}
+
+.p-stop:before {
+  content: "\e750";
+}
+
 .p-node-4:before {
   content: "\e73c";
 }

frontend/src/assets/iconfont/iconfont.js

@@ -5,6 +5,20 @@
   "css_prefix_text": "p-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "15838584",
+      "name": "arrow-right-filling",
+      "font_class": "start",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
+    {
+      "icon_id": "212329",
+      "name": "stop",
+      "font_class": "stop",
+      "unicode": "e750",
+      "unicode_decimal": 59216
+    },
     {
       "icon_id": "7712749",
       "name": "node-4",

frontend/src/assets/iconfont/iconfont.json

@@ -1,5 +1,5 @@
 <template>
-    <el-tooltip v-if="msg" effect="dark" placement="bottom">
+    <el-tooltip v-if="msg && msg != ''" effect="dark" placement="bottom">
         <template #content>
             <div class="content">{{ msg }}</div>
         </template>
@@ -12,19 +12,30 @@
             </span>
         </el-tag>
     </el-tooltip>
-
-    <el-tag size="small" v-else :type="getType(statusItem)" round effect="light">
-        <span class="flx-align-center">
+    <span v-else>
+        <el-tag size="small" :type="getType(statusItem)" round effect="light" v-if="!operate">
+            <span class="flx-align-center">
+                {{ $t('commons.status.' + statusItem) }}
+                <el-icon v-if="loadingIcon(statusItem)" class="is-loading">
+                    <Loading />
+                </el-icon>
+            </span>
+        </el-tag>
+        <el-button size="small" v-else :type="getType(statusItem)" plain round>
             {{ $t('commons.status.' + statusItem) }}
             <el-icon v-if="loadingIcon(statusItem)" class="is-loading">
                 <Loading />
             </el-icon>
-            <el-icon size="15" v-if="operate">
-                <CaretRight v-if="statusItem == 'running'" />
-                <CaretBottom v-if="statusItem == 'stopped'" />
+            <el-icon size="15" v-else>
+                <svg-icon
+                    iconName="p-stop"
+                    class="status-icon"
+                    v-if="statusItem == 'stopped' || statusItem == 'exited'"
+                ></svg-icon>
+                <svg-icon iconName="p-start" class="svg-icon" v-if="statusItem == 'running'"></svg-icon>
             </el-icon>
-        </span>
-    </el-tag>
+        </el-button>
+    </span>
 </template>
 
 <script lang="ts" setup>
@@ -33,6 +44,7 @@ import { computed } from 'vue';
 const props = defineProps({
     status: String,
     msg: String,
+    hasIcon: Boolean,
     operate: {
         type: Boolean,
         default: false,
@@ -64,9 +76,9 @@ const getType = (status: string) => {
         case 'unhealthy':
         case 'failed':
         case 'lost':
+        case 'exited':
             return 'danger';
         case 'paused':
-        case 'exited':
         case 'dead':
         case 'removing':
         case 'deleted':
@@ -105,4 +117,9 @@ const loadingIcon = (status: string): boolean => {
     width: 300px;
     word-break: break-all;
 }
+
+.status-icon {
+    width: 1em;
+    height: 1em;
+}
 </style>

frontend/src/assets/iconfont/iconfont.svg

@@ -112,7 +112,7 @@
                     <el-table-column :label="$t('commons.table.status')" min-width="100" prop="state" sortable>
                         <template #default="{ row }">
                             <el-dropdown placement="bottom">
-                                <Status :key="row.state" :status="row.state"></Status>
+                                <Status :key="row.state" :status="row.state" :operate="true"></Status>
                                 <template #dropdown>
                                     <el-dropdown-menu>
                                         <el-dropdown-item