perfect_graphics_icons

src/http.ts

@@ -13,7 +13,7 @@ const requestThrottleSet = new Set();
 // http request 拦截器
 axios.interceptors.request.use(
   (config: any) => {
-    if (!config.url.startsWith("/png")) {
+    if (!config.url.startsWith("/png") && !config.url.startsWith("/svg")) {
       config.baseURL = "/api";
     }
     config.headers.Authorization =

src/services/api.ts

@@ -1,8 +1,9 @@
 //所有的接口请求
 import axios from "axios";
-export const cdn = import.meta.env.VITE_ROUTER_BASE
-  ? ""
-  : "https://assets.le5lecdn.com";
+export const cdn = "";
+// import.meta.env.VITE_ROUTER_BASE
+// ? ""
+// : "https://assets.le5lecdn.com";
 
 export const upCdn = import.meta.env.VITE_ROUTER_BASE
   ? ""

src/services/defaults.ts

@@ -1,8 +1,6 @@
 import { Pen, FormItem } from "@meta2d/core";
 import { ReplaceMode } from "@meta2d/chart-diagram";
-export const cdn = import.meta.env.VITE_ROUTER_BASE
-  ? ""
-  : "https://assets.le5lecdn.com/2d";
+import { cdn } from "./api";
 
 export const lineDashObj = [
   undefined,

src/services/icons.ts

@@ -0,0 +1,46 @@
+import axios from "@/http";
+import { parseSvg } from "@meta2d/svg";
+import { cdn } from "./api";
+import { getFolders } from "./png";
+const market = import.meta.env.VITE_MARKET;
+
+const normalFolder = market ? "/2d/svg/" : "/svg/";
+/**
+ * 请求 svg 的目录
+ * @returns
+ */
+export async function getIconFolders() {
+  return await getFolders(normalFolder);
+}
+/**
+ * 请求 svg 目录下的所有 svg
+ * @param name 目录名
+ * @returns
+ */
+export async function getIcons(name: string) {
+  const files = (await axios.get(normalFolder + name + "/")) as any[];
+  return await Promise.all(files.map((f) => svgToPens(f, name)));
+}
+
+export function filename(str: string) {
+  const i = str.lastIndexOf(".");
+  return str.substring(0, i);
+}
+
+async function svgToPens(f: any, diretoryName: string) {
+  const _name = filename(f.name);
+  const name = globalThis.fileJson
+    ? globalThis.fileJson[_name]
+      ? globalThis.fileJson[_name]
+      : _name
+    : _name;
+  const image = cdn + normalFolder + diretoryName + "/" + f.name;
+
+  return {
+    name,
+    pinyin: globalThis.fileJson ? _name : null,
+    image, // image 只作为缩略图
+    componentDatas: parseSvg(await axios.get(image)),
+    component: true,
+  };
+}

src/services/png.ts

@@ -1,8 +1,5 @@
 import axios from "@/http";
-
-const cdn = import.meta.env.VITE_ROUTER_BASE
-  ? ""
-  : "https://assets.le5lecdn.com";
+import { cdn } from "./api";
 
 const market = import.meta.env.VITE_MARKET;
 
@@ -34,8 +31,7 @@ export async function getPngs(name: string) {
           : fname
         : fname,
       pinyin: globalThis.fileJson ? fname : null,
-      // image: cdn + normalFolder + name + "/" + f.name,
-      image: normalFolder + name + "/" + f.name,
+      image: cdn + normalFolder + name + "/" + f.name,
     };
   });
 }

src/services/utils.ts

@@ -1,6 +1,7 @@
 import { FormItem, Pen, Meta2d, Meta2dData } from "@meta2d/core";
 import { MessagePlugin, NotifyPlugin } from "tdesign-vue-next";
 import { ref } from "vue";
+import { cdn } from "./api";
 
 const market = import.meta.env.VITE_MARKET;
 

src/views/Preview.vue

@@ -13,13 +13,13 @@ import { defaultFormat } from "@/services/defaults";
 import { useRouter, useRoute } from "vue-router";
 import { Meta2d, Options, Pen } from "@meta2d/core";
 import { registerBasicDiagram } from "@/services/register";
-
+import { cdn } from "@/services/api";
 const route = useRoute();
 
 const meta2dDom = ref("");
 
 const meta2dOptions: Options = {
-  cdn: "https://assets.le5lecdn.com",
+  cdn,
   //   rule: true,
   background: "#1e2430",
   x: 10,

src/views/components/Graphics.vue

@@ -46,6 +46,7 @@
 import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { shapeLib, chartLib, formLib } from "@/services/defaults";
 import { getPngFolders, getPngs } from "@/services/png";
+import { getIconFolders, getIcons } from "@/services/icons";
 import { getComponents, getComponentsList } from "@/services/api";
 import { convertPen } from "@/services/upgrade";
 import { deepClone } from "@meta2d/core";
@@ -134,12 +135,20 @@ const getCommponentsLib = async () => {
 };
 
 const getMaterialLib = async () => {
-  const [pngs] = await Promise.all([getPngFolders()]);
+  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;
+};
+
+let iconsLib: any[] = [];
+
 const groupChange = async (name: string) => {
   panelValue.value = [];
   activeGroup.value = name;
@@ -165,7 +174,10 @@ const groupChange = async (name: string) => {
       showList.value = materialLib;
       break;
     case "图标":
-      showList.value = [];
+      if (iconsLib.length === 0) {
+        iconsLib = await getIconsLib();
+      }
+      showList.value = iconsLib;
       break;
     case "图形":
       showList.value = shapeLib;
@@ -181,6 +193,7 @@ 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]];
@@ -194,6 +207,7 @@ const handlePanelChange = (e: any) => {
 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);
@@ -212,6 +226,14 @@ watch(
         console.log(materialLib);
         showList.value = deepClone(materialLib);
       }
+    } else if (activeGroup.value === "图标") {
+      const data: any = iconsLib[newOpen[0]];
+      if (!data.list || data.list.length === 0) {
+        data.list = await getIcons(
+          globalThis.folderJson ? data.pinyin : data.name
+        );
+        showList.value = deepClone(iconsLib);
+      }
     }
   }
 );
