perfect_graphics

src/views/components/Graphics.vue

@@ -18,8 +18,8 @@
         </div>
       </div>
       <div class="list" :class="showType === 1 ? 'two-list' : ''">
-        <t-collapse v-model:value="panelValue" @change="handlePanelChange">
-          <t-collapse-panel :header="item.name" v-for="item in showList">
+        <t-collapse v-model:value="panelValue">
+          <t-collapse-panel :value="item.name" :header="item.name" v-for="item in showList" :key="item.name">
             <div
               class="show-item"
               v-for="iItem in item.list"
@@ -138,14 +138,12 @@ const getCommponentsLib = async () => {
 
 const getMaterialLib = async () => {
   const pngs = await getPngFolders();
-  console.log("png", pngs);
   return pngs;
 };
 let materialLib: any[] = [];
 
 const getIconsLib = async () => {
   const icons = await getIconFolders();
-  console.log(icons);
   return icons;
 };
 
@@ -172,7 +170,6 @@ const groupChange = async (name: string) => {
       if (materialLib.length === 0) {
         materialLib = await getMaterialLib();
       }
-      console.log(materialLib);
       showList.value = materialLib;
       break;
     case "图标":
@@ -194,22 +191,10 @@ const groupChange = async (name: string) => {
 const showList = ref<any[]>([]);
 const showType = ref(0);
 const panelValue = ref([]);
-const handlePanelChange = (e: any) => {
-  console.log("e", e);
-  // console.log("change", e,panelValue.value);
-  // if (activeGroup.value === '素材') {
-  //   const data:any = materialLib[e[0]];
-  //   console.log("data", data.name);
-  //   if (!data.list || data.list.length === 0) {
-  //     data.list = getPngs(globalThis.folderJson?data.pinyin:data.name)
-  //   }
-  // }
-};
 
 watch(
   () => panelValue.value,
   async (newV: any[], oldV: any[]) => {
-    console.log(newV, oldV);
     const newOpen: any = [];
     for (let v of newV) {
       !oldV.includes(v) && newOpen.push(v);
@@ -217,19 +202,16 @@ watch(
     if (newOpen.length === 0) {
       return;
     }
-    console.log(newOpen);
     if (activeGroup.value === "素材") {
-      const data: any = materialLib[newOpen[0]];
-      console.log("data", data, newOpen[0]);
+      const data: any = materialLib.find(item => item.name === newOpen[0]);//  materialLib[newOpen[0]];
       if (!data.list || data.list.length === 0) {
         data.list = await getPngs(
           globalThis.folderJson ? data.pinyin : data.name
         );
-        console.log(materialLib);
         showList.value = deepClone(materialLib);
       }
     } else if (activeGroup.value === "图标") {
-      const data: any = iconsLib[newOpen[0]];
+      const data: any = iconsLib.find(item => item.name === newOpen[0]);// iconsLib[newOpen[0]];
       if (!data.list || data.list.length === 0) {
         data.list = await getIcons(
           globalThis.folderJson ? data.pinyin : data.name