Home Esplora Aiuto
Registrati Accedi
TwoKe
/
zhgkpt-datav
1
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

feat: 屏幕适配

TwoKe945 1 anno fa
parent
0ba3451e07
commit
6057dfacd0
20 ha cambiato i file con 1661 aggiunte e 306 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 8 0
      app/.postcssrc.js
  2. 1 1
      app/index.html
  3. 2 3
      app/package.json
  4. 79 0
      app/plugins/px2viewport.js
  5. 9 3
      app/src/App.vue
  6. 2 1
      app/src/assets/main.css
  7. 140 121
      app/src/components/Headers.vue
  8. 2 0
      app/src/main.js
  9. 43 27
      app/src/views/HomeView.vue
  10. 3 7
      components/BorderPanel/data.js
  11. 3 3
      components/BorderPanel/index.js
  12. 38 29
      components/BorderPanel/index.vue
  13. 3 3
      components/LinearText/index.js
  14. 18 19
      components/LinearText/index.vue
  15. 2 2
      components/index.js
  16. 1236 0
      package-lock.json
  17. 7 0
      package.json
  18. 61 83
      pnpm-lock.yaml
  19. 1 0
      pnpm-workspace.yaml
  20. 3 4
      utils/index.js

+ 8 - 0
app/.postcssrc.js
Vedi File 

@@ -0,0 +1,8 @@
 
+module.exports = {
 
+  plugins: {
 
+    "postcss-px-to-viewport": {
 
+      viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
 
+      viewportHeight: 1080, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
 
+    },
 
+  }
 
+}

+ 1 - 1
app/index.html
Vedi File 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <link rel="icon" href="/favicon.ico" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
 
     <title>Vite App</title>
 
   </head>
 
   <body>

+ 2 - 3
app/package.json
Vedi File 

@@ -14,15 +14,14 @@
 
     "lib-flexible": "^0.3.2",
 
     "pinia": "^2.0.16",
 
     "vue": "^2.7.7",
 
-    "vue-router": "^3.5.4"
 
+    "vue-router": "^3.5.4",
 
+    "vue2-scale-box": "^0.1.6"
 
   },
 
   "devDependencies": {
 
     "@vitejs/plugin-legacy": "^2.0.0",
 
     "@vitejs/plugin-vue2": "^1.1.2",
 
     "@vitejs/plugin-vue2-jsx": "^1.0.2",
 
     "autoprefixer": "^10.4.14",
 
-    "postcss-plugin-px2rem": "^0.8.1",
 
-    "postcss-px-to-viewport": "^1.1.1",
 
     "terser": "^5.14.2",
 
     "vite": "^3.0.2",
 
     "vitest": "^0.18.1",

+ 79 - 0
app/plugins/px2viewport.js
Vedi File 

@@ -0,0 +1,79 @@
 
+/* eslint-env node */
 
+const postcss = require("postcss");
 
+
 
+// excluding regex trick: http://www.rexegg.com/regex-best-trick.html
 
+// Not anything inside double quotes
 
+// Not anything inside single quotes
 
+// Not anything inside url()
 
+// Any digit followed by px
 
+// !singlequotes|!doublequotes|!url()|pixelunit
 
+const pxRegex = /"[^"]+"|'[^']+'|url\([^\)]+\)|(\d*\.?\d+)px/gi;
 
+
 
+const defaults = {
 
+  viewportWidth: 750,
 
+  viewportUnit: "vmin",
 
+  propertyBlacklist: [],
 
+  minPixelValue: 2,
 
+  enableConvertComment: "on",
 
+  disableConvertComment: "off",
 
+  mediaQuery: false,
 
+};
 
+
 
+module.exports = postcss.plugin(
 
+  "postcss-pixel-to-viewport",
 
+  function (options) {
 
+    const opts = Object.assign({}, defaults, options);
 
+    const pxReplace = createPxReplace(
 
+      opts.viewportWidth,
 
+      opts.minPixelValue,
 
+      opts.viewportUnit
 
+    );
 
+
 
+    return function (css) {
 
+      css.walkDecls(function (decl, i) {
 
+        const next = decl.next();
 
+        const commentText = next && next.type == "comment" && next.text;
 
+        if (
 
+          decl.value.indexOf("px") === -1 ||
 
+          commentText === opts.disableConvertComment
 
+        ) {
 
+          commentText === opts.disableConvertComment && next.remove();
 
+          return;
 
+        }
 
+        if (
 
+          commentText === opts.enableConvertComment ||
 
+          !blacklistedProperty(opts.propertyBlacklist, decl.prop)
 
+        ) {
 
+          commentText === opts.enableConvertComment && next.remove();
 
+          decl.value = decl.value.replace(pxRegex, pxReplace);
 
+        }
 
+      });
 
+
 
+      if (opts.mediaQuery) {
 
+        css.walkAtRules("media", function (rule) {
 
+          if (rule.params.indexOf("px") === -1) return;
 
+          rule.params = rule.params.replace(pxRegex, pxReplace);
 
+        });
 
+      }
 
+    };
 
+  }
 
+);
 
+
 
+function createPxReplace(viewportSize, minPixelValue, viewportUnit) {
 
+  return function (m, $1) {
 
+    if (!$1) return m;
 
+    const pixels = parseFloat($1);
 
+    if (pixels <= minPixelValue) return m;
 
+    return (
 
+      parseFloat(((pixels / viewportSize) * 100).toFixed(5)) + viewportUnit
 
+    );
 
+  };
 
+}
 
+
 
+function blacklistedProperty(blacklist, property) {
 
+  if (typeof property !== "string") return;
 
+  return blacklist.some(function (regex) {
 
+    if (typeof regex === "string") return property.indexOf(regex) !== -1;
 
+    return property.match(regex);
 
+  });
 
+}

+ 9 - 3
app/src/App.vue
Vedi File 

@@ -1,10 +1,16 @@
 
-<script>
 
+<script setup>
 
+import ScaleBox from 'vue2-scale-box'
 
 </script>
 
 
 <template>
 
-  <div id="app">
 
+  <ScaleBox
 
+    :width="1920"
 
+    :height="1080"
 
+    bgc="transparent"
 
+    :delay="100"
 
+  >
 
     <router-view />
 
-  </div>
 
+  </ScaleBox>
 
 </template>
 
 
 <style scoped>

+ 2 - 1
app/src/assets/main.css
Vedi File 

@@ -9,6 +9,7 @@ html,body {
 
   height: 100vh;
 
   width: 100vw;
 
   font-family: 'abel';
 
-  background:#000;
 
   color: #fff;
 
+  background: url("../../src/assets/homebg.png") center no-repeat;
 
+  background-size: 100% 100%;
 
 }

+ 140 - 121
app/src/components/Headers.vue
Vedi File 

@@ -1,147 +1,166 @@
 
 <template>
 
-    <div>
 
-<div class="header">
 
- <div class="title-card">  
-    <li class="bg-img" @click="ConfirmBtn(1)" :class="getClass(1)">
 
-        <img src="../assets/Vector.png" alt="">
 
-        <linear-text text="总览" startColor="#95CCFF" endColor="#fff"
 
-            fontSize="20px" />
 
-    </li> 
-    <ul   v-for="(item,index) in titleList" :key="index">   
-        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)">
 
-        <linear-text :text="item.name" startColor="#95CCFF" endColor="#fff"
 
-        fontSize="20px"
 
-      /></li> 
- </ul>
 
- </div>
 
- <div class="title-card"> 
-     <ul v-for="(item,index) in titleList1" :key="index" >  
-        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)"> <linear-text :text="item.name" startColor="#95CCFF" endColor="#fff"
 
+  <div>
 
+    <div class="header">
 
+      <div class="title-card">
 
+        <li class="bg-img" @click="ConfirmBtn(1)" :class="getClass(1)">
 
+          <img src="../assets/Vector.png" alt="" />
 
+          <linear-text
 
+            text="总览"
 
+            startColor="#95CCFF"
 
+            endColor="#fff"
 
             fontSize="20px"
 
-      /></li> 
- </ul>
 
- <li class="bg-img" @click="ConfirmBtn(8)" :class="getClass(8)">
 
-        <img src="../assets/out.png" alt="">   
-    </li> 
-</div>
 
-</div>
 
+          />
 
+        </li>
 
+        <ul v-for="(item, index) in titleList" :key="index">
 
+          <li
 
+            class="bg-img"
 
+            @click="ConfirmBtn(item.id)"
 
+            :class="getClass(item.id)"
 
+          >
 
+            <linear-text
 
+              :text="item.name"
 
+              startColor="#95CCFF"
 
+              endColor="#fff"
 
+              fontSize="20px"
 
+            />
 
+          </li>
 
+        </ul>
 
+      </div>
 
+      <div class="title-card">
 
+        <ul v-for="(item, index) in titleList1" :key="index">
 
+          <li
 
+            class="bg-img"
 
+            @click="ConfirmBtn(item.id)"
 
+            :class="getClass(item.id)"
 
+          >
 
+            <linear-text
 
+              :text="item.name"
 
+              startColor="#95CCFF"
 
+              endColor="#fff"
 
+              fontSize="20px"
 
+            />
 
+          </li>
 
+        </ul>
 
