refactor(magic-admin): 升级vue-cli5

magic-admin/server/src/template/editor/get-component-list.ts

@@ -31,12 +31,12 @@ export default [
     title: '示例组件',
     items: [
       {
-        icon: 'iconfont icon-wenben',
+        icon: 'tickets',
         text: '文本',
         type: 'text',
       },
       {
-        icon: 'iconfont icon-anniu',
+        icon: 'switch-button',
         text: '按钮',
         type: 'button',
       },

magic-admin/setup.sh

@@ -40,5 +40,3 @@ echo "移动web文件到server完毕"
 # 运行server
 cd ${WORKSPACE}/magic-admin/server
 npm run dev
-
-

magic-admin/web/.browserslistrc

@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11

magic-admin/web/.eslintrc.js

@@ -14,8 +14,8 @@ module.exports = {
   extends: [
     'eslint-config-tencent',
     'eslint-config-tencent/ts',
-    'plugin:vue/vue3-essential',
     'eslint-config-tencent/prettier',
+    'plugin:vue/vue3-essential',
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -34,29 +34,30 @@ module.exports = {
     'vue/no-mutating-props': 'off',
     'no-param-reassign': 'off',
     '@typescript-eslint/no-require-imports': 'off',
+    "chalk/chalk": 'off',
     'simple-import-sort/imports': [
-      'error', {
+      "error", {
         groups: [
           // Node.js builtins. You could also generate this regex if you use a `.js` config.
-          // For example: `^(${require('module').builtinModules.join('|')})(/|$)`
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
           [
-            '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
+            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)",
           ],
           // Packages. `react|vue` related packages come first.
-          ['^(react|vue|vite)', '^@?\\w'],
+          ["^(react|vue|vite)", "^@?\\w"],
-          ['^(@tmagic)(/.*|$)'],
+          ["^(@tmagic)(/.*|$)"],
           // Internal packages.
-          ['^(@|@src|@tests)(/.*|$)'],
+          ["^(@(src|tests))(/.*|$)"],
           // Side effect imports.
-          ['^\\u0000'],
+          ["^\\u0000"],
           // Parent imports. Put `..` last.
-          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.
-          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
           // Style imports.
-          ['^.+\\.s?css$'],
+          ["^.+\\.s?css$"],
-        ],
-      },
         ],
+      }
+    ]
   },
 };

magic-admin/web/babel.config.js

@@ -1,4 +1,3 @@
 module.exports = {
   presets: ['@vue/cli-plugin-babel/preset'],
-  plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'],
 };

magic-admin/web/jest.config.js

@@ -1,13 +1,8 @@
 module.exports = {
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
-  transform: {
+
-    '^.+\\.vue$': 'vue-jest',
-  },
   moduleNameMapper: {
     '^@src/(.*)$': '<rootDir>/src/$1',
     '^@tests/(.*)$': '<rootDir>/tests/$1',
   },
-  collectCoverage: true,
-  transformIgnorePatterns: ['/node_modules/(?!lodash-es/.*)'],
-  collectCoverageFrom: ['src/views/*.{ts,vue}', 'src/components/*.{ts,vue}'],
 };

magic-admin/web/package.json

@@ -9,50 +9,52 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@tmagic/editor": "^1.0.0-beta.2",
+    "@tmagic/editor": "^1.0.0-beta.16",
-    "@tmagic/form": "^1.0.0-beta.2",
+    "@tmagic/form": "^1.0.0-beta.16",
-    "@tmagic/schema": "^1.0.0-beta.2",
+    "@tmagic/schema": "^1.0.0-beta.16",
-    "@tmagic/stage": "^1.0.0-beta.2",
+    "@tmagic/stage": "^1.0.0-beta.16",
-    "@tmagic/utils": "^1.0.0-beta.2",
+    "@tmagic/utils": "^1.0.0-beta.16",
-    "axios": "^0.25.0",
+    "axios": "^0.27.2",
     "axios-jsonp": "^1.0.4",
     "core-js": "^3.20.0",
     "element-plus": "^2.2.0",
     "js-cookie": "^3.0.0",
     "moment": "^2.29.3",
+    "moment-timezone": "^0.5.34",
+    "serialize-javascript": "^6.0.0",
     "vue": "^3.2.26",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.3"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@types/jest": "^27.0.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@types/js-cookie": "^3.0.2",
-    "@babel/preset-env": "^7.16.11",
+    "@types/serialize-javascript": "^5.0.2",
-    "@types/jest": "^24.0.19",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@types/js-cookie": "^2.2.7",
+    "@typescript-eslint/parser": "^5.4.0",
-    "@types/serialize-javascript": "^5.0.1",
+    "@vue/cli-plugin-babel": "~5.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
-    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@vue/test-utils": "^2.0.0-0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
-    "@vue/compiler-sfc": "^3.2.26",
+    "babel-core": "^6.26.3",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-jest": "^27.0.6",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "eslint": "^7.32.0",
-    "@vue/test-utils": "^2.0.0-rc.17",
+    "eslint-config-prettier": "^8.3.0",
-    "eslint": "^7.29.0",
+    "eslint-config-tencent": "^1.0.4",
-    "eslint-config-tencent": "^1.0.1",
+    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-vue": "^8.0.3",
-    "moment-timezone": "^0.5.34",
+    "jest": "^27.0.5",
-    "prettier": "^2.5.1",
+    "monaco-editor-webpack-plugin": "^7.0.1",
-    "sass": "^1.45.0",
+    "prettier": "^2.4.1",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.32.7",
-    "serialize-javascript": "^6.0.0",
+    "sass-loader": "^12.0.0",
-    "typescript": "~4.1.5",
+    "ts-jest": "^27.0.4",
-    "vue-jest": "^5.0.0-0"
+    "typescript": "~4.5.5",
+    "vue-jest": "^3.0.7"
   }
 }

