Optimize workflow instance page (#2589)

Co-authored-by: dailidong <dailidong66@gmail.com>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue

@@ -19,48 +19,48 @@
     <div class="table-box">
       <table class="fixed">
         <tr>
-          <th scope="col" width="50">
+          <th scope="col" style="min-width: 50px">
             <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
           </th>
-          <th scope="col" width="30">
+          <th scope="col" style="min-width: 30px">
             <span>{{$t('#')}}</span>
           </th>
-          <th scope="col" width="200">
+          <th scope="col" style="min-width: 300px">
             <span>{{$t('Process Name')}}</span>
           </th>
-          <th scope="col" width="60">
+          <th scope="col" style="min-width: 30px">
-            <span>{{$t('Executor')}}</span>
+            <span>{{$t('State')}}</span>
           </th>
-          <th scope="col" width="70">
+          <th scope="col" style="min-width: 70px">
             <span>{{$t('Run Type')}}</span>
           </th>
-          <th scope="col" width="130">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('Scheduling Time')}}</span>
           </th>
-          <th scope="col" width="130">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('Start Time')}}</span>
           </th>
-          <th scope="col" width="130">
+          <th scope="col" style="min-width: 130px">
             <span>{{$t('End Time')}}</span>
           </th>
-          <th scope="col" width="60">
+          <th scope="col" style="min-width: 60px">
             <span>{{$t('Duration')}}s</span>
           </th>
-          <th scope="col" width="60">
+          <th scope="col" style="min-width: 60px">
             <span>{{$t('Run Times')}}</span>
           </th>
-          <th scope="col" width="125">
+          <th scope="col" style="min-width: 55px">
-            <span>{{$t('host')}}</span>
-          </th>
-          <th scope="col" width="55">
             <span>{{$t('fault-tolerant sign')}}</span>
           </th>
-          <th scope="col" width="30">
+          <th scope="col" style="min-width: 135px">
-            <div style="width: 30px">
+            <span>{{$t('host')}}</span>
-              <span>{{$t('State')}}</span>
+          </th>
+          <th scope="col" style="min-width: 60px">
+            <div style="width: 60px">
+              <span>{{$t('Executor')}}</span>
             </div>
           </th>
-          <th scope="col" width="210">
+          <th scope="col" style="min-width: 210px">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
@@ -73,8 +73,7 @@
             <span class="ellipsis" style="padding-left: 4px;"><router-link :to="{ path: '/projects/instance/list/' + item.id}" tag="a" class="links" :title="item.name">{{item.name}}</router-link></span>
           </td>
           <td>
-            <span style="word-break: break-all" v-if="item.executorName">{{item.executorName}}</span>
+            <span v-html="_rtState(item.state)" style="cursor: pointer;"></span>
-            <span v-else>-</span>
           </td>
           <td><span>{{_rtRunningType(item.commandType)}}</span></td>
           <td>
@@ -91,14 +90,14 @@
           </td>
           <td width="70"><span>{{item.duration || '-'}}</span></td>
           <td width="70"><span>{{item.runTimes}}</span></td>
+          <td><span>{{item.recovery}}</span></td>
           <td>
             <span v-if="item.host">{{item.host}}</span>
             <span v-else>-</span>
           </td>
-          <td><span>{{item.recovery}}</span></td>
-
           <td>
-            <span v-html="_rtState(item.state)" style="cursor: pointer;"></span>
+            <span style="word-break: break-all" v-if="item.executorName">{{item.executorName}}</span>
+            <span v-else>-</span>
           </td>
           <td>
             <div v-show="item.disabled">

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue

@@ -204,6 +204,7 @@
     }
     .table-box {
       .fixed {
+        table-layout: auto;
         tr {
           th:last-child,td:last-child {
             background: inherit;