+        <li class="bg-img" @click="ConfirmBtn(8)" :class="getClass(8)">
 
+          <img src="../assets/out.png" alt="" />
 
+        </li>
 
+      </div>
 
     </div>
 
+  </div>
 
 </template>
 
 
-<script >
 
-import Image1 from '../assets/fxyj2.png'
 
-import Image2 from '../assets/fxyj4.png'
 
-import Image3 from '../assets/fxyj7.png'
 
-import Image4 from '../assets/fxyj8.png'
 
-export default{
 
-    data(){
 
-        return{
 
-            imgList:[
 
-            {load:Image1},
 
-            {load:Image2},
 
-            {load:Image3},
 
-            {load:Image4}
 
-            ],
 
-            titleList:[
 
-                {
 
-                    name:'基础信息',
 
-                    id:2
 
-                },
 
-                {
 
-                    name:'消防管理',
 
-                    id:3
 
-                },
 
-                {
 
-                    name:'风险预警',
 
-                    id:4
 
-                },
 
-            ],
 
-            titleList1:[
 
-                {
 
-                    name:'警情动态',
 
-                    id:5
 
-                },
 
-                {
 
-                    name:'火灾情况',
 
-                    id:6
 
-                },
 
-                {
 
-                    name:'消防物联网',
 
-                    id:7
 
-                },
 
-            
-            ],
 
-            test:1,
 
-            flag:1
 
-        }
 
-    },
 
-    mounted(){
 
-        console.log(this.test);
 
-    },
 
-    methods:{
 
-        ConfirmBtn(num){
 
-        this.flag=num
 
+<script>
 
+import Image1 from "../assets/fxyj2.png";
 
+import Image2 from "../assets/fxyj4.png";
 
+import Image3 from "../assets/fxyj7.png";
 
+import Image4 from "../assets/fxyj8.png";
 
+export default {
 
+  data() {
 
+    return {
 
+      imgList: [
 
+        { load: Image1 },
 
+        { load: Image2 },
 
+        { load: Image3 },
 
+        { load: Image4 },
 
+      ],
 
+      titleList: [
 
+        {
 
+          name: "基础信息",
 
+          id: 2,
 
+        },
 
+        {
 
+          name: "消防管理",
 
+          id: 3,
 
+        },
 
+        {
 
+          name: "风险预警",
 
+          id: 4,
 
         },
 
-        getClass(v){
 
-          return this.flag==v?'bg-img active':'bg-img'
 
-        }
 
+      ],
 
+      titleList1: [
 
+        {
 
+          name: "警情动态",
 
+          id: 5,
 
+        },
 
+        {
 
+          name: "火灾情况",
 
+          id: 6,
 
+        },
 
+        {
 
+          name: "消防物联网",
 
+          id: 7,
 
+        },
 
+      ],
 
+      test: 1,
 
+      flag: 1,
 
+    };
 
+  },
 
+  mounted() {
 
+    console.log(this.test);
 
+  },
 
+  methods: {
 
+    ConfirmBtn(num) {
 
+      this.flag = num;
 
     },
 
-    created() {
 
-        console.log(this)
 
-    }
 
-}
 
+    getClass(v) {
 
+      return this.flag == v ? "bg-img active" : "bg-img";
 
+    },
 
+  },
 
+  created() {
 
+    console.log(this);
 
+  },
 
+};
 
 </script>
 
 
-<style  scoped>
 
-.header{
 
+<style scoped>
 
+.header {
 
   width: 100%;
 
   height: 120px;
 
   /* background: url('../assets/top.png') center no-repeat; */
 
-  background: url('../assets/top.png') center no-repeat;
 
+  background: url("../assets/top.png") center no-repeat;
 
 
   display: flex;
 
   justify-content: space-between;
 
 }
 
-.title-card{
 
- /* width: 400px; */
 
-display: flex;
 
-padding: 40px 20px ;
 
-font-size: 20px;
 
+.title-card {
 
+  /* width: 400px; */
 
+  display: flex;
 
+  padding: 40px 20px;
 
+  font-size: 20px;
 
 }
 
-img{
 
+img {
 
   width: 16px;
 
   height: 15px;
 
 }
 
-.tab-list{
 
-    width: 100%;
 
-    display: flex;
 
-    justify-content: space-between;
 
+.tab-list {
 
+  width: 100%;
 
+  display: flex;
 
+  justify-content: space-between;
 
 }
 
-.bg-img{
 
-    width: 138px;
 
-    height: 48px;
 
-    font-size: 18px;
 
-    background: url('../assets/btn.png')  no-repeat;
 
-    background-size: 100% 100%;
 
-    text-align: center;
 
-    display: flex;
 
-    justify-content: center;
 
-    align-items: center;
 
-    padding-left: 10px;
 
-    line-height: 49px;
 
+.bg-img {
 
+  width: 138px;
 
+  height: 48px;
 
+  font-size: 18px;
 
+  background: url("../assets/btn.png") no-repeat;
 
+  background-size: 100% 100%;
 
+  text-align: center;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  padding-left: 10px;
 
+  line-height: 49px;
 
 }
 
-.bg-img:hover{
 
-    cursor: pointer;
 
+.bg-img:hover {
 
+  cursor: pointer;
 
 }
 
 /* 选中效果 */
 
-.active{
 
-    width: 150px;
 
-    height: 48px;
 
-    font-size: 18px;
 
-    background: url('../assets/active-btn.png')  no-repeat !important;
 
-    background-size: 100% 100%;
 
-    text-align: center;
 
-    line-height: 49px;
 
+.active {
 
+  width: 150px;
 
+  height: 48px;
 
+  font-size: 18px;
 
+  background: url("../assets/active-btn.png") no-repeat !important;
 
+  background-size: 100% 100%;
 
+  text-align: center;
 
+  line-height: 49px;
 
 }
 
-
 
 </style>

+ 2 - 0
app/src/main.js
Vedi File 

@@ -1,6 +1,7 @@
 
 import Vue from "vue";
 
 import { createPinia, PiniaVuePlugin } from "pinia";
 
 import DataVComponent from "@zhgkpt/components";
 
+import VScaleScreen from 'v-scale-screen'
 
 import App from "./App.vue";
 
 import router from "./router";
 
 
@@ -8,6 +9,7 @@ import "./assets/main.css";
 
 
 Vue.use(PiniaVuePlugin);
 
 Vue.use(DataVComponent);
 
+Vue.component("v-scale-screen", VScaleScreen);
 
 
 new Vue({
 
   router,

+ 43 - 27
app/src/views/HomeView.vue
Vedi File 

@@ -2,57 +2,73 @@
 
   <!-- <main>
 
     <header />
 
   </main> -->
 
-    <div class="home">
 
+  <div class="home">
 
     <Headers />
 
     <div>
 
-      <div style="padding: 0px 35px; display: flex; justify-content: space-between;">
 
+      <div
 
+        style="padding: 0px 35px; display: flex; justify-content: space-between"
 
+      >
 
         <div>
 
-        <border-panel height="302px" style="margin-bottom: 6px;" title="基础信息">
 
-          1111
 
-        </border-panel>
 
-        <border-panel height="346px" style="margin-bottom: 6px;"  title="隐患排查（一楼一策）">
 
-          2222
 
-        </border-panel>
 
-        <border-panel height="296px"  title="自主管理">
 
-          3333
 
-        </border-panel>
 
+          <border-panel
 
+            height="302px"
 
+            style="margin-bottom: 6px"
 
+            title="基础信息"
 
+          >
 
+            1111
 
+          </border-panel>
 
+          <border-panel
 
+            height="346px"
 
+            style="margin-bottom: 6px"
 
+            title="隐患排查（一楼一策）"
 
+          >
 
+            2222
 
+          </border-panel>
 
+          <border-panel height="296px" title="自主管理"> 3333 </border-panel>
 
         </div>
 
         <div class="display: flex;">
 
           <div style=""></div>
 
           <div>
 
-            <border-panel title="警情动态" width="938px" height="321px"  :header-type="1">
 
+            <border-panel
 
+              title="警情动态"
 
+              width="938px"
 
+              height="321px"
 
+              :header-type="1"
 
+            >
 
               4444
 
             </border-panel>
 
           </div>
 
         </div>
 
         <div>
 
-          <border-panel height="311px"  style="margin-bottom: 6px;" title="风险预警">
 
-          1111
 
+          <border-panel
 
+            height="311px"
 
+            style="margin-bottom: 6px"
 
+            title="风险预警"
 
+          >
 
+            1111
 
           </border-panel>
 
-          <border-panel height="331px"  style="margin-bottom: 6px;" title="智慧消防">
 
+          <border-panel
 
+            height="331px"
 
+            style="margin-bottom: 6px"
 
+            title="智慧消防"
 
+          >
 
             2222
 
           </border-panel>
 
-          <border-panel height="298px"  title="火灾指标">
 
-            3333
 
-          </border-panel>
 
+          <border-panel height="298px" title="火灾指标"> 3333 </border-panel>
 
         </div>
 
       </div>
 
     </div>
 
   </div>
 
 </template>
 
-<script >
 
+<script>
 
 import Headers from "@/components/Headers.vue";
 
-export default{
 
-components:{Headers}
 
-}
 
+export default {
 
+  components: { Headers },
 
+};
 
 </script>
 
 <style scoped>
 
-.home{
 
-  height: 100vh;
 
-  background: url("../../src/assets/homebg.png") center no-repeat; 
+.home {
 
+  background: url("../../src/assets/homebg.png") center no-repeat;
 
   background-size: 100% 100%;
 
   width: 100%;
 
-  overflow-x: hidden;
 
-  overflow-y: scroll;
 
 }
 
 </style>

+ 3 - 7
components/BorderPanel/data.js
Vedi File 

@@ -1,8 +1,4 @@
 
-import headerTitleBg1 from '../assets/border-panel_header_1.svg'
 
-import headerTitleBg2 from '../assets/border-panel_header_2.svg'
 
+import headerTitleBg1 from "../assets/border-panel_header_1.svg";
 
+import headerTitleBg2 from "../assets/border-panel_header_2.svg";
 
 
-
 
-export const headerTitleBgs = [
 
-  headerTitleBg1,
 
-  headerTitleBg2
 
-]
 
+export const headerTitleBgs = [headerTitleBg1, headerTitleBg2];

+ 3 - 3
components/BorderPanel/index.js
Vedi File 

@@ -1,4 +1,4 @@
 
-import BorderPanel from './index.vue'
 
-import { withInstall } from '@zhgkpt/utils'
 
+import BorderPanel from "./index.vue";
 
+import { withInstall } from "@zhgkpt/utils";
 
 
-export default withInstall(BorderPanel)
 
+export default withInstall(BorderPanel);

+ 38 - 29
components/BorderPanel/index.vue
Vedi File 

@@ -1,14 +1,20 @@
 
-<template >
 
+<template>
 
   <div class="border-panel" :style="borderPanelStyle">
 
-    <div class="border-panel_header" :style="{
 
-      backgroundImage: `url(${headerImageBgUrl})`
 
-    }" >
 
-      <linear-text :text="title" startColor="#95CCFF" endColor="#fff"
 
-        :extClass='{
 
-          top: "11px",
 
-          left: "35px",
 
-          textShadow: "0 1px 1px #0057FF"
 
-        }'
 
+    <div
 
+      class="border-panel_header"
 
+      :style="{
 
+        backgroundImage: `url(${headerImageBgUrl})`,
 
+      }"
 
+    >
 
+      <linear-text
 
+        :text="title"
 
+        startColor="#95CCFF"
 
+        endColor="#fff"
 
+        :extClass="{
 
+          top: '11px',
 
+          left: '35px',
 
+          textShadow: '0 1px 1px #0057FF',
 
+        }"
 
       />
 
     </div>
 
     <div class="border-panel_content">
 
@@ -17,8 +23,8 @@
 
   </div>
 
 </template>
 
 
-<script >
 
-import { headerTitleBgs } from './data'
 
+<script>
 
+import { headerTitleBgs } from "./data";
 
 import LinearText from "../LinearText";
 
 /**
 
  * 边框面板
 
@@ -26,42 +32,41 @@ import LinearText from "../LinearText";
 
 export default {
 
   name: "BorderPanel",
 
   components: {
 
-    LinearText
 
+    LinearText,
 
   },
 
   props: {
 
     title: {
 
       type: String,
 
-      default: "标题"
 
+      default: "标题",
 
     },
 
     width: {
 
       type: String,
 
-      default: '443px'
 
+      default: "443px",
 
     },
 
     height: {
 
       type: String,
 
-      default: '200px'
 
+      default: "200px",
 
     },
 
     headerType: {
 
       type: Number,
 
-      default: 0
 
-    }
 
+      default: 0,
 
+    },
 
   },
 
   computed: {
 
     borderPanelStyle: function () {
 
       return {
 
         "--height": this.$props.height,
 
         "--width": this.$props.width,
 
-        '--header-ops': ['-4px', '0px'][this.$props.headerType]
 
-      }
 
+        "--header-ops": ["-4px", "0px"][this.$props.headerType],
 
+      };
 
     },
 
-    headerImageBgUrl: function() {
 
-      return headerTitleBgs[this.$props.headerType]
 
-    }
 
-  }
 
-}
 
+    headerImageBgUrl: function () {
 
+      return headerTitleBgs[this.$props.headerType];
 
+    },
 
+  },
 
+};
 
 </script>
 
 
-
 
 <style scoped>
 
 .border-panel {
 
   position: relative;
 
@@ -69,13 +74,17 @@ export default {
 
   width: var(--width);
 
   box-sizing: border-box;
 
   /* background: linear-gradient(360deg, #0c5a87 0%, rgba(0, 163, 255, 0) 100%); */
 
-  background: linear-gradient(360deg, rgba(0, 133, 255, 0.25) 0%, rgba(0, 163, 255, 0) 100%);
 
+  background: linear-gradient(
 
+    360deg,
 
+    rgba(0, 133, 255, 0.25) 0%,
 
+    rgba(0, 163, 255, 0) 100%
 
+  );
 
 }
 
 
-.border-panel_header{
 
+.border-panel_header {
 
   height: 50px;
 
   width: var(--width);
 
-  background-image: url('../assets/border-panel_header_1.svg');
 
+  background-image: url("../assets/border-panel_header_1.svg");
 
   background-repeat: no-repeat;
 
   background-position: var(--header-ops) 0px;
 
 }

+ 3 - 3
components/LinearText/index.js
Vedi File 

@@ -1,4 +1,4 @@
 
-import LinearText from './index.vue'
 
-import { withInstall } from '@zhgkpt/utils'
 
+import LinearText from "./index.vue";
 
+import { withInstall } from "@zhgkpt/utils";
 
 
-export default withInstall(LinearText)
 
+export default withInstall(LinearText);

+ 18 - 19
components/LinearText/index.vue
Vedi File 

@@ -1,50 +1,49 @@
 
-<template >
 
+<template>
 
   <div class="linear-text" :style="linearTextStyle" :data-text="text">
 
     {{ text }}
 
   </div>
 
 </template>
 
 <script>
 
-
 
 export default {
 
-  name: 'LinearText',
 
+  name: "LinearText",
 
   props: {
 
     text: {
 
       type: String,
 
-      default: ""
 
+      default: "",
 
     },
 
     fontSize: {
 
       type: String,
 
-      default: "24px"
 
+      default: "24px",
 
     },
 
     lineHeight: {
 
       type: String,
 
-      default: "24px"
 
+      default: "24px",
 
     },
 
     extClass: {
 
       type: Object,
 
-      default: () => ({})
 
+      default: () => ({}),
 
     },
 
     startColor: {
 
       type: String,
 
-      default: "#95CCFF"
 
+      default: "#95CCFF",
 
     },
 
     endColor: {
 
       type: String,
 
-      default: "#fff"
 
-    }
 
+      default: "#fff",
 
+    },
 
   },
 
   computed: {
 
     linearTextStyle() {
 
       return {
 
-        '--font-size': this.fontSize,
 
-        '--line-height': this.lineHeight,
 
-        '--start-color': this.startColor,
 
-        '--end-color': this.endColor,
 
-        ...this.extClass
 
-      }
 
-    }
 
-  }
 
-}
 
+        "--font-size": this.fontSize,
 
+        "--line-height": this.lineHeight,
 
+        "--start-color": this.startColor,
 
+        "--end-color": this.endColor,
 
+        ...this.extClass,
 
+      };
 
+    },
 
+  },
 
+};
 
 </script>
 
 
 <style scoped>

+ 2 - 2
components/index.js
Vedi File 

@@ -8,8 +8,8 @@ function install(app) {
 
   });
 
 }
 
 
-export { BorderPanel, LinearText};
 
+export { BorderPanel, LinearText };
 
 
 export default {
 
-  install
 
+  install,
 
 };

+ 1236 - 0
package-lock.json
Vedi File 

@@ -0,0 +1,1236 @@
 
+{
 
+  "name": "zhgkpt",
 
+  "version": "1.0.0",
 
+  "lockfileVersion": 1,
 
+  "requires": true,
 
+  "dependencies": {
 
+    "@babel/parser": {
 
+      "version": "7.22.4",
 
+      "dev": true
 
+    },
 
+    "@eslint/eslintrc": {
 
+      "version": "1.4.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "ajv": "^6.12.4",
 
+        "debug": "^4.3.2",
 
+        "espree": "^9.4.0",
 
+        "globals": "^13.19.0",
 
+        "ignore": "^5.2.0",
 
+        "import-fresh": "^3.2.1",
 
+        "js-yaml": "^4.1.0",
 
+        "minimatch": "^3.1.2",
 
+        "strip-json-comments": "^3.1.1"
 
+      },
 
+      "dependencies": {
 
+        "ignore": {
 
+          "version": "5.2.4",
 
+          "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz",
 
+          "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
 
+          "dev": true
 
+        }
 
+      }
 
+    },
 
+    "@humanwhocodes/config-array": {
 
+      "version": "0.9.5",
 
+      "dev": true,
 
+      "requires": {
 
+        "@humanwhocodes/object-schema": "^1.2.1",
 
+        "debug": "^4.1.1",
 
+        "minimatch": "^3.0.4"
 
+      }
 
+    },
 
+    "@humanwhocodes/object-schema": {
 
+      "version": "1.2.1",
 
+      "dev": true
 
+    },
 
+    "@rushstack/eslint-patch": {
 
+      "version": "1.1.0",
 
+      "dev": true
 
+    },
 
+    "@tootallnate/once": {
 
+      "version": "2.0.0",
 
+      "dev": true
 
+    },
 
+    "@vue/eslint-config-prettier": {
 
+      "version": "7.1.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "eslint-config-prettier": "^8.3.0",
 
+        "eslint-plugin-prettier": "^4.0.0"
 
+      }
 
+    },
 
+    "@vue/test-utils": {
 
+      "version": "1.3.5",
 
+      "dev": true,
 
+      "requires": {
 
+        "dom-event-types": "^1.0.0",
 
+        "lodash": "^4.17.15",
 
+        "pretty": "^2.0.0"
 
+      }
 
+    },
 
+    "abab": {
 
+      "version": "2.0.6",
 
+      "dev": true
 
+    },
 
+    "abbrev": {
 
+      "version": "1.1.1",
 
+      "dev": true
 
+    },
 
+    "acorn": {
 
+      "version": "8.8.2",
 
+      "dev": true
 
+    },
 
+    "acorn-globals": {
 
+      "version": "7.0.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "acorn": "^8.1.0",
 
+        "acorn-walk": "^8.0.2"
 
+      }
 
+    },
 
