feat(EquipList): init EquipList widget

src/entries/EquipList.ts

@@ -0,0 +1,9 @@
+import "virtual:uno.css";
+import { createApp } from "vue";
+
+import { createPinia } from "pinia";
+
+import EquipList from "../widgets/EquipList/index.vue";
+
+const ele = document.getElementById("root");
+if (ele) createApp(EquipList, {}).use(createPinia()).mount(ele);

src/widgets/EnemiesListV2/index.vue

@@ -414,7 +414,7 @@ export default defineComponent({
     };
 
     fetch(
-      `${window.location.origin}/index.php?${new URLSearchParams({
+      `/index.php?${new URLSearchParams({
         title: "敌人一览/数据",
         action: "raw",
         ctype: "application/json",

src/widgets/EquipList/Equip.vue

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { defineComponent, onBeforeMount, ref } from "vue";
+
+import { NSpin } from "naive-ui";
+
+import { getEquipData } from "./equipData";
+
+export default defineComponent({
+  components: { NSpin },
+  props: {
+    name: { type: String, required: true },
+  },
+  setup(props) {
+    const content = ref("");
+    onBeforeMount(async () => {
+      content.value = await getEquipData(props.name);
+    });
+    return {
+      content,
+    };
+  },
+});
+</script>
+<template>
+  <NSpin :show="!content">
+    <div v-html="content" />
+    <template #description> 加载中 </template>
+  </NSpin>
+</template>
+<style scoped>
+:deep(.modbody) {
+  display: flex;
+  width: 100%;
+  max-width: 800px;
+  margin: 10px 0;
+  padding: 10px;
+  box-shadow: 3px 3px 5px #888;
+  box-sizing: border-box;
+  flex-flow: column;
+}
+:deep(.modtype) {
+  display: flex;
+  flex-flow: column;
+  flex: 25 25 25%;
+  min-width: 60px;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+}
+:deep(.modname) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 75 75 75%;
+  height: 60px;
+}
+:deep(.rankicon) {
+  flex: 10 10 10%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 55px;
+}
+:deep(.ranktext) {
+  flex: 16.5 16.5 16.5%;
+  display: flex;
+  align-items: center;
+  min-width: 100px;
+  white-space: nowrap;
+  flex-wrap: wrap;
+  align-content: center;
+}
+:deep(.descr) {
+  flex: 25 25 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 130px;
+}
+:deep(.consume) {
+  flex: 50 50 50%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  min-width: 260px;
+}
+:deep(.basicbox) {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  margin: 5px 0;
+}
+:deep(.rankbox) {
+  display: flex;
+  width: 100%;
+  flex-flow: column;
+  margin: 5px 0;
+}
+:deep(.singlerank) {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  margin: 5px 0;
+}
+:deep(.rankinfo) {
+  flex: 90 90 90%;
+  display: flex;
+  flex-wrap: wrap;
+}
+:deep(.talent) {
+  flex: 83.5 83.5 83.5%;
+  display: flex;
+  align-items: center;
+}
+:deep(.majorsep) {
+  height: 1px;
+  background-color: black;
+}
+:deep(.minorsep) {
+  height: 1px;
+  background-color: lightgray;
+}
+:deep(.dark .majorsep) {
+  background-color: whitesmoke;
+}
+:deep(.dark .minorsep) {
+  background-color: gray;
+}
+</style>

src/widgets/EquipList/FilterSub.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
+
+import { useVModel } from "@vueuse/core";
+import { NSelect } from "naive-ui";
+import type { SelectGroupOption, SelectOption } from "naive-ui";
+
+export default defineComponent({
+  name: "FilterSub",
+  components: {
+    NSelect,
+  },
+  props: {
+    title: String,
+    options: {
+      type: Array as PropType<SelectOption[] | SelectGroupOption[]>,
+      default: () => [],
+    },
+    selected: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: true,
+    },
+  },
+  emits: ["update:selected"],
+  setup(props, { emit }) {
+    const selectedRef = useVModel(props, "selected", emit);
+    const onChange = (value: Array<string>) => {
+      selectedRef.value.splice(0);
+      value.forEach((value) => {
+        selectedRef.value.push(value);
+      });
+    };
+    return {
+      selectedRef,
+      onChange,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-row justify-center items-center">
+    <span class="basis-1/8">{{ title }}</span>
+    <div class="flex flex-row items-center basis-7/8">
+      <NSelect
+        class="m-1"
+        :options="options"
+        multiple
+        filterable
+        clearable
+        placeholder="输入或在下拉列表中选择"
+        @update:value="onChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/widgets/EquipList/SubAvatar.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { PropType } from "vue";
+import { defineComponent, ref, watch } from "vue";
+
+import { useVModel } from "@vueuse/core";
+
+import { getImagePath } from "@/utils/utils";
+
+import { useCharStore } from "./charStore";
+import type { Char } from "./types";
+
+export default defineComponent({
+  name: "SubAvatar",
+  props: {
+    char: {
+      type: Object as PropType<Char>,
+      required: true,
+    },
+  },
+  emits: ["update:char"],
+  setup(props, { emit }) {
+    const charStore = useCharStore();
+    const charRef = useVModel(props, "char", emit);
+    const onClickImg = (name: string) => {
+      return name;
+    };
+    const src = ref(
+      `/images/${getImagePath(`头像_${charRef.value.name}_2.png`)}`,
+    );
+    watch(charRef.value, () => {
+      src.value = `/images/${getImagePath(`头像_${charRef.value.name}_2.png`)}`;
+    });
+    return {
+      getImagePath,
+      src,
+      charRef,
+      onClickImg,
+      charStore,
+    };
+  },
+});
+</script>
+
+<template>
+  <img
+    class="m-[2px] cursor-pointer"
+    :src="`/images/${getImagePath(`头像_${charRef.name}_2.png`)}`"
+    width="65"
+    height="65"
+    @click="charStore.addOrDeleteChar(char)"
+  />
+</template>

src/widgets/EquipList/SubContainer.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
+
+import { NCard } from "naive-ui";
+
+import { getImagePath } from "@/utils/utils";
+
+import SubAvatar from "./SubAvatar.vue";
+import { Char } from "./types";
+
+export default defineComponent({
+  name: "SubContainer",
+  components: {
+    NCard,
+    SubAvatar,
+  },
+  props: {
+    title: String,
+    chars: {
+      type: Array as PropType<Char[]>,
+      default: () => [],
+    },
+  },
+  setup() {
+    return {
+      getImagePath,
+    };
+  },
+});
+</script>
+
+<template>
+  <NCard
+    class="w-full lg:w-[calc(50%-0.5rem)] m-1"
+    header-style="text-align: center;"
+    size="small"
+    hoverable
+  >
+    <template #header>
+      <div class="flex items-center justify-center">
+        <span
+          class="inline-flex w-[40px] h-[40px] align-text-bottom overflow-hidden justify-center items-center bg-black"
+        >
+          <img
+            class="absolute scale-50"
+            :src="`/images/${getImagePath(`职业分支图标_${title}.png`)}`"
+          />
+        </span>
+        <span class="text-center inline-block" style="width: 6em">{{
+          title
+        }}</span>
+      </div>
+    </template>
+    <SubAvatar v-for="(char, ind) in chars" :key="ind" :char="char" />
+  </NCard>
+</template>

src/widgets/EquipList/charStore.ts

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+
+import { defineStore } from "pinia";
+
+interface Char {
+  name: string;
+  type: string;
+  subtype: string;
+  rarity: string | number;
+  id: number;
+}
+export const useCharStore = defineStore("char", () => {
+  const selectedChar = ref<Char[]>([]);
+  const addOrDeleteChar = (char: Char) => {
+    !selectedChar.value.includes(char)
+      ? selectedChar.value.push(char)
+      : selectedChar.value.splice(selectedChar.value.indexOf(char), 1);
+  };
+  return {
+    selectedChar,
+    addOrDeleteChar,
+  };
+});

src/widgets/EquipList/equipData.ts

@@ -0,0 +1,21 @@
+const cache: Record<string, string> = {};
+export async function getEquipData(name: string): Promise<string> {
+  if (cache[name]) return cache[name];
+  const resp = await fetch(
+    `/api.php?${new URLSearchParams({
+      action: "parse",
+      format: "json",
+      title: "干员模组一览",
+      text: `{{#lst:${name}|专属模组}}`,
+      prop: "text",
+      utf8: "1",
+      disablelimitreport: "1",
+      disableeditsection: "1",
+      disabletoc: "1",
+    })}`,
+  );
+  const json = await resp.json();
+  const content = json.parse.text["*"];
+  cache[name] = content;
+  return content;
+}