yann-vis-cli 1.10.2 → 1.11.1

package/dist/create/chart/index.js

@@ -1 +1 @@
-"use strict";const{updatePackageJson:e,getPackageName:a,outputVueName:s,get_plugin_version:t}=require("../../utils"),n=require("yann-fs").default,r=require("path");module.exports=async function(i,o,c,l,u,v,p){await n.outputJson(r.resolve(o,"public","base.json"),{name:i,label:i,desc:"Custom Chart",version:"1.0.0",width:480,height:240,type:u||"other",author:l,id:v},{spaces:2,EOL:"\n"});const d=`\nexport const ${a(i)} = component`;if(await n.appendFile(r.resolve(o,"index.js"),d),await s(r.resolve(o,"src","index.vue"),i),await e(o,{name:i,author:l}),c&&"chart"===c.type?await e(o,{name:i,author:l,devDependencies:{"@chart/utils":"workspace:*"}}):await e(o,{name:i,author:l,devDependencies:{"@vitejs/plugin-vue":"^3.2.0",sass:"^1.69.7",vite:"^4.5.5","yann-snapshot":"^0.1.0","yann-chart-cli":"^"+t("yann-chart-cli")||"1.1.0","vite-plugin-compression":"^0.5.1","vite-plugin-banner":"^0.7.1"},dependencies:{vue:"^3.4.4","yann-i18n":"1.0.7"}}),!p)return;const h=r.resolve(o,"src"),m=r.resolve(o,"render.js"),w=r.resolve(o,"render.ts"),g=r.resolve(h,"config.js"),y=r.resolve(h,"config.ts"),j=r.resolve(h,"data.js"),f=r.resolve(h,"data.ts"),b=r.resolve(h,"style.js"),x=r.resolve(h,"style.ts");await n.rename(m,w),await n.rename(g,y),await n.rename(j,f),await n.rename(b,x),await n.remove(r.resolve(o,"jsconfig.json"))};
+"use strict";const{updatePackageJson:e,getPackageName:a,outputVueName:n,get_plugin_version:t}=require("../../utils"),s=require("yann-fs").default,r=require("path");module.exports=async function(i,o,c,u,l,v,p){await s.outputJson(r.resolve(o,"public","base.json"),{name:i,label:i,desc:"Custom Chart",version:"1.0.0",width:480,height:240,type:l||"other",author:u,id:v},{spaces:2,EOL:"\n"});const d=`\nexport const ${a(i)} = component`;if(await s.appendFile(r.resolve(o,"index.js"),d),await n(r.resolve(o,"src","index.vue"),i),await e(o,{name:i,author:u}),c&&"chart"===c.type?await e(o,{name:i,author:u,devDependencies:{"@chart/utils":"workspace:*"}}):await e(o,{name:i,author:u,devDependencies:{"@vitejs/plugin-vue":"^3.2.0",sass:"^1.69.7",vite:"^4.5.5","yann-snapshot":"^0.1.0","yann-chart-cli":"^"+t("yann-chart-cli")||"1.1.0","vite-plugin-compression":"^0.5.1","vite-plugin-banner":"^0.7.1","@pangu/vchart-config":"^"+t("@pangu/vchart-config")||"1.0.12"},dependencies:{vue:"~3.3.13","yann-i18n":"1.0.7"}}),!p)return;const h=r.resolve(o,"src"),g=r.resolve(o,"render.js"),m=r.resolve(o,"render.ts"),w=r.resolve(h,"config.js"),y=r.resolve(h,"config.ts"),f=r.resolve(h,"data.js"),j=r.resolve(h,"data.ts"),b=r.resolve(h,"style.js"),x=r.resolve(h,"style.ts");await s.rename(g,m),await s.rename(w,y),await s.rename(f,j),await s.rename(b,x),await s.remove(r.resolve(o,"jsconfig.json"))};

package/dist/pack/index.js

