@winjs-dev/create-win 1.0.0-alpha.2

package/templates/pc/src/assets/fonts/iconfont.js

@@ -0,0 +1,96 @@
+(function (window) {
+  var svgSprite =
+    '<svg>' +
+    '' +
+    '<symbol id="icon-clock" viewBox="0 0 1024 1024">' +
+    '' +
+    '<path d="M821.76 875.712l33.344 33.28c18.688 18.56 37.568 37.056 56 55.936a33.792 33.792 0 0 1-15.36 57.088 33.984 33.984 0 0 1-34.112-10.24l-89.984-89.92c-1.792-1.792-2.88-4.288-3.52-5.312-171.584 97.152-340.864 97.088-511.04 0.768-1.152 1.088-3.072 2.816-4.864 4.672-30.4 30.272-60.544 60.672-91.136 90.752a33.92 33.92 0 0 1-56.96-13.568c-4.096-13.632-0.32-25.408 9.728-35.456l82.56-82.304c1.856-1.792 4.224-3.072 6.4-4.672C88.576 774.144 30.08 648.192 34.944 496c4.224-133.376 57.6-245.888 155.904-336.32C380.608-14.848 678.72-3.84 857.984 183.68a476.8 476.8 0 0 1-36.224 692.032zM102.4 512.32c0 225.024 183.232 408.64 407.872 408.768 227.648 0.128 410.688-181.632 411.072-408.192 0.384-225.856-183.424-409.472-409.472-409.216C285.696 103.936 102.4 286.848 102.4 512.32zM199.872 0.768c5.888 1.152 12.16 1.472 17.728 3.584 14.72 5.44 23.552 21.248 21.12 36.096a33.472 33.472 0 0 1-32.448 29.056c-30.592 0.576-58.624 8.832-83.008 27.52-35.968 27.456-53.888 64.256-55.04 109.312a32.448 32.448 0 0 1-19.52 30.272 32.192 32.192 0 0 1-34.688-3.392 32.512 32.512 0 0 1-13.824-28.608C2.304 132.48 32.896 75.84 92.672 35.2 124.8 13.44 160.832 3.008 199.872 0.768zM1023.744 202.496a34.368 34.368 0 0 1-44.16 36.096 33.984 33.984 0 0 1-24.064-33.024 131.84 131.84 0 0 0-20.416-70.848c-26.88-41.984-65.664-63.36-115.456-65.024-24.576-0.832-40.64-22.912-32.768-45.312a33.536 33.536 0 0 1 33.28-22.592c76.288 2.048 134.72 35.648 174.976 100.288 18.24 29.312 27.072 61.76 28.608 100.416z"  ></path>' +
+    '' +
+    '<path d="M477.952 409.984c0-33.92-0.128-67.84 0-101.696a33.472 33.472 0 0 1 22.848-32.384 34.176 34.176 0 0 1 37.632 10.88c5.76 7.04 7.744 15.36 7.744 24.32 0 60.032 0 120-0.128 180.032 0 5.12 1.344 8.704 5.056 12.288 40.128 39.808 80.128 79.744 120.064 119.808 15.36 15.36 14.976 38.016-0.448 51.2a33.856 33.856 0 0 1-45.76-1.216c-9.408-8.896-18.368-18.24-27.52-27.392-35.2-35.072-70.272-70.4-105.664-105.216a43.648 43.648 0 0 1-14.016-33.92c0.512-32.256 0.192-64.448 0.192-96.704z"  ></path>' +
+    '' +
+    '</symbol>' +
+    '' +
+    '</svg>';
+  var script = (function () {
+    var scripts = document.getElementsByTagName('script');
+    return scripts[scripts.length - 1];
+  })();
+  var shouldInjectCss = script.getAttribute('data-injectcss');
+  var ready = function (fn) {
+    if (document.addEventListener) {
+      if (~['complete', 'loaded', 'interactive'].indexOf(document.readyState)) {
+        setTimeout(fn, 0);
+      } else {
+        var loadFn = function () {
+          document.removeEventListener('DOMContentLoaded', loadFn, false);
+          fn();
+        };
+        document.addEventListener('DOMContentLoaded', loadFn, false);
+      }
+    } else if (document.attachEvent) {
+      IEContentLoaded(window, fn);
+    }
+    function IEContentLoaded(w, fn) {
+      var d = w.document,
+        done = false,
+        init = function () {
+          if (!done) {
+            done = true;
+            fn();
+          }
+        };
+      var polling = function () {
+        try {
+          d.documentElement.doScroll('left');
+        } catch (e) {
+          setTimeout(polling, 50);
+          return;
+        }
+        init();
+      };
+      polling();
+      d.onreadystatechange = function () {
+        if (d.readyState == 'complete') {
+          d.onreadystatechange = null;
+          init();
+        }
+      };
+    }
+  };
+  var before = function (el, target) {
+    target.parentNode.insertBefore(el, target);
+  };
+  var prepend = function (el, target) {
+    if (target.firstChild) {
+      before(el, target.firstChild);
+    } else {
+      target.appendChild(el);
+    }
+  };
+  function appendSvg() {
+    var div, svg;
+    div = document.createElement('div');
+    div.innerHTML = svgSprite;
+    svgSprite = null;
+    svg = div.getElementsByTagName('svg')[0];
+    if (svg) {
+      svg.setAttribute('aria-hidden', 'true');
+      svg.style.position = 'absolute';
+      svg.style.width = 0;
+      svg.style.height = 0;
+      svg.style.overflow = 'hidden';
+      prepend(svg, document.body);
+    }
+  }
+  if (shouldInjectCss && !window.__iconfont__svg__cssinject__) {
+    window.__iconfont__svg__cssinject__ = true;
+    try {
+      document.write(
+        '<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>'
+      );
+    } catch (e) {
+      console && console.log(e);
+    }
+  }
+  ready(appendSvg);
+})(window);

