aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

长大了你要当太空人

Browse Source
This commit is contained in:
lzp
2026-03-26 11:50:17 +08:00
parent 7f27b1a47e
commit dd22e97985
11 changed files with 81 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/css/style.css
View File

@@ -96,3 +96,10 @@ body,
--el-color-primary-dark-2: #565656; --el-color-primary-dark-2: #565656;
/* 深灰色（加深20%） */ /* 深灰色（加深20%） */
} }
.mini-scrollbar::-webkit-scrollbar {
width: 0.4rem;
}
.mini-scrollbar::-webkit-scrollbar-thumb {
border-radius: 0.4rem;
background: rgba(0, 0, 0, 0.2);
}

12
src/assets/css/style.less
View File

@@ -105,3 +105,15 @@ body,
--el-color-primary-light-9: #e3e3e3; /* 极浅的灰色（混合60%白） */ --el-color-primary-light-9: #e3e3e3; /* 极浅的灰色（混合60%白） */
--el-color-primary-dark-2: #565656; /* 深灰色（加深20%） */ --el-color-primary-dark-2: #565656; /* 深灰色（加深20%） */
} }
// 迷你滚动条
.mini-scrollbar {
&::-webkit-scrollbar {
width: 0.4rem;
}
&::-webkit-scrollbar-thumb {
border-radius: 0.4rem;
background: rgba(0, 0, 0, 0.2);
}
}

4
src/components/Canvas/DepthCanvas/components/details-panel/index.vue
View File

@@ -7,7 +7,7 @@
<svg-icon name="dc-down_arrow2" size="10" /> <svg-icon name="dc-down_arrow2" size="10" />
</span> </span>
</div> </div>
<div class="content" v-if="isShow" v-show="show"> <div class="content mini-scrollbar" v-if="isShow" v-show="show">
<basic-info :object="activeObject" /> <basic-info :object="activeObject" />
<fill-repeat :object="activeObject" v-if="isRepeat" /> <fill-repeat :object="activeObject" v-if="isRepeat" />
<shape-setting :object="activeObject" v-if="isShape && !isRepeat" /> <shape-setting :object="activeObject" v-if="isShape && !isRepeat" />
@@ -51,7 +51,7 @@
top: 2.2rem; top: 2.2rem;
right: 3rem; right: 3rem;
width: 28.8rem; width: 28.8rem;
max-height: 80%; max-height: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.6rem; gap: 1.6rem;

2
src/components/Canvas/DepthCanvas/components/layer-panel/index.vue
View File

@@ -20,7 +20,7 @@
width: 0; width: 0;
top: 2.2rem; top: 2.2rem;
left: 3rem; left: 3rem;
max-height: 80%; max-height: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.6rem; gap: 1.6rem;

9
src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
View File

