From 335e45668838adab8522f1f6dc02778f4cedab56 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Fri, 17 Nov 2023 13:30:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20v4.3.2=E7=BB=86=E8=8A=82=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 6 +- package.json | 1 - pnpm-lock.yaml | 217 -------------------- src/app-config/localConfig.ts | 32 +-- src/dayjs/type.ts | 15 -- src/global-variable/variable.ts | 4 +- src/hooks/template/index.ts | 4 + src/hooks/template/useAppSetting.ts | 32 +++ src/hooks/template/useMainPage.ts | 23 ++- src/hooks/web/index.ts | 2 + src/hooks/web/useDayjs.ts | 6 +- src/hooks/web/useWebFullscreen.ts | 14 ++ src/layout/default/ContentWrapper/index.tsx | 7 + src/layout/index.scss | 7 - src/layout/index.tsx | 19 +- src/store/modules/setting/index.ts | 8 +- src/types/modules/appConfig.ts | 28 +++ src/types/modules/helper.ts | 2 + src/utils/element.ts | 6 +- src/utils/vue/effectDispose.ts | 2 +- src/utils/vue/watchEffectWithTarget.ts | 4 +- 21 files changed, 151 insertions(+), 288 deletions(-) delete mode 100644 src/dayjs/type.ts create mode 100644 src/hooks/template/useAppSetting.ts create mode 100644 src/hooks/web/useWebFullscreen.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index bd0f27ab..0afc4049 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,9 @@ 升级 `vue` 版本至最新 `v3.3.8`。 -尽可能的暴露了一些模板专属 `hooks`，便于开发者使用。 +更新了 appConfig 的一些类型，类型定义不再那么的宽泛。 + +新增 `useAppSetting hook`，区别于其他的模板方法，该包中的方法，可以用于全局任意页面。该方法相当是对于 `useSettingStore` 包中方法的补充。 ### Feats @@ -12,6 +14,8 @@ - `useDayjs` 新增一些常用方法 - 新增 `appExpandRoutes` 变量，存放展开、提升后的路由 - `scopeDispose` 重命名为 `effectDispose` +- 优化 maximize 方法，并且支持配置层级。默认层级 99 +- changePrimaryColor 方法支持自定义透明度 ### Fixes diff --git a/package.json b/package.json index 8228f072..19b8cc1d 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,6 @@ "eslint-plugin-n": "^15.0.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-promise": "^6.0.0", - "eslint-plugin-react": "^7.31.10", "eslint-plugin-vue": "^9.15.1", "husky": "^8.0.3", "lint-staged": "^13.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b053403d..e9ee2f70 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -136,9 +136,6 @@ devDependencies: eslint-plugin-promise: specifier: ^6.0.0 version: 6.1.1(eslint@8.48.0) - eslint-plugin-react: - specifier: ^7.31.10 - version: 7.33.2(eslint@8.48.0) eslint-plugin-vue: specifier: ^9.15.1 version: 9.17.0(eslint@8.48.0) @@ -2102,16 +2099,6 @@ packages: es-shim-unscopables: 1.0.0 dev: true - /array.prototype.tosorted@1.1.1: - resolution: {integrity: sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==} - dependencies: - call-bind: 1.0.2 - define-properties: 1.2.0 - es-abstract: 1.22.1 - es-shim-unscopables: 1.0.0 - get-intrinsic: 1.2.1 - dev: true - /arraybuffer.prototype.slice@1.0.1: resolution: {integrity: sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==} engines: {node: '>= 0.4'} @@ -2151,12 +2138,6 @@ packages: resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==} dev: true - /asynciterator.prototype@1.0.0: - resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==} - dependencies: - has-symbols: 1.0.3 - dev: true - /asynckit@0.4.0: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} dev: false @@ -3241,25 +3222,6 @@ packages: which-typed-array: 1.1.11 dev: true - /es-iterator-helpers@1.0.14: - resolution: {integrity: sha512-JgtVnwiuoRuzLvqelrvN3Xu7H9bu2ap/kQ2CrM62iidP8SKuD99rWU3CJy++s7IVL2qb/AjXPGR/E7i9ngd/Cw==} - dependencies: - asynciterator.prototype: 1.0.0 - call-bind: 1.0.2 - define-properties: 1.2.0 - es-abstract: 1.22.1 - es-set-tostringtag: 2.0.1 - function-bind: 1.1.1 - get-intrinsic: 1.2.1 - globalthis: 1.0.3 - has-property-descriptors: 1.0.0 - has-proto: 1.0.1 - has-symbols: 1.0.3 - internal-slot: 1.0.5 - iterator.prototype: 1.1.1 - safe-array-concat: 1.0.0 - dev: true - /es-set-tostringtag@2.0.1: resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==} engines: {node: '>= 0.4'} @@ -3519,31 +3481,6 @@ packages: eslint: 8.48.0 dev: true - /eslint-plugin-react@7.33.2(eslint@8.48.0): - resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==} - engines: {node: '>=4'} - peerDependencies: - eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 - dependencies: - array-includes: 3.1.6 - array.prototype.flatmap: 1.3.1 - array.prototype.tosorted: 1.1.1 - doctrine: 2.1.0 - es-iterator-helpers: 1.0.14 - eslint: 8.48.0 - estraverse: 5.3.0 - jsx-ast-utils: 3.3.5 - minimatch: 3.1.2 - object.entries: 1.1.7 - object.fromentries: 2.0.7 - object.hasown: 1.1.3 - object.values: 1.1.7 - prop-types: 15.8.1 - resolve: 2.0.0-next.4 - semver: 6.3.1 - string.prototype.matchall: 4.0.9 - dev: true - /eslint-plugin-vue@9.17.0(eslint@8.48.0): resolution: {integrity: sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==} engines: {node: ^14.17.0 || >=16.0.0} @@ -4459,13 +4396,6 @@ packages: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} dev: true - /is-async-function@2.0.0: - resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==} - engines: {node: '>= 0.4'} - dependencies: - has-tostringtag: 1.0.0 - dev: true - /is-bigint@1.0.4: resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==} dependencies: @@ -4570,12 +4500,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /is-finalizationregistry@1.0.2: - resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==} - dependencies: - call-bind: 1.0.2 - dev: true - /is-fullwidth-code-point@3.0.0: resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} engines: {node: '>=8'} @@ -4585,13 +4509,6 @@ packages: engines: {node: '>=12'} dev: true - /is-generator-function@1.0.10: - resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==} - engines: {node: '>= 0.4'} - dependencies: - has-tostringtag: 1.0.0 - dev: true - /is-glob@4.0.3: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} @@ -4607,10 +4524,6 @@ packages: is-docker: 3.0.0 dev: true - /is-map@2.0.2: - resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==} - dev: true - /is-negative-zero@2.0.2: resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==} engines: {node: '>= 0.4'} @@ -4665,10 +4578,6 @@ packages: has-tostringtag: 1.0.0 dev: true - /is-set@2.0.2: - resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==} - dev: true - /is-shared-array-buffer@1.0.2: resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==} dependencies: @@ -4713,23 +4622,12 @@ packages: which-typed-array: 1.1.11 dev: true - /is-weakmap@2.0.1: - resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==} - dev: true - /is-weakref@1.0.2: resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==} dependencies: call-bind: 1.0.2 dev: true - /is-weakset@2.0.2: - resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==} - dependencies: - call-bind: 1.0.2 - get-intrinsic: 1.2.1 - dev: true - /is-windows@1.0.2: resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==} engines: {node: '>=0.10.0'} @@ -4766,15 +4664,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /iterator.prototype@1.1.1: - resolution: {integrity: sha512-9E+nePc8C9cnQldmNl6bgpTY6zI4OPRZd97fhJ/iVZ1GifIUDVV5F6x1nEDqpe8KaMEZGT4xgrwKQDxXnjOIZQ==} - dependencies: - define-properties: 1.2.0 - get-intrinsic: 1.2.1 - has-symbols: 1.0.3 - reflect.getprototypeof: 1.0.4 - dev: true - /jake@10.8.7: resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==} engines: {node: '>=10'} @@ -4883,16 +4772,6 @@ packages: engines: {'0': node >= 0.2.0} dev: true - /jsx-ast-utils@3.3.5: - resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} - engines: {node: '>=4.0'} - dependencies: - array-includes: 3.1.6 - array.prototype.flat: 1.3.1 - object.assign: 4.1.4 - object.values: 1.1.7 - dev: true - /keygrip@1.1.0: resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==} engines: {node: '>= 0.6'} @@ -5070,13 +4949,6 @@ packages: wrap-ansi: 8.1.0 dev: true - /loose-envify@1.4.0: - resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} - hasBin: true - dependencies: - js-tokens: 4.0.0 - dev: true - /lower-case@2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} dependencies: @@ -5562,15 +5434,6 @@ packages: object-keys: 1.1.1 dev: true - /object.entries@1.1.7: - resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.2 - define-properties: 1.2.0 - es-abstract: 1.22.1 - dev: true - /object.fromentries@2.0.7: resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==} engines: {node: '>= 0.4'} @@ -5589,13 +5452,6 @@ packages: get-intrinsic: 1.2.1 dev: true - /object.hasown@1.1.3: - resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==} - dependencies: - define-properties: 1.2.0 - es-abstract: 1.22.1 - dev: true - /object.pick@1.3.0: resolution: {integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==} engines: {node: '>=0.10.0'} @@ -5945,14 +5801,6 @@ packages: resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==} dev: false - /prop-types@15.8.1: - resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} - dependencies: - loose-envify: 1.4.0 - object-assign: 4.1.1 - react-is: 16.13.1 - dev: true - /proxy-from-env@1.1.0: resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} dev: false @@ -6004,10 +5852,6 @@ packages: unpipe: 1.0.0 dev: true - /react-is@16.13.1: - resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - dev: true - /read-pkg-up@7.0.1: resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==} engines: {node: '>=8'} @@ -6050,18 +5894,6 @@ packages: strip-indent: 3.0.0 dev: true - /reflect.getprototypeof@1.0.4: - resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.2 - define-properties: 1.2.0 - es-abstract: 1.22.1 - get-intrinsic: 1.2.1 - globalthis: 1.0.3 - which-builtin-type: 1.1.3 - dev: true - /regenerator-runtime@0.14.0: resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==} dev: false @@ -6151,15 +5983,6 @@ packages: supports-preserve-symlinks-flag: 1.0.0 dev: true - /resolve@2.0.0-next.4: - resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==} - hasBin: true - dependencies: - is-core-module: 2.13.0 - path-parse: 1.0.7 - supports-preserve-symlinks-flag: 1.0.0 - dev: true - /restore-cursor@4.0.0: resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -6564,19 +6387,6 @@ packages: strip-ansi: 7.1.0 dev: true - /string.prototype.matchall@4.0.9: - resolution: {integrity: sha512-6i5hL3MqG/K2G43mWXWgP+qizFW/QH/7kCNN13JrJS5q48FN5IKksLDscexKP3dnmB6cdm9jlNgAsWNLpSykmA==} - dependencies: - call-bind: 1.0.2 - define-properties: 1.2.0 - es-abstract: 1.22.1 - get-intrinsic: 1.2.1 - has-symbols: 1.0.3 - internal-slot: 1.0.5 - regexp.prototype.flags: 1.5.0 - side-channel: 1.0.4 - dev: true - /string.prototype.trim@1.2.7: resolution: {integrity: sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==} engines: {node: '>= 0.4'} @@ -7550,33 +7360,6 @@ packages: is-symbol: 1.0.4 dev: true - /which-builtin-type@1.1.3: - resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==} - engines: {node: '>= 0.4'} - dependencies: - function.prototype.name: 1.1.6 - has-tostringtag: 1.0.0 - is-async-function: 2.0.0 - is-date-object: 1.0.5 - is-finalizationregistry: 1.0.2 - is-generator-function: 1.0.10 - is-regex: 1.1.4 - is-weakref: 1.0.2 - isarray: 2.0.5 - which-boxed-primitive: 1.0.2 - which-collection: 1.0.1 - which-typed-array: 1.1.11 - dev: true - - /which-collection@1.0.1: - resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==} - dependencies: - is-map: 2.0.2 - is-set: 2.0.2 - is-weakmap: 2.0.1 - is-weakset: 2.0.2 - dev: true - /which-typed-array@1.1.11: resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==} engines: {node: '>= 0.4'} diff --git a/src/app-config/localConfig.ts b/src/app-config/localConfig.ts index a6137805..9b90d442 100644 --- a/src/app-config/localConfig.ts +++ b/src/app-config/localConfig.ts @@ -11,8 +11,12 @@ /** 国际化相关配置 */ -import type { DayjsLocal, DayjsLocalMap } from '@/dayjs/type' -import type { AppLocalesDropdownMixedOption } from '@/locales/type' +import type { + TemplateLocale, + LocalOptions, + DayjsLocalMap, +} from '@/types/modules/appConfig' +import type { ValueOf } from '@/types/modules/helper' /** * @@ -21,7 +25,7 @@ import type { AppLocalesDropdownMixedOption } from '@/locales/type' * * 添加新的语言包后, 如果需要其类型提示, 需要在 AppCurrentAppMessages 中添加新的类型 */ -export const LOCAL_OPTIONS: AppLocalesDropdownMixedOption[] = [ +export const LOCAL_OPTIONS: LocalOptions = [ { key: 'zh-CN', label: '中文(简体)', @@ -38,16 +42,7 @@ export const LOCAL_OPTIONS: AppLocalesDropdownMixedOption[] = [ * * 配置时应该与 LOCAL_OPTIONS 的 key 一致 */ -export const SYSTEM_DEFAULT_LOCAL = 'zh-CN' - -/** - * - * dayjs 默认语言格式 - * 默认为英文(en) - * - * 系统默认设置为中文(大陆-简体) - */ -export const DEFAULT_DAYJS_LOCAL: DayjsLocal = 'zh-cn' +export const SYSTEM_DEFAULT_LOCAL: TemplateLocale = 'zh-CN' /** * @@ -59,4 +54,13 @@ export const DEFAULT_DAYJS_LOCAL: DayjsLocal = 'zh-cn' export const DAYJS_LOCAL_MAP: DayjsLocalMap = { 'zh-CN': 'zh-cn', 'en-US': 'en', -} +} as const + +/** + * + * dayjs 默认语言格式 + * 默认为英文(en) + * + * 系统默认设置为中文(大陆-简体) + */ +export const DEFAULT_DAYJS_LOCAL: ValueOf = 'zh-cn' diff --git a/src/dayjs/type.ts b/src/dayjs/type.ts deleted file mode 100644 index eb7cfefd..00000000 --- a/src/dayjs/type.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { AppCurrentAppMessages } from '@/locales/type' - -type A = { - [K in keyof T & string]: T[K] extends object ? string : never -} - -type PickDayjsLocalValue = { - [K in keyof T]: T[K] -}[keyof T] - -type DayjsLocalMaps = A - -export type DayjsLocal = PickDayjsLocalValue - -export type DayjsLocalMap = Record diff --git a/src/global-variable/variable.ts b/src/global-variable/variable.ts index b24206df..161bdd96 100644 --- a/src/global-variable/variable.ts +++ b/src/global-variable/variable.ts @@ -40,10 +40,10 @@ export type VariableState = typeof variableState export type VariableStateKey = keyof VariableState -export function setVariable( +export function setVariable( key: T, value: VariableState[T], - cb?: AnyFC, + cb?: FC, ) { variableState[key] = value diff --git a/src/hooks/template/index.ts b/src/hooks/template/index.ts index 67dc943f..030c70f6 100644 --- a/src/hooks/template/index.ts +++ b/src/hooks/template/index.ts @@ -2,4 +2,8 @@ import { useAppMenu } from './useAppMenu' import { useMainPage } from './useMainPage' import { useMenuTag } from './useMenuTag' +export type { MaximizeOptions } from './useMainPage' +export type { Target } from './useAppMenu' +export type { CloseMenuTag } from './useMenuTag' + export { useAppMenu, useMainPage, useMenuTag } diff --git a/src/hooks/template/useAppSetting.ts b/src/hooks/template/useAppSetting.ts new file mode 100644 index 00000000..098a7981 --- /dev/null +++ b/src/hooks/template/useAppSetting.ts @@ -0,0 +1,32 @@ +/** + * + * @author Ray + * + * @date 2023-11-16 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { useSettingActions } from '@/store' + +export function useApp() { + /** + * + * @param theme 当前主题色 + * + * 当前主题仅有明暗两套 + * - true: 暗色 + * - false: 亮色 + */ + const changeTheme = (theme: boolean) => { + const { changeSwitcher } = useSettingActions() + + changeSwitcher(theme, 'appTheme') + } + + return { + changeTheme, + } +} diff --git a/src/hooks/template/useMainPage.ts b/src/hooks/template/useMainPage.ts index 5e630e56..49c1b530 100644 --- a/src/hooks/template/useMainPage.ts +++ b/src/hooks/template/useMainPage.ts @@ -17,6 +17,10 @@ import { useWindowSize } from '@vueuse/core' import type { Ref } from 'vue' +export interface MaximizeOptions { + zIndex?: string +} + export function useMainPage() { /** * @@ -45,19 +49,32 @@ export function useMainPage() { * * 该方法仅针对于 LayoutContent 区域，并且依赖全局属性 layoutContentMaximize */ - const maximize = (full: boolean) => { + const maximize = (full: boolean, options?: MaximizeOptions) => { const contentEl = unrefElement(LAYOUT_CONTENT_REF as Ref) if (contentEl) { const { left, top } = contentEl.getBoundingClientRect() // 使用 left, top 计算 translate 偏移 const { height } = useWindowSize() // 获取实际高度避免 100vh 会导致手机端浏览器获取不准确问题 + const { zIndex = '99' } = options ?? {} full ? addStyle(contentEl, { - transform: `translate(-${left}px, -${top}px)`, + position: 'fixed', + width: '100%', height: `${height.value}px`, + transform: `translate(-${left}px, -${top}px)`, + transition: 'all 0.3s var(--r-bezier)', + zIndex, }) - : removeStyle(contentEl, ['transform', 'height']) + : removeStyle(contentEl, [ + 'position', + 'width', + 'height', + 'transform', + // 为了兼容浏览器 zIndex 的样式表 + 'zIndex', + 'z-index', + ]) } setVariable('layoutContentMaximize', full) diff --git a/src/hooks/web/index.ts b/src/hooks/web/index.ts index 7e6a9ca5..7441df21 100644 --- a/src/hooks/web/index.ts +++ b/src/hooks/web/index.ts @@ -14,4 +14,6 @@ import { useVueRouter } from '../web/useVueRouter' import { useDayjs } from '../web/useDayjs' import { useDevice } from './useDevice' +export type { FormatOption, DateRange, LocalKey } from './useDayjs' + export { useI18n, useVueRouter, useDayjs, t, useDevice } diff --git a/src/hooks/web/useDayjs.ts b/src/hooks/web/useDayjs.ts index 146ae610..01c9470e 100644 --- a/src/hooks/web/useDayjs.ts +++ b/src/hooks/web/useDayjs.ts @@ -12,8 +12,6 @@ import dayjs from 'dayjs' import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig' -import type { DayjsLocal } from '@/dayjs/type' - export interface FormatOption { format?: string } @@ -23,6 +21,8 @@ export interface DateRange { end: dayjs.ConfigType } +export type LocalKey = typeof DEFAULT_DAYJS_LOCAL + const defaultDayjsFormat = 'YYYY-MM-DD HH:mm:ss' /** @@ -39,7 +39,7 @@ export const useDayjs = () => { * * 手动配置 dayjs 语言（国际化） */ - const locale = (key: DayjsLocal) => { + const locale = (key: LocalKey) => { const locale = DAYJS_LOCAL_MAP[key] locale ? dayjs.locale(locale) : dayjs.locale(DEFAULT_DAYJS_LOCAL) diff --git a/src/hooks/web/useWebFullscreen.ts b/src/hooks/web/useWebFullscreen.ts new file mode 100644 index 00000000..40b31de2 --- /dev/null +++ b/src/hooks/web/useWebFullscreen.ts @@ -0,0 +1,14 @@ +/** + * + * @author Ray + * + * @date 2023-11-16 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +export function useWebFullscreen() { + // +} diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx index e5504d11..348c1aa2 100644 --- a/src/layout/default/ContentWrapper/index.tsx +++ b/src/layout/default/ContentWrapper/index.tsx @@ -73,6 +73,13 @@ export default defineComponent({ description="loading..." size="large" themeOverrides={this.themeOverridesSpin} + class={[ + layoutContentMaximize + ? 'r-layout-full__viewer-content--maximize' + : null, + 'r-layout-full__viewer-content--maximize--light', + 'r-layout-full__viewer-content--maximize--dark', + ]} > {layoutContentMaximize ? (
: null} diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts index c9e46776..10047864 100644 --- a/src/store/modules/setting/index.ts +++ b/src/store/modules/setting/index.ts @@ -8,7 +8,7 @@ import { useDayjs } from '@/hooks/web/index' import type { ConditionalPick } from '@/types/modules/helper' import type { SettingState } from '@/store/modules/setting/type' -import type { DayjsLocal } from '@/dayjs/type' +import type { LocalKey } from '@/hooks/web/index' export const piniaSettingStore = defineStore( 'setting', @@ -46,7 +46,7 @@ export const piniaSettingStore = defineStore( /** 修改当前语言 */ const updateLocale = (key: string) => { locale(key) - dayjsLocal(key as DayjsLocal) + dayjsLocal(key as LocalKey) settingState.localeLanguage = key @@ -54,7 +54,7 @@ export const piniaSettingStore = defineStore( } /** 切换主题色 */ - const changePrimaryColor = (value: string) => { + const changePrimaryColor = (value: string, alpha = 0.3) => { set( settingState, 'settingState.primaryColorOverride.common.primaryColorHover', @@ -67,7 +67,7 @@ export const piniaSettingStore = defineStore( body.style.setProperty('--ray-theme-primary-color', value) body.style.setProperty( '--ray-theme-primary-fade-color', - colorToRgba(value, 0.3), + colorToRgba(value, alpha), ) } diff --git a/src/types/modules/appConfig.ts b/src/types/modules/appConfig.ts index 38fb5548..2929e952 100644 --- a/src/types/modules/appConfig.ts +++ b/src/types/modules/appConfig.ts @@ -17,3 +17,31 @@ export interface AppKeepAlive { } export interface AxiosConfig extends Omit {} + +/** + * + * 模板中英文切换下拉框数据 + * 指定明确类型，以便于获取准确的 key + */ +export type LocalOptions = Array< + | { + key: 'zh-CN' + label: string + } + | { + key: 'en-US' + label: string + } +> + +/** + * + * 模板 dayjs 国际化切换映射数据 + * 指定明确类型，以便于获取准确的 value + */ +export type DayjsLocalMap = { + 'zh-CN': 'zh-cn' + 'en-US': 'en' +} + +export type TemplateLocale = T[number]['key'] diff --git a/src/types/modules/helper.ts b/src/types/modules/helper.ts index 144bd302..0eab87ae 100644 --- a/src/types/modules/helper.ts +++ b/src/types/modules/helper.ts @@ -11,3 +11,5 @@ export type ConditionalPick = Pick< > export type Recordable = Record + +export type ValueOf = T[keyof T] diff --git a/src/utils/element.ts b/src/utils/element.ts index 308c76d6..30ddfd03 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -218,10 +218,14 @@ export const addStyle = ( * * @param el Target element dom * @param styles 所需卸载样式 + * + * 当你发现不能正常的移除某些样式的时候，应该考虑是否是样式表兼容问题 + * @example + * removeStyle(['zIndex', 'z-index']) */ export const removeStyle = ( target: BasicTarget, - styles: (keyof CSSStyleDeclaration & string)[], + styles: ((keyof CSSStyleDeclaration & string) | string)[], ) => { const targetElement = computed(() => unrefElement(target)) diff --git a/src/utils/vue/effectDispose.ts b/src/utils/vue/effectDispose.ts index a5a0be33..ab88a6d4 100644 --- a/src/utils/vue/effectDispose.ts +++ b/src/utils/vue/effectDispose.ts @@ -19,7 +19,7 @@ import type { AnyFC } from '@/types/modules/utils' * * @remark 返回 true 表示获取到 effect 作用域并且卸载；false 表示未存在 effect 作用域 */ -export function effectDispose(fc: AnyFC) { +export function effectDispose(fc: T) { if (getCurrentScope()) { onScopeDispose(fc) diff --git a/src/utils/vue/watchEffectWithTarget.ts b/src/utils/vue/watchEffectWithTarget.ts index 5bcc43cf..e5cd89ae 100644 --- a/src/utils/vue/watchEffectWithTarget.ts +++ b/src/utils/vue/watchEffectWithTarget.ts @@ -22,8 +22,8 @@ import type { AnyFC } from '@/types/modules/utils' * 该方法使用 watchEffect 实现副作用函数的执行 * 并且能够在 effect 作用域卸载时，自动停止监听 */ -export function watchEffectWithTarget( - fc: AnyFC, +export function watchEffectWithTarget( + fc: T, watchOptions?: WatchOptionsBase, ) { const stop = watchEffect(fc, watchOptions)