zhouyulong/electron-4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改图标库

Browse Source
This commit is contained in:
夏大胆
2025-09-30 17:11:45 +08:00
parent 84cc20d01a
commit c975d709e8
4 changed files with 148 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/views/components/headers/components/setPup/components/graphLabelManage.vue
View File

@ -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'"

2
src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue
View File

@ -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'"

2
src/renderer/src/views/components/headers/components/setPup/components/photoManage.vue
View File

@ -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'"

174
src/renderer/src/views/components/propertyBox/photo.vue
View File

@ -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
@ -293,16 +352,15 @@ const modelClick = (index, row) => {
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 (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)
@ -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 {