Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-05-13 17:46:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(frontend): Phase 5d-ii — settings General tab

Browse source 
Ports the panel/general partial (the largest single tab) — six
collapse panels: General, Notifications, Certificates, External
traffic webhook, Date and time, LDAP.

- GeneralTab.vue receives the reactive AllSetting via props and binds
  fields directly with v-model:value; SettingsPage stays the sole
  fetch/save owner.
- remarkModel/remarkSeparator surfaced as computed v-models that
  read+write the underlying single-string field (legacy stores them
  packed as <separator><orderedKeys>, e.g. "-ieo").
- LDAP inbound-tags select binds to a CSV ↔ array computed; inbound
  options come from /panel/api/inbounds/list on mount.
- Language select stays cookie-based via LanguageManager and reloads
  on change — same UX as legacy.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MHSanaei 2026-05-08 13:05:51 +02:00
parent 7838df211b
commit 56cdf05909
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
2 changed files with 477 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

475
frontend/src/pages/settings/GeneralTab.vue Normal file
View file

@ -0,0 +1,475 @@
<script setup>
import { computed, onMounted, ref } from 'vue';
import { HttpUtil, LanguageManager } from '@/utils';
import SettingListItem from '@/components/SettingListItem.vue';
const props = defineProps({
// Reactive AllSetting instance shared with the parent page.
allSetting: { type: Object, required: true },
});
// Remark model — legacy stores it as a single string where index 0 is
// the separator char and the rest is the order of model keys
// (i=Inbound, e=Email, o=Other). Surface it as two v-models that read
// and write the underlying string.
const remarkModels = { i: 'Inbound', e: 'Email', o: 'Other' };
const remarkSeparators = [' ', '-', '_', '@', ':', '~', '|', ',', '.', '/'];
const remarkModel = computed({
get: () => {
const rm = props.allSetting.remarkModel || '';
return rm.length > 1 ? rm.substring(1).split('') : [];
},
set: (value) => {
const sep = (props.allSetting.remarkModel || '-').charAt(0);
props.allSetting.remarkModel = sep + value.join('');
},
});
const remarkSeparator = computed({
get: () => {
const rm = props.allSetting.remarkModel || '-';
return rm.length > 1 ? rm.charAt(0) : '-';
},
set: (value) => {
const tail = (props.allSetting.remarkModel || '-').substring(1);
props.allSetting.remarkModel = value + tail;
},
});
const remarkSample = computed(() => {
const parts = remarkModel.value.map((k) => remarkModels[k]);
return parts.length === 0 ? '' : parts.join(remarkSeparator.value);
});
const datepicker = computed({
get: () => props.allSetting.datepicker || 'gregorian',
set: (value) => { props.allSetting.datepicker = value; },
});
const datepickerList = [
{ name: 'Gregorian (Standard)', value: 'gregorian' },
{ name: 'Jalalian (شمسی)', value: 'jalalian' },
];
// Language is stored client-side in a cookie, NOT in AllSetting. The
// legacy panel reloads on change so the Go side renders templates in
// the new language.
const lang = ref(LanguageManager.getLanguage());
function onLangChange() {
LanguageManager.setLanguage(lang.value);
}
// LDAP inbound tags are CSV on the wire; expose as an array so the
// multi-select v-model works directly.
const ldapInboundTagList = computed({
get: () => {
const csv = props.allSetting.ldapInboundTags || '';
return csv.length ? csv.split(',').map((s) => s.trim()).filter(Boolean) : [];
},
set: (list) => {
props.allSetting.ldapInboundTags = Array.isArray(list) ? list.join(',') : '';
},
});
const inboundOptions = ref([]);
async function loadInboundTags() {
const msg = await HttpUtil.get('/panel/api/inbounds/list');
if (msg?.success && Array.isArray(msg.obj)) {
inboundOptions.value = msg.obj.map((ib) => ({
label: `${ib.tag} (${ib.protocol}@${ib.port})`,
value: ib.tag,
}));
} else {
inboundOptions.value = [];
}
}
onMounted(loadInboundTags);
</script>
<template>
<a-collapse default-active-key="1">
<a-collapse-panel key="1" header="General">
<SettingListItem paddings="small">
<template #title>Remark model</template>
<template #description>Sample: <i>#{{ remarkSample }}</i></template>
<template #control>
<a-input-group :style="{ width: '100%' }">
<a-select
v-model:value="remarkModel"
mode="multiple"
:style="{ paddingRight: '.5rem', minWidth: '80%', width: 'auto' }"
>
<a-select-option v-for="(label, key) in remarkModels" :key="key" :value="key">
{{ label }}
</a-select-option>
</a-select>
<a-select v-model:value="remarkSeparator" :style="{ width: '20%' }">
<a-select-option v-for="sep in remarkSeparators" :key="sep" :value="sep">{{ sep }}</a-select-option>
</a-select>
</a-input-group>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Panel listen IP</template>
<template #description>The IP the panel binds to. Leave empty to listen on all interfaces.</template>
<template #control>
<a-input v-model:value="allSetting.webListen" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Panel domain</template>
<template #description>Optional domain used in URLs and certs.</template>
<template #control>
<a-input v-model:value="allSetting.webDomain" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Panel port</template>
<template #description>Restart required after changing.</template>
<template #control>
<a-input-number
v-model:value="allSetting.webPort"
:min="1"
:max="65535"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Panel base path</template>
<template #description>The URL prefix the panel is served under. Default is "/".</template>
<template #control>
<a-input v-model:value="allSetting.webBasePath" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Session max age (minutes)</template>
<template #description>Login session lifetime.</template>
<template #control>
<a-input-number
v-model:value="allSetting.sessionMaxAge"
:min="60"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Page size</template>
<template #description>Inbounds table page size. 0 disables pagination.</template>
<template #control>
<a-input-number
v-model:value="allSetting.pageSize"
:min="0"
:step="5"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Language</template>
<template #control>
<a-select v-model:value="lang" :style="{ width: '100%' }" @change="onLangChange">
<a-select-option
v-for="l in LanguageManager.supportedLanguages"
:key="l.value"
:value="l.value"
:label="l.value"
>
<span role="img" :aria-label="l.name">{{ l.icon }}</span>
&nbsp;&nbsp;<span>{{ l.name }}</span>
</a-select-option>
</a-select>
</template>
</SettingListItem>
</a-collapse-panel>
<a-collapse-panel key="2" header="Notifications">
<SettingListItem paddings="small">
<template #title>Expiry notification (days)</template>
<template #description>Notify before clients expire (0 = disabled).</template>
<template #control>
<a-input-number
v-model:value="allSetting.expireDiff"
:min="0"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Traffic notification (GB)</template>
<template #description>Notify before clients run out of traffic (0 = disabled).</template>
<template #control>
<a-input-number
v-model:value="allSetting.trafficDiff"
:min="0"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
</a-collapse-panel>
<a-collapse-panel key="3" header="Certificates">
<SettingListItem paddings="small">
<template #title>Public key path</template>
<template #description>Absolute path to the panel's TLS certificate.</template>
<template #control>
<a-input v-model:value="allSetting.webCertFile" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Private key path</template>
<template #description>Absolute path to the panel's TLS private key.</template>
<template #control>
<a-input v-model:value="allSetting.webKeyFile" type="text" />
</template>
</SettingListItem>
</a-collapse-panel>
<a-collapse-panel key="4" header="External traffic webhook">
<SettingListItem paddings="small">
<template #title>Enable external traffic info</template>
<template #description>Push traffic events to an external endpoint.</template>
<template #control>
<a-switch v-model:checked="allSetting.externalTrafficInformEnable" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>External traffic URI</template>
<template #description>HTTP(S) endpoint that receives traffic events.</template>
<template #control>
<a-input
v-model:value="allSetting.externalTrafficInformURI"
placeholder="(http|https)://domain[:port]/path/"
type="text"
/>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Restart xray on client disable</template>
<template #description>Apply changes immediately by restarting xray.</template>
<template #control>
<a-switch v-model:checked="allSetting.restartXrayOnClientDisable" />
</template>
</SettingListItem>
</a-collapse-panel>
<a-collapse-panel key="5" header="Date and time">
<SettingListItem paddings="small">
<template #title>Time location</template>
<template #description>IANA timezone, e.g. "Local", "UTC", "Asia/Tehran".</template>
<template #control>
<a-input v-model:value="allSetting.timeLocation" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Date picker</template>
<template #description>Calendar style used for expiry pickers.</template>
<template #control>
<a-select v-model:value="datepicker" :style="{ width: '100%' }">
<a-select-option v-for="item in datepickerList" :key="item.value" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select>
</template>
</SettingListItem>
</a-collapse-panel>
<a-collapse-panel key="6" header="LDAP">
<SettingListItem paddings="small">
<template #title>Enable LDAP sync</template>
<template #control>
<a-switch v-model:checked="allSetting.ldapEnable" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>LDAP host</template>
<template #control>
<a-input v-model:value="allSetting.ldapHost" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>LDAP port</template>
<template #control>
<a-input-number
v-model:value="allSetting.ldapPort"
:min="1"
:max="65535"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Use TLS (LDAPS)</template>
<template #control>
<a-switch v-model:checked="allSetting.ldapUseTLS" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Bind DN</template>
<template #control>
<a-input v-model:value="allSetting.ldapBindDN" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Password</template>
<template #control>
<a-input-password v-model:value="allSetting.ldapPassword" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Base DN</template>
<template #control>
<a-input v-model:value="allSetting.ldapBaseDN" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>User filter</template>
<template #control>
<a-input v-model:value="allSetting.ldapUserFilter" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>User attribute (username/email)</template>
<template #control>
<a-input v-model:value="allSetting.ldapUserAttr" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>VLESS flag attribute</template>
<template #control>
<a-input v-model:value="allSetting.ldapVlessField" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Generic flag attribute (optional)</template>
<template #description>If set, overrides VLESS flag — e.g. shadowInactive.</template>
<template #control>
<a-input v-model:value="allSetting.ldapFlagField" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Truthy values</template>
<template #description>Comma-separated; default: true,1,yes,on</template>
<template #control>
<a-input v-model:value="allSetting.ldapTruthyValues" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Invert flag</template>
<template #description>Enable when the attribute means disabled (e.g. shadowInactive).</template>
<template #control>
<a-switch v-model:checked="allSetting.ldapInvertFlag" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Sync schedule</template>
<template #description>Cron-like string, e.g. @every 1m</template>
<template #control>
<a-input v-model:value="allSetting.ldapSyncCron" type="text" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Inbound tags</template>
<template #description>Inbounds that LDAP sync may auto-create or auto-delete clients on.</template>
<template #control>
<a-select
v-model:value="ldapInboundTagList"
mode="multiple"
:style="{ width: '100%' }"
>
<a-select-option v-for="opt in inboundOptions" :key="opt.value" :value="opt.value">
{{ opt.label }}
</a-select-option>
</a-select>
<div v-if="inboundOptions.length === 0" class="ldap-no-inbounds">
No inbounds found. Create one in Inbounds first.
</div>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Auto create clients</template>
<template #control>
<a-switch v-model:checked="allSetting.ldapAutoCreate" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Auto delete clients</template>
<template #control>
<a-switch v-model:checked="allSetting.ldapAutoDelete" />
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Default total (GB)</template>
<template #control>
<a-input-number
v-model:value="allSetting.ldapDefaultTotalGB"
:min="0"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Default expiry (days)</template>
<template #control>
<a-input-number
v-model:value="allSetting.ldapDefaultExpiryDays"
:min="0"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
<SettingListItem paddings="small">
<template #title>Default IP limit</template>
<template #control>
<a-input-number
v-model:value="allSetting.ldapDefaultLimitIP"
:min="0"
:style="{ width: '100%' }"
/>
</template>
</SettingListItem>
</a-collapse-panel>
</a-collapse>
</template>
<style scoped>
.ldap-no-inbounds {
margin-top: 6px;
color: #999;
font-size: 12px;
}
</style>

3
frontend/src/pages/settings/SettingsPage.vue
View file

@ -14,6 +14,7 @@ import { theme as themeState } from '@/composables/useTheme.js';
import { useMediaQuery } from '@/composables/useMediaQuery.js';
import AppSidebar from '@/components/AppSidebar.vue';
import { useAllSetting } from './useAllSetting.js';
import GeneralTab from './GeneralTab.vue';
const antdThemeConfig = computed(() => ({
algorithm: themeState.isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
@ -206,7 +207,7 @@ const alertVisible = ref(true);
<SettingOutlined />
<span>Panel</span>
</template>
<a-empty description="General — coming in 5d-ii" />
<GeneralTab :all-setting="allSetting" />
</a-tab-pane>
<a-tab-pane key="2" class="tab-pane">
<template #tab>