github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

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

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

* style:手机端ssl界面和数据库界面调整
pull/6393/head
see-more 3 months ago committed by GitHub
parent
e87fb7b50e
commit
666f8c813d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 319 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      frontend/src/lang/modules/en.ts
  2. 1
      frontend/src/lang/modules/tw.ts
  3. 1
      frontend/src/lang/modules/zh.ts
  4. 10
      frontend/src/views/database/mysql/index.vue
  5. 334
      frontend/src/views/host/file-management/index.vue
  6. 73
      frontend/src/views/host/firewall/status/index.vue
  7. 38
      frontend/src/views/website/ssl/index.vue

1
frontend/src/lang/modules/en.ts
Unescape View File

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

1
frontend/src/lang/modules/tw.ts
Unescape View File

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

1
frontend/src/lang/modules/zh.ts
Unescape View File

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

10
frontend/src/views/database/mysql/index.vue
Unescape View File

@ -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>

334
frontend/src/views/host/file-management/index.vue
Unescape View File

@ -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 != '') {

73
frontend/src/views/host/firewall/status/index.vue
Unescape View File

@ -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>

38
frontend/src/views/website/ssl/index.vue
Unescape View File

@ -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 />

Write Preview
Loading…
Cancel
Save