diff --git a/app/templates/home.html b/app/templates/home.html
index 1ee4b97..6a0024f 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -163,7 +163,11 @@
                 </button>
                 <div class="text-body-secondary small">从上到下依次匹配，左侧填写正则表达式，右侧填写替换结果。</div>
             </div>
-            <div class="d-flex justify-content-end">
+            <div class="d-flex justify-content-end gap-2">
+                <button class="btn btn-outline-secondary" type="button" id="cancelRulesBtn">
+                    <i class="bi bi-arrow-counterclockwise"></i>
+                    <span class="ms-1">取消变更</span>
+                </button>
                 <button class="btn btn-success" type="submit">
                     <i class="bi bi-save"></i>
                     <span class="ms-1">保存规则</span>
@@ -189,8 +193,13 @@
     const existingRules = {{ path_rules | tojson | safe }};
     const ruleList = document.getElementById('ruleList');
     const addRuleBtn = document.getElementById('addRuleBtn');
+    const cancelRulesBtn = document.getElementById('cancelRulesBtn');
     const template = document.getElementById('ruleRowTemplate');
 
+    const initialRules = existingRules.length
+        ? existingRules.map(rule => ({ ...rule }))
+        : [{ pattern: '', replacement: '' }];
+
     function bindRemoveButton(row) {
         const removeBtn = row.querySelector('button');
         removeBtn.addEventListener('click', () => {
@@ -208,14 +217,18 @@
         ruleList.appendChild(clone);
     }
 
+    function renderRules(rules) {
+        ruleList.innerHTML = '';
+        if (!rules.length) {
+            addRuleRow();
+            return;
+        }
+        rules.forEach(rule => addRuleRow(rule.pattern || '', rule.replacement || ''));
+    }
+
     addRuleBtn.addEventListener('click', () => addRuleRow());
+    cancelRulesBtn.addEventListener('click', () => renderRules(initialRules));
 
-    if (existingRules.length) {
-        existingRules.forEach(rule => addRuleRow(rule.pattern || '', rule.replacement || ''));
-    }
-
-    if (!ruleList.children.length) {
-        addRuleRow();
-    }
+    renderRules(initialRules);
 </script>
 {% endblock %}