feat: 添加上传功能

components.d.ts

@@ -9,8 +9,19 @@ declare module 'vue' {
   export interface GlobalComponents {
     AtlasRenderCanvasRegion: typeof import('./src/components/AtlasRenderCanvasRegion.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElText: typeof import('element-plus/es')['ElText']
+    ImportResource: typeof import('./src/components/resources/ImportResource.vue')['default']
+    ResourceManager: typeof import('./src/components/resources/ResourceManager.vue')['default']
+    ResourceManagerAlert: typeof import('./src/components/ResourceManagerAlert.vue')['default']
   }
 }

package-lock.json

@@ -21,7 +21,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
-        "typescript": "^5.2.2",
+        "typescript": "^5.4.5",
         "unplugin-auto-import": "^0.17.5",
         "unplugin-vue-components": "^0.27.0",
         "vite": "^5.2.0",

src/App.vue

@@ -1,12 +1,25 @@
 <template>
   <div class="main">
     <div class="menu">
-      <span>
-        项目名称 - v0.0.1
-      </span>
+      <el-dropdown>
+        <span class="project-name">
+          {{ projectData.name }}
+          <el-icon>
+            <arrow-down />
+          </el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item :icon="CollectionTag" @click="renameProject">重命名</el-dropdown-item>
+            <el-dropdown-item :icon="Plus" @click="newProject">新建</el-dropdown-item>
+            <el-dropdown-item :icon="FolderOpened" @click="openProject">打开</el-dropdown-item>
+            <el-dropdown-item :icon="Document" @click="saveProject">保存</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
       <div class="menuBtn">
-        <el-button type="info">材质管理</el-button>
-        <el-button type="info">资源管理</el-button>
+        <el-button type="info" @click="showResourceManager = true">材质管理</el-button>
+        <el-button type="info">骨骼管理</el-button>
         <el-button type="info">全局Uniform管理</el-button>
         <el-button type="warning">保存</el-button>
         <el-button type="warning">设置</el-button>
@@ -40,6 +53,9 @@
       </div>
     </div>
   </div>
+  <el-dialog v-model="showResourceManager" title="材质管理">
+    <ResourceManager />
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -48,52 +64,54 @@ import AtlasRenderArgument from "./entities/AtlasRenderArgument.ts";
 import {onMounted, ref} from "vue";
 import {Skeleton} from "@esotericsoftware/spine-webgl";
 import {RenderArgument} from "./entities/RenderArgument.ts";
+import {ProjectData} from "./entities/ProjectData.ts";
+import {ArrowDown, CollectionTag, Document, FolderOpened, Plus} from "@element-plus/icons-vue";
+import 'element-plus/es/components/message-box/style/css'
+import 'element-plus/es/components/message/style/css'
+import {ElMessage, ElMessageBox} from "element-plus";
+import ResourceManager from "./components/resources/ResourceManager.vue";
 
-const show = ref<boolean>(false);
+const show = ref<boolean>(true);
 const data = ref<AtlasRenderArgument[]>([]);
-const spineName = ref('ceshi');
-const spineNameList = ref([
-  {
-    value: 'ceshi',
-    label: '测试',
-  },
-  {
-    value: 'ceshi1',
-    label: '测试1',
-  }, {
-    value: 'ceshi2',
-    label: '测试2',
-  }, {
-    value: 'ceshi3',
-    label: '测试3',
-  }, {
-    value: 'ceshi4',
-    label: '测试4',
-  }, {
-    value: 'ceshi5',
-    label: '测试5',
-  },
-]);
+const showResourceManager = ref<boolean>(false);
+const projectData = ref<ProjectData>({name: "未命名", resourceRequired: [], lastSave: new Date(), lastChange: new Date()});
 onMounted(async () => {
-  const json = await fetch("/nan/nan.json");
-  const jsonBlob = URL.createObjectURL(await json.blob());
-  const atlas = await fetch("/nan/nan.atlas");
-  const atlasBlob = URL.createObjectURL(await atlas.blob());
-  data.value.push({
-    skel: jsonBlob,
-    texture: atlasBlob,
-    scale: 2.5,
-    x: 12,
-    y: 92,
-    animation: "animation",
-    edit: true,
-    textureImage: {"nan.png": "/nan/nan.png"}
-  });
-  show.value = true;
 })
 const onEdit = (skel: {skel: Skeleton, obj: RenderArgument}) => {
   console.log(skel.skel.scaleX, skel.skel.x, skel.skel.y);
 }
+const newProject = () => {
+  if (projectData.value.lastChange.getTime() > projectData.value.lastSave.getTime()) {
+    ElMessageBox.confirm("是否保存对此项目的修改？", "新建").then(() => {
+      saveProject();
+      createNewProject();
+    }).catch(createNewProject);
+    return;
+  }
+  createNewProject();
+}
+const createNewProject = () => {
+  projectData.value = {name: "未命名", resourceRequired: [], lastSave: new Date(), lastChange: new Date()};
+}
+const saveProject = () => {
+  projectData.value.lastSave = new Date();
+  ElMessage.warning("未完成");
+}
+const openProject = () => {
+  ElMessage.warning("未完成");
+}
+const renameProject = () => {
+  ElMessageBox.prompt('请输入项目名称', '重命名', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputValue: projectData.value.name,
+    inputValidator: (name) => name.length > 0 && name.length < 15,
+    inputErrorMessage: "名称应该在15个字符以内，且不为空"
+  }).then(({ value }) => {
+      projectData.value.name = value;
+      projectData.value.lastChange = new Date();
+  })
+}
 </script>
 
 <style scoped>
