From 9f685ef246aa1eada5078a849afbce553fa1ab12 Mon Sep 17 00:00:00 2001
From: unanmed <1319491857@qq.com>
Date: Tue, 12 Mar 2024 23:07:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=A0=8F=E7=AB=96=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 idea.md               |   2 +
 src/ui/toolEditor.vue | 130 +++++++++++++++++++++++++++++++-----------
 2 files changed, 100 insertions(+), 32 deletions(-)

diff --git a/idea.md b/idea.md
index b2df7a0..a7fa099 100644
--- a/idea.md
+++ b/idea.md
@@ -60,3 +60,5 @@
 [x] 对 vnode 进行简单的包装，提供出显示文字、显示图片等 api 以及修改 css 的 api
 [] 楼传新增跳过无宝石无怪物的地图
 [] 楼传在小地图中显示10层塔的缩略图
+[] 自定义工具栏新增文件夹功能，里面可以放多个工具
+[] 自定义工具新增杂项，包括点击后打开工具栏、拖动大地图等
diff --git a/src/ui/toolEditor.vue b/src/ui/toolEditor.vue
index fb551dd..6cd5589 100644
--- a/src/ui/toolEditor.vue
+++ b/src/ui/toolEditor.vue
@@ -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>