feat: support audio and spine

Author: Tsuk1ko

.gitattributes

@@ -1,6 +1,5 @@
 # Auto detect text files and perform LF normalization
 * text=auto
-*.lockb binary diff=lockb
 
 # Auto generated files
 src/auto-imports.d.ts text eol=lf

.gitignore

@@ -1,6 +1,10 @@
 # Dev
 /src/assets/*.ab
 
+# Yalc
+.yalc
+yalc.lock
+
 # Logs
 logs
 *.log

bun.lock

@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/client" />
-/// <reference types="vite-plugin-comlink/client" />
 /// <reference types="unplugin-icons/types/vue3" />
 /// <reference types="vite-svg-loader" />
+/// <reference types="@types/wicg-file-system-access" />
 
 declare module 'is-json' {
   export default function (str: any): boolean;

bun.lockb

@@ -12,6 +12,7 @@ export default antfu(
     },
     typescript: {
       overrides: {
+        'ts/ban-ts-comment': 'off',
         'ts/member-ordering': 'warn',
         'ts/explicit-member-accessibility': ['warn', { accessibility: 'no-public' }],
         'ts/consistent-type-imports': [
@@ -27,13 +28,15 @@ export default antfu(
     jsonc: false,
     yaml: false,
     markdown: false,
+    ignores: ['**/*.js'],
   },
   prettierConfig as Linter.Config,
   {
     languageOptions: {
       globals: autoImport.globals as any as Linter.Globals,
     },
     rules: {
+      'node/prefer-global/buffer': 'off',
       'antfu/consistent-list-newline': 'off',
       'style/semi': 'off',
       'style/member-delimiter-style': 'off',
@@ -67,6 +70,13 @@ export default antfu(
           ],
         },
       ],
+      'perfectionist/sort-exports': [
+        'warn',
+        {
+          ignoreCase: false,
+          partitionByNewLine: true,
+        },
+      ],
     },
   },
 );

env.d.ts

@@ -13,51 +13,56 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@arkntools/jimp-png": "^1.0.0",
-    "@arkntools/unity-js": "^3.4.2",
+    "@arkntools/unity-js": "4.0.0",
     "@guolao/vue-monaco-editor": "^1.5.5",
     "@iconify-json/ep": "^1.2.2",
+    "@jimp/core": "^1.6.0",
+    "@jimp/wasm-png": "^1.6.0",
+    "@tsuk1ko/fsa-promises": "^2.0.2",
+    "@ungap/with-resolvers": "^0.1.0",
     "@vueuse/core": "^13.5.0",
+    "buffer": "^6.0.3",
     "comlink": "^4.4.2",
-    "element-plus": "^2.10.3",
-    "es-toolkit": "^1.39.6",
+    "element-plus": "^2.10.4",
+    "empty-module": "^0.0.2",
+    "es-toolkit": "^1.39.8",
     "eventemitter3": "^5.0.1",
     "file-saver": "^2.0.5",
     "is-json": "^2.0.1",
     "js-md5": "^0.8.3",
-    "jszip": "^3.10.1",
     "monaco-editor": "^0.52.2",
     "pinia": "^3.0.3",
     "splitpanes": "^3.2.0",
     "uid": "^2.0.2",
-    "vue": "^3.5.17",
+    "vue": "^3.5.18",
     "vxe-table": "~4.6.25"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.16.2",
+    "@antfu/eslint-config": "^4.19.0",
     "@tsconfig/node20": "^20.1.6",
     "@types/file-saver": "^2.0.7",
     "@types/js-md5": "^0.8.0",
-    "@types/node": "^22.16.0",
+    "@types/node": "^22.16.5",
     "@types/splitpanes": "^2.2.6",
+    "@types/wicg-file-system-access": "^2023.10.6",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/tsconfig": "^0.7.0",
     "@vxecli/import-unplugin-vue-components": "^1.0.4",
-    "eslint": "^9.30.1",
-    "eslint-config-prettier": "^10.1.5",
-    "jiti": "^2.4.2",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "jiti": "^2.5.1",
     "npm-run-all2": "^8.0.4",
     "prettier": "^3.6.2",
     "sass": "^1.89.2",
     "typescript": "^5.8.3",
     "unplugin-auto-import": "^19.3.0",
     "unplugin-icons": "^22.1.0",
     "unplugin-vue-components": "^28.8.0",
-    "vite": "^7.0.2",
-    "vite-plugin-comlink": "^5.1.0",
-    "vite-plugin-pwa": "^1.0.1",
+    "vite": "^7.0.6",
+    "vite-plugin-node-polyfills": "^0.24.0",
+    "vite-plugin-pwa": "^1.0.2",
     "vite-svg-loader": "^5.1.0",
-    "vue-tsc": "3.0.1"
+    "vue-tsc": "^3.0.4"
   }
 }

eslint.config.ts

@@ -9,6 +9,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']

package.json

