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)" @click.stop="toggleExpand(node)"
class="allowDrag" class="allowDrag"
style="width: 100%; text-overflow: ellipsis; overflow: hidden"
:title="node.label"
> >
<svg-icon <svg-icon
:name="node.expanded ? 'arrow' : 'more'" :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)" @click.stop="toggleExpand(node)"
class="allowDrag" class="allowDrag"
style="width: 100%; text-overflow: ellipsis; overflow: hidden"
:title="node.label"
> >
<svg-icon <svg-icon
:name="node.expanded ? 'arrow' : 'more'" :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)" @click.stop="toggleExpand(node)"
class="allowDrag" class="allowDrag"
style="width: 100%; text-overflow: ellipsis; overflow: hidden"
:title="node.label"
> >
<svg-icon <svg-icon
:name="node.expanded ? 'arrow' : 'more'" :name="node.expanded ? 'arrow' : 'more'"

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

@ -11,73 +11,132 @@
<div class="set_detail"> <div class="set_detail">
<div class="top"> <div class="top">
<div> <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>
<div class="typeBut"> <div class="typeBut">
<span v-for="(item, index) in butList" :key="index" :class="{ clickButClass: butActiveIndex === index }" <span
@click="typeClick(index)">{{ item }}</span> v-for="(item, index) in butList"
:key="index"
:class="{ clickButClass: butActiveIndex === index }"
@click="typeClick(index)"
>{{ item }}</span
>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<!-- 左侧Tab导航 --> <!-- 左侧Tab导航 -->
<div class="treeCon"> <div class="treeCon">
<el-tree style="max-width: 600px" :data="typeTreeData" ref="treeRef" node-key="id" <el-tree
@node-click="handleTypeClick" :filter-node-method="filterNode"> style="max-width: 600px"
:data="typeTreeData"
ref="treeRef"
node-key="id"
@node-click="handleTypeClick"
:filter-node-method="filterNode"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<!-- <span> {{ node.label }}</span> --> <!-- <span> {{ node.label }}</span> -->
<span :class="{ <span
'primary-type': !(node.childNodes.length != 0), :class="{
'selected-text': node.id === currentTypeId 'primary-type': !(node.childNodes.length != 0),
}" @click.stop="toggleExpand(node)" class="allowDrag"> 'selected-text': node.id === currentTypeId
<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)"
@click.stop="toggleExpand(node)"></svg-icon> class="allowDrag"
{{ node.label }}</span> 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> </template>
</el-tree> </el-tree>
</div> </div>
<div class="model-gallery" ref="galleryRef"> <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> --> <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
<div class="model-grid"> <div class="model-grid">
<div v-for="(model, mIndex) in categories" :key="mIndex" class="model-item" <div
@click="modelClick(mIndex, model)"> v-for="(model, mIndex) in categories"
:key="mIndex"
class="model-item"
@click="modelClick(mIndex, model)"
>
<div class="imgbg"> <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> <template #error>
<div class="image-error">加载失败</div> <div class="image-error">加载失败</div>
</template> </template>
</el-image> </el-image>
</div> </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 }} {{ model.iconName }}
</div> </div>
</div> </div>
</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> --> <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
<div class="typeTitltName" v-if="categories.length"> <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>
<div class="model-grid"> <div class="model-grid">
<div v-for="(model, mIndex) in categories" :key="mIndex" class="model-item" <div
@click="modelClick(mIndex, model)"> v-for="(model, mIndex) in categories"
:key="mIndex"
class="model-item"
@click="modelClick(mIndex, model)"
>
<div class="imgbg"> <div class="imgbg">
<el-image :src="'http://localhost:' + availablePort + '/' + model.data" fit="contain" <el-image
class="thumbnail"> :src="'http://localhost:' + availablePort + '/' + model.data"
fit="contain"
class="thumbnail"
>
<template #error> <template #error>
<div class="image-error">加载失败</div> <div class="image-error">加载失败</div>
</template> </template>
</el-image> </el-image>
</div> </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 }} {{ model.iconName }}
</div> </div>
</div> </div>
@ -114,7 +173,7 @@ const { cusUpdateNode } = useTreeNode()
var modelName = ref('') var modelName = ref('')
const availablePort = ref(55110) const availablePort = ref(55110)
const service = ref(localStorage.getItem("service")) const service = ref(localStorage.getItem('service'))
ipcRenderer.invoke('get-available-port').then((port) => { ipcRenderer.invoke('get-available-port').then((port) => {
availablePort.value = port availablePort.value = port
@ -292,17 +351,16 @@ const modelClick = (index, row) => {
isShowPup.value = false isShowPup.value = false
console.log(index, row) console.log(index, row)
let selectedImg let selectedImg
if(selectCallback) { if (selectCallback) {
if(butActiveIndex.value === 0) if (butActiveIndex.value === 0) {
{ selectedImg =
selectedImg = 'http://localhost:' + availablePort.value + '/' + (row.data.indexOf("1s/") > -1 ? row.data.replace(/1s/g, "1") : row.data) 'http://localhost:' +
} availablePort.value +
else if(butActiveIndex.value === 1) '/' +
{ (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 selectedImg = 'http://localhost:' + availablePort.value + '/' + row.data
} } else if (butActiveIndex.value === 2) {
else if(butActiveIndex.value === 2)
{
selectedImg = service.value + row.data selectedImg = service.value + row.data
} }
selectCallback(selectedImg) selectCallback(selectedImg)
@ -332,10 +390,10 @@ const getModelList = async () => {
parentId: null parentId: null
} }
] ]
if(butActiveIndex.value==0) { if (butActiveIndex.value == 0) {
categories.value = [...threePhoto] categories.value = [...threePhoto]
} }
if(butActiveIndex.value==1) { if (butActiveIndex.value == 1) {
categories.value = [...ordinaryPhoto] categories.value = [...ordinaryPhoto]
} }
} else { } else {
@ -343,7 +401,7 @@ const getModelList = async () => {
if (res.code == 0 || res.code == 200) { if (res.code == 0 || res.code == 200) {
let data = transformNestedJson(res.data, 'name', 'label') let data = transformNestedJson(res.data, 'name', 'label')
typeTreeData.value = data typeTreeData.value = data
if(typeTreeData.value.length>0) { if (typeTreeData.value.length > 0) {
getModelListByType(typeTreeData.value[0].id) getModelListByType(typeTreeData.value[0].id)
} }
} }
@ -374,7 +432,7 @@ onBeforeUnmount(() => {
observer?.disconnect() observer?.disconnect()
}) })
//end //end
eventBus.on('openPhoto', async(cb) => { eventBus.on('openPhoto', async (cb) => {
isShowPup.value = true isShowPup.value = true
selectCallback = cb selectCallback = cb
getModelList() getModelList()
@ -502,19 +560,23 @@ defineExpose({
box-sizing: border-box; box-sizing: border-box;
// height: 50vh; // 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--left .el-tabs__active-bar.is-right,
.el-tabs--right .el-tabs__active-bar.is-left, .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; width: 3px;
background: rgba(0, 255, 255, 1); background: rgba(0, 255, 255, 1);
height: 40px !important; 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--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-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after) { .el-tabs--right .el-tabs__nav-wrap.is-right::after
) {
width: 3px; width: 3px;
} }
@ -571,29 +633,39 @@ defineExpose({
} }
:deep(.el-tabs__item:hover) { :deep(.el-tabs__item:hover) {
background: linear-gradient(90deg, background: linear-gradient(
rgba(0, 255, 255, 0) 0%, 90deg,
rgba(0, 255, 255, 0.5) 48.91%, rgba(0, 255, 255, 0) 0%,
rgba(0, 255, 255, 0) 100%); rgba(0, 255, 255, 0.5) 48.91%,
rgba(0, 255, 255, 0) 100%
);
border: 1px solid; border: 1px solid;
box-sizing: border-box; box-sizing: border-box;
border-image: linear-gradient(90deg, border-image: linear-gradient(
90deg,
rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0) 0%,
rgba(0, 255, 255, 1) 55.55%, 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) { :deep(.el-tabs__item.is-active) {
background: linear-gradient(90deg, background: linear-gradient(
rgba(0, 255, 255, 0) 0%, 90deg,
rgba(0, 255, 255, 0.5) 48.91%, rgba(0, 255, 255, 0) 0%,
rgba(0, 255, 255, 0) 100%) !important; rgba(0, 255, 255, 0.5) 48.91%,
rgba(0, 255, 255, 0) 100%
) !important;
border: 0.1px solid; border: 0.1px solid;
// box-sizing: border-box; // box-sizing: border-box;
border-image: linear-gradient(90deg, border-image: linear-gradient(
90deg,
rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0) 0%,
rgba(0, 255, 255, 1) 55.55%, 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) { :deep(.el-tabs__header) {
@ -668,6 +740,7 @@ defineExpose({
height: 100%; height: 100%;
float: left; float: left;
border-right: 1px solid rgba(204, 204, 204, 0.2); border-right: 1px solid rgba(204, 204, 204, 0.2);
overflow-x: hidden;
} }
.model-gallery { .model-gallery {
@ -678,6 +751,17 @@ defineExpose({
width: calc(100% - 160px); width: calc(100% - 160px);
float: left; float: left;
margin-left: 10px; 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 { .model-section {
@ -788,7 +872,7 @@ defineExpose({
} }
/* tree */ /* tree */
.el-tree-node__content>.el-tree-node__expand-icon { .el-tree-node__content > .el-tree-node__expand-icon {
display: none !important; display: none !important;
} }
@ -812,7 +896,7 @@ defineExpose({
/* Element UI主色，可自定义 */ /* 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; border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.2) !important;
} }