feat:add_图元/素材管理

src/views/components/Graphics.vue

@@ -173,6 +173,15 @@
             </t-collapse-panel>
           </t-collapse>
         </template>
+        <div class="div-manage" v-if="['图元', '素材'].includes(activedGroup)">
+          <t-button
+            class="w-full"
+            @click="onManageGraphic"
+            style="height: 30px"
+          >
+            {{ activedGroup }}管理
+          </t-button>
+        </div>
       </div>
     </div>
 
@@ -263,6 +272,55 @@
         @success="onChargeSuccess"
       />
     </t-dialog>
+
+    <t-dialog
+      class="dialog-manage"
+      :header="activedGroup + '管理'"
+      :visible="manageDialog.show"
+      @close="manageDialog.show = false"
+      @confirm="manageConfirm"
+      width="90%"
+      :top="8"
+    >
+      <div class="manage-body">
+        <t-collapse v-model="activedPanels[activedGroup]">
+          <t-collapse-panel
+            :value="item.name"
+            v-for="item in manageDialog.data"
+            :key="item.name"
+          >
+            <template #header>
+              <div class="flex middle">
+                {{ item.name }}
+              </div>
+            </template>
+            <template v-for="elem in item.list">
+              <div
+                :style="{
+                  background: elem.visible ? '#42516c' : '',
+                }"
+                class="graphic manage-list"
+              >
+                <t-checkbox v-model:checked="elem.visible"></t-checkbox>
+                <t-image
+                  :src="elem.image"
+                  :lazy="true"
+                  fit="contain"
+                  @load="loadImage(elem)"
+                />
+              </div>
+            </template>
+            <div
+              v-if="!item.list || !item.list.length"
+              class="gray"
+              style="white-space: nowrap; margin-left: 34px"
+            >
+              暂无数据
+            </div>
+          </t-collapse-panel>
+        </t-collapse>
+      </div>
+    </t-dialog>
   </div>
 </template>
 
@@ -298,6 +356,7 @@ import { useUser } from '@/services/user';
 import { iframeCustom } from '@/services/defaults';
 import { getLe5le3d } from '@/services/api';
 import { useSelection } from '@/services/selections';
+import localforage from 'localforage';
 
 const { user } = useUser();
 const { setFolder, getFolder } = useFolder();
@@ -395,6 +454,11 @@ const chargeDialog = reactive<any>({});
 const wechatPayDialog = reactive<any>({
   show: false,
 });
+const manageDialog = reactive<any>({
+  name: '',
+  data: [],
+  show: false,
+});
 
 const search = ref('');
 
@@ -495,6 +559,12 @@ const groupChange = async (name: string) => {
         loading.value = true;
         materials.push(...(await getFolders('v/material')));
         loading.value = false;
+        const _materials: string = await localforage.getItem(
+          'le5leV-materials'
+        );
+        if (_materials) {
+          Object.assign(materials, JSON.parse(_materials));
+        }
       }
       subGroups.value = materials;
       lastName = name;
@@ -505,6 +575,10 @@ const groupChange = async (name: string) => {
         pngs.push(...(await getFolders('png')));
         pngs.push(...(await getFolders('svg', true)));
         loading.value = false;
+        const _pngs: string = await localforage.getItem('le5leV-pngs');
+        if (_pngs) {
+          Object.assign(pngs, JSON.parse(_pngs));
+        }
       }
       subGroups.value = pngs;
       lastName = name;
@@ -550,7 +624,7 @@ const groupChange = async (name: string) => {
   }
   // }
 
-  searchGraphics();
+  // searchGraphics();
 };
 
 //获取方案文件夹
@@ -1862,6 +1936,30 @@ const updateAfterSave = (e) => {
   }
 };
 
+const onManageGraphic = () => {
+  if (activedGroup.value === '素材') {
+    manageDialog.data = deepClone(materials);
+  } else if (activedGroup.value === '图元') {
+    manageDialog.data = deepClone(pngs);
+  }
+  manageDialog.show = true;
+};
+
+const manageConfirm = () => {
+  //TODO 后续存放到后端 目前本地存储
+  if (activedGroup.value === '素材') {
+    localforage.setItem('le5leV-materials', JSON.stringify(manageDialog.data));
+    materials.length = 0;
+    materials.push(...manageDialog.data);
+  } else if (activedGroup.value === '图元') {
+    localforage.setItem('le5leV-pngs', JSON.stringify(manageDialog.data));
+    pngs.length = 0;
+    pngs.push(...manageDialog.data);
+  }
+  subGroups.value = manageDialog.data;
+  manageDialog.show = false;
+};
+
 onMounted(() => {
   groupChange('方案');
   document.addEventListener('dragstart', dragstart, false);
@@ -1976,6 +2074,14 @@ onUnmounted(() => {
           } */
         }
       }
+
+      .div-manage {
+        position: sticky;
+        bottom: 2px;
+        z-index: 10;
+        margin-top: 800px;
+      }
+
       * {
         background-color: var(--color-background-active);
       }
@@ -2163,5 +2269,48 @@ onUnmounted(() => {
       }
     }
   }
+
+  :deep(.dialog-manage) {
+    .t-dialog__body {
+      height: 500px;
+      overflow: scroll;
+    }
+    .t-collapse {
+      border: 0px;
+    }
+    .t-collapse-panel__header {
+      border: 0px;
+    }
+
+    .t-collapse-panel__body {
+      border: 0px;
+    }
+    .t-collapse-panel__content {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      /* grid-template-rows: repeat(100, 100px); */
+      grid-auto-rows: minmax(100px, auto);
+
+      grid-row-gap: 20px;
+      grid-column-gap: 20px;
+    }
+    .t-collapse-panel__body {
+      background: #fff0;
+    }
+    .manage-list {
+      max-height: 310px;
+      border: 1px solid #fff;
+      position: relative;
+      border: 1px solid #535f79;
+      position: relative;
+      border-radius: 2px;
+      .t-checkbox {
+        position: absolute;
+        right: 0px;
+        top: 10px;
+        z-index: 10;
+      }
+    }
+  }
 }
 </style>

src/views/components/View.vue

@@ -1577,6 +1577,9 @@ const onDelDataset = async (item: any, i: number) => {
   const ret: any = await axios.post(`/api/data/datasources/delete`, {
     id: item.id,
   });
+  if (meta2d.store.data.dataset && meta2d.store.data.dataset.id === item.id) {
+    meta2d.store.data.dataset = {};
+  }
   if (ret) {
     dataDialog.datasetList.splice(i, 1);
   }