完善工具栏；支持深度排序

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -9,11 +9,18 @@
         </el-icon>
       </el-button>
       <div class="sidebar-title">组件</div>
-      <div class="sidebar-item component-item"
-        :class="{ 'selected': selectedComponent && selectedComponent.type === 'canvas' }"
-        @click="selectCanvasFromSidebar">
-        <div class="component-icon-text">画布</div>
-      </div>
+      <template v-for="item in editorContent.elements.slice().sort((a, b) => b.depth - a.depth)"
+        :key="item.depth + '-' + item.type">
+        <div class="sidebar-item component-item"
+          :class="{ 'selected': selectedComponent === item || (item.type === 'canvas' && selectedComponent && selectedComponent.type === 'canvas') }"
+          @click="item.type === 'canvas' ? selectCanvasFromSidebar() : selectComponent(item)">
+          <div class="component-icon-text">
+            <template v-if="item.type === 'canvas'">画布</template>
+            <template v-else-if="item.type === 'text'">文本</template>
+            <!-- 未来可扩展图片等类型 -->
+          </div>
+        </div>
+      </template>
     </div>
 
     <!-- 中间编辑区 -->
@@ -395,28 +402,44 @@ const goBack = () => {
 }
 
 .toolbar {
-  width: 100%;
-  height: 48px;
-  background: #f5f7fa;
   display: flex;
-  align-items: center;
-  padding: 0 24px;
-  border-bottom: 1px solid #e0e3e8;
-  box-sizing: border-box;
-  gap: 16px;
+  flex-direction: column;
+  align-self: flex-start;
+  align-items: flex-start;
+  justify-content: stretch;
+  width: 100px;
+  height: 50px;
+  margin-left: 5%;
+  margin-top: -5%;
+  margin-bottom: 1%;
+  background: #fafbfc;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  /* padding: 6px 0; */
 }
 
 .toolbar-item {
-  background: #fff;
-  border: 1px solid #e0e3e8;
-  border-radius: 6px;
-  padding: 6px 20px;
-  font-size: 16px;
-  cursor: grab;
   user-select: none;
-  transition:
-    box-shadow 0.2s,
-    border-color 0.2s;
+  cursor: grab;
+  background: #fff;
+  border-radius: 4px;
+  /* margin: 8px 0 8px 8px; */
+  width: 92px;
+  min-height: 50px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  text-align: center;
+  transition: background 0.2s;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+  /* padding: 0 8px; */
 }
 
 .toolbar-item:active {