+    "acorn-jsx": {
 
+      "version": "5.3.2",
 
+      "dev": true
 
+    },
 
+    "acorn-walk": {
 
+      "version": "8.2.0",
 
+      "dev": true
 
+    },
 
+    "agent-base": {
 
+      "version": "6.0.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "debug": "4"
 
+      }
 
+    },
 
+    "ajv": {
 
+      "version": "6.12.6",
 
+      "dev": true,
 
+      "requires": {
 
+        "fast-deep-equal": "^3.1.1",
 
+        "fast-json-stable-stringify": "^2.0.0",
 
+        "json-schema-traverse": "^0.4.1",
 
+        "uri-js": "^4.2.2"
 
+      }
 
+    },
 
+    "ansi-colors": {
 
+      "version": "4.1.3",
 
+      "dev": true
 
+    },
 
+    "ansi-regex": {
 
+      "version": "5.0.1",
 
+      "dev": true
 
+    },
 
+    "ansi-styles": {
 
+      "version": "4.3.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "color-convert": "^2.0.1"
 
+      }
 
+    },
 
+    "argparse": {
 
+      "version": "2.0.1",
 
+      "dev": true
 
+    },
 
+    "asynckit": {
 
+      "version": "0.4.0",
 
+      "dev": true
 
+    },
 
