Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-07 08:42:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 修复左侧列表顺序异常

Browse Source
This commit is contained in:
BTMuli
2025-12-02 22:47:09 +08:00
parent 90d71be17e
commit c2ea3cf026
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/WIKI/Character.vue
View File

@@ -3,17 +3,17 @@
<div class="wc-box"> <div class="wc-box">
<div class="wc-left"> <div class="wc-left">
<div class="wc-select"> <div class="wc-select">
<v-btn @click="showSelect = true" class="wc-btn">筛选角色</v-btn> <v-btn class="wc-btn" @click="showSelect = true">筛选角色</v-btn>
<v-btn @click="resetSelect = true" class="wc-btn">重置筛选</v-btn> <v-btn class="wc-btn" @click="resetSelect = true">重置筛选</v-btn>
</div> </div>
<div class="wc-list"> <div class="wc-list">
<TwcListItem <TwcListItem
v-for="(item, index) in cardsInfo" v-for="(item, index) in cardsInfo"
v-model:cur-item="curItem"
:key="index" :key="index"
v-model:cur-item="curItem"
:data="item" :data="item"
@click="switchC(item)"
mode="character" mode="character"
@click="switchC(item)"
/> />
</div> </div>
</div> </div>
@@ -21,7 +21,7 @@
<TwcCharacter :item="curItem" /> <TwcCharacter :item="curItem" />
</div> </div>
</div> </div>
<TwoSelectC v-model="showSelect" @select-c="handleSelect" v-model:reset="resetSelect" /> <TwoSelectC v-model="showSelect" v-model:reset="resetSelect" @select-c="handleSelect" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import showDialog from "@comp/func/dialog.js"; import showDialog from "@comp/func/dialog.js";
@@ -35,10 +35,17 @@ import { useRoute } from "vue-router";
import { AppCharacterData } from "@/data/index.js"; import { AppCharacterData } from "@/data/index.js";
// 先按star降序，再按元素排序，再按id降序
const appCData = AppCharacterData.sort((a, b) => {
if (a.star !== b.star) return b.star - a.star;
if (a.element !== b.element) return a.element.localeCompare(b.element);
return b.id - a.id;
});
const id = useRoute().params.id.toString() ?? "0"; const id = useRoute().params.id.toString() ?? "0";
const showSelect = ref<boolean>(false); const showSelect = ref<boolean>(false);
const resetSelect = ref<boolean>(false); const resetSelect = ref<boolean>(false);
const cardsInfo = shallowRef<Array<TGApp.App.Character.WikiBriefInfo>>(AppCharacterData); const cardsInfo = shallowRef<Array<TGApp.App.Character.WikiBriefInfo>>(appCData);
const curItem = shallowRef<TGApp.App.Character.WikiBriefInfo>({ const curItem = shallowRef<TGApp.App.Character.WikiBriefInfo>({
id: 0, id: 0,
contentId: 0, contentId: 0,
@@ -66,9 +73,12 @@ onBeforeMount(() => {
curItem.value = cardsInfo.value[0]; curItem.value = cardsInfo.value[0];
}); });
watch(resetSelect, (val) => { watch(
if (val) cardsInfo.value = AppCharacterData; () => resetSelect.value,
}); (val) => {
if (val) cardsInfo.value = AppCharacterData;
},
);
function handleSelect(val: SelectedCValue): void { function handleSelect(val: SelectedCValue): void {
showSelect.value = false; showSelect.value = false;
@@ -108,7 +118,7 @@ async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void>
await toObcPage(item.contentId); await toObcPage(item.contentId);
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.wc-box { .wc-box {
position: relative; position: relative;
display: flex; display: flex;