chore: ⬆️ update deps

.vscode/settings.json

@@ -112,18 +112,22 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[scss]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": false,
+      "source.fixAll.stylelint": true
+    }
   },
   "[markdown]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
+    "source.fixAll.eslint": true
-    "source.fixAll.stylelint": true
   },
   "[vue]": {
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": false
+      "source.fixAll.eslint": false,
+      "source.fixAll.stylelint": true
     }
   },
   "i18n-ally.localesPaths": ["src/locales/lang"],

README.md

@@ -1,6 +1,6 @@
 # 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
 
-### 只是一个简单的模板，感兴趣可以根据自己的需要调整
+### 只是一个简单的模板，感兴趣可以根据自己的需要调整, 在这里你可以看到 vue3 很多有趣的新特性和玩法。
 
 [![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
 

components.d.ts

@@ -8,6 +8,7 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es/el-col')['default']
     ElCollapse: typeof import('element-plus/es/el-collapse')['default']
     ElCollapseItem: typeof import('element-plus/es/el-collapse-item')['default']
+    ElConfigProvider: typeof import('element-plus/es/el-config-provider')['default']
     ElContainer: typeof import('element-plus/es/el-container')['default']
     ElDialog: typeof import('element-plus/es/el-dialog')['default']
     ElDropdown: typeof import('element-plus/es/el-dropdown')['default']

package.json

@@ -21,63 +21,63 @@
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.3.2",
-    "@vueuse/core": "^5.2.0",
+    "@vueuse/core": "^5.3.0",
-    "@vueuse/integrations": "^5.2.0",
+    "@vueuse/integrations": "^5.3.0",
     "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "dayjs": "^1.10.6",
     "dexie": "^3.0.3",
-    "element-plus": "1.0.2-beta.58",
+    "element-plus": "1.0.2-beta.70",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.26.1",
-    "nanoid": "^3.1.23",
+    "nanoid": "^3.1.25",
     "normalize.css": "^8.0.1",
     "nprogress": "^1.0.0-1",
     "qrcode": "^1.4.4",
     "qs": "^6.10.1",
-    "vant": "3.1.4",
+    "vant": "3.2.0",
-    "vue": "3.1.5",
+    "vue": "3.2.2",
-    "vue-router": "^4.0.10",
+    "vue-router": "^4.0.11",
     "vuedraggable": "^4.0.3",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@types/node": "^16.4.2",
+    "@types/node": "^16.6.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@typescript-eslint/parser": "^4.28.4",
+    "@typescript-eslint/parser": "^4.29.1",
-    "@vitejs/plugin-legacy": "^1.4.4",
+    "@vitejs/plugin-legacy": "^1.5.1",
-    "@vitejs/plugin-vue": "^1.2.5",
+    "@vitejs/plugin-vue": "^1.4.0",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
+    "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "3.1.5",
+    "@vue/compiler-sfc": "3.2.2",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.14.0",
+    "eslint-plugin-vue": "^7.16.0",
     "gh-pages": "^3.2.3",
     "husky": "^7.0.1",
-    "lint-staged": "^11.1.1",
+    "lint-staged": "^11.1.2",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.1.1",
-    "sass": "1.36.0",
+    "sass": "1.37.5",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
     "typescript": "^4.3.5",
-    "vite": "2.4.3",
+    "vite": "2.4.4",
     "vite-plugin-components": "^0.13.2",
-    "vite-plugin-style-import": "^1.0.1",
+    "vite-plugin-style-import": "^1.1.1",
-    "vite-plugin-windicss": "^1.2.5",
+    "vite-plugin-windicss": "^1.2.7",
-    "vue-eslint-parser": "^7.9.0",
+    "vue-eslint-parser": "^7.10.0",
     "vue-tsc": "^0.2.2",
-    "windicss": "^3.1.5"
+    "windicss": "^3.1.7"
   },
   "repository": {
     "type": "git",

src/App.vue

@@ -1,11 +1,14 @@
 <template>
+  <el-config-provider :locale="locale">
     <router-view #="{ Component, route }">
       <component :is="Component" :key="route.path" />
     </router-view>
+  </el-config-provider>
 </template>
 
 <script setup lang="ts">
 import { provide } from 'vue'
+import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 import { initVisualData, injectKey, localKey } from '@/visual-editor/hooks/useVisualData'
 
 const visualData = initVisualData()
@@ -14,6 +17,8 @@ provide(injectKey, visualData)
 
 const { jsonData } = visualData
 
+const locale = zhCn
+
 window.addEventListener('beforeunload', () => {
   sessionStorage.setItem(localKey, JSON.stringify(jsonData))
 })

src/packages/base-widgets/datetimePicker/index.tsx

@@ -63,7 +63,7 @@ export default {
               )
           }}
         />