package/templates/pc/src/assets/fonts/iconfont.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    
+
+    
+    <glyph glyph-name="clock" unicode="&#58886;" d="M821.76 20.28800000000001l33.344-33.28c18.688-18.56 37.568-37.056 56-55.936a33.792 33.792 0 0 0-15.36-57.088 33.984 33.984 0 0 0-34.112 10.24l-89.984 89.92c-1.792 1.792-2.88 4.288-3.52 5.312-171.584-97.152-340.864-97.088-511.04-0.768-1.152-1.088-3.072-2.816-4.864-4.672-30.4-30.272-60.544-60.672-91.136-90.752a33.92 33.92 0 0 0-56.96 13.568c-4.096 13.632-0.32 25.408 9.728 35.456l82.56 82.304c1.856 1.792 4.224 3.072 6.4 4.672C88.576 121.856 30.08 247.808 34.944 400c4.224 133.376 57.6 245.888 155.904 336.32C380.608 910.848 678.72 899.84 857.984 712.3199999999999a476.8 476.8 0 0 0-36.224-692.032zM102.4 383.67999999999995c0-225.024 183.232-408.64 407.872-408.768 227.648-0.128 410.688 181.632 411.072 408.192 0.384 225.856-183.424 409.472-409.472 409.216C285.696 792.064 102.4 609.152 102.4 383.67999999999995zM199.872 895.232c5.888-1.152 12.16-1.472 17.728-3.584 14.72-5.44 23.552-21.248 21.12-36.096a33.472 33.472 0 0 0-32.448-29.056c-30.592-0.576-58.624-8.832-83.008-27.52-35.968-27.456-53.888-64.256-55.04-109.312a32.448 32.448 0 0 0-19.52-30.272 32.192 32.192 0 0 0-34.688 3.392 32.512 32.512 0 0 0-13.824 28.608C2.304 763.52 32.896 820.16 92.672 860.8 124.8 882.56 160.832 892.992 199.872 895.232zM1023.744 693.504a34.368 34.368 0 0 0-44.16-36.096 33.984 33.984 0 0 0-24.064 33.024 131.84 131.84 0 0 1-20.416 70.848c-26.88 41.984-65.664 63.36-115.456 65.024-24.576 0.832-40.64 22.912-32.768 45.312a33.536 33.536 0 0 0 33.28 22.592c76.288-2.048 134.72-35.648 174.976-100.288 18.24-29.312 27.072-61.76 28.608-100.416zM477.952 486.016c0 33.92-0.128 67.84 0 101.696a33.472 33.472 0 0 0 22.848 32.384 34.176 34.176 0 0 0 37.632-10.88c5.76-7.04 7.744-15.36 7.744-24.32 0-60.032 0-120-0.128-180.032 0-5.12 1.344-8.704 5.056-12.288 40.128-39.808 80.128-79.744 120.064-119.808 15.36-15.36 14.976-38.016-0.448-51.2a33.856 33.856 0 0 0-45.76 1.216c-9.408 8.896-18.368 18.24-27.52 27.392-35.2 35.072-70.272 70.4-105.664 105.216a43.648 43.648 0 0 0-14.016 33.92c0.512 32.256 0.192 64.448 0.192 96.704z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

