feat: 歌曲搜索

Author: clansty

AquaMai

@@ -11,12 +11,7 @@
   },
   "devDependencies": {
     "@fontsource/nerko-one": "^5.1.0",
-    "@iconify-json/fluent": "^1.2.2",
-    "@iconify-json/ic": "^1.2.0",
-    "@iconify-json/material-symbols": "^1.2.2",
-    "@iconify-json/mdi": "^1.2.0",
-    "@iconify-json/ph": "^1.2.0",
-    "@iconify-json/ri": "^1.2.0",
+    "@iconify/json": "^2.2.308",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@modyfi/vite-plugin-yaml": "^1.1.0",
     "@sentry/vite-plugin": "^2.22.5",

MaiChartManager/Front/package.json

@@ -1,27 +1,39 @@
-import { computed, defineComponent, PropType } from "vue";
-import { DataTableColumns, NButton, NDataTable, NFlex } from "naive-ui";
-import { addVersionList, genreList, musicList, musicListAll, version } from "@/store/refs";
+import { computed, defineComponent, PropType, reactive, ref } from "vue";
+import { DataTableBaseColumn, DataTableColumns, NButton, NDataTable, NFlex, NInput } from "naive-ui";
+import { addVersionList, genreList, musicList, musicListAll, selectedADir, selectMusicId, version } from "@/store/refs";
 import { MusicXmlWithABJacket } from "@/client/apiGen";
 import JacketBox from "@/components/JacketBox";
 import { GenreOption } from "@/components/GenreInput";
 import { LEVEL_COLOR, LEVELS } from "@/consts";
 import _ from "lodash";
+import { watchDebounced } from "@vueuse/core";
 
 export default defineComponent({
   props: {
     selectedMusicIds: Array as PropType<MusicXmlWithABJacket[]>,
-    continue: {type: Function, required: true},
+    continue: { type: Function, required: true },
+    cancel: { type: Function, required: true },
   },
-  setup(props, {emit}) {
+  setup(props, { emit }) {
+    const filter = ref('')
+    const nameColumn = reactive({
+      title: '标题', key: 'name',
+      filterOptionValue: null as string | null,
+      filter: (value, row) => {
+        if (!value) return true;
+        value = value.toString().toLowerCase();
+        return row.name!.toLowerCase().includes(value) || row.artist!.toLowerCase().includes(value) || row.charts!.some(chart => chart.designer?.toLowerCase().includes(value));
+      }
+    } satisfies DataTableBaseColumn<MusicXmlWithABJacket>)
     const columns = computed(() => [
-      {type: 'selection'},
-      {title: '资源目录', key: 'assetDir', width: '8em', filter: "default", filterOptions: _.uniq(musicListAll.value.map(it => it.assetDir!)).map(it => ({label: it, value: it}))},
+      { type: 'selection' },
+      { title: '资源目录', key: 'assetDir', width: '8em', filter: "default", filterOptions: _.uniq(musicListAll.value.map(it => it.assetDir!)).map(it => ({ label: it, value: it })) },
       {
         title: 'ID',
         key: 'id',
         width: '7em',
         sorter: 'default',
-        filterOptions: ['标准', 'DX', '宴会场'].map(it => ({label: it, value: it})),
+        filterOptions: ['标准', 'DX', '宴会场'].map(it => ({ label: it, value: it })),
         filter: (value, row) => {
           switch (value) {
             case '标准':
@@ -41,13 +53,13 @@ export default defineComponent({
         render: (row) => <JacketBox info={row} upload={false} class="h-20"/>,
         width: '8rem'
       },
-      {title: '标题', key: 'name'},
+      nameColumn,
       {
         title: '版本',
         key: 'version',
         width: '8em',
         sorter: 'default',
-        filterOptions: ['B35', 'B15'].map(it => ({label: it, value: it})),
+        filterOptions: ['B35', 'B15'].map(it => ({ label: it, value: it })),
         filter: (value, row) => {
           const type = row.version! < 20000 + version.value!.gameVersion! * 100 ? 'B35' : 'B15';
           return value === type;
@@ -58,30 +70,50 @@ export default defineComponent({
         key: 'addVersionId',
         render: (row) => <GenreOption genre={addVersionList.value.find(it => it.id === row.addVersionId)}/>,
         filter: "default",
-        filterOptions: addVersionList.value.map(it => ({label: it.genreName!, value: it.id!}))
+        filterOptions: addVersionList.value.map(it => ({ label: it.genreName!, value: it.id! }))
       },
       {
         title: '流派',
         key: 'genreId',
         render: (row) => <GenreOption genre={genreList.value.find(it => it.id === row.genreId)}/>,
         filter: "default",
-        filterOptions: genreList.value.map(it => ({label: it.genreName!, value: it.id!}))
+        filterOptions: genreList.value.map(it => ({ label: it.genreName!, value: it.id! }))
       },
       {
         title: '谱面',
         key: 'charts',
         render: (row) => <NFlex class="pt-1 text-sm" size="small">
           {
             (row.charts || []).map((chart, index) =>
-              chart.enable && <div key={index} class="c-white rounded-full px-2" style={{backgroundColor: LEVEL_COLOR[index!]}}>{LEVELS[chart.levelId!]}</div>)
+              chart.enable && <div key={index} class="c-white rounded-full px-2" style={{ backgroundColor: LEVEL_COLOR[index!] }}>{LEVELS[chart.levelId!]}</div>)
           }
         </NFlex>,
         width: '20em',
-        filterOptions: ['绿', '黄', '红', '紫', '白'].map((label, value) => ({label, value})),
+        filterOptions: ['绿', '黄', '红', '紫', '白'].map((label, value) => ({ label, value })),
         filter: (value, row) => row.charts![value as number].enable!
       },
+      {
+        title: '跳转',
+        key: 'jump',
+        width: '5em',
+        render: (row) => <NButton quaternary class="p-2" onClick={() => {
+          selectedADir.value = row.assetDir!;
+          selectMusicId.value = row.id!;
+          props.cancel();
+        }}>
+          <span class="i-tabler:external-link c-neutral-5"/>
+        </NButton>,
+      },
     ] satisfies DataTableColumns<MusicXmlWithABJacket>)
 
+    watchDebounced(
+      filter,
+      () => {
+        nameColumn.filterOptionValue = filter.value
+      },
+      { debounce: 200 },
+    )
+
     const selectedMusicIds = computed<string[]>({
       get: () => props.selectedMusicIds!.map(it => `${it.assetDir}:${it.id}`),
       set: (value) => emit('update:selectedMusicIds', value.map(it => {
@@ -96,6 +128,7 @@ export default defineComponent({
       {/*    emit('update:selectedMusicIds', musicListAll.value.filter(it => !props.selectedMusicIds!.includes(it)));*/}
       {/*  }}>反选</NButton>*/}
       {/*</NFlex>*/}
+      <NInput placeholder="搜索" v-model:value={filter.value}/>
       <NDataTable
         columns={columns.value}
         data={musicListAll.value}

MaiChartManager/Front/pnpm-lock.yaml

@@ -25,7 +25,7 @@ export default defineComponent({
     }
 
     return () => <NButton secondary onClick={show}>
-      批量操作
+      批量操作与搜索
 
       <NModal
         preset="card"
@@ -37,7 +37,7 @@ export default defineComponent({
         closable={step.value !== STEP.ProgressDisplay}
         closeOnEsc={step.value !== STEP.ProgressDisplay}
       >
-        {step.value === STEP.Select && <MusicSelector v-model:selectedMusicIds={selectedMusic.value} continue={() => step.value = STEP.ChooseAction}/>}
+        {step.value === STEP.Select && <MusicSelector v-model:selectedMusicIds={selectedMusic.value} continue={() => step.value = STEP.ChooseAction} cancel={() => step.value = STEP.None}/>}
         {step.value === STEP.ChooseAction && <ChooseAction selectedMusic={selectedMusic.value} continue={(action: STEP) => step.value = action}/>}
         {step.value === STEP.EditProps && <EditProps selectedMusicIds={selectedMusic.value} closeModal={() => step.value = STEP.None}/>}
         {step.value === STEP.ProgressDisplay && <ProgressDisplay/>}

MaiChartManager/Front/src/components/MusicList/BatchActionButton/MusicSelector.tsx

@@ -24,7 +24,7 @@ export default defineComponent({
 
     return () => (
       <div class={`flex gap-5 h-20 w-full p-2 m-y-1 hover:bg-op-40 rd-md relative ${props.selected ? 'bg-[var(--selected-bg)]' : 'hover:bg-zinc-3'}`} onClick={props.onClick} title={props.music.name!}>
-        <img src={jacketUrl.value} class="h-16 w-16 object-fill shrink-0"/>
+        <img src={jacketUrl.value} class="h-16 w-16 object-fill shrink-0" key={props.music.id}/>
         <div class="flex flex-col grow-1 w-0">
           <NFlex class="text-xs c-gray-5" align="center" size="small">
             {props.music.modified && <NBadge dot type="warning"/>}