diff --git a/popup.css b/popup.css
index a2c02a3..3b91aac 100644
--- a/popup.css
+++ b/popup.css
@@ -215,13 +215,15 @@ button {
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
- padding: 10px 12px;
+ padding: 8px 12px;
+ /* 减少高度，从 10px 降到 8px */
display: flex;
align-items: center;
justify-content: space-between;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: var(--shadow-sm);
- cursor: grab;
+ margin-bottom: 8px;
+ /* 紧凑间距 */
}
.rule-item:active {
@@ -273,22 +275,38 @@ button {
background: rgba(59, 130, 246, 0.1);
}
+.rule-icon-box {
+ width: 28px;
+ height: 28px;
+ background: rgba(59, 130, 246, 0.08);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--accent-color);
+ margin-right: 10px;
+ flex-shrink: 0;
+}
+
.rule-domain {
font-size: 13px;
- font-weight: 600;
- margin-bottom: 2px;
+ font-weight: 500;
+ color: var(--text-primary);
+ display: flex;
+ align-items: center;
+ gap: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- color: var(--text-primary);
}
.rule-env {
display: inline-block;
- padding: 2px 6px;
+ padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
- font-weight: 500;
+ font-weight: 600;
+ text-transform: uppercase;
margin-left: 6px;
vertical-align: middle;
}
@@ -317,14 +335,6 @@ button {
border: 1px solid #FBCFE8;
}
-.rule-acc {
- font-size: 11px;
- color: var(--text-secondary);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
.rule-actions {
display: flex;
gap: 4px;
@@ -374,12 +384,21 @@ button {
opacity: 0.85;
background: rgba(248, 250, 252, 0.6);
border-style: dashed;
- padding-left: 8px; /* 移除拖拽手柄留下的空白 */
+ padding: 8px 12px !important;
+ width: 100% !important;
+ box-sizing: border-box !important;
+ margin-bottom: 8px;
+ margin-left: 0 !important;
}
#archive-list .rule-info {
filter: grayscale(0.4);
- padding-left: 4px; /* 让文字更靠左 */
+ flex: 1;
+}
+
+#archive-list .rule-icon-box {
+ background: rgba(100, 116, 139, 0.1);
+ color: var(--text-secondary);
}
#archive-list .rule-item:hover {
@@ -423,4 +442,4 @@ button {
#archive-list .rule-info {
padding-left: 0 !important;
flex: 1 !important;
-}
+}
\ No newline at end of file
diff --git a/popup.css.tmp b/popup.css.tmp
new file mode 100644
index 0000000..1d39cc0
--- /dev/null
+++ b/popup.css.tmp
@@ -0,0 +1,29 @@
+/* Archived Items Polish */
+#archive-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+}
+
+#archive-list .rule-item {
+ opacity: 0.85;
+ background: rgba(248, 250, 252, 0.6);
+ border-style: dashed;
+ padding: 10px 12px !important;
+ width: 100% !important;
+ box-sizing: border-box !important;
+ margin-bottom: 10px;
+ margin-left: 0 !important;
+}
+
+#archive-list .rule-info {
+ filter: grayscale(0.4);
+ flex: 1;
+}
+
+#archive-list .rule-item:hover {
+ opacity: 1;
+ background: #ffffff;
+ border-style: solid;
+}
diff --git a/popup.js b/popup.js
index 54a99ea..e39355c 100644
--- a/popup.js
+++ b/popup.js
@@ -70,6 +70,26 @@ document.addEventListener('DOMContentLoaded', () => {
return /[\u4E00-\u9FA5]/.test(str);
}
+ const ICON_SET = [
+ '', // User
+ '', // Building
+ '', // Shield
+ '', // Key
+ '', // Globe
+ '', // Briefcase
+ '', // Zap
+ '' // Database
+ ];
+
+ function getRandomIcon(seed) {
+ // Use a simple hash of the seed (rule ID) to pick a stable icon
+ let hash = 0;
+ for (let i = 0; i < seed.length; i++) {
+ hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+ }
+ return ICON_SET[Math.abs(hash) % ICON_SET.length];
+ }
+
// --- Auth View Controllers ---
function showView(viewName) {
if (loginView) loginView.classList.add('hidden');
@@ -324,12 +344,12 @@ document.addEventListener('DOMContentLoaded', () => {
+ ${getRandomIcon(rule.id)}
${rule.clientName}
${rule.env.replace('_', ' ')}
-
帐号: ${rule.username}