refactor: 页面小优化

mayfly_go_web/src/common/useRequest.ts

@@ -122,11 +122,12 @@ export function useApiFetch<T>(api: Api, params: any = null, reqOptions: Request
                 return;
             }
 
-            // 如果提示没有权限，则移除token，使其重新登录
+            // 如果提示没有权限，则跳转至无权限页面
             if (result.code === ResultEnum.NO_PERMISSION) {
                 router.push({
                     path: '/401',
                 });
+                return;
             }
 
             // 如果返回的code不为成功，则会返回对应的错误msg，则直接统一通知即可。忽略登录超时或没有权限的提示（直接跳转至401页面）

mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue

@@ -7,6 +7,7 @@
                     :header-height="30"
                     :row-height="30"
                     :row-class="rowClass"
+                    :row-key="null"
                     :columns="state.columns"
                     :data="datas"
                     :width="width"
@@ -28,7 +29,7 @@
                             >
                                 <!-- 行号列 -->
                                 <div v-if="column.key == rowNoColumn.key">
-                                    <el-text tag="b"> {{ column.title }} </el-text>
+                                    <b class="el-text" tag="b"> {{ column.title }} </b>
                                 </div>
 
                                 <!-- 字段名列 -->
@@ -42,9 +43,9 @@
                                     </div>
 
                                     <div v-if="showColumnTip">
-                                        <el-text tag="b" :title="column.remark" style="cursor: pointer">
+                                        <b :title="column.remark" class="el-text" style="cursor: pointer">
                                             {{ column.title }}
-                                        </el-text>
+                                        </b>
 
                                         <span>
                                             <SvgIcon
@@ -56,9 +57,9 @@
                                     </div>
 
                                     <div v-else>
-                                        <el-text tag="b">
+                                        <b class="el-text">
                                             {{ column.title }}
-                                        </el-text>
+                                        </b>
                                     </div>
                                 </div>
                             </div>
@@ -69,9 +70,9 @@
                         <div @contextmenu="dataContextmenuClick($event, rowIndex, column, rowData)" class="table-data-cell">
                             <!-- 行号列 -->
                             <div v-if="column.key == rowNoColumn.key">
-                                <el-text tag="b" size="small">
+                                <b class="el-text el-text--small">
                                     {{ rowIndex + 1 }}
-                                </el-text>
+                                </b>
                             </div>
 
                             <!-- 数据列 -->
@@ -87,13 +88,11 @@
                                 </div>
 
                                 <div v-else :class="isUpdated(rowIndex, column.dataKey) ? 'update_field_active' : ''">
-                                    <el-text v-if="rowData[column.dataKey!] === null" size="small" truncated style="color: var(--el-color-info-light-5)">
+                                    <span v-if="rowData[column.dataKey!] === null" style="color: var(--el-color-info-light-5)"> NULL </span>
-                                        NULL
-                                    </el-text>
 
-                                    <el-text v-else :title="rowData[column.dataKey!]" size="small" truncated>
+                                    <span v-else :title="rowData[column.dataKey!]" class="el-text el-text--small is-truncated">
                                         {{ rowData[column.dataKey!] }}
-                                    </el-text>
+                                    </span>
                                 </div>
                             </div>
                         </div>

mayfly_go_web/src/views/ops/db/component/table/DbTableOp.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="90%">
+        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="90%" :close-on-press-escape="false" :close-on-click-modal="false">
             <el-form label-position="left" ref="formRef" :model="tableData" label-width="80px">
                 <el-row>
                     <el-col :span="12">
@@ -18,7 +18,13 @@
                 <el-tabs v-model="activeName">
                     <el-tab-pane label="字段" name="1">
                         <el-table :data="tableData.fields.res" :max-height="tableData.height">
-                            <el-table-column :prop="item.prop" :label="item.label" v-for="item in tableData.fields.colNames" :key="item.prop">
+                            <el-table-column
+                                :prop="item.prop"
+                                :label="item.label"
+                                v-for="item in tableData.fields.colNames"
+                                :key="item.prop"
+                                :width="item.width"
+                            >
                                 <template #default="scope">
                                     <el-input v-if="item.prop === 'name'" size="small" v-model="scope.row.name"> </el-input>
 
@@ -162,6 +168,12 @@ const emit = defineEmits(['update:visible', 'cancel', 'val-change', 'submit-sql'
 
 const dbDialect = getDbDialect(props.dbType);
 
+type ColName = {
+    prop: string;
+    label: string;
+    width?: number;
+};
+
 const formRef: any = ref();
 const state = reactive({
     dialogVisible: false,
@@ -196,14 +208,17 @@ const state = reactive({
                 {
                     prop: 'notNull',
                     label: '非空',
+                    width: 60,
                 },
                 {
                     prop: 'pri',
                     label: '主键',
+                    width: 60,
                 },
                 {
                     prop: 'auto_increment',
                     label: '自增',
+                    width: 60,
                 },
                 {
                     prop: 'remark',
@@ -212,8 +227,9 @@ const state = reactive({
                 {
                     prop: 'action',
                     label: '操作',
+                    width: 70,
                 },
-            ],
+            ] as ColName[],
             res: [] as RowDefinition[],
         },
         indexs: {

mayfly_go_web/src/views/ops/machine/MachineList.vue

@@ -43,10 +43,23 @@
             <template #fs="{ data }">
                 <span v-if="!data.stat?.fsInfos">-</span>
                 <div v-else>
-                    <el-row v-for="i in data.stat.fsInfos.slice(0, 2)" :key="i.mountPoint">
+                    <el-row v-for="(i, idx) in data.stat.fsInfos.slice(0, 2)" :key="i.mountPoint">
                         <el-text style="font-size: 10px" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
                             {{ i.mountPoint }} => {{ formatByteSize(i.free, 0) }}/{{ formatByteSize(i.used + i.free, 0) }}
                         </el-text>
+
+                        <!-- 展示剩余的磁盘信息 -->
+                        <el-popover :show-after="300" placement="top-start" width="230" trigger="hover">
+                            <template #reference>
+                                <SvgIcon class="mt5 ml5" color="var(--el-color-primary)" v-if="data.stat.fsInfos.length > 2 && idx == 1" name="MoreFilled" />
+                            </template>
+
+                            <el-row v-for="i in data.stat.fsInfos.slice(2)" :key="i.mountPoint">
+                                <el-text style="font-size: 10px" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
+                                    {{ i.mountPoint }} => {{ formatByteSize(i.free, 0) }}/{{ formatByteSize(i.used + i.free, 0) }}
+                                </el-text>
+                            </el-row>
+                        </el-popover>
                     </el-row>
                 </div>
             </template>