🐛 修复重置筛选异常，高亮当前筛选

src/components/userAvatar/uav-select-chips.vue

@@ -19,11 +19,12 @@
         <slot :selected="isAllSelected" name="all">All</slot>
       </div>
     </v-chip>
-    <v-chip-group v-model="result" filter multiple>
+    <v-chip-group v-model="selected" filter multiple>
       <!-- Options -->
       <v-chip
         v-for="item in props.items"
         :key="item.value"
+        :class="selected.includes(item.value) ? 'selected' : ''"
         :size="props.size"
         :title="item.title"
         :value="item.value"
@@ -32,14 +33,12 @@
         variant="elevated"
       >
         <template #filter>
-          <v-icon color="var(--tgc-od-blue)">mdi-check</v-icon>
+          <v-icon color="var(--tgc-od-red)">mdi-check</v-icon>
         </template>
-        <slot :selected="result.includes(item.value)" name="item">
+        <div class="uav-scb-inner">
-          <div class="uav-scb-inner">
+          <TMiImg v-if="item.icon" :src="item.icon" alt="icon" />
-            <TMiImg v-if="item.icon" :src="item.icon" alt="icon" />
+          <span>{{ item.label }}</span>
-            <span>{{ item.label }}</span>
+        </div>
-          </div>
-        </slot>
       </v-chip>
     </v-chip-group>
   </div>
@@ -47,7 +46,7 @@
 
 <script lang="ts" setup>
 import TMiImg from "@comp/app/t-mi-img.vue";
