mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-07-29 01:41:51 +08:00
322 lines
11 KiB
HTML
322 lines
11 KiB
HTML
<link rel="stylesheet" href="<%=resource%>/css/common.css">
|
|
<style>
|
|
/* 页面卡片边框 */
|
|
.cbi-section.cbi-tblsection {
|
|
border: 1px solid var(--border-color-low, #e0e0e0);
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
margin-top: 20px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.config-label {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
width: 150px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.config-row {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.config-row input[type="text"] {
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border-color-medium, #dadce0);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
width: 200px;
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 8px;
|
|
max-width: 650px;
|
|
padding: 10px 14px;
|
|
border-radius: 6px;
|
|
border-left: 3px solid #1a73e8;
|
|
opacity: 0.75;
|
|
}
|
|
.desc span {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
display: block;
|
|
}
|
|
|
|
.submit-button {
|
|
padding: 8px 20px;
|
|
width: 150px;
|
|
height: auto;
|
|
margin-top: 0;
|
|
background-color: #1a73e8;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.submit-button:hover {
|
|
background-color: #1557b0;
|
|
}
|
|
|
|
.version-value {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 44px;
|
|
height: 24px;
|
|
}
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
transition: .4s;
|
|
border-radius: 24px;
|
|
}
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 18px;
|
|
width: 18px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
input:checked + .slider {
|
|
background-color: #1a73e8;
|
|
}
|
|
input:checked + .slider:before {
|
|
transform: translateX(20px);
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">//<![CDATA[
|
|
|
|
function init_data() {
|
|
getAppFilterAdvData();
|
|
}
|
|
function showSuccessMessage(message = '<%:Settings saved successfully%>') {
|
|
const modal = document.getElementById('modal');
|
|
const messageElement = modal.querySelector('p');
|
|
messageElement.textContent = message;
|
|
modal.style.display = 'flex';
|
|
setTimeout(() => {
|
|
modal.style.display = 'none';
|
|
}, 1000);
|
|
}
|
|
|
|
|
|
|
|
function validateLanIfname(lanIfname) {
|
|
const regex = /^[a-zA-Z0-9.-]{2,8}$/;
|
|
return regex.test(lanIfname);
|
|
}
|
|
|
|
function submitAppFilterAdv() {
|
|
const lanIfname = document.getElementById('lan_ifname').value;
|
|
const autoLoadEngineSwitch = document.getElementById('autoLoadEngineSwitch').checked;
|
|
const disableHnatSwitch = document.getElementById('disableHnatSwitch').checked;
|
|
|
|
if (!validateLanIfname(lanIfname)) {
|
|
alert('<%:Invalid LAN interface name. Please ensure it is no more than 8 characters long and contains only letters, numbers, dot, and -.%>');
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
new XHR().post('<%=url('admin/network/set_app_filter_adv')%>', {
|
|
lan_ifname: lanIfname,
|
|
auto_load_engine: autoLoadEngineSwitch ? 1 : 0,
|
|
disable_hnat: disableHnatSwitch ? 1 : 0,
|
|
},
|
|
function (x, data) {
|
|
showSuccessMessage();
|
|
});
|
|
}
|
|
|
|
function disableFlowOffloading() {
|
|
new XHR().post('<%=url('admin/network/disable_flow_offloading')%>', {},
|
|
function (x, data) {
|
|
showSuccessMessage('<%:关闭成功%>');
|
|
});
|
|
}
|
|
|
|
function clearActiveTime() {
|
|
if (!confirm('<%:Are you sure you want to clear active time of all users?%>')) {
|
|
return;
|
|
}
|
|
new XHR().post('<%=url('admin/network/cmd')%>', {
|
|
action: 'clear_active_time'
|
|
},
|
|
function (x, data) {
|
|
if (data && data.code === 0) {
|
|
showSuccessMessage('<%:Active time cleared successfully%>');
|
|
} else {
|
|
alert(data ? (data.message || '<%:Failed to clear active time%>') : '<%:Failed to clear active time%>');
|
|
}
|
|
});
|
|
}
|
|
|
|
function clearOfflineUsers() {
|
|
if (!confirm('<%:Are you sure you want to clear all offline users?%>')) {
|
|
return;
|
|
}
|
|
new XHR().post('<%=url('admin/network/cmd')%>', {
|
|
action: 'clear_offline_users'
|
|
},
|
|
function (x, data) {
|
|
if (data && data.code === 0) {
|
|
showSuccessMessage('<%:Offline users cleared successfully%>');
|
|
} else {
|
|
alert(data ? (data.message || '<%:Failed to clear offline users%>') : '<%:Failed to clear offline users%>');
|
|
}
|
|
});
|
|
}
|
|
|
|
function submitHandle() {
|
|
submitAppFilterAdv();
|
|
}
|
|
|
|
function openModal() {
|
|
document.getElementById('modal').style.display = 'block';
|
|
setTimeout(closeModal, 2000);
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('modal').style.display = 'none';
|
|
}
|
|
|
|
function getAppFilterAdvData() {
|
|
console.log("getAppFilterAdvData");
|
|
new XHR().get('<%=url('admin/network/get_app_filter_adv')%>', null,
|
|
function (x, data) {
|
|
document.getElementById('lan_ifname').value = data.data.lan_ifname;
|
|
if (data.data.auto_load_engine == 1) {
|
|
document.getElementById('autoLoadEngineSwitch').checked = true;
|
|
} else {
|
|
document.getElementById('autoLoadEngineSwitch').checked = false;
|
|
}
|
|
if (data.data.disable_hnat == 1) {
|
|
document.getElementById('disableHnatSwitch').checked = true;
|
|
} else {
|
|
document.getElementById('disableHnatSwitch').checked = false;
|
|
}
|
|
}
|
|
);
|
|
|
|
new XHR().get('<%=url('admin/network/get_oaf_status')%>', null,
|
|
function (x, data) {
|
|
if (data && data.data) {
|
|
document.getElementById('oafVersion').textContent = data.data.version || '--';
|
|
document.getElementById('engineVersion').textContent = data.data.engine_version || '--';
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
window.onload = function() {
|
|
init_data();
|
|
};
|
|
//]]></script>
|
|
|
|
<div id="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 1000; justify-content: center; align-items: center;">
|
|
<div style="background-color: rgba(0, 0, 0, 0.65); padding: 14px 24px; border-radius: 6px; text-align: center; color: white; display: flex; justify-content: center; align-items: center;">
|
|
<p style="margin: 0; color: white; font-size: 14px;"><%:Settings saved successfully%></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cbi-section cbi-tblsection">
|
|
<div style="max-width: 1000px; margin-left: 10px; padding: 10px 15px;">
|
|
|
|
<div class="config-row">
|
|
<label class="config-label"><%:OAF Version%></label>
|
|
<span id="oafVersion" class="version-value">--</span>
|
|
</div>
|
|
|
|
<div class="config-row">
|
|
<label class="config-label"><%:OAF Driver Version%></label>
|
|
<span id="engineVersion" class="version-value">--</span>
|
|
</div>
|
|
|
|
<div class="config-row">
|
|
<label for="autoLoadEngineSwitch" class="config-label" style="cursor: pointer;"><%:Auto-load OAF driver%></label>
|
|
<label class="switch">
|
|
<input type="checkbox" id="autoLoadEngineSwitch" name="autoLoadEngineSwitch" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="desc">
|
|
<span><%:If the OAF driver cannot be manually unloaded or the current driver is unstable, you can turn off auto-loading at startup and manually install a suitable driver. It is recommended to use the official stable OpenWrt firmware.%></span>
|
|
</div>
|
|
|
|
<div class="config-row">
|
|
<label for="disableHnatSwitch" class="config-label" style="cursor: pointer;"><%:Disable Hardware Acceleration%></label>
|
|
<label class="switch">
|
|
<input type="checkbox" id="disableHnatSwitch" name="disableHnatSwitch" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="desc">
|
|
<span><%:Disable hardware acceleration (HNAT/ECM) and flow offloading to ensure application filtering works correctly. When enabled, this will automatically disable hardware acceleration and flow offloading features.%></span>
|
|
</div>
|
|
|
|
<div class="config-row">
|
|
<label for="lan_ifname" class="config-label"><%:LAN Interface%></label>
|
|
<input type="text" id="lan_ifname">
|
|
</div>
|
|
|
|
<div class="desc">
|
|
<span><%:The name of the LAN interface, used for detecting client info, supports fuzzy matching, but a complete interface name must be specified in bypass mode %></span>
|
|
</div>
|
|
<!--
|
|
<div class="config-row">
|
|
<label class="config-label"><%:Flow Offloading%></label>
|
|
<button type="button" class="submit-button" onclick="disableFlowOffloading()"><%:Disable Flow Offloading%></button>
|
|
</div>
|
|
|
|
<div class="desc">
|
|
<span><%:Flow offloading may affect filtering function. If the filtering feature does not work, you can disable flow offloading here and test again. Note: This only disables flow offloading temporarily. To permanently disable flow offloading, please turn it off in the firewall settings.%></span>
|
|
</div> -->
|
|
|
|
<div class="config-row">
|
|
<label class="config-label"><%:Clear Active Time%></label>
|
|
<button type="button" class="submit-button" onclick="clearActiveTime()" style="background-color: #ea4335;"><%:Clear Active Time%></button>
|
|
</div>
|
|
|
|
<div class="config-row">
|
|
<label class="config-label"><%:Clear Offline Users%></label>
|
|
<button type="button" class="submit-button" onclick="clearOfflineUsers()" style="background-color: #ea4335;"><%:Clear Offline Users%></button>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;">
|
|
<button type="button" class="submit-button" onclick="location.reload()" style="background: transparent; color: #1a73e8; border: 1px solid var(--border-color-medium, #d1d5db);"><%:Refresh%></button>
|
|
<button type="button" class="submit-button" onclick="submitHandle()"><%:Save%></button>
|
|
</div>
|
|
</div>
|
|
</div>
|