fix: 修复铭文筛选相关操作没有互斥

hardstylewyl · Jul 2, 2024 · 24c0f27 · 24c0f27
1 parent e1f5d5f
commit 24c0f27
Show file tree

Hide file tree

Showing 5 changed files with 259 additions and 260 deletions.
diff --git a/src/components/business/Parts/K-Category/index.vue b/src/components/business/Parts/K-Category/index.vue
@@ -1,101 +1,102 @@
-<script setup lang="ts" generic="T extends string">
-import { onMounted, ref } from "vue";
-
-import { vMouseTip } from "@/directives";
-import { _getMiscLink } from "@/utils/concise";
-import { usePlayAudio } from "@/hooks";
-
-interface Props {
-  options: T[];
-  /** 是否显示线条 */
-  line?: boolean;
-  /** 标题宽度，在auto为false时使用 */
-  titleWidth?: string;
-  /** 是否启用标题宽度自适应 */
-  auto?: boolean;
-}
-withDefaults(defineProps<Props>(), {
-  line: false,
-  titleWidth: "initial",
-  gap: "initial",
-  auto: true,
-});
-
-const $emit = defineEmits<{
-  tab: [v: number];
-}>();
-
-const { playAudio } = usePlayAudio();
-
-const categoryRef = ref<HTMLElement>();
-
-/** 当前点击的分类索引 */
-const current_index = ref(0);
-/** 线条x坐标 */
-const left = ref(0);
-/** 线条宽度 */
-const width = ref(0);
-
-/** @description 点击分类标题
- * @param index 分类索引
- */
-const handleToggle = (index: number) => {
-  if (!categoryRef.value) return;
-  current_index.value = index;
-  playAudio("n4r4");
-  $emit("tab", index);
-
-  const parent_width = categoryRef.value.clientWidth;
-  const el = categoryRef.value!.children[index + 1] as HTMLElement;
-  const x = el.getBoundingClientRect().x;
-
-  /** 点击的tab距离中间的差值 */
-  const center_difference = x - parent_width / 2 + el.offsetWidth / 2;
-  /** 容器需要滚动的长度 */
-  const scroll_left = el.offsetLeft - x + center_difference;
-
-  left.value = el.offsetLeft;
-  width.value = el.offsetWidth;
-  categoryRef.value.scroll({ behavior: "smooth", left: scroll_left });
-};
-
-onMounted(() => {
-  handleToggle(0);
-});
-</script>
-
-<template>
-  <div
-    ref="categoryRef"
-    class="k-category"
-    :class="{
-      line: line,
-    }"
-  >
-    <!-- 滑动的图标 -->
-    <img
-      :style="{ left: left + 'px', width: width + 'px' }"
-      :src="_getMiscLink('epigraph_active')"
-      alt=""
-    />
-
-    <!-- 文字 -->
-    <div
-      v-for="(item, index) in options"
-      :key="index"
-      v-mouse-tip
-      class="title"
-      :style="{
-        width: titleWidth,
-      }"
-      :class="{ active: current_index === index, auto: auto }"
-      @click="handleToggle(index)"
-    >
-      <span>{{ item }}</span>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-@import url("./index.less");
-</style>
+<script setup lang="ts" generic="T extends string">
+import { onMounted, ref, watch } from "vue";
+
+import { vMouseTip } from "@/directives";
+import { _getMiscLink } from "@/utils/concise";
+import { usePlayAudio } from "@/hooks";
+
+interface Props {
+  options: T[];
+  /** 是否显示线条 */
+  line?: boolean;
+  /** 标题宽度，在auto为false时使用 */
+  titleWidth?: string;
+  /** 是否启用标题宽度自适应 */
+  auto?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  line: false,
+  titleWidth: "initial",
+  gap: "initial",
+  auto: true,
+});
+
+const current_index = defineModel<number>({ required: true });
+
+const { playAudio } = usePlayAudio();
+
+const categoryRef = ref<HTMLElement>();
+
+/** 线条x坐标 */
+const left = ref(0);
+/** 线条宽度 */
+const width = ref(0);
+
+/** @description 点击分类标题
+ * @param index 分类索引
+ */
+const handleToggle = (index: number) => {
+  current_index.value = index;
+  playAudio("n4r4");
+  handleResize(index);
+};
+
+/** @description 调整线条位置 */
+const handleResize = (index: number) => {
+  if (!categoryRef.value) return;
+  const parent_width = categoryRef.value.clientWidth;
+  const el = categoryRef.value!.children[index + 1] as HTMLElement;
+  const x = el.getBoundingClientRect().x;
+
+  /** 点击的tab距离中间的差值 */
+  const center_difference = x - parent_width / 2 + el.offsetWidth / 2;
+  /** 容器需要滚动的长度 */
+  const scroll_left = el.offsetLeft - x + center_difference;
+
+  left.value = el.offsetLeft;
+  width.value = el.offsetWidth;
+  categoryRef.value.scroll({ behavior: "smooth", left: scroll_left });
+};
+
+watch(current_index, handleResize);
+
+onMounted(() => {
+  handleToggle(0);
+});
+</script>
+
+<template>
+  <div
+    ref="categoryRef"
+    class="k-category"
+    :class="{
+      line: line,
+    }"
+  >
+    <!-- 滑动的图标 -->
+    <img
+      :style="{ left: left + 'px', width: width + 'px' }"
+      :src="_getMiscLink('epigraph_active')"
+      alt=""
+    />
+
+    <!-- 文字 -->
+    <div
+      v-for="(item, index) in options"
+      :key="index"
+      v-mouse-tip
+      class="title"
+      :style="{
+        width: titleWidth,
+      }"
+      :class="{ active: current_index === index, auto }"
+      @click="handleToggle(index)"
+    >
+      <span>{{ item }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import url("./index.less");
+</style>
diff --git a/src/store/modules/epigraph.ts b/src/store/modules/epigraph.ts
@@ -91,7 +91,6 @@ const EpigraphStore = defineStore("epigraph", () => {
      * @param v 铭文颜色
      */
     filterColor(v?: Game.Epigraph.Data["color"]) {
-      if (color.value === v) return;
       color.value = v;
       sortAll();
     },
@@ -103,13 +102,7 @@ const EpigraphStore = defineStore("epigraph", () => {
       /* 搜索铭文时重置下拉菜单 */
       type.value = "全部";
       color.value = undefined;
-
-      //如果搜索的值不为空，则进行搜索，否则重新排序
-      if (v) {
-        filter_list.value = _search<Game.Epigraph.Data>(_cloneDeep(epigraph_list.value), v, [
-          "name",
-        ]);
-      }
+      filter_list.value = _search<Game.Epigraph.Data>(_cloneDeep(epigraph_list.value), v, ["name"]);
     },
   };
 

diff --git a/...s/Epigraph/views/EpigraphList/components/EpigraphToolbar/components/FilterColor/index.vue b/...s/Epigraph/views/EpigraphList/components/EpigraphToolbar/components/FilterColor/index.vue
@@ -1,26 +1,20 @@
 <script setup lang="ts">
-import { ref } from "vue";
-
 import { vMouseTip } from "@/directives";
 import { MOUSE_TIP } from "@/config";
 import { usePlayAudio } from "@/hooks";
 
-const $emit = defineEmits<{
-  change: [v?: Game.Epigraph.Data["color"]];
-}>();
+const color = defineModel<Game.Epigraph.Data["color"]>();
 
 const { playAudio } = usePlayAudio();
 
+/** 颜色选项 */
 const colors: Game.Epigraph.Data["color"][] = ["BLUE", "GREEN", "RED"];
 
-const gender = ref<Game.Epigraph.Data["color"]>();
-
 /** @description 选择触发
  * @param v 颜色
  */
 const handleSetGender = (v?: Game.Epigraph.Data["color"]) => {
-  gender.value = v;
-  $emit("change", v);
+  color.value = v;
   playAudio();
 };
 </script>
@@ -39,7 +33,7 @@ const handleSetGender = (v?: Game.Epigraph.Data["color"]) => {
       :class="[
         item.toLocaleLowerCase(),
         {
-          active: gender === item,
+          active: color === item,
         },
       ]"
       @click="handleSetGender(item)"
@@ -50,7 +44,7 @@ const handleSetGender = (v?: Game.Epigraph.Data["color"]) => {
       }"
       class="box all"
       :class="{
-        active: gender === undefined,
+        active: color === undefined,
       }"
       @click="handleSetGender()"
     ></div>