package/templates/pc/src/assets/style/app.less

@@ -0,0 +1,5 @@
+@import "./variable";
+@import "@winner-fed/magicless/magicless.less";
+@import "@winner-fed/magicless/reset.less";
+@import (less) "../fonts/iconfont.css";
+@import "./main";

package/templates/pc/src/assets/style/main.less

@@ -0,0 +1,39 @@
+.iconfont {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.no-data {
+  padding: 10px 0;
+  font-size: 16px;
+  color: #999;
+  text-align: center;
+}
+
+.pages {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: @fontSizeH3;
+}
+
+.page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translate3d(0, 0, 0);
+  box-sizing: border-box;
+}
+
+.page-content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  background-color: @colorWhite;
+  box-sizing: border-box;
+  .scrollable();
+}

package/templates/pc/src/assets/style/variable.less

@@ -0,0 +1,53 @@
+// color
+@colorBlueMain: #43a9f1;
+@colorBlueLight: #49b2f5;
+@colorBlueText: #0076ff;
+
+@colorGrayMain: #414141;
+@colorGrayLight: #f3f3f3;
+@colorGrayAssist: #e1e1e1;
+@colorBorder: #e9e9e9;
+@colorGray: #c8c8c8;
+@colorAfter: #eee;
+@tabBorder: #d9d9d9;
+
+@colorWhite: #fff;
+@colorBlack: #333;
+
+// font
+@fontColor: @colorGrayMain;
+@fontColorBlack: @colorBlack;
+@fontColorLight: @colorGrayLight;
+@fontColorAssist: @colorGrayAssist;
+
+// bg
+@bgColor: #f2f2f2;
+@bgColorLight: #f7f7f7;
+
+//line
+@colorLine: @colorGrayAssist;
+
+//colorAssist
+@colorRed: #ff5648;
+@colorGreen: #47b34f;
+@colorOrange: #ffaf32;
+@colorOrangeLight: #ffb42f;
+
+//fontSize
+@fontSizeH1: 20px;
+@fontSizeH2: 16px;
+@fontSizeH3: 14px;
+@fontSizeH4: 12px;
+
+// mobile
+@fontFamilyUltralight: "PingFangSC-Ultralight", "Source Han Sans CN", "Helvetica Neue";
+@fontFamilyRegular: "PingFangSC-Regular", "Source Han Sans CN", "Helvetica Neue";
+@fontFamilyMedium: "PingFangSC-Medium", "Source Han Sans CN Medium", "Helvetica Neue";
+@fontFamilyThin: "PingFangSC-Thin", "Source Han Sans CN Thin", "Helvetica Neue";
+@fontFamilyLight: "PingFangSC-Light", "Source Han Sans CN Light", "Helvetica Neue";
+@fontFamilySemibold: "PingFangSC-Semibold", "Source Han Sans CN Light", "Helvetica Neue";
+
+// pc
+@fontFamilyMedium: "PingFang-SC-medium", Helvetica, Tahoma, Arial, "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
+@fontFamilyRegular: "PingFang-SC-regular", Helvetica, Tahoma, Arial, "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
+@priceIntegerFontFamily: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;

