diff options
Diffstat (limited to 'web/html')
30 files changed, 1247 insertions, 1117 deletions
diff --git a/web/html/common/prompt_modal.html b/web/html/common/prompt_modal.html index 4b8a13d0..17a65ec1 100644 --- a/web/html/common/prompt_modal.html +++ b/web/html/common/prompt_modal.html @@ -1,7 +1,7 @@ {{define "promptModal"}} <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title" :closable="true" @ok="promptModal.ok" :mask-closable="false" - :class="siderDrawer.isDarkTheme ? darkClass : ''" + :class="themeSwitcher.darkCardClass" :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'> <a-input id="prompt-modal-input" :type="promptModal.type" v-model="promptModal.value" @@ -36,12 +36,12 @@ }, confirm() {}, open({ - title='', - type='text', - value='', - okText='{{ i18n "sure"}}', - confirm=() => {}, - }) { + title = '', + type = 'text', + value = '', + okText = '{{ i18n "sure"}}', + confirm = () => {}, + }) { this.title = title; this.type = type; this.value = value; diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html index f492dabb..2bd2f00f 100644 --- a/web/html/common/qrcode_modal.html +++ b/web/html/common/qrcode_modal.html @@ -1,10 +1,12 @@ {{define "qrcodeModal"}} <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title" :closable="true" - :class="siderDrawer.isDarkTheme ? darkClass : ''" + :class="themeSwitcher.darkCardClass" :footer="null" width="300px"> - <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;" >{{ i18n "pages.inbounds.clickOnQRcode" }}</a-tag> + <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;"> + {{ i18n "pages.inbounds.clickOnQRcode" }} + </a-tag> <canvas @click="copyToClipboard()" id="qrCode" style="width: 100%; height: 100%;"></canvas> </a-modal> @@ -19,7 +21,7 @@ qrcode: null, clipboard: null, visible: false, - show: function (title='', content='', dbInbound=new DBInbound(), copyText='') { + show: function (title = '', content = '', dbInbound = new DBInbound(), copyText = '') { this.title = title; this.content = content; this.dbInbound = dbInbound; diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html index ce77d0ca..1514051b 100644 --- a/web/html/common/text_modal.html +++ b/web/html/common/text_modal.html @@ -1,7 +1,7 @@ {{define "textModal"}} <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title" :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}' - :class="siderDrawer.isDarkTheme ? darkClass : ''" + :class="themeSwitcher.darkCardClass" :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}"> <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;" :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)" @@ -21,7 +21,7 @@ qrcode: null, clipboard: null, visible: false, - show: function (title='', content='', fileName='') { + show: function (title = '', content = '', fileName = '') { this.title = title; this.content = content; this.fileName = fileName; diff --git a/web/html/login.html b/web/html/login.html index 2f4cb3e6..1b6478de 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -18,6 +18,12 @@ border-radius: 30px; } + .ant-input-group-addon { + border-radius: 0 30px 30px 0; + width: 50px; + font-size: 18px; + } + .ant-input-affix-wrapper .ant-input-prefix { left: 23px; } @@ -26,20 +32,26 @@ padding-left: 50px; } - .selectLang{ + .centered { display: flex; text-align: center; + align-items: center; justify-content: center; } + .title { + font-size: 32px; + font-weight: bold; + } + </style> <body> -<a-layout id="app" v-cloak> +<a-layout id="app" v-cloak :class="themeSwitcher.darkClass"> <transition name="list" appear> <a-layout-content> <a-row type="flex" justify="center"> <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8"> - <h1>{{ i18n "pages.login.title" }}</h1> + <h1 class="title">{{ i18n "pages.login.title" }}</h1> </a-col> </a-row> <a-row type="flex" justify="center"> @@ -48,35 +60,33 @@ <a-form-item> <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}' @keydown.enter.native="login" autofocus> - <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/> + <a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" /> </a-input> </a-form-item> <a-form-item> - <a-input type="password" v-model.trim="user.password" - placeholder='{{ i18n "password" }}' @keydown.enter.native="login"> - <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/> - </a-input> + <password-input icon="lock" v-model.trim="user.password" + placeholder='{{ i18n "password" }}' @keydown.enter.native="login"> + </password-input> </a-form-item> <a-form-item v-if="secretEnable"> - <a-input type="text" placeholder='{{ i18n "secretToken" }}' v-model.trim="user.loginSecret" @keydown.enter.native="login"> - <a-icon slot="prefix" type="key" style="color: rgba(0,0,0,.25)"/> + <password-input icon="key" v-model.trim="user.loginSecret" + placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login"> + </password-input> </a-input> </a-form-item> <a-form-item> - <a-button block @click="login" :loading="loading">{{ i18n "login" }}</a-button> + <a-row justify="center" class="centered"> + <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined" + :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }"> + [[ loading ? '' : '{{ i18n "login" }}' ]] + </a-button> + </a-row> </a-form-item> <a-form-item> - - <a-row justify="center" class="selectLang"> - <a-col :span="5"><span>Language :</span></a-col> - - <a-col :span="7"> - <a-select - ref="selectLang" - v-model="lang" - @change="setLang(lang)" - > - <a-select-option :value="l.value" label="English" v-for="l in supportLangs" > + <a-row justify="center" class="centered"> + <a-col :span="12"> + <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass"> + <a-select-option :value="l.value" label="English" v-for="l in supportLangs"> <span role="img" aria-label="l.name" v-text="l.icon"></span> <span v-text="l.name"></span> </a-select-option> @@ -84,6 +94,11 @@ </a-col> </a-row> </a-form-item> + <a-form-item> + <a-row justify="center" class="centered"> + <theme-switch /> + </a-row> + </a-form-item> </a-form> </a-col> </a-row> @@ -91,24 +106,24 @@ </transition> </a-layout> {{template "js" .}} +{{template "component/themeSwitcher" .}} +{{template "component/password" .}} <script> - const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16); - const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16); - const deg = RandomUtil.randomIntRange(0, 360); - const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`; - document.querySelector('#app').style.background = background; + const app = new Vue({ delimiters: ['[[', ']]'], el: '#app', data: { + themeSwitcher, loading: false, user: new User(), secretEnable: false, - lang : "" + lang: "" }, - created(){ - this.lang = getLang(); - this.secretEnable = this.getSecretStatus(); + created() { + this.updateBackground(); + this.lang = getLang(); + this.secretEnable = this.getSecretStatus(); }, methods: { async login() { @@ -120,16 +135,29 @@ } }, async getSecretStatus() { - this.loading= true; + this.loading = true; const msg = await HttpUtil.post('/getSecretStatus'); this.loading = false; - if (msg.success){ + if (msg.success) { this.secretEnable = msg.obj; return msg.obj; } - } - } + }, + updateBackground() { + const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16); + const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16); + const deg = RandomUtil.randomIntRange(0, 360); + const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`; + document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background; + }, + }, + watch: { + 'themeSwitcher.isDarkTheme'(newVal, oldVal) { + this.updateBackground(); + }, + }, }); + </script> </body> </html>
\ No newline at end of file diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html index d35d7278..076579a9 100644 --- a/web/html/xui/client_bulk_modal.html +++ b/web/html/xui/client_bulk_modal.html @@ -1,11 +1,11 @@ {{define "clientsBulkModal"}} <a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title" @ok="clientsBulkModal.ok" :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false" - :class="siderDrawer.isDarkTheme ? darkClass : ''" + :class="themeSwitcher.darkCardClass" :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'> <a-form layout="inline"> <a-form-item label='{{ i18n "pages.client.method" }}'> - <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"> + <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="themeSwitcher.darkCardClass"> <a-select-option :value="0">Random</a-select-option> <a-select-option :value="1">Random+Prefix</a-select-option> <a-select-option :value="2">Random+Prefix+Num</a-select-option> @@ -71,20 +71,20 @@ </a-form-item> <br> <a-form-item v-if="clientsBulkModal.inbound.xtls" label="Flow"> - <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"> + <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass"> <a-select-option value="">{{ i18n "none" }}</a-select-option> <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option> </a-select> </a-form-item> <a-form-item v-if="clientsBulkModal.inbound.canEnableTlsFlow()" label="Flow" layout="inline"> - <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"> + <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass"> <a-select-option value="" selected>{{ i18n "none" }}</a-select-option> <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option> </a-select> </a-form-item> <a-form-item> <span slot="label"> - <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB) + <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB) <a-tooltip> <template slot="title"> 0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span> @@ -104,7 +104,7 @@ </a-form-item> <a-form-item v-else> <span slot="label"> - <span >{{ i18n "pages.inbounds.expireDate" }}</span> + <span>{{ i18n "pages.inbounds.expireDate" }}</span> <a-tooltip> <template slot="title"> <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span> @@ -113,7 +113,7 @@ </a-tooltip> </span> <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" - :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''" + :dropdown-class-name="themeSwitcher.darkCardClass" v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker> </a-form-item> </a-form> @@ -143,37 +143,42 @@ delayedStart: false, ok() { clients = []; - method=clientsBulkModal.emailMethod; - if(method>1){ - start=clientsBulkModal.firstNum; - end=clientsBulkModal.lastNum + 1; + method = clientsBulkModal.emailMethod; + if (method > 1) { + start = clientsBulkModal.firstNum; + end = clientsBulkModal.lastNum + 1; } else { - start=0; - end=clientsBulkModal.quantity; + start = 0; + end = clientsBulkModal.quantity; } - prefix = (method>0 && clientsBulkModal.emailPrefix.length>0) ? clientsBulkModal.emailPrefix : ""; - useNum=(method>1); - postfix = (method>2 && clientsBulkModal.emailPostfix.length>0) ? clientsBulkModal.emailPostfix : ""; + prefix = (method > 0 && clientsBulkModal.emailPrefix.length > 0) ? clientsBulkModal.emailPrefix : ""; + useNum = (method > 1); + postfix = (method > 2 && clientsBulkModal.emailPostfix.length > 0) ? clientsBulkModal.emailPostfix : ""; for (let i = start; i < end; i++) { newClient = clientsBulkModal.newClient(clientsBulkModal.dbInbound.protocol); - if(method==4) newClient.email = ""; + if (method == 4) newClient.email = ""; newClient.email += useNum ? prefix + i.toString() + postfix : prefix + postfix; newClient.subId = clientsBulkModal.subId; newClient.tgId = clientsBulkModal.tgId; newClient.limitIp = clientsBulkModal.limitIp; newClient._totalGB = clientsBulkModal.totalGB; newClient._expiryTime = clientsBulkModal.expiryTime; - if(clientsBulkModal.inbound.canEnableTlsFlow()){ + if (clientsBulkModal.inbound.canEnableTlsFlow()) { newClient.flow = clientsBulkModal.flow; } - if(clientsBulkModal.inbound.xtls){ + if (clientsBulkModal.inbound.xtls) { newClient.flow = clientsBulkModal.flow; } clients.push(newClient); } ObjectUtil.execute(clientsBulkModal.confirm, clients, clientsBulkModal.dbInbound.id); }, - show({ title='', okText='{{ i18n "sure" }}', dbInbound=null, confirm=(inbound, dbInbound)=>{} }) { + show({ + title = '', + okText = '{{ i18n "sure" }}', + dbInbound = null, + confirm = (inbound, dbInbound) => { } + }) { this.visible = true; this.title = title; this.okText = okText; @@ -181,21 +186,21 @@ this.quantity = 1; this.totalGB = 0; this.expiryTime = 0; - this.emailMethod= 0; - this.limitIp= 0; - this.firstNum= 1; - this.lastNum= 1; - this.emailPrefix= ""; - this.emailPostfix= ""; - this.subId= ""; - this.tgId= ""; - this.flow= ""; + this.emailMethod = 0; + this.limitIp = 0; + this.firstNum = 1; + this.lastNum = 1; + this.emailPrefix = ""; + this.emailPostfix = ""; + this.subId = ""; + this.tgId = ""; + this.flow = ""; this.dbInbound = new DBInbound(dbInbound); this.inbound = dbInbound.toInbound(); this.delayedStart = false; }, getClients(protocol, clientSettings) { - switch(protocol){ + switch (protocol) { case Protocols.VMESS: return clientSettings.vmesses; case Protocols.VLESS: return clientSettings.vlesses; case Protocols.TROJAN: return clientSettings.trojans; @@ -230,10 +235,11 @@ get delayedExpireDays() { return this.clientsBulkModal.expiryTime < 0 ? this.clientsBulkModal.expiryTime / -86400000 : 0; }, - set delayedExpireDays(days){ + set delayedExpireDays(days) { this.clientsBulkModal.expiryTime = -86400000 * days; }, }, }); + </script> {{end}}
\ No newline at end of file diff --git a/web/html/xui/client_modal.html b/web/html/xui/client_modal.html index e459b520..89175f31 100644 --- a/web/html/xui/client_modal.html +++ b/web/html/xui/client_modal.html @@ -1,7 +1,7 @@ {{define "clientsModal"}} <a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok" :confirm-loading="clientModal.confirmLoading" :closable="true" :mask-closable="false" - :class="siderDrawer.isDarkTheme ? darkClass : ''" + :class="themeSwitcher.darkCardClass" :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'> {{template "form/client"}} </a-modal> @@ -23,13 +23,13 @@ isExpired: false, delayedStart: false, ok() { - if(clientModal.isEdit){ + if (clientModal.isEdit) { ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id, clientModal.oldClientId); } else { ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id); } }, - show({ title='', okText='{{ i18n "sure" }}', index=null, dbInbound=null, confirm=()=>{}, isEdit=false }) { + show({ title = '', okText = '{{ i18n "sure" }}', index = null, dbInbound = null, confirm = () => { }, isEdit = false }) { this.visible = true; this.title = title; this.okText = okText; @@ -40,11 +40,11 @@ this.index = index === null ? this.clients.length : index; this.isExpired = isEdit ? this.inbound.isExpiry(this.index) : false; this.delayedStart = false; - if (isEdit){ - if (this.clients[index].expiryTime < 0){ + if (isEdit) { + if (this.clients[index].expiryTime < 0) { this.delayedStart = true; } - this.oldClientId = this.getClientId(dbInbound.protocol,clients[index]); + this.oldClientId = this.getClientId(dbInbound.protocol, clients[index]); } else { this.addClient(this.inbound.protocol, this.clients); } @@ -52,7 +52,7 @@ this.confirm = confirm; }, getClients(protocol, clientSettings) { - switch(protocol){ + switch (protocol) { case Protocols.VMESS: return clientSettings.vmesses; case Protocols.VLESS: return clientSettings.vlesses; case Protocols.TROJAN: return clientSettings.trojans; @@ -61,7 +61,7 @@ } }, getClientId(protocol, client) { - switch(protocol){ + switch (protocol) { case Protocols.TROJAN: return client.password; case Protocols.SHADOWSOCKS: return client.email; default: return client.id; @@ -103,24 +103,24 @@ return this.clientModal.isEdit; }, get isTrafficExhausted() { - if(!clientStats) return false - if(clientStats.total <= 0) return false - if(clientStats.up + clientStats.down < clientStats.total) return false + if (!clientStats) return false + if (clientStats.total <= 0) return false + if (clientStats.up + clientStats.down < clientStats.total) return false return true }, get isExpiry() { return this.clientModal.isExpired }, get statsColor() { - if(!clientStats) return 'blue' - if(clientStats.total <= 0) return 'blue' - else if(clientStats.total > 0 && (clientStats.down+clientStats.up) < clientStats.total) return 'cyan' + if (!clientStats) return 'blue' + if (clientStats.total <= 0) return 'blue' + else if (clientStats.total > 0 && (clientStats.down + clientStats.up) < clientStats.total) return 'cyan' else return 'red' }, get delayedExpireDays() { return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0; }, - set delayedExpireDays(days){ + set delayedExpireDays(days) { this.client.expiryTime = -86400000 * days; }, }, @@ -129,13 +129,13 @@ var chars = 'abcdefghijklmnopqrstuvwxyz1234567890'; var string = ''; var len = 6 + Math.floor(Math.random() * 5); - for(var ii=0; ii<len; ii++){ + for (var ii = 0; ii < len; ii++) { string += chars[Math.floor(Math.random() * chars.length)]; } client.email = string; }, - async getDBClientIps(email,event) { - const msg = await HttpUtil.post('/xui/inbound/clientIps/'+ email); + async getDBClientIps(email, event) { + const msg = await HttpUtil.post('/xui/inbound/clientIps/' + email); if (!msg.success) { return; } @@ -149,22 +149,22 @@ } }, async clearDBClientIps(email) { - const msg = await HttpUtil.post('/xui/inbound/clearClientIps/'+ email); + const msg = await HttpUtil.post('/xui/inbound/clearClientIps/' + email); if (!msg.success) { return; } document.getElementById("clientIPs").value = "" }, - resetClientTraffic(email,dbInboundId,iconElement) { + resetClientTraffic(email, dbInboundId, iconElement) { this.$confirm({ title: '{{ i18n "pages.inbounds.resetTraffic"}}', content: '{{ i18n "pages.inbounds.resetTrafficContent"}}', - class: siderDrawer.isDarkTheme ? darkClass : '', + class: themeSwitcher.darkCardClass, okText: '{{ i18n "reset"}}', cancelText: '{{ i18n "cancel"}}', onOk: async () => { iconElement.disabled = true; - const msg = await HttpUtil.postWithModal('/xui/inbound/' + dbInboundId + '/resetClientTraffic/'+ email); + const msg = await HttpUtil.postWithModal('/xui/inbound/' + dbInboundId + '/resetClientTraffic/' + email); if (msg.success) { this.clientModal.clientStats.up = 0; this.clientModal.clientStats.down = 0; @@ -175,5 +175,6 @@ }, }, }); + </script> {{end}} diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html index d059e920..94a2e4a3 100644 --- a/web/html/xui/common_sider.html +++ b/web/html/xui/common_sider.html @@ -23,17 +23,14 @@ {{define "commonSider"}} -<a-layout-sider :theme="siderDrawer.theme" id="sider" collapsible breakpoint="md" collapsed-width="0"> - <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys=""> +<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md" collapsed-width="0"> + <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys=""> <a-menu-item mode="inline"> <a-icon type="bg-colors"></a-icon> - <a-switch :default-checked="siderDrawer.isDarkTheme" - checked-children="☀" - un-checked-children="🌙" - @change="siderDrawer.changeTheme()"></a-switch> + <theme-switch /> </a-menu-item> </a-menu> - <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']" + <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']" @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key"> {{template "menuItems" .}} </a-menu> @@ -41,32 +38,25 @@ <a-drawer id="sider-drawer" placement="left" :closable="false" @close="siderDrawer.close()" :visible="siderDrawer.visible" - :wrap-class-name="siderDrawer.isDarkTheme ? 'ant-drawer-dark' : ''" + :wrap-class-name="themeSwitcher.darkDrawerClass" :wrap-style="{ padding: 0 }"> <div class="drawer-handle" @click="siderDrawer.change()" slot="handle"> <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon> </div> - <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys=""> + <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys=""> <a-menu-item mode="inline"> <a-icon type="bg-colors"></a-icon> - <a-switch :default-checked="siderDrawer.isDarkTheme" - checked-children="☀" - un-checked-children="🌙" - @change="siderDrawer.changeTheme()"></a-switch> + <theme-switch /> </a-menu-item> </a-menu> - <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']" + <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']" @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key"> {{template "menuItems" .}} </a-menu> </a-drawer> <script> - const darkClass = "ant-card-dark"; - const bgDarkStyle = "background-color: #242c3a"; const siderDrawer = { visible: false, - collapsed: false, - isDarkTheme: localStorage.getItem("dark-mode") === 'false' ? false : true, show() { this.visible = true; }, @@ -76,17 +66,6 @@ change() { this.visible = !this.visible; }, - toggleCollapsed() { - this.collapsed = !this.collapsed; - }, - changeTheme() { - this.isDarkTheme = ! this.isDarkTheme; - localStorage.setItem("dark-mode", this.isDarkTheme); - }, - get theme() { - return this.isDarkTheme ? 'dark' : 'light'; - } <
|