修改图标库

src/renderer/src/views/components/headers/components/setPup/components/graphLabelManage.vue

@@ -58,6 +58,8 @@
                   }"
                   @click.stop="toggleExpand(node)"
                   class="allowDrag"
+                  style="width: 100%; text-overflow: ellipsis; overflow: hidden"
+                  :title="node.label"
                 >
                   <svg-icon
                     :name="node.expanded ? 'arrow' : 'more'"

src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue

@@ -58,6 +58,8 @@
                   }"
                   @click.stop="toggleExpand(node)"
                   class="allowDrag"
+                  style="width: 100%; text-overflow: ellipsis; overflow: hidden"
+                  :title="node.label"
                 >
                   <svg-icon
                     :name="node.expanded ? 'arrow' : 'more'"

src/renderer/src/views/components/headers/components/setPup/components/photoManage.vue

@@ -70,6 +70,8 @@
                   }"
                   @click.stop="toggleExpand(node)"
                   class="allowDrag"
+                  style="width: 100%; text-overflow: ellipsis; overflow: hidden"
+                  :title="node.label"
                 >
                   <svg-icon
                     :name="node.expanded ? 'arrow' : 'more'"

src/renderer/src/views/components/propertyBox/photo.vue

@@ -11,73 +11,132 @@
       <div class="set_detail">
         <div class="top">
           <div>
-            <el-input v-model="modelName" class="w-50 m-2" placeholder="请输入图标类型进行搜索" :suffix-icon="Search" />
+            <el-input
+              v-model="modelName"
+              class="w-50 m-2"
+              placeholder="请输入图标类型进行搜索"
+              :suffix-icon="Search"
+            />
           </div>
           <div class="typeBut">
-            <span v-for="(item, index) in butList" :key="index" :class="{ clickButClass: butActiveIndex === index }"
-              @click="typeClick(index)">{{ item }}</span>
+            <span
+              v-for="(item, index) in butList"
+              :key="index"
+              :class="{ clickButClass: butActiveIndex === index }"
+              @click="typeClick(index)"
+              >{{ item }}</span
+            >
           </div>
         </div>
         <div class="content">
           <!-- 左侧Tab导航 -->
           <div class="treeCon">
-            <el-tree style="max-width: 600px" :data="typeTreeData" ref="treeRef" node-key="id"
-              @node-click="handleTypeClick" :filter-node-method="filterNode">
+            <el-tree
+              style="max-width: 600px"
+              :data="typeTreeData"
+              ref="treeRef"
+              node-key="id"
+              @node-click="handleTypeClick"
+              :filter-node-method="filterNode"
+            >
               <template #default="{ node, data }">
                 <!-- <span> {{ node.label }}</span> -->
 
-                <span :class="{
+                <span
+                  :class="{
                     'primary-type': !(node.childNodes.length != 0),
                     'selected-text': node.id === currentTypeId
-    }" @click.stop="toggleExpand(node)" class="allowDrag">
-                  <svg-icon :name="node.expanded ? 'arrow' : 'more'" :size="12" color="rgba(0, 255, 255, 1)"
-                    style="margin-right: 5px; margin-left: 5px" v-if="node.childNodes.length != 0"
-                    @click.stop="toggleExpand(node)"></svg-icon>
-                  {{ node.label }}</span>
+                  }"
+                  @click.stop="toggleExpand(node)"
+                  class="allowDrag"
+                  style="width: 100%; text-overflow: ellipsis; overflow: hidden"
+                  :title="node.label"
+                >
+                  <svg-icon
+                    :name="node.expanded ? 'arrow' : 'more'"
+                    :size="12"
+                    color="rgba(0, 255, 255, 1)"
+                    style="margin-right: 5px; margin-left: 5px"
+                    v-if="node.childNodes.length != 0"
+                    @click.stop="toggleExpand(node)"
+                  ></svg-icon>
+                  {{ node.label }}</span
+                >
               </template>
             </el-tree>
           </div>
 
           <div class="model-gallery" ref="galleryRef">
-            <div class="model-section" v-if="butActiveIndex === 2">
+            <div class="model-section" v-if="butActiveIndex === 2 && categories.length != 0">
               <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
               <div class="model-grid">
-                <div v-for="(model, mIndex) in categories" :key="mIndex" class="model-item"
-                  @click="modelClick(mIndex, model)">
+                <div
+                  v-for="(model, mIndex) in categories"
+                  :key="mIndex"
+                  class="model-item"
+                  @click="modelClick(mIndex, model)"
+                >
                   <div class="imgbg">
