feat: 拖拽布局-优化问题

demoHtml/flex/css/index.css

@@ -190,6 +190,23 @@ html {
     left: 60px;
     background-color: unset;
     box-shadow: unset;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+#go-back .tab-button.active {
+    background: #fff !important;
+    color: #000 !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    font-weight: bold;
+    font-size: 18px;
+}
+
+#go-back > img {
+    display: block;
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+    cursor: pointer;
 }
 
 .tab-button {

demoHtml/flex/css/list.css

@@ -82,6 +82,16 @@
     padding: 0 15px 10px; /* 调整子项内容间距 */
     font-size: 12px;
     color: #999;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.list-item-date > span:nth-child(2) {
+    background: #667eea;
+    color: #fff;
+    padding: 2px 5px;
+    border-radius: 5px;
 }
 
 .add-btn {

demoHtml/flex/index.html

@@ -72,7 +72,11 @@
                     <!-- 画布容器 -->
                     <div id="canvas-panel">
                         <div id="go-back">
-                            <button class="tab-button active"><</button>
+                            <img
+                                src="./image/back.png"
+                                alt=""
+                            />
+                            <!-- <button class="tab-button active"><</button> -->
                         </div>
                         <div id="canvas-tabs">
                             <button

demoHtml/flex/js/i18n.js

@@ -59,6 +59,7 @@ var userLangConfig = {
             edit: '编辑',
             apply: '应用',
             add: '新建模版',
+            apply_text: '使用中',
         },
     },
     en_US: {
@@ -125,6 +126,7 @@ var userLangConfig = {
             edit: 'edit',
             apply: 'apply',
             add: 'add template',
+            apply_text: 'using',
         },
     },
 };

demoHtml/flex/js/index.js

@@ -581,8 +581,12 @@
             hidePropsPanel();
         });
 
-        $('#go-back .tab-button').on('click', function () {
-            window.history.back();
+        $('#go-back img').on('click', function () {
+            const { confirm_del, tips } = userLangConfig[locale].base;
+            layer.confirm(confirm_del, { icon: 3, title: tips }, function (index) {
+                layer.close(index);
+                window.history.back();
+            });
         });
     };
 

demoHtml/flex/js/list.js

@@ -36,6 +36,7 @@
                         </div>
                         <div class="list-item-date">
                             <span>${userLangConfig[locale].list.update_time}：${item.createTime}</span>
+                            ${item.type == 1 ? '<span>' + userLangConfig[locale].list.apply_text + '</span>' : ''}
                         </div>
                     </div>
                 `;