style: change button style (#9171)

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'),
+  src: url('iconfont.woff2?t=1750234328196') format('woff2'),
-       url('iconfont.woff?t=1745909790481') format('woff'),
+       url('iconfont.woff?t=1750234328196') format('woff'),
-       url('iconfont.ttf?t=1745909790481') format('truetype'),
+       url('iconfont.ttf?t=1750234328196') format('truetype'),
-       url('iconfont.svg?t=1745909790481#iconfont') format('svg');
+       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.json

@@ -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.svg

@@ -14,6 +14,10 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="start" unicode="&#59016;" d="M755.2 352L390.4 21.333333c-17.066667-14.933333-44.8-14.933333-59.733333 2.133334-6.4 8.533333-10.666667 19.2-10.666667 29.866666v661.333334c0 23.466667 19.2 42.666667 42.666667 42.666666 10.666667 0 21.333333-4.266667 27.733333-10.666666l362.666667-330.666667c17.066667-14.933333 19.2-42.666667 2.133333-59.733333 2.133333-2.133333 0-2.133333 0-4.266667z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="stop" unicode="&#59216;" d="M291.065468 30.504749c-24.391172 0-44.186906 19.751547-44.186906 44.186907L246.878562 693.308344c0 24.391172 19.795734 44.186906 44.186906 44.186907s44.186906-19.795734 44.186907-44.186907l0-618.616688C335.252375 50.256296 315.456641 30.504749 291.065468 30.504749zM732.934532 30.504749c-24.435359 0-44.186906 19.751547-44.186907 44.186907L688.747625 693.308344c0 24.391172 19.751547 44.186906 44.186907 44.186907s44.186906-19.795734 44.186906-44.186907l0-618.616688C777.121438 50.256296 757.369891 30.504749 732.934532 30.504749z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="node-4" unicode="&#59196;" d="M607.934 478.143c-6.18 6.178-12.766 11.747-19.554 16.91l-0.012-0.011c-6.986 6.72-16.472 10.857-26.93 10.857-21.465 0-38.865-17.4-38.865-38.864a38.697 38.697 0 0 1 9.072-24.947h-0.001a39.02 39.02 0 0 1 9.59-8.256c3.665-3.022 7.262-5.998 10.625-9.361l3.204-3.205c40.28-40.23 28.255-109.54-12.025-149.82l-171.88-171.83c-40.279-40.23-105.762-40.23-146.042 0l-3.23 3.232c-40.281 40.278-40.281 105.81 0 145.99l75.936 75.91c9.742 7.734 15.997 19.67 15.997 33.073 0 23.313-18.899 42.211-42.212 42.211a42.01 42.01 0 0 1-23.725-7.297c-0.021 0.045-0.044 0.088-0.066 0.134l-0.81-0.757a42.455 42.455 0 0 1-8.026-7.51l-78.913-73.842c-74.178-74.23-74.178-195.633 0-269.759l3.204-3.203c74.179-74.127 195.53-74.127 269.708 0l171.83 171.88c74.075 74.175 80.356 191.185 6.281 265.312l-3.156 3.153zM855.62 730.196l-3.204 3.204c-74.178 74.178-195.529 74.178-269.707 0l-171.83-171.88c-74.178-74.178-78.263-181.296-4.085-255.523l3.153-3.104c3.369-3.368 6.866-6.543 10.435-9.589a36.872 36.872 0 0 1 8.993-7.31l0.077-0.062 0.012 0.01a36.508 36.508 0 0 1 18.258-4.87c20.263 0 36.69 16.428 36.69 36.69 0 5.719-1.31 11.132-3.646 15.958-4.85 10.89-13.93 17.52-20.21 23.802l-3.154 3.103c-40.278 40.278-24.983 98.796 15.295 139.074l171.931 171.83c40.18 40.281 105.685 40.281 145.966 0l3.206-3.152c40.279-40.282 40.279-105.839 0-146.068l-75.687-75.738c-10.297-7.629-16.974-19.865-16.974-33.663 0-23.123 18.746-41.87 41.87-41.87a41.668 41.668 0 0 1 21.946 6.211c0.048-0.082 0.093-0.157 0.14-0.24l1.175 1.083a42.09 42.09 0 0 1 9.529 8.793l79.766 73.603c74.233 74.177 74.233 195.53 0.055 269.708z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="node-3" unicode="&#59351;" d="M900.144 799.76H123.84a66.896 66.896 0 0 1-66.816-66.832v-541.152a66.896 66.896 0 0 1 66.816-66.832h467.744a24 24 0 0 1 0 48H123.84a18.848 18.848 0 0 0-18.816 18.832V732.96A18.864 18.864 0 0 0 123.84 751.792h776.304a18.848 18.848 0 0 0 18.816-18.832v-541.152a18.832 18.832 0 0 0-18.816-18.832H753.76a24 24 0 0 1 0-48h146.384a66.896 66.896 0 0 1 66.816 66.832V732.96a66.896 66.896 0 0 1-66.816 66.8zM795.808 16.24H213.168a24 24 0 0 1 0-48h582.64a24 24 0 0 1 0 48zM204.192 502.16v-192.608a24 24 0 0 1 48 0V502.16a24 24 0 0 1-48 0zM478.096 443.36v-133.856a24 24 0 0 1 48 0V443.36a24 24 0 0 1-48 0zM819.808 309.552V443.36a24 24 0 0 1-48 0v-133.856a24 24 0 0 1 48 0zM342.336 622.96v-313.408a24 24 0 0 1 48 0V622.96a24 24 0 0 1-48 0zM648.64 646.96a24 24 0 0 1-24-24v-313.408a24 24 0 0 1 48 0V622.96a24 24 0 0 1-24 24zM655.152 162.192a32.24 32.24 0 0 1-2.24-4c-0.48-1.44-0.96-3.04-1.28-4.48a24.416 24.416 0 0 1-0.48-4.8 25.008 25.008 0 0 1 1.76-9.12 26.048 26.048 0 0 1 5.28-7.84 22.288 22.288 0 0 1 7.68-5.12 23.504 23.504 0 0 1 9.28-1.92 22.192 22.192 0 0 1 9.12 1.92 22.912 22.912 0 0 1 7.84 5.12 26.048 26.048 0 0 1 5.28 7.84 25.008 25.008 0 0 1 1.76 9.12 24 24 0 0 1-7.04 16.96 24.752 24.752 0 0 1-33.92 0 23.264 23.264 0 0 1-3.04-3.68z"  horiz-adv-x="1024" />

frontend/src/components/status/index.vue

@@ -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>
-
+    <span v-else>
-    <el-tag size="small" v-else :type="getType(statusItem)" round effect="light">
+        <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>
-            <el-icon size="15" v-if="operate">
-                <CaretRight v-if="statusItem == 'running'" />
-                <CaretBottom v-if="statusItem == 'stopped'" />
-            </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-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>
+        </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/views/container/container/index.vue

@@ -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