@@ -273,6 +295,13 @@ const dragend = (event: any) => {
   event.target.style.opacity = 1;
 };
 
+//获取所有图形库
+const getGraphics = async () => {
+  // if (!materialLib.length) {
+  //   materialLib = await getPngFolders();
+  // }
+};
+
 onMounted(() => {
   groupChange("图形");
   document.removeEventListener("dragstart", dragstart);
@@ -369,6 +398,10 @@ onUnmounted(() => {
           height: 32px;
           width: 32px;
           background: #fff0;
+          :deep(.t-image) {
+            background-color: #fff;
+            border-radius: 2px;
+          }
         }
 
         /* i {
@@ -378,10 +411,6 @@ onUnmounted(() => {
           width: 40px;
           margin: 10px;
         } */
-        .t-image {
-          background-color: #fff;
-          border-radius: 4px;
-        }
 
         svg {
           color: var(--color);

src/views/components/View.vue

@@ -200,6 +200,8 @@ import { MessagePlugin } from "tdesign-vue-next";
 import { localMeta2dDataName } from "@/services/utils";
 import localforage from "localforage";
 import { checkData } from "@/services/utils";
+import { cdn } from "@/services/api";
+
 const router = useRouter();
 const route = useRoute();
 const { user, message, getUser, getMessage, signout } = useUser();
@@ -207,7 +209,7 @@ const { dot, setDot, getDot } = useDot();
 const { selections } = useSelection();
 
 const meta2dOptions: Options = {
-  // cdn: "https://assets.le5lecdn.com",
+  cdn,
   rule: true,
   background: "#1e2430",
   x: 32,