From 602936271bf4132770bf5a458b8908c55285264b Mon Sep 17 00:00:00 2001
From: guofeilong <guofeilong@easycorp.ltd>
Date: Thu, 23 Feb 2023 14:03:26 +0800
Subject: [PATCH 1/4] * Code refactors in module dev/js .

---
 module/dev/css/langitem.css       | 21 ++++++------
 module/dev/js/langitem.js         | 27 +++++++++-------
 module/dev/view/langitem.html.php | 53 ++++++++++++++-----------------
 3 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/module/dev/css/langitem.css b/module/dev/css/langitem.css
index bc9dc7b982..ec628f155d 100644
--- a/module/dev/css/langitem.css
+++ b/module/dev/css/langitem.css
@@ -8,6 +8,7 @@
 .ml-20 {margin-left: 20px;}
 .title {font-size: 13px; color: #313C52; font-weight: 700; height: 40px; text-align: center;}
 .gap-15 {gap: 15px;}
+.h-full {height: 100%;}
 
 /* menu-tree */
 .menu-tree {flex: 0 0 200px; background: #fff; padding: 10px 10px;}
@@ -15,16 +16,18 @@
 li.has-list > ul > li {padding-left: 10px;}
 .tree ul {margin-bottom: 0;}
 
-/* side-left */
-.main-content > .side-left {flex: 0 0 160px; margin-left: 44px;}
-.label-list {background: #F8F8F8; padding: 5px 0;}
-.label-list > .input-label {display: flex; align-items: center; cursor: pointer; padding-left: 40px;}
 
-/* side-right */
-.main-content > .side-right {margin-left: 50px;}
-.main-content > .side-right > .input-list {padding: 5px 0;}
-.main-content > .side-right > .input-list > .input-control {position: relative;}
-.main-content > .side-right > .input-list > .input-control > i.icon {position: absolute; font-size: 25px; left: -40px; top: 3px;}
+/* title-content */
+.title-content {gap: 20px;}
+.title-content > .title {margin-left: 44px; width: 160px;}
+
+/* form-content */
+.form-item-content {padding-left: 44px;}
+.form-item-content > .form-item {gap: 20px; height: 56px; align-items: center; position: relative;}
+.form-item-content > .form-item >  .input-label {flex: 0 0 160px; padding-left: 40px; background: #F8F8F8; display: flex; align-items: center;}
+.form-item-content > .form-item >  .input-control > input {margin-left: 40px;}
+.form-item-content > .form-item.active > .icon {display: unset;}
+.form-item-content > .form-item> .icon {display: none; position: absolute; left: 180px; font-size: 25px;}
 
 /* bottom-btn */
 .bottom-btn {display: flex; align-items: center; background: #fff;padding-left: 150px; padding-bottom: 20px;}
diff --git a/module/dev/js/langitem.js b/module/dev/js/langitem.js
index 878d67287c..ba1a895a58 100644
--- a/module/dev/js/langitem.js
+++ b/module/dev/js/langitem.js
@@ -9,8 +9,7 @@ $(function()
      */
     function addActive(id)
     {
-        $('[labelid=' + id + ']').addClass('text-primary');
-        $('[iconid=' + id + ']').removeClass('hidden');
+        $('[itemid=' + id + ']').addClass('text-primary active');
     }
 
     /**
@@ -22,8 +21,7 @@ $(function()
      */
     function removeActive(id)
     {
-        $('[labelid=' + id + ']').removeClass('text-primary');
-        $('[iconid=' + id + ']').addClass('hidden');
+        $('[itemid=' + id + ']').removeClass('text-primary active');
     }
 
     /**
@@ -35,10 +33,10 @@ $(function()
      */
     function handleClickItem(clickId)
     {
-	      var clearId = $('.label-list > .text-primary').attr('labelid');
+	    var clearId = $('.form-item.active').attr('itemid');
         if(clearId !== clickId)
         {
-            if(clearId) removeActive(clearId); 
+            if(clearId) removeActive(clearId);
             if(clickId) addActive(clickId);
         };
     }
@@ -97,7 +95,6 @@ $(function()
                  }
              }
         }
-
         return children;
     }
 
@@ -127,12 +124,11 @@ $(function()
         {
             var target = $(e.target);
             if (target.attr('data-has-children') === 'true') return;
-
             self.location.href = createLink('dev', 'langItem', 'type=' + type + '&module=' + target.attr('data-module') + '&method=' + target.attr('data-method'));
         })
     }
 
-    $(".input-list").on("click", 'input', function(e)
+    $(".form-item-content").on("click", 'input', function(e)
     {
         handleClickItem(e.target.id);
     }).on("blur", 'input', function(e)
@@ -140,13 +136,22 @@ $(function()
         removeActive(e.target.id);
     });
 
-    $('.label-list > .input-label').on('click', function()
+    $('.form-item-content > .form-item > .input-label').on('click', function()
     {
         handleClickItem($(this).attr('labelid'));
     });
 
+    $(".form-item-content").on('mouseover', '.form-item', function()
+    {
+        if ($(this).hasClass('text-primary')) return;
+        $(this).addClass('text-primary');
+    }).on('mouseout', '.form-item', function()
+    {
+        $(this).removeClass('text-primary');
+    })
+
     initMenu();
     handleInputSearch();
 
-    $('li.has-list > ul').addClass("menu-active-primary menu-hover-primary")
+    $('li.has-list > ul').addClass("menu-active-primary menu-hover-primary");
 })
diff --git a/module/dev/view/langitem.html.php b/module/dev/view/langitem.html.php
index 9a73c0411a..c2ac1c2b70 100644
--- a/module/dev/view/langitem.html.php
+++ b/module/dev/view/langitem.html.php
@@ -39,45 +39,38 @@
 <?php if(in_array($type, $config->dev->navTypes)):?>
   <div class="menu-tree">
     <div class="input-control search-box has-icon-left has-icon-right search-example">
-      <input type="search" class="form-control search-input" />
+      <input type="search" class="form-control search-input"/>
       <label class="input-control-icon-left search-icon flex align-center justify-center"><i class="icon icon-search"></i></label>
     </div>
     <div id="menuTree" class="menu-active-primary menu-hover-primary"></div>
   </div>
 <?php endif;?>
+
   <form class='main-form form-ajax flex-1' method='post'>
-    <div id='mainContent' class='main-content flex'>
-      <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
-      <div class="side-left">
-        <div class="title"><?php echo $lang->dev->currentLang;?> </div>
-        <div class="label-list">
-          <?php foreach($currentLangs as $langKey => $originalLang):?>
-          <div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-32 my-12"><?php echo $originalLang?></div>
-          <?php endforeach;?>
-        </div>
-      </div>
-      <?php endif;?>
-      <div class="side-left">
-        <div class="title"><?php echo $lang->dev->defaultValue ?> </div>
-        <div class="label-list">
-          <?php foreach($originalLangs as $langKey => $originalLang):?>
-          <div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-32 my-12"><?php echo $originalLang?></div>
-          <?php endforeach;?>
-        </div>
-      </div>
-      <div class="side-right">
+    <div class="main-content">
+      <div class="title-content flex">
+        <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
+          <div class="title"><?php echo $lang->dev->currentLang;?> </div>
+        <?php endif;?>
+        <div class="title"><?php echo $lang->dev->defaultValue?></div>
         <div class="title"><?php echo $lang->dev->modifyValue?></div>
-        <div class="input-list">
-          <?php foreach($originalLangs as $langKey => $originalLang):?>
-          <div class="input-control h-32 my-12">
-            <?php echo html::input("{$moduleName}_{$langKey}", zget($customedLangs, $langKey, ''), "class='form-control shadow-primary-hover' placeholder='{$originalLang}'");?>
-            <i iconId="<?php echo "{$moduleName}_{$langKey}"?>" class="icon icon-angle-right text-primary hidden"></i>
-          </div>
-          <?php endforeach;?>
-        </div>
       </div>
-      <div class="side-main"></div>
+      <div class="form-item-content">
+        <?php foreach($originalLangs as $langKey => $originalLang):?>
+          <div itemid="<?php echo "{$moduleName}_{$langKey}"?>" class="form-item flex">
+            <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
+              <div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
+            <?php endif;?>
+            <div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
+            <i class="icon icon-angle-right text-primary"></i>
+            <div class="input-control">
+              <?php echo html::input("{$moduleName}_{$langKey}", zget($customedLangs, $langKey, ''), "class='form-control shadow-primary-hover' placeholder='{$originalLang}'");?>
+            </div>
+          </div>
+        <?php endforeach;?>
+      </div>
     </div>
+
     <div class="bottom-btn">
       <?php echo html::submitButton(); ?>
       <?php echo html::a(inlink('resetLang', "type={$type}&module={$moduleName}&language={$language}"), $lang->restore, 'hiddenwin', "id='reset' class='btn btn-wide ml-20'");?>

From 28d71e52025de44ce3a861f70e115f42f1fed2c2 Mon Sep 17 00:00:00 2001
From: caoyanyi <caoyanyi@easycorp.ltd>
Date: Thu, 23 Feb 2023 15:29:31 +0800
Subject: [PATCH 2/4] * Adjust code.

---
 module/dev/js/langitem.js         |  2 +-
 module/dev/view/langitem.html.php | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/module/dev/js/langitem.js b/module/dev/js/langitem.js
index ba1a895a58..34f47ebe0f 100644
--- a/module/dev/js/langitem.js
+++ b/module/dev/js/langitem.js
@@ -138,7 +138,7 @@ $(function()
 
     $('.form-item-content > .form-item > .input-label').on('click', function()
     {
-        handleClickItem($(this).attr('labelid'));
+        handleClickItem($(this).data('id'));
     });
 
     $(".form-item-content").on('mouseover', '.form-item', function()
diff --git a/module/dev/view/langitem.html.php b/module/dev/view/langitem.html.php
index c2ac1c2b70..8a693bdc7e 100644
--- a/module/dev/view/langitem.html.php
+++ b/module/dev/view/langitem.html.php
@@ -36,7 +36,7 @@
   </div>
 </div>
 <div class="flex gap-15">
-<?php if(in_array($type, $config->dev->navTypes)):?>
+  <?php if(in_array($type, $config->dev->navTypes)):?>
   <div class="menu-tree">
     <div class="input-control search-box has-icon-left has-icon-right search-example">
       <input type="search" class="form-control search-input"/>
@@ -44,7 +44,7 @@
     </div>
     <div id="menuTree" class="menu-active-primary menu-hover-primary"></div>
   </div>
-<?php endif;?>
+  <?php endif;?>
 
   <form class='main-form form-ajax flex-1' method='post'>
     <div class="main-content">
@@ -57,16 +57,16 @@
       </div>
       <div class="form-item-content">
         <?php foreach($originalLangs as $langKey => $originalLang):?>
-          <div itemid="<?php echo "{$moduleName}_{$langKey}"?>" class="form-item flex">
-            <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
-              <div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
-            <?php endif;?>
-            <div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
-            <i class="icon icon-angle-right text-primary"></i>
-            <div class="input-control">
-              <?php echo html::input("{$moduleName}_{$langKey}", zget($customedLangs, $langKey, ''), "class='form-control shadow-primary-hover' placeholder='{$originalLang}'");?>
-            </div>
+        <div itemid="<?php echo "{$moduleName}_{$langKey}"?>" class="form-item flex">
+          <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
+          <div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
+          <?php endif;?>
+          <div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
+          <i class="icon icon-angle-right text-primary"></i>
+          <div class="input-control">
+            <?php echo html::input("{$moduleName}_{$langKey}", zget($customedLangs, $langKey, ''), "class='form-control shadow-primary-hover' placeholder='{$originalLang}'");?>
           </div>
+        </div>
         <?php endforeach;?>
       </div>
     </div>

From 534bae67faacfedb63ae617770d94328a97952c0 Mon Sep 17 00:00:00 2001
From: caoyanyi <caoyanyi@easycorp.ltd>
Date: Thu, 23 Feb 2023 15:36:05 +0800
Subject: [PATCH 3/4] * Adjust code.

---
 module/dev/js/langitem.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/module/dev/js/langitem.js b/module/dev/js/langitem.js
index 34f47ebe0f..c9b3178ed7 100644
--- a/module/dev/js/langitem.js
+++ b/module/dev/js/langitem.js
@@ -143,7 +143,6 @@ $(function()
 
     $(".form-item-content").on('mouseover', '.form-item', function()
     {
-        if ($(this).hasClass('text-primary')) return;
         $(this).addClass('text-primary');
     }).on('mouseout', '.form-item', function()
     {

From 20cab7c06cf18c49a3ee0d199e512e3b04473328 Mon Sep 17 00:00:00 2001
From: guofeilong <guofeilong@easycorp.ltd>
Date: Thu, 23 Feb 2023 16:40:17 +0800
Subject: [PATCH 4/4] * Code refactors in langitem .

---
 module/dev/css/langitem.css       | 13 ++++++-------
 module/dev/js/langitem.js         | 24 ++++++++++++------------
 module/dev/view/langitem.html.php |  6 +++---
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/module/dev/css/langitem.css b/module/dev/css/langitem.css
index ec628f155d..e863ba1a21 100644
--- a/module/dev/css/langitem.css
+++ b/module/dev/css/langitem.css
@@ -2,20 +2,19 @@
 .flex-1 {flex: 1;}
 .align-center {align-items: center;}
 .justify-center {justify-content: center;}
-.h-32 {height: 32px;}
-.py-6 {padding: 6px 0;}
-.my-12 {margin: 12px 0;}
-.ml-20 {margin-left: 20px;}
+.reset-btn {margin-left: 20px;}
 .title {font-size: 13px; color: #313C52; font-weight: 700; height: 40px; text-align: center;}
-.gap-15 {gap: 15px;}
 .h-full {height: 100%;}
 
 /* menu-tree */
 .menu-tree {flex: 0 0 200px; background: #fff; padding: 10px 10px;}
 .menu-tree > .tree {padding-top: 20px;}
-li.has-list > ul > li {padding-left: 10px;}
 .tree ul {margin-bottom: 0;}
+#menuTree > li.has-list > ul > li {padding-left: 10px;}
+#menuTree > li.has-list > ul > li.has-list {padding-left: 15px;}
 
+/* main-box */
+.flex.main-box {gap: 15px;}
 
 /* title-content */
 .title-content {gap: 20px;}
@@ -30,4 +29,4 @@ li.has-list > ul > li {padding-left: 10px;}
 .form-item-content > .form-item> .icon {display: none; position: absolute; left: 180px; font-size: 25px;}
 
 /* bottom-btn */
-.bottom-btn {display: flex; align-items: center; background: #fff;padding-left: 150px; padding-bottom: 20px;}
+.bottom-btn {display: flex; align-items: center; background: #fff; padding-left: 150px; padding-bottom: 20px;}
diff --git a/module/dev/js/langitem.js b/module/dev/js/langitem.js
index c9b3178ed7..6346febc34 100644
--- a/module/dev/js/langitem.js
+++ b/module/dev/js/langitem.js
@@ -9,7 +9,7 @@ $(function()
      */
     function addActive(id)
     {
-        $('[itemid=' + id + ']').addClass('text-primary active');
+        $('[data-id=' + id + ']').addClass('text-primary active');
     }
 
     /**
@@ -21,7 +21,7 @@ $(function()
      */
     function removeActive(id)
     {
-        $('[itemid=' + id + ']').removeClass('text-primary active');
+        $('[data-id=' + id + ']').removeClass('text-primary active');
     }
 
     /**
@@ -33,7 +33,7 @@ $(function()
      */
     function handleClickItem(clickId)
     {
-	    var clearId = $('.form-item.active').attr('itemid');
+	    var clearId = $('.form-item.active').attr('data-id');
         if(clearId !== clickId)
         {
             if(clearId) removeActive(clearId);
@@ -85,15 +85,15 @@ $(function()
         var childern = null;
         if (item && item.children)
         {
-             children = [];
-             for (var i = 0; i < item.children.length; i++)
-             {
-                 item.children[i].children = filterChildren(item.children[i], val);
-                 if (item.children[i].title.indexOf(val) != -1 || (item.children[i].key && item.children[i].key.indexOf(val) != -1) || item.children[i].children)
-                 {
-                     children.push(item.children[i]);
-                 }
-             }
+            children = [];
+            for (var i = 0; i < item.children.length; i++)
+            {
+                item.children[i].children = filterChildren(item.children[i], val);
+                if (item.children[i].title.indexOf(val) != -1 || (item.children[i].key && item.children[i].key.indexOf(val) != -1) || item.children[i].children)
+                {
+                    children.push(item.children[i]);
+                }
+            }
         }
         return children;
     }
diff --git a/module/dev/view/langitem.html.php b/module/dev/view/langitem.html.php
index ddbf753f2e..c7bef4ad02 100644
--- a/module/dev/view/langitem.html.php
+++ b/module/dev/view/langitem.html.php
@@ -35,7 +35,7 @@
     <?php endforeach;?>
   </div>
 </div>
-<div class="flex gap-15">
+<div class="flex main-box">
   <?php if(in_array($type, $config->dev->navTypes)):?>
   <div class="menu-tree">
     <div class="input-control search-box has-icon-left has-icon-right search-example">
@@ -57,7 +57,7 @@
       </div>
       <div class="form-item-content">
         <?php foreach($originalLangs as $langKey => $originalLang):?>
-        <div itemid="<?php echo "{$moduleName}_{$langKey}"?>" class="form-item flex">
+        <div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="form-item flex">
           <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
           <div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
           <?php endif;?>
@@ -73,7 +73,7 @@
 
     <div class="bottom-btn">
       <?php echo html::submitButton(); ?>
-      <?php echo html::a(inlink('resetLang', "type={$type}&module={$moduleName}&method={$method}&language={$language}"), $lang->restore, 'hiddenwin', "id='reset' class='btn btn-wide ml-20'");?>
+      <?php echo html::a(inlink('resetLang', "type={$type}&module={$moduleName}&method={$method}&language={$language}"), $lang->restore, 'hiddenwin', "id='reset' class='btn btn-wide reset-btn'");?>
     </div>
   </form>
 </div>