增加jsx支持，以及演示代码

.eslintrc.js

@@ -18,6 +18,12 @@ module.exports = {
         './auto-import-eslint-config.js'
     ],
     parser: 'vue-eslint-parser',
+    parserOptions: {
+        ecmaVersion: '2020',
+        ecmaFeatures: {
+            jsx: true
+        }
+    },
     rules: {
         // 代码风格
         'block-spacing': [2, 'always'],

.lintstagedrc

@@ -1,5 +1,5 @@
 {
-    "src/**/*.js": "eslint --fix",
+    "src/**/*.{js,jsx}": "eslint --fix",
     "src/**/*.{css,scss}": "stylelint --fix",
     "src/**/*.vue": ["eslint --fix", "stylelint --fix"]
 }

package.json

@@ -40,6 +40,7 @@
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^2.0.1",
+        "@vitejs/plugin-vue-jsx": "^1.3.3",
         "@vue/compiler-sfc": "^3.2.26",
         "eslint": "^8.6.0",
         "eslint-plugin-vue": "^8.3.0",

pnpm-lock.yaml

@@ -4,6 +4,7 @@ specifiers:
   '@element-plus/icons-vue': ^0.2.4
   '@tinymce/tinymce-vue': ^4.0.5
   '@vitejs/plugin-vue': ^2.0.1
+  '@vitejs/plugin-vue-jsx': ^1.3.3
   '@vue/compiler-sfc': ^3.2.26
   '@vueuse/core': ^7.5.3
   '@vueuse/integrations': ^7.5.3
@@ -77,6 +78,7 @@ dependencies:
 
 devDependencies:
   '@vitejs/plugin-vue': 2.0.1_vite@2.7.12+vue@3.2.26
+  '@vitejs/plugin-vue-jsx': 1.3.3
   '@vue/compiler-sfc': 3.2.26
   eslint: 8.6.0
   eslint-plugin-vue: 8.3.0_eslint@8.6.0
@@ -122,23 +124,213 @@ packages:
       '@types/throttle-debounce': 2.1.0
     dev: true
 
-  /@babel/code-frame/7.16.0:
-    resolution: {integrity: sha1-DfyAMJvuyEEeZecGRhxAiwu5tDE=, tarball: '@babel/code-frame/download/@babel/code-frame-7.16.0.tgz'}
+  /@babel/code-frame/7.16.7:
+    resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==, tarball: '@babel/code-frame/download/@babel/code-frame-7.16.7.tgz'}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/highlight': 7.16.0
+      '@babel/highlight': 7.16.7
     dev: true
 
