mirror of
				https://github.com/MHSanaei/3x-ui.git
				synced 2025-11-04 06:12:52 +00:00 
			
		
		
		
	UI Improvements (#2067)
This commit is contained in:
		
							parent
							
								
									a7418d9708
								
							
						
					
					
						commit
						0bec29f2ba
					
				
					 17 changed files with 1928 additions and 1718 deletions
				
			
		
							
								
								
									
										
											BIN
										
									
								
								media/3X-UI.png
									
									
									
									
									
								
							
							
						
						
									
										
											BIN
										
									
								
								media/3X-UI.png
									
									
									
									
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 Before Width: | Height: | Size: 198 KiB After Width: | Height: | Size: 226 KiB  | 
| 
						 | 
				
			
			@ -44,7 +44,6 @@ func NewSubJsonService(fragment string, mux string, rules string, subService *Su
 | 
			
		|||
		defaultRules, _ := routing["rules"].([]interface{})
 | 
			
		||||
		json.Unmarshal([]byte(rules), &newRules)
 | 
			
		||||
		defaultRules = append(newRules, defaultRules...)
 | 
			
		||||
		fmt.Printf("routing: %#v\n\nRules: %#v\n\n", routing, defaultRules)
 | 
			
		||||
		routing["rules"] = defaultRules
 | 
			
		||||
		configJson["routing"] = routing
 | 
			
		||||
	}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -36,6 +36,7 @@
 | 
			
		|||
    --dark-color-codemirror-line-selection: rgba(0, 135, 113, 0.3);
 | 
			
		||||
    --dark-color-login-background: var(--dark-color-background);
 | 
			
		||||
    --dark-color-login-wave: var(--dark-color-surface-200);
 | 
			
		||||
    --dark-color-tooltip: rgba(61, 76, 104, 0.9);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
html[data-theme='ultra-dark'] {
 | 
			
		||||
| 
						 | 
				
			
			@ -69,6 +70,7 @@ html[data-theme='ultra-dark'] {
 | 
			
		|||
    --dark-color-codemirror-line-selection: rgba(85, 85, 85, 0.4);
 | 
			
		||||
    --dark-color-login-background: #0a2227;
 | 
			
		||||
    --dark-color-login-wave: #0f2d32;
 | 
			
		||||
    --dark-color-tooltip: rgba(88, 93, 100, 0.9);
 | 
			
		||||
    .ant-dropdown-menu-dark {
 | 
			
		||||
        background-color: var(--dark-color-surface-500);
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			@ -143,10 +145,13 @@ html {
 | 
			
		|||
style attribute {
 | 
			
		||||
    text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.ant-table-tbody > tr > td,
 | 
			
		||||
 | 
			
		||||
.ant-table-thead > tr > th {
 | 
			
		||||
    padding: 16px 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-table-tbody > tr > td {
 | 
			
		||||
    padding: 12px 8px;
 | 
			
		||||
    overflow-wrap: break-word;
 | 
			
		||||
}
 | 
			
		||||
.ant-table-thead > tr > th {
 | 
			
		||||
    color: rgba(0, 0, 0, 0.85);
 | 
			
		||||
| 
						 | 
				
			
			@ -155,10 +160,6 @@ style attribute {
 | 
			
		|||
    border-bottom: 1px solid #e8e8e8;
 | 
			
		||||
    transition: background 0.3s ease;
 | 
			
		||||
}
 | 
			
		||||
.ant-table-row-cell-break-word {
 | 
			
		||||
    word-wrap: break-word;
 | 
			
		||||
    word-break: break-word;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-table table {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
| 
						 | 
				
			
			@ -649,11 +650,17 @@ style attribute {
 | 
			
		|||
.dark .ant-modal-footer,
 | 
			
		||||
.dark .ant-collapse-content,
 | 
			
		||||
.dark .ant-calendar-footer,
 | 
			
		||||
.dark .ant-divider-horizontal.ant-divider-with-text-left:before,
 | 
			
		||||
.dark .ant-divider-horizontal.ant-divider-with-text-left:after,
 | 
			
		||||
.dark .ant-divider-horizontal.ant-divider-with-text-center:before,
 | 
			
		||||
.dark .ant-divider-horizontal.ant-divider-with-text-center:after {
 | 
			
		||||
    border-top-color: var(--dark-color-surface-300);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-divider-horizontal.ant-divider-with-text-left:before {
 | 
			
		||||
    width: 10%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.dark .ant-progress-text,
 | 
			
		||||
.dark .ant-card-head,
 | 
			
		||||
.dark .ant-form,
 | 
			
		||||
| 
						 | 
				
			
			@ -712,7 +719,6 @@ style attribute {
 | 
			
		|||
.dark .ant-select-dropdown,
 | 
			
		||||
.dark .ant-select-dropdown li,
 | 
			
		||||
.dark .ant-select-dropdown-menu-item,
 | 
			
		||||
.dark .ant-divider:not(.ant-divider-with-text-center),
 | 
			
		||||
.dark .client-table-header,
 | 
			
		||||
.dark .ant-select-selection--multiple .ant-select-selection__choice,
 | 
			
		||||
.dark .ant-calendar-time-picker-inner {
 | 
			
		||||
| 
						 | 
				
			
			@ -948,10 +954,15 @@ style attribute {
 | 
			
		|||
    background-color: #fff;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-checkbox-wrapper,
 | 
			
		||||
.ant-input-group-addon,
 | 
			
		||||
.ant-tabs-tab,
 | 
			
		||||
.ant-input::placeholder,
 | 
			
		||||
.ant-collapse-header,
 | 
			
		||||
.ant-menu,
 | 
			
		||||
.ant-radio-button-wrapper {
 | 
			
		||||
    user-select: none;
 | 
			
		||||
    -webkit-user-select: none;
 | 
			
		||||
    user-select: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-calendar-date,
 | 
			
		||||
| 
						 | 
				
			
			@ -1065,6 +1076,7 @@ li.ant-select-dropdown-menu-item:empty:after {
 | 
			
		|||
    color: rgba(255, 255, 255, 0.35);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.dark .ant-divider:not(.ant-divider-with-text-center, .ant-divider-with-text-left, .ant-divider-with-text-right),
 | 
			
		||||
.ant-dropdown-menu-dark,
 | 
			
		||||
.dark .ant-calendar-year-panel-year:hover,
 | 
			
		||||
.dark .ant-calendar-month-panel-month:hover,
 | 
			
		||||
| 
						 | 
				
			
			@ -1216,15 +1228,39 @@ li.ant-select-dropdown-menu-item:empty:after {
 | 
			
		|||
    overflow-y: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.qr-bg {
 | 
			
		||||
.qr-cv {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    background-color: #fff;
 | 
			
		||||
    opacity: 0.8;
 | 
			
		||||
    transition: all 0.3s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.qr-cv:hover {
 | 
			
		||||
    opacity: 1;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.qr-cv:active {
 | 
			
		||||
    transform: scale(0.98);
 | 
			
		||||
    transition: all 0.1s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.dark .qr-cv {
 | 
			
		||||
    filter: invert(1);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.qr-bg {
 | 
			
		||||
    background-color: #ffffff;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    align-content: center;
 | 
			
		||||
    padding: 0.5rem;
 | 
			
		||||
    padding: 0.8rem;
 | 
			
		||||
    border-radius: 1rem;
 | 
			
		||||
    border: solid 1px #e8e8e8;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.dark .qr-bg {
 | 
			
		||||
    background-color: var(--dark-color-surface-700);
 | 
			
		||||
    border-color: var(--dark-color-surface-300);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-input-group-addon:not(:first-child):not(:last-child) {
 | 
			
		||||
| 
						 | 
				
			
			@ -1276,3 +1312,104 @@ b, strong {
 | 
			
		|||
    background-color: transparent !important;
 | 
			
		||||
    cursor: default !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.dark .ant-tooltip-inner,
 | 
			
		||||
.dark .ant-tooltip-arrow:before {
 | 
			
		||||
    background-color: var(--dark-color-tooltip);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-select-sm .ant-select-selection__rendered {
 | 
			
		||||
    margin-left: 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-collapse {
 | 
			
		||||
    -moz-animation: collfade 0.3s ease;
 | 
			
		||||
    -webkit-animation: 0.3s collfade 0.3s ease;
 | 
			
		||||
    animation:  collfade 0.3s ease;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@-webkit-keyframes collfade {
 | 
			
		||||
    0% {
 | 
			
		||||
        transform: scaleY(.8);
 | 
			
		||||
        transform-origin: 0% 0%;
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        transform: scaleY(1);
 | 
			
		||||
        transform-origin: 0% 0%;
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@keyframes collfade {
 | 
			
		||||
    0% {
 | 
			
		||||
        transform: scaleY(.8);
 | 
			
		||||
        transform-origin: 0% 0%;
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        transform: scaleY(1);
 | 
			
		||||
        transform-origin: 0% 0%;
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-table-tbody>tr>td {
 | 
			
		||||
	border-color: #f0f0f0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-table-row-expand-icon {
 | 
			
		||||
    vertical-align: middle;
 | 
			
		||||
    margin-inline-end: 8px;
 | 
			
		||||
    position: relative;
 | 
			
		||||
    transform: scale(0.9411764705882353);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-table-row-collapsed::before {
 | 
			
		||||
    transform: rotate(-180deg);
 | 
			
		||||
    top: 7px;
 | 
			
		||||
    inset-inline-end: 3px;
 | 
			
		||||
    inset-inline-start: 3px;
 | 
			
		||||
    height: 1px;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    background: currentcolor;
 | 
			
		||||
    transition: transform 0.3s ease-out;
 | 
			
		||||
    content: "";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-table-row-collapsed::after {
 | 
			
		||||
    transform: rotate(0deg);
 | 
			
		||||
    top: 3px;
 | 
			
		||||
    bottom: 3px;
 | 
			
		||||
    inset-inline-start: 7px;
 | 
			
		||||
    width: 1px;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    background: currentcolor;
 | 
			
		||||
    transition: transform 0.3s ease-out;
 | 
			
		||||
    content: "";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-table-row-expanded::before {
 | 
			
		||||
    top: 7px;
 | 
			
		||||
    inset-inline-end: 3px;
 | 
			
		||||
    inset-inline-start: 3px;
 | 
			
		||||
    height: 1px;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    background: currentcolor;
 | 
			
		||||
    transition: transform 0.3s ease-out;
 | 
			
		||||
    content: "";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ant-table-row-expanded::after {
 | 
			
		||||
    top: 3px;
 | 
			
		||||
    bottom: 3px;
 | 
			
		||||
    inset-inline-start: 7px;
 | 
			
		||||
    width: 1px;
 | 
			
		||||
    transform: rotate(90deg);
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    background: currentcolor;
 | 
			
		||||
    transition: transform 0.3s ease-out;
 | 
			
		||||
    content: "";
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -3,29 +3,20 @@
 | 
			
		|||
    :dialog-style="{ top: '20px' }"
 | 
			
		||||
    :closable="true"
 | 
			
		||||
    :class="themeSwitcher.currentTheme"
 | 
			
		||||
        :footer="null"
 | 
			
		||||
        width="300px">
 | 
			
		||||
    :footer="null" width="300px">
 | 
			
		||||
  <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
 | 
			
		||||
    {{ i18n "pages.inbounds.clickOnQRcode" }}
 | 
			
		||||
  </a-tag>
 | 
			
		||||
  <template v-if="app.subSettings.enable && qrModal.subId">
 | 
			
		||||
    <a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
 | 
			
		||||
        <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))"
 | 
			
		||||
            id="qrCode-sub"
 | 
			
		||||
            class="qr-bg">
 | 
			
		||||
        </canvas>
 | 
			
		||||
    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas></div>
 | 
			
		||||
    <a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
 | 
			
		||||
        <canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))"
 | 
			
		||||
            id="qrCode-subJson"
 | 
			
		||||
            style="width: 100%; height: 100%; display: flex; border-radius: 1rem;">
 | 
			
		||||
        </canvas>
 | 
			
		||||
    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas></div>
 | 
			
		||||
  </template>
 | 
			
		||||
  <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
 | 
			
		||||
  <template v-for="(row, index) in qrModal.qrcodes">
 | 
			
		||||
    <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
 | 
			
		||||
        <canvas @click="copyToClipboard('qrCode-'+index, row.link)"
 | 
			
		||||
            :id="'qrCode-'+index"
 | 
			
		||||
            class="qr-bg"></canvas>
 | 
			
		||||
    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas></div>
 | 
			
		||||
  </template>
 | 
			
		||||
</a-modal>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -87,8 +78,10 @@
 | 
			
		|||
            setQrCode(elmentId, content) {
 | 
			
		||||
                new QRious({
 | 
			
		||||
                    element: document.querySelector('#' + elmentId),
 | 
			
		||||
                    size: 260,
 | 
			
		||||
                    size: 300,
 | 
			
		||||
                    value: content,
 | 
			
		||||
                    background: 'transparent',
 | 
			
		||||
                    foreground: 'black'
 | 
			
		||||
                });
 | 
			
		||||
            },
 | 
			
		||||
            genSubLink(subID) {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -54,7 +54,7 @@
 | 
			
		|||
            <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
 | 
			
		||||
            <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
 | 
			
		||||
        </template>
 | 
			
		||||
    <a-badge :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'">
 | 
			
		||||
    <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'">
 | 
			
		||||
    </a-badge>
 | 
			
		||||
    </a-tooltip>
 | 
			
		||||
    [[ client.email ]]
 | 
			
		||||
| 
						 | 
				
			
			@ -258,7 +258,7 @@
 | 
			
		|||
            </table>
 | 
			
		||||
        </template>
 | 
			
		||||
        <a-badge>
 | 
			
		||||
            <a-icon v-if="!client.enable" slot="count" type="pause-circle" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
 | 
			
		||||
            <a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
 | 
			
		||||
            <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;"><a-icon type="solution"></a-icon></a-button>
 | 
			
		||||
        </a-badge>
 | 
			
		||||
    </a-popover>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,13 +7,11 @@
 | 
			
		|||
      margin: 24px 16px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @media (max-width: 768px) {
 | 
			
		||||
    .ant-card-body {
 | 
			
		||||
      padding: .5rem;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .ant-col-sm-24 {
 | 
			
		||||
    margin: 0.5rem -2rem 0.5rem 2rem;
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			@ -30,7 +28,7 @@
 | 
			
		|||
    border: #D5BED2 solid 1px;
 | 
			
		||||
  }
 | 
			
		||||
  .dark .infinite-bar .ant-progress-inner .ant-progress-bg {
 | 
			
		||||
        background-color: #3c1536;
 | 
			
		||||
    background-color: #7a316f;
 | 
			
		||||
    border: #7a316f solid 1px;
 | 
			
		||||
  }
 | 
			
		||||
  .ant-collapse {
 | 
			
		||||
| 
						 | 
				
			
			@ -40,6 +38,21 @@
 | 
			
		|||
    max-width: 200px;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
  }
 | 
			
		||||
  .online-animation .ant-badge-status-dot {
 | 
			
		||||
    animation: onlineAnimation 1.2s linear infinite;
 | 
			
		||||
  }
 | 
			
		||||
  @keyframes onlineAnimation {
 | 
			
		||||
    0%,
 | 
			
		||||
    50%,
 | 
			
		||||
    100% {
 | 
			
		||||
      transform: scale(1);
 | 
			
		||||
      opacity: 1;
 | 
			
		||||
    }
 | 
			
		||||
    10% {
 | 
			
		||||
      transform: scale(1.5);
 | 
			
		||||
      opacity: .2;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
| 
						 | 
				
			
			@ -53,8 +66,7 @@
 | 
			
		|||
            message='{{ i18n "secAlertTitle" }}'
 | 
			
		||||
            color="red"
 | 
			
		||||
            description='{{ i18n "secAlertSsl" }}'
 | 
			
		||||
                    show-icon closable
 | 
			
		||||
                    >
 | 
			
		||||
            show-icon closable>
 | 
			
		||||
          </a-alert>
 | 
			
		||||
        </transition>
 | 
			
		||||
        <transition name="list" appear>
 | 
			
		||||
| 
						 | 
				
			
			@ -75,8 +87,7 @@
 | 
			
		|||
              <a-col :xs="24" :sm="24" :lg="12">
 | 
			
		||||
                <template>
 | 
			
		||||
                  <div>
 | 
			
		||||
                                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
 | 
			
		||||
                                        </a-back-top>
 | 
			
		||||
                    <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
 | 
			
		||||
                    {{ i18n "clients" }}:
 | 
			
		||||
                    <a-tag color="green">[[ total.clients ]]</a-tag>
 | 
			
		||||
                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
| 
						 | 
				
			
			@ -313,7 +324,9 @@
 | 
			
		|||
                        [[ sizeFormat(dbInbound.total) ]]
 | 
			
		||||
                    </template>
 | 
			
		||||
                    <template v-else>
 | 
			
		||||
                                            <svg style="fill: currentColor; height: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"/></svg>
 | 
			
		||||
                      <svg style="fill: currentColor; height: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
 | 
			
		||||
                        <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" />
 | 
			
		||||
                      </svg>
 | 
			
		||||
                    </template>
 | 
			
		||||
                  </a-tag>
 | 
			
		||||
                </a-popover>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -19,18 +19,17 @@
 | 
			
		|||
</style>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
 | 
			
		||||
  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
 | 
			
		||||
    {{ template "commonSider" . }}
 | 
			
		||||
    <a-layout id="content-layout">
 | 
			
		||||
      <a-layout-content>
 | 
			
		||||
            <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
 | 
			
		||||
        <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"></a-spin>
 | 
			
		||||
        <transition name="list" appear>
 | 
			
		||||
          <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
 | 
			
		||||
            message='{{ i18n "secAlertTitle" }}'
 | 
			
		||||
            color="red"
 | 
			
		||||
            description='{{ i18n "secAlertSsl" }}'
 | 
			
		||||
                show-icon closable
 | 
			
		||||
                >
 | 
			
		||||
            show-icon closable>
 | 
			
		||||
          </a-alert>
 | 
			
		||||
        </transition>
 | 
			
		||||
        <transition name="list" appear>
 | 
			
		||||
| 
						 | 
				
			
			@ -99,10 +98,8 @@
 | 
			
		|||
            <a-col :sm="24" :lg="12">
 | 
			
		||||
              <a-card hoverable>
 | 
			
		||||
                <b>{{ i18n "pages.index.xrayStatus" }}:</b>
 | 
			
		||||
                            <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]]
 | 
			
		||||
                            </a-tag>
 | 
			
		||||
                            <a-popover v-if="status.xray.state === State.Error"
 | 
			
		||||
                                :overlay-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
                <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]] </a-tag>
 | 
			
		||||
                <a-popover v-if="status.xray.state === State.Error" :overlay-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
                  <span slot="title" style="font-size: 12pt">An error occurred while running Xray
 | 
			
		||||
                    <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
 | 
			
		||||
                  </span>
 | 
			
		||||
| 
						 | 
				
			
			@ -140,12 +137,8 @@
 | 
			
		|||
            <a-col :sm="24" :lg="12">
 | 
			
		||||
              <a-card hoverable>
 | 
			
		||||
                <b>{{ i18n "usage"}}:</b>
 | 
			
		||||
                            <a-tag color="green">
 | 
			
		||||
                                RAM: [[ sizeFormat(status.appStats.mem) ]]
 | 
			
		||||
                            </a-tag>
 | 
			
		||||
                            <a-tag color="green">
 | 
			
		||||
                                Threads: [[ status.appStats.threads ]]
 | 
			
		||||
                            </a-tag>
 | 
			
		||||
                <a-tag color="green"> RAM: [[ sizeFormat(status.appStats.mem) ]] </a-tag>
 | 
			
		||||
                <a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
 | 
			
		||||
              </a-card>
 | 
			
		||||
            </a-col>
 | 
			
		||||
            <a-col :sm="24" :lg="12">
 | 
			
		||||
| 
						 | 
				
			
			@ -206,8 +199,7 @@
 | 
			
		|||
                  <a-col :span="12">
 | 
			
		||||
                    <a-tag>
 | 
			
		||||
                      <a-tooltip>
 | 
			
		||||
                                    <a-icon type="arrow-up"></a-icon>
 | 
			
		||||
                                    Up: [[ sizeFormat(status.netIO.up) ]]/s
 | 
			
		||||
                        <a-icon type="arrow-up"></a-icon> Up: [[ sizeFormat(status.netIO.up) ]]/s
 | 
			
		||||
                        <template slot="title">
 | 
			
		||||
                          {{ i18n "pages.index.upSpeed" }}
 | 
			
		||||
                        </template>
 | 
			
		||||
| 
						 | 
				
			
			@ -217,8 +209,7 @@
 | 
			
		|||
                  <a-col :span="12">
 | 
			
		||||
                    <a-tag>
 | 
			
		||||
                      <a-tooltip>
 | 
			
		||||
                                    <a-icon type="arrow-down"></a-icon>
 | 
			
		||||
                                    Down: [[ sizeFormat(status.netIO.down) ]]/s
 | 
			
		||||
                        <a-icon type="arrow-down"></a-icon> Down: [[ sizeFormat(status.netIO.down) ]]/s
 | 
			
		||||
                        <template slot="title">
 | 
			
		||||
                          {{ i18n "pages.index.downSpeed" }}
 | 
			
		||||
                        </template>
 | 
			
		||||
| 
						 | 
				
			
			@ -258,7 +249,6 @@
 | 
			
		|||
        </transition>
 | 
			
		||||
      </a-layout-content>
 | 
			
		||||
    </a-layout>
 | 
			
		||||
 | 
			
		||||
    <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
 | 
			
		||||
        @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
 | 
			
		||||
      <a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
 | 
			
		||||
| 
						 | 
				
			
			@ -270,7 +260,6 @@
 | 
			
		|||
        </a-tag>
 | 
			
		||||
      </template>
 | 
			
		||||
    </a-modal>
 | 
			
		||||
 | 
			
		||||
    <a-modal id="log-modal" v-model="logModal.visible"
 | 
			
		||||
        :closable="true" @cancel="() => logModal.visible = false"
 | 
			
		||||
        :class="themeSwitcher.currentTheme"
 | 
			
		||||
| 
						 | 
				
			
			@ -285,16 +274,16 @@
 | 
			
		|||
        </a-icon>
 | 
			
		||||
      </template>
 | 
			
		||||
      <a-form layout="inline">
 | 
			
		||||
            <a-form-item>
 | 
			
		||||
        <a-form-item style="margin-right: 0.5rem;">
 | 
			
		||||
          <a-input-group compact>
 | 
			
		||||
                    <a-select v-model="logModal.rows" style="width:70px;"
 | 
			
		||||
            <a-select size="small" v-model="logModal.rows" style="width:70px;"
 | 
			
		||||
                @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
              <a-select-option value="10">10</a-select-option>
 | 
			
		||||
              <a-select-option value="20">20</a-select-option>
 | 
			
		||||
              <a-select-option value="50">50</a-select-option>
 | 
			
		||||
              <a-select-option value="100">100</a-select-option>
 | 
			
		||||
            </a-select>
 | 
			
		||||
                    <a-select v-model="logModal.level" style="width:100px;"
 | 
			
		||||
            <a-select size="small" v-model="logModal.level" style="width:95px;"
 | 
			
		||||
                @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
              <a-select-option value="debug">Debug</a-select-option>
 | 
			
		||||
              <a-select-option value="info">Info</a-select-option>
 | 
			
		||||
| 
						 | 
				
			
			@ -309,21 +298,20 @@
 | 
			
		|||
        </a-form-item>
 | 
			
		||||
        <a-form-item style="float: right;">
 | 
			
		||||
          <a-button type="primary" icon="download"
 | 
			
		||||
                :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs.join('\n'))" download="x-ui.log">
 | 
			
		||||
            :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs?.join('\n'))" download="x-ui.log">
 | 
			
		||||
          </a-button>
 | 
			
		||||
        </a-form-item>
 | 
			
		||||
      </a-form>
 | 
			
		||||
        <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto;" v-html="logModal.formattedLogs"></div>
 | 
			
		||||
      <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto; margin-top: 0.5rem;" v-html="logModal.formattedLogs"></div>
 | 
			
		||||
    </a-modal>
 | 
			
		||||
 | 
			
		||||
    <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
 | 
			
		||||
        :closable="true" footer=""
 | 
			
		||||
        :class="themeSwitcher.currentTheme">
 | 
			
		||||
      <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
 | 
			
		||||
        :message="backupModal.description"
 | 
			
		||||
            show-icon
 | 
			
		||||
            ></a-alert>
 | 
			
		||||
        <a-space direction="horizontal" style="text-align: center" style="margin-bottom: 10px;">
 | 
			
		||||
        show-icon>
 | 
			
		||||
      </a-alert>
 | 
			
		||||
      <a-space direction="horizontal" style="text-align: center; margin-bottom: 10px;">
 | 
			
		||||
        <a-button type="primary" @click="exportDatabase()">
 | 
			
		||||
            [[ backupModal.exportText ]]
 | 
			
		||||
        </a-button>
 | 
			
		||||
| 
						 | 
				
			
			@ -332,14 +320,12 @@
 | 
			
		|||
        </a-button>
 | 
			
		||||
      </a-space>
 | 
			
		||||
    </a-modal>
 | 
			
		||||
 | 
			
		||||
</a-layout>
 | 
			
		||||
  </a-layout>
 | 
			
		||||
{{template "js" .}}
 | 
			
		||||
<script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script>
 | 
			
		||||
{{template "component/themeSwitcher" .}}
 | 
			
		||||
{{template "textModal"}}
 | 
			
		||||
<script>
 | 
			
		||||
 | 
			
		||||
    const State = {
 | 
			
		||||
        Running: "running",
 | 
			
		||||
        Stop: "stop",
 | 
			
		||||
| 
						 | 
				
			
			@ -664,7 +650,6 @@
 | 
			
		|||
            }
 | 
			
		||||
        },
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,22 +7,18 @@
 | 
			
		|||
      margin: 24px 16px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @media (max-width: 768px) {
 | 
			
		||||
    .ant-tabs-nav .ant-tabs-tab {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
      padding: 12px .5rem;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .ant-tabs-bar {
 | 
			
		||||
    margin: 0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .ant-list-item {
 | 
			
		||||
    display: block;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .alert-msg {
 | 
			
		||||
    color: rgb(194, 117, 18);
 | 
			
		||||
    font-weight: normal;
 | 
			
		||||
| 
						 | 
				
			
			@ -40,22 +36,23 @@
 | 
			
		|||
    transition-duration: .3s;
 | 
			
		||||
    animation: signal 0.9s ease infinite;
 | 
			
		||||
  }
 | 
			
		||||
    @keyframes signal{
 | 
			
		||||
    0%{
 | 
			
		||||
  @keyframes signal {
 | 
			
		||||
    0% {
 | 
			
		||||
      box-shadow: 0 0 0 0 rgba(194, 118, 18, 0.5);
 | 
			
		||||
    }
 | 
			
		||||
    50%{
 | 
			
		||||
        box-shadow: 0 0 0 6px rgba(0 ,0,0,0);
 | 
			
		||||
 | 
			
		||||
    50% {
 | 
			
		||||
      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
 | 
			
		||||
    }
 | 
			
		||||
    100%{
 | 
			
		||||
        box-shadow: 0 0 0 6px rgba(0 ,0,0,0);
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
    .alert-msg > i {
 | 
			
		||||
  .alert-msg>i {
 | 
			
		||||
    color: inherit;
 | 
			
		||||
    font-size: 24px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .collapse-title {
 | 
			
		||||
    color: inherit;
 | 
			
		||||
    font-weight: bold;
 | 
			
		||||
| 
						 | 
				
			
			@ -63,14 +60,16 @@
 | 
			
		|||
    padding: 10px 20px;
 | 
			
		||||
    border-bottom: 2px solid;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
    .collapse-title > i {
 | 
			
		||||
  .collapse-title>i {
 | 
			
		||||
    color: inherit;
 | 
			
		||||
    font-size: 24px;
 | 
			
		||||
  }
 | 
			
		||||
  .ant-collapse-content-box .ant-list-item {
 | 
			
		||||
    border-bottom: none !important;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
<body>
 | 
			
		||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
 | 
			
		||||
  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
 | 
			
		||||
    {{ template "commonSider" . }}
 | 
			
		||||
    <a-layout id="content-layout">
 | 
			
		||||
      <a-layout-content>
 | 
			
		||||
| 
						 | 
				
			
			@ -79,9 +78,7 @@
 | 
			
		|||
            <a-alert type="error" v-if="confAlerts.length>0" style="margin: 10px 5px;"
 | 
			
		||||
                message='{{ i18n "secAlertTitle" }}'
 | 
			
		||||
                color="red"
 | 
			
		||||
                    show-icon
 | 
			
		||||
                    closable
 | 
			
		||||
                    >
 | 
			
		||||
                show-icon closable>
 | 
			
		||||
              <template slot="description">
 | 
			
		||||
                <b>{{ i18n "secAlertConf" }}</b>
 | 
			
		||||
                <ul><li v-for="a in confAlerts">[[ a ]]</li></ul>
 | 
			
		||||
| 
						 | 
				
			
			@ -100,12 +97,11 @@
 | 
			
		|||
                <a-col :xs="24" :sm="14">
 | 
			
		||||
                  <template>
 | 
			
		||||
                    <div>
 | 
			
		||||
                                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
 | 
			
		||||
                                        </a-back-top>
 | 
			
		||||
                      <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
 | 
			
		||||
                      <a-alert type="warning" style="float: right; width: fit-content"
 | 
			
		||||
                        message='{{ i18n "pages.settings.infoDesc" }}'
 | 
			
		||||
                                        show-icon
 | 
			
		||||
                                        >
 | 
			
		||||
                        show-icon>
 | 
			
		||||
                      </a-alert>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </template>
 | 
			
		||||
                </a-col>
 | 
			
		||||
| 
						 | 
				
			
			@ -154,12 +150,9 @@
 | 
			
		|||
                          <template slot="description">{{ i18n "pages.settings.datepickerDescription"}}</template>
 | 
			
		||||
                        </a-list-item-meta>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                        <template>
 | 
			
		||||
                                                <a-select style="width: 100%"
 | 
			
		||||
                                                          :dropdown-class-name="themeSwitcher.currentTheme"
 | 
			
		||||
                                                          v-model="datepicker">
 | 
			
		||||
                          <a-select style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme" v-model="datepicker">
 | 
			
		||||
                            <a-select-option v-for="item in datepickerList" :value="item.value">
 | 
			
		||||
                              <span v-text="item.name"></span>
 | 
			
		||||
                            </a-select-option>
 | 
			
		||||
| 
						 | 
				
			
			@ -171,20 +164,17 @@
 | 
			
		|||
                  <a-list-item>
 | 
			
		||||
                    <a-row style="padding: 20px">
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                                            <a-list-item-meta title="Language" />
 | 
			
		||||
                        <a-list-item-meta title="Language"></a-list-item-meta>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                        <template>
 | 
			
		||||
                                                <a-select
 | 
			
		||||
                                                    ref="selectLang"
 | 
			
		||||
                          <a-select ref="selectLang"
 | 
			
		||||
                              v-model="lang"
 | 
			
		||||
                              @change="setLang(lang)"
 | 
			
		||||
                              :dropdown-class-name="themeSwitcher.currentTheme"
 | 
			
		||||
                                                    style="width: 100%"
 | 
			
		||||
                                                >
 | 
			
		||||
                              style="width: 100%">
 | 
			
		||||
                            <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
 | 
			
		||||
                                                        <span role="img" :aria-label="l.name" v-text="l.icon"></span>
 | 
			
		||||
                                                          <span v-text="l.name"></span>
 | 
			
		||||
                              <span role="img" :aria-label="l.name" v-text="l.icon"></span>    <span v-text="l.name"></span>
 | 
			
		||||
                            </a-select-option>
 | 
			
		||||
                          </a-select>
 | 
			
		||||
                        </template>
 | 
			
		||||
| 
						 | 
				
			
			@ -195,7 +185,7 @@
 | 
			
		|||
              </a-tab-pane>
 | 
			
		||||
              <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding: 20px;">
 | 
			
		||||
                <a-divider>{{ i18n "pages.settings.security.admin"}}</a-divider>
 | 
			
		||||
                            <a-form  layout="horizontal" :colon="false" style="float: left; margin: 10px 0;" :label-col="{ md: {span:10} }" :wrapper-col="{ md: {span:14} }">
 | 
			
		||||
                <a-form layout="horizontal" :colon="false" style="float: left; margin-bottom: 2rem;" :label-col="{ md: {span:10} }" :wrapper-col="{ md: {span:14} }">
 | 
			
		||||
                  <a-form-item label='{{ i18n "pages.settings.oldUsername"}}'>
 | 
			
		||||
                    <a-input autocomplete="username" v-model="user.oldUsername"></a-input>
 | 
			
		||||
                  </a-form-item>
 | 
			
		||||
| 
						 | 
				
			
			@ -213,11 +203,13 @@
 | 
			
		|||
                  </a-form-item>
 | 
			
		||||
                </a-form>
 | 
			
		||||
                <a-divider>{{ i18n "pages.settings.security.secret"}}</a-divider>
 | 
			
		||||
                            <a-form style="padding: 20px;">
 | 
			
		||||
                <a-form style="padding: 0 20px;">
 | 
			
		||||
                  <a-list-item>
 | 
			
		||||
                    <a-row>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                                            <a-list-item-meta title='{{ i18n "pages.settings.security.loginSecurity" }}' description='{{ i18n "pages.settings.security.loginSecurityDesc" }}' />
 | 
			
		||||
                        <a-list-item-meta title='{{ i18n "pages.settings.security.loginSecurity" }}'
 | 
			
		||||
                          description='{{ i18n "pages.settings.security.loginSecurityDesc" }}'>
 | 
			
		||||
                        </a-list-item-meta>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                        <template>
 | 
			
		||||
| 
						 | 
				
			
			@ -230,7 +222,9 @@
 | 
			
		|||
                  <a-list-item>
 | 
			
		||||
                    <a-row>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                                            <a-list-item-meta title='{{ i18n "pages.settings.security.secretToken" }}' description='{{ i18n "pages.settings.security.secretTokenDesc" }}' />
 | 
			
		||||
                        <a-list-item-meta title='{{ i18n "pages.settings.security.secretToken" }}'
 | 
			
		||||
                          description='{{ i18n "pages.settings.security.secretTokenDesc" }}'>
 | 
			
		||||
                        </a-list-item-meta>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                        <template>
 | 
			
		||||
| 
						 | 
				
			
			@ -259,14 +253,9 @@
 | 
			
		|||
                      </a-col>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                        <template>
 | 
			
		||||
                                                <a-select
 | 
			
		||||
                                                    ref="selectBotLang"
 | 
			
		||||
                                                    v-model="allSetting.tgLang"
 | 
			
		||||
                                                    :dropdown-class-name="themeSwitcher.currentTheme"
 | 
			
		||||
                                                    style="width: 100%">
 | 
			
		||||
                          <a-select ref="selectBotLang" v-model="allSetting.tgLang" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
 | 
			
		||||
                            <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
 | 
			
		||||
                                                        <span role="img" :aria-label="l.name" v-text="l.icon"></span>
 | 
			
		||||
                                                          <span v-text="l.name"></span>
 | 
			
		||||
                              <span role="img" :aria-label="l.name" v-text="l.icon"></span>    <span v-text="l.name"></span>
 | 
			
		||||
                            </a-select-option>
 | 
			
		||||
                          </a-select>
 | 
			
		||||
                        </template>
 | 
			
		||||
| 
						 | 
				
			
			@ -294,70 +283,93 @@
 | 
			
		|||
                <a-list item-layout="horizontal">
 | 
			
		||||
                  <setting-list-item type="text" title='{{ i18n "pages.settings.subPath"}}' desc='{{ i18n "pages.settings.subPathDesc"}}' v-model="allSetting.subJsonPath"></setting-list-item>
 | 
			
		||||
                  <setting-list-item type="text" title='{{ i18n "pages.settings.subURI"}}' desc='{{ i18n "pages.settings.subURIDesc"}}' v-model="allSetting.subJsonURI" placeholder="(http|https)://domain[:port]/path/"></setting-list-item>
 | 
			
		||||
                                <setting-list-item type="switch" title='{{ i18n "pages.settings.fragment"}}' desc='{{ i18n "pages.settings.fragmentDesc"}}' v-model="fragment"></setting-list-item>
 | 
			
		||||
                                <setting-list-item type="switch" title='Mux' v-model="enableMux"></setting-list-item>
 | 
			
		||||
                                <setting-list-item type="switch" title='{{ i18n "pages.xray.directCountryConfigs"}}' desc='{{ i18n "pages.xray.directCountryConfigsDesc"}}' v-model="enableDirect"></setting-list-item>
 | 
			
		||||
                            </a-list>
 | 
			
		||||
                            <a-collapse v-if="fragment || enableMux || enableDirect">
 | 
			
		||||
                                <a-collapse-panel header='{{ i18n "pages.settings.fragment"}}' v-if="fragment">
 | 
			
		||||
                  <a-list-item style="padding: 20px">
 | 
			
		||||
                    <a-row>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                                                <a-list-item-meta title='Packets'/>
 | 
			
		||||
                        <a-list-item-meta title='{{ i18n "pages.settings.fragment"}}'>
 | 
			
		||||
                          <template slot="description">{{ i18n "pages.settings.fragmentDesc"}}</template>
 | 
			
		||||
                        </a-list-item-meta>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                                                <a-select
 | 
			
		||||
                                                    v-model="fragmentPackets"
 | 
			
		||||
                                                    style="width: 100%"
 | 
			
		||||
                                                    :dropdown-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
                                                    <a-select-option :value="p" :label="p" v-for="p in ['1-1', '1-3', 'tlshello']">
 | 
			
		||||
                                                        [[ p ]]
 | 
			
		||||
                                                    </a-select-option>
 | 
			
		||||
                        <a-switch v-model="fragment"></a-switch>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-collapse v-if="fragment" style="margin-top: 14px;">
 | 
			
		||||
                      <a-collapse-panel header='{{ i18n "pages.settings.fragmentSett"}}' v-if="fragment">
 | 
			
		||||
                        <a-list-item style="padding: 10px 20px">
 | 
			
		||||
                          <a-row>
 | 
			
		||||
                            <a-col :lg="24" :xl="12">
 | 
			
		||||
                              <a-list-item-meta title='Packets'></a-list-item-meta>
 | 
			
		||||
                            </a-col>
 | 
			
		||||
                            <a-col :lg="24" :xl="12">
 | 
			
		||||
                              <a-select v-model="fragmentPackets" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
                                <a-select-option :value="p" :label="p" v-for="p in ['1-1', '1-3', 'tlshello']"> [[ p ]] </a-select-option>
 | 
			
		||||
                              </a-select>
 | 
			
		||||
                            </a-col>
 | 
			
		||||
                          </a-row>
 | 
			
		||||
                        </a-list-item>
 | 
			
		||||
                                    <setting-list-item type="text" title='Length' v-model="fragmentLength" placeholder="100-200"></setting-list-item>
 | 
			
		||||
                                    <setting-list-item type="text" title='Interval' v-model="fragmentInterval" placeholder="10-20"></setting-list-item>
 | 
			
		||||
                        <setting-list-item style="padding: 10px 20px" type="text" title='Length' v-model="fragmentLength" placeholder="100-200"></setting-list-item>
 | 
			
		||||
                        <setting-list-item style="padding: 10px 20px" type="text" title='Interval' v-model="fragmentInterval" placeholder="10-20"></setting-list-item>
 | 
			
		||||
                      </a-collapse-panel>
 | 
			
		||||
                                <a-collapse-panel header='Mux' v-if="enableMux">                                    
 | 
			
		||||
                                    <setting-list-item type="number" title='Concurrency' v-model="muxConcurrency" :min="-1" :max="1024"></setting-list-item>
 | 
			
		||||
                                    <setting-list-item type="number" title='xudp Concurrency' v-model="muxXudpConcurrency" :min="-1" :max="1024"></setting-list-item>
 | 
			
		||||
                    </a-collapse>
 | 
			
		||||
                  </a-list-item>
 | 
			
		||||
                  <a-list-item style="padding: 20px">
 | 
			
		||||
                    <a-row>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                                                <a-list-item-meta title='xudp UDP 443'/>
 | 
			
		||||
                        <a-list-item-meta title='{{ i18n "pages.settings.mux"}}'>
 | 
			
		||||
                          <template slot="description">{{ i18n "pages.settings.muxDesc"}}</template>
 | 
			
		||||
                        </a-list-item-meta>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                                                <a-select
 | 
			
		||||
                                                    v-model="muxXudpProxyUDP443"
 | 
			
		||||
                                                    style="width: 100%"
 | 
			
		||||
                                                    :dropdown-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
                                                    <a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']">
 | 
			
		||||
                                                        [[ p ]]
 | 
			
		||||
                                                    </a-select-option>
 | 
			
		||||
                        <a-switch v-model="enableMux"></a-switch>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-collapse v-if="enableMux" style="margin-top: 14px;">
 | 
			
		||||
                      <a-collapse-panel header='{{ i18n "pages.settings.muxSett"}}'>
 | 
			
		||||
                        <setting-list-item style="padding: 10px 20px" type="number" title='Concurrency' v-model="muxConcurrency" :min="-1" :max="1024"></setting-list-item>
 | 
			
		||||
                        <setting-list-item style="padding: 10px 20px" type="number" title='xudp Concurrency' v-model="muxXudpConcurrency" :min="-1" :max="1024"></setting-list-item>
 | 
			
		||||
                        <a-list-item style="padding: 10px 20px">
 | 
			
		||||
                          <a-row>
 | 
			
		||||
                            <a-col :lg="24" :xl="12">
 | 
			
		||||
                              <a-list-item-meta title='xudp UDP 443'></a-list-item-meta>
 | 
			
		||||
                            </a-col>
 | 
			
		||||
                            <a-col :lg="24" :xl="12">
 | 
			
		||||
                              <a-select v-model="muxXudpProxyUDP443" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
 | 
			
		||||
                                <a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']"> [[ p ]] </a-select-option>
 | 
			
		||||
                              </a-select>
 | 
			
		||||
                            </a-col>
 | 
			
		||||
                          </a-row>
 | 
			
		||||
                        </a-list-item>
 | 
			
		||||
                      </a-collapse-panel>
 | 
			
		||||
                                <a-collapse-panel header='{{ i18n "pages.xray.directCountryConfigs"}}' v-if="enableDirect">
 | 
			
		||||
                                    <a-list-item style="padding: 20px">
 | 
			
		||||
                                        <a-checkbox-group
 | 
			
		||||
                                        v-model="directCountries"
 | 
			
		||||
                                        name="Countries"
 | 
			
		||||
                                        :options="countryOptions"
 | 
			
		||||
                                      />
 | 
			
		||||
                                    </a-list-item>
 | 
			
		||||
                                </a-collapse-panel>
 | 
			
		||||
                    </a-collapse>
 | 
			
		||||
                  </a-list-item>
 | 
			
		||||
                  <a-list-item style="padding: 20px">
 | 
			
		||||
                    <a-row>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                        <a-list-item-meta title='{{ i18n "pages.settings.direct"}}'>
 | 
			
		||||
                          <template slot="description">{{ i18n "pages.settings.directDesc"}}</template>
 | 
			
		||||
                        </a-list-item-meta>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                      <a-col :lg="24" :xl="12">
 | 
			
		||||
                        <a-switch v-model="enableDirect"></a-switch>
 | 
			
		||||
                      </a-col>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-collapse v-if="enableDirect" style="margin-top: 14px;">
 | 
			
		||||
                      <a-collapse-panel header='{{ i18n "pages.settings.directSett"}}'>
 | 
			
		||||
                        <a-list-item style="padding: 10px 20px">
 | 
			
		||||
                          <a-checkbox-group v-model="directCountries" name="Countries" :options="countryOptions"></a-checkbox-group>
 | 
			
		||||
                        </a-list-item>
 | 
			
		||||
                      </a-collapse-panel>
 | 
			
		||||
                    </a-collapse>
 | 
			
		||||
                  </a-list-item>
 | 
			
		||||
                </a-list>
 | 
			
		||||
              </a-tab-pane>
 | 
			
		||||
            </a-tabs>
 | 
			
		||||
          </a-space>
 | 
			
		||||
        </a-spin>
 | 
			
		||||
      </a-layout-content>
 | 
			
		||||
    </a-layout>
 | 
			
		||||
</a-layout>
 | 
			
		||||
  </a-layout>
 | 
			
		||||
{{template "js" .}}
 | 
			
		||||
<script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
 | 
			
		||||
{{template "component/themeSwitcher" .}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -24,7 +24,6 @@
 | 
			
		|||
            margin: 24px 16px;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @media (max-width: 768px) {
 | 
			
		||||
        .ant-tabs-nav .ant-tabs-tab {
 | 
			
		||||
            margin: 0;
 | 
			
		||||
| 
						 | 
				
			
			@ -35,15 +34,12 @@
 | 
			
		|||
            padding: 10px 0px;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .ant-tabs-bar {
 | 
			
		||||
        margin: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .ant-list-item {
 | 
			
		||||
        display: block;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .collapse-title {
 | 
			
		||||
        color: inherit;
 | 
			
		||||
        font-weight: bold;
 | 
			
		||||
| 
						 | 
				
			
			@ -51,14 +47,19 @@
 | 
			
		|||
        padding: 10px 20px;
 | 
			
		||||
        border-bottom: 2px solid;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .collapse-title > i {
 | 
			
		||||
        color: inherit;
 | 
			
		||||
        font-size: 24px;
 | 
			
		||||
    }
 | 
			
		||||
    .ant-collapse-content-box > li {
 | 
			
		||||
        padding: 12px 0 0 0 !important;
 | 
			
		||||
    }
 | 
			
		||||
    .ant-list-item > li {
 | 
			
		||||
        padding: 10px 20px !important;
 | 
			
		||||
    }
 | 
			
		||||
</style>
 | 
			
		||||
<body>
 | 
			
		||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
 | 
			
		||||
  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
 | 
			
		||||
    {{ template "commonSider" . }}
 | 
			
		||||
    <a-layout id="content-layout">
 | 
			
		||||
      <a-layout-content>
 | 
			
		||||
| 
						 | 
				
			
			@ -68,8 +69,7 @@
 | 
			
		|||
              message='{{ i18n "secAlertTitle" }}'
 | 
			
		||||
              color="red"
 | 
			
		||||
              description='{{ i18n "secAlertSsl" }}'
 | 
			
		||||
                    show-icon closable
 | 
			
		||||
                    >
 | 
			
		||||
              show-icon closable>
 | 
			
		||||
            </a-alert>
 | 
			
		||||
          </transition>
 | 
			
		||||
          <a-space direction="vertical">
 | 
			
		||||
| 
						 | 
				
			
			@ -92,12 +92,9 @@
 | 
			
		|||
                <a-col :xs="24" :sm="14">
 | 
			
		||||
                  <template>
 | 
			
		||||
                    <div>
 | 
			
		||||
                                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
 | 
			
		||||
                                        </a-back-top>
 | 
			
		||||
                                        <a-alert type="warning" style="float: right; width: fit-content"
 | 
			
		||||
                                        message='{{ i18n "pages.settings.infoDesc" }}'
 | 
			
		||||
                                        show-icon
 | 
			
		||||
                                        >
 | 
			
		||||
                      <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
 | 
			
		||||
                      <a-alert type="warning" style="float: right; width: fit-content" message='{{ i18n "pages.settings.infoDesc" }}' show-icon>
 | 
			
		||||
                      </a-alert>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </template>
 | 
			
		||||
                </a-col>
 | 
			
		||||
| 
						 | 
				
			
			@ -118,10 +115,11 @@
 | 
			
		|||
                      </a-alert>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-list-item>
 | 
			
		||||
                                        <a-row style="padding: 20px">
 | 
			
		||||
                      <a-row style="padding: 10px 20px">
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <a-list-item-meta title='{{ i18n "pages.xray.FreedomStrategy" }}'
 | 
			
		||||
                                                    description='{{ i18n "pages.xray.FreedomStrategyDesc" }}' />
 | 
			
		||||
                            description='{{ i18n "pages.xray.FreedomStrategyDesc" }}'>
 | 
			
		||||
                          </a-list-item-meta>
 | 
			
		||||
                        </a-col>
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <template>
 | 
			
		||||
| 
						 | 
				
			
			@ -132,11 +130,11 @@
 | 
			
		|||
                          </template>
 | 
			
		||||
                        </a-col>
 | 
			
		||||
                      </a-row>
 | 
			
		||||
                                    </a-list-item>
 | 
			
		||||
                                    <a-row style="padding: 20px">
 | 
			
		||||
                      <a-row style="padding: 10px 20px">
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <a-list-item-meta title='{{ i18n "pages.xray.RoutingStrategy" }}'
 | 
			
		||||
                                                description='{{ i18n "pages.xray.RoutingStrategyDesc" }}' />
 | 
			
		||||
                            description='{{ i18n "pages.xray.RoutingStrategyDesc" }}'>
 | 
			
		||||
                          </a-list-item-meta>
 | 
			
		||||
                        </a-col>
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <a-select v-model="routingStrategy" :dropdown-class-name="themeSwitcher.currentTheme"
 | 
			
		||||
| 
						 | 
				
			
			@ -156,10 +154,12 @@
 | 
			
		|||
                        </template>
 | 
			
		||||
                      </a-alert>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                                    <a-row style="padding: 20px">
 | 
			
		||||
                    <a-list-item>
 | 
			
		||||
                      <a-row style="padding: 10px 20px">
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <a-list-item-meta title='{{ i18n "pages.xray.logLevel" }}'
 | 
			
		||||
                                                description='{{ i18n "pages.xray.logLevelDesc" }}' />
 | 
			
		||||
                            description='{{ i18n "pages.xray.logLevelDesc" }}'>
 | 
			
		||||
                          </a-list-item-meta>
 | 
			
		||||
                        </a-col>
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <template>
 | 
			
		||||
| 
						 | 
				
			
			@ -169,10 +169,11 @@
 | 
			
		|||
                          </template>
 | 
			
		||||
                        </a-col>
 | 
			
		||||
                      </a-row>
 | 
			
		||||
                                    <a-row style="padding: 20px">
 | 
			
		||||
                      <a-row style="padding: 10px 20px">
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <a-list-item-meta title='{{ i18n "pages.xray.accessLog" }}'
 | 
			
		||||
                                                description='{{ i18n "pages.xray.accessLogDesc" }}' />
 | 
			
		||||
                            description='{{ i18n "pages.xray.accessLogDesc" }}'>
 | 
			
		||||
                          </a-list-item-meta>
 | 
			
		||||
                        </a-col>
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <template>
 | 
			
		||||
| 
						 | 
				
			
			@ -182,10 +183,11 @@
 | 
			
		|||
                          </template>
 | 
			
		||||
                        </a-col>
 | 
			
		||||
                      </a-row>
 | 
			
		||||
                                    <a-row style="padding: 20px">
 | 
			
		||||
                      <a-row style="padding: 10px 20px">
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <a-list-item-meta title='{{ i18n "pages.xray.errorLog" }}'
 | 
			
		||||
                                                description='{{ i18n "pages.xray.errorLogDesc" }}' />
 | 
			
		||||
                            description='{{ i18n "pages.xray.errorLogDesc" }}'>
 | 
			
		||||
                          </a-list-item-meta>
 | 
			
		||||
                        </a-col>
 | 
			
		||||
                        <a-col :lg="24" :xl="12">
 | 
			
		||||
                          <template>
 | 
			
		||||
| 
						 | 
				
			
			@ -206,12 +208,14 @@
 | 
			
		|||
                        </template>
 | 
			
		||||
                      </a-alert>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.Torrent"}}' desc='{{ i18n "pages.xray.TorrentDesc"}}' v-model="torrentSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.PrivateIp"}}' desc='{{ i18n "pages.xray.PrivateIpDesc"}}' v-model="privateIpSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.Ads"}}' desc='{{ i18n "pages.xray.AdsDesc"}}' v-model="AdsSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.Family"}}' desc='{{ i18n "pages.xray.FamilyDesc"}}' v-model="familyProtectSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.Security"}}' desc='{{ i18n "pages.xray.SecurityDesc"}}' v-model="SecuritySettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.Speedtest"}}' desc='{{ i18n "pages.xray.SpeedtestDesc"}}' v-model="SpeedTestSettings"></setting-list-item>
 | 
			
		||||
                    </a-list-item>
 | 
			
		||||
                  </a-collapse-panel>
 | 
			
		||||
                  <a-collapse-panel header='{{ i18n "pages.xray.blockCountryConfigs"}}'>
 | 
			
		||||
                    <a-row :xs="24" :sm="24" :lg="12">
 | 
			
		||||
| 
						 | 
				
			
			@ -222,6 +226,7 @@
 | 
			
		|||
                        </template>
 | 
			
		||||
                      </a-alert>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.IRIp"}}' desc='{{ i18n "pages.xray.IRIpDesc"}}' v-model="IRIpSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.IRDomain"}}' desc='{{ i18n "pages.xray.IRDomainDesc"}}' v-model="IRDomainSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.ChinaIp"}}' desc='{{ i18n "pages.xray.ChinaIpDesc"}}' v-model="ChinaIpSettings"></setting-list-item>
 | 
			
		||||
| 
						 | 
				
			
			@ -230,6 +235,7 @@
 | 
			
		|||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.RussiaDomain"}}' desc='{{ i18n "pages.xray.RussiaDomainDesc"}}' v-model="RussiaDomainSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.VNIp"}}' desc='{{ i18n "pages.xray.VNIpDesc"}}' v-model="VNIpSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.VNDomain"}}' desc='{{ i18n "pages.xray.VNDomainDesc"}}' v-model="VNDomainSettings"></setting-list-item>
 | 
			
		||||
                    </a-list-item>
 | 
			
		||||
                  </a-collapse-panel>
 | 
			
		||||
                  <a-collapse-panel header='{{ i18n "pages.xray.directCountryConfigs"}}'>
 | 
			
		||||
                    <a-row :xs="24" :sm="24" :lg="12">
 | 
			
		||||
| 
						 | 
				
			
			@ -240,6 +246,7 @@
 | 
			
		|||
                        </template>
 | 
			
		||||
                      </a-alert>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectIRIp"}}' desc='{{ i18n "pages.xray.DirectIRIpDesc"}}' v-model="IRIpDirectSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectIRDomain"}}' desc='{{ i18n "pages.xray.DirectIRDomainDesc"}}' v-model="IRDomainDirectSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectChinaIp"}}' desc='{{ i18n "pages.xray.DirectChinaIpDesc"}}' v-model="ChinaIpDirectSettings"></setting-list-item>
 | 
			
		||||
| 
						 | 
				
			
			@ -248,6 +255,7 @@
 | 
			
		|||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectRussiaDomain"}}' desc='{{ i18n "pages.xray.DirectRussiaDomainDesc"}}' v-model="RussiaDomainDirectSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectVNIp"}}' desc='{{ i18n "pages.xray.DirectVNIpDesc"}}' v-model="VNIpDirectSettings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectVNDomain"}}' desc='{{ i18n "pages.xray.DirectVNDomainDesc"}}' v-model="VNDomainDirectSettings"></setting-list-item>
 | 
			
		||||
                    </a-list-item>
 | 
			
		||||
                  </a-collapse-panel>
 | 
			
		||||
                  <a-collapse-panel header='{{ i18n "pages.xray.ipv4Configs"}}'>
 | 
			
		||||
                    <a-row :xs="24" :sm="24" :lg="12">
 | 
			
		||||
| 
						 | 
				
			
			@ -258,8 +266,10 @@
 | 
			
		|||
                        </template>
 | 
			
		||||
                      </a-alert>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.GoogleIPv4"}}' desc='{{ i18n "pages.xray.GoogleIPv4Desc"}}' v-model="GoogleIPv4Settings"></setting-list-item>
 | 
			
		||||
                      <setting-list-item type="switch" title='{{ i18n "pages.xray.NetflixIPv4"}}' desc='{{ i18n "pages.xray.NetflixIPv4Desc"}}' v-model="NetflixIPv4Settings"></setting-list-item>
 | 
			
		||||
                    </a-list-item>
 | 
			
		||||
                  </a-collapse-panel>
 | 
			
		||||
                  <a-collapse-panel header='{{ i18n "pages.xray.warpConfigs"}}'>
 | 
			
		||||
                    <a-row :xs="24" :sm="24" :lg="12">
 | 
			
		||||
| 
						 | 
				
			
			@ -270,6 +280,7 @@
 | 
			
		|||
                        </template>
 | 
			
		||||
                      </a-alert>
 | 
			
		||||
                    </a-row>
 | 
			
		||||
                    <a-list-item>
 | 
			
		||||
                      <template v-if="WarpExist">
 | 
			
		||||
                        <setting-list-item type="switch" title='{{ i18n "pages.xray.GoogleWARP"}}' desc='{{ i18n "pages.xray.GoogleWARPDesc"}}' v-model="GoogleWARPSettings"></setting-list-item>
 | 
			
		||||
                        <setting-list-item type="switch" title='{{ i18n "pages.xray.OpenAIWARP"}}' desc='{{ i18n "pages.xray.OpenAIWARPDesc"}}' v-model="OpenAIWARPSettings"></setting-list-item>
 | 
			
		||||
| 
						 | 
				
			
			@ -279,7 +290,8 @@
 | 
			
		|||
                        <setting-list-item type="switch" title='{{ i18n "pages.xray.AppleWARP"}}' desc='{{ i18n "pages.xray.AppleWARPDesc"}}' v-model="AppleWARPSettings"></setting-list-item>
 | 
			
		||||
                        <setting-list-item type="switch" title='{{ i18n "pages.xray.RedditWARP"}}' desc='{{ i18n "pages.xray.RedditWARPDesc"}}' v-model="RedditWARPSettings"></setting-list-item>
 | 
			
		||||
                      </template>
 | 
			
		||||
                                <a-button v-else type="primary" icon="cloud" style="margin: 15px 20px;" @click="showWarp()">WARP</a-button>
 | 
			
		||||
                      <a-button style="margin-left: 20px;" v-else type="primary" icon="cloud" @click="showWarp()">WARP</a-button>
 | 
			
		||||
                    </a-list-item>
 | 
			
		||||
                  </a-collapse-panel>
 | 
			
		||||
                  <a-collapse-panel header='{{ i18n "pages.settings.resetDefaultConfig"}}'>
 | 
			
		||||
                    <a-space direction="horizontal" style="padding: 0 20px">
 | 
			
		||||
| 
						 | 
				
			
			@ -300,9 +312,7 @@
 | 
			
		|||
                    v-on:onSort="replaceRule">
 | 
			
		||||
                  <template slot="action" slot-scope="text, rule, index">
 | 
			
		||||
                    <table-sort-trigger :item-index="index"></table-sort-trigger>
 | 
			
		||||
                                    <span class="ant-table-row-index">
 | 
			
		||||
                                        [[ index+1 ]]
 | 
			
		||||
                                    </span>
 | 
			
		||||
                    <span class="ant-table-row-index"> [[ index+1 ]] </span>
 | 
			
		||||
                    <a-dropdown :trigger="['click']">
 | 
			
		||||
                      <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 16px; text-decoration: bold;"></a-icon>
 | 
			
		||||
                      <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
 | 
			
		||||
| 
						 | 
				
			
			@ -413,8 +423,9 @@
 | 
			
		|||
              <a-tab-pane key="tpl-outbound" tab='{{ i18n "pages.xray.Outbounds"}}' style="padding-top: 20px;" force-render="true">
 | 
			
		||||
                <a-row>
 | 
			
		||||
                  <a-col :xs="12" :sm="12" :lg="12">
 | 
			
		||||
                                    <a-button type="primary" icon="plus" @click="addOutbound()" style="margin-bottom: 10px;">{{ i18n
 | 
			
		||||
                                        "pages.xray.outbound.addOutbound" }}</a-button>
 | 
			
		||||
                    <a-button type="primary" icon="plus" @click="addOutbound()" style="margin-bottom: 10px;">
 | 
			
		||||
                      {{ i18n "pages.xray.outbound.addOutbound" }}
 | 
			
		||||
                    </a-button>
 | 
			
		||||
                    <a-button type="primary" icon="cloud" @click="showWarp()" style="margin-bottom: 10px;">WARP</a-button>
 | 
			
		||||
                  </a-col>
 | 
			
		||||
                  <a-col :xs="12" :sm="12" :lg="12" style="text-align: right;">
 | 
			
		||||
| 
						 | 
				
			
			@ -479,7 +490,9 @@
 | 
			
		|||
                </a-table>
 | 
			
		||||
              </a-tab-pane>
 | 
			
		||||
              <a-tab-pane key="tpl-reverse" tab='{{ i18n "pages.xray.outbound.reverse"}}' style="padding-top: 20px;" force-render="true">
 | 
			
		||||
                            <a-button type="primary" icon="plus" @click="addReverse()" style="margin-bottom: 10px;">{{ i18n "pages.xray.outbound.addReverse" }}</a-button>
 | 
			
		||||
                <a-button type="primary" icon="plus" @click="addReverse()" style="margin-bottom: 10px;">
 | 
			
		||||
                  {{ i18n "pages.xray.outbound.addReverse" }}
 | 
			
		||||
                </a-button>
 | 
			
		||||
                <a-table :columns="reverseColumns" bordered v-if="reverseData.length>0"
 | 
			
		||||
                    :row-key="r => r.key"
 | 
			
		||||
                    :data-source="reverseData"
 | 
			
		||||
| 
						 | 
				
			
			@ -507,7 +520,9 @@
 | 
			
		|||
                </a-table>
 | 
			
		||||
              </a-tab-pane>
 | 
			
		||||
              <a-tab-pane key="tpl-balancer" tab='{{ i18n "pages.xray.Balancers"}}' style="padding-top: 20px;" force-render="true">
 | 
			
		||||
                            <a-button type="primary" icon="plus" @click="addBalancer()" style="margin-bottom: 10px;">{{ i18n "pages.xray.balancer.addBalancer"}}</a-button>
 | 
			
		||||
                <a-button type="primary" icon="plus" @click="addBalancer()" style="margin-bottom: 10px;">
 | 
			
		||||
                  {{ i18n "pages.xray.balancer.addBalancer"}}
 | 
			
		||||
                </a-button>
 | 
			
		||||
                <a-table :columns="balancerColumns" bordered v-if="balancersData.length>0"
 | 
			
		||||
                    :row-key="r => r.key"
 | 
			
		||||
                    :data-source="balancersData"
 | 
			
		||||
| 
						 | 
				
			
			@ -535,16 +550,16 @@
 | 
			
		|||
                  <template slot="strategy" slot-scope="text, balancer, index">
 | 
			
		||||
                    <a-tag style="margin:0;" v-if="balancer.strategy=='random'" color="purple">Random</a-tag>
 | 
			
		||||
                    <a-tag style="margin:0;" v-if="balancer.strategy=='roundRobin'" color="green">Round Robin</a-tag>
 | 
			
		||||
                                    <a-tag style="margin:0;" v-if="balancer.strategy=='leastload'" color="green">Least Load</a-tag>
 | 
			
		||||
                                    <a-tag style="margin:0;" v-if="balancer.strategy=='leastping'" color="green">Least Ping</a-tag>
 | 
			
		||||
                    <a-tag style="margin:0;" v-if="balancer.strategy=='leastLoad'" color="green">Least Load</a-tag>
 | 
			
		||||
                    <a-tag style="margin:0;" v-if="balancer.strategy=='leastPing'" color="green">Least Ping</a-tag>
 | 
			
		||||
                  </template>
 | 
			
		||||
                  <template slot="selector" slot-scope="text, balancer, index">
 | 
			
		||||
                    <a-tag class="info-large-tag" style="margin:1;" v-for="sel in balancer.selector">[[ sel ]]</a-tag>
 | 
			
		||||
                  </template>
 | 
			
		||||
                </a-table>
 | 
			
		||||
                <a-radio-group
 | 
			
		||||
                                v-model="obsSettings"
 | 
			
		||||
                    v-if="observatoryEnable || burstObservatoryEnable"
 | 
			
		||||
                    v-model="obsSettings"
 | 
			
		||||
                    @change="changeObsCode"
 | 
			
		||||
                    button-style="solid"
 | 
			
		||||
                    style="margin: 10px 0;"
 | 
			
		||||
| 
						 | 
				
			
			@ -650,7 +665,7 @@
 | 
			
		|||
        </a-spin>
 | 
			
		||||
      </a-layout-content>
 | 
			
		||||
    </a-layout>
 | 
			
		||||
</a-layout>
 | 
			
		||||
  </a-layout>
 | 
			
		||||
{{template "js" .}}
 | 
			
		||||
{{template "component/themeSwitcher" .}}
 | 
			
		||||
{{template "component/sortableTable" .}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -310,7 +310,14 @@
 | 
			
		|||
"subURI" = "Reverse Proxy URI"
 | 
			
		||||
"subURIDesc" = "The URI path of the subscription URL for use behind proxies."
 | 
			
		||||
"fragment" = "Fragmentation"
 | 
			
		||||
"fragmentDesc" = "Enable fragmentation for TLS hello packet"
 | 
			
		||||
"fragmentDesc" = "Enable fragmentation for TLS hello packet."
 | 
			
		||||
"fragmentSett" = "Fragmentation Settings"
 | 
			
		||||
"mux" = "Mux"
 | 
			
		||||
"muxDesc" = "Transmit multiple independent data streams within an established data stream."
 | 
			
		||||
"muxSett" = "Mux Settings"
 | 
			
		||||
"direct" = "Direct Connection"
 | 
			
		||||
"directDesc" = "Directly establishes connections with domains or IP ranges of a specific country."
 | 
			
		||||
"directSett" = "Direct Connection Options"
 | 
			
		||||
 | 
			
		||||
[pages.xray]
 | 
			
		||||
"title" = "Xray Configs"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -311,6 +311,13 @@
 | 
			
		|||
"subURIDesc" = "Cambiar el URI base de la URL de suscripción para usar detrás de los servidores proxy"
 | 
			
		||||
"fragment" = "Fragmentación"
 | 
			
		||||
"fragmentDesc" = "Habilitar la fragmentación para el paquete de saludo de TLS"
 | 
			
		||||
"fragmentSett" = "Configuración de fragmentación"
 | 
			
		||||
"mux" = "Mux"
 | 
			
		||||
"muxDesc" = "Transmita múltiples flujos de datos independientes dentro de un flujo de datos establecido."
 | 
			
		||||
"muxSett" = "Mux Configuración"
 | 
			
		||||
"direct" = "Conexión directa"
 | 
			
		||||
"directDesc" = "Establece conexiones directamente con dominios o rangos de IP de un país específico."
 | 
			
		||||
"directSett" = "Opciones de conexión directa"
 | 
			
		||||
 | 
			
		||||
[pages.xray]
 | 
			
		||||
"title" = "Xray Configuración"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -309,8 +309,15 @@
 | 
			
		|||
"subShowInfoDesc" = "ترافیک و زمان باقیمانده را در برنامههای کاربری نمایش میدهد"
 | 
			
		||||
"subURI" = "پروکسی معکوس URI مسیر"
 | 
			
		||||
"subURIDesc" = "سابسکریپشن را برای استفاده در پشت پراکسیها تغییر میدهد URI مسیر"
 | 
			
		||||
"fragment" = "تکهتکه شدن"
 | 
			
		||||
"fragmentDesc" = "فعال کردن تکه تکه شدن برای بسته نخست تیالاس"
 | 
			
		||||
"fragment" = "فرگمنت"
 | 
			
		||||
"fragmentDesc" = "فعال کردن فرگمنت برای بستهی نخست تیالاس"
 | 
			
		||||
"fragmentSett" = "تنظیمات فرگمنت"
 | 
			
		||||
"mux" = "ماکس"
 | 
			
		||||
"muxDesc" = "چندین جریان داده مستقل را در یک جریان داده ثابت منتقل می کند"
 | 
			
		||||
"muxSett" = "تنظیمات ماکس"
 | 
			
		||||
"direct" = "اتصال مستقیم"
 | 
			
		||||
"directDesc" = "به طور مستقیم با دامنه ها یا محدوده آیپی یک کشور خاص ارتباط برقرار می کند"
 | 
			
		||||
"directSett" = "گزینه های اتصال مستقیم"
 | 
			
		||||
 | 
			
		||||
[pages.xray]
 | 
			
		||||
"title" = "پیکربندی ایکسری"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -311,6 +311,13 @@
 | 
			
		|||
"subURIDesc" = "URI path URL langganan untuk penggunaan di belakang proxy."
 | 
			
		||||
"fragment" = "Fragmentasi"
 | 
			
		||||
"fragmentDesc" = "Aktifkan fragmentasi untuk paket hello TLS"
 | 
			
		||||
"fragmentSett" = "Pengaturan Fragmentasi"
 | 
			
		||||
"mux" = "Mux"
 | 
			
		||||
"muxDesc" = "Mengirimkan beberapa aliran data independen dalam aliran data yang sudah ada."
 | 
			
		||||
"muxSett" = "Pengaturan Mux"
 | 
			
		||||
"direct" = "Koneksi langsung"
 | 
			
		||||
"directDesc" = "Secara langsung membuat koneksi dengan domain atau rentang IP negara tertentu."
 | 
			
		||||
"directSett" = "Opsi Koneksi Langsung"
 | 
			
		||||
 | 
			
		||||
[pages.xray]
 | 
			
		||||
"title" = "Konfigurasi Xray"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -311,6 +311,13 @@
 | 
			
		|||
"subURIDesc" = "Изменить базовый URI URL-адреса подписки для использования за прокси-серверами"
 | 
			
		||||
"fragment" = "Фрагментация"
 | 
			
		||||
"fragmentDesc" = "Включить фрагментацию для пакета приветствия TLS"
 | 
			
		||||
"fragmentSett" = "Настройки фрагментации"
 | 
			
		||||
"mux" = "Mux"
 | 
			
		||||
"muxDesc" = "Передача нескольких независимых потоков данных в рамках установленного потока данных."
 | 
			
		||||
"muxSett" = "Mux Настройки"
 | 
			
		||||
"direct" = "Прямая связь"
 | 
			
		||||
"directDesc" = "Напрямую устанавливает соединения с доменами или диапазонами IP конкретной страны."
 | 
			
		||||
"directSett" = "Варианты прямого подключения"
 | 
			
		||||
 | 
			
		||||
[pages.xray]
 | 
			
		||||
"title" = "Настройки Xray"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -311,6 +311,13 @@
 | 
			
		|||
"subURIDesc" = "URI до URL-адреси підписки для використання за проксі."
 | 
			
		||||
"fragment" = "Фрагментація"
 | 
			
		||||
"fragmentDesc" = "Увімкнути фрагментацію для пакету привітання TLS"
 | 
			
		||||
"fragmentSett" = "Параметри фрагментації"
 | 
			
		||||
"mux" = "Mux"
 | 
			
		||||
"muxDesc" = "Передавати кілька незалежних потоків даних у межах встановленого потоку даних."
 | 
			
		||||
"muxSett" = "Налаштування Mux"
 | 
			
		||||
"direct" = "Пряме підключення"
 | 
			
		||||
"directDesc" = "Безпосередньо встановлює з’єднання з доменами або діапазонами IP певної країни."
 | 
			
		||||
"directSett" = "Параметри прямого підключення"
 | 
			
		||||
 | 
			
		||||
[pages.xray]
 | 
			
		||||
"title" = "Xray конфігурації"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -311,6 +311,13 @@
 | 
			
		|||
"subURIDesc" = "Thay đổi URI cơ sở của URL gói đăng ký để sử dụng cho proxy trung gian"
 | 
			
		||||
"fragment" = "Sự phân mảnh"
 | 
			
		||||
"fragmentDesc" = "Kích hoạt phân mảnh cho gói TLS hello"
 | 
			
		||||
"fragmentSett" = "Cài đặt phân mảnh"
 | 
			
		||||
"mux" = "Mux"
 | 
			
		||||
"muxDesc" = "Truyền nhiều luồng dữ liệu độc lập trong luồng dữ liệu đã thiết lập."
 | 
			
		||||
"muxSett" = "Mux Cài đặt"
 | 
			
		||||
"direct" = "Kết nối trực tiếp"
 | 
			
		||||
"directDesc" = "Trực tiếp thiết lập kết nối với tên miền hoặc dải IP của một quốc gia cụ thể."
 | 
			
		||||
"directSett" = "Tùy chọn kết nối trực tiếp"
 | 
			
		||||
 | 
			
		||||
[pages.xray]
 | 
			
		||||
"title" = "Cài đặt Xray"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -311,6 +311,13 @@
 | 
			
		|||
"subURIDesc" = "用于代理后面的订阅 URL 的 URI 路径"
 | 
			
		||||
"fragment" = "分片"
 | 
			
		||||
"fragmentDesc" = "启用 TLS hello 数据包分片"
 | 
			
		||||
"fragmentSett" = "设置"
 | 
			
		||||
"mux" = "多路复用器"
 | 
			
		||||
"muxDesc" = "在已建立的数据流内传输多个独立的数据流"
 | 
			
		||||
"muxSett" = "复用器设置"
 | 
			
		||||
"direct" = "直接连接"
 | 
			
		||||
"directDesc" = "直接与特定国家的域或IP范围建立连接"
 | 
			
		||||
"directSett" = "直接连接选项"
 | 
			
		||||
 | 
			
		||||
[pages.xray]
 | 
			
		||||
"title" = "Xray 配置"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in a new issue