-        <Popup v-model={[state.showPicker, 'show']} position={'bottom'}>
+        <Popup v-model={[state.showPicker, 'show']} position={'bottom'} teleport="body">
           <DatetimePicker
             ref={(el) => registerRef(el, block._vid)}
             {...props}
@@ -127,7 +127,7 @@ export default {
     loading: createEditorSwitchProp({ label: '是否显示加载状态' }),
     showToolbar: createEditorSwitchProp({ label: '是否显示顶部栏' }),
     swipeDuration: createEditorInputProp({ label: '快速滑动时惯性滚动的时长，单位ms' }),
-    visibleItemCount: createEditorInputNumberProp({ label: '可见的选项个数' }),
+    visibleItemCount: createEditorInputNumberProp({ label: '可见的选项个数', defaultValue: 6 }),
     placeholder: createEditorInputProp({ label: '占位符', defaultValue: '请选择' }),
     ...createFieldProps()
   },

src/packages/base-widgets/stepper/index.tsx

@@ -61,7 +61,7 @@ export default {
     name: createEditorModelBindProp({ label: '字段绑定', defaultValue: '' }),
     label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '步进器' }),
     min: createEditorInputNumberProp({ label: '最小值', defaultValue: 0 }),
-    max: createEditorInputNumberProp({ label: '最大值' }),
+    max: createEditorInputNumberProp({ label: '最大值', defaultValue: 10 }),
     ...createFieldProps(),
     allowEmpty: createEditorSwitchProp({ label: '是否允许输入的值为空', defaultValue: false }),
     buttonSize: createEditorInputProp({

src/visual-editor/components/header/index.vue

@@ -29,7 +29,7 @@
           size="mini"
           icon="el-icon-video-play"
           circle
-          class="flex-shrink-0"
+          class="flex-shrink-0 !p-6px"
           @click="runPreview"
         />
       </el-tooltip>

src/visual-editor/components/left-aside/index.vue

@@ -57,7 +57,7 @@ export default defineComponent({
   height: 100%;
   contain: layout;
 
-  > ::v-deep(.el-tabs__header) {
+  > :deep(.el-tabs__header) {
     margin-right: 0;
 
     .el-tabs__item {
@@ -74,7 +74,7 @@ export default defineComponent({
     }
   }
 
-  > ::v-deep(.el-tabs__content) {
+  > :deep(.el-tabs__content) {
     height: 100%;
     overflow-y: auto;
   }

src/visual-editor/components/simulator-editor/simulator-editor.vue

@@ -63,6 +63,7 @@ import { cloneDeep } from 'lodash'
 import { useGlobalProperties } from '@/hooks/useGlobalProperties'
 import { useVisualData } from '@/visual-editor/hooks/useVisualData'
 import { useModal } from '@/visual-editor/hooks/useModal'
+import { generateNanoid } from '@/visual-editor/utils'
 
 export default defineComponent({
   name: 'SimulatorEditor',
@@ -191,21 +192,20 @@ export default defineComponent({
                 onClick: () => {
                   const index = parentBlocks.findIndex((item) => item._vid == block._vid)
                   if (index != -1) {
-                    const setBlockVid = (block, index = -1) => {
+                    const setBlockVid = (block: VisualEditorBlockData) => {
-                      block._vid = `vid_${Date.now() + index}`
+                      block._vid = `vid_${generateNanoid()}`
+                      block.focus = false
                       const slots = block?.props?.slots || {}
                       const slotKeys = Object.keys(slots)
                       if (slotKeys.length) {
                         slotKeys.forEach((slotKey) => {
-                          slots[slotKey]?.children?.forEach((child, index) =>
+                          slots[slotKey]?.children?.forEach((child) => setBlockVid(child))
-                            setBlockVid(child, index)
-                          )
                         })
                       }
                     }
                     const blockCopy = cloneDeep(parentBlocks[index])
                     setBlockVid(blockCopy)
-                    parentBlocks.splice(index, 0, blockCopy)
+                    parentBlocks.splice(index + 1, 0, blockCopy)
                   }
                 }
               }}