From 4482882d51af9aca6407988d0f8e8bcf8236eeb8 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Mon, 19 Jan 2026 11:20:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoHtml/flex/index.html  |  25 +++------
 demoHtml/flex/js/i18n.js  |   2 +
 demoHtml/flex/js/index.js | 108 ++++++++++++++++++++++++++++++++++----
 demoHtml/flex/js/list.js  |   2 +-
 demoHtml/flex/js/utils.js |   4 +-
 5 files changed, 112 insertions(+), 29 deletions(-)

diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html
index e59e93b..6a81f1b 100644
--- a/demoHtml/flex/index.html
+++ b/demoHtml/flex/index.html
@@ -125,11 +125,9 @@
                             </button>
                             <div class="form-item">
                                 <label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label>
-                                <input
-                                    type="text"
-                                    id="childrenType"
-                                    placeholder="{{= i18n.$t('user.please_input') }}"
-                                />
+                                <select id="childrenType">
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
+                                </select>
                             </div>
                             <div class="form-item">
                                 <label for="name">{{= i18n.$t('user.component_name') }}</label>
@@ -143,11 +141,6 @@
                                 <label for="image">{{= i18n.$t('user.background_image') }}</label>
                                 <select id="image">
                                     <option value="">{{= i18n.$t('user.please_select') }}</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png">movie</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png">图片一</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/3.jpg">图片三</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/4.jpg">图片四</option>
                                 </select>
                             </div>
                             <div class="form-item">
@@ -192,18 +185,16 @@
                             </div>
                             <div class="form-item">
                                 <label for="eventsAction">{{= i18n.$t('user.events_action') }}</label>
-                                <input
-                                    type="text"
-                                    id="eventsAction"
-                                    placeholder="{{= i18n.$t('user.please_input') }}"
-                                />
+                                <select id="eventsAction">
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
+                                </select>
                             </div>
                             <div class="form-item">
                                 <label for="defaultFocus">{{= i18n.$t('user.default_focus') }}</label>
                                 <select id="defaultFocus">
                                     <option value="">{{= i18n.$t('user.please_select') }}</option>
-                                    <option value="true">{{= i18n.$t('user.yes') }}</option>
-                                    <option value="false">{{= i18n.$t('user.no') }}</option>
+                                    <option value="1">{{= i18n.$t('user.yes') }}</option>
+                                    <option value="0">{{= i18n.$t('user.no') }}</option>
                                 </select>
                             </div>
                             <div class="form-item">
diff --git a/demoHtml/flex/js/i18n.js b/demoHtml/flex/js/i18n.js
index b9bee9c..df927f4 100644
--- a/demoHtml/flex/js/i18n.js
+++ b/demoHtml/flex/js/i18n.js
@@ -44,6 +44,7 @@ var userLangConfig = {
             focused_border_color: '获得焦点时边框颜色',
             focused_scale: '获得焦点时边框缩放大小',
             copy_component: '复制组件',
+            default_focus_tip: '默认聚焦只能存在一个',
         },
         list: {
             update_time: '更新时间',
@@ -103,6 +104,7 @@ var userLangConfig = {
             focused_border_color: 'focused border color',
             focused_scale: 'focused border scale',
             copy_component: 'copy component',
+            default_focus_tip: 'default focus only one',
         },
         list: {
             update_time: 'update time',
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index 6e9b7e0..f604f5d 100644
--- a/demoHtml/flex/js/index.js
+++ b/demoHtml/flex/js/index.js
@@ -28,7 +28,7 @@
                 image: '',
                 eventsType: 'click',
                 eventsAction: '',
-                defaultFocus: false,
+                defaultFocus: '0',
                 leftId: '',
                 rightId: '',
                 upId: '',
@@ -51,7 +51,7 @@
                 fontWeight: 'normal',
                 eventsType: 'click',
                 eventsAction: '',
-                defaultFocus: false,
+                defaultFocus: '0',
                 leftId: '',
                 rightId: '',
                 upId: '',
@@ -453,6 +453,18 @@
             if (!value) return;
             el.find('span').css('font-weight', value);
         },
+        defaultFocus: function (el, value, component) {
+            if (value != '1') {
+                return;
+            }
+            // 默认聚焦一个画布只能存在一个true
+            let childrens = currentScreen === 'welcome' ? welcome.grid.engine.nodes : main.grid.engine.nodes;
+            childrens.forEach((item) => {
+                if (item.id !== component.id) {
+                    item.defaultFocus = '0';
+                }
+            });
+        },
         focusedStyle_background: function (el, value, component) {
             initColorPicker('focusedStyle_background', component);
             if (!value) return;
@@ -499,7 +511,7 @@
     // 定义映射关系：元素ID -> 事件类型 -> 组件属性
     const elementMappings = {
         name: { event: 'blur', property: 'name' },
-        childrenType: { event: 'blur', property: 'childrenType' },
+        childrenType: { event: 'change', property: 'childrenType' },
         background: { event: 'blur', property: 'background' },
         image: { event: 'change', property: 'image' },
         fontSize: { event: 'blur', property: 'fontSize' },
@@ -507,7 +519,7 @@
         text: { event: 'blur', property: 'text' },
         fontWeight: { event: 'blur', property: 'fontWeight' },
         eventsType: { event: 'change', property: 'eventsType' },
-        eventsAction: { event: 'blur', property: 'eventsAction' },
+        eventsAction: { event: 'change', property: 'eventsAction' },
         defaultFocus: { event: 'change', property: 'defaultFocus' },
         leftId: { event: 'change', property: 'leftId' },
         rightId: { event: 'change', property: 'rightId' },
@@ -570,6 +582,24 @@
         });
     };
 
