✨ 角色wiki筛选 #87

src/components/wiki/two-select-c.vue

@@ -0,0 +1,197 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <div class="two-sc-container">
+      <div class="two-sc-item">
+        <div class="two-sc-title">星级</div>
+        <v-item-group multiple mandatory v-model="selectedStar" class="two-sc-select">
+          <div v-for="(item, index) in selectStarList" :key="index">
+            <v-item v-slot="{ isSelected, toggle }" :value="item">
+              <v-btn @click="toggle" :color="isSelected ? 'primary' : ''">
+                <v-icon>{{ isSelected ? "mdi-star" : "mdi-star-outline" }}</v-icon>
+                <span>{{ item }}星</span>
+              </v-btn>
+            </v-item>
+          </div>
+        </v-item-group>
+      </div>
+      <div class="two-sc-item">
+        <div class="two-sc-title">武器</div>
+        <v-item-group multiple mandatory v-model="selectedWeapon" class="two-sc-select">
+          <div v-for="(item, index) in selectWeaponList" :key="index">
+            <v-item v-slot="{ isSelected, toggle }" :value="item">
+              <v-btn @click="toggle" :color="isSelected ? 'primary' : ''">
+                <img :alt="`${item}元素`" :src="`/icon/weapon/${item}.webp`" class="two-sci-icon" />
+                <span>{{ item }}</span>
+              </v-btn>
+            </v-item>
+          </div>
+        </v-item-group>
+      </div>
+      <div class="two-sc-item">
+        <div class="two-sc-title">元素</div>
+        <v-item-group multiple mandatory v-model="selectedElements" class="two-sc-select">
+          <div v-for="(item, index) in selectElementList" :key="index">
+            <v-item v-slot="{ isSelected, toggle }" :value="item">
+              <v-btn @click="toggle" class="element-btn" :color="isSelected ? 'primary' : ''">
+                <img
+                  :alt="`${item}元素`"
+                  :src="`/icon/element/${item}元素.webp`"
+                  class="two-sci-icon"
+                />
+                <span>{{ item }}元素</span>
+              </v-btn>
+            </v-item>
+          </div>
+        </v-item-group>
+      </div>
+      <div class="two-sc-item">
+        <div class="two-sc-title">地区</div>
+        <v-item-group multiple mandatory v-model="selectedArea" class="two-sc-select">
+          <div v-for="(item, index) in selectAreaList" :key="index">
+            <v-item v-slot="{ isSelected, toggle }" :value="item">
+              <v-btn @click="toggle" :color="isSelected ? 'primary' : ''">
+                <v-icon>{{ isSelected ? "mdi-check" : "mdi-checkbox-blank-outline" }}</v-icon>
+                <span>{{ item }}</span>
+              </v-btn>
+            </v-item>
+          </div>
+        </v-item-group>
+      </div>
+      <div class="tow-sc-submit">
+        <v-btn variant="tonal" @click="onCancel">取消</v-btn>
+        <v-btn @click="confirmSelect">确定</v-btn>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+import TOverlay from "../main/t-overlay.vue";
+
+// 一些数据
+const selectStarList = [4, 5];
+const selectWeaponList = ["单手剑", "双手剑", "弓", "法器", "长柄武器"];
+const selectElementList = ["冰", "岩", "水", "火", "草", "雷", "风"];
+const selectAreaList = ["蒙德", "璃月", "稻妻", "须弥", "枫丹", "愚人众", "至冬", "其他"];
+
+// 选中的元素
+const selectedStar = ref<number[]>(selectStarList);
+const selectedWeapon = ref<string[]>(selectWeaponList);
+const selectedElements = ref<string[]>(selectElementList);
+const selectedArea = ref<string[]>(selectAreaList);
+
+export interface SelectedCValue {
+  star: number[];
+  weapon: string[];
+  elements: string[];
+  area: string[];
+}
+
+interface TwoSelectProps {
+  modelValue: boolean;
+  reset: boolean;
+}
+
+interface TwoSelectEmits {
+  (e: "update:modelValue", value: boolean): void;
+
+  (e: "update:reset", value: boolean): void;
+
+  (e: "select-c", value: SelectedCValue): void;
+}
+
+const props = defineProps<TwoSelectProps>();
+const emits = defineEmits<TwoSelectEmits>();
+
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+  },
+});
+const reset = computed({
+  get() {
+    return props.reset;
+  },
+  set(value) {
+    emits("update:reset", value);
+  },
+});
+
+watch(
+  () => props.reset,
+  (value) => {
+    if (value) {
+      selectedStar.value = selectStarList;
+      selectedWeapon.value = selectWeaponList;
+      selectedElements.value = selectElementList;
+      selectedArea.value = selectAreaList;
+      reset.value = false;
+      confirmSelect();
+    }
+  },
+);
+
+function onCancel() {
+  console.log(selectedElements.value);
+  visible.value = false;
+}
+
+function confirmSelect() {
+  const value: SelectedCValue = {
+    star: selectedStar.value,
+    weapon: selectedWeapon.value,
+    elements: selectedElements.value,
+    area: selectedArea.value,
+  };
+  emits("select-c", value);
+  visible.value = false;
+}
+</script>
+<style lang="css" scoped>
+.two-sc-container {
+  display: flex;
+  width: 400px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: var(--box-bg-1);
+  gap: 10px;
+}
+
+.two-sc-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  column-gap: 10px;
+}
+
+.two-sc-title {
+  font-size: 20px;
+  font-weight: bold;
+  word-break: keep-all;
+}
+
+.two-sc-select {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.two-sci-icon {
+  width: 30px;
+  height: 30px;
+  margin-right: 5px;
+}
+
+.tow-sc-submit {
+  display: flex;
+  margin-left: auto;
+  gap: 10px;
+}
+</style>

src/data/app/character.json

@@ -4,6 +4,7 @@
     "contentId": 500673,
     "name": "闲云",
     "title": "鸾音鹤信",
+    "area": "璃月",
     "birthday": [4, 11],
     "star": 5,
     "element": "风",
@@ -15,6 +16,7 @@
     "contentId": 500419,
     "name": "娜维娅",
     "title": "明花蔓舵",
+    "area": "枫丹",
     "birthday": [8, 16],
     "star": 5,
     "element": "岩",
@@ -26,6 +28,7 @@
     "contentId": 500291,
     "name": "芙宁娜",
     "title": "不休独舞",
+    "area": "枫丹",
     "birthday": [10, 13],
     "star": 5,
     "element": "水",
@@ -37,6 +40,7 @@
     "contentId": 500207,
     "name": "那维莱特",
     "title": "谕告的潮音",
+    "area": "枫丹",
     "birthday": [12, 18],
     "star": 5,
     "element": "水",
@@ -48,6 +52,7 @@
     "contentId": 500286,
     "name": "莱欧斯利",
     "title": "寂罪的密使",
+    "area": "枫丹",
     "birthday": [11, 23],
     "star": 5,
     "element": "冰",
@@ -59,6 +64,7 @@
     "contentId": 6937,
     "name": "林尼",
     "title": "惑光幻戏",
+    "area": "枫丹",
     "birthday": [2, 2],
     "star": 5,
     "element": "火",
@@ -70,6 +76,7 @@
     "contentId": 6489,
     "name": "白术",
     "title": "遵生合和",
+    "area": "璃月",
     "birthday": [4, 25],
     "star": 5,
     "element": "草",
@@ -81,6 +88,7 @@
     "contentId": 6180,
     "name": "迪希雅",
     "title": "炽鬃之狮",
+    "area": "须弥",
     "birthday": [4, 7],
     "star": 5,
     "element": "火",
@@ -92,6 +100,7 @@
     "contentId": 5865,
     "name": "艾尔海森",
     "title": "诲韬诤言",
+    "area": "须弥",
     "birthday": [2, 11],
     "star": 5,
     "element": "草",
@@ -103,6 +112,7 @@
     "contentId": 5494,
     "name": "流浪者",
     "title": "久世浮倾",
+    "area": "须弥",
     "birthday": [1, 3],
     "star": 5,
     "element": "风",
@@ -114,6 +124,7 @@
     "contentId": 5111,
     "name": "纳西妲",
     "title": "白草净华",
+    "area": "须弥",
     "birthday": [10, 27],
     "star": 5,
     "element": "草",
@@ -125,6 +136,7 @@
     "contentId": 4780,
     "name": "赛诺",
     "title": "缄秘的裁遣",
+    "area": "须弥",
     "birthday": [6, 23],
     "star": 5,
     "element": "雷",
@@ -136,6 +148,7 @@
     "contentId": 5020,
     "name": "妮露",
     "title": "莲光落舞筵",
+    "area": "须弥",
     "birthday": [12, 3],
     "star": 5,
     "element": "水",
@@ -147,6 +160,7 @@
     "contentId": 4334,
     "name": "提纳里",
     "title": "浅蔚轻行",
+    "area": "须弥",
     "birthday": [12, 29],
     "star": 5,
     "element": "草",
@@ -158,6 +172,7 @@
     "contentId": 3875,
     "name": "神里绫人",
     "title": "磐祭叶守",
+    "area": "稻妻",
     "birthday": [3, 26],
     "star": 5,
     "element": "水",
@@ -169,6 +184,7 @@
     "contentId": 3386,
     "name": "申鹤",
     "title": "孤辰茕怀",
+    "area": "璃月",
     "birthday": [3, 10],
     "star": 5,
     "element": "冰",
@@ -180,6 +196,7 @@
     "contentId": 2415,
     "name": "埃洛伊",
     "title": "「异界的救世主」",
+    "area": "其他",
     "birthday": [4, 4],
     "star": 5,
     "element": "冰",
@@ -191,6 +208,7 @@
     "contentId": 4081,
     "name": "夜兰",
     "title": "兰生幽谷",
+    "area": "璃月",
     "birthday": [4, 20],
     "star": 5,
     "element": "水",
@@ -202,6 +220,7 @@
     "contentId": 3564,
     "name": "八重神子",
     "title": "浮世笑百姿",
+    "area": "稻妻",
     "birthday": [6, 27],
     "star": 5,
     "element": "雷",
@@ -213,6 +232,7 @@
     "contentId": 3276,
     "name": "荒泷一斗",
     "title": "花坂豪快",
+    "area": "稻妻",
     "birthday": [6, 1],
     "star": 5,
     "element": "岩",
@@ -224,6 +244,7 @@
     "contentId": 2403,
     "name": "珊瑚宫心海",
     "title": "真珠之智",
+    "area": "稻妻",
     "birthday": [2, 22],
     "star": 5,
     "element": "水",
@@ -235,6 +256,7 @@
     "contentId": 2404,
     "name": "雷电将军",
     "title": "一心净土",
+    "area": "稻妻",
     "birthday": [6, 26],
     "star": 5,
     "element": "雷",
@@ -246,6 +268,7 @@
     "contentId": 2040,
     "name": "优菈",
     "title": "浪沫的旋舞",
+    "area": "蒙德",
     "birthday": [10, 25],
     "star": 5,
     "element": "冰",
@@ -257,6 +280,7 @@
     "contentId": 2124,
     "name": "宵宫",
     "title": "琉焰华舞",
+    "area": "稻妻",
     "birthday": [6, 21],
     "star": 5,
     "element": "火",
@@ -268,6 +292,7 @@
     "contentId": 2142,
     "name": "枫原万叶",
     "title": "红叶逐荒波",
+    "area": "稻妻",
     "birthday": [10, 29],
     "star": 5,
     "element": "风",
@@ -279,6 +304,7 @@
     "contentId": 1627,
     "name": "胡桃",
     "title": "雪霁梅香",
+    "area": "璃月",
     "birthday": [7, 15],
     "star": 5,
     "element": "火",
@@ -290,6 +316,7 @@
     "contentId": 1058,
     "name": "刻晴",
     "title": "霆霓快雨",
+    "area": "璃月",
     "birthday": [11, 20],
     "star": 5,
     "element": "雷",
@@ -301,6 +328,7 @@
     "contentId": 1057,
     "name": "莫娜",
     "title": "星天水镜",
+    "area": "蒙德",
     "birthday": [8, 31],
     "star": 5,
     "element": "水",
@@ -312,6 +340,7 @@
     "contentId": 1360,
     "name": "阿贝多",
     "title": "白垩之子",
+    "area": "蒙德",
     "birthday": [9, 13],
     "star": 5,
     "element": "岩",
@@ -323,6 +352,7 @@
     "contentId": 1433,
     "name": "甘雨",
     "title": "循循守月",
+    "area": "璃月",
     "birthday": [12, 2],
     "star": 5,
     "element": "冰",
@@ -334,6 +364,7 @@
     "contentId": 1056,
     "name": "七七",
     "title": "冻冻回魂夜",
+    "area": "璃月",
     "birthday": [3, 3],
     "star": 5,
     "element": "冰",
@@ -345,6 +376,7 @@
     "contentId": 1220,
     "name": "达达利亚",
     "title": "「公子」",
+    "area": "愚人众",
     "birthday": [7, 20],
     "star": 5,
     "element": "水",
@@ -356,6 +388,7 @@
     "contentId": 1290,
     "name": "钟离",
     "title": "尘世闲游",
+    "area": "璃月",
     "birthday": [12, 31],
     "star": 5,
     "element": "岩",
@@ -367,6 +400,7 @@
     "contentId": 55,
     "name": "可莉",
     "title": "逃跑的太阳",
+    "area": "蒙德",
     "birthday": [7, 27],
     "star": 5,
     "element": "火",
@@ -378,6 +412,7 @@
     "contentId": 1498,
     "name": "魈",
     "title": "护法夜叉",
+    "area": "璃月",
     "birthday": [4, 17],
     "star": 5,
     "element": "风",
@@ -389,6 +424,7 @@
     "contentId": 57,
     "name": "温迪",
     "title": "风色诗人",
+    "area": "蒙德",
     "birthday": [6, 16],
     "star": 5,
     "element": "风",
@@ -400,6 +436,7 @@
     "contentId": 75,
     "name": "迪卢克",
     "title": "晨曦的暗面",
+    "area": "蒙德",
     "birthday": [4, 30],
     "star": 5,
     "element": "火",
@@ -411,6 +448,7 @@
     "contentId": 4073,
     "name": "旅行者（荧）",
     "title": "",
+    "area": "其他",
     "birthday": [0, 0],
     "star": 5,
     "element": "",
@@ -422,6 +460,7 @@
     "contentId": 4074,
     "name": "旅行者（空）",
     "title": "",
+    "area": "其他",
     "birthday": [0, 0],
     "star": 5,
     "element": "",
@@ -433,6 +472,7 @@
     "contentId": 59,
     "name": "琴",
     "title": "蒲公英骑士",
+    "area": "蒙德",
     "birthday": [3, 14],
     "star": 5,
     "element": "风",
@@ -444,6 +484,7 @@
     "contentId": 2123,
     "name": "神里绫华",
     "title": "白鹭霜华",
+    "area": "稻妻",
     "birthday": [9, 28],
     "star": 5,
     "element": "冰",
@@ -455,6 +496,7 @@
     "contentId": 500672,
     "name": "嘉明",
     "title": "骏猊頕首",
+    "area": "璃月",
     "birthday": [12, 22],
     "star": 4,
     "element": "火",
@@ -466,6 +508,7 @@
     "contentId": 500605,
     "name": "夏沃蕾",
     "title": "明律决罚",
+    "area": "枫丹",
     "birthday": [1, 10],
     "star": 4,
     "element": "火",
@@ -477,6 +520,7 @@
     "contentId": 500292,
     "name": "夏洛蒂",
     "title": "朗镜索真",
+    "area": "枫丹",
     "birthday": [4, 10],
     "star": 4,
     "element": "冰",
@@ -488,6 +532,7 @@
     "contentId": 7257,
     "name": "菲米尼",
     "title": "潜怀遐梦",
+    "area": "枫丹",
     "birthday": [9, 24],
     "star": 4,
     "element": "冰",
@@ -499,6 +544,7 @@
     "contentId": 6938,
     "name": "琳妮特",
     "title": "丽影绮行",
+    "area": "枫丹",
     "birthday": [2, 2],
     "star": 4,
     "element": "风",
@@ -510,6 +556,7 @@
     "contentId": 6490,
     "name": "卡维",
     "title": "天穹之镜",
+    "area": "须弥",
     "birthday": [7, 9],
     "star": 4,
     "element": "草",
@@ -521,6 +568,7 @@
     "contentId": 6285,
     "name": "米卡",
     "title": "晴霜的标绘",
+    "area": "蒙德",
     "birthday": [8, 11],
     "star": 4,
     "element": "冰",
@@ -532,6 +580,7 @@
     "contentId": 5866,
     "name": "瑶瑶",
     "title": "仙蕊玲珑",
+    "area": "璃月",
     "birthday": [3, 6],
     "star": 4,
     "element": "草",
@@ -543,6 +592,7 @@
     "contentId": 5493,
     "name": "珐露珊",
     "title": "机逐封秘",
+    "area": "须弥",
     "birthday": [8, 20],
     "star": 4,
     "element": "风",
@@ -554,6 +604,7 @@
     "contentId": 5297,
     "name": "莱依拉",
     "title": "绮思晚星",
+    "area": "须弥",
     "birthday": [12, 19],
     "star": 4,
     "element": "冰",
@@ -565,6 +616,7 @@
     "contentId": 4781,
     "name": "坎蒂丝",
     "title": "浮金的誓愿",
+    "area": "须弥",
     "birthday": [5, 3],
     "star": 4,
     "element": "水",
@@ -576,6 +628,7 @@
     "contentId": 4736,
     "name": "多莉",
     "title": "梦园藏金",
+    "area": "须弥",
     "birthday": [12, 21],
     "star": 4,
     "element": "雷",
@@ -587,6 +640,7 @@
     "contentId": 4333,
     "name": "柯莱",
     "title": "萃念初蘖",
+    "area": "须弥",
     "birthday": [5, 8],
     "star": 4,
     "element": "草",
@@ -598,6 +652,7 @@
     "contentId": 4148,
     "name": "久岐忍",
     "title": "烦恼刈除",
+    "area": "稻妻",
     "birthday": [7, 27],
     "star": 4,
     "element": "雷",
@@ -609,6 +664,7 @@
     "contentId": 3387,
     "name": "云堇",
     "title": "红毹婵娟",
+    "area": "璃月",
     "birthday": [5, 21],
     "star": 4,
     "element": "岩",
@@ -620,6 +676,7 @@
     "contentId": 6594,
     "name": "绮良良",
     "title": "檐宇猫游",
+    "area": "稻妻",
     "birthday": [1, 22],
     "star": 4,
     "element": "草",
@@ -631,6 +688,7 @@
     "contentId": 4197,
     "name": "鹿野院平藏",
     "title": "心朝乂安",
+    "area": "稻妻",
     "birthday": [7, 24],
     "star": 4,
     "element": "风",
@@ -642,6 +700,7 @@
     "contentId": 2402,
     "name": "九条裟罗",
     "title": "黑羽鸣镝",
+    "area": "稻妻",
     "birthday": [7, 14],
     "star": 4,
     "element": "雷",
@@ -653,6 +712,7 @@
     "contentId": 3275,
     "name": "五郎",
     "title": "戎犬锵锵",
+    "area": "稻妻",
     "birthday": [5, 18],
     "star": 4,
     "element": "岩",
@@ -664,6 +724,7 @@
     "contentId": 2125,
     "name": "早柚",
     "title": "忍里之貉",
+    "area": "稻妻",
     "birthday": [10, 19],
     "star": 4,
     "element": "风",
@@ -675,6 +736,7 @@
     "contentId": 2606,
     "name": "托马",
     "title": "渡来介者",
+    "area": "稻妻",
     "birthday": [1, 9],
     "star": 4,
     "element": "火",
@@ -686,6 +748,7 @@
     "contentId": 1795,
     "name": "烟绯",
     "title": "智明无邪",
+    "area": "璃月",
     "birthday": [7, 28],
     "star": 4,
     "element": "火",
@@ -697,6 +760,7 @@
     "contentId": 1744,
     "name": "罗莎莉亚",
     "title": "棘冠恩典",
+    "area": "蒙德",
     "birthday": [1, 24],
     "star": 4,
     "element": "冰",
@@ -708,6 +772,7 @@
     "contentId": 1291,
     "name": "辛焱",
     "title": "燥热旋律",
+    "area": "璃月",
     "birthday": [10, 16],
     "star": 4,
     "element": "火",
@@ -719,6 +784,7 @@
     "contentId": 1055,
     "name": "砂糖",
     "title": "无害甜度",
+    "area": "蒙德",
     "birthday": [11, 26],
     "star": 4,
     "element": "风",
@@ -730,6 +796,7 @@
     "contentId": 1221,
     "name": "迪奥娜",
     "title": "猫尾特调",
+    "area": "蒙德",
     "birthday": [1, 18],
     "star": 4,
     "element": "冰",
@@ -741,6 +808,7 @@
     "contentId": 644,
     "name": "重云",
     "title": "雪融有踪",
+    "area": "璃月",
     "birthday": [9, 7],
     "star": 4,
     "element": "冰",
@@ -752,6 +820,7 @@
     "contentId": 111,
     "name": "诺艾尔",
     "title": "未授勋之花",
+    "area": "蒙德",
     "birthday": [3, 21],
     "star": 4,
     "element": "岩",
@@ -763,6 +832,7 @@
     "contentId": 105,
     "name": "班尼特",
     "title": "命运试金石",
+    "area": "蒙德",
     "birthday": [2, 29],
     "star": 4,
     "element": "火",
@@ -774,6 +844,7 @@
     "contentId": 382,
     "name": "菲谢尔",
     "title": "断罪皇女！！",
+    "area": "蒙德",
     "birthday": [5, 27],
     "star": 4,
     "element": "雷",
@@ -785,6 +856,7 @@
     "contentId": 78,
     "name": "凝光",
     "title": "掩月天权",
+    "area": "璃月",
     "birthday": [8, 26],
     "star": 4,
     "element": "岩",
@@ -796,6 +868,7 @@
     "contentId": 241,
     "name": "行秋",
     "title": "少年春衫薄",
+    "area": "璃月",
     "birthday": [10, 9],
     "star": 4,
     "element": "水",
@@ -807,6 +880,7 @@
     "contentId": 79,
     "name": "北斗",
     "title": "无冕的龙王",
+    "area": "璃月",
     "birthday": [2, 14],
     "star": 4,
     "element": "雷",
@@ -818,6 +892,7 @@
     "contentId": 112,
     "name": "香菱",
     "title": "万民百味",
+    "area": "璃月",
     "birthday": [11, 2],
     "star": 4,
     "element": "火",
@@ -829,6 +904,7 @@
     "contentId": 54,
     "name": "安柏",
     "title": "飞行冠军",
+    "area": "蒙德",
     "birthday": [8, 10],
     "star": 4,
     "element": "火",
@@ -840,6 +916,7 @@
     "contentId": 56,
     "name": "雷泽",
     "title": "狼少年",
+    "area": "蒙德",
     "birthday": [9, 9],
     "star": 4,
     "element": "雷",
@@ -851,6 +928,7 @@
     "contentId": 76,
     "name": "凯亚",
     "title": "寒风剑士",
+    "area": "蒙德",
     "birthday": [11, 30],
     "star": 4,
     "element": "冰",
@@ -862,6 +940,7 @@
     "contentId": 61,
     "name": "芭芭拉",
     "title": "闪耀偶像",
+    "area": "蒙德",
     "birthday": [7, 5],
     "star": 4,
     "element": "水",
@@ -873,6 +952,7 @@
     "contentId": 92,
     "name": "丽莎",
     "title": "蔷薇魔女",
+    "area": "蒙德",
     "birthday": [6, 9],
     "star": 4,
     "element": "雷",

src/pages/WIKI/Character.vue

@@ -1,19 +1,28 @@
 <template>
   <div class="wc-box">
-    <div class="wc-list">
-      <TwcListItem
-        v-for="item in cardsInfo"
-        v-model:cur-item="curItem"
-        :key="item.id"
-        :data="item"
-        @click="switchC(item)"
-        mode="character"
-      />
+    <div class="wc-left">
+      <div class="wc-select">
+        <v-btn @click="showSelect = true">
+          <span>筛选角色</span>
+        </v-btn>
+        <v-btn @click="resetSelect = true">重置筛选</v-btn>
+      </div>
+      <div class="wc-list">
+        <TwcListItem
+          v-for="item in cardsInfo"
+          v-model:cur-item="curItem"
+          :key="item.id"
+          :data="item"
+          @click="switchC(item)"
+          mode="character"
+        />
+      </div>
     </div>
     <div class="wc-detail">
       <TwcCharacter :item="curItem" @error="toOuter(curItem)" />
     </div>
   </div>
+  <TwoSelectC v-model="showSelect" @select-c="handleSelect" v-model:reset="resetSelect" />
 </template>
 <script lang="ts" setup>
 import { onBeforeMount, ref } from "vue";
@@ -23,19 +32,22 @@ import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
 import TwcCharacter from "../../components/wiki/twc-character.vue";
 import TwcListItem from "../../components/wiki/twc-list-item.vue";
+import TwoSelectC, { SelectedCValue } from "../../components/wiki/two-select-c.vue";
 import { AppCharacterData } from "../../data";
 import Mys from "../../plugins/Mys";
 import { createTGWindow } from "../../utils/TGWindow";
 
 const id = useRoute().params.id.toString() ?? "0";
-const cardsInfo = AppCharacterData;
+const showSelect = ref(false);
+const resetSelect = ref(false);
+const cardsInfo = ref(AppCharacterData);
 const curItem = ref<TGApp.App.Character.WikiBriefInfo>();
 
 onBeforeMount(() => {
   if (id === "0") {
-    curItem.value = cardsInfo[0];
+    curItem.value = cardsInfo.value[0];
   } else {
-    const item = cardsInfo.find((item) => item.id.toString() === id);
+    const item = cardsInfo.value.find((item) => item.id.toString() === id);
     if (item) {
       curItem.value = item;
     } else {
@@ -43,11 +55,33 @@ onBeforeMount(() => {
         text: `角色 ${id} 不存在`,
         color: "warn",
       });
-      curItem.value = cardsInfo[0];
+      curItem.value = cardsInfo.value[0];
     }
   }
 });
 
+function handleSelect(val: SelectedCValue) {
+  showSelect.value = false;
+  const filterC = AppCharacterData.filter((item) => {
+    if (!val.star.includes(item.star)) return false;
+    if (!val.weapon.includes(item.weapon)) return false;
+    if (!val.elements.includes(item.element)) return false;
+    return val.area.includes(item.area);
+  });
+  if (filterC.length === 0) {
+    showSnackbar({
+      text: "未找到符合条件的角色，已重置筛选条件",
+      color: "warn",
+    });
+    resetSelect.value = true;
+    return;
+  }
+  cardsInfo.value = filterC;
+  if (!filterC.find((item) => item.id === curItem.value?.id)) {
+    curItem.value = filterC[0];
+  }
+}
+
 async function switchC(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {
   if (item.id === 10000005 || item.id === 10000007) {
     await toOuter(item);
@@ -84,16 +118,33 @@ async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void>
 .wc-box {
   position: relative;
   display: flex;
-  max-height: calc(100vh - 40px);
+  height: calc(100vh - 40px);
   column-gap: 10px;
 }
 
+.wc-left {
+  display: flex;
+  width: 500px;
+  height: 100%;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.wc-select {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
 .wc-list {
+  position: relative;
   display: grid;
   width: 500px;
-  max-height: 100%;
+  height: calc(100% - 40px);
   padding-right: 10px;
   gap: 10px;
+  grid-auto-rows: 45px;
   grid-template-columns: repeat(3, minmax(100px, 1fr));
   overflow-y: auto;
 }

src/types/App/Character.d.ts

@@ -1,18 +1,25 @@
 /**
  * @file types/App/Character.d.ts
  * @description 角色相关类型定义文件
- * @since Beta v0.4.2
+ * @since Beta v0.4.3
  */
 
+/**
+ * @description 应用内角色命名空间
+ * @since Beta v0.4.3
+ * @namespace Character
+ * @memberof TGApp.App
+ */
 declare namespace TGApp.App.Character {
   /**
    * @description Wiki 页简略信息
-   * @since Alpha v0.2.2
+   * @since Beta v0.4.3
    * @interface WikiBriefInfo
    * @property {number} id - 角色 ID
    * @property {number} contentId - 观测枢的 content_id
    * @property {string} name - 角色名称
    * @property {string} title - 角色称号
+   * @property {string} area - 角色地区
    * @property {number[]} birthday - 角色生日 [月, 日]
    * @property {number} star - 角色星级
    * @property {string} element - 角色元素类型图标
@@ -25,6 +32,7 @@ declare namespace TGApp.App.Character {
     contentId: number;
     name: string;
     title: string;
+    area: string;
     birthday: number[];
     star: number;
     element: string;