-import { computed, defineProps, ref, watch } from "vue";
+import { computed, defineProps } from "vue";
 
 export type UavSelectChipsItem = {
   /** 渲染文本 */
@@ -60,22 +59,18 @@ export type UavSelectChipsItem = {
   value: string;
 };
 type UavSelectChipsProps = {
-  /** 选中 */
-  selected: Array<string>;
   /** 选项 */
   items: Array<UavSelectChipsItem>;
   /** 尺寸 */
   size?: "x-small" | "small" | "default" | "large" | "x-large" | number;
 };
-type UavSelectChipsEmits = (e: "chip-select", v: Array<string>) => void;
 
 const props = withDefaults(defineProps<UavSelectChipsProps>(), { size: "default" });
-const emits = defineEmits<UavSelectChipsEmits>();
 
-const result = ref<Array<string>>(props.selected);
+const selected = defineModel<Array<string>>("selected", { default: [] });
 const isAllSelected = computed<boolean>(() => {
   if (!props.items || props.items.length === 0) return false;
-  return props.items.every((i) => result.value.includes(i.value.toString()));
+  return props.items.every((i) => selected.value.includes(i.value.toString()));
 });
 const iconHeight = computed<string>(() => {
   switch (props.size) {
@@ -94,22 +89,11 @@ const iconHeight = computed<string>(() => {
   }
 });
 
-watch(
-  () => props.selected,
-  (v) => (result.value = [...v]),
-  { deep: true },
-);
-watch(
-  () => result.value,
-  () => emits("chip-select", result.value),
-  { deep: true },
-);
-
 async function toggleAll(): Promise<void> {
   if (isAllSelected.value) {
-    result.value = [];
+    selected.value = [];
   } else {
-    result.value = props.items.map((i) => i.value);
+    selected.value = props.items.map((i) => i.value);
   }
 }
 </script>
@@ -165,6 +149,10 @@ async function toggleAll(): Promise<void> {
   @include github-styles.github-tag-dark-gen(#548af7);
 
   position: relative;
+
+  &.selected {
+    @include github-styles.github-tag-dark-gen(#fb7299);
+  }
 }
 
 .uav-scb-inner {

src/components/userAvatar/uav-select.vue

@@ -5,45 +5,25 @@
       <div class="uav-select-item">
         <div class="uav-select-title">星级</div>
         <div class="uav-select-props">
-          <UavSelectChips
+          <UavSelectChips v-model:selected="starSelected" :items="starOpts" size="small" />
-            :items="starOpts"
-            :selected="model.star"
-            size="small"
-            @chipSelect="handleStarSelect"
-          />
         </div>
       </div>
       <div class="uav-select-item">
         <div class="uav-select-title">武器</div>
         <div class="uav-select-props">
-          <UavSelectChips
+          <UavSelectChips v-model:selected="weaponSelected" :items="weaponOpts" size="small" />
-            :items="weaponOpts"
-            :selected="model.weapon"
-            size="small"
-            @chipSelect="handleWeaponSelect"
-          />
         </div>
       </div>
       <div class="uav-select-item">
         <div class="uav-select-title">元素</div>
         <div class="uav-select-props">
-          <UavSelectChips
+          <UavSelectChips v-model:selected="elementSelected" :items="elementOpts" size="small" />
-            :items="elementOpts"
-            :selected="model.element"
-            size="small"
-            @chipSelect="handleElementSelect"
-          />
         </div>
       </div>
       <div class="uav-select-item">
         <div class="uav-select-title">地区</div>
         <div class="uav-select-props">
-          <UavSelectChips
+          <UavSelectChips v-model:selected="areaSelected" :items="areaOpts" size="small" />
-            :items="areaOpts"
-            :selected="model.area"
-            size="small"
-            @chipSelect="handleAreaSelect"
-          />
         </div>
       </div>
       <div class="uav-select-acts">
@@ -59,7 +39,7 @@
 </template>
 <script lang="ts" setup>
 import UavSelectChips, { type UavSelectChipsItem } from "@comp/userAvatar/uav-select-chips.vue";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 /** 返回数据 */
 export type UavSelectModel = {
@@ -113,41 +93,32 @@ const model = defineModel<UavSelectModel>({
 });
 const visible = defineModel<boolean>("show");
 
+watch(
+  () => visible.value,
+  () => {
+    if (visible.value) {
+      starSelected.value = model.value.star;
+      weaponSelected.value = model.value.weapon;
+      areaSelected.value = model.value.area;
+      elementSelected.value = model.value.element;
+    }
+  },
+);
+
 function onCancel(): void {
   visible.value = false;
 }
 
-async function onConfirm(): Promise<void> {
+function onConfirm(): void {
   model.value = {
     star: starSelected.value,
     weapon: weaponSelected.value,
     element: elementSelected.value,
     area: areaSelected.value,
   };
-  // await nextTick();
   emits("select", model.value);
   visible.value = false;
 }
-
-function handleStarSelect(e: Array<string>): void {
-  console.log("starSelect", e);
-  starSelected.value = e;
-}
-
-function handleWeaponSelect(e: Array<string>): void {
-  console.log("weaponSelect", e);
-  weaponSelected.value = e;
-}
-
-function handleElementSelect(e: Array<string>): void {
-  console.log("elementSelect", e);
-  elementSelected.value = e;
-}
-
-function handleAreaSelect(e: Array<string>): void {
-  console.log("areaSelect", e);
-  areaSelected.value = e;
-}
 </script>
 <style lang="scss" scoped>
 .uav-select-container {

src/pages/User/Characters.vue

@@ -198,7 +198,7 @@ const isConstUp = ref<boolean | null>(null);
 const uidList = shallowRef<Array<string>>([]);
 const roleOverview = shallowRef<Array<OverviewItem>>([]);
 const roleList = shallowRef<Array<TGApp.Sqlite.Character.TableTrans>>([]);
-const selectOpts = shallowRef<UavSelectModel>({ star: [], weapon: [], area: [], element: [] });
+const selectOpts = ref<UavSelectModel>({ star: [], weapon: [], area: [], element: [] });
 const selectedList = shallowRef<Array<TGApp.Sqlite.Character.TableTrans>>([]);
 const dataVal = shallowRef<TGApp.Sqlite.Character.TableTrans>();
 const enableShare = computed<boolean>(
@@ -275,6 +275,10 @@ function getSortDesc(value: boolean | null): string {
 }
 
 function resetList(): void {
+  isLevelUp.value = null;
+  isFetterUp.value = null;
+  isConstUp.value = null;
+  selectOpts.value = { star: [], weapon: [], area: [], element: [] };
   selectedList.value = getOrderedList(roleList.value);
   showSnackbar.success("已重置筛选条件");
   if (!dataVal.value) return;
@@ -283,10 +287,6 @@ function resetList(): void {
     dataVal.value = selectedList.value[0];
     selectIndex.value = 0;
   }
-  isLevelUp.value = null;
-  isFetterUp.value = null;
-  isConstUp.value = null;
-  selectOpts.value = { star: [], weapon: [], area: [], element: [] };
 }
 
 function getOrderedList(