-                    <el-image :src="service + model.data" fit="contain" class="thumbnail">
+                    <el-image :src="service + model.iconDataUrl" fit="contain" class="thumbnail">
                       <template #error>
                         <div class="image-error">加载失败</div>
                       </template>
                     </el-image>
                   </div>
 
-                  <div class="model-name" :class="{ isactive: activeIndex == mIndex }" :title="model.iconName">
+                  <div
+                    class="model-name"
+                    :class="{ isactive: activeIndex == mIndex }"
+                    :title="model.iconName"
+                  >
                     {{ model.iconName }}
                   </div>
                 </div>
               </div>
             </div>
+            <div v-if="butActiveIndex === 2 && categories.length == 0">
+              <div class="custom-empty">
+                <img src="@/assets/images/noData.png" alt="暂无数据" />
+                <div class="noData">暂无数据</div>
+              </div>
+            </div>
 
             <!-- 基础类型 -->
-            <div class="model-section2" v-else>
+            <div class="model-section2" v-else-if="butActiveIndex === 1 || butActiveIndex === 0">
               <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
               <div class="typeTitltName" v-if="categories.length">
-                <svg-icon name="fk" :size="16" color="rgba(0, 255, 255, 1)" style="margin-right: 5px"></svg-icon>基本类型
+                <svg-icon
+                  name="fk"
+                  :size="16"
+                  color="rgba(0, 255, 255, 1)"
+                  style="margin-right: 5px"
+                ></svg-icon
+                >基本类型
               </div>
               <div class="model-grid">
-                <div v-for="(model, mIndex) in categories" :key="mIndex" class="model-item"
-                  @click="modelClick(mIndex, model)">
+                <div
+                  v-for="(model, mIndex) in categories"
+                  :key="mIndex"
+                  class="model-item"
+                  @click="modelClick(mIndex, model)"
+                >
                   <div class="imgbg">
-                    <el-image :src="'http://localhost:' + availablePort + '/' + model.data" fit="contain"
-                      class="thumbnail">
+                    <el-image
+                      :src="'http://localhost:' + availablePort + '/' + model.data"
+                      fit="contain"
+                      class="thumbnail"
+                    >
                       <template #error>
                         <div class="image-error">加载失败</div>
                       </template>
                     </el-image>
                   </div>
 
-                  <div class="model-name" :class="{ isactive: activeIndex == mIndex }" :title="model.iconName">
+                  <div
+                    class="model-name"
+                    :class="{ isactive: activeIndex == mIndex }"
+                    :title="model.iconName"
+                  >
                     {{ model.iconName }}
                   </div>
                 </div>
@@ -114,7 +173,7 @@ const { cusUpdateNode } = useTreeNode()
 var modelName = ref('')
 
 const availablePort = ref(55110)
