mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 08:19:15 +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',
|
info: 'Attribute',
|
||||||
linkFile: 'Soft link',
|
linkFile: 'Soft link',
|
||||||
terminal: 'Terminal',
|
terminal: 'Terminal',
|
||||||
|
batchoperation: 'batch operation',
|
||||||
shareList: 'Share list',
|
shareList: 'Share list',
|
||||||
zip: 'Compressed',
|
zip: 'Compressed',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
|
|||||||
@ -1114,6 +1114,7 @@ const message = {
|
|||||||
info: '屬性',
|
info: '屬性',
|
||||||
linkFile: '軟連接文件',
|
linkFile: '軟連接文件',
|
||||||
terminal: '終端',
|
terminal: '終端',
|
||||||
|
batchoperation: '批量操作',
|
||||||
shareList: '分享列表',
|
shareList: '分享列表',
|
||||||
zip: '壓縮',
|
zip: '壓縮',
|
||||||
group: '用戶組',
|
group: '用戶組',
|
||||||
|
|||||||
@ -1118,6 +1118,7 @@ const message = {
|
|||||||
info: '属性',
|
info: '属性',
|
||||||
linkFile: '软连接文件',
|
linkFile: '软连接文件',
|
||||||
terminal: '终端',
|
terminal: '终端',
|
||||||
|
batchoperation: '批量操作',
|
||||||
shareList: '分享列表',
|
shareList: '分享列表',
|
||||||
zip: '压缩',
|
zip: '压缩',
|
||||||
group: '用户组',
|
group: '用户组',
|
||||||
|
|||||||
@ -62,7 +62,7 @@
|
|||||||
|
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
<div class="flex flex-wrap gap-4 sm:justify-between">
|
<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
|
<el-button
|
||||||
v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
|
v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
|
||||||
type="primary"
|
type="primary"
|
||||||
@ -81,11 +81,9 @@
|
|||||||
>
|
>
|
||||||
{{ $t('database.loadFromRemote') }}
|
{{ $t('database.loadFromRemote') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
<div>
|
|
||||||
<el-button @click="goRemoteDB" type="primary" plain>
|
<el-button @click="goRemoteDB" type="primary" plain>
|
||||||
{{ $t('database.remoteDB') }}
|
{{ $t('database.remoteDB') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<el-dropdown>
|
<el-dropdown>
|
||||||
<el-button type="primary" plain>
|
<el-button type="primary" plain>
|
||||||
|
|||||||
@ -58,6 +58,7 @@
|
|||||||
</el-alert>
|
</el-alert>
|
||||||
</template>
|
</template>
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
|
<div class="hidden sm:block">
|
||||||
<div class="btn-container">
|
<div class="btn-container">
|
||||||
<div class="left-section">
|
<div class="left-section">
|
||||||
<el-dropdown @command="handleCreate">
|
<el-dropdown @command="handleCreate">
|
||||||
@ -103,12 +104,22 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
<el-button-group class="copy-button" v-if="moveOpen">
|
<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">
|
<el-button plain @click="openPaste">
|
||||||
{{ $t('file.paste') }}({{ fileMove.count }})
|
{{ $t('file.paste') }}({{ fileMove.count }})
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-tooltip>
|
</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-button plain class="close" @click="closeMove">
|
||||||
<el-icon class="close-icon"><Close /></el-icon>
|
<el-icon class="close-icon"><Close /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
@ -180,6 +191,141 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
<template #main>
|
<template #main>
|
||||||
<ComplexTable
|
<ComplexTable
|
||||||
@ -443,6 +589,34 @@ const mobile = computed(() => {
|
|||||||
return globalStore.isMobile();
|
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 () => {
|
const search = async () => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
if (req.search != '') {
|
if (req.search != '') {
|
||||||
|
|||||||
@ -2,7 +2,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="app-status" style="margin-top: 20px">
|
<div class="app-status" style="margin-top: 20px">
|
||||||
<el-card>
|
<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 effect="dark" type="success">{{ baseInfo.name }}</el-tag>
|
||||||
<el-tag round class="status-content" v-if="baseInfo.status === 'running'" type="success">
|
<el-tag round class="status-content" v-if="baseInfo.status === 'running'" type="success">
|
||||||
{{ $t('commons.status.running') }}
|
{{ $t('commons.status.running') }}
|
||||||
@ -11,22 +12,23 @@
|
|||||||
{{ $t('commons.status.stopped') }}
|
{{ $t('commons.status.stopped') }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<el-tag class="status-content">{{ $t('app.version') }}: {{ baseInfo.version }}</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>
|
<el-button type="primary" @click="onOperate('stop')" link>
|
||||||
{{ $t('commons.button.stop') }}
|
{{ $t('commons.button.stop') }}
|
||||||
</el-button>
|
</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>
|
<el-button type="primary" @click="onOperate('start')" link>
|
||||||
{{ $t('commons.button.start') }}
|
{{ $t('commons.button.start') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</span>
|
</div>
|
||||||
<el-divider direction="vertical" />
|
<el-divider direction="vertical" />
|
||||||
<el-button type="primary" @click="onOperate('restart')" link>
|
<el-button type="primary" @click="onOperate('restart')" link>
|
||||||
{{ $t('container.restart') }}
|
{{ $t('container.restart') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
<span v-if="onPing !== 'None'">
|
<div v-if="onPing !== 'None'">
|
||||||
<el-divider direction="vertical" />
|
<el-divider direction="vertical" />
|
||||||
<el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
|
<el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
|
||||||
<el-switch
|
<el-switch
|
||||||
@ -37,7 +39,8 @@
|
|||||||
@change="onPingOperate"
|
@change="onPingOperate"
|
||||||
v-model="onPing"
|
v-model="onPing"
|
||||||
/>
|
/>
|
||||||
</span>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
<RouterButton :buttons="routerButton" />
|
<RouterButton :buttons="routerButton" />
|
||||||
<LayoutContent :title="$t('website.ssl')">
|
<LayoutContent :title="$t('website.ssl')">
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
|
<div class="flex flex-wrap gap-3 [&>*]:ml-3">
|
||||||
<el-button type="primary" @click="openSSL()">
|
<el-button type="primary" @click="openSSL()">
|
||||||
{{ $t('ssl.create') }}
|
{{ $t('ssl.create') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
@ -21,6 +22,7 @@
|
|||||||
<el-button plain @click="deleteSSL(null)" :disabled="selects.length === 0">
|
<el-button plain @click="deleteSSL(null)" :disabled="selects.length === 0">
|
||||||
{{ $t('commons.button.delete') }}
|
{{ $t('commons.button.delete') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #main>
|
<template #main>
|
||||||
<br />
|
<br />
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user