AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-06-08 16:27:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 自定义工具栏竖屏

Browse Source
This commit is contained in:
unanmed 2024-03-12 23:07:47 +08:00
parent af60b881e9
commit 9f685ef246
2 changed files with 100 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
idea.md
View File

@ -60,3 +60,5 @@
[x] 对 vnode 进行简单的包装，提供出显示文字、显示图片等 api 以及修改 css 的 api [x] 对 vnode 进行简单的包装，提供出显示文字、显示图片等 api 以及修改 css 的 api
[] 楼传新增跳过无宝石无怪物的地图 [] 楼传新增跳过无宝石无怪物的地图
[] 楼传在小地图中显示10层塔的缩略图 [] 楼传在小地图中显示10层塔的缩略图
[] 自定义工具栏新增文件夹功能，里面可以放多个工具
[] 自定义工具新增杂项，包括点击后打开工具栏、拖动大地图等

74
src/ui/toolEditor.vue
View File

@ -3,6 +3,7 @@
<span class="button-text" @click="exit"><left-outlined /> 返回</span> <span class="button-text" @click="exit"><left-outlined /> 返回</span>
</div> </div>
<div id="tool-editor"> <div id="tool-editor">
<div id="tool-left">
<Scroll class="tool-list-scroll"> <Scroll class="tool-list-scroll">
<div id="tool-list"> <div id="tool-list">
<div <div
@ -30,7 +31,11 @@
</div> </div>
<div v-else> <div v-else>
<a-input <a-input
style="height: 100%; font-size: 80%; width: 100%" style="
height: 100%;
font-size: 80%;
width: 100%;
"
v-model:value="addingToolId" v-model:value="addingToolId"
@blur="addTool" @blur="addTool"
></a-input> ></a-input>
@ -38,6 +43,24 @@
</div> </div>
</div> </div>
</Scroll> </Scroll>
<a-divider
type="vertical"
dashed
v-if="isMobile"
style="height: 100%; border-color: #ddd4"
></a-divider>
<div id="tool-preview" v-if="!!bar && isMobile">
<div id="tool-preview-container">
<div class="tool-preview-item" v-for="item of bar.items">
<component
:is="(CustomToolbar.info[item.type].show as any)"
:item="item"
:toolbar="bar"
></component>
</div>
</div>
</div>
</div>
<a-divider <a-divider
class="divider" class="divider"
dashed dashed
@ -151,8 +174,8 @@
</div> </div>
</Scroll> </Scroll>
</div> </div>
<a-divider dashed></a-divider> <a-divider dashed v-if="!isMobile"></a-divider>
<div id="tool-preview" v-if="!!bar"> <div id="tool-preview" v-if="!!bar && !isMobile">
<div id="tool-preview-container"> <div id="tool-preview-container">
<div class="tool-preview-item" v-for="item of bar.items"> <div class="tool-preview-item" v-for="item of bar.items">
<component <component
@ -329,7 +352,13 @@ onUnmounted(() => {
.tool-list-scroll { .tool-list-scroll {
height: 100%; height: 100%;
width: 30%; width: 100%;
}
#tool-left {
flex-basis: 30%;
display: flex;
height: 100%;
} }
#tool-list { #tool-list {
@ -507,4 +536,41 @@ onUnmounted(() => {
.divider { .divider {
height: 100%; height: 100%;
} }
@media screen and (max-width: 600px) {
#tool-editor {
padding-top: 15%;
flex-direction: column;
width: 100%;
height: 100%;
}
#tool-left {
width: 100%;
height: 100%;
max-height: 40vh;
display: flex;
flex-direction: row;
.tool-list-scroll {
height: 100%;
flex-basis: 50%;
}
#tool-preview {
flex-basis: 50%;
height: 100%;
}
}
#tool-info {
width: 100%;
height: 100%;
}
.divider {
height: auto;
width: 100%;
}
}
</style> </style>