package/templates/pc/src/constant.js

@@ -0,0 +1,5 @@
+export const TIMEOUT = 25000;
+export const PAGE_NUM = 15;
+export const UPLOAD_PREFIX = 'upload/';
+export const HOME_PREFIX = 'home/';
+

package/templates/pc/src/global.less

@@ -0,0 +1 @@
+@import "assets/style/app";

package/templates/pc/src/icons/cat.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1158 1024" xmlns="http://www.w3.org/2000/svg" width="226.172" height="200"><defs><style/></defs><path d="M57.6 838.4c-6.4 0-12.8-6.4-12.8-12.8-6.4-6.4 0-19.2 6.4-19.2L256 723.2c6.4-6.4 19.2 0 19.2 6.4 6.4 6.4 0 19.2-6.4 19.2L57.6 838.4c6.4 0 0 0 0 0zm492.8 140.8c-108.8 0-224-38.4-313.6-115.2-6.4-6.4-6.4-19.2 0-25.6 6.4-6.4 19.2-6.4 25.6 0 83.2 64 185.6 102.4 288 102.4 115.2 0 230.4-44.8 294.4-115.2 6.4-6.4 19.2-6.4 25.6 0 6.4 6.4 6.4 19.2 0 25.6-70.4 76.8-192 128-320 128zm409.6-352c-6.4 0-19.2-6.4-19.2-19.2 0-179.2-179.2-332.8-390.4-332.8S160 428.8 160 608c0 6.4-6.4 19.2-19.2 19.2s-19.2-12.8-19.2-19.2c0-198.4 192-371.2 428.8-371.2 230.4 0 428.8 166.4 428.8 371.2 0 6.4-12.8 19.2-19.2 19.2zm-940.8 64c-6.4 0-12.8-6.4-19.2-19.2 0-6.4 6.4-19.2 12.8-19.2l204.8-19.2c6.4 0 19.2 6.4 19.2 12.8s0 19.2-12.8 25.6L19.2 691.2zm1049.6 147.2h-6.4l-211.2-89.6c-6.4-6.4-12.8-12.8-6.4-19.2 6.4-6.4 12.8-12.8 19.2-6.4l211.2 89.6c6.4 6.4 12.8 12.8 6.4 19.2 0 0-6.4 6.4-12.8 6.4zm12.8-147.2L864 665.6c-6.4 0-12.8-6.4-12.8-19.2 0-6.4 6.4-12.8 19.2-12.8l217.6 25.6c6.4 0 12.8 6.4 12.8 19.2-6.4 6.4-12.8 12.8-19.2 12.8zm-608 89.6c-19.2 0-38.4-12.8-51.2-25.6-12.8-19.2-19.2-38.4-19.2-64 0-6.4 12.8-12.8 19.2-12.8 6.4 0 12.8 12.8 12.8 19.2 0 12.8 0 32 12.8 38.4 6.4 6.4 12.8 6.4 25.6 6.4s51.2 0 51.2-70.4c0-6.4 6.4-19.2 19.2-19.2s19.2 6.4 19.2 19.2c0 70.4-32 108.8-89.6 108.8z"/><path d="M614.4 787.2c-38.4 0-83.2-19.2-83.2-115.2 0-6.4 6.4-19.2 19.2-19.2s19.2 6.4 19.2 19.2c0 70.4 25.6 76.8 44.8 76.8 12.8 0 25.6-6.4 32-12.8 6.4-6.4 12.8-19.2 12.8-38.4 0-6.4 6.4-19.2 12.8-19.2s19.2 6.4 19.2 12.8c6.4 19.2 0 44.8-19.2 64-12.8 19.2-38.4 32-57.6 32zM345.6 486.4a44.8 44.8 0 1 0 89.6 0 44.8 44.8 0 1 0-89.6 0zm313.6 0a44.8 44.8 0 1 0 89.6 0 44.8 44.8 0 1 0-89.6 0zm-486.4-12.8c-12.8 0-12.8-6.4-19.2-12.8-25.6-147.2-6.4-262.4 44.8-339.2 0-6.4 6.4-6.4 12.8-6.4s12.8 0 12.8 6.4l6.4 6.4 172.8 147.2c6.4 6.4 6.4 12.8 6.4 12.8 0 6.4-6.4 12.8-12.8 12.8-76.8 19.2-147.2 76.8-211.2 160 0 6.4-6.4 12.8-12.8 12.8zm44.8-320c-38.4 64-44.8 153.6-32 262.4 51.2-64 108.8-115.2 172.8-140.8L217.6 153.6zm704 320c-6.4 0-12.8 0-12.8-6.4-51.2-83.2-128-140.8-211.2-166.4-6.4 0-12.8-6.4-12.8-12.8s0-12.8 6.4-12.8l179.2-153.6c6.4-6.4 6.4-6.4 12.8-6.4s6.4 0 12.8 6.4c51.2 76.8 64 179.2 38.4 339.2 0 0 0 6.4-12.8 12.8zM736 275.2c64 25.6 128 70.4 172.8 134.4 12.8-115.2 0-198.4-32-256L736 275.2z"/></svg>

