@flun/html-template 4.3.1 → 4.4.0

package/f-CHANGELOG.md

@@ -1,4 +1,7 @@
 # 变更日志
+## [4.4.0] - 2026-05-31 14:25
+### 优化
+- 修改辅助功能(在线编辑css文件)中预览逻辑:删除单预览按钮,增加上、下、左、右和单页面预览按钮,及相关逻辑的全面优化,让体验更好;
 ## [4.3.1] - 2026-05-30 11:42
 ### 优化
 - https启用成功后,不在打印证书路径,只给出成功提示;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flun/html-template",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "一个HTML模板工具包,提供开发服务器和模板编译功能,支持自定义标签和快捷输入,变量定义,包含文件引用,帮助开发者模块化处理HTML;",
   "main": "index.js",
   "types": "index.d.ts",

package/static/script.css

@@ -1,4 +1,10 @@
-/* script.css */
+/* ========== 全局与容器样式 ========== */
+.container {
+    max-width: 100%;
+    margin: 0px;
+    padding: 0px;
+}
+
 .modal {
     position: fixed;
     top: 0;
@@ -7,32 +13,106 @@
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 1000;
+    display: none;
+}
+
+/* ========== 布局工具栏 ========== */
+.layout-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 8px 16px;
+    background: #2c2e3e;
+    border-bottom: 1px solid #44475a;
+    border-radius: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1000;
+    flex-wrap: wrap;
+}
+
+.layout-btn {
+    background: #44475a;
+    color: var(--text-color);
+    border: none;
+    padding: 6px 16px;
+    border-radius: 30px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.layout-btn.active {
+    background: #14712a;
+}
+
+.layout-btn:hover {
+    background: #6272a4;
+    transform: translateY(-1px);
+}
+
+#cancelPreviewBtn {
+    display: none;
+    background: #d94bec;
+}
+
+#cancelPreviewBtn:hover {
+    background-color: #821d90;
+}
+
+/* ========== 主工作区 ========== */
+.workspace {
+    display: flex;
+    flex: 1;
+    gap: 5px;
+    overflow: hidden;
+    background: #282a36;
+    transition: all 0.2s ease;
+    width: 100%;
+    height: calc(100vh - 50px);
+}
+
+.workspace > #cssEditor,
+.workspace > #preview {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+}
+
+.workspace.single-preview #cssEditor {
+    display: none;
+}
+
+.workspace.single-preview #preview {
+    width: 100%;
+    flex: 1;
 }
 
+/* ========== 编辑器面板 #cssEditor ========== */
 #cssEditor {
     display: flex;
     flex-direction: column;
     background: rgb(175, 63, 63);
-    padding: 20px;
-    border-radius: 10px;
-    width: 90%;
-    max-width: 700px;
-    height: 800px;
-    min-width: 300px;
-    min-height: 200px;
-    overflow: auto;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    cursor: grab;
+    padding: 0;
+    border-radius: 0;
+    width: 100%;
+    height: 100%;
     box-sizing: border-box;
-    resize: none;
-    z-index: 1001;
+    overflow: auto;
+    position: relative;
+    top: auto;
+    left: auto;
+    transform: none;
+    max-width: none;
+    box-shadow: none;
+    cursor: default;
+    z-index: auto;
 }
 
 #cssEditor:active {
-    cursor: grabbing;
+    cursor: default;
 }
 
 #cssEditor .header {
@@ -40,17 +120,18 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
-    padding-bottom: 10px;
+    padding: 15px 20px 10px 20px;
     border-bottom: 1px solid #eee;
-    cursor: grab;
+    cursor: default;
+    background: inherit;
 }
 
 #cssEditor .header:active {
-    cursor: grabbing;
+    cursor: default;
 }
 
 #cssEditor h2 {
-    margin-bottom: 8px;
+    margin: 0;
     color: #2c3e50;
 }
 
@@ -67,30 +148,28 @@
 
 .editor-info {
     background: #069d57;
-    padding: 10px;
-    border-radius: 5px;
-    margin-bottom: 15px;
+    padding: 8px 20px;
+    margin: 0;
     font-size: 14px;
     color: #333aa6;
 }
 
-/* 隐藏原始 textarea */
 #cssContent {
     display: none;
 }
 
-/* CodeMirror 容器 */
+/* CodeMirror 基础样式 */
 #cssEditor .CodeMirror {
     flex: 1;
     width: 100%;
     height: auto;
     min-height: 200px;
-    border: 1px solid #444;
-    border-radius: 5px;
+    border: none;
+    border-radius: 0;
     font-family: 'Courier New', monospace;
     font-size: 14px;
     line-height: 1.6;
-    margin-bottom: 20px;
+    margin-bottom: 0;
     background: #282a36;
 }
 
@@ -103,12 +182,11 @@
     color: #6272a4;
 }
 
-/* 注释颜色 */
 .CodeMirror .cm-comment {
     color: #3b9e3b !important;
 }
 
-/* ---------- 颜色色块组件样式 ---------- */
+/* 颜色部件样式 */
 .cm-color-widget {
     display: inline-flex;
     align-items: center;
@@ -139,7 +217,7 @@
 }
 
 .cm-color-text {
-    color: #f8f8f2;
+    color: var(--text-color);
     background: rgba(0, 0, 0, 0.2);
     padding: 0 4px;
     border-radius: 2px;
@@ -150,35 +228,17 @@
     cursor: text;
 }
 
-/* -------------------------------------- */
-
+/* 按钮区域 */
 #cssEditor .actions {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
-    margin-top: 10px;
+    padding: 15px 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-#previewBtn {
-    background: #3498db;
-    color: var(--text-color);
-    padding: 12px 24px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: all 0.3s;
-    min-width: 120px;
-}
-
-#previewBtn:hover {
-    background-color: #2980b9;
-    transform: translateY(-2px);
-}
-
-#cancelPreviewBtn {
-    display: none;
-    background: #d94bec;
+#saveBtn {
+    background: #0ca55e;
     color: var(--text-color);
     padding: 12px 24px;
     border: none;
@@ -189,23 +249,11 @@
     min-width: 120px;
 }
 
-#cancelPreviewBtn:hover {
-    background-color: #821d90;
+#saveBtn:hover {
+    background-color: #17723d;
     transform: translateY(-2px);
 }
 
-#saveBtn {
-    background: #0ca55e;
-    color: var(--text-color);
-    padding: 12px 24px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: all 0.3s;
-    min-width: 120px;
-}
-
 #cancelBtn {
     background: #bdb330;
     color: var(--text-color);
@@ -218,53 +266,52 @@
     min-width: 120px;
 }
 
-#saveBtn:hover {
-    background-color: #17723d;
-    transform: translateY(-2px);
-}
-
 #cancelBtn:hover {
     background-color: #566214;
     transform: translateY(-2px);
 }
 
+/* 编辑器附加强制左对齐 */
+#cssEditor .CodeMirror,
+#cssEditor .CodeMirror *,
+.CodeMirror pre,
+.CodeMirror-lines,
+.CodeMirror-line {
+    text-align: left !important;
+}
+
+/* ========== 预览容器 #preview ========== */
 #preview {
     display: none;
-    position: fixed;
-    width: 800px;
-    height: 600px;
-    top: 40px;
-    left: 20px;
+    flex-direction: column;
     background: #181f3a;
