-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
116 lines (113 loc) · 5.77 KB
/
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Rename Tab</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
min-width: 600px;
min-height: 150px;
padding: 15px;
}
.table-fixed {
table-layout: fixed;
}
.w-url {
width: auto;
}
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.wrap-url {
white-space: normal;
word-break: break-all;
hyphens: auto;
}
.table-compact td {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.table-compact th {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
#editRuleDiv.hidden {
display: none;
}
#editRuleDiv {
margin-top: 20px; /* Added margin to push the edit form down slightly if needed */
}
</style>
</head>
<body class="bg-gray-100">
<div id="renameTabDiv" class="mb-4">
<h2 class="text-lg font-bold mb-2">手动重命名标签页</h2>
<input type="text" id="newTabTitle" placeholder="新的标签页标题" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2">
<div class="flex items-center mb-2">
<input type="checkbox" id="autoAddHostRule" class="mr-2 leading-tight">
<label for="autoAddHostRule" class="text-sm">自动添加 Host 规则</label>
</div>
<button id="renameTab" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">重命名</button>
</div>
<div id="renameRulesDiv">
<h2 class="text-lg font-bold mb-2">管理重命名规则</h2>
<div class="mb-2">
<input type="text" id="newRuleName" placeholder="规则名称" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
<select id="newRuleMatchType" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
<option value="host" selected>Host 匹配</option>
<option value="regex">正则表达式匹配</option>
</select>
<input type="text" id="newRuleUrlPattern" placeholder="URL 或 Host 模式" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
<input type="text" id="newRuleNewTitle" placeholder="新的标签页标题 (可以使用 ${title} 占位符)" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
<button id="addRuleButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">添加规则</button>
</div>
<div id="rulesList">
<table class="table-fixed min-w-full leading-normal shadow-md rounded-lg overflow-hidden table-compact">
<thead>
<tr>
<th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
名称
</th>
<th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider single-line">
匹配类型
</th>
<th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
URL 模式
</th>
<th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider single-line">
新标题
</th>
<th class="px-5 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
操作
</th>
</tr>
</thead>
<tbody>
<!-- Rules will be inserted here -->
</tbody>
</table>
<p class="text-gray-500 italic mt-2 hidden">没有已保存的重命名规则。</p>
</div>
</div>
<div id="editRuleDiv" class="hidden mt-4">
<h2 class="text-lg font-bold mb-2">编辑重命名规则</h2>
<input type="hidden" id="editRuleIndex">
<input type="text" id="editRuleName" placeholder="规则名称" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
<select id="editRuleMatchType" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
<option value="host">Host 匹配</option>
<option value="regex">正则表达式匹配</option>
</select>
<input type="text" id="editRuleUrlPattern" placeholder="URL 或 Host 模式" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
<input type="text" id="editRuleNewTitle" placeholder="新的标签页标题 (可以使用 ${title} 占位符)" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1">
<div class="flex justify-end">
<button id="saveRuleButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">保存</button>
<button id="cancelEditButton" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">取消</button>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>