@@ -9,7 +9,7 @@
<span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span> <span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span>
</div> </div>
</div> </div>
<div class="content"> <div class="content mini-scrollbar">
<VueDraggable <VueDraggable
:model-value="list" :model-value="list"
@start="(e) => handleDragStart(e)" @start="(e) => handleDragStart(e)"
@@ -173,13 +173,6 @@
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
min-height: 20rem; min-height: 20rem;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0, 0, 0, 0.2);
}
} }
} }
.sortable-layers-child { .sortable-layers-child {

40
src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
View File

@@ -2,7 +2,7 @@
<div class="depth-input" :class="{ color: isColor }"> <div class="depth-input" :class="{ color: isColor }">
<span class="decorate"></span> <span class="decorate"></span>
<span v-show="icon" class="icon"> <span v-show="icon" class="icon">
<svg-icon :name="icon" :size="iconSize" size-unit="px" /> <svg-icon :name="icon" :size="iconSize" />
</span> </span>
<span v-show="before" class="before">{{ before }}</span> <span v-show="before" class="before">{{ before }}</span>
<input <input
@@ -220,45 +220,45 @@
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
border: 1px solid var(--depth-input-border-color, rgba(230, 230, 231, 1)); border: 0.1rem solid var(--depth-input-border-color, rgba(230, 230, 231, 1));
border-radius: 2px; border-radius: 0.2rem;
height: var(--depth-input-height, 20px); height: var(--depth-input-height, 2rem);
background-color: var(--depth-input-bg-color, #fff); background-color: var(--depth-input-bg-color, #fff);
padding: 0 4px 0 2px; padding: 0 0.4rem 0 0.2rem;
&.color { &.color {
--depth-input-decorate-margin-right: 10px; --depth-input-decorate-margin-right: 1rem;
--depth-input-input-margin-right: 10px; --depth-input-input-margin-right: 1rem;
--depth-input-input-font-align: left; --depth-input-input-font-align: left;
--depth-input-after-color: rgba(181, 181, 181, 1); --depth-input-after-color: rgba(181, 181, 181, 1);
} }
> .decorate { > .decorate {
width: 2px; width: 0.2rem;
background-color: var(--depth-input-decorate-color, rgba(230, 230, 231, 1)); background-color: var(--depth-input-decorate-color, rgba(230, 230, 231, 1));
border-radius: 2px; border-radius: 0.2rem;
height: 75%; height: 75%;
margin-right: var(--depth-input-decorate-margin-right, 4px); margin-right: var(--depth-input-decorate-margin-right, 0.4rem);
} }
> .iconfont { > .iconfont {
font-size: 12px; font-size: 1.2rem;
color: #000; color: #000;
margin-right: 4px; margin-right: 0.4rem;
} }
> .before { > .before {
font-size: 12px; font-size: 1.2rem;
color: #000; color: #000;
margin-right: 4px; margin-right: 0.4rem;
} }
> .after { > .after {
font-size: 12px; font-size: 1.2rem;
color: var(--depth-input-after-color, #000); color: var(--depth-input-after-color, #000);
margin-left: 2px; margin-left: 0.2rem;
} }
> input { > input {
font-size: 12px; font-size: 1.2rem;
width: 0; width: 0;
height: 100%; height: 100%;
flex: 1; flex: 1;
margin-right: var(--depth-input-input-margin-right, 0); margin-right: var(--depth-input-input-margin-right, 0rem);
text-align: var(--depth-input-input-font-align, right); text-align: var(--depth-input-input-font-align, right);
outline: none; outline: none;
border: none; border: none;
@@ -277,9 +277,9 @@
} }
&[type='color'] { &[type='color'] {
flex: 0.5; flex: 0.5;
border-radius: 2px; border-radius: 0.2rem;
height: 70%; height: 70%;
border: 1px solid rgb(42, 42, 42); border: 0.1rem solid rgb(42, 42, 42);
display: block; display: block;
&::-webkit-color-swatch-wrapper { &::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;

40
src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue
View File

@@ -152,52 +152,52 @@
justify-content: center; justify-content: center;
> * { > * {
flex: 1; flex: 1;
margin-right: 10px; margin-right: 1rem;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
} }
> .dish { > .dish {
width: 115px; width: 11.5rem;
height: 115px; height: 11.5rem;
border: 1px solid #eaeaea; border: 0.1rem solid #eaeaea;
border-radius: 3.4px; border-radius: 0.4rem;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
background-color: #f6f6f6; background-color: #f6f6f6;
margin-top: 20px; margin-top: 2rem;
> * { > * {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }
> img { > img {
width: 12px; width: 1.2rem;
height: 12px; height: 1.2rem;
bottom: 3.5px; bottom: 0.35rem;
right: 3.5px; right: 0.35rem;
} }
> .ball { > .ball {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 8.5px; width: 0.85rem;
height: 8.5px; height: 0.85rem;
border: 1px solid #fff; border: 0.1rem solid #fff;
background-color: #333; background-color: #333;
border-radius: 50%; border-radius: 50%;
box-shadow: 0px 0.68px 0.17px 0px rgba(0, 0, 0, 0.26); box-shadow: 9 0.07rem 0.02rem 0 rgba(0, 0, 0, 0.26);
} }
> .tip { > .tip {
font-size: 8.5px; font-size: 0.85rem;
color: #000; color: #000;
line-height: 24px; line-height: 2.4rem;
&.x { &.x {
top: 50%; top: 50%;
right: 0%; right: 0%;
transform: translate(100%, -50%); transform: translate(100%, -50%);
padding-left: 6px; padding-left: 0.6rem;
} }
&.y { &.y {
top: 0%; top: 0%;
@@ -216,15 +216,15 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
&.x { &.x {
width: 100%; width: 100%;
border-top-width: 1px; border-top-width: 0.1rem;
} }
&.y { &.y {
height: 100%; height: 100%;
border-left-width: 1px; border-left-width: 0.1rem;
} }
&.z { &.z {
width: 50%; width: 50%;
border-top-width: 1px; border-top-width: 0.1rem;
border-color: #454754; border-color: #454754;
transform: translate(0%, -50%) rotateZ(var(--rotateZ)); transform: translate(0%, -50%) rotateZ(var(--rotateZ));
transform-origin: left center; transform-origin: left center;

18
src/components/Canvas/DepthCanvas/components/tools/depth-select.vue
View File

@@ -22,12 +22,12 @@
<style scoped lang="less"> <style scoped lang="less">
.depth-select { .depth-select {
&:deep(.el-select) { &:deep(.el-select) {
--el-select-input-font-size: 12px; --el-select-input-font-size: 1.2rem;
.el-select__wrapper { .el-select__wrapper {
font-size: 12px; font-size: 1.2rem;
min-height: 0; min-height: 0;
height: 28px; height: 2.8rem;
padding: 0 8px; padding: 0 0.8rem;
} }
.el-select__selected-item, .el-select__selected-item,
.el-select__input-wrapper, .el-select__input-wrapper,
@@ -35,17 +35,17 @@
line-height: normal; line-height: normal;
} }
.el-select__input { .el-select__input {
height: 24px; height: 2.4rem;
} }
} }
} }
.el-popper { .el-popper {
.el-select-dropdown { .el-select-dropdown {
li { li {
padding-left: 8px; padding-left: 0.8rem;
height: 30px; height: 3rem;
line-height: 30px; line-height: 3rem;
font-size: 12px; font-size: 1.2rem;
} }
} }
} }

10
src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue
View File

@@ -86,7 +86,7 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
--input-thumb-size: 1.4rem; --input-thumb-size: 1.2rem;
--backcolor1: var(--depth-slider-thumb-color1, #000); --backcolor1: var(--depth-slider-thumb-color1, #000);
--backcolor2: var(--depth-slider-thumb-color2, #d3d3d3); --backcolor2: var(--depth-slider-thumb-color2, #d3d3d3);
&:hover { &:hover {
@@ -121,7 +121,7 @@
background: var(--backcolor1); /* 蓝色滑块 */ background: var(--backcolor1); /* 蓝色滑块 */
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
} }
&::-webkit-slider-thumb:hover { &::-webkit-slider-thumb:hover {
transform: scale(1.1); transform: scale(1.1);
@@ -153,9 +153,9 @@
transform: translateX(-50%); transform: translateX(-50%);
width: 0; width: 0;
height: 0; height: 0;
border-left: 5px solid transparent; border-left: 0.5rem solid transparent;
border-right: 5px solid transparent; border-right: 0.5rem solid transparent;
border-top: 5px solid rgba(0, 0, 0, 0.8); border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
} }
} }
} }

1
src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
View File

@@ -37,6 +37,7 @@ export class AISelectboxToolManager {
if (!oldIsAAA && newIsAAA) { if (!oldIsAAA && newIsAAA) {
// 普通工具切换到智能框选工具 // 普通工具切换到智能框选工具
this.init() this.init()
this.canvasManager.discardActiveObject()
} else if (oldIsAAA && !newIsAAA) { } else if (oldIsAAA && !newIsAAA) {
// 智能框选工具切换到普通工具 // 智能框选工具切换到普通工具
this.clear() this.clear()

5
src/views/home/left-nav.vue
View File

@@ -22,7 +22,7 @@
><svg-icon name="arrow-right" size="14" /> ><svg-icon name="arrow-right" size="14" />
</span> </span>
</div> </div>
<div class="history-list" v-show="!isCollapse && showHistory"> <div class="history-list mini-scrollbar" v-show="!isCollapse && showHistory">
<div v-for="item in list" :key="item.name" class="history-item"> <div v-for="item in list" :key="item.name" class="history-item">
<div v-if="item.title" class="title">{{ item.name }}</div> <div v-if="item.title" class="title">{{ item.name }}</div>
<div <div
@@ -307,7 +307,8 @@
> .history-list { > .history-list {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
width: 23.2rem; width: 26.4rem;
padding: 0 1.5rem;
margin: 1rem auto 0; margin: 1rem auto 0;
> .history-item { > .history-item {
width: 100%; width: 100%;