feat: 修改可编辑表格样式 (#3003)

frontend/src/lang/modules/en.ts

@@ -593,8 +593,8 @@ const message = {
         forcePull: 'forced image pull ',
         forcePullHelper: 'Ignore existing images on the server and pull again.',
         server: 'Host',
-        serverExample: 'e.g. 80, 80-88, ip:80 or ip:80-88',
+        serverExample: '80, 80-88, ip:80 or ip:80-88',
-        containerExample: 'e.g. 80 or 80-88',
+        containerExample: '80 or 80-88',
         exposePort: 'Expose port',
         exposeAll: 'Expose all',
         cmdHelper: "e.g. 'nginx' '-g' 'daemon off;' OR nginx -g daemon off;",
@@ -1054,6 +1054,8 @@ const message = {
         disable: 'Disable Autostart',
         sshAlert:
             'The list data is sorted based on login time, but please note that changing time zones or other operations may cause deviations in the time of login logs.',
+        sshAlert2:
+            'You can use Fail2ban in the toolbox to block IP addresses attempting brute force attacks, thus enhancing the security of the host.',
         sshOperate: 'Operation [{0}] on the SSH service is performed. Do you want to continue?',
         sshChange: 'SSH Setting',
         sshChangeHelper: 'This action changed {0} to [{1}]. Do you want to continue?',

frontend/src/lang/modules/tw.ts

@@ -574,8 +574,8 @@ const message = {
         forcePull: '強製拉取鏡像',
         forcePullHelper: '忽略服務器已存在的鏡像，重新拉取一次',
         server: '服務器',
-        serverExample: '例： 80, 80-88, ip:80 或者 ip:80-88',
+        serverExample: '80, 80-88, ip:80 或者 ip:80-88',
-        containerExample: '例： 80 或者 80-88',
+        containerExample: '80 或者 80-88',
         exposePort: '暴露端口',
         exposeAll: '暴露所有',
         cmdHelper: "例： 'nginx' '-g' 'daemon off;' 或 nginx -g daemon off;",
@@ -1009,6 +1009,7 @@ const message = {
         enable: '設置開機自啟',
         disable: '關閉開機自啟',
         sshAlert: '列表數據根據登錄時間排序，但請註意，切換時區或其他操作可能導致登錄日誌的時間出現偏差。',
+        sshAlert2: '您可以通过工具箱中的 Fail2ban 屏蔽尝试暴力破解的 IP 地址，从而提高主机的安全性。',
         sshOperate: '對 SSH 服務進行 [{0}] 操作，是否繼續？',
         sshChange: 'SSH 配置修改',
         sshChangeHelper: '此操作將 {0} 修改為 [{1}] ，是否繼續？',

frontend/src/lang/modules/zh.ts

@@ -575,8 +575,8 @@ const message = {
         forcePull: '强制拉取镜像',
         forcePullHelper: '忽略服务器已存在的镜像，重新拉取一次',
         server: '服务器',
-        serverExample: '例： 80, 80-88, ip:80 或者 ip:80-88',
+        serverExample: '80, 80-88, ip:80 或者 ip:80-88',
-        containerExample: '例： 80 或者 80-88',
+        containerExample: '80 或者 80-88',
         exposePort: '暴露端口',
         exposeAll: '暴露所有',
         cmdHelper: "例： 'nginx' '-g' 'daemon off;' 或者 nginx -g daemon off;",
@@ -1010,6 +1010,7 @@ const message = {
         enable: '设置开机自启',
         disable: '关闭开机自启',
         sshAlert: '列表数据根据登录时间排序，但请注意，切换时区或其他操作可能导致登录日志的时间出现偏差。',
+        sshAlert2: '可通过工具箱中的 Fail2ban 屏蔽暴力破解 IP，从而保护主机安全。',
         sshOperate: '对 SSH 服务进行 [{0}] 操作，是否继续？',
         sshChange: 'SSH 配置修改',
         sshChangeHelper: '此操作将 {0} 修改为 [{1}] ，是否继续？',

frontend/src/views/container/container/operate/index.vue

@@ -64,52 +64,47 @@
                     </el-form-item>
                     <el-form-item v-if="!dialogData.rowData!.publishAllPorts">
                         <el-card class="widthClass">
-                            <table style="width: 100%" class="tab-table">
+                            <el-table
-                                <tr v-if="dialogData.rowData!.exposedPorts.length !== 0">
+                                v-if="dialogData.rowData!.exposedPorts.length !== 0"
-                                    <th scope="col" width="45%" align="left">
+                                :data="dialogData.rowData!.exposedPorts"
-                                        <label>{{ $t('container.server') }}</label>
+                            >
-                                    </th>
+                                <el-table-column :label="$t('container.server')" min-width="150">
-                                    <th scope="col" width="35%" align="left">
+                                    <template #default="{ row }">
-                                        <label>{{ $t('container.container') }}</label>
+                                        <el-input :placeholder="$t('container.serverExample')" v-model="row.host" />
-                                    </th>
+                                    </template>
-                                    <th scope="col" width="20%" align="left">
+                                </el-table-column>
-                                        <label>{{ $t('commons.table.protocol') }}</label>
+                                <el-table-column :label="$t('container.container')" min-width="80">
-                                    </th>
+                                    <template #default="{ row }">
-                                    <th align="left"></th>
-                                </tr>
-                                <tr v-for="(row, index) in dialogData.rowData!.exposedPorts" :key="index">
-                                    <td width="45%">
-                                        <el-input
-                                            :placeholder="$t('container.serverExample')"
-                                            style="width: 100%"
-                                            v-model="row.host"
-                                        />
-                                    </td>
-                                    <td width="35%">
                                         <el-input
                                             :placeholder="$t('container.containerExample')"
-                                            style="width: 100%"
                                             v-model="row.containerPort"
                                         />
-                                    </td>
+                                    </template>
-                                    <td width="20%">
+                                </el-table-column>
-                                        <el-select v-model="row.protocol" style="width: 100%">
+                                <el-table-column :label="$t('commons.table.protocol')" min-width="50">
+                                    <template #default="{ row }">
+                                        <el-select
+                                            v-model="row.protocol"
+                                            style="width: 100%"
+                                            :placeholder="$t('container.serverExample')"
+                                        >
                                             <el-option label="tcp" value="tcp" />
                                             <el-option label="udp" value="udp" />
                                         </el-select>
-                                    </td>
+                                    </template>
-                                    <td>
+                                </el-table-column>
-                                        <el-button link style="font-size: 10px" @click="handlePortsDelete(index)">
+                                <el-table-column min-width="35">
+                                    <template #default="scope">
+                                        <el-button link type="primary" @click="handlePortsDelete(scope.$index)">
                                             {{ $t('commons.button.delete') }}
                                         </el-button>
-                                    </td>
+                                    </template>
-                                </tr>
+                                </el-table-column>
-                                <tr>
+                            </el-table>
-                                    <td align="left">
+
-                                        <el-button @click="handlePortsAdd()">{{ $t('commons.button.add') }}</el-button>
+                            <el-button class="ml-3 mt-2" @click="handlePortsAdd()">
-                                    </td>
+                                {{ $t('commons.button.add') }}
-                                </tr>
+                            </el-button>
-                            </table>
                         </el-card>
                     </el-form-item>
                     <el-form-item :label="$t('container.network')" prop="network">

frontend/src/views/host/ssh/log/analysis/index.vue

@@ -107,13 +107,11 @@
                 <el-col :span="20" :offset="2">
                     <el-alert :title="msg" show-icon type="error" :closable="false"></el-alert>
                     <div class="resource">
-                        <table>
+                        <ul v-for="(row, index) in operationList" :key="index">
-                            <tr v-for="(row, index) in operationList" :key="index">
+                            <li>
-                                <td>
+                                <span>{{ row }}</span>
-                                    <span>{{ row }}</span>
+                            </li>
-                                </td>
+                        </ul>
-                            </tr>
-                        </table>
                     </div>
                 </el-col>
             </el-row>

frontend/src/views/host/ssh/log/log.vue

@@ -2,7 +2,8 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('ssh.loginLogs')">
             <template #prompt>
-                <el-alert type="info" :title="$t('ssh.sshAlert')" :closable="false" />
+                <el-alert type="info" :title="$t('ssh.sshAlert2')" :closable="false" />
+                <div class="mt-2"><el-alert type="info" :title="$t('ssh.sshAlert')" :closable="false" /></div>
             </template>
             <template #search>
                 <el-select v-model="searchStatus" @change="search()">
@@ -14,16 +15,7 @@
             </template>
             <template #toolbar>
                 <el-row>
-                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"></el-col>
-                        <el-button
-                            type="primary"
-                            @click="onLoadAnalysis"
-                            :disabled="data?.length === 0"
-                            style="margin-left: 5px"
-                        >
-                            {{ $t('ssh.analysis') }}
-                        </el-button>
-                    </el-col>
                     <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                         <TableSetting @search="search()" />
                         <div class="search-button">
@@ -73,8 +65,6 @@
                 </ComplexTable>
             </template>
         </LayoutContent>
-
-        <Analysis ref="analysisRef" />
     </div>
 </template>
 
@@ -83,7 +73,6 @@ import TableSetting from '@/components/table-setting/index.vue';
 import { dateFormat } from '@/utils/util';
 import { onMounted, reactive, ref } from '@vue/runtime-core';
 import { loadSSHLogs } from '@/api/modules/host';
-import Analysis from '@/views/host/ssh/log/analysis/index.vue';
 
 const loading = ref();
 const data = ref();
@@ -95,11 +84,6 @@ const paginationConfig = reactive({
 });
 const searchInfo = ref();
 const searchStatus = ref('All');
-const analysisRef = ref();
-
-const onLoadAnalysis = () => {
-    analysisRef.value.acceptParams();
-};
 
 const search = async () => {
     let params = {

frontend/src/views/toolbox/device/hosts/index.vue

@@ -11,35 +11,30 @@
                         <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
                         <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
                     </el-radio-group>
-                    <table style="width: 100%" class="mt-4" v-if="confShowType === 'base'">
+                    <div v-if="confShowType === 'base'">
-                        <tr v-if="form.hosts.length !== 0">
+                        <el-table :data="form.hosts">
-                            <th scope="col" width="25%" align="left">
+                            <el-table-column label="IP" min-width="60">
-                                <label>IP</label>
+                                <template #default="{ row }">
-                            </th>
+                                    <el-input placeholder="172.16.10.111" v-model="row.ip" />
-                            <th scope="col" width="70%" align="left">
+                                </template>
-                                <label>{{ $t('toolbox.device.hosts') }}</label>
+                            </el-table-column>
-                            </th>
+                            <el-table-column :label="$t('toolbox.device.hosts')" min-width="150">
-                            <th align="left"></th>
+                                <template #default="{ row }">
-                        </tr>
+                                    <el-input placeholder="test.hostname.com" v-model="row.host" />
-                        <tr v-for="(row, index) in form.hosts" :key="index">
+                                </template>
-                            <td width="25%">
+                            </el-table-column>
-                                <el-input placeholder="172.16.10.111" v-model="row.ip" />
+                            <el-table-column min-width="30">
-                            </td>
+                                <template #default="scope">
-                            <td width="70%">
+                                    <el-button link type="primary" @click="handleHostsDelete(scope.$index)">
-                                <el-input placeholder="test.hostname.com" v-model="row.host" />
+                                        {{ $t('commons.button.delete') }}
-                            </td>
+                                    </el-button>
-                            <td>
+                                </template>
-                                <el-button link type="primary" @click="handleHostsDelete(index)">
+                            </el-table-column>
-                                    {{ $t('commons.button.delete') }}
+                        </el-table>
-                                </el-button>
+                        <el-button class="ml-3 mt-2" @click="handleHostsAdd()">
-                            </td>
+                            {{ $t('commons.button.add') }}
-                        </tr>
+                        </el-button>
-                        <tr>
+                    </div>
-                            <td align="left">
-                                <el-button @click="handleHostsAdd()">{{ $t('commons.button.add') }}</el-button>
-                            </td>
-                        </tr>
-                    </table>
                     <div v-else>
                         <codemirror
                             :autofocus="true"