@@ -144,4 +162,7 @@ const onEdit = (skel: {skel: Skeleton, obj: RenderArgument}) => {
   align-items: center;
   padding: 10px;
 }
+.project-name {
+  cursor: pointer;
+}
 </style>

src/components/resources/ImportResource.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {computed} from "vue";
+
+const tableData = computed<unknown[]>(() => []);
+const onImportAtlasFile = (evt: Event) => {
+
+}
+const importAtlas = () => {
+
+}
+const onImportImage = (evt: Event, imageName: string, atlasName: string) => {
+
+}
+const canImportAtlas = computed<boolean>(() => true);
+</script>
+
+<template>
+  ATLAS文件：<input type="file" multiple accept=".atlas" @change="onImportAtlasFile" />
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="atlasName" label="ATLAS文件名称"></el-table-column>
+    <el-table-column prop="name" label="名称"></el-table-column>
+    <el-table-column fixed="right" label="导入状态">
+      <template #default="data">
+        <el-text type="success" v-if="data.row.load">已导入</el-text>
+        <span v-else><el-text type="danger">未导入：</el-text><input type="file" accept=".png" @change="(evt) => onImportImage(evt, data.row.name, data.row.atlasName)" /></span>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-button v-if="canImportAtlas" @click="importAtlas" type="warning" style="margin-top: 10px">确定</el-button>
+</template>
+
+<style scoped>
+
+</style>

src/components/resources/ResourceManager.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+import ImportResource from "./ImportResource.vue";
+import {computed, ref} from "vue";
+const emit = defineEmits<{addAtlas: [data: unknown]}>();
+const showImportResource = ref<boolean>(false);
+const tableData = computed<unknown[]>(() => []);
+</script>
+
+<template>
+  <el-button @click="showImportResource = true">导入</el-button>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="name" label="名称" width="180" />
+    <el-table-column prop="data" :formatter="(row:unknown,col:unknown,cellValue: Blob) => cellValue.size" label="大小" width="180" />
+  </el-table>
+  <el-dialog v-model="showImportResource" title="导入材质">
+    <ImportResource />
+  </el-dialog>
+</template>
+
+<style scoped>
+
+</style>

src/entities/BaseResource.ts

@@ -0,0 +1,8 @@
+import {SkeletonResource} from "./resource/SkeletonResource.ts";
+import {AtlasResource} from "./resource/AtlasResource.ts";
+import {ImageResource} from "./resource/ImageResource.ts";
+
+export type BaseResource = SkeletonResource | AtlasResource | ImageResource;
+export enum ResourceType {
+    ATLAS,IMAGE,SKELETON
+}

src/entities/ProjectData.ts

@@ -0,0 +1,7 @@
+import { BaseResource } from "./BaseResource.ts"
+export interface ProjectData {
+    name: string;
+    resourceRequired: BaseResource[];
+    lastSave: Date;
+    lastChange: Date;
+}

src/entities/resource/AtlasResource.ts

@@ -0,0 +1,10 @@
+import {ResourceType} from "../BaseResource.ts";
+import {ImageResource} from "./ImageResource.ts";
+
+export interface AtlasResource {
+    name: string;
+    type: ResourceType.ATLAS;
+    extend: ".atlas";
+    images: ImageResource[];
+    data?: Blob;
+}

src/entities/resource/ImageResource.ts

@@ -0,0 +1,8 @@
+import {ResourceType} from "../BaseResource.ts";
+
+export interface ImageResource {
+    name: string;
+    type: ResourceType.IMAGE;
+    extend: ".png";
+    data?: Blob
+}

src/entities/resource/SkeletonResource.ts

@@ -0,0 +1,10 @@
+import {ResourceType} from "../BaseResource.ts";
+import {AtlasResource} from "./AtlasResource.ts";
+
+export interface SkeletonResource {
+    name: string;
+    type: ResourceType.SKELETON;
+    extend: ".json";
+    data?: unknown;
+    atlas: AtlasResource;
+}