magic-admin/web/src/api/editor.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { ComponentGroup } from '@tmagic/editor';
+
 import fetch, { Res } from '@src/util/request';
 // 编辑器左侧组件分类
 export interface CompClassifyForEditor {
@@ -38,7 +40,7 @@ export default {
    * 获取组件列表
    * @returns {Promise<Res>} 查询结果
    */
-  getComponentList(): Promise<Res> {
+  getComponentList(): Promise<Res<ComponentGroup[]>> {
     return fetch.get({
       _c: 'editor',
       _a: 'getComponentList',

magic-admin/web/src/config/blank-act-config.ts

@@ -17,6 +17,7 @@
  */
 
 // 新建活动表单配置
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const BlankActFormConfig = [
   { name: 'actName', text: '活动名称', rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }] },
   {

magic-admin/web/src/use/use-publish.ts

@@ -87,7 +87,9 @@ export const commitHandler = async () => {
     ElMessage.success({
       message: res.msg,
       type: 'success',
-      onClose: () => initConfigByActId({ actId: actInfo.value.actId }),
+      onClose: () => {
+        initConfigByActId({ actId: actInfo.value.actId });
+      },
     });
   } else {
     ElMessage.error(res.msg);

magic-admin/web/src/views/editor.vue

@@ -12,8 +12,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref } from 'vue';
+import { Component, computed, defineComponent, markRaw, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import { Edit, FolderOpened, SwitchButton, Tickets } from '@element-plus/icons';
 
 import { ComponentGroup } from '@tmagic/editor';
 import { asyncLoadJs } from '@tmagic/utils';
@@ -23,6 +24,12 @@ import magicStore from '@src/store/index';
 import { topMenu } from '@src/use/use-menu';
 import { initConfigByActId } from '@src/use/use-publish';
 
+const icons: Record<string, Component> = {
+  'folder-opened': markRaw(FolderOpened),
+  tickets: markRaw(Tickets),
+  'switch-button': markRaw(SwitchButton),
+};
+
 export default defineComponent({
   name: 'App',
 
@@ -31,7 +38,7 @@ export default defineComponent({
 
     const uiConfigs = computed(() => magicStore.get('uiConfigs'));
     const editorDefaultSelected = computed(() => magicStore.get('editorDefaultSelected'));
-    const componentList = reactive<ComponentGroup[]>([]);
+    const componentList = ref<ComponentGroup[]>([]);
 
     const magicPresetValues = ref<Record<string, any>>({});
     const magicPresetConfigs = ref<Record<string, any>>({});
@@ -39,7 +46,14 @@ export default defineComponent({
     // 获取编辑器左侧组件树
     const getComponentList = async () => {
       const { data: list } = await editorApi.getComponentList();
-      componentList.push(...list);
+      if (!list) return;
+      componentList.value = list.map((item) => ({
+        ...item,
+        items: item.items.map((item) => ({
+          ...item,
+          icon: (typeof item.icon === 'string' ? icons[item.icon] : item.icon) || Edit,
+        })),
+      }));
     };
     // 根据活动id获取活动配置
     const getActById = async () => {

magic-admin/web/tests/unit/components/form-dialog.spec.ts

@@ -58,7 +58,7 @@ describe('FormDialog', () => {
       resetForm: jest.fn(),
       submitForm: jest.fn(() => 'test'),
     };
-    wrapper.vm.form = mockForm;
+    (wrapper.vm as any).form = mockForm;
     wrapper.vm.save();
     await flushPromises();
     expect(wrapper.emitted()).toHaveProperty('close');
@@ -81,7 +81,7 @@ describe('FormDialog', () => {
       resetForm: jest.fn(),
       submitForm: jest.fn(() => 'test'),
     };
-    wrapper.vm.form = mockForm;
+    (wrapper.vm as any).form = mockForm;
     wrapper.vm.save();
   });
 
@@ -100,7 +100,7 @@ describe('FormDialog', () => {
       resetForm: jest.fn(),
       submitForm: jest.fn(() => 'test'),
     };
-    wrapper.vm.form = mockForm;
+    (wrapper.vm as any).form = mockForm;
     wrapper.vm.save();
     await flushPromises();
     expect(wrapper.emitted()).toHaveProperty('close');
@@ -112,7 +112,7 @@ describe('FormDialog', () => {
       resetForm: jest.fn(),
       submitForm: jest.fn(() => {}),
     };
-    wrapper.vm.form = mockForm;
+    (wrapper.vm as any).form = mockForm;
     wrapper.vm.save();
     await flushPromises();
     expect(wrapper.emitted()).toHaveProperty('close');

magic-admin/web/tests/unit/components/publish-page-list.spec.ts

@@ -159,7 +159,7 @@ describe('PublishPageList', () => {
   });
   it('全选异常情况', () => {
     const wrapper = mount(PublishPageList);
-    wrapper.vm.handleCheckAllChange();
+    (wrapper.vm as any).handleCheckAllChange();
     expect(wrapper.vm.checkedPages).toHaveLength(0);
   });
   it('未选择发布页面，发布按钮不可点击', async () => {

magic-admin/web/tests/unit/components/table.spec.ts

@@ -77,7 +77,7 @@ window.ResizeObserver =
   }));
 
 const getWrapper = (mockData = data, mockColumns = columns) =>
-  mount(Table, {
+  mount(Table as any, {
     props: {
       data: mockData,
       config: mockColumns,

magic-admin/web/vue.config.js

@@ -1,6 +1,11 @@
 const path = require('path');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+const { defineConfig } = require('@vue/cli-service');
+
+module.exports = defineConfig({
+  transpileDependencies: true,
 
-module.exports = {
   lintOnSave: true,
 
   indexPath: 'index.html',
@@ -8,31 +13,15 @@ module.exports = {
   outputDir: path.resolve(__dirname, './dist'),
 
   devServer: {
-    overlay: {
-      warnings: false,
-      errors: false,
-    },
     port: 8181,
-    disableHostCheck: true,
     proxy: {
       '/api': {
         target: 'http://localhost:3001/',
         ws: true,
         changOrigin: true,
       },
-      '^/runtime/vue2': {
-        target: 'http://127.0.0.1:80/runtime/vue2',
-        changeOrigin: true,
-        prependPath: false,
-      },
-      '^/runtime/vue3': {
-        target: 'http://127.0.0.1:80/runtime/vue3',
-        changeOrigin: true,
-        prependPath: false,
     },
   },
-  },
-  transpileDependencies: [/@tmagic/],
 
   configureWebpack: {
     devtool: 'source-map',
@@ -44,5 +33,7 @@ module.exports = {
         '@src': path.resolve(__dirname, './src'),
       },
     },
+
+    plugins: [new MonacoWebpackPlugin()],
   },
-};
+});

packages/editor/package-lock.json

@@ -62,7 +62,7 @@
 				},
 				"@popperjs/core": {
 					"version": "npm:@sxzz/popperjs-es@2.11.7",
-					"resolved": "https://mirrors.tencent.com/npm/@sxzz%2fpopperjs-es/-/popperjs-es-2.11.7.tgz",
+					"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
 					"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
 				},
 				"@types/lodash": {

packages/form/package-lock.json

@@ -62,7 +62,7 @@
 				},
 				"@popperjs/core": {
 					"version": "npm:@sxzz/popperjs-es@2.11.7",
-					"resolved": "https://mirrors.tencent.com/npm/@sxzz%2fpopperjs-es/-/popperjs-es-2.11.7.tgz",
+					"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
 					"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
 				},
 				"@types/lodash": {

packages/table/package-lock.json

@@ -57,7 +57,7 @@
 				},
 				"@popperjs/core": {
 					"version": "npm:@sxzz/popperjs-es@2.11.7",
-					"resolved": "https://mirrors.tencent.com/npm/@sxzz%2fpopperjs-es/-/popperjs-es-2.11.7.tgz",
+					"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
 					"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
 				},
 				"@types/lodash": {

playground/package-lock.json

@@ -56,7 +56,7 @@
 				},
 				"@popperjs/core": {
 					"version": "npm:@sxzz/popperjs-es@2.11.7",
-					"resolved": "https://mirrors.tencent.com/npm/@sxzz%2fpopperjs-es/-/popperjs-es-2.11.7.tgz",
+					"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
 					"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
 				},
 				"@types/lodash": {