package/templates/pc/src/icons/dog.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1152 1024" xmlns="http://www.w3.org/2000/svg" width="225" height="200"><defs><style/></defs><path d="M960 806.4c-32 0-57.6-6.4-76.8-25.6-32-19.2-51.2-51.2-51.2-76.8V377.6h32V704c0 12.8 12.8 38.4 32 51.2 19.2 12.8 51.2 25.6 96 12.8 25.6-6.4 44.8-25.6 57.6-51.2 32-57.6 25.6-153.6-12.8-249.6-64-134.4-230.4-332.8-460.8-326.4-262.4 19.2-390.4 192-454.4 332.8-44.8 108.8-51.2 204.8-19.2 256 19.2 25.6 44.8 38.4 83.2 38.4 76.8 0 102.4-25.6 102.4-83.2V384h32v300.8c0 76.8-44.8 115.2-134.4 115.2-44.8 0-83.2-19.2-108.8-51.2-38.4-64-32-172.8 12.8-288C160 307.2 294.4 128 576 115.2c243.2-12.8 428.8 198.4 486.4 352 44.8 102.4 44.8 211.2 12.8 275.2-19.2 32-44.8 57.6-76.8 64H960z"/><path d="M684.8 505.6a44.8 44.8 0 1 0 89.6 0 44.8 44.8 0 1 0-89.6 0zm-307.2 0a44.8 44.8 0 1 0 89.6 0 44.8 44.8 0 1 0-89.6 0zm32 371.2c-64 0-121.6-38.4-147.2-108.8l32-12.8c25.6 64 70.4 89.6 128 83.2 96 0 147.2-64 147.2-128h32c0 32 12.8 64 38.4 89.6 25.6 25.6 64 38.4 108.8 38.4 64-6.4 102.4-32 128-89.6l32 12.8c-25.6 64-76.8 96-153.6 102.4-51.2 0-96-12.8-134.4-44.8-12.8-12.8-25.6-25.6-32-44.8-25.6 51.2-76.8 89.6-160 89.6-12.8 12.8-19.2 12.8-19.2 12.8z"/><path d="M582.4 736l-140.8-76.8 64-70.4h147.2l51.2 76.8L582.4 736zm-89.6-89.6l89.6 51.2 76.8-44.8-19.2-32H518.4l-25.6 25.6zm96 332.8H576c-44.8-6.4-102.4-32-89.6-134.4h32c-6.4 83.2 32 96 64 96 19.2 0 38.4 0 44.8-12.8 12.8-12.8 25.6-44.8 19.2-83.2h32c6.4 51.2-6.4 89.6-32 108.8-12.8 12.8-32 25.6-57.6 25.6z"/><path d="M582.4 896c-6.4 0-12.8-6.4-12.8-12.8V742.4c0-6.4 6.4-12.8 12.8-12.8s12.8 6.4 12.8 12.8v140.8c6.4 6.4-6.4 12.8-12.8 12.8z"/></svg>