+    "balanced-match": {
 
+      "version": "1.0.2",
 
+      "dev": true
 
+    },
 
+    "boolbase": {
 
+      "version": "1.0.0",
 
+      "dev": true
 
+    },
 
+    "brace-expansion": {
 
+      "version": "1.1.11",
 
+      "dev": true,
 
+      "requires": {
 
+        "balanced-match": "^1.0.0",
 
+        "concat-map": "0.0.1"
 
+      }
 
+    },
 
+    "callsites": {
 
+      "version": "3.1.0",
 
+      "dev": true
 
+    },
 
+    "chalk": {
 
+      "version": "4.1.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "ansi-styles": "^4.1.0",
 
+        "supports-color": "^7.1.0"
 
+      }
 
+    },
 
+    "color-convert": {
 
+      "version": "2.0.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "color-name": "~1.1.4"
 
+      }
 
+    },
 
+    "color-name": {
 
+      "version": "1.1.4",
 
+      "dev": true
 
+    },
 
+    "combined-stream": {
 
+      "version": "1.0.8",
 
+      "dev": true,
 
+      "requires": {
 
+        "delayed-stream": "~1.0.0"
 
+      }
 
+    },
 
+    "commander": {
 
+      "version": "2.20.3",
 
+      "dev": true
 
+    },
 
+    "concat-map": {
 
+      "version": "0.0.1",
 
+      "dev": true
 
+    },
 
+    "condense-newlines": {
 
+      "version": "0.2.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "extend-shallow": "^2.0.1",
 
+        "is-whitespace": "^0.3.0",
 
+        "kind-of": "^3.0.2"
 
+      }
 
+    },
 
+    "config-chain": {
 
+      "version": "1.1.13",
 
+      "dev": true,
 
+      "requires": {
 
+        "ini": "^1.3.4",
 
+        "proto-list": "~1.2.1"
 
+      }
 
+    },
 
+    "cross-spawn": {
 
+      "version": "7.0.3",
 
+      "dev": true,
 
+      "requires": {
 
+        "path-key": "^3.1.0",
 
+        "shebang-command": "^2.0.0",
 
+        "which": "^2.0.1"
 
+      }
 
+    },
 
+    "cssesc": {
 
+      "version": "3.0.0",
 
+      "dev": true
 
+    },
 
+    "cssom": {
 
+      "version": "0.5.0",
 
+      "dev": true
 
+    },
 
+    "cssstyle": {
 
+      "version": "2.3.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "cssom": "~0.3.6"
 
+      },
 
+      "dependencies": {
 
+        "cssom": {
 
+          "version": "0.3.8",
 
+          "resolved": "https://registry.npmmirror.com/cssom/-/cssom-0.3.8.tgz",
 
+          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
 
+          "dev": true
 
+        }
 
+      }
 
+    },
 
+    "csstype": {
 
+      "version": "3.1.2",
 
+      "dev": true
 
+    },
 
+    "data-urls": {
 
+      "version": "3.0.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "abab": "^2.0.6",
 
+        "whatwg-mimetype": "^3.0.0",
 
+        "whatwg-url": "^11.0.0"
 
+      }
 
+    },
 
+    "debug": {
 
+      "version": "4.3.4",
 
+      "dev": true,
 
+      "requires": {
 
+        "ms": "2.1.2"
 
+      }
 
+    },
 
+    "decimal.js": {
 
+      "version": "10.4.3",
 
+      "dev": true
 
+    },
 
+    "deep-is": {
 
+      "version": "0.1.4",
 
+      "dev": true
 
+    },
 
+    "delayed-stream": {
 
+      "version": "1.0.0",
 
+      "dev": true
 
+    },
 
+    "doctrine": {
 
+      "version": "3.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "esutils": "^2.0.2"
 
+      }
 
+    },
 
+    "dom-event-types": {
 
+      "version": "1.1.0",
 
+      "dev": true
 
+    },
 
+    "domexception": {
 
+      "version": "4.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "webidl-conversions": "^7.0.0"
 
+      }
 
+    },
 
+    "editorconfig": {
 
+      "version": "0.15.3",
 
+      "dev": true,
 
+      "requires": {
 
+        "commander": "^2.19.0",
 
+        "lru-cache": "^4.1.5",
 
+        "semver": "^5.6.0",
 
+        "sigmund": "^1.0.1"
 
+      },
 
+      "dependencies": {
 
+        "lru-cache": {
 
+          "version": "4.1.5",
 
+          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-4.1.5.tgz",
 
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
 
+          "dev": true,
 
+          "requires": {
 
+            "pseudomap": "^1.0.2",
 
+            "yallist": "^2.1.2"
 
+          }
 
+        },
 
+        "semver": {
 
+          "version": "5.7.1",
 
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz",
 
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
 
+          "dev": true
 
+        },
 
+        "yallist": {
 
+          "version": "2.1.2",
 
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
 
+          "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
 
+          "dev": true
 
+        }
 
+      }
 
+    },
 
+    "enquirer": {
 
+      "version": "2.3.6",
 
+      "dev": true,
 
+      "requires": {
 
+        "ansi-colors": "^4.1.1"
 
+      }
 
+    },
 
+    "entities": {
 
+      "version": "4.5.0",
 
+      "dev": true
 
+    },
 
+    "escape-string-regexp": {
 
+      "version": "4.0.0",
 
+      "dev": true
 
+    },
 
+    "escodegen": {
 
+      "version": "2.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "esprima": "^4.0.1",
 
+        "estraverse": "^5.2.0",
 
+        "esutils": "^2.0.2",
 
+        "optionator": "^0.8.1",
 
+        "source-map": "~0.6.1"
 
+      },
 
+      "dependencies": {
 
+        "levn": {
 
+          "version": "0.3.0",
 
+          "resolved": "https://registry.npmmirror.com/levn/-/levn-0.3.0.tgz",
 
+          "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
 
+          "dev": true,
 
+          "requires": {
 
+            "prelude-ls": "~1.1.2",
 
+            "type-check": "~0.3.2"
 
+          }
 
+        },
 
+        "optionator": {
 
+          "version": "0.8.3",
 
+          "resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.8.3.tgz",
 
+          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
 
+          "dev": true,
 
+          "requires": {
 
+            "deep-is": "~0.1.3",
 
+            "fast-levenshtein": "~2.0.6",
 
+            "levn": "~0.3.0",
 
+            "prelude-ls": "~1.1.2",
 
+            "type-check": "~0.3.2",
 
+            "word-wrap": "~1.2.3"
 
+          }
 
+        },
 
+        "prelude-ls": {
 
+          "version": "1.1.2",
 
+          "resolved": "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.1.2.tgz",
 
+          "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
 
+          "dev": true
 
+        },
 
+        "type-check": {
 
+          "version": "0.3.2",
 
+          "resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.3.2.tgz",
 
+          "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
 
+          "dev": true,
 
+          "requires": {
 
+            "prelude-ls": "~1.1.2"
 
+          }
 
+        }
 
+      }
 