-    border-radius: 10px;
-    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
-    z-index: 1001;
+    border-radius: 0;
     overflow: hidden;
-    transition: opacity 0.3s ease;
-}
-
-#preview::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1002;
-    background: transparent;
-    cursor: grab;
+    position: relative;
+    box-shadow: none;
+    z-index: auto;
 }
 
-#preview:active::before {
-    cursor: grabbing;
+.preview-header {
+    padding: 8px 16px;
+    background: #2c2e3e;
+    color: #8be9fd;
+    font-size: 13px;
+    border-bottom: 1px solid #444;
+    display: flex;
+    justify-content: space-between;
 }
 
 #previewFrame {
     width: 100%;
     height: 100%;
     border: none;
+    flex: 1;
 }
 
+/* ========== 加载指示器 ========== */
 #loader {
     display: none;
 }
@@ -283,22 +330,8 @@
     text-align: center;
 }
 
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
+/* ========== 响应式布局 ========== */
 @media (max-width: 768px) {
-    #cssEditor {
-        width: 95%;
-        height: 100%;
-    }
-
     #cssEditor .actions {
         flex-wrap: wrap;
     }
@@ -307,7 +340,6 @@
         font-size: 18px;
     }
 
-    #previewBtn,
     #cancelPreviewBtn,
     #saveBtn,
     #cancelBtn {

package/static/script.js

