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

2025-04-05 19:41:40 +08:00 · 2022-05-18 15:42:14 +08:00 · 2022-05-18 15:42:14 +08:00 · 155c22311d
commit 155c22311d
parent 054e836859
20 changed files with 5527 additions and 11716 deletions
--- a/magic-admin/server/src/template/editor/get-component-list.ts
+++ b/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',
      },
--- a/magic-admin/setup.sh
+++ b/magic-admin/setup.sh
@ -40,5 +40,3 @@ echo "移动web文件到server完毕"
 # 运行server
 cd ${WORKSPACE}/magic-admin/server
 npm run dev
-
-
--- a/magic-admin/web/.browserslistrc
+++ b/magic-admin/web/.browserslistrc
@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11
--- a/magic-admin/web/.eslintrc.js
+++ b/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'],
-          ['^(@tmagic)(/.*|$)'],
+          ["^(react|vue|vite)", "^@?\\w"],
+          ["^(@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$"],
        ],
-      },
-    ],
+      }
+    ]
  },
 };
--- a/magic-admin/web/babel.config.js
+++ b/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'],
 };
--- a/magic-admin/web/jest.config.js
+++ b/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}'],
 };
--- a/magic-admin/web/package-lock.json
+++ b/magic-admin/web/package-lock.json
--- a/magic-admin/web/package.json
+++ b/magic-admin/web/package.json
@ -9,50 +9,52 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@tmagic/editor": "^1.0.0-beta.2",
-    "@tmagic/form": "^1.0.0-beta.2",
-    "@tmagic/schema": "^1.0.0-beta.2",
-    "@tmagic/stage": "^1.0.0-beta.2",
-    "@tmagic/utils": "^1.0.0-beta.2",
-    "axios": "^0.25.0",
+    "@tmagic/editor": "^1.0.0-beta.16",
+    "@tmagic/form": "^1.0.0-beta.16",
+    "@tmagic/schema": "^1.0.0-beta.16",
+    "@tmagic/stage": "^1.0.0-beta.16",
+    "@tmagic/utils": "^1.0.0-beta.16",
+    "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",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@types/jest": "^24.0.19",
-    "@types/js-cookie": "^2.2.7",
-    "@types/serialize-javascript": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.2.26",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "@vue/test-utils": "^2.0.0-rc.17",
-    "eslint": "^7.29.0",
-    "eslint-config-tencent": "^1.0.1",
-    "eslint-plugin-prettier": "^3.3.1",
+    "@types/jest": "^27.0.1",
+    "@types/js-cookie": "^3.0.2",
+    "@types/serialize-javascript": "^5.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/test-utils": "^2.0.0-0",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^27.0.6",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-tencent": "^1.0.4",
+    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-vue": "^7.0.0",
-    "moment-timezone": "^0.5.34",
-    "prettier": "^2.5.1",
-    "sass": "^1.45.0",
-    "sass-loader": "^8.0.2",
-    "serialize-javascript": "^6.0.0",
-    "typescript": "~4.1.5",
-    "vue-jest": "^5.0.0-0"
+    "eslint-plugin-vue": "^8.0.3",
+    "jest": "^27.0.5",
+    "monaco-editor-webpack-plugin": "^7.0.1",
+    "prettier": "^2.4.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "ts-jest": "^27.0.4",
+    "typescript": "~4.5.5",
+    "vue-jest": "^3.0.7"
  }
 }
--- a/magic-admin/web/src/api/editor.ts
+++ b/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',
--- a/magic-admin/web/src/config/blank-act-config.ts
+++ b/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' }] },
  {
--- a/magic-admin/web/src/use/use-publish.ts
+++ b/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);
--- a/magic-admin/web/src/views/editor.vue
+++ b/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 () => {
--- a/magic-admin/web/tests/unit/components/form-dialog.spec.ts
+++ b/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');
--- a/magic-admin/web/tests/unit/components/publish-page-list.spec.ts
+++ b/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 () => {
--- a/magic-admin/web/tests/unit/components/table.spec.ts
+++ b/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,
--- a/magic-admin/web/vue.config.js
+++ b/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()],
  },
-};
+});
--- a/packages/editor/package-lock.json
+++ b/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": {
--- a/packages/form/package-lock.json
+++ b/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": {
--- a/packages/table/package-lock.json
+++ b/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": {
--- a/playground/package-lock.json
+++ b/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": {