+    },
 
+    "eslint": {
 
+      "version": "8.5.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "@eslint/eslintrc": "^1.0.5",
 
+        "@humanwhocodes/config-array": "^0.9.2",
 
+        "ajv": "^6.10.0",
 
+        "chalk": "^4.0.0",
 
+        "cross-spawn": "^7.0.2",
 
+        "debug": "^4.3.2",
 
+        "doctrine": "^3.0.0",
 
+        "enquirer": "^2.3.5",
 
+        "escape-string-regexp": "^4.0.0",
 
+        "eslint-scope": "^7.1.0",
 
+        "eslint-utils": "^3.0.0",
 
+        "eslint-visitor-keys": "^3.1.0",
 
+        "espree": "^9.2.0",
 
+        "esquery": "^1.4.0",
 
+        "esutils": "^2.0.2",
 
+        "fast-deep-equal": "^3.1.3",
 
+        "file-entry-cache": "^6.0.1",
 
+        "functional-red-black-tree": "^1.0.1",
 
+        "glob-parent": "^6.0.1",
 
+        "globals": "^13.6.0",
 
+        "ignore": "^4.0.6",
 
+        "import-fresh": "^3.0.0",
 
+        "imurmurhash": "^0.1.4",
 
+        "is-glob": "^4.0.0",
 
+        "js-yaml": "^4.1.0",
 
+        "json-stable-stringify-without-jsonify": "^1.0.1",
 
+        "levn": "^0.4.1",
 
+        "lodash.merge": "^4.6.2",
 
+        "minimatch": "^3.0.4",
 
+        "natural-compare": "^1.4.0",
 
+        "optionator": "^0.9.1",
 
+        "progress": "^2.0.0",
 
+        "regexpp": "^3.2.0",
 
+        "semver": "^7.2.1",
 
+        "strip-ansi": "^6.0.1",
 
+        "strip-json-comments": "^3.1.0",
 
+        "text-table": "^0.2.0",
 
+        "v8-compile-cache": "^2.0.3"
 
+      }
 
+    },
 
+    "eslint-config-prettier": {
 
+      "version": "8.8.0",
 
+      "dev": true
 
+    },
 
+    "eslint-plugin-prettier": {
 
+      "version": "4.2.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "prettier-linter-helpers": "^1.0.0"
 
+      }
 
+    },
 
+    "eslint-plugin-vue": {
 
+      "version": "9.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "eslint-utils": "^3.0.0",
 
+        "natural-compare": "^1.4.0",
 
+        "nth-check": "^2.0.1",
 
+        "postcss-selector-parser": "^6.0.9",
 
+        "semver": "^7.3.5",
 
+        "vue-eslint-parser": "^9.0.1",
 
+        "xml-name-validator": "^4.0.0"
 
+      }
 
+    },
 
+    "eslint-scope": {
 
+      "version": "7.2.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "esrecurse": "^4.3.0",
 
+        "estraverse": "^5.2.0"
 
+      }
 
+    },
 
+    "eslint-utils": {
 
+      "version": "3.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "eslint-visitor-keys": "^2.0.0"
 
+      },
 
+      "dependencies": {
 
+        "eslint-visitor-keys": {
 
+          "version": "2.1.0",
 
+          "resolved": "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
 
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
 
+          "dev": true
 
+        }
 
+      }
 
+    },
 
+    "eslint-visitor-keys": {
 
+      "version": "3.4.1",
 
+      "dev": true
 
+    },
 
+    "espree": {
 
+      "version": "9.5.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "acorn": "^8.8.0",
 
+        "acorn-jsx": "^5.3.2",
 
+        "eslint-visitor-keys": "^3.4.1"
 
+      }
 
+    },
 
+    "esprima": {
 
+      "version": "4.0.1",
 
+      "dev": true
 
+    },
 
+    "esquery": {
 
+      "version": "1.5.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "estraverse": "^5.1.0"
 
+      }
 
+    },
 
+    "esrecurse": {
 
+      "version": "4.3.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "estraverse": "^5.2.0"
 
+      }
 
+    },
 
+    "estraverse": {
 
+      "version": "5.3.0",
 
+      "dev": true
 
+    },
 
+    "esutils": {
 
+      "version": "2.0.3",
 
+      "dev": true
 
+    },
 
+    "extend-shallow": {
 
+      "version": "2.0.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "is-extendable": "^0.1.0"
 
+      }
 
+    },
 
+    "fast-deep-equal": {
 
+      "version": "3.1.3",
 
+      "dev": true
 
+    },
 
+    "fast-diff": {
 
+      "version": "1.3.0",
 
+      "dev": true
 
+    },
 
+    "fast-json-stable-stringify": {
 
+      "version": "2.1.0",
 
+      "dev": true
 
+    },
 
+    "fast-levenshtein": {
 
+      "version": "2.0.6",
 
+      "dev": true
 
+    },
 
+    "file-entry-cache": {
 
+      "version": "6.0.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "flat-cache": "^3.0.4"
 
+      }
 
+    },
 
+    "flat-cache": {
 
+      "version": "3.0.4",
 
+      "dev": true,
 
+      "requires": {
 
+        "flatted": "^3.1.0",
 
+        "rimraf": "^3.0.2"
 
+      }
 
+    },
 
+    "flatted": {
 
+      "version": "3.2.7",
 
+      "dev": true
 
+    },
 
+    "form-data": {
 
+      "version": "4.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "asynckit": "^0.4.0",
 
+        "combined-stream": "^1.0.8",
 
+        "mime-types": "^2.1.12"
 
+      }
 
+    },
 
+    "fs.realpath": {
 
+      "version": "1.0.0",
 
+      "dev": true
 
+    },
 
+    "functional-red-black-tree": {
 
+      "version": "1.0.1",
 
+      "dev": true
 
+    },
 
+    "glob": {
 
+      "version": "8.1.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "fs.realpath": "^1.0.0",
 
+        "inflight": "^1.0.4",
 
+        "inherits": "2",
 
+        "minimatch": "^5.0.1",
 
+        "once": "^1.3.0"
 
+      },
 
+      "dependencies": {
 
+        "brace-expansion": {
 
+          "version": "2.0.1",
 
+          "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
 
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
 
+          "dev": true,
 
+          "requires": {
 
+            "balanced-match": "^1.0.0"
 
+          }
 
+        },
 
+        "minimatch": {
 
+          "version": "5.1.6",
 
+          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.6.tgz",
 
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
 
+          "dev": true,
 
+          "requires": {
 
+            "brace-expansion": "^2.0.1"
 
+          }
 
+        }
 
+      }
 
+    },
 
+    "glob-parent": {
 
+      "version": "6.0.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "is-glob": "^4.0.3"
 
+      }
 
+    },
 
+    "globals": {
 
+      "version": "13.20.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "type-fest": "^0.20.2"
 
+      }
 
+    },
 
+    "html-encoding-sniffer": {
 
+      "version": "3.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "whatwg-encoding": "^2.0.0"
 
+      }
 
+    },
 
+    "http-proxy-agent": {
 
+      "version": "5.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "@tootallnate/once": "2",
 
+        "agent-base": "6",
 
+        "debug": "4"
 
+      }
 
+    },
 
+    "https-proxy-agent": {
 
+      "version": "5.0.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "agent-base": "6",
 
+        "debug": "4"
 
+      }
 
+    },
 
+    "iconv-lite": {
 
+      "version": "0.6.3",
 
+      "dev": true,
 
+      "requires": {
 
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
 
+      }
 
+    },
 
+    "ignore": {
 
+      "version": "4.0.6",
 
+      "dev": true
 
+    },
 
+    "import-fresh": {
 
+      "version": "3.3.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "parent-module": "^1.0.0",
 
+        "resolve-from": "^4.0.0"
 
+      }
 
+    },
 
+    "imurmurhash": {
 
+      "version": "0.1.4",
 
+      "dev": true
 
+    },
 
+    "inflight": {
 
+      "version": "1.0.6",
 
+      "dev": true,
 
+      "requires": {
 
+        "once": "^1.3.0",
 
+        "wrappy": "1"
 
+      }
 
+    },
 
+    "inherits": {
 
+      "version": "2.0.4",
 
+      "dev": true
 
+    },
 
+    "ini": {
 
+      "version": "1.3.8",
 
+      "dev": true
 
+    },
 
+    "is-buffer": {
 
+      "version": "1.1.6",
 
+      "dev": true
 
+    },
 
+    "is-extendable": {
 
+      "version": "0.1.1",
 
+      "dev": true
 
+    },
 
+    "is-extglob": {
 
+      "version": "2.1.1",
 
+      "dev": true
 
+    },
 
+    "is-glob": {
 
+      "version": "4.0.3",
 
+      "dev": true,
 
+      "requires": {
 
+        "is-extglob": "^2.1.1"
 
+      }
 
+    },
 
