mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-11-27 12:39:01 +08:00
style:移动端文件页面样式和防火墙页面样式 (#6386)
* style:移动端端文件页面样式 * style:修改防火墙页面样式 * style:手机端ssl界面和数据库界面调整
This commit is contained in:
see-more
GitHub
parent
e87fb7b50e
commit
666f8c813d
@ -1176,6 +1176,7 @@ const message = {
|
||||
info: 'Attribute',
|
||||
linkFile: 'Soft link',
|
||||
terminal: 'Terminal',
|
||||
batchoperation: 'batch operation',
|
||||
shareList: 'Share list',
|
||||
zip: 'Compressed',
|
||||
group: 'Group',
|
||||
|
||||
@ -1114,6 +1114,7 @@ const message = {
|
||||
info: '屬性',
|
||||
linkFile: '軟連接文件',
|
||||
terminal: '終端',
|
||||
batchoperation: '批量操作',
|
||||
shareList: '分享列表',
|
||||
zip: '壓縮',
|
||||
group: '用戶組',
|
||||
|
||||
@ -1118,6 +1118,7 @@ const message = {
|
||||
info: '属性',
|
||||
linkFile: '软连接文件',
|
||||
terminal: '终端',
|
||||
batchoperation: '批量操作',
|
||||
shareList: '分享列表',
|
||||
zip: '压缩',
|
||||
group: '用户组',
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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') }}
|
||||
</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>
|
||||
<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">
|
||||
<el-button class="btn" @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">
|
||||
<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>
|
||||
<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-tooltip>
|
||||
</el-button-group>
|
||||
|
||||
<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 != '') {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user