-const service = ref(localStorage.getItem("service"))
+const service = ref(localStorage.getItem('service'))
 
 ipcRenderer.invoke('get-available-port').then((port) => {
   availablePort.value = port
@@ -292,17 +351,16 @@ const modelClick = (index, row) => {
   isShowPup.value = false
   console.log(index, row)
   let selectedImg
-  if(selectCallback) {
-    if(butActiveIndex.value === 0)
-    {
-      selectedImg = 'http://localhost:' + availablePort.value + '/' + (row.data.indexOf("1s/") > -1 ? row.data.replace(/1s/g, "1") : row.data)
-    }
-    else if(butActiveIndex.value === 1)
-    {
+  if (selectCallback) {
+    if (butActiveIndex.value === 0) {
+      selectedImg =
+        'http://localhost:' +
+        availablePort.value +
+        '/' +
+        (row.data.indexOf('1s/') > -1 ? row.data.replace(/1s/g, '1') : row.data)
+    } else if (butActiveIndex.value === 1) {
       selectedImg = 'http://localhost:' + availablePort.value + '/' + row.data
-    }
-    else if(butActiveIndex.value === 2)
-    {
+    } else if (butActiveIndex.value === 2) {
       selectedImg = service.value + row.data
     }
     selectCallback(selectedImg)
@@ -332,10 +390,10 @@ const getModelList = async () => {
         parentId: null
       }
     ]
-    if(butActiveIndex.value==0) {
+    if (butActiveIndex.value == 0) {
       categories.value = [...threePhoto]
     }
-    if(butActiveIndex.value==1) {
+    if (butActiveIndex.value == 1) {
       categories.value = [...ordinaryPhoto]
     }
   } else {
@@ -343,7 +401,7 @@ const getModelList = async () => {
     if (res.code == 0 || res.code == 200) {
       let data = transformNestedJson(res.data, 'name', 'label')
       typeTreeData.value = data
-      if(typeTreeData.value.length>0) {
+      if (typeTreeData.value.length > 0) {
         getModelListByType(typeTreeData.value[0].id)
       }
     }
@@ -374,7 +432,7 @@ onBeforeUnmount(() => {
   observer?.disconnect()
 })
 //end
-eventBus.on('openPhoto', async(cb) => {
+eventBus.on('openPhoto', async (cb) => {
   isShowPup.value = true
   selectCallback = cb
   getModelList()
@@ -502,19 +560,23 @@ defineExpose({
     box-sizing: border-box;
 
     // height: 50vh;
-    :deep(.el-tabs--left .el-tabs__active-bar.is-left,
+    :deep(
+      .el-tabs--left .el-tabs__active-bar.is-left,
       .el-tabs--left .el-tabs__active-bar.is-right,
       .el-tabs--right .el-tabs__active-bar.is-left,
-      .el-tabs--right .el-tabs__active-bar.is-right) {
+      .el-tabs--right .el-tabs__active-bar.is-right
+    ) {
       width: 3px;
       background: rgba(0, 255, 255, 1);
       height: 40px !important;
     }
 
-    :deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after,
+    :deep(
+      .el-tabs--left .el-tabs__nav-wrap.is-left::after,
       .el-tabs--left .el-tabs__nav-wrap.is-right::after,
       .el-tabs--right .el-tabs__nav-wrap.is-left::after,
-      .el-tabs--right .el-tabs__nav-wrap.is-right::after) {
+      .el-tabs--right .el-tabs__nav-wrap.is-right::after
+    ) {
       width: 3px;
     }
 
@@ -571,29 +633,39 @@ defineExpose({
     }
 
     :deep(.el-tabs__item:hover) {
-      background: linear-gradient(90deg,
+      background: linear-gradient(
+        90deg,
         rgba(0, 255, 255, 0) 0%,
         rgba(0, 255, 255, 0.5) 48.91%,
-          rgba(0, 255, 255, 0) 100%);
+        rgba(0, 255, 255, 0) 100%
+      );
       border: 1px solid;
       box-sizing: border-box;
-      border-image: linear-gradient(90deg,
+      border-image: linear-gradient(
+          90deg,
           rgba(0, 255, 255, 0) 0%,
           rgba(0, 255, 255, 1) 55.55%,
-          rgba(0, 255, 255, 0) 100%) 1;
+          rgba(0, 255, 255, 0) 100%
+        )
+        1;
     }
 
     :deep(.el-tabs__item.is-active) {
-      background: linear-gradient(90deg,
+      background: linear-gradient(
+        90deg,
         rgba(0, 255, 255, 0) 0%,
         rgba(0, 255, 255, 0.5) 48.91%,
-          rgba(0, 255, 255, 0) 100%) !important;
+        rgba(0, 255, 255, 0) 100%
+      ) !important;
       border: 0.1px solid;
       // box-sizing: border-box;
-      border-image: linear-gradient(90deg,
+      border-image: linear-gradient(
+          90deg,
           rgba(0, 255, 255, 0) 0%,
           rgba(0, 255, 255, 1) 55.55%,
-          rgba(0, 255, 255, 0) 100%) 1 !important;
+          rgba(0, 255, 255, 0) 100%
+        )
+        1 !important;
     }
 
     :deep(.el-tabs__header) {
@@ -668,6 +740,7 @@ defineExpose({
   height: 100%;
   float: left;
   border-right: 1px solid rgba(204, 204, 204, 0.2);
+  overflow-x: hidden;
 }
 
 .model-gallery {
@@ -678,6 +751,17 @@ defineExpose({
   width: calc(100% - 160px);
   float: left;
   margin-left: 10px;
+  .custom-empty {
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    flex-direction: column;
+    height: 300px;
+  }
+  .custom-empty img {
+    display: block;
+    width: 130px;
+  }
 }
 
 .model-section {
@@ -788,7 +872,7 @@ defineExpose({
 }
 
 /* tree */
-.el-tree-node__content>.el-tree-node__expand-icon {
+.el-tree-node__content > .el-tree-node__expand-icon {
   display: none !important;
 }
 
@@ -812,7 +896,7 @@ defineExpose({
   /* Element UI主色，可自定义 */
 }
 
-::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.2) !important;
 }