fix: 未启用无障碍功能时，不应修改outline样式

web/src/assets/css/ariaGlobalStyle.less

@@ -4,118 +4,120 @@
   display: none !important;
 }
 
-.aria-theme-default {
-  &:focus {
-    outline: 3px solid red;
-  }
-  * {
+.aria-active {
+  .aria-theme-default {
     &:focus {
       outline: 3px solid red;
     }
+    * {
+      &:focus {
+        outline: 3px solid red;
+      }
+    }
   }
-}
 
-.aria-theme-white {
-  background-color: white !important;
-  color: black !important;
-  &:focus {
-    outline: 3px solid black;
-  }
-  * { // TODO: 看看博物馆项目代码有没有精细地只给需要变色的元素添加class。
+  .aria-theme-white {
     background-color: white !important;
     color: black !important;
     &:focus {
       outline: 3px solid black;
     }
+    * { // TODO: 看看博物馆项目代码有没有精细地只给需要变色的元素添加class。
+      background-color: white !important;
+      color: black !important;
+      &:focus {
+        outline: 3px solid black;
+      }
+    }
+    a {
+      color: blue !important;
+    }
+    &.aria-inverse-theme {
+      background-color: black !important;
+      color: white !important;
+    }
+    .aria-inverse-theme {
+      background-color: black !important;
+      color: white !important;
+    }
   }
-  a {
-    color: blue !important;
-  }
-  &.aria-inverse-theme {
-    background-color: black !important;
-    color: white !important;
-  }
-  .aria-inverse-theme {
-    background-color: black !important;
-    color: white !important;
-  }
-}
 
-.aria-theme-blue {
-  background-color: blue !important;
-  color: yellow !important;
-  &:focus {
-    outline: 3px solid blue;
-  }
-  * {
+  .aria-theme-blue {
     background-color: blue !important;
     color: yellow !important;
     &:focus {
       outline: 3px solid blue;
     }
+    * {
+      background-color: blue !important;
+      color: yellow !important;
+      &:focus {
+        outline: 3px solid blue;
+      }
+    }
+    a {
+      color: white !important;
+    }
+    &.aria-inverse-theme {
+      background-color: yellow !important;
+      color: blue !important;
+    }
+    .aria-inverse-theme {
+      background-color: yellow !important;
+      color: blue !important;
+    }
   }
-  a {
-    color: white !important;
-  }
-  &.aria-inverse-theme {
-    background-color: yellow !important;
-    color: blue !important;
-  }
-  .aria-inverse-theme {
-    background-color: yellow !important;
-    color: blue !important;
-  }
-}
 
-.aria-theme-yellow {
-  background-color: yellow !important;
-  color: black !important;
-  &:focus {
-    outline: 3px solid yellow;
-  }
-  * {
+  .aria-theme-yellow {
     background-color: yellow !important;
     color: black !important;
     &:focus {
       outline: 3px solid yellow;
     }
+    * {
+      background-color: yellow !important;
+      color: black !important;
+      &:focus {
+        outline: 3px solid yellow;
+      }
+    }
+    a {
+      color: blue !important;
+    }
+    &.aria-inverse-theme {
+      background-color: black !important;
+      color: yellow !important;
+    }
+    .aria-inverse-theme {
+      background-color: black !important;
+      color: yellow !important;
+    }
   }
-  a {
-    color: blue !important;
-  }
-  &.aria-inverse-theme {
-    background-color: black !important;
-    color: yellow !important;
-  }
-  .aria-inverse-theme {
-    background-color: black !important;
-    color: yellow !important;
-  }
-}
 
-.aria-theme-black {
-  background-color: black !important;
-  color: yellow !important;
-  &:focus {
-    outline: 3px solid black;
-  }
-  * {
+  .aria-theme-black {
     background-color: black !important;
     color: yellow !important;
     &:focus {
       outline: 3px solid black;
     }
-  }
-  a {
-    color: white !important;
-  }
-  &.aria-inverse-theme {
-    background-color: yellow !important;
-    color: black !important;
-  }
-  .aria-inverse-theme {
-    background-color: yellow !important;
-    color: black !important;
+    * {
+      background-color: black !important;
+      color: yellow !important;
+      &:focus {
+        outline: 3px solid black;
+      }
+    }
+    a {
+      color: white !important;
+    }
+    &.aria-inverse-theme {
+      background-color: yellow !important;
+      color: black !important;
+    }
+    .aria-inverse-theme {
+      background-color: yellow !important;
+      color: black !important;
+    }
   }
 }
 

web/src/views/accessibility.vue

@@ -475,7 +475,7 @@ export default {
     },
     'ariaSettings.themeIdx': {
       handler() {
-        this.addThemeClassToNode()
+        this.updateThemeClass()
       },
       immediate: true,
     },
@@ -509,7 +509,7 @@ export default {
             passive: true,
           })
           this.$nextTick(() => {
-            this.addThemeClassToNode()
+            this.updateThemeClass()
           })
         } else {
           document.removeEventListener('mousemove', this.onMouseMoveForCrosshair, {
@@ -710,7 +710,7 @@ export default {
         }
       `
     },
-    addThemeClassToNode() {
+    updateThemeClass() {
       this.$nextTick(() => {
         const controlTargetNodeList = [...document.getElementsByClassName('aria-control-target')]
         for (const node of controlTargetNodeList) {