@@ -0,0 +1,61 @@
+<template>
+  <div class="asset-audio-viewer">
+    <audio
+      :src="data || ''"
+      class="audio"
+      controls
+      :autoPlay="settings.autoPlay ? '' : null"
+      :loop="settings.loop"
+    ></audio>
+    <div class="settings">
+      <el-switch v-model="settings.autoPlay" class="setting-switch" active-text="Auto Play" />
+      <el-switch v-model="settings.loop" class="setting-switch" active-text="Loop" />
+    </div>
+    <FullSizeLoading :loading="!data" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core';
+import FullSizeLoading from './FullSizeLoading.vue';
+
+defineProps<{
+  asset: any;
+  data: string | null;
+}>();
+
+const settings = useLocalStorage(
+  'asset-audio-viewer-settings',
+  { autoPlay: false, loop: false },
+  { mergeDefaults: true },
+);
+</script>
+
+<style lang="scss" scoped>
+.asset-audio-viewer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #808080;
+}
+
+.audio {
+  width: 80%;
+}
+
+.settings {
+  position: absolute;
+  top: 8px;
+  left: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.setting-switch :deep(.el-switch__label) {
+  color: #fff !important;
+}
+</style>

src/components.d.ts

@@ -1,78 +1,67 @@
 <template>
   <div class="asset-image-viewer">
     <el-splitter>
-      <el-splitter-panel v-if="imgList.size" :min="100" v-model:size="menuWidth" class="asset-image-viewer-panel">
+      <el-splitter-panel v-if="imgList.length" v-model:size="menuWidth" :min="100" class="asset-image-viewer-panel">
         <el-scrollbar class="menu-scroll-view">
           <el-menu ref="menu" @select="handleSelect">
-            <el-menu-item v-for="[key, item] in imgList" :key :index="key">
+            <el-menu-item v-for="item in imgList" :key="item.key" :index="item.key">
               <span class="img-name">{{ item.name }}</span>
             </el-menu-item>
           </el-menu>
         </el-scrollbar>
       </el-splitter-panel>
       <el-splitter-panel :min="200" class="asset-image-viewer-panel">
-        <ImageViewer :src :name />
+        <ImageViewer :src="data" :name="name" />
       </el-splitter-panel>
     </el-splitter>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { AssetInfo, AssetInfoData } from '@/workers/assetManager';
-import ImageViewer from '@/components/ImageViewer.vue';
 import { useLocalStorage } from '@vueuse/core';
+import ImageViewer from '@/components/ImageViewer.vue';
+import { PreviewType } from '@/types/preview';
+import type { AssetInfo } from '@/workers/assetManager';
 
-type ImgItem = Extract<AssetInfoData, { type: 'imageList' }>['list'][number];
-
-const { asset } = defineProps<{
+const { asset, data } = defineProps<{
   asset: AssetInfo;
+  data: string | null;
 }>();
 
 const emits = defineEmits<{
-  loadImage: [asset: AssetInfo, subKey?: string];
+  updatePayload: [key?: string];
 }>();
 
 const menuRef = useTemplateRef('menu');
 
 const menuWidth = useLocalStorage('asset-image-viewer-menu-width', 200);
 
-const imgList = ref<Map<string, ImgItem>>(new Map());
+const imgList = computed(() => (asset.preview.type === PreviewType.ImageList ? asset.preview.detail : []));
+const imgMap = computed(() => new Map(imgList.value.map(item => [item.key, item])));
+
 const curSelectKey = ref<string>('');
-const curSelectItem = computed(() => imgList.value.get(curSelectKey.value));
+const curSelectItem = computed(() => imgMap.value.get(curSelectKey.value));
 
-const data = computed(() => asset.data! as Extract<AssetInfoData, { type: 'image' | 'imageList' }>);
-const src = computed(() => (data.value.type === 'imageList' ? curSelectItem.value?.url : data.value.url));
-const name = computed(() => (data.value.type === 'imageList' ? curSelectItem.value?.name : asset.name));
+const name = computed(() => (imgList.value.length ? curSelectItem.value?.name : asset.name));
 
 const handleSelect = (key: string) => {
   curSelectKey.value = key;
 };
 
 watch(
-  data,
-  value => {
-    // 单图
-    if (value.type === 'image') {
-      imgList.value.clear();
-      if (value.url === undefined) emits('loadImage', asset);
-      return;
-    }
-
-    // 多图
-    imgList.value = new Map(value.list.map(item => [item.key, item]));
-    if (!imgList.value.has(curSelectKey.value)) {
-      curSelectKey.value = value.list[0].key;
+  imgList,
+  list => {
+    if (!imgMap.value.has(curSelectKey.value)) {
+      curSelectKey.value = list[0]?.key || '';
     }
   },
   { immediate: true },
 );
 
 watch(
-  curSelectItem,
-  item => {
-    if (item && item.url === undefined) {
-      emits('loadImage', asset, curSelectKey.value);
-    }
+  curSelectKey,
+  key => {
+    emits('updatePayload', key);
   },
   { immediate: true },
 );