+    // 抽取校验函数
+    function validateDefaultFocus(children) {
+        const { default_focus_tip } = userLangConfig[locale].user;
+        if (children.length) {
+            let hasDefaultFocus = false;
+            children.forEach((item) => {
+                if (item.defaultFocus == '1') {
+                    hasDefaultFocus = true;
+                }
+            });
+            if (!hasDefaultFocus) {
+                layer.msg(`${default_focus_tip}`);
+                return false;
+            }
+        }
+        return true;
+    }
+
     // 保存时判断是否满足条件可保存
     var canSave = function () {
         const { please_input, template_name } = userLangConfig[locale].user;
@@ -577,6 +607,16 @@
             layer.msg(`${please_input}${template_name}`);
             return false;
         }
+
+        const welcomeChildrens = welcome.grid.save();
+        const mainChildrens = main.grid.save();
+        if (!validateDefaultFocus(welcomeChildrens)) {
+            return false;
+        }
+        if (!validateDefaultFocus(mainChildrens)) {
+            return false;
+        }
+
         return true;
     };
 
@@ -630,7 +670,7 @@
                 background: currentComponent.background,
                 eventsType: currentComponent.eventsType,
                 eventsAction: currentComponent.eventsAction,
-                defaultFocus: false,
+                defaultFocus: '0',
                 leftId: currentComponent.leftId,
                 rightId: currentComponent.rightId,
                 upId: currentComponent.upId,
@@ -706,6 +746,7 @@
                 item.hCopy = item.h;
                 item.h = item.h * cellHeight * 2;
                 item.fontSize = item.fontSize ? parseInt(item.fontSize) : item.fontSize;
+                item.defaultFocus = item.defaultFocus == '1' ? true : false;
 
                 // 调用辅助函数处理带下划线的数据
                 Object.assign(item, transformUnderscoreData(item)); // 将转换后的属性合并回item
@@ -719,13 +760,14 @@
                 item.y = item.yCopy;
                 item.w = item.wCopy;
                 item.h = item.hCopy;
+                item.defaultFocus = item.defaultFocus == true ? '1' : '0';
             });
         }
     };
 
     var i18n = function () {
         return new Promise((resolve) => {
-            requestFN({ url: 'getLanguage', hasPreFix: false }, function (data) {
+            requestFN({ url: '/getLanguage', hasPreFix: false }, function (data) {
                 data.language = 'zh_CN';
                 locale = data.language;
                 // 设置语言
@@ -747,15 +789,63 @@
     };
 
     var getImageData = function () {
-        requestFN({ url: 'listResourceByType', data: { type: 'image' } }, function () {});
+        requestFN({ url: 'listResourceByType', data: { type: 'image' } }, function (data) {
+            let el = $('#image');
+            let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
+            data.map((item) => {
+                componentsHtml.push({ value: api.baseUrl + item.path, text: `${item.name}` });
+            });
+            el.empty();
+            componentsHtml.forEach((item) => {
+                el.append(
+                    $('<option>', {
+                        value: item.value,
+                        text: item.text,
+                        selected: item.selected || false,
+                    })
+                );
+            });
+        });
     };
 
     var getMenuData = function () {
-        requestFN({ url: 'listResourceByType', data: { type: 'menu' } }, function () {});
+        requestFN({ url: 'listResourceByType', data: { type: 'menu' } }, function (data) {
+            let el = $('#eventsAction');
+            let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
+            data.map((item) => {
+                componentsHtml.push({ value: item.name, text: `${item.name}` });
+            });
+            el.empty();
+            componentsHtml.forEach((item) => {
+                el.append(
+                    $('<option>', {
+                        value: item.value,
+                        text: item.text,
+                        selected: item.selected || false,
+                    })
+                );
+            });
+        });
     };
 
     var getComponentData = function () {
-        requestFN({ url: 'listResourceByType', data: { type: 'component' } }, function () {});
+        requestFN({ url: 'listResourceByType', data: { type: 'component' } }, function (data) {
+            let el = $('#childrenType');
+            let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
+            data.map((item) => {
+                componentsHtml.push({ value: item.name, text: `${item.name}` });
+            });
+            el.empty();
+            componentsHtml.forEach((item) => {
+                el.append(
+                    $('<option>', {
+                        value: item.value,
+                        text: item.text,
+                        selected: item.selected || false,
+                    })
+                );
+            });
+        });
     };
 
     // 获取单个参数
diff --git a/demoHtml/flex/js/list.js b/demoHtml/flex/js/list.js
index 1a272f9..0f31393 100644
--- a/demoHtml/flex/js/list.js
+++ b/demoHtml/flex/js/list.js
@@ -89,7 +89,7 @@
 
     var i18n = function () {
         return new Promise((resolve) => {
-            requestFN({ url: 'getLanguage', hasPreFix: false }, function (data) {
+            requestFN({ url: '/getLanguage', hasPreFix: false }, function (data) {
                 locale = data.language;
                 // 设置语言
                 layui.i18n.set({
diff --git a/demoHtml/flex/js/utils.js b/demoHtml/flex/js/utils.js
index 00adbca..b0c3990 100644
--- a/demoHtml/flex/js/utils.js
+++ b/demoHtml/flex/js/utils.js
@@ -134,8 +134,8 @@ function rgbaToHexWithValidation(rgbaStr) {
 }
 
 var api = {
-    baseUrl: 'http://www.dtviptvott.com:20018/',
-    preFix: 'template/',
+    baseUrl: 'http://www.dtviptvott.com:20018',
+    preFix: '/template/',
 };
 
 var requestFN = function ({ type = 'GET', url, data = {}, hasPreFix = true }, successCallback, errorCallback) {