diff --git a/static/js/my-editor.js b/static/js/my-editor.js index c146ae7..083d700 100644 --- a/static/js/my-editor.js +++ b/static/js/my-editor.js @@ -734,20 +734,153 @@ "File Upload": "檔案上傳", "Date Input": "日期輸入框", "Password Input": "密碼輸入框", - "Email Input": "Email 輸入框" + "Email Input": "Email 輸入框", + + // 屬性面板 - 標題與一般屬性 + "General": "一般", + "Id": "ID", + "Title": "標題 (Title)", + "Class": "類別 (Class)", + "Display": "顯示 (Display)", + "Position": "定位 (Position)", + "Top": "上", + "Left": "左", + "Bottom": "下", + "Right": "右", + "Float": "浮動 (Float)", + "Opacity": "透明度 (Opacity)", + "Background": "背景 (Background)", + "Background Color": "背景顏色", + "Text Color": "文字顏色", + "Color": "顏色", + + // 排版與字體 + "Font size": "字體大小", + "Font weight": "字體粗細", + "Font family": "字體家族", + "Text align": "文字對齊", + "Line height": "行高", + "Letter spacing": "字距", + "Text decoration": "文字裝飾", + "Decoration Color": "裝飾顏色", + "Decoration style": "裝飾樣式", + + // 尺寸與間距 + "Size": "尺寸", + "Width": "寬度", + "Height": "高度", + "Min Width": "最小寬度", + "Min Height": "最小高度", + "Max Width": "最大寬度", + "Max Height": "最大高度", + "Margin": "外邊距 (Margin)", + "Padding": "內邊距 (Padding)", + + // 邊框與陰影 + "Border": "邊框 (Border)", + "Style": "樣式", + "Radius": "圓角 (Radius)", + "Radius Top Left": "左上圓角", + "Radius Top Right": "右上圓角", + "Radius Bottom Left": "左下圓角", + "Radius Bottom Right": "右下圓角", + "Background Image": "背景圖片", + "Box Shadow": "盒子陰影", + "Text Shadow": "文字陰影", + "Filter": "濾鏡", + "Transform": "變形", + "Transition": "過渡效果", + + // 選項值 + "Default": "預設", + "Primary": "主要 (Primary)", + "Secondary": "次要 (Secondary)", + "Success": "成功 (Success)", + "Danger": "危險 (Danger)", + "Warning": "警告 (Warning)", + "Info": "資訊 (Info)", + "Light": "亮色 (Light)", + "Dark": "暗色 (Dark)", + "White": "白色", + "Block": "區塊 (Block)", + "Inline": "行內 (Inline)", + "Inline Block": "行內區塊 (Inline Block)", + "Flex": "彈性 (Flex)", + "Inline Flex": "行內彈性 (Inline Flex)", + "Grid": "網格 (Grid)", + "Static": "靜態 (Static)", + "Fixed": "固定 (Fixed)", + "Relative": "相對 (Relative)", + "Absolute": "絕對 (Absolute)", + + // 裝置響應式顯示 + "Hide based on device screen width": "依裝置螢幕寬度隱藏", + "Extra small devices": "超小螢幕 (xs)", + "Small devices": "小螢幕 (sm)", + "Medium devices": "中螢幕 (md)", + "Large devices": "大螢幕 (lg)", + "Xl devices": "超大螢幕 (xl)", + "Xxl devices": "超超大螢幕 (xxl)", + + // AOS 動畫 + "Animate on scroll": "滾動動畫 (AOS)", + "Animation type": "動畫類型", + "Duration": "持續時間", + "Delay": "延遲", + "Play animation": "播放動畫", + "[none]": "[無]", + "Fade animations": "淡入淡出動畫", + "Fade": "淡入", + "Fade Up": "向上淡入", + "Fade down": "向下淡入", + "Fade left": "向左淡入", + "Fade right": "向右淡入", + "Fade up right": "向右上淡入", + "Fade up left": "向左上淡入", + "Fade down right": "向右下淡入", + "Fade down left": "向左下淡入", + "Flip animations": "翻轉動畫", + "Flip Up": "向上翻轉", + "Flip Down": "向下翻轉", + "Flip left": "向左翻轉", + "Flip right": "向右翻轉", + "Slide animations": "滑動動畫", + "Slide up": "向上滑動", + "Slide down": "向下滑動", + "Slide left": "向左滑動", + "Slide right": "向右滑動", + "Zoom animations": "縮放動畫", + "Zoom in": "放大", + "Zoom in up": "向上放大", + "Zoom in down": "向下放大", + "Zoom in left": "向左放大", + "Zoom in right": "向右放大", + "Zoom out": "縮小", + "Zoom out up": "向上縮小", + "Zoom out down": "向下縮小", + "Zoom out left": "向左縮小", + "Zoom out right": "向右縮小", + + // 連結樣式提示 + "Linked styles": "共用樣式提示" + }; + + const translateText = (text) => { + if (!text || typeof text !== "string") return text; + const trimmed = text.trim(); + return translateMap[trimmed] ? translateMap[trimmed] : text; }; // 1. 翻譯 Vvveb 物件內的資料 (供重新渲染時使用) if (Vvveb.ComponentsGroup) { const newGroups = {}; for (let group in Vvveb.ComponentsGroup) { - let tGroup = translateMap[group] || group; + let tGroup = translateText(group); newGroups[tGroup] = Vvveb.ComponentsGroup[group]; - newGroups[tGroup].forEach(compName => { let comp = Vvveb.Components.get(compName); if (comp && comp.name) { - comp.name = translateMap[comp.name] || comp.name; + comp.name = translateText(comp.name); } }); } @@ -757,13 +890,36 @@ if (Vvveb.BlocksGroup) { const newBlockGroups = {}; for (let group in Vvveb.BlocksGroup) { - let tGroup = translateMap[group] || group; + let tGroup = translateText(group); newBlockGroups[tGroup] = Vvveb.BlocksGroup[group]; } Vvveb.BlocksGroup = newBlockGroups; } - // 2. 直接修改當前已渲染的 DOM 文字 + // 2. 翻譯所有元件的屬性面板 (Style, Advanced, etc) + if (Vvveb.Components && Vvveb.Components._components) { + Object.keys(Vvveb.Components._components).forEach(key => { + let comp = Vvveb.Components._components[key]; + if (comp.properties) { + comp.properties.forEach(prop => { + if (prop.name) prop.name = translateText(prop.name); + if (prop.data) { + if (prop.data.header) prop.data.header = translateText(prop.data.header); + if (prop.data.text) prop.data.text = translateText(prop.data.text); + if (prop.data.options && Array.isArray(prop.data.options)) { + prop.data.options.forEach(opt => { + if (opt.text) opt.text = translateText(opt.text); + if (opt.title) opt.title = translateText(opt.title); + if (opt.optgroup) opt.optgroup = translateText(opt.optgroup); + }); + } + } + }); + } + }); + } + + // 3. 直接修改當前已渲染的 DOM 文字 document.querySelectorAll(".components-list .header span, .blocks-list .header span, .sections-list .header span").forEach(el => { const txt = el.textContent.trim(); if (translateMap[txt]) { diff --git a/websites/my-website/my-page2.html b/websites/my-website/my-page2.html new file mode 100644 index 0000000..8821b1c --- /dev/null +++ b/websites/my-website/my-page2.html @@ -0,0 +1,33 @@ + + + + + + + + My page + + + + + + + + + +
+
+
+

Bootstrap 5 start page

+

Start by dragging components to page or double click to edit text

+
+
+
+ +