From d16f9c5ef45ab1ec0a53c5779762b1b54b663285 Mon Sep 17 00:00:00 2001
From: lhxcccccccccc <3302269842@qq.com>
Date: Fri, 7 Jun 2024 22:27:02 +0800
Subject: [PATCH] =?UTF-8?q?[Serverless=E5=AE=98=E7=BD=91]:=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=A1=B5=E9=9D=A2=E6=94=AF=E6=8C=81v3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 component.html                     | 407 ++++++++++++++++++-----------
 details.html                       |  11 +-
 search.html                        |   8 +-
 services/downloadV3Plugin.js       |   4 +
 services/getPackagesSearchForV3.js |   7 +-
 static/js/main.js                  |  16 +-
 utils/_Get.js                      |  11 +-
 utils/splitMaxLenth.js             |   4 +
 8 files changed, 307 insertions(+), 161 deletions(-)
 create mode 100644 utils/splitMaxLenth.js

diff --git a/component.html b/component.html
index 814217c..c35db0a 100644
--- a/component.html
+++ b/component.html
@@ -363,6 +363,7 @@ <h4 class="lasthead">微信公众号</h4>
         </div>
       </div>
     </div>
+
     <!--====== Footer Area END ======-->
 
     <!--====== Back to top start ======-->
@@ -385,8 +386,68 @@ <h4 class="lasthead">微信公众号</h4>
     <script src="static/js/jquery.nice-select.min.js"></script>
     <!--====== Wow ======-->
     <script src="static/js/wow.min.js"></script>
+    <!-- ====== 模版引擎 ====== -->
+    <script src="vendors/art-template/template-web.js"></script>
     <!--====== Main JS ======-->
     <script src="static/js/main.js"></script>
+
+    <script src="config/URL.js"></script>
+    <script src="utils/_Get.js"></script>
+    <script src="utils/_Post.js"></script>
+    <script src="utils/renderTpl.js"></script>
+    <script src="utils/splitMaxLenth.js"></script>
+    <script src="services/downloadV3Plugin.js"></script>
+    <script src="services/getPackagesSearchForV3.js"></script>
+    <!-- 注入总数模版 -->
+    <script type="text/template" id="totalTpl">
+      <i class="fas fa-list"></i> 找到 {{total}} 条结果
+    </script>
+
+    <!-- 注入搜索模板 -->
+    <script type="text/template" id="searchTpl">
+      {{each data}}
+      <div class="col-xl-6 wow fadeInUp" data-wow-delay="{{$value.delayTime}}s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
+        <div class="themes-box" style="overflow: hidden;">
+          {{if $value.package_type === 'v2' }}
+          <div class="ribbon" data-spm-anchor-id="5176.28448578.0.i154.758e60cczu7hm5">仅维护</div>
+          {{ /if }}
+            <div class="main-content">
+                <h5><a href="details.html?name={{$value.name}}&package_type={{$value.package_type}}" class="text-flow-ellipsis-single">{{$imports.splitMaxLenth($value.name, 27)}}</a> <i class="fas fa-fire" style="float: right; color: orange;"> {{$value.download}} </i></h5>
+                <div class="last-part">
+                    <div class="right" style="width: 100%">
+                        <p class="text" style="width: 100%">
+                            {{if $value.published_at }}
+                            <i class="fas fa-calendar"></i> {{$value.published_at}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+                            {{ /if }}
+    
+                            {{if $value.version }}
+                            <i class="fas fa-desktop"></i> V{{$value.version}}
+                            {{ /if }}
+                        </p>
+                        <p class="text-flow-ellipsis-multiple" style="height: 70px">
+                          {{$value.description}}
+                        </p>
+                    </div>
+                </div>
+                    <div class="past-part" style="margin-top: 10px">
+                    <center>
+                        <div class="buton">
+                            <a href="details.html?name={{$value.name}}&package_type={{$value.package_type}}" class="preButton"> <i class="fas fa-book"></i> 查看详情 </a>
+                            {{if $value.zipball_url }}
+                            <a href="{{$value.zipball_url}}" target="_blank" class="download"> <i class="fas fa-download"></i> 下载组件 </a>
+                            {{else}} 
+                            <a onclick="downloadPlugin( '{{$value.name}}' )" class="download"> <i class="fas fa-download"></i> 下载组件 </a>
+                            {{ /if }}
+                        </div>
+                        </center>
+                    </div>
+    
+                </div>
+            </div>
+        </div>
+        {{/each}}
+    </script>
+    
     <script>
       function getQueryVariable(variable) {
         var query = window.location.search.substring(1);
@@ -428,179 +489,227 @@ <h4 class="lasthead">微信公众号</h4>
         }
       }
 
