JS-Encoder · Longgererer · Jun 23, 2024 · Jun 20, 2024
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <title>前端在线编辑器 - JS-Encoder</title>
 
     <!-- start style -->
-    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3456619_2k8fb4xh66s.css?spm=a313x.manage_type_myprojects.i1.9.51003a81OLGjSm&file=font_3456619_2k8fb4xh66s.css">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3456619_pqsb251b4b.css?spm=a313x.manage_type_myprojects.i1.9.51003a818wBFtw&file=font_3456619_pqsb251b4b.css">
     <link rel="icon" href="/favicon.ico" />
     <!-- font -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -31,7 +31,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="https://at.alicdn.com/t/c/font_3456619_s1tpex90yd.js?spm=a313x.manage_type_myprojects.i1.10.51003a810E9yiy&file=font_3456619_s1tpex90yd.js"></script>
+    <script src="https://at.alicdn.com/t/c/font_3456619_pqsb251b4b.js?spm=a313x.manage_type_myprojects.i1.10.51003a818wBFtw&file=font_3456619_pqsb251b4b.js"></script>
     <script>
       // 初始化主题
       document.documentElement.setAttribute("theme", "dark")

diff --git a/src/type/template.ts b/src/type/template.ts
@@ -2,11 +2,14 @@ import { OriginLang } from "./prep"
 import { IEditorConfig } from "./settings"
 import { DeepPartial } from "./types"
 
-/** 模板对应的语言 */
+/** 模板对应的语言或框架 */
 export const enum TemplateLang {
   VUE = "Vue",
   VANILLA = "Vanilla",
   REACT = "React",
+  ELEMENT_PLUS = "Element Plus",
+  ANT_DESIGN = "Ant Design",
+  ECHARTS = "Echarts",
   CUSTOM = "Custom",
 }
 