+    "is-potential-custom-element-name": {
 
+      "version": "1.0.1",
 
+      "dev": true
 
+    },
 
+    "is-whitespace": {
 
+      "version": "0.3.0",
 
+      "dev": true
 
+    },
 
+    "isexe": {
 
+      "version": "2.0.0",
 
+      "dev": true
 
+    },
 
+    "js-beautify": {
 
+      "version": "1.14.7",
 
+      "dev": true,
 
+      "requires": {
 
+        "config-chain": "^1.1.13",
 
+        "editorconfig": "^0.15.3",
 
+        "glob": "^8.0.3",
 
+        "nopt": "^6.0.0"
 
+      }
 
+    },
 
+    "js-yaml": {
 
+      "version": "4.1.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "argparse": "^2.0.1"
 
+      }
 
+    },
 
+    "jsdom": {
 
+      "version": "20.0.3",
 
+      "dev": true,
 
+      "requires": {
 
+        "abab": "^2.0.6",
 
+        "acorn": "^8.8.1",
 
+        "acorn-globals": "^7.0.0",
 
+        "cssom": "^0.5.0",
 
+        "cssstyle": "^2.3.0",
 
+        "data-urls": "^3.0.2",
 
+        "decimal.js": "^10.4.2",
 
+        "domexception": "^4.0.0",
 
+        "escodegen": "^2.0.0",
 
+        "form-data": "^4.0.0",
 
+        "html-encoding-sniffer": "^3.0.0",
 
+        "http-proxy-agent": "^5.0.0",
 
+        "https-proxy-agent": "^5.0.1",
 
+        "is-potential-custom-element-name": "^1.0.1",
 
+        "nwsapi": "^2.2.2",
 
+        "parse5": "^7.1.1",
 
+        "saxes": "^6.0.0",
 
+        "symbol-tree": "^3.2.4",
 
+        "tough-cookie": "^4.1.2",
 
+        "w3c-xmlserializer": "^4.0.0",
 
+        "webidl-conversions": "^7.0.0",
 
+        "whatwg-encoding": "^2.0.0",
 
+        "whatwg-mimetype": "^3.0.0",
 
+        "whatwg-url": "^11.0.0",
 
+        "ws": "^8.11.0",
 
+        "xml-name-validator": "^4.0.0"
 
+      }
 
+    },
 
+    "json-schema-traverse": {
 
+      "version": "0.4.1",
 
+      "dev": true
 
+    },
 
+    "json-stable-stringify-without-jsonify": {
 
+      "version": "1.0.1",
 
+      "dev": true
 
+    },
 
+    "kind-of": {
 
+      "version": "3.2.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "is-buffer": "^1.1.5"
 
+      }
 
+    },
 
+    "levn": {
 
+      "version": "0.4.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "prelude-ls": "^1.2.1",
 
+        "type-check": "~0.4.0"
 
+      }
 
+    },
 
+    "lodash": {
 
+      "version": "4.17.21",
 
+      "dev": true
 
+    },
 
+    "lodash.merge": {
 
+      "version": "4.6.2",
 
+      "dev": true
 
+    },
 
+    "lru-cache": {
 
+      "version": "6.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "yallist": "^4.0.0"
 
+      }
 
+    },
 
+    "mime-db": {
 
+      "version": "1.52.0",
 
+      "dev": true
 
+    },
 
+    "mime-types": {
 
+      "version": "2.1.35",
 
+      "dev": true,
 
+      "requires": {
 
+        "mime-db": "1.52.0"
 
+      }
 
+    },
 
+    "minimatch": {
 
+      "version": "3.1.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "brace-expansion": "^1.1.7"
 
+      }
 
+    },
 
+    "ms": {
 
+      "version": "2.1.2",
 
+      "dev": true
 
+    },
 
+    "nanoid": {
 
+      "version": "3.3.6",
 
+      "dev": true
 
+    },
 
+    "natural-compare": {
 
+      "version": "1.4.0",
 
+      "dev": true
 
+    },
 
+    "nopt": {
 
+      "version": "6.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "abbrev": "^1.0.0"
 
+      }
 
+    },
 
+    "nth-check": {
 
+      "version": "2.1.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "boolbase": "^1.0.0"
 
+      }
 
+    },
 
+    "nwsapi": {
 
+      "version": "2.2.5",
 
+      "dev": true
 
+    },
 
+    "once": {
 
+      "version": "1.4.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "wrappy": "1"
 
+      }
 
+    },
 
+    "optionator": {
 
+      "version": "0.9.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "deep-is": "^0.1.3",
 
+        "fast-levenshtein": "^2.0.6",
 
+        "levn": "^0.4.1",
 
+        "prelude-ls": "^1.2.1",
 
+        "type-check": "^0.4.0",
 
+        "word-wrap": "^1.2.3"
 
+      }
 
+    },
 
+    "parent-module": {
 
+      "version": "1.0.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "callsites": "^3.0.0"
 
+      }
 
+    },
 
+    "parse5": {
 
+      "version": "7.1.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "entities": "^4.4.0"
 
+      }
 
+    },
 
+    "path-is-absolute": {
 
+      "version": "1.0.1",
 
+      "dev": true
 
+    },
 
+    "path-key": {
 
+      "version": "3.1.1",
 
+      "dev": true
 
+    },
 
+    "picocolors": {
 
+      "version": "1.0.0",
 
+      "dev": true
 
+    },
 
+    "postcss": {
 
+      "version": "8.4.24",
 
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.24.tgz",
 
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
 
+      "dev": true,
 
+      "requires": {
 
+        "nanoid": "^3.3.6",
 
+        "picocolors": "^1.0.0",
 
+        "source-map-js": "^1.0.2"
 
+      }
 
+    },
 
+    "postcss-focus": {
 
+      "version": "6.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-focus/-/postcss-focus-6.0.0.tgz",
 
+      "integrity": "sha512-Lj8lXButQAYbu2YbRUAjZN7LXcEIn3Neet1DZVdSdR2OppyO6Jl4WSLdEDcBYgLfIH9D4p+zS4RO8i3IbdcMnw==",
 
+      "dev": true
 
+    },
 
+    "postcss-selector-parser": {
 
+      "version": "6.0.13",
 
+      "dev": true,
 
+      "requires": {
 
+        "cssesc": "^3.0.0",
 
+        "util-deprecate": "^1.0.2"
 
+      }
 
+    },
 
+    "prelude-ls": {
 
+      "version": "1.2.1",
 
+      "dev": true
 
+    },
 
+    "prettier": {
 
+      "version": "2.8.8",
 
+      "dev": true
 
+    },
 
+    "prettier-linter-helpers": {
 
+      "version": "1.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "fast-diff": "^1.1.2"
 
+      }
 
+    },
 
+    "pretty": {
 
+      "version": "2.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "condense-newlines": "^0.2.1",
 
+        "extend-shallow": "^2.0.1",
 
+        "js-beautify": "^1.6.12"
 
+      }
 
+    },
 
+    "progress": {
 
+      "version": "2.0.3",
 
+      "dev": true
 
+    },
 
+    "proto-list": {
 
+      "version": "1.2.4",
 
+      "dev": true
 
+    },
 
+    "pseudomap": {
 
+      "version": "1.0.2",
 
+      "dev": true
 
+    },
 
+    "psl": {
 
+      "version": "1.9.0",
 
+      "dev": true
 
+    },
 
+    "punycode": {
 
+      "version": "2.3.0",
 
+      "dev": true
 
+    },
 
+    "querystringify": {
 
+      "version": "2.2.0",
 
+      "dev": true
 
+    },
 
+    "regexpp": {
 
+      "version": "3.2.0",
 
+      "dev": true
 
+    },
 
+    "requires-port": {
 
+      "version": "1.0.0",
 
+      "dev": true
 
+    },
 
+    "resolve-from": {
 
+      "version": "4.0.0",
 
+      "dev": true
 
+    },
 
+    "rimraf": {
 
+      "version": "3.0.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "glob": "^7.1.3"
 
+      },
 
+      "dependencies": {
 
+        "glob": {
 
+          "version": "7.2.3",
 
+          "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
 
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 
+          "dev": true,
 
+          "requires": {
 
+            "fs.realpath": "^1.0.0",
 
+            "inflight": "^1.0.4",
 
+            "inherits": "2",
 
+            "minimatch": "^3.1.1",
 
+            "once": "^1.3.0",
 
+            "path-is-absolute": "^1.0.0"
 
+          }
 
+        }
 
+      }
 
+    },
 
+    "safer-buffer": {
 
+      "version": "2.1.2",
 
+      "dev": true
 
+    },
 
+    "saxes": {
 
+      "version": "6.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "xmlchars": "^2.2.0"
 
+      }
 
+    },
 
+    "semver": {
 
+      "version": "7.5.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "lru-cache": "^6.0.0"
 
+      }
 
+    },
 
+    "shebang-command": {
 
+      "version": "2.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "shebang-regex": "^3.0.0"
 
+      }
 
+    },
 
+    "shebang-regex": {
 
+      "version": "3.0.0",
 
+      "dev": true
 
+    },
 
+    "sigmund": {
 
+      "version": "1.0.1",
 
+      "dev": true
 
+    },
 
