diff options
Diffstat (limited to 'web/html/xui')
26 files changed, 1170 insertions, 1070 deletions
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'; - } }; - </script> {{end}} diff --git a/web/html/xui/component/password.html b/web/html/xui/component/password.html new file mode 100644 index 00000000..ebea3be6 --- /dev/null +++ b/web/html/xui/component/password.html @@ -0,0 +1,35 @@ +{{define "component/passwordInput"}} +<template> + <a-input :value="value" :type="showPassword ? 'text' : 'password'" + :placeholder="placeholder" + @input="$emit('input', $event.target.value)"> + <template v-if="icon" #prefix> + <a-icon :type="icon" :style="'font-size: 16px;' + themeSwitcher.textStyle" /> + </template> + <template #addonAfter> + <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" + @click="toggleShowPassword" + :style="'font-size: 16px;' + themeSwitcher.textStyle" /> + </template> + </a-input> +</template> +{{end}} + +{{define "component/password"}} +<script> + Vue.component('password-input', { + props: ["title", "value", "placeholder", "icon"], + template: `{{template "component/passwordInput"}}`, + data() { + return { + showPassword: false, + }; + }, + methods: { + toggleShowPassword() { + this.showPassword = !this.showPassword; + }, + }, + }); +</script> +{{end}}
\ No newline at end of file diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html new file mode 100644 index 00000000..35013a9e --- /dev/null +++ b/web/html/xui/component/themeSwitch.html @@ -0,0 +1,58 @@ +{{define "component/themeSwitchTemplate"}} +<template> + <a-switch :default-checked="themeSwitcher.isDarkTheme" + checked-children="☀" + un-checked-children="🌙" + @change="themeSwitcher.toggleTheme()"> + </a-switch> +</template> +{{end}} + +{{define "component/themeSwitcher"}} +<script> + const colors = { + dark: { + bg: "#242c3a", + text: "hsla(0,0%,100%,.65)" + }, + light: { + bg: '#f0f2f5', + text: "rgba(0, 0, 0, 0.7)", + } + } + + function createThemeSwitcher() { + const isDarkTheme = localStorage.getItem('dark-mode') === 'true'; + const theme = isDarkTheme ? 'dark' : 'light'; + return { + isDarkTheme, + bgStyle: `background: ${colors[theme].bg};`, + textStyle: `color: ${colors[theme].text};`, + darkClass: isDarkTheme ? 'ant-card-dark' : '', + darkCardClass: isDarkTheme ? 'ant-card-dark' : '', + darkDrawerClass: isDarkTheme ? 'ant-drawer-dark' : '', + get currentTheme() { + return this.isDarkTheme ? 'dark' : 'light'; + }, + toggleTheme() { + this.isDarkTheme = !this.isDarkTheme; + this.theme = this.isDarkTheme ? 'dark' : 'light'; + localStorage.setItem('dark-mode', this.isDarkTheme); + this.bgStyle = `background: ${colors[this.theme].bg};`; + this.textStyle = `color: ${colors[this.theme].text};`; + this.darkClass = this.isDarkTheme ? 'ant-card-dark' : ''; + this.darkCardClass = this.isDarkTheme ? 'ant-card-dark' : ''; + this.darkDrawerClass = this.isDarkTheme ? 'ant-drawer-dark' : ''; + }, + }; + } + + const themeSwitcher = createThemeSwitcher(); + + Vue.component('theme-switch', { + props: [], + template: `{{template "component/themeSwitchTemplate"}}`, + data: () => ({ themeSwitcher }), + }); +</script> +{{end}}
\ No newline at end of file diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html index 5f65756c..c8ab09cf 100644 --- a/web/html/xui/form/client.html +++ b/web/html/xui/form/client.html @@ -1,7 +1,9 @@ {{define "form/client"}} <a-form layout="inline" v-if="client"> <template v-if="isEdit"> - <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag> + <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;"> + Account is (Expired|Traffic Ended) And Disabled + </a-tag> </template> <a-form-item label='{{ i18n "pages.inbounds.enable" }}'> <a-switch v-model="client.enable"></a-switch> @@ -17,11 +19,12 @@ <a-icon type="sync" @click="getNewEmail(client)"></a-icon> </a-tooltip> </span> - <a-input v-model.trim="client.email" style="width: 200px;" ></a-input> + <a-input v-model.trim="client.email" style="width: 200px;"></a-input> </a-form-item> <a-form-item label="Password" v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS"> - <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon> - <a-input v-model.trim="client.password" style="width: 300px;" ></a-input> + <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" + @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon> + <a-input v-model.trim="client.password" style="width: 300px;"></a-input> </a-form-item> <br> <a-form-item label='{{ i18n "additional" }} ID' v-if="inbound.protocol === Protocols.VMESS"> @@ -85,26 +88,29 @@ </a-tooltip> </span> <a-form layout="block"> - <a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email,$event)" placeholder="Click To Get IPs" :auto-size="{ minRows: 2, maxRows: 10 }"> + <a-textarea id="clientIPs" readonly + @click="getDBClientIps(client.email,$event)" + placeholder="Click To Get IPs" + :auto-size="{ minRows: 2, maxRows: 10 }"> </a-textarea> </a-form> </a-form-item> <br> <a-form-item v-if="inbound.xtls" label="Flow"> - <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"> + <a-select v-model="client.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-else-if="inbound.canEnableTlsFlow()" label="Flow"> - <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"> + <a-select v-model="client.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> @@ -112,9 +118,10 @@ <a-icon type="question-circle" theme="filled"></a-icon> </a-tooltip> </span> - <a-input-number v-model="client._totalGB":min="0"></a-input-number> + <a-input-number v-model="client._totalGB" :min="0"></a-input-number> <template v-if="isEdit && clientStats"> - <br><span> {{ i18n "usage" }}:</span> + <br> + <span> {{ i18n "usage" }}:</span> <a-tag :color="statsColor"> [[ sizeFormat(clientStats.up) ]] / [[ sizeFormat(clientStats.down) ]] @@ -122,7 +129,8 @@ </a-tag> <a-tooltip> <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template> - <a-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)" v-if="client.email.length > 0"></a-icon> + <a-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)" + v-if="client.email.length > 0"></a-icon> </a-tooltip> </template> </a-form-item> @@ -136,7 +144,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> @@ -145,7 +153,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="client._expiryTime" style="width: 170px;"></a-date-picker> <a-tag color="red" v-if="isExpiry">Expired</a-tag> </a-form-item> diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html index 3c40447e..9b4c7904 100644 --- a/web/html/xui/form/inbound.html +++ b/web/html/xui/form/inbound.html @@ -8,7 +8,7 @@ <a-switch v-model="dbInbound.enable"></a-switch> </a-form-item> <a-form-item label='{{ i18n "protocol" }}'> - <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"> + <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="themeSwitcher.darkCardClass"> <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option> </a-select> </a-form-item> @@ -31,7 +31,7 @@ <br> <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> @@ -43,7 +43,7 @@ </a-form-item> <a-form-item> <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> @@ -52,7 +52,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="dbInbound._expiryTime" style="width: 300px;"></a-date-picker> </a-form-item> </a-form> diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html index 3e9e51ee..0eed31d4 100644 --- a/web/html/xui/form/protocol/dokodemo.html +++ b/web/html/xui/form/protocol/dokodemo.html @@ -8,7 +8,7 @@ </a-form-item> <br> <a-form-item label='{{ i18n "pages.inbounds.network"}}'> - <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"> + <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass"> <a-select-option value="tcp,udp">TCP+UDP</a-select-option> <a-select-option value="tcp">TCP</a-select-option> <a-select-option value="udp">UDP</a-select-option> diff --git a/web/html/xui/form/protocol/shadowsocks.html b/web/html/xui/form/protocol/shadowsocks.html index 35912d61..f37c1a90 100644 --- a/web/html/xui/form/protocol/shadowsocks.html +++ b/ |