icons

src/services/common.ts

@@ -10,6 +10,7 @@ import { noLoginTip, localStorageName } from '@/services/utils';
 import { upload, dataURLtoBlob } from '@/services/file';
 import { delImage, addCollection, updateCollection } from '@/services/api';
 import { baseVer } from '@/services/upgrade';
+import { debounce } from './debouce';
 
 const assets = reactive({
   home: 'https://le5le.com',
@@ -73,10 +74,12 @@ export const useDot = () => {
   const getDot = async () => {
     return dot;
   };
-  const setDot = async (value: boolean) => {
+  const setDot = async (value = true) => {
     dot.value = value;
     if (value) {
       tree.patch = true;
+
+      debounce(autoSave, 3000);
     }
   };
 

src/services/html.ts

@@ -6,45 +6,3 @@ export function getHtmlText(html: string, trimSpace?: boolean) {
 
   return text;
 }
-
-export async function addIcons(url: string) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    xhr.send();
-    xhr.onreadystatechange = () => {
-      if (xhr.readyState === 4 && xhr.status === 200) {
-        try {
-          const iconfont = JSON.parse(xhr.responseText);
-          const iconGroup = {
-            name: iconfont.name,
-            loaded: true,
-            show: true,
-            list: [],
-          };
-
-          iconfont.glyphs.forEach((item: any) => {
-            iconGroup.list.push({
-              name: item.name,
-              icon:
-                iconfont.font_family +
-                ' ' +
-                iconfont.css_prefix_text +
-                item.font_class,
-              data: {
-                width: 100,
-                height: 100,
-                name: 'image',
-                iconFamily: iconfont.font_family,
-                icon: String.fromCharCode(item.unicode_decimal),
-              },
-            });
-          });
-          resolve(iconGroup);
-        } catch (error) {
-          reject(error);
-        }
-      }
-    };
-  });
-}

src/styles/tdesign.css

@@ -589,3 +589,8 @@
     }
   }
 }
+
+.t-drawer__header {
+  min-height: 40px;
+  font-size: 14px;
+}

src/views/components/FileProps.vue

@@ -167,7 +167,7 @@
                         style="width: 150px; margin-left: -8px"
                       />
                       <t-button
-                        theme="default"
+                        variant="outline"
                         style="padding: 4px 8px; margin-left: 8px"
                         @click="addIconUrl"
                       >

src/views/components/Graphics.vue

@@ -841,7 +841,7 @@ onUnmounted(() => {
     flex-grow: 1;
     overflow-y: auto;
     font-size: 12px;
-    z-index: 100;
+    z-index: 7;
 
     .groups {
       & > div {

src/views/components/Header.vue

@@ -331,7 +331,7 @@ onBeforeMount(async () => {
 
 const onInputName = () => {
   (meta2d.store.data as Meta2dBackData).name = data.name;
-  setDot(true);
+  setDot();
 };
 
 const initMeta2dName = () => {

src/views/components/PenProps.vue

@@ -831,7 +831,16 @@
                   >
                     {{ data.pen.icon }}
                   </i>
-                  <a class="ml-12 mt-4">选择</a>
+                  <a class="ml-12 mt-4" @click="iconsDrawer.show = true">
+                    选择
+                  </a>
+                  <t-drawer
+                    v-model:visible="iconsDrawer.show"
+                    header="选择图标"
+                    :footer="null"
+                  >
+                    <Iconfonts :urls="data.iconUrls" @change="onChangeIcon" />
+                  </t-drawer>
                 </div>
               </t-space>
             </t-collapse-panel>
@@ -1000,14 +1009,15 @@
 <script lang="ts" setup>
 import { onBeforeMount, onUnmounted, reactive, ref, watch } from 'vue';
 
-import CodeEditor from '@/views/components/common/CodeEditor.vue';
+import CodeEditor from './common/CodeEditor.vue';
+import Iconfonts from './common/Iconfonts.vue';
 import PenAnimates from './PenAnimates.vue';
 import PenDatas from './PenDatas.vue';
 import PenEvents from './PenEvents.vue';
 
 import { getCookie } from '@/services/cookie';
 import { useSelection } from '@/services/selections';
-import { fonts } from '@/services/common';
+import { autoSave, fonts } from '@/services/common';
 import { updatePen } from './pen';
 
 const headers = {
@@ -1029,11 +1039,16 @@ const tooltipDialog = reactive<any>({
   show: false,
 });
 
+const iconsDrawer = reactive<any>({
+  show: false,
+});
+
 onBeforeMount(() => {
   const d = meta2d.store.data as any;
   if (!d.groups) {
     d.groups = [];
   }
+  data.iconUrls = d.iconUrls;
   data.groups = d.groups;
   initPenData();
 
@@ -1191,6 +1206,16 @@ const onOkTooltip = () => {
   tooltipDialog.show = false;
 };
 
+const onChangeIcon = (params: any) => {
+  Object.assign(data.pen, params);
+  meta2d.setValue({
+    id: data.pen.id,
+    icon: params.icon,
+    iconFamily: params.iconFamily,
+  });
+  autoSave(true);
+};
+
 onUnmounted(() => {
   watcher();
   meta2d.off('translatePens', getRect);

src/views/components/View.vue

@@ -865,7 +865,7 @@ const openedListener = () => {
 };
 
 const patchFlag = () => {
-  setDot(true);
+  setDot();
 };
 
 onUnmounted(() => {

src/views/components/common/Iconfonts.vue

@@ -0,0 +1,92 @@
+<template>
+  <ul class="icons">
+    <li v-for="item in icons" :key="item.icon" class="icon">
+      <i :class="item.iconFamily" @click="onSelected(item)">
+        {{ item.icon }}
+      </i>
+    </li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import { onMounted, reactive } from 'vue';
+
+const { urls } = defineProps<{
+  urls: string[];
+}>();
+
+const emit = defineEmits(['change']);
+
+const icons = reactive([]);
+
+onMounted(() => {
+  urls.forEach(async (url) => {
+    const iconList: any = await addIcons(url.replace('.css', '.json'));
+    icons.push(...iconList.list);
+  });
+});
+
+const onSelected = (item: any) => {
+  emit('change', item);
+};
+
+const addIcons = (url: string) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.send();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        try {
+          const iconfont = JSON.parse(xhr.responseText);
+          const iconGroup = {
+            name: iconfont.name,
+            loaded: true,
+            show: true,
+            list: [],
+          };
+
+          iconfont.glyphs.forEach((item: any) => {
+            iconGroup.list.push({
+              iconFamily: iconfont.font_family,
+              icon: String.fromCharCode(item.unicode_decimal),
+            });
+          });
+          resolve(iconGroup);
+        } catch (error) {
+          reject(error);
+        }
+      }
+    };
+  });
+};
+</script>
+<style lang="postcss" scoped>
+.icons {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 12px;
+  padding-left: 6px;
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border: 1px solid transparent;
+    border-radius: 2px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--color-primary);
+    }
+
+    i {
+      width: 21px;
+      height: 21px;
+      font-size: 20px;
+      color: var(--color);
+    }
+  }
+}
+</style>