水印调整，增加工具栏

src/components/ShikigamiSelect.vue

@@ -1,6 +1,11 @@
 <template>
-  <el-dialog v-model="show" :visable.sync="show" title="请选择式神" @cancel="cancel" :before-close="cancel">
-    <span>当前选择：{{current.name}}</span>
+  <el-dialog
+      v-model="show"
+      title="请选择式神"
+      @close="cancel"
+      :before-close="cancel"
+  >
+    <span>当前选择式神：{{ current.name }}</span>
     <el-tabs
         v-model="activeName"
         type="card"
@@ -13,127 +18,91 @@
           :label="rarity.label"
           :name="rarity.name"
       >
-        <div v-if="rarityLevels.includes(rarity)"> <!-- 只在这些级别中显示内容 -->
+        <div style="max-height: 600px; overflow-y: auto;">
           <el-space wrap size="large">
             <div v-for="i in filterShikigamiByRarity(rarity.name)" :key="i.name">
-              <el-button style="width: 100px; height: 100px;" @click.stop="confirm(i)">
+              <el-button
+                  style="width: 100px; height: 100px;"
+                  @click.stop="confirm(i)"
+              >
                 <img :src="i.avatar" style="width: 99px; height: 99px;">
               </el-button>
             </div>
           </el-space>
         </div>
-
       </el-tab-pane>
     </el-tabs>
-
-<!--    <template #footer>-->
-<!--      <span class="dialog-footer">-->
-<!--        <el-button @click.stop="cancel">Cancel</el-button>-->
-<!--        <el-button type="primary" @click.stop="confirm"> Confirm </el-button>-->
-<!--      </span>-->
-<!--    </template>-->
   </el-dialog>
 </template>
 
-<script  lang="ts">
-import shikigamiData from "../data/Shikigami.json";
-import { ref } from "vue";
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
+import shikigamiData from "../data/Shikigami.json"
 
+interface Shikigami {
+  name: string
+  avatar: string
+  rarity: string
+}
+
+const props = defineProps({
+  currentShikigami: {
+    type: Object as () => Shikigami,
+    default: () => ({ name: '' })
+  },
+  showSelectShikigami: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['closeSelectShikigami', 'updateShikigami'])
 
 const activeName = ref('ALL')
+let current = ref({name:''})
+const show = ref(false)
 
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
+const rarityLevels = [
+  { label: "全部", name: "ALL" },
+  { label: "SP", name: "SP" },
+  { label: "SSR", name: "SSR" },
+  { label: "SR", name: "SR" },
+  { label: "R", name: "R" },
+  { label: "N", name: "N" },
+  { label: "联动", name: "L" },
+  { label: "呱太", name: "G" },
+]
+
+watch(() => props.showSelectShikigami, (newVal) => {
+  show.value = newVal
+})
+
+watch(() => props.currentShikigami, (newVal) => {
+  console.log("ShikigamiSelect.vue" + current.value.name)
+  current.value = newVal
+  console.log("ShikigamiSelect.vue" + current.value.name)
+}, {deep: true})
+
+
+const handleClick = (tab: TabsPaneContext) => {
+  console.log('Tab clicked:', tab)
 }
-export default {
-  props: {
-    currentShikigami: {
-      type: Object,
-      default: {},
-    },
-    showSelectShikigami: {
-      type: Boolean,
-    },
-  },
 
-  data() {
-    return {
-      activeName:activeName,
-      shikigamiData: shikigamiData,
-      selected: null,
-      current: {},
-      show: false,
-      rarityLevels: [
-        {
-          "label":"全部",
-          "name":"ALL"
-        },
-        {
-          "label":"SP",
-          "name":"SP"
-        },
-        {
-          "label":"SSR",
-          "name":"SSR"
-        },
-        {
-          "label":"SR",
-          "name":"SR"
-        },
-        {
-          "label":"R",
-          "name":"R"
-        },
-        {
-          "label":"N",
-          "name":"N"
-        },
-        {
-          "label":"联动",
-          "name":"L"
-        },
-        {
-          "label":"呱太",
-          "name":"G"
-        },
-      ],
-    };
-  },
-  watch: {
-    showSelectShikigami(newVal, oldVal) {
-      console.log("=======>>>> ", newVal, oldVal);
-      this.show = newVal;
-    },
-    currentShikigami(newVal, oldVal) {
-        console.log("===item====>>>> ", newVal, oldVal);
-      this.current = newVal;
-    },
+const cancel = () => {
+  emit('closeSelectShikigami')
+  show.value = false
+}
 
-  },
-  methods: {
-    select(item) {
-        this.current = item;
-    },
-    cancel() {
-      console.log("cancel====");
-      this.$emit("closeSelectShikigami");
-    },
-    confirm(i) {
-      console.log("confirm====");
-      this.$emit("updateShikigami", JSON.parse(JSON.stringify(i)))
-      // this.current = {};
-    },
-    filterShikigamiByRarity(rarity) {
-      if(rarity.toLowerCase() == "all")
-        return this.shikigamiData
-      // 将传入的rarity参数转换为小写
-      const lowerCaseRarity = rarity.toLowerCase();
-      return this.shikigamiData.filter(shikigami =>
-          // 将shikigami对象的rarity属性也转换为小写进行比较
-          shikigami.rarity.toLowerCase() === lowerCaseRarity
-      );
-    },
-  },
-};
-</script>
+const confirm = (shikigami: Shikigami) => {
+  emit('updateShikigami', shikigami)
+  // cancel()
+}
+
+const filterShikigamiByRarity = (rarity: string) => {
+  if (rarity.toLowerCase() === 'all') return shikigamiData
+  return shikigamiData.filter(item =>
+      item.rarity.toLowerCase() === rarity.toLowerCase()
+  )
+}
+</script>