From 141b2ead43603799bee8e3554c22baaf26078b34 Mon Sep 17 00:00:00 2001
From: luo-bo <603509782@qq.com>
Date: Thu, 2 Apr 2026 03:18:02 +0800
Subject: [PATCH] =?UTF-8?q?```=20feat(cloudflare):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9F=9F=E5=90=8D=E5=BF=AB=E9=80=9F=E5=88=87=E6=8D=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

chore(deps): 引入Select2依赖库

添加Select2 4.0.13版本及其中文语言包，
用于实现域名快速切换的下拉搜索功能。
```
---
 app/view/cloudflare/hostnames.html | 26 +++++++--
 app/view/domain/record.html        | 22 +++++++-
 public/static/js/custom.js         | 85 +++++++++++++++++++++++++++++-
 3 files changed, 127 insertions(+), 6 deletions(-)

diff --git a/app/view/cloudflare/hostnames.html b/app/view/cloudflare/hostnames.html
index 17016c7..7941934 100644
--- a/app/view/cloudflare/hostnames.html
+++ b/app/view/cloudflare/hostnames.html
@@ -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({
diff --git a/app/view/domain/record.html b/app/view/domain/record.html
index 9c1f417..8e957ab 100644
--- a/app/view/domain/record.html
+++ b/app/view/domain/record.html
@@ -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;
diff --git a/public/static/js/custom.js b/public/static/js/custom.js
index 1b79d35..391a697 100644
--- a/public/static/js/custom.js
+++ b/public/static/js/custom.js
@@ -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();
     }
-}
\ No newline at end of file
+}