@@ -2,20 +2,25 @@
 function scriptFun() {
     const modal = document.querySelector('.modal'), cssEditor = document.getElementById('cssEditor'),
         closeBtn = document.querySelector('.close-btn'), saveBtn = document.getElementById('saveBtn'),
-        cancelBtn = document.getElementById('cancelBtn'), loader = document.getElementById('loader'), api = '/api/cssEditor',
-        previewBtn = document.getElementById('previewBtn'), cancelPreviewBtn = document.getElementById('cancelPreviewBtn'),
-        preview = document.getElementById('preview'), previewFrame = document.getElementById('previewFrame'), pApi = '/api/preview',
-        urlParams = new URLSearchParams(window.location.search), fileDir = urlParams.get('fileDir'),
-        returnUrl = urlParams.get('return'), cm = window.cssEditor;  // cm 是 CodeMirror 实例，由外部库创建
+        cancelBtn = document.getElementById('cancelBtn'), loader = document.getElementById('loader'),
+        preview = document.getElementById('preview'), previewFrame = document.getElementById('previewFrame'),
+        cancelPreviewBtn = document.getElementById('cancelPreviewBtn'),
+        urlParams = new URLSearchParams(window.location.search),
+        fileDir = urlParams.get('fileDir'), returnUrl = urlParams.get('return');
+
+    let cm = window.cssEditor;
+    if (!cm) {
+        console.error('CodeMirror not ready, retry');
+        setTimeout(scriptFun, 100);
+        return;
+    }
 
     let isEditingColor = false, editColorRange = null, isPreviewMode = false, globalColorPicker = null;
 
-    // ----- 阻止 CodeMirror 编辑器区域事件冒泡，避免触发父容器拖拽和阻止默认菜单 -----
     cm.getWrapperElement().addEventListener('mousedown', e => e.stopPropagation());
     cm.getWrapperElement().addEventListener('touchstart', e => e.stopPropagation(), { passive: true });
     cm.getWrapperElement().addEventListener('contextmenu', e => e.stopPropagation());
 
-    // ---------- 🎨 全局颜色选择器 ----------
     function initGlobalColorPicker() {
         if (globalColorPicker) return;
         globalColorPicker = document.createElement('input');
@@ -32,51 +37,46 @@ function scriptFun() {
     }
     initGlobalColorPicker();
 
-    // ---------- 颜色关键字映射 ----------
+    // 颜色关键字映射（完整）
     const COLOR_KEYWORDS = {
         'aliceblue': '#F0F8FF', 'antiquewhite': '#FAEBD7', 'aqua': '#00FFFF', 'aquamarine': '#7FFFD4', 'azure': '#F0FFFF',
         'beige': '#F5F5DC', 'bisque': '#FFE4C4', 'black': '#000000', 'blanchedalmond': '#FFEBCD', 'blue': '#0000FF',
         'blueviolet': '#8A2BE2', 'brown': '#A52A2A', 'burlywood': '#DEB887', 'cadetblue': '#5F9EA0', 'chartreuse': '#7FFF00',
         'chocolate': '#D2691E', 'coral': '#FF7F50', 'cornflowerblue': '#6495ED', 'cornsilk': '#FFF8DC', 'crimson': '#DC143C',
         'cyan': '#00FFFF', 'darkblue': '#00008B', 'darkcyan': '#008B8B', 'darkgoldenrod': '#B8860B', 'darkgray': '#A9A9A9',
-        'darkgreen': '#006400', 'darkgrey': '#A9A9A9', 'darkkhaki': '#BDB76B', 'darkred': '#8B0000', 'dimgray': '#696969',
-        'dimgrey': '#696969', 'darkorange': '#FF8C00', 'darkmagenta': '#8B008B', 'deeppink': '#FF1493',
-        'darkorchid': '#9932CC', 'darkolivegreen': '#556B2F', 'darksalmon': '#E9967A', 'darkseagreen': '#8FBC8F',
+        'darkgreen': '#006400', 'darkgrey': '#A9A9A9', 'darkkhaki': '#BDB76B', 'darkmagenta': '#8B008B', 'darkolivegreen': '#556B2F',
+        'darkorange': '#FF8C00', 'darkorchid': '#9932CC', 'darkred': '#8B0000', 'darksalmon': '#E9967A', 'darkseagreen': '#8FBC8F',
         'darkslateblue': '#483D8B', 'darkslategray': '#2F4F4F', 'darkslategrey': '#2F4F4F', 'darkturquoise': '#00CED1',
-        'darkviolet': '#9400D3', 'deepskyblue': '#00BFFF', 'dodgerblue': '#1E90FF', 'firebrick': '#B22222',
-        'floralwhite': '#FFFAF0', 'forestgreen': '#228B22', 'fuchsia': '#FF00FF', 'gainsboro': '#DCDCDC', 'gold': '#FFD700',
-        'ghostwhite': '#F8F8FF', 'goldenrod': '#DAA520', 'gray': '#808080', 'green': '#008000', 'greenyellow': '#ADFF2F',
-        'grey': '#808080', 'honeydew': '#F0FFF0', 'hotpink': '#FF69B4', 'indianred': '#CD5C5C', 'indigo': '#4B0082',
-        'ivory': '#FFFFF0', 'khaki': '#F0E68C', 'lavender': '#E6E6FA', 'lavenderblush': '#FFF0F5', 'lawngreen': '#7CFC00',
-        'lemonchiffon': '#FFFACD', 'lightblue': '#ADD8E6', 'lightcoral': '#F08080', 'lightcyan': '#E0FFFF',
-        'lightgoldenrodyellow': '#FAFAD2', 'lightgray': '#D3D3D3', 'lightgreen': '#90EE90', 'lightgrey': '#D3D3D3',
-        'lightpink': '#FFB6C1', 'lightsalmon': '#FFA07A', 'lightseagreen': '#20B2AA', 'lightskyblue': '#87CEFA',
-        'lightslategray': '#778899', 'lightslategrey': '#778899', 'lightsteelblue': '#B0C4DE', 'lightyellow': '#FFFFE0',
-        'lime': '#00FF00', 'limegreen': '#32CD32', 'linen': '#FAF0E6', 'magenta': '#FF00FF', 'maroon': '#800000',
-        'mediumaquamarine': '#66CDAA', 'mediumblue': '#0000CD', 'mediumorchid': '#BA55D3', 'mediumpurple': '#9370DB',
-        'mediumseagreen': '#3CB371', 'mediumslateblue': '#7B68EE', 'mediumspringgreen': '#00FA9A', 'moccasin': '#FFE4B5',
-        'mediumturquoise': '#48D1CC', 'mediumvioletred': '#C71585', 'midnightblue': '#191970', 'mintcream': '#F5FFFA',
-        'mistyrose': '#FFE4E1', 'navajowhite': '#FFDEAD', 'navy': '#000080', 'oldlace': '#FDF5E6', 'olive': '#808000',
-        'olivedrab': '#6B8E23', 'orange': '#FFA500', 'orangered': '#FF4500', 'orchid': '#DA70D6', 'peru': '#CD853F',
-        'palegoldenrod': '#EEE8AA', 'palegreen': '#98FB98', 'paleturquoise': '#AFEEEE', 'palevioletred': '#DB7093',
-        'papayawhip': '#FFEFD5', 'peachpuff': '#FFDAB9', 'pink': '#FFC0CB', 'plum': '#DDA0DD', 'powderblue': '#B0E0E6',
-        'purple': '#800080', 'rebeccapurple': '#663399', 'red': '#FF0000', 'rosybrown': '#BC8F8F', 'royalblue': '#4169E1',
-        'saddlebrown': '#8B4513', 'salmon': '#FA8072', 'sandybrown': '#F4A460', 'seagreen': '#2E8B57', 'snow': '#FFFAFA',
+        'darkviolet': '#9400D3', 'deeppink': '#FF1493', 'deepskyblue': '#00BFFF', 'dimgray': '#696969', 'dimgrey': '#696969',
+        'dodgerblue': '#1E90FF', 'firebrick': '#B22222', 'floralwhite': '#FFFAF0', 'forestgreen': '#228B22', 'fuchsia': '#FF00FF',
+        'gainsboro': '#DCDCDC', 'ghostwhite': '#F8F8FF', 'gold': '#FFD700', 'goldenrod': '#DAA520', 'gray': '#808080',
+        'green': '#008000', 'greenyellow': '#ADFF2F', 'grey': '#808080', 'honeydew': '#F0FFF0', 'hotpink': '#FF69B4',
+        'indianred': '#CD5C5C', 'indigo': '#4B0082', 'ivory': '#FFFFF0', 'khaki': '#F0E68C', 'lavender': '#E6E6FA',
+        'lavenderblush': '#FFF0F5', 'lawngreen': '#7CFC00', 'lemonchiffon': '#FFFACD', 'lightblue': '#ADD8E6', 'lightcoral': '#F08080',
+        'lightcyan': '#E0FFFF', 'lightgoldenrodyellow': '#FAFAD2', 'lightgray': '#D3D3D3', 'lightgreen': '#90EE90', 'lightgrey': '#D3D3D3',
+        'lightpink': '#FFB6C1', 'lightsalmon': '#FFA07A', 'lightseagreen': '#20B2AA', 'lightskyblue': '#87CEFA', 'lightslategray': '#778899',
+        'lightslategrey': '#778899', 'lightsteelblue': '#B0C4DE', 'lightyellow': '#FFFFE0', 'lime': '#00FF00', 'limegreen': '#32CD32',
+        'linen': '#FAF0E6', 'magenta': '#FF00FF', 'maroon': '#800000', 'mediumaquamarine': '#66CDAA', 'mediumblue': '#0000CD',
+        'mediumorchid': '#BA55D3', 'mediumpurple': '#9370DB', 'mediumseagreen': '#3CB371', 'mediumslateblue': '#7B68EE',
+        'mediumspringgreen': '#00FA9A', 'mediumturquoise': '#48D1CC', 'mediumvioletred': '#C71585', 'midnightblue': '#191970',
+        'mintcream': '#F5FFFA', 'mistyrose': '#FFE4E1', 'moccasin': '#FFE4B5', 'navajowhite': '#FFDEAD', 'navy': '#000080',
+        'oldlace': '#FDF5E6', 'olive': '#808000', 'olivedrab': '#6B8E23', 'orange': '#FFA500', 'orangered': '#FF4500',
+        'orchid': '#DA70D6', 'palegoldenrod': '#EEE8AA', 'palegreen': '#98FB98', 'paleturquoise': '#AFEEEE', 'palevioletred': '#DB7093',
+        'papayawhip': '#FFEFD5', 'peachpuff': '#FFDAB9', 'peru': '#CD853F', 'pink': '#FFC0CB', 'plum': '#DDA0DD',
+        'powderblue': '#B0E0E6', 'purple': '#800080', 'rebeccapurple': '#663399', 'red': '#FF0000', 'rosybrown': '#BC8F8F',
+        'royalblue': '#4169E1', 'saddlebrown': '#8B4513', 'salmon': '#FA8072', 'sandybrown': '#F4A460', 'seagreen': '#2E8B57',
         'seashell': '#FFF5EE', 'sienna': '#A0522D', 'silver': '#C0C0C0', 'skyblue': '#87CEEB', 'slateblue': '#6A5ACD',
-        'slategray': '#708090', 'slategrey': '#708090', 'springgreen': '#00FF7F', 'steelblue': '#4682B4', 'tan': '#D2B48C',
-        'teal': '#008080', 'thistle': '#D8BFD8', 'tomato': '#FF6347', 'turquoise': '#40E0D0', 'violet': '#EE82EE',
-        'wheat': '#F5DEB3', 'white': '#FFFFFF', 'whitesmoke': '#F5F5F5', 'yellow': '#FFFF00', 'yellowgreen': '#9ACD32',
-        'transparent': 'transparent'
-    };
-
-    // ---------- 颜色正则（支持所有格式）----------
-    const KEYWORDS = Object.keys(COLOR_KEYWORDS).concat('transparent').join('|'),
-        HEX = '#(?:[0-9a-fA-F]{3,4}){1,2}\\b', RGB = 'rgba?\\(\\s*\\d+\\s*,\\s*\\d+\\s*,\\s*\\d+\\s*(?:,\\s*[\\d.]+\\s*)?\\)',
+        'slategray': '#708090', 'slategrey': '#708090', 'snow': '#FFFAFA', 'springgreen': '#00FF7F', 'steelblue': '#4682B4',
+        'tan': '#D2B48C', 'teal': '#008080', 'thistle': '#D8BFD8', 'tomato': '#FF6347', 'turquoise': '#40E0D0',
+        'violet': '#EE82EE', 'wheat': '#F5DEB3', 'white': '#FFFFFF', 'whitesmoke': '#F5F5F5', 'yellow': '#FFFF00',
+        'yellowgreen': '#9ACD32', 'transparent': 'transparent'
+    },
+        KEYWORDS = Object.keys(COLOR_KEYWORDS).join('|'), HEX = '#(?:[0-9a-fA-F]{3,4}){1,2}\\b',
+        RGB = 'rgba?\\(\\s*\\d+\\s*,\\s*\\d+\\s*,\\s*\\d+\\s*(?:,\\s*[\\d.]+\\s*)?\\)',
         HSL = 'hsla?\\(\\s*\\d+\\s*,\\s*\\d+%\\s*,\\s*\\d+%\\s*(?:,\\s*[\\d.]+\\s*)?\\)',
         COLOR_REGEX = new RegExp(`${HEX}|${RGB}|${HSL}|\\b(${KEYWORDS})\\b`, 'gi'),
         RGB_EXTRACT = /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/i;
 
-    // ---------- 颜色工具函数 ----------
     function rgbToHex(r, g, b) {
         return '#' + [r, g, b].map(x => {
             const h = parseInt(x).toString(16);
@@ -87,40 +87,40 @@ function scriptFun() {
     function extractColorAndAlpha(c) {
         const l = c.toLowerCase(), kw = COLOR_KEYWORDS[l];
         let r = 0, g = 0, b = 0, a = 1, t = 'keyword';
-
-        // 1. 颜色关键字（含 transparent）
         if (kw) {
             if (l === 'transparent') return { r: 0, g: 0, b: 0, a: 0, t, o: c, tr: true };
-            const hex = kw.slice(1); // "#ff0000" → "ff0000"
-            [r, g, b] = hex.match(/.{2}/g).map(v => parseInt(v, 16)), a = 1;
-        }
-        // 2. 十六进制 #RRGGBB / #RGB / #RRGGBBAA / #RGBA
-        else if (c.startsWith('#')) {
+            const hex = kw.slice(1);
+            [r, g, b] = hex.match(/.{2}/g).map(v => parseInt(v, 16));
+            a = 1;
+        } else if (c.startsWith('#')) {
             t = 'hex';
             let h = c.slice(1).toLowerCase();
             if (h.length === 3 || h.length === 4) h = h.split('').map(x => x + x).join('');
             const hexMatch = h.match(/^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
-            if (hexMatch)
-                [r, g, b] = hexMatch.slice(1, 4).map(v => parseInt(v, 16)), a = hexMatch[4] ? parseInt(hexMatch[4], 16) / 255 : 1;
-        }
-        // 3. rgb() / rgba()
-        else if (c.startsWith('rgb')) {
+            if (hexMatch) {
+                [r, g, b] = hexMatch.slice(1, 4).map(v => parseInt(v, 16));
+                a = hexMatch[4] ? parseInt(hexMatch[4], 16) / 255 : 1;
+            }
+        } else if (c.startsWith('rgb')) {
             const m = RGB_EXTRACT.exec(c);
-            if (m) t = 'rgb', [r, g, b] = [m[1], m[2], m[3]].map(Number), a = m[4] ? parseFloat(m[4]) : 1;
-        }
-        // 4. hsl() / hsla()
-        else if (c.startsWith('hsl')) {
+            if (m) {
+                t = 'rgb';
+                [r, g, b] = [m[1], m[2], m[3]].map(Number);
+                a = m[4] ? parseFloat(m[4]) : 1;
+            }
+        } else if (c.startsWith('hsl')) {
             t = 'hsl';
             const d = document.createElement('div');
             d.style.color = c, document.body.append(d);
-            const computed = window.getComputedStyle(d).color; // "rgb(r, g, b)" 或 "rgba(r, g, b, a)"
+            const computed = window.getComputedStyle(d).color;
             d.remove();
-
             const m = RGB_EXTRACT.exec(computed);
-            if (m) [r, g, b] = [m[1], m[2], m[3]].map(Number), a = m[4] ? parseFloat(m[4]) : 1;
-            else r = 128, g = 128; b = 128, a = 1;  // 解析失败时的默认值
+            if (m) {
+                [r, g, b] = [m[1], m[2], m[3]].map(Number);
+                a = m[4] ? parseFloat(m[4]) : 1;
+            }
+            else r = 128; g = 128; b = 128; a = 1;
         }
-
         return { r, g, b, a, t, o: c };
     }
 
@@ -128,134 +128,162 @@ function scriptFun() {
         const o = extractColorAndAlpha(c);
         if (o.tr || c.toLowerCase() === 'transparent') return 'transparent';
         if (o.a < 1) return `rgba(${o.r},${o.g},${o.b},${o.a})`;
-        else if (c.startsWith('#')) return c;
-        else if (c.startsWith('rgb')) return `rgb(${o.r},${o.g},${o.b})`;
-        else return c;
+        if (c.startsWith('#')) return c;
+        if (c.startsWith('rgb')) return `rgb(${o.r},${o.g},${o.b})`;
+        return c;
     }
 
-    // ---------- 创建颜色部件 ----------
     function createColorWidget(ct, fr, to) {
         const w = document.createElement('span'), s = document.createElement('span'), t = document.createElement('span');
-        w.className = 'cm-color-widget', w.style.display = 'inline-flex', w.style.alignItems = 'center'; w.style.margin = '0 2px',
-            w.style.padding = '2px 4px', w.style.borderRadius = '3px', w.style.backgroundColor = 'rgba(0,0,0,0.1)';
+        w.className = 'cm-color-widget';
+        w.style.display = 'inline-flex';
+        w.style.alignItems = 'center';
+        w.style.margin = '0 2px';
+        w.style.padding = '2px 4px';
+        w.style.borderRadius = '3px';
+        w.style.backgroundColor = 'rgba(0,0,0,0.1)';
 
         const bg = getColorForSwatch(ct);
-        s.className = 'cm-color-swatch', s.style.backgroundColor = bg, s.title = '点击修改颜色', s.style.display = 'inline-block',
-            s.style.width = '16px', s.style.height = '16px', s.style.borderRadius = '3px', s.style.marginRight = '6px',
-            s.style.border = bg === 'transparent' ? '1px dashed #999' : '1px solid rgba(255,255,255,1)';
-        s.style.cursor = 'pointer', s.style.flexShrink = '0';
+        s.className = 'cm-color-swatch';
+        s.style.backgroundColor = bg;
+        s.title = '点击修改颜色';
+        s.style.display = 'inline-block';
+        s.style.width = '16px';
+        s.style.height = '16px';
+        s.style.borderRadius = '3px';
+        s.style.marginRight = '6px';
+        s.style.border = bg === 'transparent' ? '1px dashed #999' : '1px solid rgba(255,255,255,1)';
+        s.style.cursor = 'pointer';
+        s.style.flexShrink = '0';
+
+        t.className = 'cm-color-text';
+        t.textContent = ct;
+        t.style.color = '#f8f8f2';
+        t.style.fontSize = '13px';
+        t.style.userSelect = 'text';
+        t.style.cursor = 'text';
+        t.style.marginRight = '8px';
+        w.append(s, t);
 
-        t.className = 'cm-color-text', t.textContent = ct, t.style.color = '#f8f8f2', t.style.fontSize = '13px';
-        t.style.userSelect = 'text', t.style.cursor = 'text', t.style.marginRight = '8px', w.append(s, t);
-
-        // 透明度滑块
         const o = extractColorAndAlpha(ct), as = document.createElement('input'), av = document.createElement('span');
-        if (as) {
-            as.type = 'range', as.min = 0, as.max = 100, as.value = Math.round(o.a * 100), as.style.width = '120px',
-                as.style.marginRight = '8px', as.title = '调整透明度 (0-100%)', as.className = 'cm-alpha-slider';
-            av.className = 'cm-alpha-value', av.textContent = `${Math.round(o.a * 100)}%`, av.style.fontSize = '12px',
-                av.style.color = '#ccc', av.style.minWidth = '30px', av.style.textAlign = 'center';
-
-            // 根据透明度计算新颜色（供 input/change 复用）
-            const getUpdatedColor = (alpha) => {
-                const na = alpha / 100;
-                let nc = ct;
-                const lc = ct.toLowerCase();
-                if (lc === 'transparent') nc = `rgba(0,0,0,${na})`;
-                if (COLOR_KEYWORDS[lc]) {
-                    const h = COLOR_KEYWORDS[lc], hr = parseInt(h.slice(1, 3), 16), hg = parseInt(h.slice(3, 5), 16),
-                        hb = parseInt(h.slice(5, 7), 16);
-                    nc = `rgba(${hr},${hg},${hb},${na})`;
-                } else if (ct.includes('rgba') || ct.includes('hsla')) {
-                    if (ct.includes('rgba')) nc = ct.replace(RGB_EXTRACT, `rgba($1,$2,$3,${na})`);
-                    else nc = ct.replace(/hsla?\((\d+,\s*\d+%,\s*\d+%)(?:,\s*[\d.]+)?\)/i, `hsla($1,${na})`);
-                } else if (ct.startsWith('rgb(')) nc = ct.replace('rgb(', `rgba(`).replace(')', `,${na})`);
-                else if (ct.startsWith('hsl(')) nc = ct.replace('hsl(', `hsla(`).replace(')', `,${na})`);
-                else if (ct.startsWith('#')) {
-                    let h = ct.slice(1), hr, hg, hb;
-                    if (h.length === 3)
-                        hr = parseInt(h[0] + h[0], 16), hg = parseInt(h[1] + h[1], 16), hb = parseInt(h[2] + h[2], 16);
-                    else if (h.length === 6)
-                        hr = parseInt(h.slice(0, 2), 16), hg = parseInt(h.slice(2, 4), 16), hb = parseInt(h.slice(4, 6), 16);
-                    else hr = 128, hg = 128, hb = 128;
-                    nc = `rgba(${hr},${hg},${hb},${na})`;
-                }
-                return nc;
-            };
-
-            // 实时更新 UI（色块、文本、百分比），但不修改文档
-            as.addEventListener('input', function () {
-                const na = this.value / 100;
-                av.textContent = `${this.value}%`;
-                const nc = getUpdatedColor(this.value);
-                s.style.backgroundColor = getColorForSwatch(nc);
-            });
-
-            // 滑块松开或失去焦点时，一次性更新文档
-            as.addEventListener('change', function () {
-                const nc = getUpdatedColor(this.value);
-                cm.replaceRange(nc, fr, to), updateColorWidgets(cm);
-            });
+        as.type = 'range';
+        as.min = 0;
+        as.max = 100;
+        as.value = Math.round(o.a * 100);
+        as.style.width = '120px';
+        as.style.marginRight = '8px';
+        as.title = '调整透明度 (0-100%)';
+        as.className = 'cm-alpha-slider';
+        av.className = 'cm-alpha-value';
+        av.textContent = `${Math.round(o.a * 100)}%`;
+        av.style.fontSize = '12px';
+        av.style.color = '#ccc';
+        av.style.minWidth = '30px';
+        av.style.textAlign = 'center';
+
+        const originalColor = ct, { a: originalAlpha } = extractColorAndAlpha(originalColor);
+        // 根据原始颜色和新透明度生成颜色字符串（仅供预览和生成新颜色）
+        function makeColorFromAlpha(alphaPercent) {
+            const newAlpha = alphaPercent / 100, lc = originalColor.toLowerCase();
+            if (lc === 'transparent') return `rgba(0,0,0,${newAlpha})`;
+            if (COLOR_KEYWORDS[lc]) {
+                const hex = COLOR_KEYWORDS[lc], r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16),
+                    b = parseInt(hex.slice(5, 7), 16);
+                return `rgba(${r},${g},${b},${newAlpha})`;
+            }
+            if (originalColor.includes('rgba') || originalColor.includes('hsla')) {
+                if (originalColor.includes('rgba')) return originalColor.replace(RGB_EXTRACT, `rgba($1,$2,$3,${newAlpha})`);
+                else return originalColor.replace(/hsla?\((\d+,\s*\d+%,\s*\d+%)(?:,\s*[\d.]+)?\)/i, `hsla($1,${newAlpha})`);
+            }
+            if (originalColor.startsWith('rgb(')) return originalColor.replace('rgb(', 'rgba(').replace(')', `,${newAlpha})`);
+            if (originalColor.startsWith('hsl(')) return originalColor.replace('hsl(', 'hsla(').replace(')', `,${newAlpha})`);
+            if (originalColor.startsWith('#')) {
+                let hex = originalColor.slice(1);
+                let r, g, b;
+                if (hex.length === 3)
+                    r = parseInt(hex[0] + hex[0], 16), g = parseInt(hex[1] + hex[1], 16), b = parseInt(hex[2] + hex[2], 16);
+                else if (hex.length === 6)
+                    r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16);
+                else r = g = b = 128;
+
+                return `rgba(${r},${g},${b},${newAlpha})`;
+            }
+            return originalColor;
+        }
 
-            // 阻止滑块上的鼠标/触摸事件冒泡，使滑块可拖动
-            as.addEventListener('mousedown', e => e.stopPropagation());
-            as.addEventListener('touchstart', e => e.stopPropagation(), { passive: true });
+        as.addEventListener('input', function () {
+            av.textContent = `${this.value}%`;
+            const previewColor = makeColorFromAlpha(this.value);
+            s.style.backgroundColor = getColorForSwatch(previewColor);
+        });
 
-            w.append(as, av);
-        }
+        as.addEventListener('change', function () {
+            const mark = w._colorMark;
+            if (!mark) return;
+            const pos = mark.find();
+            if (!pos) return;
+            const currentPercent = Number(this.value);
+            let newColor;
+            if (Math.abs(currentPercent - originalAlpha * 100) < 0.1) newColor = originalColor;
+            else newColor = makeColorFromAlpha(currentPercent);
+
+            cm.replaceRange(newColor, pos.from, pos.to);
+            setTimeout(() => updateColorWidgets(cm), 10);
+        });
+        as.addEventListener('mousedown', e => e.stopPropagation());
+        as.addEventListener('touchstart', e => e.stopPropagation(), { passive: true });
+        w.append(as, av);
 
-        // 色块点击事件
         s.addEventListener('click', e => {
             e.stopPropagation();
             const r = s.getBoundingClientRect(), cc = extractColorAndAlpha(ct), ch = rgbToHex(cc.r, cc.g, cc.b);
-            globalColorPicker.style.left = `${r.left}px`, globalColorPicker.style.top = `${r.bottom + 5}px`;
+            globalColorPicker.style.left = `${r.left}px`;
+            globalColorPicker.style.top = `${r.bottom + 5}px`;
             globalColorPicker.value = ch;
-
             if (globalColorPicker._ch) globalColorPicker.removeEventListener('change', globalColorPicker._ch);
-            const chf = function () {
+            const chf = () => {
                 const nh = this.value, na = as ? as.value / 100 : cc.a, hr = parseInt(nh.slice(1, 3), 16),
-                    hg = parseInt(nh.slice(3, 5), 16), hb = parseInt(nh.slice(5, 7), 16);
+                    hg = parseInt(nh.slice(3, 5), 16), hb = parseInt(nh.slice(5, 7), 16), nhu = nh.toUpperCase(),
+                    kw = Object.keys(COLOR_KEYWORDS).find(k => COLOR_KEYWORDS[k].toUpperCase() === nhu);
+
                 let nc = na < 1 ? `rgba(${hr},${hg},${hb},${na})` : nh;
-                const nhu = nh.toUpperCase(), kw = Object.keys(COLOR_KEYWORDS).find(k => COLOR_KEYWORDS[k].toUpperCase() === nhu);
                 if (kw && na >= 1) nc = kw;
                 cm.replaceRange(nc, fr, to), updateColorWidgets(cm), t.textContent = nc;
                 s.style.backgroundColor = getColorForSwatch(nc);
+
                 if (av) av.textContent = `${Math.round(na * 100)}%`;
                 to = { line: to.line, ch: fr.ch + nc.length };
-                this.removeEventListener('change', chf), globalColorPicker._ch = null;
+                this.removeEventListener('change', chf);
+                globalColorPicker._ch = null;
             };
-            globalColorPicker._ch = chf, globalColorPicker.addEventListener('change', chf), globalColorPicker.getBoundingClientRect();
+            globalColorPicker._ch = chf;
+            globalColorPicker.addEventListener('change', chf);
             if (typeof globalColorPicker.showPicker === 'function') globalColorPicker.showPicker();
             else globalColorPicker.click();
         });
-
         return w;
     }
 
-    // ---------- 扫描编辑器添加部件 ----------
     function updateColorWidgets(cm) {
-        isEditingColor = false, editColorRange = null; // 退出编辑模式
-
+        isEditingColor = false, editColorRange = null;
         cm.getAllMarks().forEach(m => { if (m.isColorWidget) m.clear(); });
         const d = cm.getDoc(), lc = d.lineCount();
         for (let i = 0; i < lc; i++) {
-            const l = d.getLine(i); let m;
+            const l = d.getLine(i);
+            let m;
             COLOR_REGEX.lastIndex = 0;
             while ((m = COLOR_REGEX.exec(l)) !== null) {
                 const s = m.index, e = s + m[0].length, fr = { line: i, ch: s }, to = { line: i, ch: e };
                 if (d.findMarksAt(fr).some(x => x.replacedWith)) continue;
-
                 const w = createColorWidget(m[0], fr, to),
                     mark = cm.markText(fr, to, {
                         replacedWith: w, inclusiveLeft: false, inclusiveRight: false, clearOnEnter: true
                     });
                 mark.isColorWidget = true, w._colorMark = mark;
-
-                // 为颜色值文本添加双击事件
                 const textSpan = w.querySelector('.cm-color-text');
                 if (textSpan) {
                     textSpan.title = '双击编辑颜色值';
-                    textSpan.addEventListener('dblclick', (e) => {
+                    textSpan.addEventListener('dblclick', e => {
                         e.stopPropagation();
                         const widget = e.target.closest('.cm-color-widget');
                         if (!widget) return;
@@ -263,7 +291,6 @@ function scriptFun() {
                         if (mark) {
                             const pos = mark.find();
                             if (pos) {
-                                // 记录当前正在编辑的颜色值范围
                                 isEditingColor = true;
                                 editColorRange = {
                                     from: { line: pos.from.line, ch: pos.from.ch },
@@ -279,92 +306,128 @@ function scriptFun() {
     }
 
     updateColorWidgets(cm);
-
-    // 编辑期间不自动重建部件，但允许手动触发重建
     cm.on('change', () => {
         if (isEditingColor) return;
         setTimeout(() => updateColorWidgets(cm), 10);
     });
-
-    // 监听光标活动，检测是否离开正在编辑的颜色值区域
     cm.on('cursorActivity', () => {
         if (isEditingColor && editColorRange) {
             const cursor = cm.getCursor(), range = editColorRange,
-                // 检查光标是否离开了正在编辑的颜色值范围
                 isOutsideRange = cursor.line < range.from.line || cursor.line > range.to.line ||
                     (cursor.line === range.from.line && cursor.ch < range.from.ch) ||
                     (cursor.line === range.to.line && cursor.ch > range.to.ch);
-
             if (isOutsideRange) isEditingColor = false, editColorRange = null, updateColorWidgets(cm);
         }
     });
 
-    // ============================== 预览功能 ==============================
-    function startPreview() {
-        isPreviewMode = true, preview.style.display = 'block';
-        const er = cssEditor.getBoundingClientRect();
-        preview.style.width = `${er.width}px`, preview.style.height = `${er.height}px`;
-        previewBtn.style.display = 'none', cancelPreviewBtn.style.display = 'block';
-        previewFrame.src = returnUrl, cm.on('change', updatePreviewStyles);
-    }
+    // ================= 预览控制逻辑（使用静态取消预览按钮） =================
+    let styleUpdateHandler = null;   // 编辑器 change 监听函数
 
+    // 更新预览样式
     function updatePreviewStyles() {
         if (!isPreviewMode || !previewFrame.contentWindow?.document) return;
         try {
-            const sc = cm.getValue(), id = previewFrame.contentDocument || previewFrame.contentWindow.document,
-                os = id.getElementById('dynamic-css'), s = id.createElement('style');
-            if (os) os.remove();
-            s.id = 'dynamic-css', s.textContent = sc, id.head.append(s);
-        } catch (e) { console.log('预览更新失败', e); }
+            const css = cm.getValue(), doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
+            let styleEl = doc.getElementById('dynamic-css');
+            if (!styleEl) styleEl = doc.createElement('style'), styleEl.id = 'dynamic-css', doc.head.appendChild(styleEl);
+
+            styleEl.textContent = css;
+        } catch (e) {
+            console.log('预览更新失败', e);
+        }
     }
 
-    function cancelPreview() {
-        isPreviewMode = false, preview.style.display = 'none', previewBtn.style.display = 'block';
-        cancelPreviewBtn.style.display = 'none', previewFrame.src = 'about:blank', cm.off('change', updatePreviewStyles);
+    // 开启预览模式
+    function startPreview() {
+        if (isPreviewMode) return;
+        isPreviewMode = true, preview.style.display = 'flex';
+
+        if (cancelPreviewBtn) cancelPreviewBtn.style.display = 'flex';
+        if (previewFrame.src !== returnUrl && returnUrl && returnUrl !== 'about:blank') previewFrame.src = returnUrl;
+
+        // 等待 iframe 加载完成后注入样式
+        const applyStyles = () => {
+            if (previewFrame.contentDocument) updatePreviewStyles();
+            else setTimeout(applyStyles, 50);
+        };
+        if (previewFrame.contentDocument && previewFrame.contentDocument.readyState === 'complete') updatePreviewStyles();
+        else {
+            previewFrame.addEventListener('load', function onLoad() {
+                previewFrame.removeEventListener('load', onLoad), updatePreviewStyles();
+            });
+            applyStyles();
+        }
+        if (styleUpdateHandler) cm.off('change', styleUpdateHandler);
+        styleUpdateHandler = () => { if (isPreviewMode) updatePreviewStyles(); };
+        cm.on('change', styleUpdateHandler);
     }
 
-    addTapSupport(previewBtn, startPreview), addTapSupport(cancelPreviewBtn, cancelPreview);
+    // 关闭预览模式
+    function stopPreview() {
+        if (!isPreviewMode) return;
+        isPreviewMode = false, preview.style.display = 'none';
 
-    // 获取储存样式并应用
-    getStyle(cssEditor, api), getStyle(preview, pApi);
-    modal.append(cssEditor, preview), loadCssContent(fileDir);
+        if (cancelPreviewBtn) cancelPreviewBtn.style.display = 'none';
+        if (styleUpdateHandler) cm.off('change', styleUpdateHandler), styleUpdateHandler = null;
 
-    mouseOrTouch(cssEditor, () => { cssEditor.style.zIndex = '1002', preview.style.zIndex = '1001'; }, api);
-    mouseOrTouch(preview, () => { preview.style.zIndex = '1002', cssEditor.style.zIndex = '1001'; }, pApi);
+        // 重置布局高亮和布局样式
+        const workspace = document.getElementById('workspace'),
+            layoutBtns = document.querySelectorAll('.layout-btn:not(#cancelPreviewBtn)');
 
-    addTapSupport(saveBtn, saveCSS), addTapSupport(cancelBtn, cancelEdit), addTapSupport(closeBtn, cancelEdit);
+        layoutBtns.forEach(btn => btn.classList.remove('active'));
+        if (workspace) workspace.classList.remove('single-preview'), workspace.style.flexDirection = '';
+    }
 
-    // 键盘事件
-    document.addEventListener('keydown', e => {
-        // Escape 优先处理编辑退出
-        if (e.key === 'Escape') {
-            if (isEditingColor) {
-                e.preventDefault(), isEditingColor = false, editColorRange = null, updateColorWidgets(cm);
-                return;
-            }
-            if (cssEditor.style.display === 'flex') {
-                if (isPreviewMode) cancelPreview();
-                else cancelEdit();
-            }
+    // 切换布局（不改变预览状态）
+    function setLayout(layout) {
+        const workspace = document.getElementById('workspace');
+        if (!workspace) return;
+        workspace.classList.remove('single-preview');
+        workspace.style.flexDirection = '';
+        switch (layout) {
+            case 'left': workspace.style.flexDirection = 'row-reverse'; break;
+            case 'right': workspace.style.flexDirection = 'row'; break;
+            case 'top': workspace.style.flexDirection = 'column-reverse'; break;
+            case 'bottom': workspace.style.flexDirection = 'column'; break;
+            case 'single': workspace.classList.add('single-preview'); break;
+            default: break;
         }
-        if (e.ctrlKey && e.key === 's') e.preventDefault(), saveCSS();
-        if (e.ctrlKey && e.key === 'p') e.preventDefault(), startPreview();
+        if (isPreviewMode && previewFrame.contentWindow) updatePreviewStyles();
+    }
+
+    // 为所有布局按钮绑定事件
+    const layoutBtns = document.querySelectorAll('.layout-btn:not(#cancelPreviewBtn)');
+    layoutBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const layout = btn.getAttribute('data-layout');
+            if (!layout) return;
+            layoutBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            if (!isPreviewMode) startPreview();
+            setLayout(layout);
+        });
     });
+    if (cancelPreviewBtn) cancelPreviewBtn.addEventListener('click', () => stopPreview());
 
-    // ---------- 加载CSS内容 ----------
+    // ================= 样式保存/加载/颜色等功能 =================
+    function showLoader() { if (loader) loader.style.display = 'block'; }
+    function hideLoader() { if (loader) loader.style.display = 'none'; }
+    function updateEditorTitle(fd) {
+        const te = document.querySelector('#cssEditor h2');
+        if (te) te.textContent = `编辑文件: ${fd}`;
+    }
     async function loadCssContent(fd) {
         showLoader();
         try {
             const r = await fetch(`/api/css?fileDir=${encodeURIComponent(fd)}`);
-            if (r.ok) { const ct = await r.text(); cm.setValue(ct), updateEditorTitle(fd); }
-            else throw new Error(`无法加载CSS文件:${fd}`);
-        } catch (err) { alert(`加载CSS失败:${err.message}`), updateEditorTitle(fd); }
-        finally { hideLoader(); }
-    }
-
-    function updateEditorTitle(fd) {
-        const te = document.querySelector('#cssEditor h2');
-        if (te) te.textContent = `编辑文件:${fd}`;
+            if (r.ok) {
+                const ct = await r.text();
+                cm.setValue(ct), updateEditorTitle(fd);
+            } else throw new Error(`无法加载CSS文件: ${fd}`);
+        } catch (err) {
+            alert(`加载CSS失败: ${err.message}`);
+            updateEditorTitle(fd);
+        } finally { hideLoader() }
     }
 
     async function saveCSS() {
@@ -376,17 +439,52 @@ function scriptFun() {
                 body: JSON.stringify({ fileDir, content: cm.getValue() })
             });
             if (r.ok) window.location.href = returnUrl;
-            else { const et = await r.text(); throw new Error(et || '保存失败'); }
-        } catch (err) { alert(`保存CSS失败:${err.message}`); }
-        finally { hideLoader(); }
+            else {
+                const et = await r.text();
+                throw new Error(et || '保存失败');
+            }
+        } catch (err) {
+            alert(`保存CSS失败: ${err.message}`);
+        } finally { hideLoader() }
     }
 
-    function cancelEdit() { if (confirm('确定要取消编辑吗')) window.location.href = returnUrl; }
+    function cancelEdit() {
+        if (confirm('确定要取消编辑吗')) window.location.href = returnUrl;
+    }
 
-    function showLoader() { if (loader) loader.style.display = 'block'; }
-    function hideLoader() { if (loader) loader.style.display = 'none'; }
+    addTapSupport(saveBtn, saveCSS);
+    addTapSupport(cancelBtn, cancelEdit);
+    addTapSupport(closeBtn, cancelEdit);
+
+    // 键盘快捷键
+    document.addEventListener('keydown', e => {
+        if (e.key === 'Escape') {
+            if (isEditingColor) {
+                e.preventDefault(), isEditingColor = false, editColorRange = null, updateColorWidgets(cm);
+                return;
+            }
+            isPreviewMode ? stopPreview() : cancelEdit();
+        }
+        if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveCSS(); }
+        if (e.ctrlKey && e.key === 'p') {
+            e.preventDefault();
+            if (!isPreviewMode) {
+                startPreview(), setLayout('right');
+                layoutBtns.forEach(btn => {
+                    if (btn.getAttribute('data-layout') === 'right') btn.classList.add('active');
+                    else btn.classList.remove('active');
+                });
+            }
+        }
+    });
+
+    if (fileDir) loadCssContent(fileDir);
+    else console.warn('未提供 fileDir 参数');
 }
 
-// 页面加载启动
-if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', scriptFun);
-else scriptFun();
+function waitForEditor(callback) {
+    if (window.cssEditor) callback();
+    else setTimeout(() => waitForEditor(callback), 50);
+}
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => waitForEditor(scriptFun));
+else waitForEditor(scriptFun);

package/templates/script.html

@@ -13,10 +13,22 @@
 [~style]
 
 [!my] [~my]
-[!header][~header]
+[!header]
+<!-- 布局工具栏 -->
+<div class="layout-toolbar">
+	<button data-layout="left" class="layout-btn" type="button">◀ 左边预览</button>
+	<button data-layout="right" class="layout-btn" type="button">右边预览 ▶</button>
+	<button data-layout="top" class="layout-btn" type="button">▲ 上边预览</button>
+	<button data-layout="bottom" class="layout-btn" type="button">下边预览 ▼</button>
+	<button data-layout="single" class="layout-btn" type="button">📺 单页预览</button>
+	<button id="cancelPreviewBtn" class="layout-btn" type="button">✖ 取消预览</button>
+</div>
+[~header]
+
 [!content]
-<!-- CSS编辑器模态框 <label for="code">代码编辑区：</label> -->
-<div class="modal">
+<!-- 主工作区 -->
+<div id="workspace" class="workspace">
+	<!-- 编辑器面板 -->
 	<div id="cssEditor">
 		<div class="header">
 			<h2>编辑CSS样式</h2>
@@ -27,17 +39,20 @@
 		</h3>
 		<textarea id="cssContent" placeholder="CSS内容将在这里显示..." spellcheck="false"></textarea>
 		<div class="actions">
-			<button id="previewBtn" type="button">预览</button>
-			<button id="cancelPreviewBtn" type="button">取消预览</button>
+			<!-- 只保留保存和取消按钮，预览按钮已移除 -->
 			<button id="saveBtn" type="button">保存并应用</button>
 			<button id="cancelBtn" type="button">取消</button>
 		</div>
 	</div>
-</div>
 
-<!-- 预览容器 -->
-<div id="preview" class="preview-container">
-	<iframe id="previewFrame" title="预览页面"></iframe>
+	<!-- 预览容器 -->
+	<div id="preview" class="preview-container">
+		<div class="preview-header">
+			<span>预览页面</span>
+			<span id="previewUrlHint"></span>
+		</div>
+		<iframe id="previewFrame" title="预览页面"></iframe>
+	</div>
 </div>
 
 <!-- 加载指示器 -->
@@ -62,7 +77,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/brace-fold.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/comment-fold.min.js"></script>
 
-<!-- 语法检查依赖：CodeMirror lint 核心 + CSSTree -->
+<!-- 语法检查依赖 -->
 <script src="/static/utils/css-lint.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/lint/lint.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/css-tree@3.1.0/dist/csstree.min.js"></script>
@@ -77,9 +92,8 @@
 <script src="/static/utils/match-highlighter.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/selection/active-line.min.js"></script>
 
-<!-- 库插件样式自定义 -->
 <style>
-	/* 增大折叠按钮 */
+	/* 折叠按钮增大 */
 	#cssEditor .CodeMirror .CodeMirror-foldgutter-open,
 	#cssEditor .CodeMirror .CodeMirror-foldgutter-folded,
 	#cssEditor .CodeMirror .CodeMirror-foldgutter-open::after,
@@ -87,17 +101,16 @@
 		font-size: 25px;
 	}
 
-	/* 增加折叠 gutter 的宽度,避免按钮显示不全 */
 	#cssEditor .CodeMirror .CodeMirror-foldgutter {
 		width: 26px;
 	}
 
-	/* 强制 tooltip 显示的样式 */
+	/* ========== CodeMirror 扩展样式（提示、校验等） ========== */
 	.CodeMirror-lint-tooltip {
 		z-index: 10000;
 		background-color: #ffd;
 		border: 1px solid #000;
-		color: #000;
+		color: var(--text-color);
 		font-family: monospace;
 		font-size: 12px;
 		padding: 6px 10px;
@@ -105,10 +118,8 @@
 		word-wrap: break-word;
 		white-space: pre-wrap;
 		line-height: 1.5;
-		transition: none;
 	}
 
-	/* 自动补全列表样式 */
 	.CodeMirror-hints {
 		background-color: #282a36;
 		border: 1px solid #6272a4;
@@ -122,7 +133,7 @@
 	}
 
 	.CodeMirror-hint {
-		color: #f8f8f2;
+		color: var(--text-color);
 		padding: 4px 8px;
 		cursor: pointer;
 		white-space: pre;
@@ -139,26 +150,26 @@
 		color: #f8f8f2;
 	}
 
-	/* 匹配括号高亮 */
 	.CodeMirror-matchingbracket {
 		background-color: rgba(124, 136, 126, 1) !important;
 		font-weight: bold;
 		text-decoration: none !important;
 	}
 
-	/* 自定义高亮 */
 	.custom-highlight {
 		background-color: rgba(255, 255, 0, 0.3) !important;
 	}
+
+	.CodeMirror-linenumber {
+		text-align: right !important;
+	}
 </style>
 
 <script>
-	// 等待 DOM 加载完成后初始化编辑器
 	(function () {
 		function initEditor() {
 			const textarea = document.getElementById('cssContent');
 			if (!textarea) return;
-
 			window.cssEditor = CodeMirror.fromTextArea(textarea, {
 				lineNumbers: true,
 				mode: 'css',
@@ -169,41 +180,27 @@
 				matchBrackets: true,
 				foldGutter: true,
 				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
-				lint: {
-					getAnnotations: window.customCssLint,
-					async: true
-				},
+				lint: { getAnnotations: window.customCssLint, async: true },
 				styleActiveLine: true,
-				hintOptions: {
-					completeSingle: false,   // 即使只有一个匹配也显示列表
-					closeOnUnfocus: false
-				}
+				hintOptions: { completeSingle: false, closeOnUnfocus: false }
 			});
-
 			window.cssEditor.setSize('100%', '100%');
-
-			// ----- 输入时自动弹出补全 -----
 			window.cssEditor.on("inputRead", (cm, change) => {
-				// 如果输入内容包含冒号，立即触发补全（优先响应）
 				if (change.text.join('').includes(':')) {
 					clearTimeout(cm.autocompletionTimeout);
 					cm.autocompletionTimeout = setTimeout(() => cm.showHint({ completeSingle: false }), 0);
 					return;
 				}
-				// 其他输入（字母、数字、删除等）延迟触发
 				clearTimeout(cm.autocompletionTimeout);
 				cm.autocompletionTimeout = setTimeout(() => cm.showHint({ completeSingle: false }), 150);
 			});
-
-			attachCustomHighlight(window.cssEditor); // 高亮匹配选中词(自定义)
+			attachCustomHighlight(window.cssEditor);
 			setTimeout(() => window.cssEditor.performLint(), 100);
 		}
-
 		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initEditor);
 		else initEditor();
 	})();
 </script>
 
-<!-- 本地文件 -->
 <script src="/static/script.js"></script>
 [~script]