From 666f8c813d2e59e8b4e486e14681168710f78b22 Mon Sep 17 00:00:00 2001
From: see-more <107225647+see-more@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:00:39 +0800
Subject: [PATCH] =?UTF-8?q?style:=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=92=8C=E9=98=B2?=
 =?UTF-8?q?=E7=81=AB=E5=A2=99=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=20(#6386?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

* style:手机端ssl界面和数据库界面调整
---
 frontend/src/lang/modules/en.ts               |   1 +
 frontend/src/lang/modules/tw.ts               |   1 +
 frontend/src/lang/modules/zh.ts               |   1 +
 frontend/src/views/database/mysql/index.vue   |  10 +-
 .../src/views/host/file-management/index.vue  | 334 +++++++++++++-----
 .../src/views/host/firewall/status/index.vue  |  73 ++--
 frontend/src/views/website/ssl/index.vue      |  38 +-
 7 files changed, 319 insertions(+), 139 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 24b32f3da..6eab83747 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/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',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index c37e3e6c2..940115420 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1114,6 +1114,7 @@ const message = {
         info: '屬性',
         linkFile: '軟連接文件',
         terminal: '終端',
+        batchoperation: '批量操作',
         shareList: '分享列表',
         zip: '壓縮',
         group: '用戶組',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index e1dea0bb9..ec6897c3a 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1118,6 +1118,7 @@ const message = {
         info: '属性',
         linkFile: '软连接文件',
         terminal: '终端',
+        batchoperation: '批量操作',
         shareList: '分享列表',
         zip: '压缩',
         group: '用户组',
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index e7b07d232..c80296cc6 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/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>
+                        <el-button @click="goRemoteDB" type="primary" plain>
+                            {{ $t('database.remoteDB') }}
+                        </el-button>
                         <div>
                             <el-dropdown>
                                 <el-button type="primary" plain>
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 2cbb34e59..0b98f3d38 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -58,72 +58,220 @@
                 </el-alert>
             </template>
             <template #toolbar>
-                <div class="btn-container">
-                    <div class="left-section">
-                        <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-button-group>
-                            <el-button plain @click="openUpload">{{ $t('file.upload') }}</el-button>
-                            <el-button plain @click="openWget">{{ $t('file.remoteFile') }}</el-button>
-                            <el-button plain @click="openMove('copy')" :disabled="selects.length === 0">
-                                {{ $t('file.copy') }}
-                            </el-button>
-                            <el-button plain @click="openMove('cut')" :disabled="selects.length === 0">
-                                {{ $t('file.move') }}
-                            </el-button>
-                            <el-button plain @click="openCompress(selects)" :disabled="selects.length === 0">
-                                {{ $t('file.compress') }}
+                <div class="hidden sm:block">
+                    <div class="btn-container">
+                        <div class="left-section">
+                            <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-button-group>
+                                <el-button plain @click="openUpload">{{ $t('file.upload') }}</el-button>
+                                <el-button plain @click="openWget">{{ $t('file.remoteFile') }}</el-button>
+                                <el-button plain @click="openMove('copy')" :disabled="selects.length === 0">
+                                    {{ $t('file.copy') }}
+                                </el-button>
+                                <el-button plain @click="openMove('cut')" :disabled="selects.length === 0">
+                                    {{ $t('file.move') }}
+                                </el-button>
+                                <el-button plain @click="openCompress(selects)" :disabled="selects.length === 0">
+                                    {{ $t('file.compress') }}
+                                </el-button>
+                                <el-button plain @click="openBatchRole(selects)" :disabled="selects.length === 0">
+                                    {{ $t('file.role') }}
+                                </el-button>
+                                <el-button plain @click="batchDelFiles" :disabled="selects.length === 0">
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </el-button-group>
+
+                            <el-button class="btn" @click="toTerminal">
+                                {{ $t('menu.terminal') }}
                             </el-button>
-                            <el-button plain @click="openBatchRole(selects)" :disabled="selects.length === 0">
-                                {{ $t('file.role') }}
+
+                            <el-button-group class="copy-button" 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>
+
+                        <div class="right-section">
+                            <el-popover placement="bottom" :width="200" trigger="hover" @before-enter="getFavoriates">
+                                <template #reference>
+                                    <el-button @click="openFavorite">
+                                        {{ $t('file.favorite') }}
+                                    </el-button>
+                                </template>
+                                <div class="favorite-item">
+                                    <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>
+                                </div>
+                            </el-popover>
+
+                            <el-button class="btn" @click="openRecycleBin">
+                                {{ $t('file.recycleBin') }}
                             </el-button>
-                            <el-button plain @click="batchDelFiles" :disabled="selects.length === 0">
-                                {{ $t('commons.button.delete') }}
+                            <div class="search-button">
+                                <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>
+                        </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-button-group>
+                        </el-tooltip>
+                    </el-button-group>
 
-                        <el-button class="btn" @click="toTerminal">
+                    <div class="flex flex-row gap-4">
+                        <el-button @click="toTerminal">
                             {{ $t('menu.terminal') }}
                         </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-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>
-
-                    <div class="right-section">
-                        <el-popover placement="bottom" :width="200" trigger="hover" @before-enter="getFavoriates">
-                            <template #reference>
-                                <el-button @click="openFavorite">
-                                    {{ $t('file.favorite') }}
-                                </el-button>
-                            </template>
-                            <div class="favorite-item">
+                        <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 }">
@@ -154,31 +302,29 @@
                                         </template>
                                     </el-table-column>
                                 </el-table>
-                            </div>
-                        </el-popover>
+                            </el-popover>
+                        </div>
 
-                        <el-button class="btn" @click="openRecycleBin">
+                        <el-button @click="openRecycleBin">
                             {{ $t('file.recycleBin') }}
                         </el-button>
-                        <div class="search-button">
-                            <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>
                     </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>
@@ -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 != '') {
diff --git a/frontend/src/views/host/firewall/status/index.vue b/frontend/src/views/host/firewall/status/index.vue
index aa94adc82..396d227c7 100644
--- a/frontend/src/views/host/firewall/status/index.vue
+++ b/frontend/src/views/host/firewall/status/index.vue
@@ -2,42 +2,45 @@
     <div>
         <div class="app-status" style="margin-top: 20px">
             <el-card>
-                <div>
-                    <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') }}
-                    </el-tag>
-                    <el-tag round class="status-content" v-if="baseInfo.status === 'not running'" type="info">
-                        {{ $t('commons.status.stopped') }}
-                    </el-tag>
-                    <el-tag class="status-content">{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
-
-                    <span v-if="baseInfo.status === 'running'" class="buttons">
-                        <el-button type="primary" @click="onOperate('stop')" link>
-                            {{ $t('commons.button.stop') }}
-                        </el-button>
-                    </span>
-                    <span v-if="baseInfo.status === 'not running'" class="buttons">
-                        <el-button type="primary" @click="onOperate('start')" link>
-                            {{ $t('commons.button.start') }}
-                        </el-button>
-                    </span>
-                    <el-divider direction="vertical" />
-                    <el-button type="primary" @click="onOperate('restart')" link>
-                        {{ $t('container.restart') }}
-                    </el-button>
-                    <span v-if="onPing !== 'None'">
+                <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') }}
+                        </el-tag>
+                        <el-tag round class="status-content" v-if="baseInfo.status === 'not running'" type="info">
+                            {{ $t('commons.status.stopped') }}
+                        </el-tag>
+                        <el-tag class="status-content">{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
+                    </div>
+                    <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>
+                        </div>
+                        <div v-if="baseInfo.status === 'not running'">
+                            <el-button type="primary" @click="onOperate('start')" link>
+                                {{ $t('commons.button.start') }}
+                            </el-button>
+                        </div>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
-                        <el-switch
-                            size="small"
-                            class="ml-2"
-                            inactive-value="Disable"
-                            active-value="Enable"
-                            @change="onPingOperate"
-                            v-model="onPing"
-                        />
-                    </span>
+                        <el-button type="primary" @click="onOperate('restart')" link>
+                            {{ $t('container.restart') }}
+                        </el-button>
+                        <div v-if="onPing !== 'None'">
+                            <el-divider direction="vertical" />
+                            <el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
+                            <el-switch
+                                size="small"
+                                class="ml-2"
+                                inactive-value="Disable"
+                                active-value="Enable"
+                                @change="onPingOperate"
+                                v-model="onPing"
+                            />
+                        </div>
+                    </div>
                 </div>
             </el-card>
         </div>
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index ce81d30f8..a4b140ca5 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -3,24 +3,26 @@
         <RouterButton :buttons="routerButton" />
         <LayoutContent :title="$t('website.ssl')">
             <template #toolbar>
-                <el-button type="primary" @click="openSSL()">
-                    {{ $t('ssl.create') }}
-                </el-button>
-                <el-button type="primary" @click="openUpload()">
-                    {{ $t('ssl.upload') }}
-                </el-button>
-                <el-button type="primary" plain @click="openCA()">
-                    {{ $t('ssl.selfSigned') }}
-                </el-button>
-                <el-button type="primary" plain @click="openAcmeAccount()">
-                    {{ $t('website.acmeAccountManage') }}
-                </el-button>
-                <el-button type="primary" plain @click="openDnsAccount()">
-                    {{ $t('website.dnsAccountManage') }}
-                </el-button>
-                <el-button plain @click="deleteSSL(null)" :disabled="selects.length === 0">
-                    {{ $t('commons.button.delete') }}
-                </el-button>
+                <div class="flex flex-wrap gap-3 [&>*]:ml-3">
+                    <el-button type="primary" @click="openSSL()">
+                        {{ $t('ssl.create') }}
+                    </el-button>
+                    <el-button type="primary" @click="openUpload()">
+                        {{ $t('ssl.upload') }}
+                    </el-button>
+                    <el-button type="primary" plain @click="openCA()">
+                        {{ $t('ssl.selfSigned') }}
+                    </el-button>
+                    <el-button type="primary" plain @click="openAcmeAccount()">
+                        {{ $t('website.acmeAccountManage') }}
+                    </el-button>
+                    <el-button type="primary" plain @click="openDnsAccount()">
+                        {{ $t('website.dnsAccountManage') }}
+                    </el-button>
+                    <el-button plain @click="deleteSSL(null)" :disabled="selects.length === 0">
+                        {{ $t('commons.button.delete') }}
+                    </el-button>
+                </div>
             </template>
             <template #main>
                 <br />