feature: svg

lib/thread.js

@@ -20,7 +20,6 @@ function workLoop() {
         else {
             thread.pause();
         }
-        thread.pause();
     });
     if (Thread.isAllEmpty()) {
         isLooping = false;
@@ -65,7 +64,7 @@ class Thread {
         this.options = {
             priority: 0,
         };
-        this.status = "normal";
+        this.status = "paused";
         this.samePriorityLength = 0;
         this.startTime = 0;
         this.runner = runner;
@@ -73,12 +72,14 @@ class Thread {
         this.options = Object.assign(this.options, options);
     }
     start() {
+        this.status = "running";
         this.startTime = Date.now();
         if (!isLooping) {
             workLoop();
         }
     }
     pause() {
+        this.status = "paused";
         this.startTime = 0;
     }
     exec() {
@@ -94,6 +95,7 @@ class Thread {
         this.runner = undefined;
         this.options = undefined;
         this.taskUnit = undefined;
+        this.status = "destroyed";
     }
     get shouldYield() {
         return Date.now() > this.startTime + this.yieldInterval;

src/App.vue

@@ -2,32 +2,38 @@
   <div id="app">
     <nav-bar />
     <div class="wrap">
-      <left-aside class="menu"></left-aside>
+      <left-aside class="menu" v-if="isSdk"></left-aside>
       <div class="right"><router-view /></div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 import NavBar from "@/components/navBar.vue";
 import LeftAside from "@/components/leftAside.vue";
-export default {
-  components: { NavBar, LeftAside },
-  setup() {},
-};
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+const isSdk = computed(() => useRoute().fullPath.startsWith("/sdk"));
 </script>
 
 <style lang="less">
+@font-face {
+  font-family: MiSans Regular;
+  src: url("./fonts/MiSans-Regular.ttf");
+}
+
 html,
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #444;
 }
 
 body {
+  font-family: -apple-system, MiSans Regular, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
   font-size: 14px !important;
   /* prettier-ignore */
   min-width: 700PX;

src/main.js

@@ -1,9 +1,10 @@
+import "reset-css";
+
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import { flexible } from "../lib";
-import "reset-css";
 
 import "axios";
 

src/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ES2015",
+    "removeComments": true,
+    "module": "ES2015",
+    "esModuleInterop": true,   
+    "skipLibCheck": true, 
+    "importHelpers": true,     
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "allowJs": true,
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": ["*"]
+    },
+  },
+}

src/views/svg/components/svgRect.vue

@@ -0,0 +1,8 @@
+<template>
+  <g>
+    <rect x="0" y="100" width="100" height="100" fill="#59fa81" />
+    <rect x="100" y="0" width="100" height="100" fill="#59fa81" />
+  </g>
+</template>
+
+<script setup></script>

src/views/svg/index.vue

@@ -1,34 +1,39 @@
 <template>
-  <div>
-    <Block
-      title="Async"
-      desc="这里主要是异步遍历的函数集合，函数会等待上一次异步结束才会开始下一个"
+  <div class="flow-wrap">
+    <!-- <svg
+      version="1.1"
+      baseProfile="full"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      xmlns:ev="http://www.w3.org/2001/xml-events"
     >
-      <p class="demo">DEMO</p>
-      <Codemirror v-model="code" :disabled="true" />
-    </Block>
+      <rect x="0" y="0" width="10" height="10" fill="blue" />
+      <text x="5" y="30">A nice rectangle</text>
+      <circle cx="50" cy="50" r="50" fill="#529fca" />
+      <polygon
+        points="9.9, 2.2, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"
+      />
+
+      <SvgRect />
+    </svg> -->
   </div>
 </template>
 
 <script setup>
-import Block from "@/components/block.vue";
-import { ref } from "vue";
-import { Codemirror } from "vue-codemirror";
-
-const code = ref(`import { asyncWhile, asyncForEach, nextTick } from "ludash";
-
-asyncForEach([1, 2, 3, 4, 5], async (it, index) => {
-  await nextTick(1000);
-  console.log(it, index);
-  // return false 则会中断执行
-  return true;
-});
-
-asyncWhile(
-  // checker 这是判断函数
-  async (index) => index < 10,
-  async (index) => {
-    console.log(index);
-  }
-);`);
+import SvgRect from "./components/svgRect.vue";
 </script>
+
+<style lang="less" scoped>
+.flow-wrap {
+  height: 45px;
+  background-color: blue;
+  background-image: linear-gradient(
+      transparent 0px,
+      transparent 2px,
+      #fff 2px,
+      #fff 15px
+    ),
+    linear-gradient(90deg, #999 0px, #999 2px, #fff 2px, #fff 15px);
+  background-size: 15px 15px, 15px 15px;
+}
+</style>

tsconfig.json

@@ -19,6 +19,6 @@
     },
     "moduleResolution": "node"
   },
-  "include": ["sdk/**/*.ts", "src/**/*"],
+  "include": ["sdk/**/*.ts"],
   "exclude": ["node_modules"]
 }

types/thread.d.ts

@@ -11,7 +11,7 @@ declare class Thread {
     runner: Runner;
     taskUnit: unknown;
     options: ThreadOptions;
-    status: "normal" | "destroyed";
+    status: "running" | "destroyed" | "paused";
     samePriorityLength: number;
     private startTime;
     constructor(runner: Runner, taskUnit: unknown, options: ThreadOptions);

vue.config.js

@@ -28,15 +28,15 @@ module.exports = defineConfig({
               ],
               grid: true,
             }),
-            require("postcss-pxtorem")({
-              rootValue: 140, //设计稿宽度%10 比如 1920
-              exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module|src)/
-              propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为["*"]全部，假设需要仅对边框进行设置，可以写]['*','!border*']
-              //selectorBlackList :['.box'],//，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
-              replace: true, //替换包含rems的规则。
-              mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
-              minPixelValue: 0, //设置要替换的最小像素值(3px会被转rem)。 默认 0
-            }),
+            // require("postcss-pxtorem")({
+            //   rootValue: 140, //设计稿宽度%10 比如 1920
+            //   exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module|src)/
+            //   propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为["*"]全部，假设需要仅对边框进行设置，可以写]['*','!border*']
+            //   //selectorBlackList :['.box'],//，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
+            //   replace: true, //替换包含rems的规则。
+            //   mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
+            //   minPixelValue: 0, //设置要替换的最小像素值(3px会被转rem)。 默认 0
+            // }),
           ],
         },
       },