perfect_graphics_样式

src/services/icons.ts

@@ -35,12 +35,15 @@ async function svgToPens(f: any, diretoryName: string) {
       : _name
     : _name;
   const image = cdn + normalFolder + diretoryName + "/" + f.name;
-
+  const svgDom: string = await axios.get(image);
+  let _svgDom = svgDom.replace("stroke:#333;", "stroke:#4583FF;");
+  const data = parseSvg(_svgDom);
   return {
     name,
     pinyin: globalThis.fileJson ? _name : null,
-    image, // image 只作为缩略图
-    componentDatas: parseSvg(await axios.get(image)),
+    // image, // image 只作为缩略图
+    componentDatas: data,
+    svg: _svgDom,
     component: true,
   };
 }

src/views/components/Graphics.vue

@@ -29,11 +29,12 @@
               @dragend="dragEnd()"
             >
               <t-image v-if="iItem.image" :src="iItem.image" fit="cover" />
+              <div class="svg-box" v-else-if="iItem.svg" v-html="iItem.svg"></div>
               <!-- <i v-else class="t-icon" :class="iItem.icon"></i> -->
               <svg v-else class="l-icon" aria-hidden="true">
                 <use :xlink:href="'#' + iItem.icon"></use>
               </svg>
-              <p>{{ iItem.name }}</p>
+              <p :title="iItem.name">{{ iItem.name }}</p>
             </div>
           </t-collapse-panel>
         </t-collapse>
@@ -105,6 +106,7 @@ const getCommponentsLib = async () => {
       _id: 1,
       name: 1,
       folder: 1,
+      component:1
     },
   };
   const config = {
@@ -218,7 +220,7 @@ watch(
     console.log(newOpen);
     if (activeGroup.value === "素材") {
       const data: any = materialLib[newOpen[0]];
-      console.log("data", data.name);
+      console.log("data", data,newOpen[0]);
       if (!data.list || data.list.length === 0) {
         data.list = await getPngs(
           globalThis.folderJson ? data.pinyin : data.name
@@ -240,7 +242,7 @@ watch(
 
 const dragStart = async (event: DragEvent, item: any) => {
   // console.log('drag', item);
-  console.log(event);
+  console.log(event,item);
 
   if (!item || !event.dataTransfer) {
     return;
@@ -251,7 +253,7 @@ const dragStart = async (event: DragEvent, item: any) => {
     item.componentDatas = res.componentDatas;
     item.componentData = res.componentData;
   }
-  if (!item.data && !item.componentData && item.image) {
+  if (!item.data && !item.component && item.image) {
     let target: any = event.target;
     target.children[0] && (target = target.children[0].children[0]);
     // firefox naturalWidth svg 图片 可能是 0
@@ -271,9 +273,15 @@ const dragStart = async (event: DragEvent, item: any) => {
         lockedOnCombine,
       })
     );
-  } else if (item.componentData) {
-    const pens = convertPen([item.componentData]);
-    meta2d.canvas.addCaches = deepClone(pens);
+  } else if (item.component) {
+    console.log("comp",item.componentDatas,item.componentData)
+    if (item.componentData) {
+      const pens = convertPen([item.componentData]);
+      meta2d.canvas.addCaches = deepClone(pens);
+    } else if (item.componentDatas) {
+      console.log("进入")
+      meta2d.canvas.addCaches = deepClone(item.componentDatas);
+    }
   } else {
     event.dataTransfer.setData(
       "Meta2d",
@@ -365,6 +373,7 @@ onUnmounted(() => {
       }
       :deep(.t-collapse-panel__header) {
         border: 0px;
+        font-size: 12px;
       }
 
       :deep(.t-collapse-panel__body) {
@@ -373,33 +382,45 @@ onUnmounted(() => {
       :deep(.t-collapse-panel__content) {
         background-color: var(--color-background-active);
         /* padding: 12px; */
-        padding: 0px;
+        padding: 0px 4px;
         display: grid;
-        grid-template-columns: 61px 61px 61px 61px;
-        grid-template-rows: 90px;
-        padding-bottom: 20px;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-row-gap: 9px;
+        /* grid-template-rows: 90px; */
+        /* padding-bottom: 20px; */
       }
       .show-item {
         /* padding: 10px; */
         &:hover {
           cursor: pointer;
+          color: var(--color-primary-hover);
+          svg{
+          color: var(--color-primary-hover);
+          }
         }
         p {
-          /* margin-top: 10px; */
-          /* height: 10px;
-          line-height: 10px; */
+          margin-bottom: 14px;
           text-align: center;
           font-size: 12px;
-          height: 28px;
+          height: 14px;
           line-height: 14px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
         }
         .t-image__wrapper {
-          margin: 10px 14px;
+          /* margin: 10px 23px; */
           height: 32px;
           width: 32px;
           background: #fff0;
+          margin-left: calc(50% - 16px);
+          margin-top: 10px;
+          margin-bottom: 10px;
           :deep(.t-image) {
-            background-color: #fff;
+            /* background-color: #fff; */
             border-radius: 2px;
           }
         }
@@ -414,9 +435,24 @@ onUnmounted(() => {
 
         svg {
           color: var(--color);
+          height: 32px;
+          width: 100%;
+          margin: 4px 0px;
+        }
+
+        .svg-box{
           height: 32px;
           width: 32px;
-          margin: 10px 14px;
+          margin-left: calc(50% - 16px);
+          margin-top: 10px;
+          margin-bottom: 10px;
+          &:deep(svg){
+            height: 100%;
+            width: 100%;
+            .cls-1{
+              stroke: var(--color) !important;
+            }
+          }
         }
       }
     }

src/views/components/View.vue

@@ -216,6 +216,7 @@ const meta2dOptions: Options = {
   y: 32,
   width: 1920,
   height: 1080,
+  color: '#4583FF',
   defaultFormat: { ...defaultFormat },
 };
 onMounted(() => {
@@ -420,6 +421,7 @@ const onAddShape = (event: DragEvent|MouseEvent, name: string) => {
       width: 100,
       height: 1,
       name: "line",
+      type: 1
     };
   }
   if (!(event as DragEvent).dataTransfer) {