-      function getBaseList(name, detail) {
-        const xmlhttp = window.XMLHttpRequest
-          ? new XMLHttpRequest()
-          : new ActiveXObject("Microsoft.XMLHTTP");
-        xmlhttp.open("GET", detail["url"], false);
-        xmlhttp.onreadystatechange = function () {
-          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-            let tempData = JSON.parse(xmlhttp.responseText);
-            const newData = {};
-            if (name == "provider") {
-              const tempKeys = Object.keys(tempData);
-              for (let i = 0; i < tempKeys.length; i++) {
-                newData[tempData[tempKeys[i]]] = tempData[tempKeys[i]];
-              }
-              tempData = newData;
-            }
-            setBaseList(tempData, detail["id"], name);
-          }
+      function downloadPlugin(name) {
+        downloadV3Plugin(name)
+      }
+
+      function onClick(value, key, package_type) {
+        var obj = {
+          package_type : package_type,
         };
-        xmlhttp.setRequestHeader("Content-type", "application/json");
-        xmlhttp.send();
+        if (key==='category') {
+          obj[key] = value
+          if (getQueryVariable("provider")) {
+            obj['provider'] = getQueryVariable("provider")
+          }
+        }
+        if (key==='provider') {
+          obj[key] = value
+          if (getQueryVariable("category")) {
+            obj['category'] = getQueryVariable("category")
+          }
+        }
+        window.location.href = objectSerialize(obj)
       }
 
       function setBaseList(listData, idName, name) {
         var attrString = "";
-        const keys = ["-1"].concat(Object.keys(listData));
-        for (let i = 0; i < keys.length; i++) {
-          attrString =
-            attrString +
+        var keys = [{
+           id:'-1',
+           name: '全部',
+           package_type:''
+          ,
+        }, 
+        ...listData];
+        for (var i = 0; i < keys.length; i++) {
+          var item = keys[i];
+          // console.log(item.id, item.name, item.package_type);
+          attrString = attrString +
             `<li>
-                                            <a href="${
-                                              insertParam(
-                                                name,
-                                                keys[i]
-                                              ).startsWith("?")
-                                                ? insertParam(name, keys[i])
-                                                : "?" +
-                                                  insertParam(name, keys[i])
-                                            }" class="link ${
-              keys[i] == decodeURI(getQueryVariable(name) || "-1")
-                ? "active"
-                : ""
-            }">
-                                                <span>${
-                                                  listData[keys[i]] || "全部"
-                                                }</span>
-                                            </a>
-                                      </li>`;
+              <a onclick="onClick('${item.id}', '${name}','${item.package_type}')" class="link ${keys[i] == decodeURI(getQueryVariable(name) || "-1")? "active": ""}">
+              <span>${item.name || "全部"}</span>
+             </a>
+           </li>`
         }
+       
         document.getElementById(idName).innerHTML = attrString;
       }
-
-      function getBaseInfor() {
-        const attrList = {
-          category: {
-            url: "https://registry.devsapp.cn/common/category",
-            id: "categorylist",
-          },
-          provider: {
-            url: "https://registry.devsapp.cn/common/provider",
-            id: "providerlist",
-          },
-        };
-        for (let i = 0; i < Object.keys(attrList).length; i++) {
-          getBaseList(
-            Object.keys(attrList)[i],
-            attrList[Object.keys(attrList)[i]]
-          );
-        }
-      }
-
+      
       function getPackages() {
-        const selectData = document.getElementById("sortselect");
-        const index = selectData.selectedIndex;
+        var selectData = document.getElementById("sortselect");
+        var index = selectData.selectedIndex;
+        var sort = selectData.options[index].value;
         console.log(document.getElementById("sortselect").selectedIndex);
-        const xmlhttp = window.XMLHttpRequest
-          ? new XMLHttpRequest()
-          : new ActiveXObject("Microsoft.XMLHTTP");
-        xmlhttp.open(
-          "POST",
-          "https://registry.devsapp.cn/package/search",
-          false
-        );
-        xmlhttp.onreadystatechange = function () {
-          if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
-            let itemString = "";
-            const result = JSON.parse(xmlhttp.responseText).Response;
-            const keys = Object.keys(result);
-            const times = [0.3, 0.2, 0.1];
-            for (let i = 0; i < keys.length; i++) {
-              itemString =
-                itemString +
-                `<div class="col-xl-6 wow fadeInUp" data-wow-delay="${
-                  times[Math.floor(Math.random() * times.length)]
-                }s">
-                        <div class="themes-box">
-                            <div class="main-content">
-                                <h5><a href="details.html?name=${
-                                  result[keys[i]].package
-                                }" class="text-flow-ellipsis-single">${
-                  result[keys[i]].package.length > 27
-                    ? result[keys[i]].package.slice(0, 27) + "..."
-                    : result[keys[i]].package
-                }</a> <i class="fas fa-fire" style="float: right; color: orange;"> ${
-                  result[keys[i]].download
-                } </i></h5>
-                                <div class="last-part">
-                                    <div class="right" style="width: 100%">
-                                        <p class="text" style="margin-bottom: 10px; width: 100%">
-                                        <i class="fas fa-calendar"></i> ${
-                                          result[
-                                            keys[i]
-                                          ].version.published_at.split("T")[0]
-                                        }&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-                                            <i class="fas fa-desktop"></i> V${
-                                              result[keys[i]].version.tag_name
-                                            }
-                                        </p>
-                                        <p class="text-flow-ellipsis-multiple" style="height: 70px">
-                                            ${result[keys[i]].description}
-                                        </p>
-                                    </div>
-                                </div>
-                                    <div class="past-part" style="margin-top: 10px">
-                                    <center>
-                                        <div class="buton">
-                                            <a href="details.html?name=${
-                                              result[keys[i]].package
-                                            }" class="preButton"> <i class="fas fa-book"></i> 查看详情 </a>
-                                            <a href="${
-                                              result[keys[i]].version
-                                                .zipball_url
-                                            }" target="_blank" class="download"> <i class="fas fa-download"></i> 下载组件 </a>
-                                        </div>
-                                        </center>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>`;
+        // 列表存储数据
+        var dataList = [];
+        var v3Total = 0;
+        var v2Total = 0;
+        // 左侧内容主体区域
+        // V3: 搜索/获取 Package 信息
+        ;(function getPackagesV3() {
+            var data = `type=Component&sort=${sort}`;
+            if ((getQueryVariable("category") || "-1") !== "-1") {
+              data = insertParam("category", getQueryVariable("category"), data);
+            }
+            if (document.getElementById("searchdata").value) {
+              data = insertParam("search",document.getElementById("searchdata").value,data);
+            }
+            if ((getQueryVariable("provider") || "-1") !== "-1") {
+              data = insertParam("provider", getQueryVariable("provider"), data);
             }
-            document.getElementById("itemlist").innerHTML = itemString;
-            document.getElementById(
-              "showinfo"
-            ).innerHTML = `<i class="fas fa-list"></i> 找到 ${
-              Object.keys(result).length
-            } 条结果`;
+          getPackagesSearchForV3(data, function (result) {
+          var keys = Object.keys(result);
+            var times = [0.3, 0.2, 0.1];
+            for (var i = 0; i < keys.length; i++) {
+              var item = {};
+              item.delayTime = times[Math.floor(Math.random() * times.length)];
+              item.name = result[keys[i]].name;
+              item.download = result[keys[i]].download;
+              //   item.published_at = result[keys[i]].version.published_at.split("T")[0]
+              item.published_at = ''
+              //   item.version = result[keys[i]].version.tag_name;
+              item.version = '';
+              item.description = result[keys[i]].description;
+              //   item.zipball_url = result[keys[i]].version.zipball_url;
+              item.zipball_url = ''
+              item.package_type = 'v3'; // v2 v3标识
+              dataList.push(item);
+            }
+            v3Total = keys.length
+            return ;
+        })
           }
-        };
-        xmlhttp.setRequestHeader(
-          "Content-type",
-          "application/x-www-form-urlencoded"
-        );
-        let data = `type=Component&sort=${selectData.options[index].value}`;
+        )();
+        // V2: 获取 Package 信息
+        ;(function getPackagesV2() {
+        // ===> type=Component&sort=time
+        // ===> type=Component&sort=download
+        // ===> type=Component&sort=download&keyword=core
+        // ===> 直接点击分类: type=Component&sort=time&category=25
+        // ===> 直接点击云厂商: type=Component&sort=time&category=25&provider=华为云
+        var data = `type=Component&sort=${sort}`;
 
         if ((getQueryVariable("category") || "-1") !== "-1") {
           data = insertParam("category", getQueryVariable("category"), data);
         }
         if (document.getElementById("searchdata").value) {
-          data = insertParam(
-            "keyword",
-            document.getElementById("searchdata").value,
-            data
-          );
+          data = insertParam("keyword",document.getElementById("searchdata").value,data);
         }
         if ((getQueryVariable("provider") || "-1") !== "-1") {
           data = insertParam("provider", getQueryVariable("provider"), data);
         }
-        xmlhttp.send(data);
+
+
+        var base_url = BASE_V2_URL
+        _Post(base_url + "/package/search", data, 
+          function (result) {
+            var keys = Object.keys(result);
+            var times = [0.3, 0.2, 0.1];
+            for (var i = 0; i < keys.length; i++) {
+              var item = {};
+              item.delayTime = times[Math.floor(Math.random() * times.length)];
+              item.name = result[keys[i]].package;
+              item.download = result[keys[i]].download;
+              item.published_at = result[keys[i]].version.published_at.split("T")[0]
+              item.version = result[keys[i]].version.tag_name;
+              item.description = result[keys[i]].description;
+              item.zipball_url = result[keys[i]].version.zipball_url;
+              item.package_type = 'v2'; // v2 v3标识
+              dataList.push(item);
+            }
+            v2Total = keys.length
+          }
+        )
+        })();
+
+        if(dataList && dataList.length > 0){
+          if(sort === 'time'){
+
+          }else if (sort === 'download') { // 根据download字段排序
+            dataList = dataList.sort((a, b) => b.download - a.download);
+          }
+          renderTpl('searchTpl', { data: dataList }, '#itemlist')
+        }else{
+          renderTpl('searchTpl', { data: [] }, '#itemlist')
+        }
+
+        renderTpl('totalTpl', { total: v2Total + v3Total }, '#showinfo')
+      }
+
+       // 获取 分类 / 信息
+       // 1. 调用V2接口  获取V2分类
+       // 2. 调用V3接口  获取V3分类
+       function getCategory(){
+        var categoryList = []; // package_type
+        ;(function getCategoryV2() {
+          _GetJSON("https://registry.devsapp.cn/common/category", function (tempData) {
+            for (var key in tempData) {
+              var obj = {}
+              var value = tempData[key]
+              obj["package_type"] = 'v2'
+              obj["id"] = key
+              obj['name'] = value
+              categoryList.push(obj)
+            }
+          });
+        })()
+        ;(function getCategoryV3() {
+          var base_url = BASE_V3_URL;
+          _GetJSON(base_url + '/common/categories', function (tempData) {
+            // @TODO: 计算获取V3比V2多的分类item
+            categoryList.push({
+              'package_type':'v3',
+              'id': '2',
+              'name': 'Web 应用'
+            })
+          });
+        })();
+
+         // 渲染的方法: 渲染分类数据
+         setBaseList(categoryList, "categorylist", 'category');
+       }
+
+       // 获取 云厂商 / 信息
+       // 1. 调用V2接口  获取V2云厂商
+       // 2. 调用V3接口  获取V3云厂商
+       function getProvider(){
+        var providerList = []; // package_type
+        ;(function getProviderV2() {
+          _GetJSON("https://registry.devsapp.cn/common/provider", function (tempData) {
+            for (var key in tempData) {
+              var obj = {}
+              var value = tempData[key]
+              obj["package_type"] = 'v2'
+              obj["id"] = value; // 如果是云厂商, 使用名称字符串搜索
+              obj['name'] = value;
+              providerList.push(obj)
+            }
+          });
+        })();
+        ;(function getCategoryV3() {
+          var base_url = BASE_V3_URL;
+          _GetJSON(base_url + '/common/providers', function (tempData) {
+            // @TODO: 计算获取V3比V2多的云厂商item
+            // console.log('v3---tempData===')
+            // console.log(tempData)
+            providerList.push({ 'package_type':'v3','_id': 8, 'name': '专有云'  ,'id': '专有云'   })
+            providerList.push({ 'package_type':'v3','_id': 10,'name': '火山引擎', 'id': '火山引擎' })
+            providerList.push({ 'package_type':'v3','_id': 11,'name': '天翼云'  ,'id': '天翼云'   })
+            providerList.push({ 'package_type':'v3','_id': 12,'name': '移动云'  ,'id': '移动云'   })
+            providerList.push({ 'package_type':'v3','_id': 13,'name': '联通云'  ,'id': '联通云'   })
+          });
+        })();
+
+        setBaseList(providerList, 'providerlist', 'provider');
+      }
+
+      function main() {
+        getPackages();
+        getCategory();
+        getProvider();
       }
 
-      getPackages();
-      getBaseInfor();
+      main();
     </script>
     <script>
       //translate.ignore.tag.push('span'); //翻译时追加上自己想指定忽略的tag标签，凡是在这里面的，都不进行翻译。
diff --git a/details.html b/details.html
index 1b0c9be..80dbb2e 100644
--- a/details.html
+++ b/details.html
@@ -715,6 +715,14 @@ <h4 id="usename">
           if (!tempData) {
             return ;
           }
+         if (tempData.body) {
+          tempData = tempData.body
+          console.log('tempData')
+          console.log(tempData)
+          if (typeof tempData === 'string') {
+            document.getElementById("mddata").innerHTML = tempData;
+            return
+          }
           renderTpl('titleTpl', 
           { 
             name: tempData.name,
@@ -809,8 +817,9 @@ <h4 id="usename">
               }, 
               '#quick'
             )
+            }
             return ;
-        })
+        }, 'isAllData')
       }
 
       // V3: 获取Package所有版本接口
diff --git a/search.html b/search.html
index 4610357..17221a8 100644
--- a/search.html
+++ b/search.html
@@ -343,6 +343,7 @@ <h4 class="lasthead">微信公众号</h4>
     <script src="utils/_Get.js"></script>
     <script src="utils/_Post.js"></script>
     <script src="utils/renderTpl.js"></script>
+    <script src="utils/splitMaxLenth.js"></script>
     <script src="services/downloadV3Plugin.js"></script>
     <script src="services/getPackagesSearchForV3.js"></script>
     <!-- 注入搜索模板 -->
@@ -392,11 +393,6 @@ <h5><a href="details.html?name={{$value.name}}&package_type={{$value.package_typ
     {{/each}}
 </script>
     <script>
-     
-      function splitMaxLenth (dataStr) {
-        return dataStr.length > 25 ? dataStr.slice(0, 25) + "...": dataStr;
-      }
-
       // 列表存储数据
       var dataList = [];
       function downloadPlugin(name) {
@@ -485,6 +481,8 @@ <h5><a href="details.html?name={{$value.name}}&package_type={{$value.package_typ
 
         if(dataList && dataList.length > 0){
           renderTpl('searchTpl', { data: dataList }, '#itemlist')
+        }else{
+          renderTpl('searchTpl', { data: [] }, '#itemlist')
         }
       }
 
diff --git a/services/downloadV3Plugin.js b/services/downloadV3Plugin.js
index 9918cf4..66c3513 100644
--- a/services/downloadV3Plugin.js
+++ b/services/downloadV3Plugin.js
@@ -5,6 +5,10 @@ function downloadV3Plugin(name) {
     var base_url = BASE_V3_URL
      var url = base_url + '/packages/'+name+'/release/latest'
      _Get(url, function (res) {
+      if (res.body==="未找到指定资源") {
+        console.log('未找到指定资源')
+        return;
+      }
        var result = res.body||res.Response;
        if (result && result.zipball_url) {
          const link = document.createElement('a');
diff --git a/services/getPackagesSearchForV3.js b/services/getPackagesSearchForV3.js
index 9ff52bc..e24bf13 100644
--- a/services/getPackagesSearchForV3.js
+++ b/services/getPackagesSearchForV3.js
@@ -1,7 +1,12 @@
 // 调用V3版本 搜索接口
 function getPackagesSearchForV3(dataString, callback) {
     var base_url = BASE_V3_URL
-    var url = base_url + '/packages/releases?'+ dataString + `&platform=3`
+    if (dataString) {
+        dataString = dataString + '&platform=3'
+    } else {
+        dataString = 'platform=3'
+    }
+    var url = base_url + '/packages/releases?'+ dataString
     _Get(url, function (result) {
         callback && callback(result)
         return ;
diff --git a/static/js/main.js b/static/js/main.js
index 6764c94..1591610 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -428,4 +428,18 @@
 		new WOW().init();
 	});
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);
+
+
+
+var objectSerialize = function (obj) {
+	var params = { ...obj } // wd=111&cb=222
+
+	var arrs = [] // 数组序列化
+	for (var key in params) {
+	  if (params[key]) {
+		arrs.push(`${key}=${params[key]}`)
+	  }
+	}
+	return `?${arrs.join('&')}`
+}
\ No newline at end of file
diff --git a/utils/_Get.js b/utils/_Get.js
index aa72a27..fb9bffb 100644
--- a/utils/_Get.js
+++ b/utils/_Get.js
@@ -12,24 +12,27 @@ function _Get(url, callback, type) {
     );
     xmlhttp.onreadystatechange = function () {
       if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
+        var result = {};
         if (type === 'isAllData') {// get方法返回所有接口数据
-          var result = JSON.parse(xmlhttp.responseText)
+          result = JSON.parse(xmlhttp.responseText)
           callback&&callback(result)
           return ;
         }
 
         if (type === 'response') { // get方法返回Response
-          var result = JSON.parse(xmlhttp.responseText).Response;
+          result = JSON.parse(xmlhttp.responseText).Response;
           callback&&callback(result)
           return ;
         }
 
         // get方法返回Body
         if (type === 'body') {
-          var result = JSON.parse(xmlhttp.responseText).body;
+          result = JSON.parse(xmlhttp.responseText).body;
           callback&&callback(result)
           return ;
         }
+      }else{
+        callback&&callback(JSON.parse(xmlhttp.responseText))
       }
     };
     xmlhttp.setRequestHeader(
@@ -42,7 +45,7 @@ function _Get(url, callback, type) {
 
 // _GetJSON: 方法传递json参数,默认返回接口所有数据
 function _GetJSON(url, callback){
-  const xmlhttp = window.XMLHttpRequest
+  var xmlhttp = window.XMLHttpRequest
   ? new XMLHttpRequest()
   : new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.open("GET", url, false);
diff --git a/utils/splitMaxLenth.js b/utils/splitMaxLenth.js
new file mode 100644
index 0000000..cace156
--- /dev/null
+++ b/utils/splitMaxLenth.js
@@ -0,0 +1,4 @@
+function splitMaxLenth (dataStr, length) {
+    length = length || 25;
+    return dataStr.length > length ? dataStr.slice(0, length) + "...": dataStr;
+}
\ No newline at end of file