添加 自定义样式功能、主机记录增加快速打开链接 (#263)

* 添加支持自定义样式功能。

* 在主机记录列中增加一个新窗口打开链接的小按钮，方便快速访问。

* 记录值增加快速复制按钮，并用 padding 来调整了图标的间距避免空格

app/view/common/layout.html

@@ -12,6 +12,9 @@
   <link href="/static/css/app.min.css" rel="stylesheet">
   <link href="/static/css/skins/{$skin}.css" rel="stylesheet">
   <link href="/static/css/bootstrap-table.css?v=2" rel="stylesheet"/>
+  {if file_exists(public_path() . 'static/css/custom.css')}
+  <link href="/static/css/custom.css" rel="stylesheet">
+  {/if}
   <script src="{$cdnpublic}jquery/3.6.4/jquery.min.js"></script>
   <!--[if lt IE 9]>
     <script src="{$cdnpublic}html5shiv/3.7.3/html5shiv.min.js"></script>

app/view/domain/record.html

@@ -175,7 +175,7 @@ td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:360px;
 <div id="searchbox1">
   <div class="form-group">
 	<label>搜索</label>
-    <input type="text" class="form-control" name="keyword" placeholder="输入关键字">
+	<input type="text" class="form-control" name="keyword" placeholder="输入关键字">
   </div>
   <div class="form-group">
 	<select name="status" class="form-control"><option value="">所有状态</option><option value="1">启用</option><option value="0">暂停</option></select>
@@ -213,13 +213,13 @@ td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:360px;
 	</select>
   </div>
   <div class="form-group">
-    <input type="text" class="form-control" name="subdomain" placeholder="输入主机记录">
+	<input type="text" class="form-control" name="subdomain" placeholder="输入主机记录">
   </div>
   <div class="form-group">
 	<select name="line" class="form-control"><option value="">全部线路</option></select>
   </div>
   <div class="form-group">
-    <input type="text" class="form-control" name="value" placeholder="输入记录值">
+	<input type="text" class="form-control" name="value" placeholder="输入记录值">
   </div>
   <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
   <a href="javascript:searchClear()" class="btn btn-default" title="刷新解析记录列表"><i class="fa fa-refresh"></i> 刷新</a>
@@ -227,9 +227,9 @@ td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:360px;
 </div>
 </form>
 
-      <table id="listTable">
+	  <table id="listTable">
 	  </table>
-    </div>
+	</div>
   </div>
 </div>
 </div>
@@ -269,10 +269,16 @@ $(document).ready(function(){
 				visible: false,
 				title: '记录ID'
 			},
-			{
-				field: 'Name',
-				title: '主机记录'
-			},
+		   {
+			   field: 'Name',
+			   title: '主机记录',
+			   formatter: function(value, row, index) {
+				   var domain = value;
+				   if(domain === "@") domain = "{$domainName}";
+				   else domain = value + ".{$domainName}";
+				   return value + '<a href="http://' + domain + '" target="_blank" title="访问域名" style="padding-left:6px;"><i class="fa fa-external-link"></i></a>';
+			   }
+		   },
 			{
 				field: 'Type',
 				title: '记录类型',
@@ -282,18 +288,22 @@ $(document).ready(function(){
 					return value;
 				}
 			},
-            {
+			{
 				field: 'LineName',
 				title: '线路类型'
 			},
 			{
-				field: 'Value',
-				title: '记录值',
-				formatter: function(value, row, index) {
-					if(row.Type == 'MX') return value + ' | '+row.MX;
-					return value;
-				}
-			},
+			   field: 'Value',
+			   title: '记录值',
+			   formatter: function(value, row, index) {
+				   var display = value;
+				   if(row.Type == 'MX') display = value + ' | ' + row.MX;
+				   var copyId = 'copy-value-' + row.RecordId;
+				   // 只允许安全字符，避免引号问题
+				   var safeValue = (value+'').replace(/'/g, "&#39;").replace(/\\/g, "\\\\");
+				   return '<span id="'+copyId+'">'+display+'</span><a href="javascript:void(0);" title="复制记录值" onclick="copyToClipboard(\''+safeValue+'\', \'#'+copyId+'\')" style="padding-left:6px;"><i class=\"fa fa-copy\"></i></a>';
+			   }
+		   },
 			{
 				field: 'TTL',
 				title: 'TTL'
@@ -719,5 +729,28 @@ function advanceSearch(){
 		$("#searchbox1").slideDown();
 	}
 }
+function copyToClipboard(text, selector) {
+	var tempInput = document.createElement('input');
+	tempInput.style.position = 'absolute';
+	tempInput.style.left = '-9999px';
+	tempInput.value = text;
+	document.body.appendChild(tempInput);
+	tempInput.select();
+	document.execCommand('copy');
+	document.body.removeChild(tempInput);
+	if(selector){
+		var icon = document.querySelector(selector + ' + a i');
+		if(icon){
+			var oldClass = icon.className;
+			icon.className = 'fa fa-check';
+			setTimeout(function(){ icon.className = oldClass; }, 1000);
+		}
+	}
+	if(typeof layer !== 'undefined' && layer.msg){
+		layer.msg('已复制到剪贴板');
+	}else{
+		alert('已复制到剪贴板');
+	}
+}
 </script>
 {/block}