+    "source-map": {
 
+      "version": "0.6.1",
 
+      "dev": true
 
+    },
 
+    "source-map-js": {
 
+      "version": "1.0.2",
 
+      "dev": true
 
+    },
 
+    "strip-ansi": {
 
+      "version": "6.0.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "ansi-regex": "^5.0.1"
 
+      }
 
+    },
 
+    "strip-json-comments": {
 
+      "version": "3.1.1",
 
+      "dev": true
 
+    },
 
+    "supports-color": {
 
+      "version": "7.2.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "has-flag": "^4.0.0"
 
+      },
 
+      "dependencies": {
 
+        "has-flag": {
 
+          "version": "4.0.0",
 
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
 
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 
+          "dev": true
 
+        }
 
+      }
 
+    },
 
+    "symbol-tree": {
 
+      "version": "3.2.4",
 
+      "dev": true
 
+    },
 
+    "text-table": {
 
+      "version": "0.2.0",
 
+      "dev": true
 
+    },
 
+    "tough-cookie": {
 
+      "version": "4.1.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "psl": "^1.1.33",
 
+        "punycode": "^2.1.1",
 
+        "universalify": "^0.2.0",
 
+        "url-parse": "^1.5.3"
 
+      }
 
+    },
 
+    "tr46": {
 
+      "version": "3.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "punycode": "^2.1.1"
 
+      }
 
+    },
 
+    "type-check": {
 
+      "version": "0.4.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "prelude-ls": "^1.2.1"
 
+      }
 
+    },
 
+    "type-fest": {
 
+      "version": "0.20.2",
 
+      "dev": true
 
+    },
 
+    "universalify": {
 
+      "version": "0.2.0",
 
+      "dev": true
 
+    },
 
+    "uri-js": {
 
+      "version": "4.4.1",
 
+      "dev": true,
 
+      "requires": {
 
+        "punycode": "^2.1.0"
 
+      }
 
+    },
 
+    "url-parse": {
 
+      "version": "1.5.10",
 
+      "dev": true,
 
+      "requires": {
 
+        "querystringify": "^2.1.1",
 
+        "requires-port": "^1.0.0"
 
+      }
 
+    },
 
+    "util-deprecate": {
 
+      "version": "1.0.2",
 
+      "dev": true
 
+    },
 
+    "v8-compile-cache": {
 
+      "version": "2.3.0",
 
+      "dev": true
 
+    },
 
+    "vue": {
 
+      "version": "2.7.7",
 
+      "dev": true,
 
+      "requires": {
 
+        "@vue/compiler-sfc": "2.7.7",
 
+        "csstype": "^3.1.0"
 
+      },
 
+      "dependencies": {
 
+        "@vue/compiler-sfc": {
 
+          "version": "2.7.7",
 
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
 
+          "integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
 
+          "dev": true,
 
+          "requires": {
 
+            "@babel/parser": "^7.18.4",
 
+            "postcss": "^8.4.14",
 
+            "source-map": "^0.6.1"
 
+          }
 
+        }
 
+      }
 
+    },
 
+    "vue-eslint-parser": {
 
+      "version": "9.3.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "debug": "^4.3.4",
 
+        "eslint-scope": "^7.1.1",
 
+        "eslint-visitor-keys": "^3.3.0",
 
+        "espree": "^9.3.1",
 
+        "esquery": "^1.4.0",
 
+        "lodash": "^4.17.21",
 
+        "semver": "^7.3.6"
 
+      }
 
+    },
 
+    "w3c-xmlserializer": {
 
+      "version": "4.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "xml-name-validator": "^4.0.0"
 
+      }
 
+    },
 
+    "webidl-conversions": {
 
+      "version": "7.0.0",
 
+      "dev": true
 
+    },
 
+    "whatwg-encoding": {
 
+      "version": "2.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "iconv-lite": "0.6.3"
 
+      }
 
+    },
 
+    "whatwg-mimetype": {
 
+      "version": "3.0.0",
 
+      "dev": true
 
+    },
 
+    "whatwg-url": {
 
+      "version": "11.0.0",
 
+      "dev": true,
 
+      "requires": {
 
+        "tr46": "^3.0.0",
 
+        "webidl-conversions": "^7.0.0"
 
+      }
 
+    },
 
+    "which": {
 
+      "version": "2.0.2",
 
+      "dev": true,
 
+      "requires": {
 
+        "isexe": "^2.0.0"
 
+      }
 
+    },
 
+    "word-wrap": {
 
+      "version": "1.2.3",
 
+      "dev": true
 
+    },
 
+    "wrappy": {
 
+      "version": "1.0.2",
 
+      "dev": true
 
+    },
 
+    "ws": {
 
+      "version": "8.13.0",
 
+      "dev": true
 
+    },
 
+    "xml-name-validator": {
 
+      "version": "4.0.0",
 
+      "dev": true
 
+    },
 
+    "xmlchars": {
 
+      "version": "2.2.0",
 
+      "dev": true
 
+    },
 
+    "yallist": {
 
+      "version": "4.0.0",
 
+      "dev": true
 
+    }
 
+  }
 
+}

+ 7 - 0
package.json
Vedi File 

@@ -22,7 +22,14 @@
 
     "eslint": "^8.5.0",
 
     "eslint-plugin-vue": "^9.0.0",
 
     "jsdom": "^20.0.0",
 
+    "postcss": "^8.4.24",
 
+    "postcss-comment": "^2.0.0",
 
+    "postcss-focus": "^6.0.0",
 
+    "postcss-value-parser": "^4.2.0",
 
     "prettier": "^2.5.1",
 
     "vue": "^2.7.7"
 
+  },
 
+  "dependencies": {
 
+    "echarts": "^5.4.2"
 
   }
 
 }

+ 61 - 83
pnpm-lock.yaml
Vedi File 

@@ -8,11 +8,18 @@ importers:
 
       '@vue/eslint-config-prettier': ^7.0.0
 
       '@vue/test-utils': ^1.3.0
 
       '@zhgkpt/utils': workspace:^1.0.0
 
+      echarts: ^5.4.2
 
       eslint: ^8.5.0
 
       eslint-plugin-vue: ^9.0.0
 
       jsdom: ^20.0.0
 
+      postcss: ^8.4.24
 
+      postcss-comment: ^2.0.0
 
+      postcss-focus: ^6.0.0
 
+      postcss-value-parser: ^4.2.0
 
       prettier: ^2.5.1
 
       vue: ^2.7.7
 
+    dependencies:
 
+      echarts: 5.4.2
 
     devDependencies:
 
       '@rushstack/eslint-patch': 1.1.0
 
       '@vue/eslint-config-prettier': 7.1.0_7q2ktoanmbbycegytganwedyk4
 
@@ -21,6 +28,10 @@ importers:
 
       eslint: 8.5.0
 
       eslint-plugin-vue: 9.0.0_eslint@8.5.0
 
       jsdom: 20.0.3
 
+      postcss: 8.4.24
 
+      postcss-comment: 2.0.0
 
+      postcss-focus: 6.0.0_postcss@8.4.24
 
+      postcss-value-parser: 4.2.0
 
       prettier: 2.8.8
 
       vue: 2.7.7
 
 
@@ -33,27 +44,25 @@ importers:
 
       autoprefixer: ^10.4.14
 
       lib-flexible: ^0.3.2
 
       pinia: ^2.0.16
 
-      postcss-plugin-px2rem: ^0.8.1
 
-      postcss-px-to-viewport: ^1.1.1
 
       terser: ^5.14.2
 
       vite: ^3.0.2
 
       vitest: ^0.18.1
 
       vue: ^2.7.7
 
       vue-router: ^3.5.4
 
       vue-template-compiler: ^2.7.7
 
+      vue2-scale-box: ^0.1.6
 
     dependencies:
 
       '@zhgkpt/components': link:../components
 
       lib-flexible: 0.3.2
 
       pinia: 2.1.3_vue@2.7.14
 
       vue: 2.7.14
 
       vue-router: 3.6.5_vue@2.7.14
 
+      vue2-scale-box: 0.1.6
 
     devDependencies:
 
       '@vitejs/plugin-legacy': 2.3.1_terser@5.17.6+vite@3.2.7
 
       '@vitejs/plugin-vue2': 1.1.2_vite@3.2.7+vue@2.7.14
 
       '@vitejs/plugin-vue2-jsx': 1.1.0_vite@3.2.7+vue@2.7.14
 
       autoprefixer: 10.4.14
 
-      postcss-plugin-px2rem: 0.8.1
 
-      postcss-px-to-viewport: 1.1.1
 
       terser: 5.17.6
 
       vite: 3.2.7_terser@5.17.6
 
       vitest: 0.18.1_terser@5.17.6
 
@@ -79,6 +88,12 @@ importers:
 
       jsdom: 20.0.3
 
       prettier: 2.8.8
 
 
+  plugins/px-to-viewport:
 
+    specifiers:
 
+      postcss-plugin-viewport: ^0.0.2
 
+    devDependencies:
 
+      postcss-plugin-viewport: 0.0.2
 
+
 
   utils:
 
     specifiers:
 
       lodash: ^4.17.21
 
@@ -776,20 +791,10 @@ packages:
 
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
 
     engines: {node: '>=6'}
 
 