@@ -1 +1 @@
-"use strict";const e=require("path"),t=require("yann-fs").default,{to:s}=require("await-to-js"),{getPackageInfo:r,scanFileFindChart:i,getPackageName:n,buildPathHandler:o,exit:a,versionHandle:c,compareVersion:l,runAsyncCmd:p,log:d}=require("../utils"),u=require("p-limit"),m=require("dayjs"),w="src/components",f="src/charts",v=async s=>{try{const r=await t.readdir(s,{withFileTypes:!0});for(const i of r){const r=e.join(s,i.name);i.isDirectory()?await v(r):i.isFile()&&i.name.endsWith(".gz")&&await t.unlink(r)}}catch(e){throw console.error(`处理目录 ${s} 时出错:`,e.message),e}},h=async(i,a,p,u,m)=>{if(i.startsWith("."))return;const h=e.resolve(a,i),[$,g]=await t.readJson(e.resolve(h,"package.json"));if($||!g)return;const[x,y]=await t.readJson(e.resolve(h,"public","base.json"));if(x||!y)return;const{isDev:F}=y;if(F)return;if(!m.includes(i)){if(!await t.exists(e.resolve(p,f,i,"index.ts")))return;return void u.add(i)}const P=await c(h);if("string"==typeof P)return;const{name:C,outDir:E}=r(P),j=`V${C}`;d.info(`开始打图表包，图表名：“${i}”，版本号：“v${P.version}”.`),await o(h);const D=e.resolve(p,f,i),L=e.resolve(D,P.version);await t.remove(L);const O=e.resolve(L,"es");await t.copy(e.resolve(h,E,"es"),O),await v(L),await t.writeFile(e.resolve(L,"index.ts"),`import Component from "./es/index";\nexport const ${j} = Component;`),await(async(r,i)=>{try{const n=await t.readdir(i,{withFileTypes:!0}),o=[];for(const e of n)e.isFile()&&e.name.endsWith(".css")&&o.push(e.name);if(o.length>0){const i=e.resolve(r,"index.ts"),[n,a]=await s(t.readFile(i,"utf-8"));if(n||!a)return;let c="";for(const e of o)c+=`import './es/${e}'\n`;c+=a,await t.writeFile(i,c)}}catch(e){throw console.error(`处理目录 ${dir} 时出错:`,e.message),e}})(L,O);const k=e.resolve(D,"index.ts");await t.ensureFile(k),u.add(i);const[q,J]=await s(t.readFile(k,"utf-8"));if(q)return;const T=`V${n(i)}`,b=`import { ${j} } from './${P.version}/index'\nexport { ${j} }\n`;if(J.includes("export")){const e=/\.\/([\d.]+)\/index/g,s=[];let r;for(;null!==(r=e.exec(J));)s.push(r[1]);if(s.includes(P.version))return;const i=`${b}\n${J}`,n=s.sort((e,t)=>l(t,e))[0];if(l(n,P.version)>0)return void await t.writeFile(k,i);const o=new RegExp(`(export\\s*\\{)\\s*(\\w+)(\\s+)(as)(\\s+)(${T})(\\s*)(\\})`,"g"),a=i.replace(o,(e,t,s,r,i,n,o,a,c)=>`${t}${j}${r}${i}${n}${o}${a}${c}`);await t.writeFile(k,a)}else await t.appendFile(k,`${b}\nexport { ${j} as ${T} }`);await t.remove(e.resolve(h,E));const A=e.resolve(p,w,i);if(await t.exists(e.resolve(A,"index.ts")))return;await Promise.all([t.ensureFile(e.resolve(A,"index.ts")),t.ensureFile(e.resolve(A,"index.vue"))]);const H=[];H.push(t.writeFile(e.resolve(A,"index.ts"),`export { default as PgChart${T} } from './index.vue'`)),H.push(t.writeFile(e.resolve(A,"index.vue"),`<template>\n  <v-chart :chart="${T}" v-bind="$attrs" :data="data" :styled="styled" :option="option" :events="events" @message="emit('message', $event)"></v-chart>\n</template>\n<script setup lang="ts">\nimport { VChart } from '@/core'\nimport { ${T} } from "@/charts/${i}";\nimport { useAttrs, defineEmits, defineProps, defineOptions } from "vue";\nimport type { ChartPropsType, ChartEvents, EmitMessage, ScreenLayerOption } from "@/types";\n\nconst $attrs = useAttrs();\nconst props = defineProps<{\n  styled?: ChartPropsType<typeof ${T},'style'>\n  option?: Partial<ScreenLayerOption>\n  data?: ChartPropsType<typeof ${T},'data'>\n  events?: ChartEvents[]\n}>();\nconst emit = defineEmits<{\n    (e: "message", option: EmitMessage): void;\n}>();\n  \ndefineOptions({\n  name: 'pg-chart-v-${i}',\n  inheritAttrs: false\n})\n<\/script>`)),await Promise.all(H)};async function $(e){const[s,r]=await t.readJson(e);return s?(d.err(s?.message),!1):("sideEffects"in r&&(delete r.sideEffects,await t.outputJson(e,r,{spaces:2,EOL:"\n"})),!0)}module.exports=async function(){const r=Date.now(),n=await i();if(!n)return a("非图表库");const c=e.resolve(n.root,"../pangu-chart"),l=e.resolve(n.root,"packages"),v=e.resolve(l,"components"),[g,x]=await s(t.readdir(v));if(g)return a(g?.message);const y=new Set,F=u(3);let P=x||[];const C=new Set(process.argv.slice(3));if(await t.exists(e.resolve(c,f,"index.ts")))if(C.has("-c"))await Promise.all([t.remove(e.resolve(c,f)),t.remove(e.resolve(c,w))]);else{const e=C.has("-e");if(C.delete("-e"),C.size){const t=[...C];P=e?x.filter(e=>!t.includes(e)):t}}await Promise.allSettled(x.map(e=>F(()=>h(e,v,c,y,P))));const E=[],j=[...y].sort((e,t)=>e.toLowerCase().localeCompare(t.toLowerCase()));for(const e of j)E.push(`export * from './${e}'\n`);const D=E.join("");await Promise.all([t.writeFile(e.resolve(c,f,"index.ts"),D),t.writeFile(e.resolve(c,w,"index.ts"),D)]),await async function(s,r){d.info("开始打图表主题包.");const i=e.resolve(s,"utils","theme");await o(i);const n=e.resolve(r,"src/theme");await t.remove(n),await t.copy(e.resolve(i,"dist"),n),await t.remove(e.resolve(i,"dist"))}(l,c);const L=`图表库打包完成：${m().format("YYYY-MM-DD HH:mm")}，总耗时: ${(Date.now()-r)/1e3}s.`;d.success(L),console.log(),d.info("开始打pangu-v-chart.");const O=e.resolve(c,"package.json");await $(O),await o(c),d.success("pangu-v-chart打包完成，正在准备执行CHANGELOG和发布"),await p("npm",["run","release"],{cwd:c,stdio:"inherit"});const[k,q]=await t.readJson(O);if(k)return void d.err(k?.message);q.sideEffects=!1,await t.outputJson(O,q,{spaces:2,EOL:"\n"});const J=await Promise.race([p("npm",["publish"],{cwd:c,stdio:"inherit"}),new Promise(e=>setTimeout(()=>e({success:!1,message:"执行超时"}),6e4))]);J.success?d.success("发布成功"):d.err(J.message),await $(O),d.success("pangu-v-chart 全部执行完成.")};
+"use strict";const e=require("path"),t=require("yann-fs").default,{to:s}=require("await-to-js"),{getPackageInfo:r,scanFileFindChart:n,getPackageName:i,buildPathHandler:o,exit:a,versionHandle:c,compareVersion:l,runAsyncCmd:p,log:d}=require("../utils"),u=require("p-limit"),m=require("dayjs"),f="src/components",w="src/charts",v=async s=>{try{const r=await t.readdir(s,{withFileTypes:!0});for(const n of r){const r=e.join(s,n.name);n.isDirectory()?await v(r):n.isFile()&&n.name.endsWith(".gz")&&await t.unlink(r)}}catch(e){throw console.error(`处理目录 ${s} 时出错:`,e.message),e}},h=async(n,a,p,u,m)=>{if(n.startsWith("."))return;const h=e.resolve(a,n),[$,g]=await t.readJson(e.resolve(h,"package.json"));if($||!g)return;const[x,y]=await t.readJson(e.resolve(h,"public","base.json"));if(x||!y)return;const{isDev:F}=y;if(F)return;if(!m.includes(n)){if(!await t.exists(e.resolve(p,w,n,"index.ts")))return;return void u.add(n)}const P=await c(h);if("string"==typeof P)return;const{name:C,outDir:E}=r(P),j=`V${C}`;d.info(`开始打图表包，图表名：“${n}”，版本号：“v${P.version}”.`),await o(h);const D=e.resolve(p,w,n),L=e.resolve(D,P.version);await t.remove(L);const O=e.resolve(L,"es");await t.copy(e.resolve(h,E,"es"),O),await v(L),await t.writeFile(e.resolve(L,"index.ts"),`import Component from "./es/index";\nexport const ${j} = Component;`),await(async(r,n)=>{try{const i=await t.readdir(n,{withFileTypes:!0}),o=[];for(const e of i)e.isFile()&&e.name.endsWith(".css")&&o.push(e.name);if(o.length>0){const n=e.resolve(r,"index.ts"),[i,a]=await s(t.readFile(n,"utf-8"));if(i||!a)return;let c="";for(const e of o)c+=`import './es/${e}'\n`;c+=a,await t.writeFile(n,c)}}catch(e){throw console.error(`处理目录 ${dir} 时出错:`,e.message),e}})(L,O);const k=e.resolve(D,"index.ts");await t.ensureFile(k),u.add(n);const[q,J]=await s(t.readFile(k,"utf-8"));if(q)return;const T=`V${i(n)}`,b=`import { ${j} } from './${P.version}/index'\nexport { ${j} }\n`;if(J.includes("export")){const e=/\.\/([\d.]+)\/index/g,s=[];let r;for(;null!==(r=e.exec(J));)s.push(r[1]);if(s.includes(P.version))return;const n=`${b}\n${J}`,i=s.sort((e,t)=>l(t,e))[0];if(l(i,P.version)>0)return void await t.writeFile(k,n);const o=new RegExp(`(export\\s*\\{)\\s*(\\w+)(\\s+)(as)(\\s+)(${T})(\\s*)(\\})`,"g"),a=n.replace(o,(e,t,s,r,n,i,o,a,c)=>`${t}${j}${r}${n}${i}${o}${a}${c}`);await t.writeFile(k,a)}else await t.appendFile(k,`${b}\nexport { ${j} as ${T} }`);await t.remove(e.resolve(h,E));const A=e.resolve(p,f,n);if(await t.exists(e.resolve(A,"index.ts")))return;await Promise.all([t.ensureFile(e.resolve(A,"index.ts")),t.ensureFile(e.resolve(A,"index.vue"))]);const H=[];H.push(t.writeFile(e.resolve(A,"index.ts"),`export { default as PgChart${T} } from './index.vue'`)),H.push(t.writeFile(e.resolve(A,"index.vue"),`<template>\n  <v-chart :chart="${T}" v-bind="$attrs" :data="data" :styled="styled" :option="option" :events="events" @message="emit('message', $event)"></v-chart>\n</template>\n<script setup lang="ts">\nimport { VChart } from '@/core'\nimport { ${T} } from "@/charts/${n}";\nimport { useAttrs, defineEmits, defineProps, defineOptions } from "vue";\nimport type { ChartPropsType, ChartEvents, EmitMessage, ScreenLayerOption } from "@/types";\n\nconst $attrs = useAttrs();\nconst props = defineProps<{\n  styled?: ChartPropsType<typeof ${T},'style'>\n  option?: Partial<ScreenLayerOption>\n  data?: ChartPropsType<typeof ${T},'data'>\n  events?: ChartEvents[]\n}>();\nconst emit = defineEmits<{\n    (e: "message", option: EmitMessage): void;\n}>();\n  \ndefineOptions({\n  name: 'pg-chart-v-${n}',\n  inheritAttrs: false\n})\n<\/script>`)),await Promise.all(H)};async function $(e){const[s,r]=await t.readJson(e);return s?(d.err(s?.message),!1):("sideEffects"in r&&(delete r.sideEffects,await t.outputJson(e,r,{spaces:2,EOL:"\n"})),!0)}module.exports=async function(){const r=Date.now(),i=await n();if(!i)return a("非图表库");const c=e.resolve(i.root,"../pangu-chart"),l=e.resolve(i.root,"packages"),v=e.resolve(l,"components"),[g,x]=await s(t.readdir(v));if(g)return a(g?.message);const y=new Set,F=u(3);let P=x||[];const C=new Set(process.argv.slice(3));if(await t.exists(e.resolve(c,w,"index.ts")))if(C.has("-c"))await Promise.all([t.remove(e.resolve(c,w)),t.remove(e.resolve(c,f))]);else{const e=C.has("-e");if(C.delete("-e"),C.size){const t=[...C];P=e?x.filter(e=>!t.includes(e)):t}}await Promise.allSettled(x.map(e=>F(()=>h(e,v,c,y,P))));const E=[],j=[...y].sort((e,t)=>e.toLowerCase().localeCompare(t.toLowerCase()));for(const e of j)E.push(`export * from './${e}'\n`);const D=E.join("");await Promise.all([t.writeFile(e.resolve(c,w,"index.ts"),D),t.writeFile(e.resolve(c,f,"index.ts"),D)]);const L=`图表库打包完成：${m().format("YYYY-MM-DD HH:mm")}，总耗时: ${(Date.now()-r)/1e3}s.`;d.success(L),console.log(),d.info("开始打pangu-v-chart.");const O=e.resolve(c,"package.json");await $(O),await o(c),d.success("pangu-v-chart打包完成，正在准备执行CHANGELOG和发布"),await p("npm",["run","release"],{cwd:c,stdio:"inherit"});const[k,q]=await t.readJson(O);if(k)return void d.err(k?.message);q.sideEffects=!1,await t.outputJson(O,q,{spaces:2,EOL:"\n"});const J=await Promise.race([p("npm",["publish"],{cwd:c,stdio:"inherit"}),new Promise(e=>setTimeout(()=>e({success:!1,message:"执行超时"}),6e4))]);J.success?d.success("发布成功"):d.err(J.message),await $(O),d.success("pangu-v-chart 全部执行完成.")};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yann-vis-cli",
-  "version": "1.10.2",
+  "version": "1.11.1",
   "description": "vis-cli",
   "bin": {
     "pvis": "bin/index.js",

package/template/chart/example/App.vue

@@ -1,103 +1,12 @@
 <script setup>
-  import { computed, ref } from 'vue';
-  import ChartInfo from '../index';
-  import base from '../public/base.json';
-  import { takeSnapshot, downSnapshot } from 'yann-snapshot';
+import { ref } from "vue";
+import ChartInfo from "../../index";
+import "@pangu/vchart-config/style.css";
+import { VChartConfig } from "@pangu/vchart-config";
 
-  const { component: Chart, data, style } = ChartInfo;
-  const layerBoxStyle = computed(() => {
-    return {
-      width: base.width + 'px',
-      height: base.height + 'px'
-    };
-  });
-
-  const option = ref({ locale: 'zh' });
-  const chartData = computed(() => {
-    return typeof data === 'function' ? data(option.value.locale) : data;
-  });
-
-  const chartStyle = computed(() => {
-    return typeof style === 'function' ? style(option.value.locale) : style;
-  });
-  const chartRef = ref();
-  // 获取缩略图
-  const takeSnapshotHandle = async () => {
-    let baseImg;
-    if (typeof chartRef.value?.takeSnapshot === 'function') {
-      baseImg = chartRef.value.takeSnapshot();
-    } else {
-      // 通过htmlcanvas获取缩略图
-      const res = await takeSnapshot(document.getElementById('snapshot'));
-      if (res.base64) {
-        baseImg = res.base64;
-      }
-    }
-    if (baseImg) {
-      downSnapshot(baseImg, 'index');
-    }
-  };
+const isShow = ref(false);
 </script>
 
 <template>
-  <div class="box">
-    <!-- 图表盒子 -->
-    <div class="layerBox" :style="layerBoxStyle">
-      <!-- 图表具体内容 -->
-      <div class="layerMain">
-        <!-- 上面那些div不用去管，平台会自动生成 -->
-        <Chart :data="chartData" :styled="chartStyle" />
-      </div>
-    </div>
-    <button class="takeBtn" @click="takeSnapshotHandle">获取缩略图</button>
-  </div>
-  <!-- 截屏部分-勿删 -->
-  <div class="snapshot" id="snapshot">
-    <Chart
-      ref="chartRef"
-      :data="chartData"
-      :width="246"
-      :height="119"
-      :styled="chartStyle"
-    />
-  </div>
+  <VChartConfig v-model:is-show="isShow" :v-chart="ChartInfo" />
 </template>
-<style scoped lang="scss">
-  .box {
-    width: 100vw;
-    height: 100vh;
-    background-color: #242424;
-    position: fixed;
-    left: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    z-index: 10;
-    .takeBtn {
-      margin-top: 15px;
-    }
-    .layerBox {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      background: #2a2a34;
-      border-radius: 12px;
-      padding: 15px;
-
-      .layerMain {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-
-  .snapshot {
-    background-color: #191925;
-    width: 246px;
-    height: 119px;
-  }
-</style>