diff --git a/src/utils/config/template/code/ant-design/code.html b/src/utils/config/template/code/ant-design/code.html
@@ -0,0 +1 @@
+<div id="root"></div>
diff --git a/src/utils/config/template/code/ant-design/code.jsx b/src/utils/config/template/code/ant-design/code.jsx
@@ -0,0 +1,13 @@
+const { Button, Modal } = window.antd
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <Button type="primary">This is a template of Ant Design!</Button>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("root"))
diff --git a/src/utils/config/template/code/ant-design/index.ts b/src/utils/config/template/code/ant-design/index.ts
@@ -0,0 +1,8 @@
+import { OriginLang } from "@type/prep"
+import htmlCode from "./code.html?raw"
+import babelCode from "./code.jsx?raw"
+
+export default {
+  [OriginLang.HTML]: htmlCode,
+  [OriginLang.JAVASCRIPT]: babelCode,
+}
diff --git a/src/utils/config/template/code/echarts/code.html b/src/utils/config/template/code/echarts/code.html
@@ -0,0 +1 @@
+<div id="main" style="width: 600px;height: 400px;"></div>
diff --git a/src/utils/config/template/code/echarts/code.js b/src/utils/config/template/code/echarts/code.js
@@ -0,0 +1,27 @@
+// 基于准备好的dom，初始化echarts实例
+const myChart = echarts.init(document.getElementById("main"))
+
+// 指定图表的配置项和数据
+const option = {
+  title: {
+    text: "ECharts 入门示例",
+  },
+  tooltip: {},
+  legend: {
+    data: ["销量"],
+  },
+  xAxis: {
+    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
+  },
+  yAxis: {},
+  series: [
+    {
+      name: "销量",
+      type: "bar",
+      data: [5, 20, 36, 10, 10, 20],
+    },
+  ],
+}
+
+// 使用刚指定的配置项和数据显示图表。
+myChart.setOption(option)
diff --git a/src/utils/config/template/code/echarts/index.ts b/src/utils/config/template/code/echarts/index.ts
@@ -0,0 +1,8 @@
+import { OriginLang } from "@type/prep"
+import htmlCode from "./code.html?raw"
+import jsCode from "./code.js?raw"
+
+export default {
+  [OriginLang.HTML]: htmlCode,
+  [OriginLang.JAVASCRIPT]: jsCode,
+}
diff --git a/src/utils/config/template/code/element-plus/code.html b/src/utils/config/template/code/element-plus/code.html
@@ -0,0 +1,3 @@
+<div id="app">
+  <el-button>{{ message }}</el-button>
+</div>
diff --git a/src/utils/config/template/code/element-plus/code.js b/src/utils/config/template/code/element-plus/code.js
@@ -0,0 +1,12 @@
+const { createApp, ref } = Vue
+
+const App = createApp({
+  setup() {
+    const message = ref("This is a template of Element Plus!")
+    return {
+      message,
+    }
+  },
+})
+App.use(ElementPlus)
+App.mount("#app")
diff --git a/src/utils/config/template/code/element-plus/index.ts b/src/utils/config/template/code/element-plus/index.ts
@@ -0,0 +1,8 @@
+import { OriginLang } from "@type/prep"
+import htmlCode from "./code.html?raw"
+import jsCode from "./code.js?raw"
+
+export default {
+  [OriginLang.HTML]: htmlCode,
+  [OriginLang.JAVASCRIPT]: jsCode,
+}
diff --git a/src/utils/config/template/code/react/code.jsx b/src/utils/config/template/code/react/code.jsx
@@ -1,4 +1,9 @@
-ReactDOM.render(
-  <h1>This is a template of React!</h1>,
-  document.getElementById("root"),
-)
+class App extends React.Component {
+  render() {
+    return (
+      <div>This is a template of React!</div>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("root"))
diff --git a/src/utils/config/template/code/vanilla/code.html b/src/utils/config/template/code/vanilla/code.html
@@ -1 +1 @@
-<div>Welcome to use Vanilla template!</div>
+<div>This is a template of Vanilla!</div>
diff --git a/src/utils/config/template/code/vue-component/code.vue b/src/utils/config/template/code/vue-component/code.vue
@@ -8,7 +8,7 @@
   export default {
     data() {
       return {
-        message: "Welcome to vue Vue3 template!",
+        message: "This is a template of Vue3 Component!",
       }
     },
   }

diff --git a/src/utils/config/template/code/vue/code.js b/src/utils/config/template/code/vue/code.js
@@ -2,9 +2,9 @@ const { createApp, ref } = Vue
 
 createApp({
   setup() {
-    const message = ref("Hello vue!")
+    const message = ref("This is a template of Vue!")
     return {
-      message
+      message,
     }
-  }
+  },
 }).mount("#app")
diff --git a/src/utils/config/template/index.ts b/src/utils/config/template/index.ts
@@ -4,22 +4,54 @@ import vueCodeMap from "./code/vue"
 import reactCodeMap from "./code/react"
 import vanillaCodeMap from "./code/vanilla"
 import vueComponentCodeMap from "./code/vue-component"
+import elementPlusCodeMap from "./code/element-plus"
+import antDesignCodeMap from "./code/ant-design"
+import echartsCodeMap from "./code/echarts"
 import { OriginLang, Prep } from "@type/prep"
 
 export const templateCodeMap = {
   [TemplateLang.VUE]: vueCodeMap,
   [TemplateLang.REACT]: reactCodeMap,
   [TemplateLang.VANILLA]: vanillaCodeMap,
+  [TemplateLang.ELEMENT_PLUS]: elementPlusCodeMap,
+  [TemplateLang.ANT_DESIGN]: antDesignCodeMap,
+  [TemplateLang.ECHARTS]: echartsCodeMap,
 }
 
+const vueScript = ["https://unpkg.com/vue@3"]
+
+const reactScript = [
+  "https://unpkg.com/react@18.3.1/umd/react.production.min.js",
+  "https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js",
+]
+
 export const templateLibrariesMap = {
   [TemplateLang.VUE]: {
-    script: ["https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js"],
+    script: [...vueScript],
   },
   [TemplateLang.REACT]: {
+    script: [...reactScript],
+  },
+  [TemplateLang.ELEMENT_PLUS]: {
+    style: ["https://unpkg.com/element-plus/dist/index.css"],
+    script: [
+      ...vueScript,
+      "https://unpkg.com/element-plus",
+    ],
+  },
+  [TemplateLang.ANT_DESIGN]: {
+    style: [
+      "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/antd/4.18.9/antd.min.css",
+    ],
     script: [
-      "https://cdn.staticfile.org/react/17.0.0/umd/react.development.min.js",
-      "https://cdn.staticfile.org/react-dom/17.0.0/umd/react-dom.development.min.js",
+      ...reactScript,
+      "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/antd/4.18.9/antd.min.js",
+    ],
+  },
+  [TemplateLang.ECHARTS]: {
+    style: [],
+    script: [
+      "https://unpkg.com/echarts",
     ],
   },
 }
@@ -31,6 +63,12 @@ export const templatePrepMap = {
     ...initialPrepMap,
     [OriginLang.JAVASCRIPT]: Prep.BABEL,
   },
+  [TemplateLang.ELEMENT_PLUS]: initialPrepMap,
+  [TemplateLang.ANT_DESIGN]: {
+    ...initialPrepMap,
+    [OriginLang.JAVASCRIPT]: Prep.BABEL,
+  },
+  [TemplateLang.ECHARTS]: initialPrepMap,
 }
 
 export const componentTemplateCodeMap = {
@@ -39,9 +77,10 @@ export const componentTemplateCodeMap = {
 
 export const componentTemplateLibrariesMap = {
   [TemplateLang.VUE]: {
-    script: ["https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js"],
+    script: [...vueScript],
   },
 }
+
 export const componentTemplatePrepMap = {
   [TemplateLang.VUE]: {
     [OriginLang.JAVASCRIPT]: Prep.VUE,

diff --git a/src/utils/editor/compiler/index.ts b/src/utils/editor/compiler/index.ts
@@ -94,6 +94,10 @@ export const compileJSX = async (code: string) => {
   return window.Babel.transform(code, { presets: ["react"] }).code || ""
 }
 
+export interface IVueCompileOptions {
+  plugins?: string[]
+}
+
 // eslint-disable-next-line max-lines-per-function
 export const compileVue = async (code: string): Promise<ICompileCodeMapResult> => {
   const { parse, compileStyle, compileScript, rewriteDefault } = await import("@vue/compiler-sfc")
@@ -162,10 +166,11 @@ export const compileVue = async (code: string): Promise<ICompileCodeMapResult> =
     <div id="app"></div>
     <script type="module">
       ${scriptCode}
-      const _sfc_app = Vue.createApp({
+      const App = Vue.createApp({
         template: \`${templateCode}\`,
         ...${mainName}
-      }).mount("#app")
+      })
+      App.mount("#app")
     </script>
   `.trim()
   return {

diff --git a/src/views/components/modals/template-modal/components/template-card/template-card.ts b/src/views/components/modals/template-modal/components/template-card/template-card.ts
@@ -8,6 +8,9 @@ export const inbuiltTemplateIconMap = {
   [TemplateLang.VUE]: "icon-vue",
   [TemplateLang.VANILLA]: "icon-javascript",
   [TemplateLang.REACT]: "icon-jsx",
+  [TemplateLang.ELEMENT_PLUS]: "icon-element-plus",
+  [TemplateLang.ANT_DESIGN]: "icon-ant-design",
+  [TemplateLang.ECHARTS]: "icon-echarts",
 }
 
 export interface IProps {

diff --git a/src/views/components/modals/template-modal/components/template-card/template-card.vue b/src/views/components/modals/template-modal/components/template-card/template-card.vue
@@ -46,7 +46,7 @@ const templateIcon = getTemplateIcon(props.template)
   .lang-icon {
     width: 40px;
     height: 40px;
-    margin-right: 32px;
+    margin-right: 20px;
   }
   .template-lang {
     line-height: 18px;

diff --git a/src/views/components/modals/template-modal/template-modal.ts b/src/views/components/modals/template-modal/template-modal.ts
@@ -5,7 +5,6 @@ import { componentTemplateCodeMap, componentTemplateLibrariesMap, componentTempl
 /** 内置模板列表, 不存入数据库中，id从-1开始递减 */
 export const inbuiltTemplateList: ITemplateInfo[] = [
   {
-    id: -1,
     lang: TemplateLang.VANILLA,
     type: TemplateType.INBUILT,
     codeMap: templateCodeMap[TemplateLang.VANILLA],
@@ -14,7 +13,6 @@ export const inbuiltTemplateList: ITemplateInfo[] = [
     },
   },
   {
-    id: -2,
     lang: TemplateLang.VUE,
     type: TemplateType.INBUILT,
     codeMap: templateCodeMap[TemplateLang.VUE],
@@ -24,7 +22,6 @@ export const inbuiltTemplateList: ITemplateInfo[] = [
     },
   },
   {
-    id: -3,
     lang: TemplateLang.VUE,
     type: TemplateType.INBUILT,
     isComponent: true,
@@ -35,7 +32,6 @@ export const inbuiltTemplateList: ITemplateInfo[] = [
     },
   },
   {
-    id: -4,
     lang: TemplateLang.REACT,
     type: TemplateType.INBUILT,
     codeMap: templateCodeMap[TemplateLang.REACT],
@@ -44,4 +40,34 @@ export const inbuiltTemplateList: ITemplateInfo[] = [
       prepMap: templatePrepMap[TemplateLang.REACT],
     },
   },
-]
+  {
+    lang: TemplateLang.ELEMENT_PLUS,
+    type: TemplateType.INBUILT,
+    codeMap: templateCodeMap[TemplateLang.ELEMENT_PLUS],
+    editorConfig: {
+      libraries: templateLibrariesMap[TemplateLang.ELEMENT_PLUS],
+      prepMap: templatePrepMap[TemplateLang.ELEMENT_PLUS],
+    },
+  },
+  {
+    lang: TemplateLang.ANT_DESIGN,
+    type: TemplateType.INBUILT,
+    codeMap: templateCodeMap[TemplateLang.ANT_DESIGN],
+    editorConfig: {
+      libraries: templateLibrariesMap[TemplateLang.ANT_DESIGN],
+      prepMap: templatePrepMap[TemplateLang.ANT_DESIGN],
+    },
+  },
+  {
+    lang: TemplateLang.ECHARTS,
+    type: TemplateType.INBUILT,
+    codeMap: templateCodeMap[TemplateLang.ECHARTS],
+    editorConfig: {
+      libraries: templateLibrariesMap[TemplateLang.ECHARTS],
+      prepMap: templatePrepMap[TemplateLang.ECHARTS],
+    },
+  },
+].map((item, index) => ({
+  ...item,
+  id: -(index + 1),
+}))
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div id="main" style="width: 600px;height: 400px;"></div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div>Welcome to use Vanilla template!</div>
		<div>This is a template of Vanilla!</div>