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

提交

Browse Source
This commit is contained in:
zh
2025-10-23 18:02:29 +08:00
parent 558ddff6b0
commit 8040ae535e
325 changed files with 2076 additions and 1161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
src/renderer/src/views/components/propertyBox/model.vue
View File

@ -4,64 +4,81 @@
<template #header>
<div class="set_pup_header">
<div class="system_title">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="229" height="35"
viewBox="0 0 229 35" fill="none" preserveAspectRatio="none">
<path
d="M74 34L85 34L99.5 6L88.5 6L74 34ZM92 34L103 34L117.5 6L106.5 6L92 34ZM111 34L122 34L136.5 6L125.5 6L111 34ZM140 34L129 34L143.5 6L154.5 6L140 34ZM148 34L159 34L173.5 6L162.5 6L148 34ZM177 34L166 34L180.5 6L191.5 6L177 34ZM185 34L196 34L210.5 6L199.5 6L185 34ZM214 34L203 34L217.5 6L228.5 6L214 34ZM0 34L11 34L25.5 6.5L14.5 6.5L0 34ZM18 34L29 34L43.5 6.5L32.5 6.5L18 34ZM37 34L48 34L62.5 6.5L51.5 6.5L37 34ZM66 34L55 34L69.5 6.5L80.5 6.5L66 34Z"
fill-rule="evenodd" fill="url(#linear_fill_2442_1053)" />
<rect x="0" y="0" width="229" height="34" fill="url(#linear_fill_2442_1054)" />
<g clip-path="url(#clip-path-2442_1055)">
<path
d="M10.3993 32.7333L10.666 33L10.666 21L9.33267 22.3333L4.66602 27L5.66602 28L10.3993 32.7333ZM9.33267 29.6667L6.73267 27L9.33267 24.3333L9.33267 29.6667Z"
fill="rgb(var(--color-base1))" />
<g opacity="0.5">
<path
d="M7.39934 32.7333L7.66602 33L7.66602 21L6.33267 22.3333L1.66602 27L2.66602 28L7.39934 32.7333ZM6.33267 29.6667L3.73267 27L6.33267 24.3333L6.33267 29.6667Z"
fill="rgb(var(--color-base1))" />
</g>
</g>
<g clip-path="url(#clip-path-2442_1059)">
<path
d="M218.601 32.7333L218.334 33L218.334 21L219.667 22.3333L224.334 27L223.334 28L218.601 32.7333ZM219.667 29.6667L222.267 27L219.667 24.3333L219.667 29.6667Z"
fill="rgb(var(--color-base1))" />
<g opacity="0.5">
<path
d="M221.601 32.7333L221.334 33L221.334 21L222.667 22.3333L227.334 27L226.334 28L221.601 32.7333ZM222.667 29.6667L225.267 27L222.667 24.3333L222.667 29.6667Z"
fill="rgb(var(--color-base1))" />
</g>
</g>
<defs>
<linearGradient id="linear_fill_2442_1053" x1="119.1239013671875" y1="33.99998474121094"
x2="119.1231689453125" y2="6" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0.2" />
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear_fill_2442_1054" x1="0" y1="17" x2="229" y2="17"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
<stop offset="0.4891" stop-color="rgb(var(--color-base1))" stop-opacity="0.4" />
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
</linearGradient>
<clipPath id="clip-path-2442_1055">
<path d="M0 19L0 35L16 35L16 19L0 19Z" fill="white" />
</clipPath>
<clipPath id="clip-path-2442_1059">
<path d="M229 19L229 35L213 35L213 19L229 19Z" fill="white" />
</clipPath>
</defs>
</svg>
{{ t('model.title') }}
</div>
</div>
</template>
<div class="set_detail">
<div class="top">
<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" />
<button @click="setting" class="btn">
<svg-icon
name="sys_set"
class="setIcon"
:size="12"
color="rgba(255,255,255, 1)"
style="margin-right: 5px"
></svg-icon
>默认模型参数设置
<svg-icon name="sys_set" class="setIcon" :size="12" color="rgba(255,255,255, 1)"
style="margin-right: 5px"></svg-icon>默认模型参数设置
</button>
</div>
<div class="content">
<!-- 左侧Tab导航 -->
<div class="treeCon">
<el-tree
style="max-width: 600px"
:data="typeTreeData"
ref="treeRef"
node-key="id"
empty-text=""
@node-click="handleTypeClick"
:filter-node-method="filterNode"
>
<el-tree style="max-width: 600px" :data="typeTreeData" ref="treeRef" node-key="id" empty-text=""
@node-click="handleTypeClick" :filter-node-method="filterNode">
<template #default="{ node, data }">
<!-- <span> {{ node.label }}</span> -->
<span
:class="{
'primary-type': !(node.childNodes.length != 0),
'selected-text': node.id === currentTypeId
}"
@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
>
<span :class="{
'primary-type': !(node.childNodes.length != 0),
'selected-text': node.id === currentTypeId
}" @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(var(--color-base1), 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>
@ -70,13 +87,51 @@
<div class="model-section" v-if="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">
<svg class="imgbg_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="60.79296875" height="60.77734375" viewBox="0 0 60.79296875 60.77734375" fill="none"
preserveAspectRatio="none">
<path stroke="url(#linear_border_2296_2693_0)" stroke-width="1"
d="M1.27148 0.26416L60.5204 0.26416" />
<path stroke="url(#linear_border_2296_2694_0)" stroke-width="1"
d="M0.271484 1.26416L0.271484 60.5136" />
<path stroke="url(#linear_border_2296_2695_0)" stroke-width="1"
d="M60.5215 1.26416L60.5215 60.5136" />
<path stroke="url(#linear_border_2296_2696_0)" stroke-width="1"
d="M1.27148 60.5132L60.5204 60.5132" />
<g opacity="0.5">
<rect x="0.521484375" y="0.51416015625" width="60" height="60" fill="rgb(var(--color-base1))"
fill-opacity="0.5" />
</g>
<defs>
<linearGradient id="linear_border_2296_2693_0" x1="1.271484375" y1="0.26416015625"
x2="60.5205078125" y2="0.26416015625" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
<stop offset="0.5555" stop-color="rgb(var(--color-base1))" />
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear_border_2296_2694_0" x1="0.271484375" y1="1.26416015625"
x2="0.271484375" y2="60.513671875" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
<stop offset="0.5555" stop-color="rgb(var(--color-base1))" />
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear_border_2296_2695_0" x1="60.521484375" y1="1.26416015625"
x2="60.521484375" y2="60.513671875" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
<stop offset="0.5555" stop-color="rgb(var(--color-base1))" />
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear_border_2296_2696_0" x1="1.271484375" y1="60.51318359375"
x2="60.5205078125" y2="60.51318359375" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
<stop offset="0.5555" stop-color="rgb(var(--color-base1))" />
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
<el-image :src="service + model.posterDataUrl" fit="contain" class="thumbnail">
<template #error>
<div class="image-error">加载失败</div>
@ -84,11 +139,7 @@
</el-image>
</div>
<div
class="model-name"
:class="{ isactive: activeIndex == mIndex }"
:title="model.modelName"
>
<div class="model-name" :class="{ isactive: activeIndex == mIndex }" :title="model.modelName">
{{ model.modelName }}
</div>
</div>
@ -377,7 +428,7 @@ const renderModel = async (data, model) => {
DbOption.params = JSON.stringify(DbOption.params)
cusAddNodes(window.treeObj, DbOption.parentId, [DbOption])
// //鼠标右键点击事件
Model.onRightClick = () => {}
Model.onRightClick = () => { }
// window._entityMap.set(option.id, Model);
// Model.onClick = () => {
@ -491,42 +542,50 @@ defineExpose({
.set_pup {
width: 40vw;
height: 50vh;
:deep(.el-dialog) {
background:
linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%),
linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%),
rgba(0, 0, 0, 0.6);
border: 1px solid #00c9ff;
border: 1px solid var(--color-border1);
padding-left: 0 !important;
}
:deep(.el-dialog__body) {
padding: 0 !important;
}
:deep(.el-dialog__headerbtn) {
height: 30px;
width: 30px;
border-bottom-left-radius: 80%;
background-color: #008989;
background-color: rgba(var(--color-base1), 0.5);
&:hover {
background-color: #00ffff;
background-color: rgba(var(--color-base1), 1);
.el-dialog__close {
color: rgba(0, 66, 66, 1); // 悬停时改变关闭图标为红色
}
}
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
color: #fff;
}
.set_pup_header {
width: 100%;
height: 100%;
// background-color: #00ffff;
// background-color: rgba(var(--color-base1), 1);
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 20px;
.system_title {
background: url('@/assets/images/titlebg.png') no-repeat;
background-size: 100% 100%;
// background: url('@/assets/images/titlebg.png') no-repeat;
// background-size: 100% 100%;
width: 229px;
height: 34px;
line-height: 34px;
@ -535,28 +594,37 @@ defineExpose({
font-size: 18px;
color: #fff;
font-weight: 700;
position: relative;
z-index: 1;
>svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
}
}
.set_detail {
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);
background: rgba(var(--color-base1), 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;
}
@ -589,13 +657,16 @@ defineExpose({
width: 5px;
height: 5px;
}
:deep(.el-tabs__content::-webkit-scrollbar-thumb) {
background-color: #0ff;
background-color: rgba(var(--color-base1), 1);
border-radius: 5px;
}
:deep(.el-tabs__content::-webkit-scrollbar-track) {
background-color: rgba(0, 255, 255, 0.2);
background-color: rgba(var(--color-base1), 0.2);
}
:deep(.el-tabs__item) {
width: 8vw;
color: #fff !important;
@ -608,79 +679,78 @@ defineExpose({
margin-bottom: 3px;
box-sizing: border-box;
}
:deep(.el-tabs__item:hover) {
background: linear-gradient(
90deg,
rgba(0, 255, 255, 0) 0%,
rgba(0, 255, 255, 0.5) 48.91%,
rgba(0, 255, 255, 0) 100%
);
background: linear-gradient(90deg,
rgba(var(--color-base1), 0) 0%,
rgba(var(--color-base1), 0.5) 48.91%,
rgba(var(--color-base1), 0) 100%);
border: 1px solid;
box-sizing: border-box;
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;
border-image: linear-gradient(90deg,
rgba(var(--color-base1), 0) 0%,
rgba(var(--color-base1), 1) 55.55%,
rgba(var(--color-base1), 0) 100%) 1;
}
:deep(.el-tabs__item.is-active) {
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;
background: linear-gradient(90deg,
rgba(var(--color-base1), 0) 0%,
rgba(var(--color-base1), 0.5) 48.91%,
rgba(var(--color-base1), 0) 100%) !important;
border: 0.1px solid;
// box-sizing: border-box;
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;
border-image: linear-gradient(90deg,
rgba(var(--color-base1), 0) 0%,
rgba(var(--color-base1), 1) 55.55%,
rgba(var(--color-base1), 0) 100%) 1 !important;
}
:deep(.el-tabs__header) {
height: 50vh !important;
width: 8vw;
overflow-y: auto;
overflow-x: hidden;
}
:deep(.el-tabs__nav-next, .el-tabs__nav-prev) {
color: #fff;
}
}
.el-input {
width: 300px;
margin-left: 30px;
--el-input-placeholder-color: rgba(173, 241, 255, 1) !important;
--el-input-placeholder-color: rgba(204, 204, 204, 1) !important;
--el-input-placeholder-font-size: 14px;
--el-input-text-color: #fff;
--el-input-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
--el-input-hover-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
--el-input-focus-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
--el-input-border-color: rgba(var(--color-base1), 0.5) !important;
--el-input-hover-border-color: rgba(var(--color-base1), 0.5) !important;
--el-input-focus-border-color: rgba(var(--color-base1), 0.5) !important;
}
::v-deep .el-input__wrapper {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.btn {
float: right;
height: 32px;
line-height: 32px;
background: rgba(var(--color-sdk-base-rgb), 0.2) !important;
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
background: rgba(var(--color-base1), 0.2) !important;
border: 1px solid rgba(var(--color-base1), 0.5) !important;
border-radius: 4px;
color: #fff !important;
padding: 0 15px;
}
.btn:hover {
color: rgba(var(--color-sdk-base-rgb), 1) !important;
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
color: rgba(var(--color-base1), 1) !important;
border: 1px solid rgba(var(--color-base1), 1) !important;
.setIcon {
color: rgba(var(--color-sdk-base-rgb), 1) !important;
color: rgba(var(--color-base1), 1) !important;
}
}
@ -696,11 +766,13 @@ defineExpose({
display: flex;
height: 100vh;
}
.model-tabs {
width: 130px;
height: 100%;
float: left;
}
.treeCon {
width: 140px;
height: 100%;
@ -708,6 +780,7 @@ defineExpose({
border-right: 1px solid rgba(204, 204, 204, 0.2);
overflow-x: hidden;
}
.model-gallery {
flex: 1;
/* padding: 20px; */
@ -716,28 +789,35 @@ defineExpose({
width: calc(100% - 160px);
float: left;
margin-left: 10px;
.custom-empty {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
flex-direction: column;
height: 300px;
}
.custom-empty img {
display: block;
width: 130px;
}
}
.model-section {
min-height: 10vh;
margin-bottom: 40px;
}
.model-grid {
display: flex;
flex-wrap: wrap;
/* justify-content: space-around; */
gap: 20px;
}
.model-name {
width: 100%;
height: 30px;
@ -749,35 +829,50 @@ defineExpose({
color: rgba(255, 255, 255, 1);
}
.isactive {
color: rgba(var(--color-sdk-base-rgb), 1) !important;
color: rgba(var(--color-base1), 1) !important;
}
.model-item {
border-radius: 8px;
overflow: hidden;
width: 70px;
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
}
.model-item:hover {
cursor: pointer !important;
color: rgba(var(--color-sdk-base-rgb), 1) !important;
color: rgba(var(--color-base1), 1) !important;
.model-name {
color: rgba(var(--color-sdk-base-rgb), 1) !important;
color: rgba(var(--color-base1), 1) !important;
}
}
.imgbg {
width: 70px;
height: 70px;
background: url('@/assets/images/model-bg.png') no-repeat;
background-size: 100% 100%;
// background: url('@/assets/images/model-bg.png') no-repeat;
// background-size: 100% 100%;
position: relative;
>.imgbg_svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.thumbnail {
width: 66px;
height: 66px;
margin-left: 2px;
margin-top: 2px;
}
.loading-more {
text-align: center;
padding: 20px;
@ -786,19 +881,21 @@ defineExpose({
::v-deep .el-tabs__content {
display: none !important;
}
/* 修改滚动条轨道的颜色 */
::v-deep ::-webkit-scrollbar-track {
background: rgba(var(--color-sdk-base-rgb), 0.1) !important;
background: rgba(var(--color-base1), 0.1) !important;
}
/* 修改滚动条滑块的样式 */
::v-deep ::-webkit-scrollbar-thumb {
background: rgba(var(--color-sdk-base-rgb), 1) !important;
background: rgba(var(--color-base1), 1) !important;
border-radius: 10px;
}
/* 当滑块被激活（用户点击或拖动时） */
::v-deep ::-webkit-scrollbar-thumb:hover {
background: rgba(var(--color-sdk-base-rgb), 1) !important;
background: rgba(var(--color-base1), 1) !important;
}
</style>
<style>
@ -806,11 +903,13 @@ defineExpose({
width: 5px;
height: 5px;
}
/* 定义背景颜色和圆角 */
::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
}
/* //定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
border-radius: 1em;
@ -818,26 +917,31 @@ defineExpose({
}
/* tree */
.el-tree-node__content > .el-tree-node__expand-icon {
.el-tree-node__content>.el-tree-node__expand-icon {
display: none !important;
}
.el-tree {
background: transparent !important;
--el-tree-node-hover-bg-color: rgba(var(--color-sdk-base-rgb), 0.2) !important;
--el-tree-node-hover-bg-color: rgba(var(--color-base1), 0.2) !important;
color: rgba(255, 255, 255, 1) !important;
/* font-size: 12px !important; */
width: 130px;
float: left;
margin-left: 10px;
}
::v-deep .el-text {
color: rgba(255, 255, 255, 1) !important;
font-size: 12px !important;
}
.selected-text {
color: rgba(var(--color-sdk-base-rgb), 1) !important; /* Element UI主色，可自定义 */
color: rgba(var(--color-base1), 1) !important;
/* Element UI主色，可自定义 */
}
::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;
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
border-right: 1px solid rgba(var(--color-base1), 0.2) !important;
}
</style>