增加与无障碍组件搭配的mixin文件，在layout中使用，以决定加载哪个搜索图标

web/README.md

@@ -95,6 +95,9 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 * request-magnify: 请求在大屏幕或曰放大镜区域显示指定的文字
 * request-process-text-element: 请求对某个元素的子孙元素中所有符合【是包含文字的叶子节点】这一条件的元素，都添加上tabindex="0"这一attribute。（工作量太大时可以用这招。）
 
+### 其他组件通过mixin能得到的变量
+* 表示当前无障碍配色方案的themeIdx，可用于决定加载哪种颜色的图标。
+
 ## 使用无障碍组件时，路由跳转相关规则
 * 单纯的路由跳转，尽量用a标签或router-link标签，不要在点击事件回调里跳转，因为上述标签天生支持键盘操作。
 * 复杂逻辑的路由跳转，不得不在事件回调里进行操作时，除了响应click事件，还要响应keydown事件：`@keydown.enter.passive...`

web/src/assets/images/search-black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.74" height="13.74" viewBox="0 0 13.74 13.74"><defs><style>.a{fill:#000000;}</style></defs><path class="a" d="M96.8,96.072a6.455,6.455,0,1,0-3.047,2.013.515.515,0,1,0-.3-.986,5.537,5.537,0,1,1,2.32-1.428.6.6,0,0,0,.006.836l2.415,2.415a.515.515,0,1,0,.729-.729Z" transform="translate(-85.333 -85.333)"/></svg>

web/src/assets/images/search-default-color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.74" height="13.74" viewBox="0 0 13.74 13.74"><defs><style>.a{fill:#ab3434;}</style></defs><path class="a" d="M96.8,96.072a6.455,6.455,0,1,0-3.047,2.013.515.515,0,1,0-.3-.986,5.537,5.537,0,1,1,2.32-1.428.6.6,0,0,0,.006.836l2.415,2.415a.515.515,0,1,0,.729-.729Z" transform="translate(-85.333 -85.333)"/></svg>

web/src/assets/images/search-yellow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.74" height="13.74" viewBox="0 0 13.74 13.74"><defs><style>.a{fill:yellow;}</style></defs><path class="a" d="M96.8,96.072a6.455,6.455,0,1,0-3.047,2.013.515.515,0,1,0-.3-.986,5.537,5.537,0,1,1,2.32-1.428.6.6,0,0,0,.006.836l2.415,2.415a.515.515,0,1,0,.729-.729Z" transform="translate(-85.333 -85.333)"/></svg>

web/src/views/accessibility.vue

@@ -555,6 +555,7 @@ export default {
     },
     'ariaSettings.themeIdx': {
       handler() {
+        this.$eventBus.$emit('color-modification', this.ariaSettings.themeIdx)
         this.updateThemeClass()
       },
       immediate: true,

web/src/views/accessibilityMixin.js

@@ -0,0 +1,32 @@
+export default {
+  data() {
+    return {
+      themeIdx: 0,
+    }
+  },
+  methods: {
+    updateColorTheme(idx) {
+      if (idx === undefined) {
+        const settings = localStorage.getItem('ariaSettings')
+        if (settings) {
+          this.themeIdx = JSON.parse(settings).themeIdx
+        }
+      } else {
+        this.themeIdx = idx
+      }
+    }
+  },
+  created() {
+    this.updateColorTheme()
+    window.addEventListener('storage', this.updateColorTheme, {
+      passive: true,
+    })
+    this.$eventBus.$on('color-modification', this.updateColorTheme)
+  },
+  destroyed() {
+    window.removeEventListener('storage', this.updateColorTheme, {
+      passive: true,
+    })
+    this.$eventBus.$off('color-modification', this.updateColorTheme)
+  }
+}

web/src/views/layout/index.vue

@@ -93,6 +93,9 @@
               tabindex="0"
               aria-description="search"
             />
+            <img v-if="themeIdx === 0" :src="require('@/assets/images/search-default-color.svg')" alt="">
+            <img v-if="[1, 3].includes(themeIdx)" :src="require('@/assets/images/search-black.svg')" alt="">
+            <img v-if="[2, 4].includes(themeIdx)" :src="require('@/assets/images/search-yellow.svg')" alt="">
           </div>
           <!-- <el-input
             placeholder="search..."
@@ -167,6 +170,7 @@
 import Accessibility from '/src/views/accessibility.vue'
 import { topData } from "./data";
 import MySwitch from "/src/components/Switch.vue";
+import accessibilityMixin from "/src/views/accessibilityMixin.js"
 
 export default {
   name: "Layout",
@@ -174,6 +178,7 @@ export default {
     Accessibility,
     MySwitch,
   },
+  mixins: [accessibilityMixin],
   data() {
     //这里存放数据
     return {
@@ -254,7 +259,8 @@ export default {
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
+  destroyed() {
+  }, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
@@ -399,6 +405,14 @@ export default {
           border-color: #ca000a;
         }
       }
+      img {
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
     }
     // /deep/.el-input__icon {
     //   font-size: 20px;