style:移动端文件页面样式和防火墙页面样式 (#6386)

* style:移动端端文件页面样式

* style:修改防火墙页面样式

* style:手机端ssl界面和数据库界面调整

frontend/src/lang/modules/en.ts

@@ -1176,6 +1176,7 @@ const message = {
         info: 'Attribute',
         linkFile: 'Soft link',
         terminal: 'Terminal',
+        batchoperation: 'batch operation',
         shareList: 'Share list',
         zip: 'Compressed',
         group: 'Group',

frontend/src/lang/modules/tw.ts

@@ -1114,6 +1114,7 @@ const message = {
         info: '屬性',
         linkFile: '軟連接文件',
         terminal: '終端',
+        batchoperation: '批量操作',
         shareList: '分享列表',
         zip: '壓縮',
         group: '用戶組',

frontend/src/lang/modules/zh.ts

@@ -1118,6 +1118,7 @@ const message = {
         info: '属性',
         linkFile: '软连接文件',
         terminal: '终端',
+        batchoperation: '批量操作',
         shareList: '分享列表',
         zip: '压缩',
         group: '用户组',

frontend/src/views/database/mysql/index.vue

@@ -62,7 +62,7 @@
 
             <template #toolbar>
                 <div class="flex flex-wrap gap-4 sm:justify-between">
-                    <div class="flex gap-2 flex-wrap items-center justify-start">
+                    <div class="flex gap-2 flex-wrap items-center justify-start [&>*]:ml-3">
                         <el-button
                             v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
                             type="primary"
@@ -81,11 +81,9 @@
                         >
                             {{ $t('database.loadFromRemote') }}
                         </el-button>
-                        <div>
                         <el-button @click="goRemoteDB" type="primary" plain>
                             {{ $t('database.remoteDB') }}
                         </el-button>
-                        </div>
                         <div>
                             <el-dropdown>
                                 <el-button type="primary" plain>

frontend/src/views/host/file-management/index.vue

@@ -58,6 +58,7 @@
                 </el-alert>
             </template>
             <template #toolbar>
+                <div class="hidden sm:block">
                     <div class="btn-container">
                         <div class="left-section">
                             <el-dropdown @command="handleCreate">
@@ -103,12 +104,22 @@
                             </el-button>
 
                             <el-button-group class="copy-button" v-if="moveOpen">
-                            <el-tooltip class="box-item" effect="dark" :content="$t('file.paste')" placement="bottom">
+                                <el-tooltip
+                                    class="box-item"
+                                    effect="dark"
+                                    :content="$t('file.paste')"
+                                    placement="bottom"
+                                >
                                     <el-button plain @click="openPaste">
                                         {{ $t('file.paste') }}({{ fileMove.count }})
                                     </el-button>
                                 </el-tooltip>
-                            <el-tooltip class="box-item" effect="dark" :content="$t('file.cancel')" placement="bottom">
+                                <el-tooltip
+                                    class="box-item"
+                                    effect="dark"
+                                    :content="$t('file.cancel')"
+                                    placement="bottom"
+                                >
                                     <el-button plain class="close" @click="closeMove">
                                         <el-icon class="close-icon"><Close /></el-icon>
                                     </el-button>
@@ -180,6 +191,141 @@
                             </div>
                         </div>
                     </div>
+                </div>
+                <div class="block flex flex-wrap gap-4 sm:hidden">
+                    <el-dropdown @command="handleCreate">
+                        <el-button type="primary">
+                            {{ $t('commons.button.create') }}
+                            <el-icon><arrow-down /></el-icon>
+                        </el-button>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item command="dir">
+                                    <svg-icon iconName="p-file-folder"></svg-icon>
+                                    {{ $t('file.dir') }}
+                                </el-dropdown-item>
+                                <el-dropdown-item command="file">
+                                    <svg-icon iconName="p-file-normal"></svg-icon>
+                                    {{ $t('file.file') }}
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                    <el-dropdown @command="handleFilePatch">
+                        <el-button type="primary">
+                            {{ $t('file.batchoperation') }}
+                            <el-icon><arrow-down /></el-icon>
+                        </el-button>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item command="openUpload">
+                                    {{ $t('file.upload') }}
+                                </el-dropdown-item>
+
+                                <el-dropdown-item command="openWget">
+                                    {{ $t('file.remoteFile') }}
+                                </el-dropdown-item>
+
+                                <el-dropdown-item command="openMove:copy" :disabled="selects.length === 0">
+                                    {{ $t('file.copy') }}
+                                </el-dropdown-item>
+
+                                <el-dropdown-item command="openMove:cut" :disabled="selects.length === 0">
+                                    {{ $t('file.move') }}
+                                </el-dropdown-item>
+
+                                <el-dropdown-item command="openCompress" :disabled="selects.length === 0">
+                                    {{ $t('file.compress') }}
+                                </el-dropdown-item>
+
+                                <el-dropdown-item command="openBatchRole" :disabled="selects.length === 0">
+                                    {{ $t('file.role') }}
+                                </el-dropdown-item>
+
+                                <el-dropdown-item command="batchDelFiles" :disabled="selects.length === 0">
+                                    {{ $t('commons.button.delete') }}
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+
+                    <el-button-group v-if="moveOpen">
+                        <el-tooltip class="box-item" effect="dark" :content="$t('file.paste')" placement="bottom">
+                            <el-button plain @click="openPaste">{{ $t('file.paste') }}({{ fileMove.count }})</el-button>
+                        </el-tooltip>
+                        <el-tooltip class="box-item" effect="dark" :content="$t('file.cancel')" placement="bottom">
+                            <el-button plain class="close" @click="closeMove">
+                                <el-icon class="close-icon"><Close /></el-icon>
+                            </el-button>
+                        </el-tooltip>
+                    </el-button-group>
+
+                    <div class="flex flex-row gap-4">
+                        <el-button @click="toTerminal">
+                            {{ $t('menu.terminal') }}
+                        </el-button>
+
+                        <div>
+                            <el-popover placement="bottom" trigger="hover" @before-enter="getFavoriates">
+                                <template #reference>
+                                    <el-button @click="openFavorite">
+                                        {{ $t('file.favorite') }}
+                                    </el-button>
+                                </template>
+                                <el-table :data="favorites">
+                                    <el-table-column prop="name">
+                                        <template #default="{ row }">
+                                            <el-tooltip
+                                                class="box-item"
+                                                effect="dark"
+                                                :content="row.path"
+                                                placement="top"
+                                            >
+                                                <span
+                                                    class="table-link text-ellipsis"
+                                                    @click="toFavorite(row)"
+                                                    type="primary"
+                                                >
+                                                    <svg-icon
+                                                        v-if="row.isDir"
+                                                        className="table-icon"
+                                                        iconName="p-file-folder"
+                                                    ></svg-icon>
+                                                    <svg-icon
+                                                        v-else
+                                                        className="table-icon"
+                                                        iconName="p-file-normal"
+                                                    ></svg-icon>
+                                                    {{ row.name }}
+                                                </span>
+                                            </el-tooltip>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-popover>
+                        </div>
+
+                        <el-button @click="openRecycleBin">
+                            {{ $t('file.recycleBin') }}
+                        </el-button>
+                    </div>
+                    <el-input
+                        v-model="req.search"
+                        clearable
+                        @clear="search()"
+                        @keydown.enter="search()"
+                        :placeholder="$t('file.search')"
+                    >
+                        <template #prepend>
+                            <el-checkbox v-model="req.containSub">
+                                {{ $t('file.sub') }}
+                            </el-checkbox>
+                        </template>
+                        <template #append>
+                            <el-button icon="Search" @click="search" round />
+                        </template>
+                    </el-input>
+                </div>
             </template>
             <template #main>
                 <ComplexTable
@@ -443,6 +589,34 @@ const mobile = computed(() => {
     return globalStore.isMobile();
 });
 
+const handleFilePatch = (command: string) => {
+    switch (command) {
+        case 'openUpload':
+            openUpload();
+            break;
+        case 'openWget':
+            openWget();
+            break;
+        case 'openMove:copy':
+            openMove('copy');
+            break;
+        case 'openMove:cut':
+            openMove('cut');
+            break;
+        case 'openCompress':
+            openCompress(selects.value);
+            break;
+        case 'openBatchRole':
+            openBatchRole(selects.value);
+            break;
+        case 'batchDelFiles':
+            openDetail(selects.value);
+            break;
+        default:
+            break;
+    }
+};
+
 const search = async () => {
     loading.value = true;
     if (req.search != '') {

frontend/src/views/host/firewall/status/index.vue

@@ -2,7 +2,8 @@
     <div>
         <div class="app-status" style="margin-top: 20px">
             <el-card>
-                <div>
+                <div class="flex flex-row flex-wrap gap-2 sm:justify-between items-center">
+                    <div class="flex flex-row flex-wrap">
                         <el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
                         <el-tag round class="status-content" v-if="baseInfo.status === 'running'" type="success">
                             {{ $t('commons.status.running') }}
@@ -11,22 +12,23 @@
                             {{ $t('commons.status.stopped') }}
                         </el-tag>
                         <el-tag class="status-content">{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
-
+                    </div>
-                    <span v-if="baseInfo.status === 'running'" class="buttons">
+                    <div class="flex flex-wrap items-center">
+                        <div v-if="baseInfo.status === 'running'">
                             <el-button type="primary" @click="onOperate('stop')" link>
                                 {{ $t('commons.button.stop') }}
                             </el-button>
-                    </span>
+                        </div>
-                    <span v-if="baseInfo.status === 'not running'" class="buttons">
+                        <div v-if="baseInfo.status === 'not running'">
                             <el-button type="primary" @click="onOperate('start')" link>
                                 {{ $t('commons.button.start') }}
                             </el-button>
-                    </span>
+                        </div>
                         <el-divider direction="vertical" />
                         <el-button type="primary" @click="onOperate('restart')" link>
                             {{ $t('container.restart') }}
                         </el-button>
-                    <span v-if="onPing !== 'None'">
+                        <div v-if="onPing !== 'None'">
                             <el-divider direction="vertical" />
                             <el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
                             <el-switch
@@ -37,7 +39,8 @@
                                 @change="onPingOperate"
                                 v-model="onPing"
                             />
-                    </span>
+                        </div>
+                    </div>
                 </div>
             </el-card>
         </div>

frontend/src/views/website/ssl/index.vue

@@ -3,6 +3,7 @@
         <RouterButton :buttons="routerButton" />
         <LayoutContent :title="$t('website.ssl')">
             <template #toolbar>
+                <div class="flex flex-wrap gap-3 [&>*]:ml-3">
                     <el-button type="primary" @click="openSSL()">
                         {{ $t('ssl.create') }}
                     </el-button>
@@ -21,6 +22,7 @@
                     <el-button plain @click="deleteSSL(null)" :disabled="selects.length === 0">
                         {{ $t('commons.button.delete') }}
                     </el-button>
+                </div>
             </template>
             <template #main>
                 <br />