1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-12-18 05:19:19 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

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

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

10
frontend/src/layout/layout-content.vue
View file

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

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

@ -1,4 +1,6 @@
$primary-color: #005eeb; $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 ( @forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: ( $colors: (
'primary': ( 'primary': (

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

@ -33,7 +33,7 @@
</el-row> </el-row>
</template> </template>
<template #rightButton> <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>
<template #main> <template #main>
<el-row :gutter="5"> <el-row :gutter="5">

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

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

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

@ -60,6 +60,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import DrawerHeader from '@/components/drawer-header/index.vue';
import { ref, reactive, computed } from 'vue'; import { ref, reactive, computed } from 'vue';
import { File } from '@/api/interface/file'; import { File } from '@/api/interface/file';
import { ElMessage, FormInstance, FormRules } from 'element-plus'; 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; margin-top: 10px;
} }
& ::v-deep .el-input__inner { & :deep .el-input__inner {
border-radius: 0; border-radius: 0;
} }
} }

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

@ -59,7 +59,7 @@
{{ s3Data.bucket }} {{ s3Data.bucket }}
</el-form-item> </el-form-item>
<el-form-item :label="$t('commons.table.createdAt')"> <el-form-item :label="$t('commons.table.createdAt')">
{{ dateFormat(0, 0, s3Data.createdAt) }} {{ dateFormatSimple(s3Data.createdAt) }}
</el-form-item> </el-form-item>
</div> </div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false"> <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
@ -101,7 +101,7 @@
{{ ossData.bucket }} {{ ossData.bucket }}
</el-form-item> </el-form-item>
<el-form-item :label="$t('commons.table.createdAt')"> <el-form-item :label="$t('commons.table.createdAt')">
{{ dateFormat(0, 0, ossData.createdAt) }} {{ dateFormatSimple(ossData.createdAt) }}
</el-form-item> </el-form-item>
</div> </div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false"> <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
@ -145,7 +145,7 @@
{{ minioData.bucket }} {{ minioData.bucket }}
</el-form-item> </el-form-item>
<el-form-item :label="$t('commons.table.createdAt')"> <el-form-item :label="$t('commons.table.createdAt')">
{{ dateFormat(0, 0, minioData.createdAt) }} {{ dateFormatSimple(minioData.createdAt) }}
</el-form-item> </el-form-item>
</div> </div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false"> <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> </el-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Website } from '@/api/interface/website'; import { Website } from '@/api/interface/website';
import { DeleteAcmeAccount, SearchAcmeAccount } from '@/api/modules/website'; import { DeleteAcmeAccount, SearchAcmeAccount } from '@/api/modules/website';
import ComplexTable from '@/components/complex-table/index.vue'; import ComplexTable from '@/components/complex-table/index.vue';

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

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

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

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

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

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

140
frontend/src/views/website/ssl/index.vue
View file

