feat(cloudflare): 添加域名快速切换功能

在Cloudflare主机名页面添加域名快速切换下拉选择器,
允许用户通过搜索和选择快速切换到其他域名。
集成Select2组件提供更好的用户体验,
支持分页加载和中文本地化。

feat(record): 实现域名管理页面快速切换

在域名记录页面增加域名快速切换功能,
包含搜索下拉框和切换按钮,
优化页面布局结构以适应新功能。

chore(deps): 引入Select2依赖库

添加Select2 4.0.13版本及其中文语言包,
用于实现域名快速切换的下拉搜索功能。
```
This commit is contained in:
luo-bo
2026-04-02 03:18:02 +08:00
parent c64a385ffc
commit 141b2ead43
3 changed files with 127 additions and 6 deletions

View File

@@ -5,10 +5,18 @@
<div class="col-xs-12 center-block" style="float:none;">
<div class="panel panel-default panel-intro">
<div class="panel-heading">
<h3 class="panel-title">
<a href="/record/{$domainId}" class="btn btn-sm btn-default pull-right" style="margin-top:-6px"><i class="fa fa-reply fa-fw"></i> 返回解析</a>
Cloudflare增强 - {$domainName}
</h3>
<div class="clearfix">
<div class="pull-right" style="margin-top:-6px;max-width:100%;">
<div style="display:inline-block;width:300px;max-width:100%;vertical-align:middle;margin-right:6px;">
<select id="quickDomainSwitch" class="form-control">
<option value="{$domainId}" selected>{$domainName}</option>
</select>
</div>
<button type="button" class="btn btn-sm btn-primary" id="quickDomainSwitchBtn" style="vertical-align:middle;margin-right:6px;"><i class="fa fa-random fa-fw"></i> 切换域名</button>
<a href="/record/{$domainId}" class="btn btn-sm btn-default" style="vertical-align:middle;"><i class="fa fa-reply fa-fw"></i> 返回解析</a>
</div>
<h3 class="panel-title" style="padding-top:4px;">Cloudflare增强 - {$domainName}</h3>
</div>
</div>
<div class="panel-body">
<div class="alert alert-info">
@@ -97,12 +105,22 @@
<script src="/static/js/bootstrap-table-1.21.4.min.js"></script>
<script src="/static/js/bootstrap-table-page-jump-to-1.21.4.min.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/select2-4.0.13.min.js"></script>
<script src="/static/js/select2-i18n-zh-CN-4.0.13.min.js"></script>
<script src="/static/js/custom.js"></script>
<script>
var currentVerificationHostnameId = '';
var currentDomainName = '{$domainName}';
$(document).ready(function(){
initDomainQuickSwitch({
currentId: '{$domainId}',
currentText: {$domainName|json_encode|raw},
type: 'cloudflare',
buildUrl: function(id){
return '/cloudflare/hostnames/' + id;
}
});
$("#form-store").bootstrapValidator();
loadFallbackOrigin();
$("#listTable").bootstrapTable({

View File

@@ -167,7 +167,18 @@ td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:360px;
<div class="col-xs-12 center-block" style="float: none;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{if $user['type'] eq 'user'}<a href="/domain" class="btn btn-sm btn-default pull-right" style="margin-top:-6px"><i class="fa fa-reply fa-fw"></i> 返回</a>{/if}{$domainName}</h3>
<div class="clearfix">
<div class="pull-right" style="margin-top:-6px;max-width:100%;">
<div style="display:inline-block;width:300px;max-width:100%;vertical-align:middle;margin-right:6px;">
<select id="quickDomainSwitch" class="form-control">
<option value="{$domainId}" selected>{$domainName}</option>
</select>
</div>
<button type="button" class="btn btn-sm btn-primary" id="quickDomainSwitchBtn" style="vertical-align:middle;margin-right:6px;"><i class="fa fa-random fa-fw"></i> 切换域名</button>
{if $user['type'] eq 'user'}<a href="/domain" class="btn btn-sm btn-default" style="vertical-align:middle;"><i class="fa fa-reply fa-fw"></i> 返回</a>{/if}
</div>
<h3 class="panel-title" style="padding-top:4px;">{$domainName}</h3>
</div>
</div>
<div class="panel-body">
@@ -241,6 +252,8 @@ td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:360px;
<script src="/static/js/bootstrap-table-1.21.4.min.js"></script>
<script src="/static/js/bootstrap-table-page-jump-to-1.21.4.min.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/select2-4.0.13.min.js"></script>
<script src="/static/js/select2-i18n-zh-CN-4.0.13.min.js"></script>
<script src="/static/js/custom.js?v=1003"></script>
<script>
var recordLine = {$recordLine|json_encode|raw};
@@ -249,6 +262,13 @@ var defaultLine = recordLine[0].id;
var sidePagination = dnsconfig.page ? 'client' : 'server';
var showWeight = dnsconfig.weight;
$(document).ready(function(){
initDomainQuickSwitch({
currentId: '{$domainId}',
currentText: {$domainName|json_encode|raw},
buildUrl: function(id){
return '/record/' + id;
}
});
updateToolbar();
let defaultPageSize = getCookie('record_pagesize') ? getCookie('record_pagesize') : 15;
const pageNumber = typeof window.$_GET['pageNumber'] != 'undefined' ? parseInt(window.$_GET['pageNumber']) : 1;

View File

@@ -56,6 +56,89 @@ function updateQueryStr(obj){
history.replaceState({}, null, '?'+arr.join("&"));
}
function initDomainQuickSwitch(options){
if(typeof $ === 'undefined' || typeof $.fn.select2 === 'undefined'){
return null;
}
var settings = $.extend({
selectSelector: '#quickDomainSwitch',
buttonSelector: '#quickDomainSwitchBtn',
currentId: '',
currentText: '',
placeholder: '搜索域名后切换',
type: '',
limit: 10,
buildUrl: function(id){
return '/record/' + id;
}
}, options || {});
var $select = $(settings.selectSelector);
if(!$select.length){
return null;
}
if(settings.currentId !== '' && settings.currentText !== '' && $select.find('option[value="' + settings.currentId + '"]').length === 0){
$select.append(new Option(settings.currentText, settings.currentId, true, true));
}
$select.select2({
width: '100%',
language: 'zh-CN',
placeholder: settings.placeholder,
ajax: {
url: '/domain/data',
type: 'post',
dataType: 'json',
delay: 250,
data: function(params) {
var page = params.page || 1;
return {
kw: params.term || '',
type: settings.type || '',
offset: settings.limit * (page - 1),
limit: settings.limit
};
},
processResults: function(data, params) {
params.page = params.page || 1;
var rows = $.isArray(data.rows) ? data.rows : [];
return {
results: $.map(rows, function(item){
var text = item.name || '';
if(item.typename){
text += ' [' + item.typename + ']';
}
return {
id: item.id,
text: text
};
}),
pagination: {
more: (data.total || 0) > settings.limit * params.page
}
};
},
cache: true
}
});
var navigate = function(){
var targetId = $.trim($select.val());
if(targetId === ''){
if(typeof layer !== 'undefined'){
layer.msg('请先选择域名');
}else{
alert('请先选择域名');
}
return;
}
window.location.href = settings.buildUrl(targetId);
};
if(settings.buttonSelector){
$(settings.buttonSelector).off('click.domainSwitch').on('click.domainSwitch', navigate);
}
return {
navigate: navigate
};
}
if (typeof $.fn.bootstrapTable !== "undefined") {
$.fn.bootstrapTable.custom = {
method: 'post',
@@ -171,4 +254,4 @@ function delCookie(name)
if(cval!=null){
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
}
}