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

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

@@ -1172,6 +1172,11 @@
       "resolved": "https://rg.cnpmjs.org/@element-plus/icons/download/@element-plus/icons-0.0.11.tgz",
       "integrity": "sha1-mxh8ACd0VIuRGFDRf6X8L5pRX1c="
     },
+    "@element-plus/icons-vue": {
+      "version": "0.2.6",
+      "resolved": "https://r.cnpmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.6.tgz",
+      "integrity": "sha512-2gg7VCq4d2firgl7/aVym4Cx/wqKFwKybEQGJiiWJN4urW36+QdAEG1knqSD9qidbjhVp0Jnc9XdSTR1/4Whzw=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://r.cnpmjs.org/@hapi/address/download/@hapi/address-2.1.4.tgz",

package.json

@@ -9,10 +9,10 @@
   ],
   "main": "./dist/vcc.umd.min.js",
   "scripts": {
-    "dev": "vite --port 8008",
+    "dev": "vite --port 9818",
-    "serve": "vite --port 8008",
+    "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",

src/App.vue

@@ -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/components-v2/VCC.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();
   },

src/components/AttributeInput.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/CodeStructure.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) {
+      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(){
+    renderCount() {
-      return this.$store.state.renderCount;
+      return _store.state.renderCount;
     },
 
     canInitShortcut() {
       return this.currentEditRawInfo !== null && this.drawer;
     },
     currentEditRawInfo() {
-      if (this.$store.state.currentEditComp) {
+      if (_store.state.currentEditComp) {
-        const vccData = this.$store.state.currentEditComp.vccData;
+        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/JSCodeEditorDialog.vue

@@ -1,6 +1,5 @@
 <template>
-  <el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
+  <el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
-    :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/RawComponents.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 command="lcg">LCG平台</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-document" command="help">说明文档</el-dropdown-item>
+                <el-dropdown-item command="help">说明文档</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-chat-line-round" command="chat">在线沟通</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;

src/components/nested.vue

@@ -1,10 +1,10 @@
 <template>
   <draggable class="dragArea" tag="ul" :list="data" @start="onStartDrag" @choose="onClick" :group="{ name: 'g1' }"
-    @end="onEndDrag">
+    :item-key="getItemKey" @end="onEndDrag">
     <template #item="{ element }">
       <li class="itemArea">
         <p>{{ getRawComponentKey(element) }}</p>
-        <nested-draggable :data="getRawComponentContent(element).__children" />
+        <nested-draggable :data="getChild(element)" />
       </li>
     </template>
   </draggable>
@@ -13,6 +13,8 @@
 import draggable from "vuedraggable";
 import { getRawComponentKey, getRawComponentContent } from "@/utils/common";
 
+import { store as _store } from "@/libs/store.js";
+
 export default {
   props: {
     data: {
@@ -28,25 +30,37 @@ export default {
   computed: {
   },
   methods: {
+    getItemKey(item) {
+      return getRawComponentContent(item).lc_id;
+    },
+    getChild(item) {
+      const content = getRawComponentContent(item);
+      // 适用于没有子节点的节点，例如div，通过这样的操作后可以往一个空的div中拖入内容
+      if (!content.__children) {
+        content.__children = [];
+      }
+      return content.__children;
+    },
+
     getRawComponentKey,
     getRawComponentContent,
     onStartDrag(event) {
       event.item.classList.add("is-dragging");
     },
     onClick(event) {
-      if (this.$store.state.currentEditComp) {
+      if (_store.state.currentEditComp) {
-        this.$store.state.currentEditComp.item.classList.remove("is-dragging");
+        _store.state.currentEditComp.item.classList.remove("is-dragging");
       }
 
       event.item.classList.add("is-dragging");
 
       event.vccData = getRawComponentContent(this.data[event.oldIndex]);
-      this.$store.commit('storeCurrentEditComp', event);
+      _store.commit('storeCurrentEditComp', event);
     },
     onEndDrag(event) {
       event.item.classList.remove("is-dragging");
 
-      this.$store.commit('onDragEnd');
+      _store.commit('onDragEnd');
     }
   },
 

src/libs/main-panel.js

@@ -71,13 +71,15 @@ export class MainPanelProvider {
         if (this.editMode) {
             // 渲染当前代码
             const readyForMoutedElement = this.createMountedElement();
-            createBaseAppAsync(componentOptions).then(app => app.mount(readyForMoutedElement));
+            createBaseAppAsync(componentOptions).then(app => {
+                app.mount(readyForMoutedElement)
+                // 开启编辑模式
+                this.enableEditMode();
+            });
             
             // 拍平数据结构
             this.flatDataStructure(rawDataStructure);
     
-            // 开启编辑模式
-            this.enableEditMode();
         } else {
             // 渲染当前代码
             createBaseAppAsync(componentOptions).then(app => app.mount(this.mountedEle));

src/libs/store.js

@@ -1,17 +1,13 @@
 import { createStore } from 'vuex'
 
-const store = createStore({
+export const store = createStore({
   state() {
     return {
-      count: 0,
       currentEditComp: null,
       renderCount: 0
     }
   },
   mutations: {
-    increment(state) {
-      state.count++
-    },
     storeCurrentEditComp(state, newComp) {
       state.currentEditComp = newComp;
     },
@@ -20,8 +16,3 @@ const store = createStore({
     }
   }
 })
-
-export default function loadStore(app) {
-  app.use(store);
-  return app;
-}

src/main.js

@@ -7,13 +7,18 @@ import {
   Delete,
   Refresh,
   Minus,
-} from "@element-plus/icons";
+} from "@element-plus/icons-vue";
 import "element-plus/dist/index.css";
 
 import APP from "./App.vue";
 import loadCompontents from "@/libs/UIComponentInit.js";
-import loadStore from "@/libs/store.js";
 
+/**
+ * 创建实例基础方法
+ * @param {*} renderComponent 
+ * @param {*} loadFinished 
+ * @returns 
+ */
 function loadTemplate(renderComponent, loadFinished = () => {}) {
   const app = createApp(renderComponent);
   app.use(ElementPlus);
@@ -27,10 +32,20 @@ function loadTemplate(renderComponent, loadFinished = () => {}) {
   return app;
 }
 
+/**
+ * 同步创建实例
+ * @param {*} renderComponent 
+ * @returns 
+ */
 function createBaseAppSync(renderComponent = {}) {
   return loadTemplate(renderComponent);
 }
 
+/**
+ * 异步创建实例
+ * @param {*} renderComponent 
+ * @returns 
+ */
 function createBaseAppAsync(renderComponent = {}) {
   return new Promise((resolve, reject) => {
     loadTemplate(renderComponent, (app) => {
@@ -43,12 +58,12 @@ const app = createBaseAppSync(APP);
 
 app.component("question-filled", QuestionFilled);
 app.component("circle-plus", CirclePlus);
-app.component("refresh", Refresh);
+app.component("l-refresh", Refresh);
-app.component("delete", Delete);
+app.component("l-delete", Delete);
 app.component("document-copy", DocumentCopy);
-app.component("minus", Minus);
+app.component("l-minus", Minus);
 
-loadStore(app).mount("#app");
+app.mount("#app");
 
 // 内部需要同样配置的全局Vue
 self.createBaseAppAsync = createBaseAppAsync;

src/map/style.index.js

@@ -1 +1 @@
-export default {".container":"",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader :v-deep(.el-upload)":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;","#vant-button > *":"margin: 0 5px 5px 0;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;",":v-deep(.van-tabbar--fixed)":"position: initial;",":v-deep(.van-address-list__bottom)":"position: relative;",":v-deep(.van-submit-bar)":"position: initial;",".van-action-bar":"position: relative; padding-bottom: 0;"}
+export default {".container":"",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader :v-deep(.el-upload)":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;","#vant-button > *":"margin: 0 5px 5px 0;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;",":v-deep(.van-tabbar--fixed)":"position: initial;",":v-deep(.van-address-list__bottom)":"position: relative;",":v-deep(.van-submit-bar)":"position: initial;"}

src/rawComponents/element/button.vue

@@ -35,15 +35,8 @@
           <div lc_id="fiJ0b+a2C7">
               <div class="demonstration-element" lc_id="NadQOxXAQD">Button 按钮组</div>
               <el-button-group lc-mark lc_id="zPylslsF8c">
-                  <el-button type="primary" icon="el-icon-arrow-left" lc_id="YcgENB34wv">上一页</el-button>
+                  <el-button type="primary" lc_id="YcgENB34wv">上一页</el-button>
-                  <el-button type="primary" lc_id="7ZtWxMoRg5">
+                  <el-button type="primary" lc_id="7ZtWxMoRg5">下一页</el-button>
-下一页                      <i class="el-icon-arrow-right el-icon--right" lc_id="nhJ1UtAuzb"></i>
-                  </el-button>
-              </el-button-group>
-              <el-button-group lc-mark lc_id="8NQc5ZELeT">
-                  <el-button type="primary" icon="el-icon-edit" lc_id="rBWkIADCIC"></el-button>
-                  <el-button type="primary" icon="el-icon-share" lc_id="aZ8b7GZRtx"></el-button>
-                  <el-button type="primary" icon="el-icon-delete" lc_id="6htBQsITGM"></el-button>
               </el-button-group>
           </div>
           <div lc_id="x1oSPpUpOu">

src/rawComponents/element/form-base.vue

@@ -67,11 +67,6 @@
                       </template>
                   </el-upload>
               </div>
-              <div lc-mark style="max-width:400px;font-size:12px;" lc_id="KzLuue+H7z">
-用户头像上传:                  <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" lc_id="1eXpUahgcu">
-                      <img v-if="imageUrl" :src="imageUrl" class="avatar" lc_id="6Ax8qNsE2Z"/>                      <i v-else class="el-icon-plus avatar-uploader-icon" lc_id="lqybUMnnYf"></i>
-                  </el-upload>
-              </div>
               <div lc-mark style="max-width:400px;font-size:12px;" lc_id="NwHRrU2JEM">
 图片列表缩略图:                  <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture" lc_id="+hJ7DSkPgT">
                       <el-button size="small" type="primary" lc_id="y3uZKsl9b/">点击上传</el-button>

src/rawComponents/element/icon.vue

@@ -36,23 +36,22 @@
           </div>
           <div lc_id="U4YG27qq4s">
               <div class="demonstration-element" lc_id="tI02wMGVyX">NavMenu 导航菜单</div>
-              <el-menu lc-mark :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" lc_id="m4VKXvGyLa">
+              <el-menu lc-mark :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" lc_id="ihtDhkfBO3">
-                  <el-menu-item index="1" lc_id="5Rt63GCCjB">处理中心</el-menu-item>
+                  <el-menu-item index="1" lc_id="VejVEahyRO">Processing Center</el-menu-item>
-                  <el-menu-item index="4" lc_id="TDeTJ2Uw0j">
+                  <el-sub-menu index="2" lc_id="b9dDZDEyzu">
-                      <a target="_blank" lc_id="zY0ygk/pmh">订单管理</a>
+                      <template #title lc_id="EOLCWq1ax8">Workspace</template>
-                  </el-menu-item>
+                      <el-menu-item index="2-1" lc_id="waSAqnTnUK">item one</el-menu-item>
-                  <el-submenu index="2" lc_id="9HfPjJr/VE">
+                      <el-menu-item index="2-2" lc_id="x7OA9OoX9M">item two</el-menu-item>
-                      <template #title lc_id="dvfriNTe67">我的工作台</template>
+                      <el-menu-item index="2-3" lc_id="XoUxBjhh8r">item three</el-menu-item>
-                      <el-menu-item index="2-1" lc_id="6fDR/35Dcb">选项1</el-menu-item>
+                      <el-sub-menu index="2-4" lc_id="kVYGkptqy3">
-                      <el-menu-item index="2-2" lc_id="inF9AUVbOa">选项2</el-menu-item>
+                          <template #title lc_id="TZAoib4i41">item four</template>
-                      <el-menu-item index="2-3" lc_id="ox0EdtlU3E">选项3</el-menu-item>
+                          <el-menu-item index="2-4-1" lc_id="KPPi+2aCzR">item one</el-menu-item>
-                      <el-submenu index="2-4" lc_id="QjzqxCifDT">
+                          <el-menu-item index="2-4-2" lc_id="9HsVuJIBXT">item two</el-menu-item>
-                          <template #title lc_id="NIvxdQ77F4">选项4</template>
+                          <el-menu-item index="2-4-3" lc_id="pb1fYeVfpT">item three</el-menu-item>
-                          <el-menu-item index="2-4-1" lc_id="mpWID+cqPv">选项1</el-menu-item>
+                      </el-sub-menu>
-                          <el-menu-item index="2-4-2" lc_id="zdDrVca5k3">选项2</el-menu-item>
+                  </el-sub-menu>
-                          <el-menu-item index="2-4-3" lc_id="BD0q7ZSrK5">选项3</el-menu-item>
+                  <el-menu-item index="3" disabled lc_id="OYs/KISq4y">Info</el-menu-item>
-                      </el-submenu>
+                  <el-menu-item index="4" lc_id="POtcpYxQZ9">Orders</el-menu-item>
-                  </el-submenu>
               </el-menu>
           </div>
           <div lc_id="Hr+gUUgFTD">
@@ -82,9 +81,7 @@
           <div lc_id="q1K7UjfQRh">
               <div class="demonstration-element" lc_id="QRo+LiBcqY">Dropdown 下拉菜单</div>
               <el-dropdown lc-mark lc_id="eEugqtt2Ed">
-                  <span class="el-dropdown-link" lc_id="T9RXOuEAsg">
+                  <span class="el-dropdown-link" lc_id="T9RXOuEAsg">下拉菜单</span>
-下拉菜单                      <i class="el-icon-arrow-down el-icon--right" lc_id="CptOnFiM0H"></i>
-                  </span>
                   <template #dropdown lc_id="Jgi+BtUZkP">
                       <el-dropdown-menu lc_id="fyNKB1+0hw">
                           <el-dropdown-item lc_id="nCNWPghXw7">黄金糕</el-dropdown-item>
@@ -252,10 +249,10 @@ export default {
     format(percentage) {
       return percentage === 100 ? "满" : `${percentage}%`;
     },
-    handleNodeClick() {},
+    handleNodeClick() { },
-    handleSelect() {},
+    handleSelect() { },
-    handleClick() {},
+    handleClick() { },
-    goBack2() {},
+    goBack2() { },
     handleChange3(val) {
       console.log(val);
     },

src/rawComponents/vant/button.vue

@@ -30,8 +30,7 @@
                       <van-cell title="单元格" value="内容" label="描述信息" lc_id="wCy+AFO6oA"></van-cell>
                   </van-cell>
               </van-cell-group>
-              <br>
+              <br lc_id="Bc72f94saa"/>              <van-cell-group inset lc-mark lc_id="GDUu8grqyq">
-              <van-cell-group inset lc-mark lc_id="GDUu8grqyq">
                   <van-cell title="单元格" value="内容" lc_id="R/yvDgWEzu">
                       <van-cell title="单元格" value="内容" label="描述信息" lc_id="nH8Z1dpWkB"></van-cell>
                   </van-cell>

src/rawComponents/vant/display.vue

@@ -28,8 +28,7 @@
               <van-divider lc-mark lc_id="ZFHen1KfO4">文字</van-divider>
               <van-divider lc-mark content-position="left" lc_id="2YAd2q9KCC">文字</van-divider>
               <van-divider lc-mark content-position="right" lc_id="07IIi1+FZz">文字</van-divider>
-      <van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" lc_id="UtOxHb5Qfg">
+              <van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" lc_id="UtOxHb5Qfg">文字</van-divider>
-        文字</van-divider>
           </div>
           <div lc_id="T6tvspYttI">
               <div class="demonstration-vant" lc_id="tQEA1/gYgR">Empty 空状态</div>
@@ -45,11 +44,9 @@
           </div>
           <div lc_id="sl50gl586K">
               <div class="demonstration-vant" lc_id="2fzVlX0csX">NoticeBar 通知栏</div>
-      <van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc_id="k61bYFFVQm">
+              <van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc_id="k61bYFFVQm"></van-notice-bar>
-      </van-notice-bar>
               <van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" lc-mark lc_id="hVnGw6dGn5"></van-notice-bar>
-      <van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark lc_id="xlMfxzUiEv">
+              <van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark lc_id="xlMfxzUiEv"></van-notice-bar>
-      </van-notice-bar>
           </div>
           <div lc_id="7E/zp4vYl5">
               <div class="demonstration-vant" lc_id="Z0VWmNgtun">Progress 进度条</div>
@@ -60,8 +57,7 @@
           <div lc_id="mllWNtm7WD">
               <div class="demonstration-vant" lc_id="XU1g37b7Bj">Skeleton 骨架屏</div>
               <van-skeleton title :row="3" lc-mark lc_id="B9ypSupDLY"></van-skeleton>
-      <br lc_id="gJKqa1lhDD" />
+              <br lc_id="gJKqa1lhDD"/>              <van-skeleton title avatar :row="3" lc-mark lc_id="LH6oqOei+U"></van-skeleton>
-      <van-skeleton title avatar :row="3" lc-mark lc_id="LH6oqOei+U"></van-skeleton>
           </div>
           <div lc_id="H2zy4AGqzd">
               <div class="demonstration-vant" lc_id="f2BUM74AC2">Steps 步骤条</div>
@@ -98,7 +94,7 @@
               </div>
           </div>
       </div>
-</template>
+  </template>
   <script>
 export default {
   data() {
@@ -120,8 +116,7 @@ export default {
     onLoad() { },
   },
 };  </script>
-  <style scoped>
+  <style scoped>.colon {
-.colon {
   display: inline-block;
   margin: 0 4px;
   color: #ee0a24;
@@ -140,5 +135,4 @@ export default {
   line-height: 150px;
   text-align: center;
   background-color: #39a9ed;
-}
+}</style>
-</style>

src/rawComponents/vant/layout.vue

@@ -12,8 +12,7 @@
           </div>
           <div lc_id="L5fPGRqjYZ">
               <div class="demonstration-vant" lc_id="3qMdltHE4i">DatetimePicker 时间选择 ❌</div>
-      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate"
+              <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate" :max-date="maxDate" lc_id="14vPN9ntBV"></van-datetime-picker>
-        :max-date="maxDate" lc_id="14vPN9ntBV"></van-datetime-picker>
           </div>
           <div lc_id="ODgqdaL6ED">
               <div class="demonstration-vant" lc_id="hrPSBFZ6Hh">Checkbox 复选框</div>
@@ -30,8 +29,7 @@
                       <van-checkbox name="b" lc_id="lNhFITM1W/">复选框 b</van-checkbox>
                       <van-checkbox lc-mark name="c" lc_id="BVLbIHoPpi">复选框 c</van-checkbox>
                   </van-checkbox-group>
-        <br lc_id="lEi0tbIvkM" />
+                  <br lc_id="lEi0tbIvkM"/>                  <van-button type="primary" size="small" @click="checkAll" lc_id="azfVg1jydO">全选</van-button>
-        <van-button type="primary" size="small" @click="checkAll" lc_id="azfVg1jydO">全选</van-button>
                   <van-button plain size="small" @click="toggleAll" lc_id="FxjbFUMiWD">反选</van-button>
               </div>
           </div>
@@ -42,8 +40,7 @@
                       <van-radio name="1" lc_id="eX5Wd5A8M+">单选框 1</van-radio>
                       <van-radio lc-mark name="2" lc_id="QN9H1HdL7S">单选框 2</van-radio>
                   </van-radio-group>
-        <br lc_id="5uaRLSgQ+B" />
+                  <br lc_id="5uaRLSgQ+B"/>                  <van-radio-group lc-mark v-model="radio10" lc_id="p/WdWJotYb">
-        <van-radio-group lc-mark v-model="radio10" lc_id="p/WdWJotYb">
                       <van-cell-group lc_id="7SU7k9W/RI">
                           <van-cell title="单选框 1" clickable @click="radio10 = '1'" lc-mark lc_id="cu2BQ/D1Gt">
                               <template #right-icon lc_id="yLUfrpVFId">
@@ -60,7 +57,7 @@
               </div>
           </div>
       </div>
-</template>
+  </template>
   <script>
 export default {
   data() {

src/rawComponents/vant/nav.vue

@@ -145,10 +145,8 @@ export default {
 }
 :v-deep(.van-submit-bar) {
   position: initial;
-}
+}</style>
-</style>
+  <style>
-
-<style>
 .van-action-bar {
   position: relative;
   padding-bottom: 0;
@@ -156,5 +154,4 @@ export default {
 
 .van-submit-bar {
   z-index: 0;
-}
+}  </style>
-</style>