chore: format code

build/vite/alias.ts

-import { resolve } from 'path';
-import type { Alias } from 'vite';
-
-function pathResolve(dir: string) {
-  return resolve(process.cwd(), '.', dir);
-}
-
-export function createAlias(alias: [string, string][]): Alias[] {
-  return alias.map((item) => {
-    const [alia, src] = item;
-    return {
-      find: new RegExp(alia),
-      replacement: pathResolve(src) + '/',
-    };
-  });
-}

package.json

@@ -49,7 +49,7 @@
     "sortablejs": "^1.13.0",
     "tinymce": "^5.7.1",
     "vditor": "^3.8.4",
-    "vue": "3.0.10",
+    "vue": "3.0.11",
     "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.5",
     "vue-types": "^3.0.2",
@@ -58,8 +58,8 @@
     "xlsx": "^0.16.9"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.0.1",
-    "@commitlint/config-conventional": "^12.0.1",
+    "@commitlint/cli": "^12.1.1",
+    "@commitlint/config-conventional": "^12.1.1",
     "@iconify/json": "^1.1.323",
     "@purge-icons/generated": "^0.7.0",
     "@types/crypto-js": "^4.0.1",
@@ -76,7 +76,7 @@
     "@vitejs/plugin-legacy": "^1.3.2",
     "@vitejs/plugin-vue": "^1.2.1",
     "@vitejs/plugin-vue-jsx": "^1.1.3",
-    "@vue/compiler-sfc": "3.0.10",
+    "@vue/compiler-sfc": "3.0.11",
     "autoprefixer": "^10.2.5",
     "commitizen": "^4.2.3",
     "conventional-changelog-cli": "^2.1.1",
@@ -84,7 +84,7 @@
     "dotenv": "^8.2.0",
     "eslint": "^7.23.0",
     "eslint-config-prettier": "^8.1.0",
-    "eslint-define-config": "^1.0.6",
+    "eslint-define-config": "^1.0.7",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.8.0",
     "esno": "^0.5.0",
@@ -99,7 +99,7 @@
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "rimraf": "^3.0.2",
-    "rollup-plugin-visualizer": "5.0.4",
+    "rollup-plugin-visualizer": "5.2.1",
     "stylelint": "^13.12.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^21.0.0",
@@ -116,7 +116,7 @@
     "vite-plugin-style-import": "^0.9.1",
     "vite-plugin-svg-icons": "^0.4.0",
     "vite-plugin-theme": "^0.5.0",
-    "vite-plugin-windicss": "0.11.4",
+    "vite-plugin-windicss": "0.12.1",
     "vue-eslint-parser": "^7.6.0"
   },
   "resolutions": {

src/components/Button/src/PopConfirmButton.vue

@@ -36,9 +36,11 @@
         );
         return popValues;
       });
+
       return () => {
         const values = omit(unref(getBindValues), 'icon');
         const Button = h(BasicButton, values, extendSlots(slots));
+
         if (!props.enable) {
           return Button;
         }

src/components/Container/src/LazyContainer.vue

@@ -64,7 +64,7 @@
     },
     emits: ['init'],
     setup(props, { emit }) {
-      const elRef = ref<any>(null);
+      const elRef = ref();
       const state = reactive<State>({
         isInit: false,
         loading: false,

src/components/Cropper/src/index.vue

 <template>
-  <div :class="$attrs.class" :style="$attrs.style">
-    <img ref="imgElRef" :src="src" :alt="alt" :crossorigin="crossorigin" :style="getImageStyle" />
+  <div :class="$attrs.class" :style="getWrapperStyle">
+    <img
+      v-show="isReady"
+      ref="imgElRef"
+      :src="src"
+      :alt="alt"
+      :crossorigin="crossorigin"
+      :style="getImageStyle"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -46,8 +53,8 @@
         type: String,
       },
       height: {
-        type: String,
-        default: '500px',
+        type: [String, Number],
+        default: '360px',
       },
       crossorigin: {
         type: String,
@@ -78,6 +85,13 @@
         }
       );
 
+      const getWrapperStyle = computed(
+        (): CSSProperties => {
+          const { height } = props;
+          return { height: `${height}`.replace(/px/, '') + 'px' };
+        }
+      );
+
       async function init() {
         const imgEl = unref(imgElRef);
         if (!imgEl) {
@@ -94,7 +108,7 @@
 
       onMounted(init);
 
-      return { imgElRef, getImageStyle, isReady };
+      return { imgElRef, getWrapperStyle, getImageStyle, isReady };
     },
   });
 </script>

