update: 移除所有不支持的el-icon图标

Author: shangbin

README.md

@@ -106,7 +106,7 @@ npm i
 npm run dev
 ```
 
-运行完成后，就可以访问[http://localhost:8008/](http://localhost:8008/)预览效果了.
+运行完成后，就可以访问[http://localhost:9818/](http://localhost:9818/)预览效果了.
 
 ## 使用介绍
 

package-lock.json

@@ -9,10 +9,10 @@
   ],
   "main": "./dist/vcc.umd.min.js",
   "scripts": {
-    "dev": "vite --port 8008",
-    "serve": "vite --port 8008",
+    "dev": "vite --port 9818",
+    "serve": "vite --port 9818",
     "build:release": "vite build --base=https://static.imonkey.xueersi.com/vcc3/",
-    "build": "vue-cli-service build --report --target lib --name vcc './src/components-v2/VCC.vue' && node ./src/script/distClear.js",
+    "build": "vue-cli-service build --report --target lib --name vcc './src/components-v2/VCC.vue'",
     "build:win": "vue-cli-service build --report --target lib --name vcc ./src/components-v2/VCC.vue && node ./src/script/distClear.js",
     "compileAndbuild:dev": "npm run compileComponent && vue-cli-service build",
     "lint": "vue-cli-service lint",
@@ -22,7 +22,7 @@
     "debugParser": "node ./src/test/parserJsCode.js"
   },
   "dependencies": {
-    "@element-plus/icons": "0.0.11",
+    "@element-plus/icons-vue": "^0.2.6",
     "@vitejs/plugin-vue": "^1.10.0",
     "@vue/compiler-sfc": "^3.2.22",
     "ant-design-vue": "^3.0.0-alpha.14",

package.json

@@ -1,5 +1,5 @@
 <template>
-  <vcc :initCodeEntity="codeInfoEntity" @updateCodeEntity="onCodeUpdate"></vcc>
+  <vcc :initCodeEntity="codeInfoEntity" @updateCodeEntity="onCodeUpdate" @onLoadFinish="onLoadFinish"></vcc>
 </template>
 
 <script>
@@ -39,6 +39,9 @@ export default {
       // 编辑后新的代码结构
       // codeRawVueInfo为template对象表示结构
       // JSCode为显式输入的JS逻辑
+    },
+    onLoadFinish(){
+      
     }
   }
 }

src/App.vue

@@ -37,7 +37,7 @@
       <el-tooltip effect="dark" content="查看实时代码" placement="top-start">
         <img class="round-icon" :src="iconCode" alt="" @click="codeDialogVisible = true">
       </el-tooltip>
-      <el-popconfirm confirmButtonText="确认" cancelButtonText="点错了" icon="el-icon-info" iconColor="red"
+      <el-popconfirm confirmButtonText="确认" cancelButtonText="点错了" iconColor="red"
         title="点我将清空所有编辑的内容, 确认吗?" @confirm="clear">
         <template #reference>
           <img class="round-icon" :src="iconClear" alt="">
@@ -49,7 +49,7 @@
       <lc-code :rawCode="code" v-model:codeDialogVisible="codeDialogVisible">
       </lc-code>
       <code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" v-model="structureVisible"
-        @reRender="render">
+        @reRender="render" :initStructure="codeRawVueInfo">
       </code-structure>
       <CodeEditor v-model:codeDialogVisible="jsDialogVisible" @saveJSCode="saveJSCode" ref="codeEditor"></CodeEditor>
       <VueEditor v-model:vueDialogVisible="vueDialogVisible" @codeParseSucess="codeParseSucess"></VueEditor>
@@ -85,7 +85,7 @@ export default {
       }
     }
   },
-  emits: ['updateCodeEntity'],
+  emits: ['updateCodeEntity', 'onLoadFinish'],
   components: {
     RawComponents: defineAsyncComponent(() => import("@/components/RawComponents.vue")),
     ToolsBar: defineAsyncComponent(() => import("./ToolsBar")),
@@ -108,7 +108,7 @@ export default {
 
       editMode: true,
 
-      codeRawVueInfo: "",
+      codeRawVueInfo: null,
       JSCode: ""
     };
   },
@@ -135,7 +135,8 @@ export default {
   },
   computed: {
   },
-  beforeCreate() { },
+  beforeCreate() {
+  },
   created() {
     this.mainPanelProvider = new MainPanelProvider();
   },
@@ -155,16 +156,16 @@ export default {
   methods: {
     convertLogicCode(JSCode) {
       try {
-          const JSCodeInfo = eval(`(function(){return ${JSCode.replace(/\s+/g, "")}})()`);
-          // 保留JS代码
-          this.JSCode = JSCode;
-          if (this.$refs.codeEditor) {
-            this.$refs.codeEditor.updateLogicCode(JSCode);
-          }
-          return JSCodeInfo;
-        } catch (e) { 
-          console.warn(`外部逻辑代码解析出错，解析的逻辑代码为: ${JSCode}, Error: ${e}`);
+        const JSCodeInfo = eval(`(function(){return ${JSCode.replace(/\s+/g, "")}})()`);
+        // 保留JS代码
+        this.JSCode = JSCode;
+        if (this.$refs.codeEditor) {
+          this.$refs.codeEditor.updateLogicCode(JSCode);
         }
+        return JSCodeInfo;
+      } catch (e) {
+        console.warn(`外部逻辑代码解析出错，解析的逻辑代码为: ${JSCode}, Error: ${e}`);
+      }
     },
 
     initShortcut() {
@@ -209,7 +210,7 @@ export default {
       }).onSelectElement(rawInfo => {
         this.currentEditRawInfo = rawInfo;
       }).saveJSCodeOnly(this.convertLogicCode(this.initCodeEntity.JSCode ? this.initCodeEntity.JSCode : ''))
-      .render(this.initCodeEntity.codeStructure ? this.initCodeEntity.codeStructure : this.getFakeData());
+        .render(this.initCodeEntity.codeStructure ? this.initCodeEntity.codeStructure : this.getFakeData());
     },
 
     // 通知父组件

src/components-v2/VCC.vue

@@ -14,23 +14,23 @@
             <el-input v-model="item.key" :placeholder="'key' + index" class="half-width"></el-input>
             <div class="split">:</div>
             <el-input v-model="item.value" :placeholder="'value' + index" class="half-width" style="flex-grow: 3;"></el-input>
-            <el-icon @click="deleteItem(index)" style="margin-left: 5px;"><minus /></el-icon>
+            <el-icon @click="deleteItem(index)" style="margin-left: 5px;"><l-minus /></el-icon>
           </div>
 
           <div class="quick-add-root">
             快速增加一些属性:
             <div style="margin-top: 5px;">
               <transition name="el-zoom-in-center">
-                <el-tag v-if="attributeKeys.indexOf('class') == -1" size="mini" type="success" @click="onClassClick"
+                <el-tag v-if="attributeKeys.indexOf('class') == -1" size="small" type="success" @click="onClassClick"
                   effect="dark">Class
                 </el-tag>
               </transition>
               <transition name="el-zoom-in-center">
-                <el-tag v-if="attributeKeys.indexOf('@click') == -1" size="mini" type="success" @click="onEventClick"
+                <el-tag v-if="attributeKeys.indexOf('@click') == -1" size="small" type="success" @click="onEventClick"
                   effect="dark">点击事件</el-tag>
               </transition>
               <transition name="el-zoom-in-center">
-                <el-tag v-if="!attributeKeys.includes('__text__')" size="mini" type="success" @click="onTextClick"
+                <el-tag v-if="!attributeKeys.includes('__text__')" size="small" type="success" @click="onTextClick"
                   effect="dark">文本内容</el-tag>
               </transition>
             </div>
@@ -52,12 +52,12 @@
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="保存属性 ctrl+s" placement="bottom">
         <el-button type="success" class="center" @click="save" circle>
-          <el-icon><refresh /></el-icon>
+          <el-icon><l-refresh /></el-icon>
         </el-button>
       </el-tooltip>
       <el-tooltip v-if="enableRemoveButton" class="item" effect="dark" content="移除该组件 ctrl+d" placement="bottom">
         <el-button type="danger" class="center" @click="remove" circle>
-          <el-icon><delete /></el-icon>
+          <el-icon><l-delete /></el-icon>
         </el-button>
       </el-tooltip>
       <el-tooltip v-if="enableBroButton" class="item" effect="dark" content="复制一个兄弟组件 ctrl+c" placement="bottom">
@@ -77,6 +77,7 @@
 import { getRawComponentKey, getRawComponentContent } from "@/utils/common";
 import { brotherEleEnum, copyBroCode } from "@/libs/bro-ele-config";
 import keymaster from "keymaster"
+import { store as _store } from "@/libs/store.js";
 
 export default {
   props: ['__rawVueInfo__', 'enableRemoveButton', 'shortcutInitMode'],// __rawVueInfo__为当前编辑的原始代码对象, shortcutInitMode快捷键的初始化方式
@@ -197,7 +198,7 @@ export default {
     },
     copyBro() {
       copyBroCode(this.__rawVueInfo__);
-      this.$store.commit('onDragEnd');
+      _store.commit('onDragEnd');
     },
     onShow() {
       // 这种方式适用于常规模式下的初始化，因为这个实例初始化后不会被销毁，一直常驻内存。但又不能受到其它实例销毁时的影响，所以需要明确的再次初始化。

src/components/AttributeInput.vue

@@ -1,8 +1,8 @@
 <template>
   <el-drawer v-model="drawer" :with-header="false" size="70%" direction="btt">
-    <div class="container">
+    <div class="cs-container">
 
-      <div style="text-align: center;">组件结构检视图
+      <div class="center">组件结构检视图
         <br>
         <span style="font-size:12px;">Components
           Structure</span>
@@ -28,12 +28,13 @@
 </template>
 
 <script>
-import { isObject, getRawComponentKey, getRawComponentContent } from "@/utils/common";
+import { getRawComponentContent } from "@/utils/common";
 import nestedDraggable from './nested.vue'
 import { defineAsyncComponent } from 'vue'
+import { store as _store } from "@/libs/store.js";
 
 export default {
-  props: ['visible'],
+  props: ['visible', 'initStructure'],
   emits: ['onLevelChange', 'remove', 'save', 'update:visible', 'reRender'],
   components: {
     AttributeInput: defineAsyncComponent(() => import("@/components/AttributeInput.vue")),
@@ -50,6 +51,7 @@ export default {
   created() { },
   beforeMount() { },
   mounted() {
+    this.updateCode(this.initStructure);
   },
   beforeUpdate() { },
   updated() { },
@@ -70,15 +72,17 @@ export default {
     },
 
     updateCode(codeRawInfo) {
-      this._codeRawInfo = codeRawInfo;
-      const content = getRawComponentContent(codeRawInfo);
-      const children = content.__children;
-      this.treeData = children;
+      if (codeRawInfo) {
+        this._codeRawInfo = codeRawInfo;
+        const content = getRawComponentContent(codeRawInfo);
+        const children = content.__children;
+        this.treeData = children;
+      }
     },
 
   },
   watch: {
-    renderCount(){
+    renderCount() {
       // 这里利用了vuedraggable v-model的特性，它会更改对象本身的引用
       this.$emit('reRender', this._codeRawInfo);
     }
@@ -93,16 +97,16 @@ export default {
       }
     },
 
-    renderCount(){
-      return this.$store.state.renderCount;
+    renderCount() {
+      return _store.state.renderCount;
     },
 
     canInitShortcut() {
       return this.currentEditRawInfo !== null && this.drawer;
     },
     currentEditRawInfo() {
-      if (this.$store.state.currentEditComp) {
-        const vccData = this.$store.state.currentEditComp.vccData;
+      if (_store.state.currentEditComp) {
+        const vccData = _store.state.currentEditComp.vccData;
         return window.tree[vccData.lc_id];
       } else {
         return null;
@@ -116,15 +120,16 @@ export default {
 <style scoped>
 /*  在此自动生成 */
 
-center {
+.center {
   padding: 20px;
+  text-align: center;
 }
 
 :v-deep(.el-drawer__body) {
   height: 100%;
 }
 
-.container {
+.cs-container {
   height: 100%;
   display: flex;
   flex-direction: column;

src/components/CodeStructure.vue

@@ -1,6 +1,5 @@
 <template>
-  <el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
-    :center=true>
+  <el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
     <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/javascript"></CodeEditor>
 
     <div style="padding: 10px; display:flex;justify-content: flex-end;align-items: center;">
@@ -11,7 +10,12 @@
 
       <div style="margin-left: 5px;">
         <el-link href="https://vcc.sahadev.tech/doc/#/improve/logic?id=%e9%80%bb%e8%be%91%e6%a8%a1%e6%9d%bf"
-          target="_blank" icon="el-icon-question">帮助与说明</el-link>
+          target="_blank">
+          <el-icon>
+            <question-filled />
+          </el-icon>
+          帮助与说明
+        </el-link>
         <div style="color: #6c6c6c; font-size:12px; margin-top:5px;">Tips: 建议看一下使用说明</div>
       </div>
     </div>

src/components/JSCodeEditorDialog.vue

@@ -4,7 +4,7 @@
     <nav style="display:flex;">
       <div :index="index + ''" v-for="(item, index) in iconArray" @click="onSelectElement(index)" :key="item.icon"
         :class="{'active':currentIndex === index}" class="main-icon-container">
-        <img v-if="item.enable" :src="item.icon" class="icon">
+        <img v-if="item.enable" :src="item.icon" class="l-icon">
         <el-tooltip v-else class="item" effect="dark" content="暂未开放，敬请期待" placement="right">
           <img :src="item.icon" class="icon" style="width: 34px;height: 34px;">
         </el-tooltip>
@@ -23,11 +23,11 @@
             </span>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item icon="el-icon-circle-check">基础组件数: {{ componentUnitNum }}
+                <el-dropdown-item>基础组件数: {{ componentUnitNum }}
                 </el-dropdown-item>
-                <el-dropdown-item icon="el-icon-document" command="lcg">LCG平台</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-document" command="help">说明文档</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-chat-line-round" command="chat">在线沟通</el-dropdown-item>
+                <el-dropdown-item command="lcg">LCG平台</el-dropdown-item>
+                <el-dropdown-item command="help">说明文档</el-dropdown-item>
+                <el-dropdown-item command="chat">在线沟通</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -38,7 +38,7 @@
     <nav v-if="currentSelectBrand.titleArray && currentSelectBrand.titleArray.length > 0">
       <div style="margin-bottom:10px;text-align:center;">
         <div style="padding:5px;font-size:12px;color:grey;">快速查找需要的</div>
-        <el-autocomplete class="inline-input" v-model="componentSearch" :fetch-suggestions="querySearch" size="mini"
+        <el-autocomplete class="inline-input" v-model="componentSearch" :fetch-suggestions="querySearch" size="small"
           placeholder="请输入..." @select="handleSelect"></el-autocomplete>
       </div>
       <div class="dismiss-scroll">
@@ -249,7 +249,7 @@ nav {
   }
 }
 
-.icon {
+.l-icon {
   width: 34px;
   height: 34px;
   border-radius: 5px;