package/templates/pc/src/layouts/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="pages">
+    <router-view v-slot="{ Component, route }">
+      <keep-alive>
+        <component v-if="route.meta.keepAlive" :key="route.path" :is="Component" />
+      </keep-alive>
+      <component v-if="!route.meta.keepAlive" :key="route.path" :is="Component" />
+    </router-view>
+    <!--    Vue2 Vue-router3.x 使用如下代码-->
+    <!--    <keep-alive>-->
+    <!--      <router-view v-if="$route.meta.keepAlive" />-->
+    <!--    </keep-alive>-->
+    <!--    <router-view v-if="!$route.meta.keepAlive" />-->
+  </div>
+</template>
+<script setup></script>

package/templates/pc/src/pages/docs.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p>This is win docs.</p>
+  </div>
+</template>

package/templates/pc/src/pages/hello/index.vue

@@ -0,0 +1,88 @@
+<script setup>
+  import { ref } from 'vue';
+  /**
+   * 以下仅为事例代码，可以随意扩展修改
+   */
+  import services from '@/services';
+
+  const title = ref('Welcome to Your Vue.js App.');
+
+  function movieComingSoon() {
+    const data = {};
+    services
+      .octocat({
+        method: 'get',
+        data
+      })
+      .then((res) => {
+        console.log('接口请求成功：' + JSON.stringify(res, null, 2));
+      })
+      .catch((err) => {
+        console.log('接口请求异常：' + err);
+      });
+  }
+
+  movieComingSoon();
+</script>
+<template>
+  <div class="page page-hello">
+    <div class="page-content">
+      <!-- 静态资源路径写法事例 -->
+      <img class="logo" src="@/assets/img/logo.png" alt="logo" />
+      <icon-win name="dog" class="icons" />
+      <h1>{{ title }}</h1>
+      <div class="demo">
+        <h3>方法示例</h3>
+        <pre>
+          &lt;script setup&gt;
+          /**
+           * 以下仅为事例代码，可以随意扩展修改
+           */
+          // 工具类
+          import { formatDate } from &#x27;
+import { ref } from &#x27;
+import services from &#x27;
+utils&#x27;;
+vue&#x27;;
+@/services&#x27;;
+
+          const msg = ref(&#x27;Welcome to Your Vue.js App.This a composition-api and setup demo&#x27;);
+          const message = ref(&#x27;现在时间是：&#x27; + formatDate(Date.now()));
+
+          function movieComingSoon () {
+            const data = {};
+            services
+                .octocat({
+                  method: &#x27;get&#x27;,
+                  data
+                })
+                .then((res) =&gt; {
+                  console.log(&#x27;接口请求成功：&#x27; + JSON.stringify(res, null, 2));
+                })
+                .catch((err) =&gt; {
+                  console.log(&#x27;接口请求异常：&#x27; + err);
+                });
+          }
+
+          movieComingSoon();
+        &lt;/script&gt;
+        &lt;template&gt;
+          &lt;div class=&quot;page page-hello&quot;&gt;
+            &lt;div class=&quot;page-content&quot;&gt;
+              &lt;!-- 静态资源路径写法事例 --&gt;
+              &lt;img src=&quot;@/assets/img/logo.png&quot; /&gt;
+              &lt;h1 v-text=&quot;msg&quot;&gt;&lt;/h1&gt;
+              &lt;h2 v-text=&quot;message&quot;&gt;&lt;/h2&gt;
+              &lt;svg-icon icon-name=&quot;dog&quot;&gt;&lt;/svg-icon&gt;
+            &lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/template&gt;
+
+        &lt;style lang=&quot;less&quot; scoped src=&quot;./style.less&quot;&gt;&lt;/style&gt;
+        </pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped src="./style.less"></style>

package/templates/pc/src/pages/hello/style.less

@@ -0,0 +1,41 @@
+.page-hello {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+
+  .icons {
+    font-size: 30px;
+    color: #ff0000;
+  }
+
+  .page-content {
+    padding: 0 15px;
+  }
+
+  h1 {
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  p {
+    line-height: 23px;
+  }
+
+  a {
+    color: #42b983;
+  }
+
+  .logo {
+    width: 200px;
+    height: 200px;
+    display: block;
+    margin: 30px auto;
+  }
+
+  .demo {
+    padding-top: 25px;
+    margin: 0 auto;
+    text-align: left;
+  }
+}

package/templates/pc/src/pages/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h2>Hi! Welcome to Winjs ❤️ vue!</h2>
+    <p>
+      <img src="@/assets/img/logo.png" width="200" height="200" alt="logo" />
+    </p>
+    <p>To get started, edit <code>pages/index.vue</code> and save to reload.</p>
+  </div>
+</template>

package/templates/pc/src/services/RESTFULURL.js

@@ -0,0 +1,3 @@
+export default {
+  octocat: 'octocat'
+};

package/templates/pc/src/services/autoMatchBaseUrl.js

@@ -0,0 +1,18 @@
+import { UPLOAD_PREFIX } from '@/constant';
+
+/**
+ * 根据前缀，自动匹配基础的url
+ * 根据项目所需，自己扩展
+ * @param prefix
+ * @returns {string}
+ */
+export default function autoMatchBaseUrl(prefix = '') {
+  let baseUrl = '';
+  if (prefix === UPLOAD_PREFIX) {
+    baseUrl = window.LOCAL_CONFIG.API_UPLOAD;
+  } else {
+    baseUrl = window.LOCAL_CONFIG.API_HOME;
+  }
+
+  return baseUrl;
+}

package/templates/pc/src/services/index.js

@@ -0,0 +1,11 @@
+import request from './request';
+import urls from './RESTFULURL';
+
+const FUNS = {};
+
+Object.keys(urls).forEach((key) => {
+  FUNS[key] = (options = {}) => {
+    return request(urls[key], options);
+  };
+});
+export default FUNS;

package/templates/pc/src/services/request.js

@@ -0,0 +1,178 @@
+import { TIMEOUT } from '@/constant';
+import { request } from 'winjs';
+import autoMatchBaseUrl from './autoMatchBaseUrl';
+
+const codeMessage = {
+  200: '服务器成功返回请求的数据。',
+  201: '新建或修改数据成功。',
+  202: '一个请求已经进入后台排队（异步任务）。',
+  204: '删除数据成功。',
+  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+  401: '用户没有权限（令牌、用户名、密码错误）。',
+  403: '用户得到授权，但是访问是被禁止的。',
+  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+  406: '请求的格式不可得。',
+  410: '请求的资源被永久删除，且不会再得到的。',
+  422: '当创建一个对象时，发生一个验证错误。',
+  500: '服务器发生错误，请检查服务器。',
+  502: '网关错误。',
+  503: '服务不可用，服务器暂时过载或维护。',
+  504: '网关超时。'
+};
+
+export function responseLog(response) {
+  if (process.env.NODE_ENV === 'development') {
+    const randomColor = `rgba(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(
+      Math.random() * 255
+    )})`;
+    console.log('%c┍------------------------------------------------------------------┑', `color:${randomColor};`);
+    console.log('| 请求地址：', response.config.url);
+    console.log('| 请求参数：', JSON.parse(response.config.data));
+    console.log('| 返回数据：', response.data);
+    console.log('%c┕------------------------------------------------------------------┙', `color:${randomColor};`);
+  } else {
+    console.log('| 请求地址：', response.config.url);
+    console.log('| 请求参数：', JSON.parse(response.config.data));
+    console.log('| 返回数据：', response.data);
+  }
+}
+
+export function checkStatus(response) {
+  // 如果http状态码正常，则直接返回数据
+  if (response) {
+    const { status, statusText } = response;
+    if ((status >= 200 && status < 300) || status === 304) {
+      // 如果不需要除了data之外的数据，可以直接 return response.data
+      return response;
+    }
+    return {
+      status,
+      msg: codeMessage[status] || statusText
+    };
+  }
+  // 异常状态下，把错误信息返回去
+  return {
+    status: -404,
+    msg: '网络异常'
+  };
+}
+
+/**
+ * requestInstance 实例全局请求扩展配置
+ * 添加一个请求拦截器 （于transformRequest之前处理）
+ */
+export const httpRequest = {
+  success: (config) => {
+    // 以下代码，鉴权token,可根据具体业务增删。
+    // demo示例:
+    if (config['url'].indexOf('operatorQry') !== -1) {
+      config.headers['accessToken'] = 'de4738c67e1bb450be71b660f0716aa4675860cec1ff9bc23d800efb40519cf3';
+    }
+    return config;
+  },
+  error: (error) => Promise.reject(error)
+};
+
+/**
+ * requestInstance 实例全局请求响应处理
+ * 添加一个返回拦截器 （于transformResponse之后处理）
+ * 返回的数据类型默认是json，若是其他类型（text）就会出现问题，因此用try,catch捕获异常
+ */
+export const httpResponse = {
+  success: (response) => {
+    responseLog(response);
+    return checkStatus(response);
+  },
+  error: (error) => {
+    const { response, code } = error;
+    // 接口请求异常统一处理
+    if (code === 'ECONNABORTED') {
+      // Timeout error
+      console.log('Timeout error', code);
+    }
+    if (response) {
+      // 请求已发出，但是不在2xx的范围
+      // 对返回的错误进行一些处理
+      return Promise.reject(checkStatus(response));
+    } else {
+      // 处理断网的情况
+      // eg:请求超时或断网时，更新state的network状态
+      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
+      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
+      console.log('断网了~');
+    }
+  }
+};
+
+// 兼容处理
+// 格式化 restful 接口形式
+function formatURL(path, queryParams) {
+  const params = {
+    ...(queryParams || {})
+  };
+
+  const url = path.replace(/\{([^\\}]*(?:\\.[^\\}]*)*)\}/gm, (match, key) => {
+    // eslint-disable-next-line no-param-reassign
+    key = key.trim();
+
+    if (params[key] !== undefined) {
+      const value = params[key];
+      delete params[key];
+      return value;
+    }
+    console.warn('Please set value for template key: ', key);
+    return '';
+  });
+
+  return url;
+}
+
+/**
+ * 基于 request 请求
+ * @param url
+ * @param method
+ * @param timeout
+ * @param prefix 用来拼接url地址
+ * @param data
+ * @param headers
+ * @param dataType
+ * @returns {Promise.<T>}
+ */
+export default function (
+  url,
+  { method = 'post', timeout = TIMEOUT, prefix = '', data = {}, headers = {}, dataType = 'json' }
+) {
+  const baseURL = autoMatchBaseUrl(prefix);
+
+  const formatHeaders = {
+    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+    ...headers
+  };
+
+  const defaultConfig = {
+    baseURL,
+    url: formatURL(url, data),
+    method,
+    params: data,
+    data,
+    timeout,
+    headers: formatHeaders,
+    responseType: dataType
+  };
+
+  if (method.toLowerCase() === 'get') {
+    // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+    defaultConfig.params = Object.assign(defaultConfig.params || {}, { _t: new Date().getTime() });
+  }
+
+  return request(defaultConfig.url, defaultConfig);
+}
+
+// 上传文件封装
+export const uploadFile = (url, formData) => {
+  return request(url, {
+    method: 'post',
+    data: formData,
+    headers: { 'Content-Type': 'multipart/form-data' }
+  });
+};

package/templates/pc/tsconfig.json.tpl

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.win/tsconfig.json"
+}

package/templates/pc/typings.d.ts

@@ -0,0 +1 @@
+import 'win/typings';

package/templates/plugin/.fatherrc.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  cjs: {},
+});

package/templates/plugin/.gitignore.tpl

@@ -0,0 +1,2 @@
+node_modules
+/dist

package/templates/plugin/.npmrc.tpl

@@ -0,0 +1,2 @@
+registry={{{ registry }}}
+{{{ extraNpmrc }}}