-  /@babel/helper-validator-identifier/7.15.7:
-    resolution: {integrity: sha1-Ig35k7/pBKSmsCq08zhaXr9uI4k=, tarball: '@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.15.7.tgz'}
+  /@babel/compat-data/7.16.8:
+    resolution: {integrity: sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==, tarball: '@babel/compat-data/download/@babel/compat-data-7.16.8.tgz'}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/highlight/7.16.0:
-    resolution: {integrity: sha1-bOsysspLj182H7f9gh4/3fShclo=, tarball: '@babel/highlight/download/@babel/highlight-7.16.0.tgz'}
+  /@babel/core/7.16.7:
+    resolution: {integrity: sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==, tarball: '@babel/core/download/@babel/core-7.16.7.tgz'}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.15.7
+      '@babel/code-frame': 7.16.7
+      '@babel/generator': 7.16.8
+      '@babel/helper-compilation-targets': 7.16.7_@babel+core@7.16.7
+      '@babel/helper-module-transforms': 7.16.7
+      '@babel/helpers': 7.16.7
+      '@babel/parser': 7.16.8
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.16.8
+      '@babel/types': 7.16.8
+      convert-source-map: 1.8.0
+      debug: 4.3.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.0
+      semver: 6.3.0
+      source-map: 0.5.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator/7.16.8:
+    resolution: {integrity: sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==, tarball: '@babel/generator/download/@babel/generator-7.16.8.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+      jsesc: 2.5.2
+      source-map: 0.5.7
+    dev: true
+
+  /@babel/helper-annotate-as-pure/7.16.7:
+    resolution: {integrity: sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==, tarball: '@babel/helper-annotate-as-pure/download/@babel/helper-annotate-as-pure-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-compilation-targets/7.16.7_@babel+core@7.16.7:
+    resolution: {integrity: sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==, tarball: '@babel/helper-compilation-targets/download/@babel/helper-compilation-targets-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.16.8
+      '@babel/core': 7.16.7
+      '@babel/helper-validator-option': 7.16.7
+      browserslist: 4.19.1
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-create-class-features-plugin/7.16.7_@babel+core@7.16.7:
+    resolution: {integrity: sha512-kIFozAvVfK05DM4EVQYKK+zteWvY85BFdGBRQBytRyY3y+6PX0DkDOn/CZ3lEuczCfrCxEzwt0YtP/87YPTWSw==, tarball: '@babel/helper-create-class-features-plugin/download/@babel/helper-create-class-features-plugin-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.16.7
+      '@babel/helper-annotate-as-pure': 7.16.7
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-function-name': 7.16.7
+      '@babel/helper-member-expression-to-functions': 7.16.7
+      '@babel/helper-optimise-call-expression': 7.16.7
+      '@babel/helper-replace-supers': 7.16.7
+      '@babel/helper-split-export-declaration': 7.16.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-environment-visitor/7.16.7:
+    resolution: {integrity: sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==, tarball: '@babel/helper-environment-visitor/download/@babel/helper-environment-visitor-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-function-name/7.16.7:
+    resolution: {integrity: sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==, tarball: '@babel/helper-function-name/download/@babel/helper-function-name-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-get-function-arity': 7.16.7
+      '@babel/template': 7.16.7
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-get-function-arity/7.16.7:
+    resolution: {integrity: sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==, tarball: '@babel/helper-get-function-arity/download/@babel/helper-get-function-arity-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-hoist-variables/7.16.7:
+    resolution: {integrity: sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==, tarball: '@babel/helper-hoist-variables/download/@babel/helper-hoist-variables-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-member-expression-to-functions/7.16.7:
+    resolution: {integrity: sha512-VtJ/65tYiU/6AbMTDwyoXGPKHgTsfRarivm+YbB5uAzKUyuPjgZSgAFeG87FCigc7KNHu2Pegh1XIT3lXjvz3Q==, tarball: '@babel/helper-member-expression-to-functions/download/@babel/helper-member-expression-to-functions-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-module-imports/7.16.7:
+    resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==, tarball: '@babel/helper-module-imports/download/@babel/helper-module-imports-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-module-transforms/7.16.7:
+    resolution: {integrity: sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==, tarball: '@babel/helper-module-transforms/download/@babel/helper-module-transforms-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-module-imports': 7.16.7
+      '@babel/helper-simple-access': 7.16.7
+      '@babel/helper-split-export-declaration': 7.16.7
+      '@babel/helper-validator-identifier': 7.16.7
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.16.8
+      '@babel/types': 7.16.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-optimise-call-expression/7.16.7:
+    resolution: {integrity: sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==, tarball: '@babel/helper-optimise-call-expression/download/@babel/helper-optimise-call-expression-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-plugin-utils/7.16.7:
+    resolution: {integrity: sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==, tarball: '@babel/helper-plugin-utils/download/@babel/helper-plugin-utils-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-replace-supers/7.16.7:
+    resolution: {integrity: sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==, tarball: '@babel/helper-replace-supers/download/@babel/helper-replace-supers-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-member-expression-to-functions': 7.16.7
+      '@babel/helper-optimise-call-expression': 7.16.7
+      '@babel/traverse': 7.16.8
+      '@babel/types': 7.16.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-simple-access/7.16.7:
+    resolution: {integrity: sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==, tarball: '@babel/helper-simple-access/download/@babel/helper-simple-access-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-split-export-declaration/7.16.7:
+    resolution: {integrity: sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==, tarball: '@babel/helper-split-export-declaration/download/@babel/helper-split-export-declaration-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/helper-validator-identifier/7.16.7:
+    resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==, tarball: '@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-option/7.16.7:
+    resolution: {integrity: sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==, tarball: '@babel/helper-validator-option/download/@babel/helper-validator-option-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers/7.16.7:
+    resolution: {integrity: sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==, tarball: '@babel/helpers/download/@babel/helpers-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.16.8
+      '@babel/types': 7.16.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/highlight/7.16.7:
+    resolution: {integrity: sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==, tarball: '@babel/highlight/download/@babel/highlight-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.16.7
       chalk: 2.4.2
       js-tokens: 4.0.0
     dev: true
@@ -148,6 +340,90 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  /@babel/parser/7.16.8:
+    resolution: {integrity: sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==, tarball: '@babel/parser/download/@babel/parser-7.16.8.tgz'}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dev: true
+
+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.16.7:
+    resolution: {integrity: sha1-7mATSMNw+jNNIge+FYd3SWUh/VE=, tarball: '@babel/plugin-syntax-import-meta/download/@babel/plugin-syntax-import-meta-7.10.4.tgz'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.16.7
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
+  /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.16.7:
+    resolution: {integrity: sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==, tarball: '@babel/plugin-syntax-jsx/download/@babel/plugin-syntax-jsx-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.16.7
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
+  /@babel/plugin-syntax-typescript/7.16.7_@babel+core@7.16.7:
+    resolution: {integrity: sha512-YhUIJHHGkqPgEcMYkPCKTyGUdoGKWtopIycQyjJH8OjvRgOYsXsaKehLVPScKJWAULPxMa4N1vCe6szREFlZ7A==, tarball: '@babel/plugin-syntax-typescript/download/@babel/plugin-syntax-typescript-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.16.7
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: true
+
+  /@babel/plugin-transform-typescript/7.16.8_@babel+core@7.16.7:
+    resolution: {integrity: sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==, tarball: '@babel/plugin-transform-typescript/download/@babel/plugin-transform-typescript-7.16.8.tgz'}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.16.7
+      '@babel/helper-create-class-features-plugin': 7.16.7_@babel+core@7.16.7
+      '@babel/helper-plugin-utils': 7.16.7
+      '@babel/plugin-syntax-typescript': 7.16.7_@babel+core@7.16.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/template/7.16.7:
+    resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==, tarball: '@babel/template/download/@babel/template-7.16.7.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@babel/parser': 7.16.8
+      '@babel/types': 7.16.8
+    dev: true
+
+  /@babel/traverse/7.16.8:
+    resolution: {integrity: sha512-xe+H7JlvKsDQwXRsBhSnq1/+9c+LlQcCK3Tn/l5sbx02HYns/cn7ibp9+RV1sIUqu7hKg91NWsgHurO9dowITQ==, tarball: '@babel/traverse/download/@babel/traverse-7.16.8.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@babel/generator': 7.16.8
+      '@babel/helper-environment-visitor': 7.16.7
+      '@babel/helper-function-name': 7.16.7
+      '@babel/helper-hoist-variables': 7.16.7
+      '@babel/helper-split-export-declaration': 7.16.7
+      '@babel/parser': 7.16.8
+      '@babel/types': 7.16.8
+      debug: 4.3.3
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types/7.16.8:
+    resolution: {integrity: sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==, tarball: '@babel/types/download/@babel/types-7.16.8.tgz'}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.16.7
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@ctrl/tinycolor/3.4.0:
     resolution: {integrity: sha1-w8WuVDyJfKqcKmhjC+01W+X5mQ8=, tarball: '@ctrl/tinycolor/download/@ctrl/tinycolor-3.4.0.tgz'}
     engines: {node: '>=10'}
@@ -353,6 +629,20 @@ packages:
       '@types/node': 16.11.12
     dev: true
 
+  /@vitejs/plugin-vue-jsx/1.3.3:
+    resolution: {integrity: sha512-VSBXVqMcxbgX85rgJC1eMWuZ9hzOJhWPvGYlKxyymPokE/i3Gykh5ljkCoNdxnKgIyFqv4WutYoYY93fgjbTxA==, tarball: '@vitejs/plugin-vue-jsx/download/@vitejs/plugin-vue-jsx-1.3.3.tgz'}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      '@babel/core': 7.16.7
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.16.7
+      '@babel/plugin-transform-typescript': 7.16.8_@babel+core@7.16.7
+      '@rollup/pluginutils': 4.1.2
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.16.7
+      hash-sum: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@vitejs/plugin-vue/2.0.1_vite@2.7.12+vue@3.2.26:
     resolution: {integrity: sha512-wtdMnGVvys9K8tg+DxowU1ytTrdVveXr3LzdhaKakysgGXyrsfaeds2cDywtvujEASjWOwWL/OgWM+qoeM8Plg==, tarball: '@vitejs/plugin-vue/download/@vitejs/plugin-vue-2.0.1.tgz'}
     engines: {node: '>=12.0.0'}
@@ -364,6 +654,27 @@ packages:
       vue: 3.2.26
     dev: true
 
+  /@vue/babel-helper-vue-transform-on/1.0.2:
+    resolution: {integrity: sha1-m5xpHNBvyFUiGiR1w8yDHXdLx9w=, tarball: '@vue/babel-helper-vue-transform-on/download/@vue/babel-helper-vue-transform-on-1.0.2.tgz'}
+    dev: true
+
+  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.16.7:
+    resolution: {integrity: sha1-DFusJ4gNI/iYlM0Daje1XvYd38E=, tarball: '@vue/babel-plugin-jsx/download/@vue/babel-plugin-jsx-1.1.1.tgz'}
+    dependencies:
+      '@babel/helper-module-imports': 7.16.7
+      '@babel/plugin-syntax-jsx': 7.16.7_@babel+core@7.16.7
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.16.8
+      '@babel/types': 7.16.8
+      '@vue/babel-helper-vue-transform-on': 1.0.2
+      camelcase: 6.3.0
+      html-tags: 3.1.0
+      svg-tags: 1.0.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+    dev: true
+
   /@vue/compiler-core/3.2.26:
     resolution: {integrity: sha512-N5XNBobZbaASdzY9Lga2D9Lul5vdCIOXvUMd6ThcN8zgqQhPKfCV+wfAJNNJKQkSHudnYRO2gEB+lp0iN3g2Tw==, tarball: '@vue/compiler-core/download/@vue/compiler-core-3.2.26.tgz'}
     dependencies:
@@ -568,12 +879,12 @@ packages:
     dev: true
 
   /ansi-styles/2.2.1:
-    resolution: {integrity: sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=, tarball: ansi-styles/download/ansi-styles-2.2.1.tgz}
+    resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==, tarball: ansi-styles/download/ansi-styles-2.2.1.tgz}
     engines: {node: '>=0.10.0'}
     dev: true
 
   /ansi-styles/3.2.1:
-    resolution: {integrity: sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=, tarball: ansi-styles/download/ansi-styles-3.2.1.tgz}
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==, tarball: ansi-styles/download/ansi-styles-3.2.1.tgz}
     engines: {node: '>=4'}
     dependencies:
       color-convert: 1.9.3
@@ -586,7 +897,7 @@ packages:
       color-convert: 2.0.1
 
   /ansi-styles/6.1.0:
-    resolution: {integrity: sha1-hzE8ECuBGKvVc3GvqzRhi/c1DtM=, tarball: ansi-styles/download/ansi-styles-6.1.0.tgz}
+    resolution: {integrity: sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==, tarball: ansi-styles/download/ansi-styles-6.1.0.tgz}
     engines: {node: '>=12'}
     dev: true
 
@@ -796,6 +1107,18 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /browserslist/4.19.1:
+    resolution: {integrity: sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==, tarball: browserslist/download/browserslist-4.19.1.tgz}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001300
+      electron-to-chromium: 1.4.48
+      escalade: 3.1.1
+      node-releases: 2.0.1
+      picocolors: 1.0.0
+    dev: true
+
   /buffer-from/1.1.2:
     resolution: {integrity: sha1-KxRqb9cugLT1XSVfNe1Zo6mkG9U=, tarball: buffer-from/download/buffer-from-1.1.2.tgz}
     dev: true
@@ -868,9 +1191,18 @@ packages:
     dev: true
 
   /camelcase/5.3.1:
-    resolution: {integrity: sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=, tarball: camelcase/download/camelcase-5.3.1.tgz?cache=0&sync_timestamp=1632825560555&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcamelcase%2Fdownload%2Fcamelcase-5.3.1.tgz}
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==, tarball: camelcase/download/camelcase-5.3.1.tgz}
     engines: {node: '>=6'}
 
+  /camelcase/6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==, tarball: camelcase/download/camelcase-6.3.0.tgz}
+    engines: {node: '>=10'}
+    dev: true
+
+  /caniuse-lite/1.0.30001300:
+    resolution: {integrity: sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==, tarball: caniuse-lite/download/caniuse-lite-1.0.30001300.tgz}
+    dev: true
+
   /capital-case/1.0.4:
     resolution: {integrity: sha1-nRMCkjU8kkn2sA+lhSvuOKcX5mk=, tarball: capital-case/download/capital-case-1.0.4.tgz}
     dependencies:
@@ -884,7 +1216,7 @@ packages:
     dev: true
 
   /chalk/1.1.3:
-    resolution: {integrity: sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=, tarball: chalk/download/chalk-1.1.3.tgz}
+    resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==, tarball: chalk/download/chalk-1.1.3.tgz}
     engines: {node: '>=0.10.0'}
     dependencies:
       ansi-styles: 2.2.1
@@ -895,7 +1227,7 @@ packages:
     dev: true
 
   /chalk/2.4.2:
-    resolution: {integrity: sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=, tarball: chalk/download/chalk-2.4.2.tgz}
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==, tarball: chalk/download/chalk-2.4.2.tgz}
     engines: {node: '>=4'}
     dependencies:
       ansi-styles: 3.2.1
@@ -1146,6 +1478,12 @@ packages:
       readable-stream: 1.0.34
     dev: true
 
+  /convert-source-map/1.8.0:
+    resolution: {integrity: sha1-8zc8MtIbTXgN2ABFFGhPt5HKQ2k=, tarball: convert-source-map/download/convert-source-map-1.8.0.tgz?cache=0&sync_timestamp=1634135144392&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fconvert-source-map%2Fdownload%2Fconvert-source-map-1.8.0.tgz}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
   /cookie/0.4.1:
     resolution: {integrity: sha1-r9cT/ibr0hupXOth+agRblClN9E=, tarball: cookie/download/cookie-0.4.1.tgz}
     engines: {node: '>= 0.6'}
@@ -1498,6 +1836,10 @@ packages:
       jake: 10.8.2
     dev: true
 
+  /electron-to-chromium/1.4.48:
+    resolution: {integrity: sha512-RT3SEmpv7XUA+tKXrZGudAWLDpa7f8qmhjcLaM6OD/ERxjQ/zAojT8/Vvo0BSzbArkElFZ1WyZ9FuwAYbkdBNA==, tarball: electron-to-chromium/download/electron-to-chromium-1.4.48.tgz}
+    dev: true
+
   /element-plus/1.3.0-beta.5_vue@3.2.26:
     resolution: {integrity: sha512-su0sHN4ZkR5ISyP1McyiqY5wqrgZgKq0El0lSohjvjEWR3ODlgdmMfQolV0ZqTXKlO2mS16hO7nTFwX9PvZNTQ==, tarball: element-plus/download/element-plus-1.3.0-beta.5.tgz}
     peerDependencies:
@@ -1731,6 +2073,11 @@ packages:
       esbuild-windows-arm64: 0.13.15
     dev: true
 
+  /escalade/3.1.1:
+    resolution: {integrity: sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA=, tarball: escalade/download/escalade-3.1.1.tgz}
+    engines: {node: '>=6'}
+    dev: true
+
   /escape-html/1.0.3:
     resolution: {integrity: sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=, tarball: escape-html/download/escape-html-1.0.3.tgz}
     dev: true
@@ -2205,6 +2552,11 @@ packages:
       globule: 1.3.3
     dev: true
 
+  /gensync/1.0.0-beta.2:
+    resolution: {integrity: sha1-MqbudsPX9S1GsrGuXZP+qFgKJeA=, tarball: gensync/download/gensync-1.0.0-beta.2.tgz}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /get-caller-file/2.0.5:
     resolution: {integrity: sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=, tarball: get-caller-file/download/get-caller-file-2.0.5.tgz}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -2334,6 +2686,11 @@ packages:
       which: 1.3.1
     dev: true
 
+  /globals/11.12.0:
+    resolution: {integrity: sha1-q4eVM4hooLq9hSV1gBjCp+uVxC4=, tarball: globals/download/globals-11.12.0.tgz?cache=0&sync_timestamp=1635391915328&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fglobals%2Fdownload%2Fglobals-11.12.0.tgz}
+    engines: {node: '>=4'}
+    dev: true
+
   /globals/13.11.0:
     resolution: {integrity: sha1-QO9njaEX/nvS4o8fqySVG9AlW+c=, tarball: globals/download/globals-13.11.0.tgz}
     engines: {node: '>=8'}
@@ -2482,6 +2839,10 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
+  /hash-sum/2.0.0:
+    resolution: {integrity: sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=, tarball: hash-sum/download/hash-sum-2.0.0.tgz}
+    dev: true
+
   /he/1.2.0:
     resolution: {integrity: sha1-hK5l+n6vsWX922FWauFLrwVmTw8=, tarball: he/download/he-1.2.0.tgz}
     hasBin: true
@@ -3005,6 +3366,12 @@ packages:
     resolution: {integrity: sha1-peZUwuWi3rXyAdls77yoDA7y9RM=, tarball: jsbn/download/jsbn-0.1.1.tgz}
     dev: true
 
+  /jsesc/2.5.2:
+    resolution: {integrity: sha1-gFZNLkg9rPbo7yCWUKZ98/DCg6Q=, tarball: jsesc/download/jsesc-2.5.2.tgz}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
   /json-content-demux/0.1.4:
     resolution: {integrity: sha1-bVc/u1orIkriJXNuKH8y6pGkJz0=, tarball: json-content-demux/download/json-content-demux-0.1.4.tgz}
     engines: {node: '>= 0.6.0'}
@@ -3035,7 +3402,15 @@ packages:
     dev: true
 
   /json5/1.0.1:
-    resolution: {integrity: sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=, tarball: json5/download/json5-1.0.1.tgz}
+    resolution: {integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==, tarball: json5/download/json5-1.0.1.tgz}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.5
+    dev: true
+
+  /json5/2.2.0:
+    resolution: {integrity: sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==, tarball: json5/download/json5-2.2.0.tgz}
+    engines: {node: '>=6'}
     hasBin: true
     dependencies:
       minimist: 1.2.5
@@ -3441,15 +3816,15 @@ packages:
     dev: false
 
   /ms/2.0.0:
-    resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=, tarball: ms/download/ms-2.0.0.tgz}
+    resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=, tarball: ms/download/ms-2.0.0.tgz?cache=0&sync_timestamp=1632883299868&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fms%2Fdownload%2Fms-2.0.0.tgz}
     dev: true
 
   /ms/2.1.2:
-    resolution: {integrity: sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=, tarball: ms/download/ms-2.1.2.tgz}
+    resolution: {integrity: sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=, tarball: ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1632883299868&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fms%2Fdownload%2Fms-2.1.2.tgz}
     dev: true
 
   /ms/2.1.3:
-    resolution: {integrity: sha1-V0yBOM4dK1hh8LRFedut1gxmFbI=, tarball: ms/download/ms-2.1.3.tgz}
+    resolution: {integrity: sha1-V0yBOM4dK1hh8LRFedut1gxmFbI=, tarball: ms/download/ms-2.1.3.tgz?cache=0&sync_timestamp=1632883299868&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fms%2Fdownload%2Fms-2.1.3.tgz}
     dev: true
 
   /mute-stream/0.0.8:
@@ -3541,6 +3916,10 @@ packages:
       upper-case: 2.0.2
     dev: true
 
+  /node-releases/2.0.1:
+    resolution: {integrity: sha1-PR05XyBPHy8ppUNYuftnh2WtL8U=, tarball: node-releases/download/node-releases-2.0.1.tgz}
+    dev: true
+
   /normalize-package-data/2.5.0:
     resolution: {integrity: sha1-5m2xg4sgDB38IzIl0SyzZSDiNKg=, tarball: normalize-package-data/download/normalize-package-data-2.5.0.tgz}
     dependencies:
@@ -3776,7 +4155,7 @@ packages:
     resolution: {integrity: sha1-x2/Gbe5UIxyWKyK8yKcs8vmXU80=, tarball: parse-json/download/parse-json-5.2.0.tgz}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/code-frame': 7.16.0
+      '@babel/code-frame': 7.16.7
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.1.6
@@ -4471,6 +4850,11 @@ packages:
     hasBin: true
     dev: true
 
+  /semver/6.3.0:
+    resolution: {integrity: sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=, tarball: semver/download/semver-6.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz}
+    hasBin: true
+    dev: true
+
   /semver/7.3.5:
     resolution: {integrity: sha1-C2Ich5NI2JmOSw5L6Us/EuYBjvc=, tarball: semver/download/semver-7.3.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz}
     engines: {node: '>=10'}
@@ -5091,6 +5475,11 @@ packages:
       os-tmpdir: 1.0.2
     dev: true
 
+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=, tarball: to-fast-properties/download/to-fast-properties-2.0.0.tgz}
+    engines: {node: '>=4'}
+    dev: true
+
   /to-object-path/0.3.0:
     resolution: {integrity: sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=, tarball: to-object-path/download/to-object-path-0.3.0.tgz}
     engines: {node: '>=0.10.0'}

src/assets/icons/sidebar-jsx.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1642536450105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6835" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M878.6 246.4l-328-196.6c-3-1.6-6-3.2-9-4.4-3.2-1.2-6.4-2.4-9.6-3.2-3.2-0.8-6.6-1.6-10-2-3.4-0.4-6.8-0.6-10-0.6-3.4 0-6.8 0.2-10 0.6-3.4 0.4-6.6 1-10 2-3.2 0.8-6.4 2-9.6 3.2-3.2 1.2-6.2 2.8-9 4.4l-328 196.6c-3 1.8-5.8 3.8-8.4 6s-5.2 4.4-7.6 7c-2.4 2.4-4.6 5.2-6.6 7.8-2 2.8-4 5.6-5.6 8.6-1.6 3-3.2 6.2-4.4 9.4-1.2 3.2-2.4 6.4-3.2 9.8-0.8 3.4-1.4 6.8-2 10.2-0.4 3.4-0.6 6.8-0.6 10.4v392.8c0 3.4 0.2 6.8 0.6 10.4 0.4 3.4 1 6.8 2 10.2 0.8 3.4 2 6.6 3.2 9.8 1.2 3.2 2.8 6.4 4.4 9.4 1.6 3 3.6 6 5.6 8.6 2 2.8 4.2 5.4 6.6 8 2.4 2.4 5 4.8 7.6 7 2.6 2.2 5.6 4.2 8.4 6l86 51.4 0.4 0.2c43.4 22.2 60 22.2 79.2 22.2 67.8 0 110-43.8 110-114.6V355.8c0-1.2 0-2.4-0.4-3.4s-0.6-2.2-1-3.4c-0.4-1-1-2.2-1.6-3.2-0.6-1-1.4-1.8-2.2-2.8-0.8-0.8-1.8-1.6-2.6-2.2s-2-1.2-3-1.6c-1-0.4-2.2-0.8-3.4-1-1.2-0.2-2.4-0.4-3.4-0.4h-47.2c-1.2 0-2.4 0.2-3.4 0.4-1.2 0.2-2.2 0.6-3.4 1-1 0.4-2.2 1-3 1.6-1 0.6-1.8 1.4-2.6 2.2-0.8 0.8-1.6 1.8-2.2 2.8-0.6 1-1.2 2-1.6 3.2-0.4 1-0.8 2.2-1 3.4s-0.4 2.4-0.4 3.4v380.8c0 2.8-0.2 5.4-0.8 8-0.6 2.6-1.6 5.2-2.8 7.6-1.2 2.4-2.8 4.6-4.6 6.6-1.8 2-4 3.8-6.2 5.2-12.4 7.6-30.6 6-51-4.6L190.6 710c-0.6-0.4-1-1.2-1-2V321c0-1 0.4-1.8 1.2-2.2l320.2-196.2c0.6-0.2 1-0.2 1.6 0l320.4 196.2c0.8 0.6 1.2 1.4 1.2 2.4v387c0 0.8-0.2 1.6-1 2.2l-320.8 191.2c-0.6 0.2-1.2 0.2-1.6 0l-82-48.6c-1.2-0.8-2.6-1.4-3.8-1.8-1.4-0.4-2.8-0.8-4.2-0.8-1.4 0-2.8 0-4.4 0.4-1.4 0.4-2.8 0.8-4 1.4l-0.8 0.4c-22.6 13.4-28.6 16.8-49.6 24.6-3.4 1.2-11.4 4.2-12.2 12.2s7 13.6 13.8 17.6l109.4 67.2c5.8 3.4 12 6.2 18.6 8 6.6 1.8 13.2 2.8 20 2.8h1.2c6.6-0.2 13.2-1 19.6-2.8 6.4-1.8 12.4-4.4 18.2-7.8L878.4 778c3-1.8 5.8-3.8 8.4-6 2.6-2.2 5.2-4.6 7.6-7 2.4-2.4 4.6-5.2 6.6-8s4-5.6 5.6-8.8 3.2-6.2 4.4-9.4c1.2-3.2 2.4-6.4 3.2-9.8 0.8-3.4 1.6-6.8 2-10.2 0.4-3.4 0.6-6.8 0.6-10.4V315.4c0-3.4-0.2-6.8-0.6-10.4-0.4-3.4-1-6.8-2-10.2-0.8-3.4-2-6.6-3.2-9.8s-2.8-6.4-4.4-9.4c-1.6-3-3.6-6-5.6-8.6-2-2.8-4.2-5.4-6.6-7.8-2.4-2.4-5-4.8-7.6-7-2.6-2-5.4-4-8.2-5.8z" p-id="6836"></path><path d="M621.4 642.8c-78.6 0-95.4-22-100.4-57.4l-0.6-3-1.2-3c-0.4-1-1-1.8-1.8-2.6-0.6-0.8-1.4-1.6-2.2-2.4-0.8-0.8-1.6-1.4-2.6-1.8-1-0.6-1.8-1-2.8-1.4-1-0.4-2-0.6-3-0.8-1-0.2-2-0.4-3.2-0.4H462c-1.2 0-2.4 0.2-3.4 0.4-1.2 0.2-2.2 0.6-3.4 1-1 0.4-2 1-3 1.8-1 0.6-1.8 1.4-2.6 2.2-0.8 0.8-1.6 1.8-2.2 2.8-0.6 1-1.2 2-1.6 3-0.4 1-0.8 2.2-1 3.4-0.2 1.2-0.4 2.4-0.2 3.4 0 30.8 10.8 131.2 177 131.2 51.4 0 94.2-12 123.6-34.8 29.4-22.8 45.2-55.8 45.2-95.4 0-79.2-51.6-100.8-153.4-115-103.4-14.4-103.4-21.8-103.4-37.8 0-11.6 0-38.6 74.8-38.6 53.2 0 81.8 6.8 90.8 42.2 0.2 1 0.4 2 0.8 2.8 0.4 1 0.8 1.8 1.4 2.6 0.6 0.8 1 1.6 1.8 2.4 0.6 0.8 1.4 1.4 2.2 2 0.8 0.6 1.6 1.2 2.4 1.6 0.8 0.4 1.8 1 2.6 1.2 1 0.4 1.8 0.6 2.8 0.8s2 0.2 3 0.2h42c2.4 0 4.8-0.6 7.2-1.6 2.2-1 4.2-2.6 5.8-4.4 1.6-1.8 2.8-4 3.6-6.4 0.8-2.4 1-4.8 0.8-7.2-5.4-75-60.2-113-167.2-113-97.2 0-155.2 43.8-155.2 117 0 80.4 60 103 150.4 112.4 105.4 11 105.4 26.8 105.4 40.8 0.2 22.6-9 51.8-87.6 51.8z" p-id="6837"></path></svg>

src/router/index.js

@@ -73,6 +73,7 @@ import ComponentBasicExample from './modules/component.basic.example'
 import ComponentExtendExample from './modules/component.extend.example'
 import PermissionExample from './modules/permission.example'
 import MockExample from './modules/mock.example'
+import JsxExample from './modules/jsx.example'
 import ExternalLinkExample from './modules/external.link.example'
 // import VideosExample from './modules/videos.example'
 import EcologyExample from './modules/ecology.example'
@@ -93,6 +94,7 @@ const asyncRoutes = [
             ComponentExtendExample,
             PermissionExample,
             MockExample,
+            JsxExample,
             ExternalLinkExample
         ]
     },

src/router/modules/jsx.example.js

@@ -0,0 +1,25 @@
+const Layout = () => import('@/layout/index.vue')
+
+export default {
+    path: '/jsx_example',
+    component: Layout,
+    redirect: '/jsx_example/index',
+    name: 'jsxExample',
+    meta: {
+        title: 'JSX',
+        icon: 'sidebar-jsx'
+    },
+    children: [
+        {
+            path: 'index',
+            name: 'jsxExampleIndex',
+            component: () => import('@/views/jsx_example/index.jsx'),
+            meta: {
+                title: 'JSX',
+                sidebar: false,
+                breadcrumb: false,
+                activeMenu: '/jsx_example'
+            }
+        }
+    ]
+}

src/views/jsx_example/components/JsxComp/index.vue

@@ -0,0 +1,20 @@
+<script lang="jsx">
+export default defineComponent({
+    name: 'JsxComp',
+    setup() {
+        return () => <div class="test">
+            这是一个用<span>JSX</span>编写的SFC组件。
+        </div>
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.test {
+    font-size: 24px;
+    span {
+        font-weight: bold;
+        color: #f00;
+    }
+}
+</style>

src/views/jsx_example/index.jsx

@@ -0,0 +1,47 @@
+import styles from './index.module.scss'
+import JsxComp from './components/JsxComp/index.vue'
+
+export default defineComponent({
+    name: 'JsxExample',
+    render() {
+        const iconsArr = ref([
+            'sidebar-jsx',
+            'sidebar-element'
+        ])
+        const icons = (
+            iconsArr.value.map(v => {
+                return <svg-icon name={v} class={styles['example-icon']} />
+            })
+        )
+
+        let count = ref(0)
+        function onPlus(v = 1) {
+            count.value += v
+        }
+        const html = '<p>这是<i>一段</i><b>HTML</b>代码</p>'
+        const html2 = <p>
+        这也是<i>一段</i><b>HTML</b>代码
+        </p>
+
+        return <div>
+            <page-header title="JSX" content="请查看本页面源码，更多 JSX 介绍请访问官网文档。" />
+            <page-main>
+                <p>这是两个 Svg Icon 图标</p>
+                {icons}
+                <el-divider />
+                <div class={styles.test1}>
+                    <div class={styles.a}></div>
+                </div>
+                <div class={styles.test2}>
+                    <div class={styles.a}></div>
+                </div>
+                <el-divider />
+                <el-button onClick={() => onPlus(10)}>点我：{ count.value }</el-button>
+                <div v-html={html}></div>
+                {html2}
+                <el-divider />
+                <JsxComp />
+            </page-main>
+        </div>
+    }
+})

src/views/jsx_example/index.module.scss

@@ -0,0 +1,19 @@
+.example-icon {
+    font-size: 48px;
+}
+.test1 {
+    font-size: 24px;
+    .a {
+        width: 100px;
+        height: 100px;
+        background-color: #000;
+    }
+}
+.test2 {
+    font-size: 24px;
+    .a {
+        width: 100px;
+        height: 100px;
+        background-color: #ff0;
+    }
+}

vite/plugins/components.js

@@ -2,6 +2,7 @@ import components from 'unplugin-vue-components/vite'
 
 export default function createComponents() {
     return components({
-        dirs: ['src/components']
+        dirs: ['src/components'],
+        include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/]
     })
 }

vite/plugins/index.js

@@ -1,6 +1,7 @@
 import vue from '@vitejs/plugin-vue'
 
 import createRestart from './restart'
+import createJsx from './jsx'
 import createHtml from './html'
 import createAutoImport from './auto-import'
 import createComponents from './components'
@@ -14,6 +15,7 @@ import createBanner from './banner'
 export default function createVitePlugins(viteEnv, isBuild = false) {
     const vitePlugins = [vue()]
     !isBuild && vitePlugins.push(createRestart())
+    vitePlugins.push(createJsx())
     vitePlugins.push(createHtml(viteEnv, isBuild))
     vitePlugins.push(createAutoImport())
     vitePlugins.push(createComponents())

vite/plugins/jsx.js

@@ -0,0 +1,5 @@
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+export default function createJsx() {
+    return vueJsx()
+}

vite/plugins/restart.js

@@ -10,6 +10,7 @@ export default function createRestart() {
             'vite/plugins/components.js',
             'vite/plugins/compression.js',
             'vite/plugins/html.js',
+            'vite/plugins/jsx.js',
             'vite/plugins/mock.js',
             'vite/plugins/restart.js',
             'vite/plugins/setup-extend.js',