src/components/Scrollbar/src/bar.ts

@@ -23,13 +23,13 @@ export default defineComponent({
 
   setup(props) {
     const instance = getCurrentInstance();
-    const thumb = ref<any>(null);
+    const thumb = ref();
     const wrap = inject('scroll-bar-wrap', {} as Ref<Nullable<HTMLElement>>) as any;
     const bar = computed(() => {
       return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
     });
     const barStore = ref<Recordable>({});
-    const cursorDown = ref<any>(null);
+    const cursorDown = ref();
     const clickThumbHandler = (e: any) => {
       // prevent click event of right button
       if (e.ctrlKey || e.button === 2) {

src/components/Scrollbar/src/index.vue

@@ -69,8 +69,8 @@
       const sizeHeight = ref('0');
       const moveX = ref(0);
       const moveY = ref(0);
-      const wrap = ref<any>(null);
-      const resize = ref<any>(null);
+      const wrap = ref();
+      const resize = ref();
 
       provide('scroll-bar-wrap', wrap);
 

src/components/Table/src/components/editable/EditableCell.vue

@@ -67,7 +67,7 @@
     setup(props) {
       const table = useTableContext();
       const isEdit = ref(false);
-      const elRef = ref<any>(null);
+      const elRef = ref();
       const ruleVisible = ref(false);
       const ruleMessage = ref('');
       const optionsRef = ref<LabelValueOptions>([]);

src/components/Tinymce/src/Editor.vue

@@ -23,56 +23,16 @@
     onDeactivated,
   } from 'vue';
 
-  import tinymce from 'tinymce/tinymce';
-  import 'tinymce/skins/ui/oxide/skin.min.css';
-  import 'tinymce/themes/silver';
+  import ImgUpload from './ImgUpload.vue';
 
-  import toolbar from './toolbar';
-  import plugins from './plugins';
+  import { tinymce, toolbar, plugins } from './tinymce';
 
   import { buildShortUUID } from '/@/utils/uuid';
   import { bindHandlers } from './helper';
   import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
-  import ImgUpload from './ImgUpload.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { isNumber } from '/@/utils/is';
 
-  import 'tinymce/icons/default/icons';
-  import 'tinymce/themes/mobile';
-  import 'tinymce/plugins/emoticons';
-  import 'tinymce/plugins/emoticons/js/emojis';
-  import 'tinymce/plugins/advlist';
-  import 'tinymce/plugins/anchor';
-  import 'tinymce/plugins/autolink';
-  import 'tinymce/plugins/autosave';
-  import 'tinymce/plugins/code';
-  import 'tinymce/plugins/codesample';
-  import 'tinymce/plugins/directionality';
-  import 'tinymce/plugins/fullscreen';
-  import 'tinymce/plugins/hr';
-  import 'tinymce/plugins/image';
-  import 'tinymce/plugins/imagetools';
-  import 'tinymce/plugins/insertdatetime';
-  import 'tinymce/plugins/link';
-  import 'tinymce/plugins/lists';
-  import 'tinymce/plugins/media';
-  import 'tinymce/plugins/nonbreaking';
-  import 'tinymce/plugins/noneditable';
-  import 'tinymce/plugins/pagebreak';
-  import 'tinymce/plugins/paste';
-  import 'tinymce/plugins/preview';
-  import 'tinymce/plugins/print';
-  import 'tinymce/plugins/save';
-  import 'tinymce/plugins/searchreplace';
-  import 'tinymce/plugins/spellchecker';
-  import 'tinymce/plugins/tabfocus';
-  import 'tinymce/plugins/table';
-  import 'tinymce/plugins/template';
-  import 'tinymce/plugins/textpattern';
-  import 'tinymce/plugins/visualblocks';
-  import 'tinymce/plugins/visualchars';
-  import 'tinymce/plugins/wordcount';
-
   const tinymceProps = {
     options: {
       type: Object as PropType<any>,
@@ -117,16 +77,14 @@
     props: tinymceProps,
     emits: ['change', 'update:modelValue'],
     setup(props, { emit, attrs }) {
-      const editorRef = ref<any>(null);
+      const editorRef = ref();
       const fullscreen = ref(false);
       const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
       const elRef = ref<Nullable<HTMLElement>>(null);
 
       const { prefixCls } = useDesign('tinymce-container');
 
-      const tinymceContent = computed(() => {
-        return props.modelValue;
-      });
+      const tinymceContent = computed(() => props.modelValue);
 
       const containerWidth = computed(() => {
         const width = props.width;
@@ -167,7 +125,9 @@
         () => attrs.disabled,
         () => {
           const editor = unref(editorRef);
-          if (!editor) return;
+          if (!editor) {
+            return;
+          }
           editor.setMode(attrs.disabled ? 'readonly' : 'design');
         }
       );
@@ -205,7 +165,9 @@
 
       function initSetup(e: Event) {
         const editor = unref(editorRef);
-        if (!editor) return;
+        if (!editor) {
+          return;
+        }
         const value = props.modelValue || '';
 
         editor.setContent(value);
@@ -258,21 +220,24 @@
 
       function handleImageUploading(name: string) {
         const editor = unref(editorRef);
-        if (!editor) return;
+        if (!editor) {
+          return;
+        }
         const content = editor?.getContent() ?? '';
-        setValue(editor, `${content}\n${getImgName(name)}`);
+        setValue(editor, `${content}\n${getUploadingImgName(name)}`);
       }
 
       function handleDone(name: string, url: string) {
         const editor = unref(editorRef);
-        if (!editor) return;
-
+        if (!editor) {
+          return;
+        }
         const content = editor?.getContent() ?? '';
-        const val = content?.replace(getImgName(name), `<img src="${url}"/>`) ?? '';
+        const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
         setValue(editor, val);
       }
 
-      function getImgName(name: string) {
+      function getUploadingImgName(name: string) {
         return `[uploading:${name}]`;
       }
 

src/components/Tinymce/src/ImgUpload.vue

@@ -37,6 +37,7 @@
       const { uploadUrl } = useGlobSetting();
       const { t } = useI18n();
       const { prefixCls } = useDesign('tinymce-img-upload');
+
       function handleChange(info: Recordable) {
         const file = info.file;
         const status = file?.status;

src/components/Tinymce/src/plugins.ts

-// Any plugins you want to setting has to be imported
-// Detail plugins list see https://www.tinymce.com/docs/plugins/
-// Custom builds see https://www.tinymce.com/download/custom-builds/
-// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
-
-const plugins = [
-  'advlist anchor autolink autosave code codesample  directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template  textpattern visualblocks visualchars wordcount',
-];
-
-export default plugins;

src/components/Tinymce/src/tinymce.ts

+import tinymce from 'tinymce/tinymce';
+import 'tinymce/skins/ui/oxide/skin.min.css';
+import 'tinymce/themes/silver';
+
+import 'tinymce/icons/default/icons';
+import 'tinymce/themes/mobile';
+import 'tinymce/plugins/emoticons';
+import 'tinymce/plugins/emoticons/js/emojis';
+import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/anchor';
+import 'tinymce/plugins/autolink';
+import 'tinymce/plugins/autosave';
+import 'tinymce/plugins/code';
+import 'tinymce/plugins/codesample';
+import 'tinymce/plugins/directionality';
+import 'tinymce/plugins/fullscreen';
+import 'tinymce/plugins/hr';
+import 'tinymce/plugins/image';
+import 'tinymce/plugins/imagetools';
+import 'tinymce/plugins/insertdatetime';
+import 'tinymce/plugins/link';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/media';
+import 'tinymce/plugins/nonbreaking';
+import 'tinymce/plugins/noneditable';
+import 'tinymce/plugins/pagebreak';
+import 'tinymce/plugins/paste';
+import 'tinymce/plugins/preview';
+import 'tinymce/plugins/print';
+import 'tinymce/plugins/save';
+import 'tinymce/plugins/searchreplace';
+import 'tinymce/plugins/spellchecker';
+import 'tinymce/plugins/tabfocus';
+import 'tinymce/plugins/table';
+import 'tinymce/plugins/template';
+import 'tinymce/plugins/textpattern';
+import 'tinymce/plugins/visualblocks';
+import 'tinymce/plugins/visualchars';
+import 'tinymce/plugins/wordcount';
+
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+export const plugins = [
+  'advlist anchor autolink autosave code codesample  directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template  textpattern visualblocks visualchars wordcount',
+];
+
+export const toolbar = [
+  'fontsizeselect lineheight searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
+  'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',
+];
+
+export { tinymce };

src/components/Tinymce/src/toolbar.ts

-// Here is a list of the toolbar
-// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
-
-const toolbar = [
-  'fontsizeselect lineheight searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
-  'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',
-];
-
-export default toolbar;

src/views/sys/login/ForgetPasswordForm.vue

@@ -57,7 +57,7 @@
       const { handleBackLogin, getLoginState } = useLoginState();
       const { getFormRules } = useFormRules();
 
-      const formRef = ref<any>(null);
+      const formRef = ref();
       const loading = ref(false);
 
       const formData = reactive({

src/views/sys/login/LoginForm.vue

@@ -118,7 +118,7 @@
       const { setLoginState, getLoginState } = useLoginState();
       const { getFormRules } = useFormRules();
 
-      const formRef = ref<any>(null);
+      const formRef = ref();
       const loading = ref(false);
       const rememberMe = ref(false);
 

src/views/sys/login/MobileForm.vue

@@ -49,7 +49,7 @@
       const { handleBackLogin, getLoginState } = useLoginState();
       const { getFormRules } = useFormRules();
 
-      const formRef = ref<any>(null);
+      const formRef = ref();
       const loading = ref(false);
 
       const formData = reactive({

src/views/sys/login/RegisterForm.vue

@@ -86,7 +86,7 @@
       const { t } = useI18n();
       const { handleBackLogin, getLoginState } = useLoginState();
 
-      const formRef = ref<any>(null);
+      const formRef = ref();
       const loading = ref(false);
 
       const formData = reactive({

tsconfig.json

@@ -36,7 +36,8 @@
     "types/**/*.ts",
     "build/**/*.ts",
     "build/**/*.d.ts",
-    "mock/**/*.ts"
+    "mock/**/*.ts",
+    "vite.config.ts"
   ],
   "exclude": ["node_modules", "dist", "**/*.js"]
 }

vite.config.ts

@@ -5,13 +5,16 @@ import { resolve } from 'path';
 
 import { generateModifyVars } from './build/config/themeConfig';
 import { createProxy } from './build/vite/proxy';
-import { createAlias } from './build/vite/alias';
 import { wrapperEnv } from './build/utils';
 import { createVitePlugins } from './build/vite/plugin';
 import { OUTPUT_DIR } from './build/constant';
 import pkg from './package.json';
 import moment from 'moment';
 
+function pathResolve(dir: string) {
+  return resolve(process.cwd(), '.', dir);
+}
+
 const { dependencies, devDependencies, name, version } = pkg;
 const __APP_INFO__ = {
   pkg: { dependencies, devDependencies, name, version },
@@ -34,12 +37,19 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     base: VITE_PUBLIC_PATH,
     root,
     resolve: {
-      alias: createAlias([
+      alias: [
         // /@/xxxx => src/xxxx
-        ['/@/', 'src'],
+        {
+          find: /\/@\//,
+          replacement: pathResolve('src') + '/',
+        },
         // /#/xxxx => types/xxxx
-        ['/#/', 'types'],
-      ]),
+        {
+          find: /\/#\//,
+          replacement: pathResolve('types') + '/',
+        },
+        // ['@vue/compiler-sfc', '@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js'],
+      ],
     },
     server: {
       port: VITE_PORT,