AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-04-19 17:16:08 +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
[] 楼传新增跳过无宝石无怪物的地图
[] 楼传在小地图中显示10层塔的缩略图
[] 自定义工具栏新增文件夹功能，里面可以放多个工具
[] 自定义工具新增杂项，包括点击后打开工具栏、拖动大地图等

130
src/ui/toolEditor.vue
View File

@ -3,41 +3,64 @@
<span class="button-text" @click="exit"><left-outlined /> 返回</span>
</div>
<div id="tool-editor">
<Scroll class="tool-list-scroll">
<div id="tool-list">
<div
v-for="(item, i) of list"
class="tool-list-item selectable"
:selected="i === selected"
@click="selected = i"
>
<span>{{ item.id }}</span>
<a-button
type="danger"
class="tool-list-delete"
@click.stop="deleteTool(item.id)"
>删除</a-button
>
</div>
<div id="tool-list-add">
<div id="tool-left">
<Scroll class="tool-list-scroll">
<div id="tool-list">
<div
id="tool-add-div"
@click="addingTool = true"
v-if="!addingTool"
v-for="(item, i) of list"
class="tool-list-item selectable"
:selected="i === selected"
@click="selected = i"
>
<PlusOutlined></PlusOutlined>&nbsp;&nbsp;
<span>新增工具栏</span>
<span>{{ item.id }}</span>
<a-button
type="danger"
class="tool-list-delete"
@click.stop="deleteTool(item.id)"
>删除</a-button
>
</div>
<div v-else>
<a-input
style="height: 100%; font-size: 80%; width: 100%"
v-model:value="addingToolId"
@blur="addTool"
></a-input>
<div id="tool-list-add">
<div
id="tool-add-div"
@click="addingTool = true"
v-if="!addingTool"
>
<PlusOutlined></PlusOutlined>&nbsp;&nbsp;
<span>新增工具栏</span>
</div>
<div v-else>
<a-input
style="
height: 100%;
font-size: 80%;
width: 100%;
"
v-model:value="addingToolId"
@blur="addTool"
></a-input>
</div>
</div>
</div>
</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>
</Scroll>
</div>
<a-divider
class="divider"
dashed
@ -151,8 +174,8 @@
</div>
</Scroll>
</div>
<a-divider dashed></a-divider>
<div id="tool-preview" v-if="!!bar">
<a-divider dashed v-if="!isMobile"></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
@ -329,7 +352,13 @@ onUnmounted(() => {
.tool-list-scroll {
height: 100%;
width: 30%;
width: 100%;
}
#tool-left {
flex-basis: 30%;
display: flex;
height: 100%;
}
#tool-list {
@ -507,4 +536,41 @@ onUnmounted(() => {
.divider {
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>