@ -1,74 +1,82 @@
<template> <template>
<RouterButton :buttons="routerButton" /> <div>
<LayoutContent :title="$t('website.ssl')"> <RouterButton :buttons="routerButton" />
<template #prompt> <LayoutContent :title="$t('website.ssl')">
<el-alert type="info" :closable="false"> <template #prompt>
<template #default> <el-alert type="info" :closable="false">
<span><span v-html="$t('website.encryptHelper')"></span></span> <template #default>
</template> <span><span v-html="$t('website.encryptHelper')"></span></span>
</el-alert> </template>
</template> </el-alert>
<template #toolbar> </template>
<el-button type="primary" @click="openSSL()"> <template #toolbar>
{{ $t('ssl.create') }} <el-button type="primary" @click="openSSL()">
</el-button> {{ $t('ssl.create') }}
<el-button type="primary" plain @click="openAcmeAccount()"> </el-button>
{{ $t('website.acmeAccountManage') }} <el-button type="primary" plain @click="openAcmeAccount()">
</el-button> {{ $t('website.acmeAccountManage') }}
<el-button type="primary" plain @click="openDnsAccount()"> </el-button>
{{ $t('website.dnsAccountManage') }} <el-button type="primary" plain @click="openDnsAccount()">
</el-button> {{ $t('website.dnsAccountManage') }}
</template> </el-button>
<template #main> </template>
<br /> <template #main>
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()"> <br />
<el-table-column <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
:label="$t('website.domain')" <el-table-column
fix :label="$t('website.domain')"
show-overflow-tooltip fix
prop="primaryDomain" show-overflow-tooltip
></el-table-column> prop="primaryDomain"
<el-table-column ></el-table-column>
:label="$t('website.otherDomains')" <el-table-column
fix :label="$t('website.otherDomains')"
show-overflow-tooltip fix
prop="domains" show-overflow-tooltip
></el-table-column> prop="domains"
<el-table-column :label="$t('ssl.provider')" fix show-overflow-tooltip prop="provider"> ></el-table-column>
<template #default="{ row }">{{ getProvider(row.provider) }}</template> <el-table-column :label="$t('ssl.provider')" fix show-overflow-tooltip prop="provider">
</el-table-column> <template #default="{ row }">{{ getProvider(row.provider) }}</template>
<el-table-column </el-table-column>
:label="$t('ssl.acmeAccount')" <el-table-column
fix :label="$t('ssl.acmeAccount')"
show-overflow-tooltip fix
prop="acmeAccount.email" show-overflow-tooltip
></el-table-column> prop="acmeAccount.email"
<el-table-column :label="$t('website.brand')" fix show-overflow-tooltip prop="type"></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="expireDate" :label="$t('website.brand')"
:label="$t('website.expireDate')" fix
:formatter="dateFormat" show-overflow-tooltip
show-overflow-tooltip prop="type"
/> ></el-table-column>
<fu-table-operations <el-table-column
:ellipsis="3" prop="expireDate"
:buttons="buttons" :label="$t('website.expireDate')"
:label="$t('commons.table.operate')" :formatter="dateFormat"
fixed="right" show-overflow-tooltip
fix />
/> <fu-table-operations
</ComplexTable> :ellipsis="3"
</template> :buttons="buttons"
<DnsAccount ref="dnsAccountRef"></DnsAccount> :label="$t('commons.table.operate')"
<AcmeAccount ref="acmeAccountRef"></AcmeAccount> fixed="right"
<Create ref="sslCreateRef" @close="search()"></Create> fix
<Renew ref="renewRef" @close="search()"></Renew> />
<Detail ref="detailRef"></Detail> </ComplexTable>
</LayoutContent> </template>
<DnsAccount ref="dnsAccountRef"></DnsAccount>
<AcmeAccount ref="acmeAccountRef"></AcmeAccount>
<Create ref="sslCreateRef" @close="search()"></Create>
<Renew ref="renewRef" @close="search()"></Renew>
<Detail ref="detailRef"></Detail>
</LayoutContent>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue'; import LayoutContent from '@/layout/layout-content.vue';
import RouterButton from '@/components/router-button/index.vue';
import ComplexTable from '@/components/complex-table/index.vue'; import ComplexTable from '@/components/complex-table/index.vue';
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import { DeleteSSL, SearchSSL } from '@/api/modules/website'; import { DeleteSSL, SearchSSL } from '@/api/modules/website';

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

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

33
frontend/src/views/website/website/config/basic/domain/create/index.vue
View file

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

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

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

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

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

281
frontend/src/views/website/website/index.vue
View file

