feat: add error handle

.env.production

@@ -7,7 +7,7 @@ VITE_PUBLIC_PATH = ./
 # Delete console
 VITE_DROP_CONSOLE = true
 
-# Delete console
+# Whether to output gz file for packaging
 VITE_BUILD_GZIP = false
 
 # Basic interface address SPA

README.en-US.md

@@ -225,17 +225,17 @@ yarn clean:lib # Delete node_modules, supported window
 - [x] First screen loading waiting animation
 - [x] Extract the production environment profile
 - [x] Build Gzip
+- [x] System performance optimization
+- [x] Data import and export
+- [x] Global error handling
 
 ## Developing features
 
 - [ ] Upload component
 - [ ] Rich text component
-- [ ] Data import and export
-- [ ] Global error handling
 - [ ] Theme configuration
 - [ ] Dark theme
 - [ ] Build CDN
-- [ ] System performance optimization
 
 If you have more components/functions/suggestions/bugs/, welcome to submit pr or issue.
 

README.md

@@ -223,17 +223,17 @@ yarn clean:lib # 删除node_modules，兼容window系统
 - [x] 首屏加载等待动画
 - [x] 抽取生产环境配置文件
 - [x] 打包 Gzip
+- [x] 数据导入导出
+- [x] 系统性能优化
+- [x] 全局错误处理
 
 ## 正在开发的功能
 
 - [ ] 上传组件
 - [ ] 富文本组件
-- [ ] 数据导入导出
-- [ ] 全局错误处理
 - [ ] 主题配置
 - [ ] 黑暗主题
 - [ ] 打包 CDN
-- [ ] 系统性能优化
 
 更多组件/功能/建议/bug/欢迎提交 pr 或者 issue
 

build/config/vite/proxy.ts

@@ -2,13 +2,17 @@ type ProxyItem = [string, string];
 
 type ProxyList = ProxyItem[];
 
+const reg = /^https:\/\//;
 export function createProxy(list: ProxyList = []) {
   const ret: any = {};
   for (const [prefix, target] of list) {
+    const isHttps = reg.test(target);
+
     ret[prefix] = {
       target: target,
       changeOrigin: true,
       rewrite: (path: string) => path.replace(new RegExp(`^${prefix}`), ''),
+      ...(isHttps ? { secure: false } : {}),
     };
   }
   return ret;

package.json

@@ -41,10 +41,10 @@
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@iconify/json": "^1.1.242",
+    "@iconify/json": "^1.1.243",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.4.1",
-    "@types/echarts": "^4.8.1",
+    "@types/echarts": "^4.8.3",
     "@types/fs-extra": "^9.0.2",
     "@types/html-minifier": "^4.0.0",
     "@types/inquirer": "^7.3.1",
@@ -55,7 +55,7 @@
     "@types/qrcode": "^1.3.5",
     "@types/rollup-plugin-visualizer": "^2.6.0",
     "@types/shelljs": "^0.8.8",
-    "@types/yargs": "^15.0.8",
+    "@types/yargs": "^15.0.9",
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.4.1",
     "@typescript-eslint/parser": "^4.4.1",
@@ -67,7 +67,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
     "eslint": "^7.10.0",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint-config-prettier": "^6.13.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.0.1",
     "fs-extra": "^9.0.1",
@@ -76,7 +76,7 @@
     "inquirer": "^7.3.3",
     "koa-static": "^5.0.0",
     "less": "^3.12.2",
-    "lint-staged": "^10.4.0",
+    "lint-staged": "^10.4.2",
     "portfinder": "^1.0.28",
     "postcss-import": "^12.0.1",
     "prettier": "^2.1.2",
@@ -95,7 +95,7 @@
     "vite-plugin-mock": "^1.0.2",
     "vite-plugin-purge-icons": "^0.4.4",
     "vue-eslint-parser": "^7.1.1",
-    "yargs": "^16.0.3"
+    "yargs": "^16.1.0"
   },
   "repository": {
     "type": "git",

src/App.vue

@@ -33,6 +33,7 @@
         const { on } = useLockPage();
         lockOn = on;
       }
+
       return {
         transformCellText,
         zhCN,

src/api/demo/error.ts

@@ -0,0 +1,16 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  // 该地址不存在
+  Error = '/error',
+}
+
+/**
+ * @description: 触发ajax错误
+ */
+export function fireErrorApi() {
+  return defHttp.request({
+    url: Api.Error,
+    method: 'GET',
+  });
+}

src/components/Table/src/BasicTable.vue

