mirror/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2024-11-29 14:31:15 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat: 修改菜单样式

Browse Source
This commit is contained in:
zhengkunwang223 2023-01-31 18:52:07 +08:00 committed by zhengkunwang223
parent c6eb0fafe0
commit a90a9fce54
21 changed files with 342 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components.d.ts vendored
View File

@ -36,7 +36,6 @@ declare module 'vue' {
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDraw: typeof import('element-plus/es')['ElDraw']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@ -44,7 +43,6 @@ declare module 'vue' {
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElFooter: typeof import('element-plus/es')['ElFooter']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormColumn: typeof import('element-plus/es')['ElFormColumn']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']

91
frontend/src/components/app-layout/menu/index.scss
View File

@ -3,17 +3,16 @@
display: flex;
flex-direction: column;
height: 100%;
background-color: #191a20;
background-color: $menu-backgroup-color;
transition: all 0.3s ease;
.logo {
box-sizing: border-box;
height: 55px;
border-bottom: 1px solid #282a35;
box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
span {
font-size: 22px;
font-weight: bold;
color: #dadada;
color: $primary-color;
white-space: nowrap;
}
img {
@ -37,27 +36,89 @@
text-align: center;
}
}
.el-menu,
.el-menu--popup {
padding: 4px;
background: none !important;
.el-menu-item {
border-radius: 4px !important;
background-color: $menu-item-backgroup-color;
margin: 10px;
height: 44px !important;
span {
color: rgba(31, 35, 41, 1);
}
.el-icon {
color: rgba(31, 35, 41, 1);
}
&.is-active {
background-color: #060708;
background-color: #ffffff;
border: 2px solid $primary-color;
span {
color: $primary-color;
}
.el-icon {
color: $primary-color;
}
&::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-radius: 4px;
top: 13px;
bottom: 15px;
left: 12px;
width: 4px;
height: 14px;
content: '';
background: $primary-color;
}
}
}
}
.menu-href {
display: inline-block;
width: 100%;
height: 100%;
color: #bdbdc0;
text-decoration: none;
:deep .el-sub-menu {
margin: 10px;
span {
color: rgba(31, 35, 41, 1);
}
.el-icon {
color: rgba(31, 35, 41, 1);
}
.el-sub-menu__title {
background-color: $menu-item-backgroup-color !important;
height: 44px;
border-radius: 4px !important;
}
&.is-opened,
&.is-active {
.el-sub-menu__title {
span {
color: $primary-color;
}
.el-icon {
color: $primary-color;
}
}
}
.el-menu {
background-color: $menu-item-backgroup-color;
}
.el-menu-item {
border-radius: 4px !important;
margin-left: 0px !important;
min-width: 100% !important;
height: 44px;
}
}
}

5
frontend/src/components/app-layout/menu/index.vue
View File

@ -48,10 +48,9 @@ import { GlobalStore } from '@/store';
const route = useRoute();
const menuStore = MenuStore();
const globalStore = GlobalStore();
// const activeMenu = computed((): string => route.path);
const activeMenu = computed(() => {
const activeMenu = computed((): string => {
const { meta, path } = route;
if (meta.activeMenu) {
if (typeof meta.activeMenu === 'string') {
return meta.activeMenu;
}
return path;

8
frontend/src/layout/layout-content.vue
View File

@ -57,8 +57,9 @@
<div v-if="slots.prompt">
<slot name="prompt"></slot>
</div>
<div class="main">
<slot name="main"></slot>
</div>
</el-card>
</div>
<slot></slot>
@ -99,7 +100,6 @@ const showBack = computed(() => {
}
.content-container__toolbar {
// @include flex-row(space-between, center);
margin-top: 30px;
}
@ -116,6 +116,10 @@ const showBack = computed(() => {
margin-top: 20px;
}
.main {
margin-top: 20px;
}
.divider {
margin-top: 20px;
border: 0;

2
frontend/src/styles/var.scss
View File

@ -1,4 +1,6 @@
$primary-color: #005eeb;
$menu-backgroup-color: rgba(0, 94, 235, 0.1);
$menu-item-backgroup-color: rgba(255, 255, 255, 0.3);
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (

2
frontend/src/views/app-store/apps/index.vue
View File

@ -33,7 +33,7 @@
</el-row>
</template>
<template #rightButton>
<el-button @click="sync" link :plain="true">{{ $t('app.syncAppList') }}</el-button>
<el-button @click="sync" type="primary" link :plain="true">{{ $t('app.syncAppList') }}</el-button>
</template>
<template #main>
<el-row :gutter="5">

1
frontend/src/views/host/file-management/change-role/index.vue
View File

@ -19,6 +19,7 @@
</template>
<script setup lang="ts">
import DrawerHeader from '@/components/drawer-header/index.vue';
import { ref } from 'vue';
import { File } from '@/api/interface/file';
import { ChangeFileMode } from '@/api/modules/files';

1
frontend/src/views/host/file-management/create/index.vue
View File

@ -60,6 +60,7 @@
</template>
<script setup lang="ts">
import DrawerHeader from '@/components/drawer-header/index.vue';
import { ref, reactive, computed } from 'vue';
import { File } from '@/api/interface/file';
import { ElMessage, FormInstance, FormRules } from 'element-plus';

2
frontend/src/views/login/components/login-form.vue
View File

@ -385,7 +385,7 @@ onMounted(() => {
margin-top: 10px;
}
& ::v-deep .el-input__inner {
& :deep .el-input__inner {
border-radius: 0;
}
}

6
frontend/src/views/setting/backup-account/index.vue
View File

@ -59,7 +59,7 @@
{{ s3Data.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFormat(0, 0, s3Data.createdAt) }}
{{ dateFormatSimple(s3Data.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
@ -101,7 +101,7 @@
{{ ossData.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFormat(0, 0, ossData.createdAt) }}
{{ dateFormatSimple(ossData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
@ -145,7 +145,7 @@
{{ minioData.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFormat(0, 0, minioData.createdAt) }}
{{ dateFormatSimple(minioData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">

1
frontend/src/views/website/ssl/acme-account/index.vue
View File

@ -21,6 +21,7 @@
</el-drawer>
</template>
<script lang="ts" setup>
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Website } from '@/api/interface/website';
import { DeleteAcmeAccount, SearchAcmeAccount } from '@/api/modules/website';
import ComplexTable from '@/components/complex-table/index.vue';

1
frontend/src/views/website/ssl/create/index.vue
View File

@ -92,6 +92,7 @@
</template>
<script lang="ts" setup>
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Website } from '@/api/interface/website';
import { CreateSSL, GetDnsResolve, SearchAcmeAccount, SearchDnsAccount } from '@/api/modules/website';
import { Rules } from '@/global/form-rules';

1
frontend/src/views/website/ssl/detail/index.vue
View File

@ -62,6 +62,7 @@
</el-drawer>
</template>
<script lang="ts" setup>
import DrawerHeader from '@/components/drawer-header/index.vue';
import { GetSSL } from '@/api/modules/website';
import { ref } from 'vue';
import { dateFormatSimple, getProvider } from '@/utils/util';

1
frontend/src/views/website/ssl/dns-account/index.vue
View File

@ -34,6 +34,7 @@
</template>
<script lang="ts" setup>
import DrawerHeader from '@/components/drawer-header/index.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import Create from './create/index.vue';
import { Website } from '@/api/interface/website';

10
frontend/src/views/website/ssl/index.vue
View File

@ -1,4 +1,5 @@
<template>
<div>
<RouterButton :buttons="routerButton" />
<LayoutContent :title="$t('website.ssl')">
<template #prompt>
@ -43,7 +44,12 @@
show-overflow-tooltip
prop="acmeAccount.email"
></el-table-column>
<el-table-column :label="$t('website.brand')" fix show-overflow-tooltip prop="type"></el-table-column>
<el-table-column
:label="$t('website.brand')"
fix
show-overflow-tooltip
prop="type"
></el-table-column>
<el-table-column
prop="expireDate"
:label="$t('website.expireDate')"
@ -65,10 +71,12 @@
<Renew ref="renewRef" @close="search()"></Renew>
<Detail ref="detailRef"></Detail>
</LayoutContent>
</div>
</template>
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import RouterButton from '@/components/router-button/index.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import { onMounted, reactive, ref } from 'vue';
import { DeleteSSL, SearchSSL } from '@/api/modules/website';

1
frontend/src/views/website/website/backup/index.vue
View File

@ -33,6 +33,7 @@
</template>
<script lang="ts" setup>
import DrawerHeader from '@/components/drawer-header/index.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import { reactive, ref } from 'vue';
import { dateFormat } from '@/utils/util';

19
frontend/src/views/website/website/config/basic/domain/create/index.vue
View File

@ -1,12 +1,18 @@
<template>
<el-dialog
<el-drawer
v-model="open"
:close-on-click-modal="false"
:title="$t('website.create')"
width="40%"
:title="$t('website.addDomain')"
size="40%"
:before-close="handleClose"
>
<el-form ref="domainForm" label-position="right" :model="domain" label-width="130px" :rules="rules">
<template #header>
<DrawerHeader :header="$t('website.addDomain')" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<el-form ref="domainForm" label-position="top" :model="domain" :rules="rules">
<el-form-item :label="$t('website.domain')" prop="domain">
<el-input v-model="domain.domain"></el-input>
</el-form-item>
@ -14,6 +20,8 @@
<el-input v-model.number="domain.port"></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@ -22,10 +30,11 @@
</el-button>
</span>
</template>
</el-dialog>
</el-drawer>
</template>
<script lang="ts" setup>
import DrawerHeader from '@/components/drawer-header/index.vue';
import { CreateDomain } from '@/api/modules/website';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';

8
frontend/src/views/website/website/config/basic/limit-conn/index.vue
View File

@ -1,17 +1,17 @@
<template>
<el-row :gutter="20">
<el-col :span="8" :offset="1">
<el-form-item prop="enable" :label="$t('website.enableOrNot')">
<el-switch v-model="enable" @change="changeEnable"></el-switch>
</el-form-item>
<el-form
ref="limitForm"
label-position="right"
label-position="left"
:model="form"
:rules="rules"
:loading="loading"
label-width="100px"
>
<el-form-item prop="enable" :label="$t('website.enableOrNot')">
<el-switch v-model="enable" @change="changeEnable"></el-switch>
</el-form-item>
<el-form-item :label="$t('website.limit')">
<el-select v-model="ruleKey" @change="changeRule(ruleKey)">
<el-option

1
frontend/src/views/website/website/create/index.vue
View File

@ -168,6 +168,7 @@
</template>
<script lang="ts" setup name="CreateWebSite">
import DrawerHeader from '@/components/drawer-header/index.vue';
import { App } from '@/api/interface/app';
import { Website } from '@/api/interface/website';
import { GetApp, GetAppDetail, SearchApp, GetAppInstalled } from '@/api/modules/app';

1
frontend/src/views/website/website/default/index.vue
View File

@ -37,6 +37,7 @@
</el-drawer>
</template>
<script lang="ts" setup>
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Website } from '@/api/interface/Website';
import { ChangeDefaultServer, ListWebsites } from '@/api/modules/website';
import i18n from '@/lang';

3
frontend/src/views/website/website/index.vue
View File

@ -1,4 +1,5 @@
<template>
<div>
<RouterButton
:buttons="[
{
@ -141,10 +142,12 @@
<UploadDialog ref="uploadRef" />
<BackupRecords ref="dialogBackupRef" />
<DefaultServer ref="defaultRef" />
</div>
</template>
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import RouterButton from '@/components/router-button/index.vue';
import BackupRecords from '@/views/website/website/backup/index.vue';
import UploadDialog from '@/views/website/website/upload/index.vue';
import DefaultServer from '@/views/website/website/default/index.vue';