@ -1,150 +1,153 @@
<template> <template>
<RouterButton <div>
:buttons="[ <RouterButton
{ :buttons="[
label: i18n.global.t('website.website'), {
path: '/websites', label: i18n.global.t('website.website'),
}, path: '/websites',
]" },
/> ]"
<br /> />
<LayoutContent :title="$t('website.website')" v-loading="loading"> <br />
<template #app> <LayoutContent :title="$t('website.website')" v-loading="loading">
<AppStatus <template #app>
:app-key="'nginx'" <AppStatus
@setting="setting" :app-key="'nginx'"
v-model:loading="loading" @setting="setting"
@is-exist="checkExist" v-model:loading="loading"
></AppStatus> @is-exist="checkExist"
</template> ></AppStatus>
<template v-if="nginxIsExist && !openNginxConfig" #toolbar> </template>
<el-row :class="{ mask: nginxStatus != 'Running' }"> <template v-if="nginxIsExist && !openNginxConfig" #toolbar>
<el-col :span="20"> <el-row :class="{ mask: nginxStatus != 'Running' }">
<el-button type="primary" @click="openCreate"> <el-col :span="20">
{{ $t('website.create') }} <el-button type="primary" @click="openCreate">
</el-button> {{ $t('website.create') }}
<el-button type="primary" plain @click="openGroup">
{{ $t('website.group') }}
</el-button>
<el-button type="primary" plain @click="openDefault">
{{ $t('website.defaulServer') }}
</el-button>
</el-col>
<el-col :span="4">
<div class="search-button">
<el-input
v-model="req.name"
clearable
@clear="search()"
suffix-icon="Search"
@keyup.enter="search()"
@blur="search()"
:placeholder="$t('commons.button.search')"
></el-input>
</div>
</el-col>
</el-row>
</template>
<template v-if="nginxIsExist && !openNginxConfig" #search>
<div :class="{ mask: nginxStatus != 'Running' }">
<el-select v-model="req.websiteGroupId" @change="search()">
<el-option :label="$t('website.allGroup')" :value="0"></el-option>
<el-option
v-for="(group, index) in groups"
:key="index"
:label="group.name"
:value="group.id"
></el-option>
</el-select>
</div>
</template>
<template v-if="nginxIsExist && !openNginxConfig" #main>
<ComplexTable
:pagination-config="paginationConfig"
:data="data"
@search="search()"
:class="{ mask: nginxStatus != 'Running' }"
>
<el-table-column :label="$t('commons.table.name')" fix show-overflow-tooltip prop="primaryDomain">
<template #default="{ row }">
<el-link type="primary" @click="openConfig(row.id)">
{{ row.primaryDomain }}
</el-link>
</template>
</el-table-column>
<el-table-column :label="$t('commons.table.type')" fix prop="type">
<template #default="{ row }">
{{ $t('website.' + row.type) }}
</template>
</el-table-column>
<el-table-column :label="$t('commons.table.status')" prop="status">
<template #default="{ row }">
<el-button
v-if="row.status === 'Running'"
link
type="success"
@click="opWebsite('stop', row.id)"
>
{{ $t('commons.status.running') }}
</el-button> </el-button>
<el-button v-else link type="danger" @click="opWebsite('start', row.id)"> <el-button type="primary" plain @click="openGroup">
{{ $t('commons.status.stopped') }} {{ $t('website.group') }}
</el-button> </el-button>
</template> <el-button type="primary" plain @click="openDefault">
</el-table-column> {{ $t('website.defaulServer') }}
<el-table-column :label="$t('website.remark')" prop="remark"></el-table-column> </el-button>
<el-table-column :label="$t('website.protocol')" prop="protocol"></el-table-column> </el-col>
<el-table-column :label="$t('website.expireDate')"> <el-col :span="4">
<template #default="{ row, $index }"> <div class="search-button">
<div v-show="row.showdate"> <el-input
<el-date-picker v-model="req.name"
v-model="row.expireDate" clearable
type="date" @clear="search()"
:disabled-date="checkDate" suffix-icon="Search"
:shortcuts="shortcuts" @keyup.enter="search()"
:clearable="false" @blur="search()"
:default-value="setDate(row.expireDate)" :placeholder="$t('commons.button.search')"
:ref="(el) => setdateRefs(el, $index)" ></el-input>
@change="submitDate(row)"
@visible-change="(visibility:boolean) => pickerVisibility(visibility, row)"
size="small"
></el-date-picker>
</div> </div>
<div v-show="!row.showdate"> </el-col>
<span v-if="isEver(row.expireDate)" @click="openDatePicker(row, $index)"> </el-row>
{{ $t('website.neverExpire') }} </template>
</span> <template v-if="nginxIsExist && !openNginxConfig" #search>
<span v-else @click="openDatePicker(row, $index)"> <div :class="{ mask: nginxStatus != 'Running' }">
{{ dateFormatSimple(row.expireDate) }} <el-select v-model="req.websiteGroupId" @change="search()">
</span> <el-option :label="$t('website.allGroup')" :value="0"></el-option>
</div> <el-option
</template> v-for="(group, index) in groups"
</el-table-column> :key="index"
<fu-table-operations :label="group.name"
:ellipsis="10" :value="group.id"
width="260px" ></el-option>
:buttons="buttons" </el-select>
:label="$t('commons.table.operate')" </div>
fixed="right" </template>
fix <template v-if="nginxIsExist && !openNginxConfig" #main>
/> <ComplexTable
</ComplexTable> :pagination-config="paginationConfig"
<el-card width="30%" v-if="nginxStatus != 'Running'" class="mask-prompt"> :data="data"
<span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['OpenResty']) }}</span> @search="search()"
</el-card> :class="{ mask: nginxStatus != 'Running' }"
</template> >
</LayoutContent> <el-table-column :label="$t('commons.table.name')" fix show-overflow-tooltip prop="primaryDomain">
<NginxConfig v-if="openNginxConfig" v-loading="loading" :containerName="containerName" :status="nginxStatus" /> <template #default="{ row }">
<CreateWebSite ref="createRef" @close="search" /> <el-link type="primary" @click="openConfig(row.id)">
<DeleteWebsite ref="deleteRef" @close="search" /> {{ row.primaryDomain }}
<WebSiteGroup ref="groupRef" /> </el-link>
<UploadDialog ref="uploadRef" /> </template>
<BackupRecords ref="dialogBackupRef" /> </el-table-column>
<DefaultServer ref="defaultRef" /> <el-table-column :label="$t('commons.table.type')" fix prop="type">
<template #default="{ row }">
{{ $t('website.' + row.type) }}
</template>
</el-table-column>
<el-table-column :label="$t('commons.table.status')" prop="status">
<template #default="{ row }">
<el-button
v-if="row.status === 'Running'"
link
type="success"
@click="opWebsite('stop', row.id)"
>
{{ $t('commons.status.running') }}
</el-button>
<el-button v-else link type="danger" @click="opWebsite('start', row.id)">
{{ $t('commons.status.stopped') }}
</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('website.remark')" prop="remark"></el-table-column>
<el-table-column :label="$t('website.protocol')" prop="protocol"></el-table-column>
<el-table-column :label="$t('website.expireDate')">
<template #default="{ row, $index }">
<div v-show="row.showdate">
<el-date-picker
v-model="row.expireDate"
type="date"
:disabled-date="checkDate"
:shortcuts="shortcuts"
:clearable="false"
:default-value="setDate(row.expireDate)"
:ref="(el) => setdateRefs(el, $index)"
@change="submitDate(row)"
@visible-change="(visibility:boolean) => pickerVisibility(visibility, row)"
size="small"
></el-date-picker>
</div>
<div v-show="!row.showdate">
<span v-if="isEver(row.expireDate)" @click="openDatePicker(row, $index)">
{{ $t('website.neverExpire') }}
</span>
<span v-else @click="openDatePicker(row, $index)">
{{ dateFormatSimple(row.expireDate) }}
</span>
</div>
</template>
</el-table-column>
<fu-table-operations
:ellipsis="10"
width="260px"
:buttons="buttons"
:label="$t('commons.table.operate')"
fixed="right"
fix
/>
</ComplexTable>
<el-card width="30%" v-if="nginxStatus != 'Running'" class="mask-prompt">
<span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['OpenResty']) }}</span>
</el-card>
</template>
</LayoutContent>
<NginxConfig v-if="openNginxConfig" v-loading="loading" :containerName="containerName" :status="nginxStatus" />
<CreateWebSite ref="createRef" @close="search" />
<DeleteWebsite ref="deleteRef" @close="search" />
<WebSiteGroup ref="groupRef" />
<UploadDialog ref="uploadRef" />
<BackupRecords ref="dialogBackupRef" />
<DefaultServer ref="defaultRef" />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue'; 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 BackupRecords from '@/views/website/website/backup/index.vue';
import UploadDialog from '@/views/website/website/upload/index.vue'; import UploadDialog from '@/views/website/website/upload/index.vue';
import DefaultServer from '@/views/website/website/default/index.vue'; import DefaultServer from '@/views/website/website/default/index.vue';