-  /ansi-regex/2.1.1:
 
-    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
 
-    engines: {node: '>=0.10.0'}
 
-    dev: true
 
-
 
   /ansi-regex/5.0.1:
 
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
 
     engines: {node: '>=8'}
 
 
-  /ansi-styles/2.2.1:
 
-    resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==}
 
-    engines: {node: '>=0.10.0'}
 
-    dev: true
 
-
 
   /ansi-styles/3.2.1:
 
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
 
     engines: {node: '>=4'}
 
@@ -886,17 +891,6 @@ packages:
 
       type-detect: 4.0.8
 
     dev: true
 
 
-  /chalk/1.1.3:
 
-    resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
 
-    engines: {node: '>=0.10.0'}
 
-    dependencies:
 
-      ansi-styles: 2.2.1
 
-      escape-string-regexp: 1.0.5
 
-      has-ansi: 2.0.0
 
-      strip-ansi: 3.0.1
 
-      supports-color: 2.0.0
 
-    dev: true
 
-
 
   /chalk/2.4.2:
 
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
 
     engines: {node: '>=4'}
 
@@ -1054,6 +1048,13 @@ packages:
 
     dependencies:
 
       webidl-conversions: 7.0.0
 
 
+  /echarts/5.4.2:
 
+    resolution: {integrity: sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==}
 
+    dependencies:
 
+      tslib: 2.3.0
 
+      zrender: 5.4.3
 
+    dev: false
 
+
 
   /editorconfig/0.15.3:
 
     resolution: {integrity: sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==}
 
     hasBin: true
 
@@ -1571,18 +1572,6 @@ packages:
 
     dependencies:
 
       type-fest: 0.20.2
 
 
-  /has-ansi/2.0.0:
 
-    resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
 
-    engines: {node: '>=0.10.0'}
 
-    dependencies:
 
-      ansi-regex: 2.1.1
 
-    dev: true
 
-
 
-  /has-flag/1.0.0:
 
-    resolution: {integrity: sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==}
 
-    engines: {node: '>=0.10.0'}
 
-    dev: true
 
-
 
   /has-flag/3.0.0:
 
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
 
     engines: {node: '>=4'}
 
@@ -1704,10 +1693,6 @@ packages:
 
   /isexe/2.0.0:
 
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
 
-  /js-base64/2.6.4:
 
-    resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
 
-    dev: true
 
-
 
   /js-beautify/1.14.7:
 
     resolution: {integrity: sha512-5SOX1KXPFKx+5f6ZrPsIPEY7NwKeQz47n3jm2i+XeHx9MoRsfQenlOP13FQhWvg8JRS0+XLO6XYUQ2GX+q+T9A==}
 
     engines: {node: '>=10'}
 
@@ -1912,11 +1897,6 @@ packages:
 
   /nwsapi/2.2.5:
 
     resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==}
 
 
-  /object-assign/4.1.1:
 
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
 
-    engines: {node: '>=0.10.0'}
 
-    dev: true
 
-
 
   /once/1.4.0:
 
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
     dependencies:
 
@@ -1996,19 +1976,28 @@ packages:
 
       vue-demi: 0.14.5_vue@2.7.14
 
     dev: false
 
 
-  /postcss-plugin-px2rem/0.8.1:
 
-    resolution: {integrity: sha512-gNxhrnR57pnGrPLLqVNWY9+BWgj46kYkphw+0gpRJf9tjgwI7/tLqQPK7KdlksB2SSAddOb11otDVwri8b8mXw==}
 
+  /postcss-comment/2.0.0:
 
+    resolution: {integrity: sha512-5zT5iKU7c0tK9KJFNrVf+g1MGTkzf/4V3e0Zzm2g1uoFQC5jeTHmB9O1iAqh97+jnKpc6al204e0pwFUiCwseg==}
 
     dependencies:
 
-      postcss: 5.2.18
 
+      postcss: 6.0.23
 
     dev: true
 
 
-  /postcss-px-to-viewport/1.1.1:
 
-    resolution: {integrity: sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==}
 
+  /postcss-focus/6.0.0_postcss@8.4.24:
 
+    resolution: {integrity: sha512-Lj8lXButQAYbu2YbRUAjZN7LXcEIn3Neet1DZVdSdR2OppyO6Jl4WSLdEDcBYgLfIH9D4p+zS4RO8i3IbdcMnw==}
 
+    engines: {node: '>=10.0'}
 
+    peerDependencies:
 
+      postcss: ^8.1.0
 
     dependencies:
 
-      object-assign: 4.1.1
 
       postcss: 8.4.24
 
     dev: true
 
 
+  /postcss-plugin-viewport/0.0.2:
 
+    resolution: {integrity: sha512-o2BGnGsldCqtlu1zVlaEA541HbSvLJofQLvezft1hx4tyvlzG/rGU1iZ66sdfVO3dJ2LtA6D2dyTZ3Chh1b+/w==}
 
+    engines: {node: '>=12.0.0'}
 
+    dependencies:
 
+      chalk: 4.1.2
 
+    dev: true
 
+
 
   /postcss-selector-parser/6.0.13:
 
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
 
     engines: {node: '>=4'}
 
@@ -2020,14 +2009,13 @@ packages:
 
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
     dev: true
 
 
-  /postcss/5.2.18:
 
-    resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==}
 
-    engines: {node: '>=0.12'}
 
+  /postcss/6.0.23:
 
+    resolution: {integrity: sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==}
 
+    engines: {node: '>=4.0.0'}
 
     dependencies:
 
-      chalk: 1.1.3
 
-      js-base64: 2.6.4
 
-      source-map: 0.5.7
 
-      supports-color: 3.2.3
 
+      chalk: 2.4.2
 
+      source-map: 0.6.1
 
+      supports-color: 5.5.0
 
     dev: true
 
 
   /postcss/8.4.24:
 
@@ -2172,11 +2160,6 @@ packages:
 
       source-map: 0.6.1
 
     dev: true
 
 
-  /source-map/0.5.7:
 
-    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
 
-    engines: {node: '>=0.10.0'}
 
-    dev: true
 
-
 
   /source-map/0.6.1:
 
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
 
     engines: {node: '>=0.10.0'}
 
@@ -2186,13 +2169,6 @@ packages:
 
     deprecated: Please use @jridgewell/sourcemap-codec instead
 
     dev: true
 
 
-  /strip-ansi/3.0.1:
 
-    resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
 
-    engines: {node: '>=0.10.0'}
 
-    dependencies:
 
-      ansi-regex: 2.1.1
 
-    dev: true
 
-
 
   /strip-ansi/6.0.1:
 
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
 
     engines: {node: '>=8'}
 
@@ -2203,18 +2179,6 @@ packages:
 
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
 
     engines: {node: '>=8'}
 
 
-  /supports-color/2.0.0:
 
-    resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
 
-    engines: {node: '>=0.8.0'}
 
-    dev: true
 
-
 
-  /supports-color/3.2.3:
 
-    resolution: {integrity: sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==}
 
-    engines: {node: '>=0.8.0'}
 
-    dependencies:
 
-      has-flag: 1.0.0
 
-    dev: true
 
-
 
   /supports-color/5.5.0:
 
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
 
     engines: {node: '>=4'}
 
@@ -2287,6 +2251,10 @@ packages:
 
     dependencies:
 
       punycode: 2.3.0
 
 
+  /tslib/2.3.0:
 
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
 
+    dev: false
 
+
 
   /type-check/0.3.2:
 
     resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
 
     engines: {node: '>= 0.8.0'}
 
@@ -2509,6 +2477,10 @@ packages:
 
       csstype: 3.1.2
 
     dev: true
 
 
+  /vue2-scale-box/0.1.6:
 
+    resolution: {integrity: sha512-rvHpBa0nS6tANgpzTv9YmBMX3dwJL0583QAnf02CcmM7hHuporqTM/FgE8R75QDiaYzx7OTPhgNCTG4SCy0hng==}
 
+    dev: false
 
+
 
   /w3c-xmlserializer/4.0.0:
 
     resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
 
     engines: {node: '>=14'}
 
@@ -2578,3 +2550,9 @@ packages:
 
 
   /yallist/4.0.0:
 
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
+
 
+  /zrender/5.4.3:
 
+    resolution: {integrity: sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==}
 
+    dependencies:
 
+      tslib: 2.3.0
 
+    dev: false

+ 1 - 0
pnpm-workspace.yaml
Vedi File 

@@ -3,3 +3,4 @@ packages:
 
 - 'app'
 
 - 'components'
 
 - 'utils'
 
+- 'plugins/*'

+ 3 - 4
utils/index.js
Vedi File 

@@ -1,5 +1,4 @@
 
 
-
 
 export function withInstall(component) {
 
   component.install = function (app) {
 
     app.component(component.name, component);
 
@@ -7,9 +6,9 @@ export function withInstall(component) {
 
   return component;
 
 }
 
 
-export function WithInstallOfGlobalMethod(globalName,method) {
 
+export function WithInstallOfGlobalMethod(globalName, method) {
 
   method.install = function (app) {
 
-    app.prototype[globalName] = method
 
-  }
 
+    app.prototype[globalName] = method;
 
+  };
 
   return method;
 
 }