@@ -146,7 +146,7 @@
         }
         if (showSummary) {
           propsData.footer = renderFooter.bind(null, {
-            scroll,
+            scroll: scroll as any,
             columnsRef: getColumnsRef,
             summaryFunc: unref(getMergeProps).summaryFunc,
             dataSourceRef: getDataSourceRef,

src/components/Table/src/components/TableAction.tsx

@@ -29,7 +29,6 @@ export default defineComponent({
               const {
                 disabled = false,
                 label,
-                props,
                 icon,
                 color = '',
                 type = 'link',
@@ -41,7 +40,7 @@ export default defineComponent({
                   size="small"
                   disabled={disabled}
                   color={color}
-                  {...props}
+                  {...action}
                   key={index}
                 >
                   {() => (
@@ -101,7 +100,6 @@ export default defineComponent({
                             const {
                               disabled = false,
                               label,
-                              props,
                               icon,
                               color = '',
                               type = 'link',
@@ -112,7 +110,7 @@ export default defineComponent({
                                   <Button
                                     type={type}
                                     size="small"
-                                    {...props}
+                                    {...action}
                                     disabled={disabled}
                                     color={color}
                                   >

src/enums/exceptionEnum.ts

@@ -23,3 +23,11 @@ export enum ExceptionEnum {
   // No data on the page. In fact, it is not an exception page
   PAGE_NOT_DATA = 10400,
 }
+
+export enum ErrorTypeEnum {
+  VUE = 'vue',
+  SCRIPT = 'script',
+  RESOURCE = 'resource',
+  AJAX = 'ajax',
+  PROMISE = 'promise',
+}

src/hooks/web/usePage.ts

@@ -19,7 +19,7 @@ function handleError(e: Error) {
 // page switch
 export function useGo() {
   const { push, replace } = useRouter();
-  function go(opt: PageEnum | RouteLocationRawEx = PageEnum.BASE_HOME, isReplace = false) {
+  function go(opt: PageEnum | RouteLocationRawEx | string = PageEnum.BASE_HOME, isReplace = false) {
     if (isString(opt)) {
       isReplace ? replace(opt).catch(handleError) : push(opt).catch(handleError);
     } else {

src/layouts/default/LayoutHeader.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, unref, computed } from 'vue';
-import { Layout, Tooltip } from 'ant-design-vue';
+import { Layout, Tooltip, Badge } from 'ant-design-vue';
 import Logo from '/@/layouts/Logo.vue';
 import UserDropdown from './UserDropdown';
 import LayoutMenu from './LayoutMenu';
@@ -12,19 +12,23 @@ import {
   FullscreenOutlined,
   GithubFilled,
   LockOutlined,
+  BugOutlined,
 } from '@ant-design/icons-vue';
 import { useFullscreen } from '/@/hooks/web/useFullScreen';
 import { useTabs } from '/@/hooks/web/useTabs';
 import { GITHUB_URL } from '/@/settings/siteSetting';
 import LockAction from './actions/LockActionItem';
 import { useModal } from '/@/components/Modal/index';
+import { errorStore } from '/@/store/modules/error';
+import { useGo } from '/@/hooks/web/usePage';
 
 export default defineComponent({
   name: 'DefaultLayoutHeader',
   setup() {
     const { refreshPage } = useTabs();
     const [register, { openModal }] = useModal();
     const { toggleFullscreen, isFullscreenRef } = useFullscreen();
+    const go = useGo();
     const getProjectConfigRef = computed(() => {
       return appStore.getProjectConfig;
     });
@@ -37,6 +41,12 @@ export default defineComponent({
       const theme = unref(getProjectConfigRef).headerSetting.theme;
       return theme ? `layout-header__header--${theme}` : '';
     });
+
+    function handleToErrorList() {
+      errorStore.commitErrorListCountState(0);
+      go('/exception/error-log');
+    }
+
     /**
      * @description: 锁定屏幕
      */
@@ -46,9 +56,9 @@ export default defineComponent({
     return () => {
       const getProjectConfig = unref(getProjectConfigRef);
       const {
-        // useErrorHandle,
+        useErrorHandle,
         showLogo,
-        headerSetting: { theme: headerTheme, showRedo, showGithub, showFullScreen },
+        headerSetting: { theme: headerTheme, useLockPage, showRedo, showGithub, showFullScreen },
         menuSetting: { mode, type: menuType, split: splitMenu, topMenuAlign },
         showBreadCrumb,
       } = getProjectConfig;
@@ -77,8 +87,28 @@ export default defineComponent({
               </div>
 
               <div class={`layout-header__action`}>
+                {useErrorHandle && (
+                  <Tooltip>
+                    {{
+                      title: () => '错误日志',
+                      default: () => (
+                        <Badge
+                          count={errorStore.getErrorListCountState}
+                          offset={[0, 10]}
+                          overflowCount={99}
+                        >
+                          {() => (
+                            <div class={`layout-header__action-item`} onClick={handleToErrorList}>
+                              <BugOutlined class={`layout-header__action-icon`} />
+                            </div>
+                          )}
+                        </Badge>
+                      ),
+                    }}
+                  </Tooltip>
+                )}
+
                 {showGithub && (
-                  // @ts-ignore
                   <Tooltip>
                     {{
                       title: () => 'github',
@@ -90,8 +120,7 @@ export default defineComponent({
                     }}
                   </Tooltip>
                 )}
-                {showGithub && (
-                  // @ts-ignore
+                {useLockPage && (
                   <Tooltip>
                     {{
                       title: () => '锁定屏幕',
@@ -104,7 +133,6 @@ export default defineComponent({
                   </Tooltip>
                 )}
                 {showRedo && (
-                  // @ts-ignore
                   <Tooltip>
                     {{
                       title: () => '刷新',
@@ -117,7 +145,6 @@ export default defineComponent({
                   </Tooltip>
                 )}
                 {showFullScreen && (
-                  // @ts-ignore
                   <Tooltip>
                     {{
                       title: () => (unref(isFullscreenRef) ? '退出全屏' : '全屏'),

src/layouts/default/actions/LockActionItem.tsx

@@ -40,10 +40,11 @@ export default defineComponent({
       let password: string | undefined = '';
 
       try {
-        const values = (await validateFields()) as any;
-        password = values.password;
         if (!valid) {
           password = undefined;
+        } else {
+          const values = (await validateFields()) as any;
+          password = values.password;
         }
         setModalProps({
           visible: false,