From 36d646d8bae9d4258b19e37094b4469725a09b27 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Thu, 2 Nov 2023 17:51:12 +0800 Subject: [PATCH] v4.2.9 --- .vscode/settings.json | 13 ++- CHANGELOG.md | 24 ++++- package.json | 2 +- src/App.tsx | 2 +- src/{axios => }/api/demo/mock/person.ts | 0 src/{axios => }/api/demo/test.ts | 0 src/app-components/app/AppAvatar/index.tsx | 10 +- .../components/UnlockScreen/index.tsx | 14 ++- src/app-config/appConfig.ts | 4 +- src/app-config/regexConfig.ts | 2 +- src/axios/helper/RequestCanceler.ts | 4 +- src/axios/helper/interceptor.ts | 2 +- src/components/RChart/helper.ts | 4 +- src/components/RChart/index.tsx | 39 ++++--- src/components/RCollapseGrid/src/index.tsx | 10 +- src/components/RIcon/index.tsx | 54 +--------- src/components/RIcon/props.ts | 61 +++++++++++ src/components/RIframe/src/index.tsx | 5 +- src/components/RMoreDropdown/src/index.tsx | 12 +-- src/components/RQRCode/src/props.ts | 2 +- src/components/RTable/src/Table.tsx | 4 +- src/directives/index.ts | 13 ++- src/global-variable/README.md | 30 ++++++ src/global-variable/index.ts | 18 ++++ src/global-variable/variable.ts | 62 +++++++++++ src/hooks/variable/index.ts | 18 ---- src/hooks/variable/useGlobalVariable.ts | 41 ------- src/hooks/web/useDayjs.ts | 4 +- src/icons/empty.svg | 6 ++ src/layout/components/Menu/index.tsx | 15 +-- src/layout/components/MenuTag/index.scss | 2 +- src/layout/components/MenuTag/index.tsx | 67 ++++++------ .../{GlobalSeach => GlobalSearch}/index.scss | 43 +++++--- .../{GlobalSeach => GlobalSearch}/index.tsx | 100 +++++++++++------- src/layout/components/SiderBar/hook.ts | 6 +- src/layout/components/SiderBar/index.tsx | 14 +-- src/layout/default/ContentWrapper/index.tsx | 6 +- src/locales/helper.ts | 4 +- src/locales/lang/en-US/menu.json | 4 +- src/locales/lang/zh-CN/menu.json | 4 +- src/main.ts | 7 +- src/router/helper/routerCopilot.ts | 8 +- src/router/modules/demo/qrcode.ts | 2 +- src/router/modules/demo/svg-icons.ts | 2 +- src/spin/index.tsx | 4 +- src/store/README.md | 2 +- src/store/index.ts | 2 +- src/store/modules/menu/helper.ts | 2 +- src/store/modules/menu/index.ts | 8 +- src/store/modules/signin/type.ts | 16 --- .../modules/{signin => signing}/index.ts | 34 +++--- src/store/modules/signing/type.ts | 16 +++ src/styles/naive.scss | 7 +- src/types/modules/utils.ts | 88 ++++++++++----- src/utils/basic.ts | 79 +++++++++----- src/utils/element.ts | 2 +- src/utils/precision.ts | 2 +- src/utils/vue/renderNode.ts | 14 +-- src/views/dashboard/index.tsx | 1 + src/views/demo/axios/index.tsx | 2 +- src/views/demo/mock-demo/index.tsx | 4 +- src/views/login/components/Signin/index.tsx | 28 ++--- tsconfig.json | 4 +- vite-plugins/index.ts | 12 +-- vite-plugins/type.ts | 4 +- vite.pliugin.config.ts | 1 - 66 files changed, 644 insertions(+), 432 deletions(-) rename src/{axios => }/api/demo/mock/person.ts (100%) rename src/{axios => }/api/demo/test.ts (100%) create mode 100644 src/components/RIcon/props.ts create mode 100644 src/global-variable/README.md create mode 100644 src/global-variable/index.ts create mode 100644 src/global-variable/variable.ts delete mode 100644 src/hooks/variable/index.ts delete mode 100644 src/hooks/variable/useGlobalVariable.ts create mode 100644 src/icons/empty.svg rename src/layout/components/SiderBar/components/{GlobalSeach => GlobalSearch}/index.scss (68%) rename src/layout/components/SiderBar/components/{GlobalSeach => GlobalSearch}/index.tsx (79%) delete mode 100644 src/store/modules/signin/type.ts rename src/store/modules/{signin => signing}/index.ts (75%) create mode 100644 src/store/modules/signing/type.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 409e9964..133d1347 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -17,5 +17,16 @@ "@mock": "/mock" }, "alias-skip.allowedsuffix": ["ts", "tsx"], - "alias-skip.rootpath": "package.json" + "alias-skip.rootpath": "package.json", + "cSpell.words": [ + "Clickoutside", + "macarons", + "menutag", + "ndata", + "persistedstate", + "Popselect", + "siderbar", + "WUJIE", + "zlevel" + ] } diff --git a/CHANGELOG.md b/CHANGELOG.md index 766d5cf1..5ae9bfba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,27 @@ # CHANGE LOG +## 4.2.9 + +主要更新了命名问题。并且使用单词检查器，扫描整个项目替换了拼写错误的单词。 + +### Feats + +- setVariable 方法新增回调函数参数 +- 优化 getVariable ts 类型提示，并且使用 readonly 方法包裹 +- 重命名 globalVariableToRefs 为 getVariableToRefs，并且使用 readonly 方法包裹 +- renderNode 方法新增对于 Slot 类型参数支持 +- 新增 BasicTypes 类型 +- 提取 RIcon 组件 props 单独维护 +- 将 api 管理，提取到 `src` 下维护 +- getAppLocalMessages 获取路径方式由相对路径改为绝对路径 +- 将 hooks 包中的 variable 方法提取至 `src` 下管理，并且更改名称为 `global-variable` +- 调整 GlobalSearch 样式 + +### Fixes + +- 修复 downloadBase64File 下载后不能正常移除 `a` 标签问题 +- 修复 downloadAnyFile 存在的可能未加载完成而提前执行方法的问题 + ## 4.2.8 我好像犯了一个很愚蠢的错误，那就是使用 useFullscreen 方法的时候总是会弹出提示。所以紧急修复了这个很愚蠢的问题，并且移除了这个方法。 @@ -30,7 +52,7 @@ - RChart - 修复 animation false 状态渲染异常问题 - 修复响应式代理 echart instance 时，导致部分方法异常问题 - + ## 4.2.7 主要是做了一些统一命名的事情，以前由于写的比较放浪形骸现在正在慢慢更改这个大问题。 diff --git a/package.json b/package.json index 63e9da4c..87a3ec09 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": false, - "version": "4.2.8", + "version": "4.2.9", "type": "module", "engines": { "node": ">=16.0.0", diff --git a/src/App.tsx b/src/App.tsx index ee1b0962..0f93d8be 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,7 +16,7 @@ export default defineComponent({ {{ default: () => , - description: () => 'lodaing...', + description: () => 'loading...', }} diff --git a/src/axios/api/demo/mock/person.ts b/src/api/demo/mock/person.ts similarity index 100% rename from src/axios/api/demo/mock/person.ts rename to src/api/demo/mock/person.ts diff --git a/src/axios/api/demo/test.ts b/src/api/demo/test.ts similarity index 100% rename from src/axios/api/demo/test.ts rename to src/api/demo/test.ts diff --git a/src/app-components/app/AppAvatar/index.tsx b/src/app-components/app/AppAvatar/index.tsx index 4e561648..98e52a40 100644 --- a/src/app-components/app/AppAvatar/index.tsx +++ b/src/app-components/app/AppAvatar/index.tsx @@ -27,7 +27,7 @@ import { getStorage } from '@/utils/cache' import type { PropType } from 'vue' import type { AvatarProps, SpaceProps } from 'naive-ui' -import type { SigninCallback } from '@/store/modules/signin/type' +import type { SigningCallback } from '@/store/modules/signing/type' const AppAvatar = defineComponent({ name: 'AppAvatar', @@ -48,7 +48,7 @@ const AppAvatar = defineComponent({ }, }, setup(props) { - const signin = getStorage(APP_CATCH_KEY.signin) + const signing = getStorage(APP_CATCH_KEY.signing) const cssVars = computed(() => { const vars = { '--app-avatar-cursor': props.cursor, @@ -58,7 +58,7 @@ const AppAvatar = defineComponent({ }) return { - signin, + signing, cssVars, } }, @@ -74,12 +74,12 @@ const AppAvatar = defineComponent({ -
{this.signin?.name}
+
{this.signing?.name}
) }, diff --git a/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx index 1998d637..31cf66f0 100644 --- a/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx +++ b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx @@ -15,20 +15,20 @@ import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui' import AppAvatar from '@/app-components/app/AppAvatar/index' import dayjs from 'dayjs' -import { useSetting, useSignin } from '@/store' +import { useSetting, useSigning } from '@/store' import { rules, useCondition } from '@/app-components/app/AppLockScreen/hook' import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar' import { useDevice } from '@/hooks/web/index' import type { FormInst, InputInst } from 'naive-ui' -const UnlockScreen = defineComponent({ +export default defineComponent({ name: 'UnlockScreen', setup() { const formRef = ref(null) const inputInstRef = ref(null) - const { logout } = useSignin() + const { logout } = useSigning() const { changeSwitcher } = useSetting() const { setLockAppScreen } = useAppLockScreen() const { isTabletOrSmaller } = useDevice() @@ -55,7 +55,7 @@ const UnlockScreen = defineComponent({ }, 86_400_000) /** 退出登陆并且回到登陆页 */ - const backToSignin = () => { + const backToSigning = () => { window.$dialog.warning({ title: '警告', content: '是否返回到登陆页?', @@ -89,7 +89,7 @@ const UnlockScreen = defineComponent({ return { ...toRefs(state), - backToSignin, + backToSigning, unlockScreen, formRef, inputInstRef, @@ -138,7 +138,7 @@ const UnlockScreen = defineComponent({ 返回登陆 @@ -165,5 +165,3 @@ const UnlockScreen = defineComponent({ ) }, }) - -export default UnlockScreen diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts index 157d8506..4e6bd4f0 100644 --- a/src/app-config/appConfig.ts +++ b/src/app-config/appConfig.ts @@ -99,12 +99,12 @@ export const APP_MENU_CONFIG: Readonly = { * 仅暴露部分系统获取缓存配置, 其余 key 暂不开放 * * 说明: - * - signin: 登陆信息缓存 key + * - signing: 登陆信息缓存 key * - localeLanguage: 国际化默认缓存 key * - token: token key */ export const APP_CATCH_KEY = { - signin: 'signin', + signing: 'signing', localeLanguage: 'localeLanguage', token: 'token', } as const diff --git a/src/app-config/regexConfig.ts b/src/app-config/regexConfig.ts index 1c0c5b06..60bd9986 100644 --- a/src/app-config/regexConfig.ts +++ b/src/app-config/regexConfig.ts @@ -17,6 +17,6 @@ export const APP_REGEX: Record = { /** css 尺寸单位匹配 */ - validerCSSUnit: + validCSSUnit: /^\d+(\.\d+)?(px|em|rem|%|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ch|ex|q|s|ms|deg|rad|turn|grad|hz|khz|dpi|dpcm|dppx|fr|auto)$/, } diff --git a/src/axios/helper/RequestCanceler.ts b/src/axios/helper/RequestCanceler.ts index 6555f4ce..f35c642c 100644 --- a/src/axios/helper/RequestCanceler.ts +++ b/src/axios/helper/RequestCanceler.ts @@ -26,7 +26,7 @@ export default class RequestCanceler { } /** 是否需要加入取消请求表中 */ - private isApending(config: AppRawRequestConfig) { + private isAppending(config: AppRawRequestConfig) { return config.cancelConfig?.needCancel ?? true } @@ -55,7 +55,7 @@ export default class RequestCanceler { * @remark 给请求体添加 signal 属性, 用于取消请求 */ addPendingRequest(config: AppRawRequestConfig) { - if (this.isApending(config)) { + if (this.isAppending(config)) { const requestKey = this.generateRequestKey(config) if (!this.pendingRequest.has(requestKey)) { diff --git a/src/axios/helper/interceptor.ts b/src/axios/helper/interceptor.ts index 897059cd..4630c527 100644 --- a/src/axios/helper/interceptor.ts +++ b/src/axios/helper/interceptor.ts @@ -44,7 +44,7 @@ const axiosFetchError: AxiosFetchError = { requestError: null, responseError: null, } -/** 请求队列(区分 reslove 与 reject 状态) */ +/** 请求队列(区分 resolve 与 reject 状态) */ const implement: ImplementQueue = { implementRequestInterceptorArray: [], implementResponseInterceptorArray: [], diff --git a/src/components/RChart/helper.ts b/src/components/RChart/helper.ts index afc6437e..4f4ee0ea 100644 --- a/src/components/RChart/helper.ts +++ b/src/components/RChart/helper.ts @@ -34,10 +34,10 @@ export const setupChartTheme = () => { import.meta.glob('@/echart-themes/**/*.json', { eager: true, }) - const regx = /\/([^/]+)\.json$/ + const regex = /\/([^/]+)\.json$/ const rawThemes = Object.keys(themeRawModules).reduce((pre, curr) => { - const name = curr.match(regx)?.[1] + const name = curr.match(regex)?.[1] if (name) { pre.push({ diff --git a/src/components/RChart/index.tsx b/src/components/RChart/index.tsx index 83e07f0f..527e8398 100644 --- a/src/components/RChart/index.tsx +++ b/src/components/RChart/index.tsx @@ -56,7 +56,6 @@ import type { AnyFC } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' import type { UseResizeObserverReturn } from '@vueuse/core' import type { ECharts, EChartsCoreOption } from 'echarts/core' -import type { RenderVNodeType } from '@use-utils/vue/renderNode' import type { DropdownProps, DropdownOption } from 'naive-ui' const defaultChartOptions = { @@ -77,7 +76,7 @@ export default defineComponent({ const rayChartWrapperRef = ref() const echartInstanceRef = ref() // echart 实例 let resizeThrottleReturn: DebouncedFunc | null // resize 防抖方法实例 - let resizeOvserverReturn: UseResizeObserverReturn | null + let resizeObserverReturn: UseResizeObserverReturn | null const { echartTheme } = APP_THEME let watchCallback: WatchStopHandle | null let echartInst: ECharts | null // 无代理响应式代理缓存 echart inst @@ -85,19 +84,16 @@ export default defineComponent({ { label: '下载图片', key: 'downloadChart', - disabled: + disabled: !( echartInstanceRef.value && echartInstanceRef.value.getDom() - ? false - : true, + ), }, ]) const cssVarsRef = computed(() => { - const cssVars = { + return { '--ray-chart-width': completeSize(props.width), '--ray-chart-height': completeSize(props.height), } - - return cssVars }) /** @@ -257,14 +253,16 @@ export default defineComponent({ } } + const isDispose = () => !!(echartInst && echartInst.getDom()) + /** * * 销毁 `chart` 实例, 释放资源 */ const destroyChart = () => { - if (echartInst && echartInst.getDom()) { - echartInst.clear() - echartInst.dispose() + if (isDispose()) { + echartInst!.clear() + echartInst!.dispose() echartInstanceRef.value = void 0 } } @@ -277,11 +275,11 @@ export default defineComponent({ } const dropdownSelect = (key: string | number, option: DropdownOption) => { - if (key === 'downloadChart' && echartInst && echartInst.getDom()) { + if (key === 'downloadChart' && isDispose()) { const { filename, ...args } = props.downloadOptions downloadBase64File( - echartInst.getDataURL(args), + echartInst!.getDataURL(args), filename ?? `${new Date().getTime()}`, ) } @@ -310,7 +308,7 @@ export default defineComponent({ resizeThrottleReturn = throttle(resizeChart, props.throttleWait) /** 监听内容区域尺寸变化更新 chart */ - resizeOvserverReturn = useResizeObserver( + resizeObserverReturn = useResizeObserver( props.observer || rayChartWrapperRef, resizeThrottleReturn, ) @@ -323,7 +321,7 @@ export default defineComponent({ /** 注销防抖 */ resizeThrottleReturn?.cancel() /** 注销 observer 监听 */ - resizeOvserverReturn?.stop?.() + resizeObserverReturn?.stop?.() } /** 监听全局主题变化, 然后重新渲染对应主题 echarts */ @@ -362,9 +360,9 @@ export default defineComponent({ if (props.watchOptions) { watchCallback = watch( () => props.options, - (noptions) => { + (ndata) => { /** 重新组合 options */ - const options = combineChartOptions(noptions) + const options = combineChartOptions(ndata) const setOpt = Object.assign( props.setChartOptions, defaultChartOptions, @@ -432,13 +430,13 @@ export default defineComponent({ bordered={bordered} > {{ - default: () => ( -
+ default: renderNode( +
, ), header: renderNode(title, { defaultElement:
, }), - 'header-extra': renderNode(cardExtra as RenderVNodeType, { + 'header-extra': renderNode(cardExtra, { defaultElement: ( ), }), diff --git a/src/components/RCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx index cc0ffb66..f0d49819 100644 --- a/src/components/RCollapseGrid/src/index.tsx +++ b/src/components/RCollapseGrid/src/index.tsx @@ -27,13 +27,13 @@ import RIcon from '@/components/RIcon' import { call } from '@/utils/vue/index' import props from './props' -const RCollapseGrid = defineComponent({ +export default defineComponent({ name: 'RCollapseGrid', props, setup(props) { const modelCollapsed = ref(!props.open) - const handleCollapse = () => { + const collapseClick = () => { modelCollapsed.value = !modelCollapsed.value const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props @@ -48,7 +48,7 @@ const RCollapseGrid = defineComponent({ } const CollapseIcon = () => ( -
+
{modelCollapsed.value ? props.collapseToggleText[0] @@ -66,7 +66,7 @@ const RCollapseGrid = defineComponent({ return { modelCollapsed, - handleCollapse, + collapseClick, CollapseIcon, } }, @@ -97,5 +97,3 @@ const RCollapseGrid = defineComponent({ ) }, }) - -export default RCollapseGrid diff --git a/src/components/RIcon/index.tsx b/src/components/RIcon/index.tsx index 7c46694b..2695052b 100644 --- a/src/components/RIcon/index.tsx +++ b/src/components/RIcon/index.tsx @@ -13,57 +13,11 @@ import './index.scss' import { call } from '@/utils/vue/index' import { completeSize } from '@/utils/element' +import props from './props' -import type { PropType } from 'vue' -import type { MaybeArray } from '@/types/modules/utils' - -const RIcon = defineComponent({ +export default defineComponent({ name: 'RIcon', - props: { - color: { - type: String, - default: 'currentColor', - }, - prefix: { - type: String, - default: 'icon', - }, - name: { - type: String, - required: true, - }, - size: { - type: [Number, String], - default: 14, - }, - width: { - type: [Number, String], - default: 0, - }, - height: { - type: [Number, String], - default: 0, - }, - customClassName: { - /** 自定义 class name */ - type: String, - default: null, - }, - depth: { - /** 图标深度 */ - type: Number, - default: 1, - }, - cursor: { - /** 鼠标指针样式 */ - type: String, - default: 'default', - }, - onClick: { - type: [Function, Array] as PropType void>>, - default: null, - }, - }, + props, setup(props) { const symbolId = computed(() => `#${props.prefix}-${props.name}`) const cssVars = computed(() => { @@ -111,5 +65,3 @@ const RIcon = defineComponent({ ) }, }) - -export default RIcon diff --git a/src/components/RIcon/props.ts b/src/components/RIcon/props.ts new file mode 100644 index 00000000..bce58a2e --- /dev/null +++ b/src/components/RIcon/props.ts @@ -0,0 +1,61 @@ +/** + * + * @author Ray + * + * @date 2023-10-27 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { PropType } from 'vue' +import type { MaybeArray } from '@/types/modules/utils' + +const props = { + color: { + type: String, + default: 'currentColor', + }, + prefix: { + type: String, + default: 'icon', + }, + name: { + type: String, + required: true, + }, + size: { + type: [Number, String], + default: 14, + }, + width: { + type: [Number, String], + default: 0, + }, + height: { + type: [Number, String], + default: 0, + }, + customClassName: { + /** 自定义 class name */ + type: String, + default: null, + }, + depth: { + /** 图标深度 */ + type: Number, + default: 1, + }, + cursor: { + /** 鼠标指针样式 */ + type: String, + default: 'default', + }, + onClick: { + type: [Function, Array] as PropType void>>, + default: null, + }, +} + +export default props diff --git a/src/components/RIframe/src/index.tsx b/src/components/RIframe/src/index.tsx index 2c9a8f65..8f527861 100644 --- a/src/components/RIframe/src/index.tsx +++ b/src/components/RIframe/src/index.tsx @@ -17,7 +17,7 @@ import { completeSize, on, off } from '@use-utils/element' import { call } from '@/utils/vue/index' import props from './props' -const RIframe = defineComponent({ +export default defineComponent({ name: 'RIframe', props, setup(props, { expose }) { @@ -61,7 +61,6 @@ const RIframe = defineComponent({ on(iframeRef.value, 'load', iframeLoadSuccess.bind(this)) on(iframeRef.value, 'error', iframeLoadError) }) - onBeforeUnmount(() => { off(iframeRef.value, 'load', iframeLoadSuccess) off(iframeRef.value, 'error', iframeLoadError) @@ -101,5 +100,3 @@ const RIframe = defineComponent({ ) }, }) - -export default RIframe diff --git a/src/components/RMoreDropdown/src/index.tsx b/src/components/RMoreDropdown/src/index.tsx index 57ca242b..444a8b9c 100644 --- a/src/components/RMoreDropdown/src/index.tsx +++ b/src/components/RMoreDropdown/src/index.tsx @@ -13,20 +13,20 @@ import { NDropdown } from 'naive-ui' import RIcon from '@/components/RIcon/index' import props from './props' +import { renderNode } from '@use-utils/vue/index' export default defineComponent({ name: 'RMoreDropdown', props, render() { const { iconSize, cursor } = this + const { default: $default } = this.$slots return ( - - {this.$slots.default ? ( - this.$slots.default() - ) : ( - - )} + + {renderNode($default, { + defaultElement: , + })} ) }, diff --git a/src/components/RQRCode/src/props.ts b/src/components/RQRCode/src/props.ts index 7fc97324..2bf05073 100644 --- a/src/components/RQRCode/src/props.ts +++ b/src/components/RQRCode/src/props.ts @@ -27,7 +27,7 @@ const props = { watchText: { /** * - * Atuo watch QR code text + * Auto watch QR code text * If update text, then re-render QR code * * @default true diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index 3f5523f9..6d619ab2 100644 --- a/src/components/RTable/src/Table.tsx +++ b/src/components/RTable/src/Table.tsx @@ -13,7 +13,7 @@ import './index.scss' import { NCard, NDataTable, NDropdown, NSpace } from 'naive-ui' import Size from './components/Size' -import Screenfull from './components/Fullscreen' +import Fullscreen from './components/Fullscreen' import C from './components/C' import Print from './components/Print' @@ -118,7 +118,7 @@ export default defineComponent({ <> - + ) diff --git a/src/directives/index.ts b/src/directives/index.ts index e419739f..0d7580d4 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -37,12 +37,17 @@ export const setupDirectives = (app: App) => { const regexDirectiveName = /^([^-]+-)*[^-]+$/ forIn(directivesModules, (value, key) => { - const dname = key.match(regexExtractDirectiveName)?.[0] + const directiveBindName = key.match(regexExtractDirectiveName)?.[0] - if (typeof dname === 'string' && regexDirectiveName.test(dname)) { - app.directive(dname, value()) + if ( + typeof directiveBindName === 'string' && + regexDirectiveName.test(directiveBindName) + ) { + app.directive(directiveBindName, value()) } else { - console.error(`[setupDirectives] ${dname} is not a valid directive name`) + console.error( + `[setupDirectives] ${directiveBindName} is not a valid directive name`, + ) } }) } diff --git a/src/global-variable/README.md b/src/global-variable/README.md new file mode 100644 index 00000000..6c18809a --- /dev/null +++ b/src/global-variable/README.md @@ -0,0 +1,30 @@ +## global-variable + +简单的管理全局响应式变量，但是不支持缓存。 + +创建该模块是因为在有时候不需要 `pinia` 这么复杂流程的全局变量。所以该模块管理的都是一些简单的全局变量，并且不支持缓存。 + +## 添加全局变量 + +1. 首先在 `variableState` 变量中添加对应变量 +2. 调用对应方法获取、更新变量 + +```ts +// 添加变量 +const variableState = reactive({ + globalSpinning: false, + globalDrawerValue: false, + yourGlobalValue: 'demo value', +}) + +// 更新变量 +setVariable(key, value) + +// 获取非响应式变量 +const yourGlobalValue = getVariable('yourGlobalValue') // Readonly + +// 获取响应式变量 +const yourGlobalValue = getVariableToRefs('yourGlobalValue') // Readonly> +``` + +> 注意，避免滥用该模块。可能会导致管理不当引起内存泄漏。 diff --git a/src/global-variable/index.ts b/src/global-variable/index.ts new file mode 100644 index 00000000..44df445d --- /dev/null +++ b/src/global-variable/index.ts @@ -0,0 +1,18 @@ +/** + * + * @author Ray + * + * @date 2023-09-11 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { setVariable, getVariable, getVariableToRefs } from './variable' + +import type { VariableState, VariableStateKey } from './variable' + +export { setVariable, getVariable, getVariableToRefs } + +export type { VariableState, VariableStateKey } diff --git a/src/global-variable/variable.ts b/src/global-variable/variable.ts new file mode 100644 index 00000000..35ce02c6 --- /dev/null +++ b/src/global-variable/variable.ts @@ -0,0 +1,62 @@ +/** + * + * @author Ray + * + * @date 2023-09-11 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 存放全局临时变量，脱离 pinia 使用的变量 + * 简单的全局变量，并不需要复杂的控制流程 + * + * 使用方法 + * @example + * + * 获取普通变量 + * getVariable('target key', 'default value') + * + * 获取响应式变量 + * getVariableToRefs('target key') + * + * 更改 state 变量 + * setVariable('key', 'value') + */ + +import type { AnyFC } from '@/types/modules/utils' + +const variableState = reactive({ + globalSpinning: false, + globalDrawerValue: false, +}) + +export type VariableState = typeof variableState + +export type VariableStateKey = keyof VariableState + +export function setVariable( + key: T, + value: VariableState[T], + cb?: AnyFC, +) { + variableState[key] = value + + cb?.() +} + +export function getVariable( + key: VariableStateKey, + defaultValue?: VariableState[T], +) { + const v = variableState[key] + + return v ? readonly(variableState)[key] : defaultValue +} + +export function getVariableToRefs(key: K) { + return readonly(toRef(variableState, key)) +} diff --git a/src/hooks/variable/index.ts b/src/hooks/variable/index.ts deleted file mode 100644 index 191dd170..00000000 --- a/src/hooks/variable/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-09-11 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import { - setVariable, - getVariable, - globalVariableToRefs, -} from './useGlobalVariable' - -export { setVariable, getVariable, globalVariableToRefs } diff --git a/src/hooks/variable/useGlobalVariable.ts b/src/hooks/variable/useGlobalVariable.ts deleted file mode 100644 index 9bf20e75..00000000 --- a/src/hooks/variable/useGlobalVariable.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-09-11 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -/** - * - * 存放全局临时变量，脱离 pinia 使用的变量 - * 简单的全局变量，并不需要复杂的控制流程 - * - * 但不建议滥用 - */ - -/** 全局响应式变量 */ -const variableState = reactive({ - globalSpinning: false, - globalDrawerValue: false, -}) - -type VariableStateKey = keyof typeof variableState - -export function setVariable( - key: VariableStateKey, - value: (typeof variableState)[VariableStateKey], -) { - variableState[key] = value -} - -export function getVariable(key: VariableStateKey) { - return variableState[key] as (typeof variableState)[VariableStateKey] -} - -export function globalVariableToRefs(key: K) { - return readonly(toRef(variableState, key)) -} diff --git a/src/hooks/web/useDayjs.ts b/src/hooks/web/useDayjs.ts index e014c776..d719a3da 100644 --- a/src/hooks/web/useDayjs.ts +++ b/src/hooks/web/useDayjs.ts @@ -23,9 +23,9 @@ import type { DayjsLocal } from '@/dayjs/type' */ export const useDayjs = () => { const locale = (key: DayjsLocal) => { - const mapkey = DAYJS_LOCAL_MAP[key] + const locale = DAYJS_LOCAL_MAP[key] - mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL) + locale ? dayjs.locale(locale) : dayjs.locale(DEFAULT_DAYJS_LOCAL) } return { diff --git a/src/icons/empty.svg b/src/icons/empty.svg new file mode 100644 index 00000000..54db9edc --- /dev/null +++ b/src/icons/empty.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/layout/components/Menu/index.tsx b/src/layout/components/Menu/index.tsx index e5a62906..ed25c9d6 100644 --- a/src/layout/components/Menu/index.tsx +++ b/src/layout/components/Menu/index.tsx @@ -17,7 +17,7 @@ import SiderBarLogo from './components/SiderBarLogo/index' import { useMenu } from '@/store' import { APP_MENU_CONFIG } from '@/app-config/appConfig' import { useDevice } from '@/hooks/web/index' -import { globalVariableToRefs, setVariable } from '@/hooks/variable/index' +import { getVariableToRefs, setVariable } from '@/global-variable/index' import type { MenuInst } from 'naive-ui' import type { NaiveMenuOptions } from '@/types/modules/component' @@ -49,7 +49,7 @@ export default defineComponent({ const modelCollapsed = computed(() => menuStore.collapsed) const { isTabletOrSmaller } = useDevice() const modelGlobalDrawerValue = computed({ - get: () => globalVariableToRefs('globalDrawerValue').value, + get: () => getVariableToRefs('globalDrawerValue').value, set: (val) => { setVariable('globalDrawerValue', val) }, @@ -63,7 +63,7 @@ export default defineComponent({ }) } - const BaseicMenu = () => ( + const BasicMenu = () => ( + ) : ( - + ) }, diff --git a/src/layout/components/MenuTag/index.scss b/src/layout/components/MenuTag/index.scss index f74e1a8a..1d7db2cc 100644 --- a/src/layout/components/MenuTag/index.scss +++ b/src/layout/components/MenuTag/index.scss @@ -8,7 +8,7 @@ $menuTagWrapperWidth: 76px; align-items: center; padding: 4px 0; - & .menu-tag-sapce { + & .menu-tag-space { width: calc(100% - $space * 2); padding: $space; diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 90deb2d2..71c3172c 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/src/layout/components/MenuTag/index.tsx @@ -35,6 +35,7 @@ import { hasClass } from '@/utils/element' import { redirectRouterToDashboard } from '@/router/helper/routerCopilot' import { ROOT_ROUTE } from '@/app-config/appConfig' import { queryElements } from '@use-utils/element' +import { renderNode } from '@/utils/vue/index' import type { MenuOption, ScrollbarInst } from 'naive-ui' import type { MenuTagOptions, AppMenuOption } from '@/types/modules/app' @@ -58,7 +59,10 @@ export default defineComponent({ const { path } = ROOT_ROUTE const exclude = ['closeAll', 'closeRight', 'closeLeft', 'closeOther'] - let currentContentmenuIndex = -1 // 当前右键标签页索引位置 + let currentContextmenuIndex = -1 // 当前右键标签页索引位置 + const iconConfig = { + size: 16, + } const modelMenuTagOptions = computed(() => menuTagOptions.value.map((curr, _idx, currentArray) => { if (curr.key === menuKey.value && curr.key !== path) { @@ -86,7 +90,7 @@ export default defineComponent({ h( RIcon, { - size: 16, + size: iconConfig.size, name: 'reload', }, {}, @@ -99,7 +103,7 @@ export default defineComponent({ h( RIcon, { - size: 16, + size: iconConfig.size, name: 'other', }, {}, @@ -112,7 +116,7 @@ export default defineComponent({ h( RIcon, { - size: 16, + size: iconConfig.size, name: 'right_arrow', }, {}, @@ -125,7 +129,7 @@ export default defineComponent({ h( RIcon, { - size: 16, + size: iconConfig.size, name: 'left_arrow', }, {}, @@ -142,7 +146,7 @@ export default defineComponent({ h( RIcon, { - size: 16, + size: iconConfig.size, name: 'close', }, {}, @@ -176,16 +180,16 @@ export default defineComponent({ * 如果当前选择标签与 menuKey 不匹配, 则会关闭当前标签右侧所有变迁并且跳转至该页面 */ const length = moreOptions.value.length - const routeItem = modelMenuTagOptions.value[currentContentmenuIndex] + const routeItem = modelMenuTagOptions.value[currentContextmenuIndex] - spliceMenTagOptions(currentContentmenuIndex + 1, length - 1) + spliceMenTagOptions(currentContextmenuIndex + 1, length - 1) if (menuKey.value !== routeItem.key) { changeMenuModelValue(routeItem.key, routeItem) } }, closeLeft: () => { - spliceMenTagOptions(0, currentContentmenuIndex) + spliceMenTagOptions(0, currentContextmenuIndex) }, closeOther: () => { /** @@ -194,7 +198,7 @@ export default defineComponent({ * * 如果关闭标签与当前 menuKey 不匹配, 则会关闭当前选择标签页以外的所有标签页并且跳转至该页面 */ - const routeItem = modelMenuTagOptions.value[currentContentmenuIndex] + const routeItem = modelMenuTagOptions.value[currentContextmenuIndex] if (menuKey.value !== routeItem.key) { emptyMenuTagOptions() @@ -306,7 +310,7 @@ export default defineComponent({ e.preventDefault() actionState.actionDropdownShow = false - currentContentmenuIndex = idx + currentContextmenuIndex = idx nextTick().then(() => { actionState.actionDropdownShow = true @@ -318,31 +322,31 @@ export default defineComponent({ const setDisabledAccordionToIndex = () => { const length = modelMenuTagOptions.value.length - 1 - if (currentContentmenuIndex === length) { + if (currentContextmenuIndex === length) { setMoreOptionsDisabled('closeRight', true) - } else if (currentContentmenuIndex < length) { + } else if (currentContextmenuIndex < length) { setMoreOptionsDisabled('closeRight', false) } - if (currentContentmenuIndex === 0) { + if (currentContextmenuIndex === 0) { setMoreOptionsDisabled('closeLeft', true) - } else if (currentContentmenuIndex > 0) { + } else if (currentContextmenuIndex > 0) { setMoreOptionsDisabled('closeLeft', false) } } /** * - * 如果通过更多按钮触发关闭事件, 则根据当前标签所在索引值为 currentContentmenuIndex + * 如果通过更多按钮触发关闭事件, 则根据当前标签所在索引值为 currentContextmenuIndex * * 并且动态设置是否可操作状态 */ - const setCurrentContentmenuIndex = () => { + const setCurrentContextmenuIndex = () => { const index = modelMenuTagOptions.value.findIndex( (curr) => curr.key === menuKey.value, ) - currentContentmenuIndex = index + currentContextmenuIndex = index setDisabledAccordionToIndex() } @@ -445,13 +449,18 @@ export default defineComponent({ rootPath: path, actionState, handleContextMenu, - setCurrentContentmenuIndex, + setCurrentContextmenuIndex, menuTagMouseenter, menuTagMouseleave, MENU_TAG_DATA, } }, render() { + const iconConfig = { + width: 20, + height: 28, + } + return (
@@ -468,7 +477,7 @@ export default defineComponent({ onSelect={this.actionDropdownSelect.bind(this)} /> @@ -511,9 +520,7 @@ export default defineComponent({ [this.MENU_TAG_DATA]: curr.path, }} > - {typeof curr.label === 'string' - ? curr.label - : curr.label?.()} + {renderNode(curr.label)} ))} @@ -521,8 +528,8 @@ export default defineComponent({
@@ -534,10 +541,10 @@ export default defineComponent({ >
diff --git a/src/layout/components/SiderBar/components/GlobalSeach/index.scss b/src/layout/components/SiderBar/components/GlobalSearch/index.scss similarity index 68% rename from src/layout/components/SiderBar/components/GlobalSeach/index.scss rename to src/layout/components/SiderBar/components/GlobalSearch/index.scss index 95592308..349cbdbd 100644 --- a/src/layout/components/SiderBar/components/GlobalSeach/index.scss +++ b/src/layout/components/SiderBar/components/GlobalSearch/index.scss @@ -1,16 +1,16 @@ $globalSearchWidth: 650px; -.global-seach { +.global-search { position: fixed; width: $globalSearchWidth; left: 50%; margin-left: calc(0px - $globalSearchWidth / 2); top: 60px; - & .global-seach__wrapper { + & .global-search__wrapper { box-sizing: border-box; - & .global-seach__card { + & .global-search__card { width: $globalSearchWidth; border-radius: 6px; padding: 12px; @@ -19,13 +19,28 @@ $globalSearchWidth: 650px; color: var(--ray-theme-primary-color); } - & .global-seach__card-header { + & .global-search__card-header { margin-bottom: 12px; } - & .global-seach__card-content { + & .global-search__card-content { height: auto; max-height: calc(100% - 98px); + padding: 8px 0; + + & .global-search__empty { + margin: 24px; + } + + & .global-search__empty-content { + font-size: 18px; + color: #969faf; + font-weight: 600; + + & .ray-icon { + color: #969faf; + } + } & .content-item { padding: 12px; @@ -39,7 +54,7 @@ $globalSearchWidth: 650px; } } - & .global-seach__card-footer { + & .global-search__card-footer { width: 100%; & .card-footer__tip-wrapper { @@ -67,12 +82,12 @@ $globalSearchWidth: 650px; } } -.global-seach--dark { - @include useAppTheme("dark") { - & .global-seach__card { +.global-search--dark { + @include useAppTheme('dark') { + & .global-search__card { background-color: #242424; - & .global-seach__card-content .content-item { + & .global-search__card-content .content-item { background-color: #2f2f2f; &.content-item--active, @@ -84,12 +99,12 @@ $globalSearchWidth: 650px; } } -.global-seach--light { - @include useAppTheme("light") { - & .global-seach__card { +.global-search--light { + @include useAppTheme('light') { + & .global-search__card { background-color: #f9f9f9; - & .global-seach__card-content .content-item { + & .global-search__card-content .content-item { background-color: #ffffff; &.content-item--active, diff --git a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx b/src/layout/components/SiderBar/components/GlobalSearch/index.tsx similarity index 79% rename from src/layout/components/SiderBar/components/GlobalSeach/index.tsx rename to src/layout/components/SiderBar/components/GlobalSearch/index.tsx index c51d8a83..ee03c11e 100644 --- a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx +++ b/src/layout/components/SiderBar/components/GlobalSearch/index.tsx @@ -11,7 +11,15 @@ import './index.scss' -import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui' +import { + NInput, + NModal, + NResult, + NScrollbar, + NSpace, + NDivider, + NButton, +} from 'naive-ui' import RIcon from '@/components/RIcon/index' import { on, off, queryElements, addClass, removeClass } from '@/utils/element' @@ -24,7 +32,7 @@ import type { AppRouteMeta } from '@/router/type' import type { AppMenuOption } from '@/types/modules/app' export default defineComponent({ - name: 'GlobalSeach', + name: 'GlobalSearch', props: { show: { type: Boolean, @@ -51,7 +59,7 @@ export default defineComponent({ searchValue: null, searchOptions: [] as AppMenuOption[], }) - const tiptextOptions = [ + const helperTipOptions = [ { icon: 'cmd / ctrl + k', label: '唤起', @@ -131,7 +139,7 @@ export default defineComponent({ } nextTick().then(() => { - autoFouceSearchItem() + autoFocusingSearchItem() }) } @@ -151,7 +159,7 @@ export default defineComponent({ } /** 自动聚焦检索项 */ - const autoFouceSearchItem = () => { + const autoFocusingSearchItem = () => { const currentOption = state.searchOptions[searchElementIndex] const preOption = state.searchOptions[preSearchElementIndex] @@ -239,9 +247,24 @@ export default defineComponent({ break } - autoFouceSearchItem() + autoFocusingSearchItem() } + const SearchItem = ({ menuOption }: { menuOption: AppMenuOption }) => ( + +
{RenderPreIcon(menuOption.meta)}
+
{menuOption.breadcrumbLabel}
+ + ) + watchEffect(() => { if (isTabletOrSmaller.value) { modelShow.value = false @@ -264,24 +287,30 @@ export default defineComponent({ return { ...toRefs(state), modelShow, - tiptextOptions, + helperTipOptions, handleSearchMenuOptions: debounce(handleSearchMenuOptions, 300), handleSearchItemClick, RenderPreIcon, isTabletOrSmaller, + SearchItem, } }, render() { - const { isTabletOrSmaller } = this + const { isTabletOrSmaller, searchOptions } = this + const { SearchItem } = this return isTabletOrSmaller ? ( -
+
) : ( - -
-
-
-
+ +
+
+
+
- - {this.searchOptions.length ? ( + + {searchOptions.length ? ( - {this.searchOptions.map((curr) => ( - -
- {this.RenderPreIcon(curr.meta)} -
-
- {curr.breadcrumbLabel} -
- + {searchOptions.map((curr) => ( + ))} ) : ( - + {{ - icon: () => '', + icon: () => null, + default: () => ( + + + 暂无搜索结果 + + ), }} )} -
+
- {this.tiptextOptions.map((curr) => ( + {this.helperTipOptions.map((curr) => (
{curr.plain ? ( @@ -339,7 +363,7 @@ export default defineComponent({ )}
-
{curr.label}
+
{curr.label}
))} diff --git a/src/layout/components/SiderBar/hook.ts b/src/layout/components/SiderBar/hook.ts index 4adfc155..3a1aeb60 100644 --- a/src/layout/components/SiderBar/hook.ts +++ b/src/layout/components/SiderBar/hook.ts @@ -1,4 +1,4 @@ -import { useSetting, useSignin } from '@/store' +import { useSetting, useSigning } from '@/store' import { useI18n } from '@/hooks/web/index' import type { IconOptionsFC, IconOptions } from './type' @@ -24,8 +24,8 @@ export const createAvatarOptions = () => [ const avatarDropdownActionMap = { logout: () => { - const signinStore = useSignin() - const { logout } = signinStore + const signingStore = useSigning() + const { logout } = signingStore window.$dialog.warning({ title: '提示', diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 6a240152..dd2f6ada 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -21,10 +21,10 @@ import './index.scss' import { NLayoutHeader, NSpace, NDropdown } from 'naive-ui' import RIcon from '@/components/RIcon/index' -import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index' +import TooltipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index' import SettingDrawer from './components/SettingDrawer/index' import Breadcrumb from './components/Breadcrumb/index' -import GlobalSeach from './components/GlobalSeach/index' +import GlobalSearch from './components/GlobalSearch/index' import AppAvatar from '@/app-components/app/AppAvatar/index' import { useSetting } from '@/store' @@ -36,7 +36,7 @@ import { createRightIconOptions, } from './hook' import { useDevice } from '@/hooks/web/index' -import { globalVariableToRefs, setVariable } from '@/hooks/variable/index' +import { getVariableToRefs, setVariable } from '@/global-variable/index' import { useFullscreen } from 'vue-hooks-plus' import { useI18n } from '@/hooks/web/index' @@ -61,7 +61,7 @@ export default defineComponent({ } const globalSearchShown = ref(false) const { isTabletOrSmaller } = useDevice() - const globalDrawerValue = globalVariableToRefs('globalDrawerValue') + const globalDrawerValue = getVariableToRefs('globalDrawerValue') /** * @@ -135,7 +135,7 @@ export default defineComponent({ render() { return ( - + {this.leftIconOptions.map((curr) => ( - {this.rightTooltipIconOptions.map((curr) => ( - {this.reloadRouteSwitch ? ( diff --git a/src/locales/helper.ts b/src/locales/helper.ts index 4f0c2a3b..0c19ea42 100644 --- a/src/locales/helper.ts +++ b/src/locales/helper.ts @@ -76,7 +76,7 @@ export const getAppLocalMessages = async ( const message = {} as AppCurrentAppMessages for (const curr of localOptions) { - const msg: AppLocalesModules = await import(`./lang/${curr.key}.ts`) + const msg: AppLocalesModules = await import(`@/locales/lang/${curr.key}.ts`) const key = curr.key if (key) { @@ -123,7 +123,7 @@ export const naiveLocales = (key: string) => { * * @returns 获取当前环境默认语言 * - * @remak 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题 + * @remark 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题 */ export const getAppDefaultLanguage = () => { const language = getStorage( diff --git a/src/locales/lang/en-US/menu.json b/src/locales/lang/en-US/menu.json index 83debfa9..7cbb596a 100644 --- a/src/locales/lang/en-US/menu.json +++ b/src/locales/lang/en-US/menu.json @@ -18,5 +18,7 @@ "CalculatePrecision": "Precision", "Directive": "Directive", "RouterDemo": "Same Level Router Demo", - "Mock": "Mock" + "Mock": "Mock", + "QRCode": "QRCode", + "SvgIcon": "SVG Icon" } diff --git a/src/locales/lang/zh-CN/menu.json b/src/locales/lang/zh-CN/menu.json index 2730c69e..a83a914b 100644 --- a/src/locales/lang/zh-CN/menu.json +++ b/src/locales/lang/zh-CN/menu.json @@ -18,5 +18,7 @@ "CalculatePrecision": "数字精度", "Directive": "指令", "RouterDemo": "页面详情模式", - "Mock": "mock 数据" + "Mock": "mock 数据", + "QRCode": "二维码", + "SvgIcon": "SVG图标" } diff --git a/src/main.ts b/src/main.ts index 9674de27..01f5090a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,7 +2,7 @@ import App from './App' import '@/styles/base.scss' -import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本 +import 'virtual:svg-icons-register' // vite-plugin-svg-icons 脚本，启用 svg 雪碧图 import { setupRouter } from './router/index' import { setupStore } from './store/index' @@ -40,8 +40,8 @@ const setupTemplate = async () => { /** * - * 作为 `wujie-micro` 子应用注册应用方法 - * 注意: 此处的 `instance` 名称不可以写为 `app` + * 作为 wujie-micro 子应用注册应用方法 + * 并且挂载一个 __WUJIE_MOUNT 实例 */ const setupWujieTemplate = async () => { let instance: AppType @@ -62,7 +62,6 @@ const setupWujieTemplate = async () => { /** * - * 如果此处需要作为微服务主应用使用, 则只需要执行 `setupTemplate` 方法即可 * 如果项目启用无界微服务, 会自动识别并且启动以无界微服务方法启动该项目 * * @example diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts index fe540422..4272e716 100644 --- a/src/router/helper/routerCopilot.ts +++ b/src/router/helper/routerCopilot.ts @@ -11,7 +11,7 @@ import { permissionRouter } from './permission' import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig' -import { useSignin } from '@/store' +import { useSigning } from '@/store' import { useVueRouter } from '@/hooks/web/index' import { ROOT_ROUTE } from '@/app-config/appConfig' import { setStorage } from '@/utils/cache' @@ -29,14 +29,14 @@ import type { AppMenuOption } from '@/types/modules/app' * 如果为超级管理员, 则会默认获取所有权限 */ export const validRole = (meta: AppRouteMeta) => { - const { signinCallback } = storeToRefs(useSignin()) - const modelRole = computed(() => signinCallback.value.role) + const { signingCallback } = storeToRefs(useSigning()) + const modelRole = computed(() => signingCallback.value.role) const { role: metaRole } = meta if (SUPER_ADMIN?.length && SUPER_ADMIN.includes(modelRole.value)) { return true } else { - // 如果 role 为 undefind 或者空数组, 则认为该路由不做权限过滤 + // 如果 role 为 undefined 或者空数组, 则认为该路由不做权限过滤 if (!metaRole || !metaRole?.length) { return true } diff --git a/src/router/modules/demo/qrcode.ts b/src/router/modules/demo/qrcode.ts index 5f6cf651..7f284580 100644 --- a/src/router/modules/demo/qrcode.ts +++ b/src/router/modules/demo/qrcode.ts @@ -8,7 +8,7 @@ const qrcode: AppRouteRecordRaw = { name: 'RQRCode', component: () => import('@/views/demo/qrcode/index'), meta: { - noLocalTitle: '二维码', + i18nKey: t('menu.QRCode'), icon: 'other', order: 3, }, diff --git a/src/router/modules/demo/svg-icons.ts b/src/router/modules/demo/svg-icons.ts index 97404aab..8915f904 100644 --- a/src/router/modules/demo/svg-icons.ts +++ b/src/router/modules/demo/svg-icons.ts @@ -8,7 +8,7 @@ const previewSVGIcons: AppRouteRecordRaw = { name: 'PreviewSVGIcons', component: () => import('@/views/demo/svg-icons/index'), meta: { - noLocalTitle: 'SVG图标', + i18nKey: t('menu.SvgIcon'), icon: 'other', order: 3, }, diff --git a/src/spin/index.tsx b/src/spin/index.tsx index f9b30c98..6480ab24 100644 --- a/src/spin/index.tsx +++ b/src/spin/index.tsx @@ -29,7 +29,7 @@ import { NSpin } from 'naive-ui' import { spinProps } from 'naive-ui' -import { globalVariableToRefs } from '@/hooks/variable/index' +import { getVariableToRefs } from '@/global-variable/index' const GlobalSpin = defineComponent({ name: 'GlobalSpin', @@ -40,7 +40,7 @@ const GlobalSpin = defineComponent({ const overrides = { opacitySpinning: '0.3', } - const spinValue = globalVariableToRefs('globalSpinning') + const spinValue = getVariableToRefs('globalSpinning') return { spinValue, diff --git a/src/store/README.md b/src/store/README.md index c33b32a9..bdc4bcb1 100644 --- a/src/store/README.md +++ b/src/store/README.md @@ -1,6 +1,6 @@ ## 描述 -> pinia store 仓库包。存放全局公共状态。 +> pinia store 仓库包。存放全局公共状态。如果不需要 pinia 但是又希望使用全局变量，可以使用 `global-variable` 管理数据。 ## 约束 diff --git a/src/store/index.ts b/src/store/index.ts index 81415dca..936bc6d2 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -20,7 +20,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' export { useSetting } from './modules/setting/index' // import { useSetting } from '@/store' 即可使用 export { useMenu } from './modules/menu/index' -export { useSignin } from './modules/signin/index' +export { useSigning } from './modules/signing/index' export { useKeepAlive } from './modules/keep-alive/index' import type { App } from 'vue' diff --git a/src/store/modules/menu/helper.ts b/src/store/modules/menu/helper.ts index 87feaa68..ce3ddc90 100644 --- a/src/store/modules/menu/helper.ts +++ b/src/store/modules/menu/helper.ts @@ -171,7 +171,7 @@ export const hasMenuIcon = (option: AppMenuOption) => { return () => icon } -/** 获取缓存的 menu key, 如果未获取到则使用 ROOTROUTE path 当作默认激活路由菜单 */ +/** 获取缓存的 menu key, 如果未获取到则使用 ROOT_ROUTE path 当作默认激活路由菜单 */ export const getCatchMenuKey = () => { const { path: rootPath } = ROOT_ROUTE const cacheMenuKey = getStorage( diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts index 62478eeb..eb7acb7a 100644 --- a/src/store/modules/menu/index.ts +++ b/src/store/modules/menu/index.ts @@ -108,15 +108,15 @@ export const useMenu = defineStore( /** * - * @param optins menu tag option(s) + * @param options menu tag option(s) * @param isAppend true: 追加操作(push), false: 覆盖操作 */ const setMenuTagOptions = ( - optins: MenuTagOptions | MenuTagOptions[], + options: MenuTagOptions | MenuTagOptions[], isAppend = true, ) => { - const isArray = Array.isArray(optins) - const arr = isArray ? [...optins] : [optins] + const isArray = Array.isArray(options) + const arr = isArray ? [...options] : [options] isAppend ? menuState.menuTagOptions.push(...arr) diff --git a/src/store/modules/signin/type.ts b/src/store/modules/signin/type.ts deleted file mode 100644 index 08ccd33f..00000000 --- a/src/store/modules/signin/type.ts +++ /dev/null @@ -1,16 +0,0 @@ -export interface SigninForm extends UnknownObjectKey { - name: string - pwd: string -} - -export interface SigninCallback extends UnknownObjectKey { - role: string - name: string - avatar?: string -} - -export interface SigninResponse extends UnknownObjectKey { - code: number - data: SigninCallback - message: string -} diff --git a/src/store/modules/signin/index.ts b/src/store/modules/signing/index.ts similarity index 75% rename from src/store/modules/signin/index.ts rename to src/store/modules/signing/index.ts index 2a7bbedd..528a4950 100644 --- a/src/store/modules/signin/index.ts +++ b/src/store/modules/signing/index.ts @@ -16,20 +16,20 @@ * * 使用 sessionStorage 缓存部分用户信息 * - * 默认仅缓存 signinCallback 属性 + * 默认仅缓存 SigningCallback 属性 */ import { isEmpty } from 'lodash-es' import { removeStorage } from '@/utils/cache' import type { - SigninForm, - SigninCallback, - SigninResponse, -} from '@/store/modules/signin/type' + SigningForm, + SigningCallback, + SigningResponse, +} from '@/store/modules/signing/type' -export const useSignin = defineStore( - 'signin', +export const useSigning = defineStore( + 'signing', () => { const state = reactive({ /** @@ -37,22 +37,22 @@ export const useSignin = defineStore( * 登陆返回信息(可以存放用户名、权限、头像等一些信息) * 路由鉴权依赖该属性中的 role 属性, 如果需要更改请同步更改: router/basic.ts、router/permission.ts */ - signinCallback: {} as SigninCallback, + signingCallback: {} as SigningCallback, }) /** * - * @param signinForm 用户登录信息 + * @param SigningForm 用户登录信息 * @returns 状态码 * * @remark 0: 登陆成功, 1: 登陆失败 */ - const signin = (signinForm: SigninForm): Promise => { + const signing = (SigningForm: SigningForm): Promise => { return new Promise((resolve, reject) => { - if (!isEmpty(signinForm)) { - state.signinCallback = { + if (!isEmpty(SigningForm)) { + state.signingCallback = { role: 'admin', - name: signinForm.name, + name: SigningForm.name, avatar: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png', } @@ -60,7 +60,7 @@ export const useSignin = defineStore( resolve({ code: 0, message: '登陆成功', - data: state.signinCallback, + data: state.signingCallback, }) } else { reject({ @@ -86,14 +86,14 @@ export const useSignin = defineStore( return { ...toRefs(state), - signin, + signing, logout, } }, { persist: { - key: 'piniaSigninStore', - paths: ['signinCallback'], + key: 'piniaSigningStore', + paths: ['signingCallback'], storage: sessionStorage, }, }, diff --git a/src/store/modules/signing/type.ts b/src/store/modules/signing/type.ts new file mode 100644 index 00000000..b765ee10 --- /dev/null +++ b/src/store/modules/signing/type.ts @@ -0,0 +1,16 @@ +export interface SigningForm extends UnknownObjectKey { + name: string + pwd: string +} + +export interface SigningCallback extends UnknownObjectKey { + role: string + name: string + avatar?: string +} + +export interface SigningResponse extends UnknownObjectKey { + code: number + data: SigningCallback + message: string +} diff --git a/src/styles/naive.scss b/src/styles/naive.scss index ccdf0d30..7d5f9e6b 100644 --- a/src/styles/naive.scss +++ b/src/styles/naive.scss @@ -1,10 +1,13 @@ -.n-spin-container, -.n-spin-container .n-spin-content { +// layout content 区域默认开启继承宽高，避免 global lodaing 丢失高度 +.r-layout-full__viewer-content .n-spin-container, +.r-layout-full__viewer-content .n-spin-container .n-spin-content { width: 100%; height: 100%; } +// 拓展 AppMenu Item样式 .r-menu--app:not(.n-menu--collapsed) .n-menu-item-content.n-menu-item-content--selected:before, .r-menu--app:not(.n-menu--collapsed) .n-menu-item-content:hover:before { border-left: 4px solid var(--ray-theme-primary-color); + transition: border-left 0.1s; } diff --git a/src/types/modules/utils.ts b/src/types/modules/utils.ts index 037a5671..c5ca8504 100644 --- a/src/types/modules/utils.ts +++ b/src/types/modules/utils.ts @@ -14,33 +14,69 @@ export type EventListenerOrEventListenerObject = | EventListener | EventListenerObject -export type ValidteValueType = - | 'Object' - | 'Undefined' - | 'Null' - | 'Boolean' - | 'Number' - | 'String' - | 'Symbol' - | 'Function' - | 'Date' - | 'Array' - | 'RegExp' - | 'Map' - | 'Set' - | 'WeakMap' - | 'WeakSet' - | 'ArrayBuffer' - | 'DataView' - | 'Int8Array' - | 'Uint8Array' - | 'Uint8ClampedArray' - | 'Int16Array' - | 'Uint16Array' - | 'Int32Array' - | 'Uint32Array' - | 'Float32Array' +export type ValidateValueType = + | 'BigUint64Array' + | 'BigInt64Array' | 'Float64Array' + | 'Float32Array' + | 'Uint32Array' + | 'Int32Array' + | 'Uint16Array' + | 'Int16Array' + | 'Uint8ClampedArray' + | 'Uint8Array' + | 'Int8Array' + | 'DataView' + | 'ArrayBuffer' + | 'WeakSet' + | 'WeakMap' + | 'Set' + | 'Map' + | 'Error' + | 'Date' + | 'RegExp' + | 'Object' + | 'Array' + | 'Function' + | 'BigInt' + | 'Symbol' + | 'String' + | 'Number' + | 'Boolean' + | 'Null' + | 'Undefined' + +export type BasicTypes = + | undefined + | null + | boolean + | number + | string + | symbol + | bigint + | Function + | any[] + | object + | RegExp + | Date + | Error + | Map + | Set + | WeakMap + | WeakSet + | ArrayBuffer + | DataView + | Int8Array + | Uint8Array + | Uint8ClampedArray + | Int16Array + | Uint16Array + | Int32Array + | Uint32Array + | Float32Array + | Float64Array + | BigInt64Array + | BigUint64Array export type WordArray = CryptoJS.lib.WordArray diff --git a/src/utils/basic.ts b/src/utils/basic.ts index 663c66bc..860f462a 100644 --- a/src/utils/basic.ts +++ b/src/utils/basic.ts @@ -1,6 +1,7 @@ import type { - ValidteValueType, + ValidateValueType, DownloadAnyFileDataType, + BasicTypes, } from '@/types/modules/utils' /** @@ -17,7 +18,7 @@ export const getAppEnvironment = () => { * * @param data 二进制流数据 * - * @returns formate binary to base64 of the image + * @returns format binary to base64 of the image */ export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => { if (!data || data.byteLength) { @@ -61,9 +62,9 @@ export const downloadBase64File = (base64: string, fileName: string) => { * @param value 目标值 * @param type 类型 */ -export const isValueType = ( +export const isValueType = ( value: unknown, - type: ValidteValueType, + type: ValidateValueType, ): value is T => { const valid = Object.prototype.toString.call(value) @@ -117,32 +118,52 @@ export const downloadAnyFile = ( return new Promise((resolve, reject) => { let blobData!: Blob - if (typeof data === 'string') { - // 处理 Base64 数据 - downloadBase64File(data, fileName) - resolve() - } else if (data instanceof ArrayBuffer) { - // 处理 ArrayBuffer 数据 - blobData = new Blob([new Uint8Array(data)], { - type: 'application/octet-stream', + try { + if (typeof data === 'string') { + downloadBase64File(data, fileName) + resolve() + + return + } + + if (data instanceof ArrayBuffer) { + blobData = new Blob([new Uint8Array(data)], { + type: 'application/octet-stream', + }) + } else if (data instanceof File || data instanceof Blob) { + blobData = data + } else { + reject(new Error('Unsupported data type')) + + return + } + + const url = URL.createObjectURL(blobData) + const link = document.createElement('a') + + link.href = url + link.download = fileName + link.style.display = 'none' + + const remove = () => { + URL.revokeObjectURL(url) + document.body.removeChild(link) + } + + link.addEventListener('load', () => { + remove() + resolve() }) - } else { - // 处理 Blob 和 File 数据 - blobData = data + + link.addEventListener('error', (error) => { + remove() + reject(error) + }) + + document.body.appendChild(link) + link.click() + } catch (error) { + reject(error) } - - const url = URL.createObjectURL(blobData) - const link = document.createElement('a') - - link.href = url - link.download = fileName - link.style.display = 'none' - - document.body.appendChild(link) - link.click() - document.body.removeChild(link) - URL.revokeObjectURL(url) - - resolve() }) } diff --git a/src/utils/element.ts b/src/utils/element.ts index 3600509d..4d5605e9 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -305,7 +305,7 @@ export const completeSize = (size: number | string, unit = 'px') => { return size.toString() + unit } else if ( isValueType(size, 'String') && - APP_REGEX.validerCSSUnit.test(size) + APP_REGEX.validCSSUnit.test(size) ) { return size } else { diff --git a/src/utils/precision.ts b/src/utils/precision.ts index 0178d24a..4c7f7dfa 100644 --- a/src/utils/precision.ts +++ b/src/utils/precision.ts @@ -170,7 +170,7 @@ export const divide = (...args: CurrencyArguments[]) => { /** * * 平分(将一个数值平均分配到一个数组中) - * 如果值为 undefind null 会自动转换为 0 + * 如果值为 undefined null 会自动转换为 0 * * @example * distribute(0, 1) => [0] diff --git a/src/utils/vue/renderNode.ts b/src/utils/vue/renderNode.ts index c1704c00..cf67e5b7 100644 --- a/src/utils/vue/renderNode.ts +++ b/src/utils/vue/renderNode.ts @@ -11,32 +11,34 @@ import { isValueType } from '@/utils/basic' -import type { VNode, VNodeChild } from 'vue' +import type { VNode, Slot } from 'vue' -export type RenderVNodeType = +export type RenderVNodeType = | VNode - | VNodeChild | (() => VNode) | string | number | undefined | null | JSX.Element + | Slot -export type DefaultElement = NonNullable< - Omit +export type DefaultElement = NonNullable< + Omit, 'string' | 'number'> > export interface RenderNodeOptions { defaultElement?: T } +export type RenderNodeReturn = ReturnType + export function renderNode( vnode: RenderVNodeType, options?: RenderNodeOptions, ) { if (!vnode) { - const { defaultElement } = options ?? {} + const { defaultElement = null } = options ?? {} return typeof defaultElement === 'function' ? defaultElement diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx index 100db244..4f0ec8cb 100644 --- a/src/views/dashboard/index.tsx +++ b/src/views/dashboard/index.tsx @@ -1,4 +1,5 @@ import './index.scss' + import { NCard, NLayout, diff --git a/src/views/demo/axios/index.tsx b/src/views/demo/axios/index.tsx index 555920b6..1061b02c 100644 --- a/src/views/demo/axios/index.tsx +++ b/src/views/demo/axios/index.tsx @@ -1,7 +1,7 @@ import './index.scss' import { NCard, NLayout, NSpace, NInput, NButton } from 'naive-ui' -import { getWeather, getTypicode } from '@/axios/api/demo/test' +import { getWeather, getTypicode } from '@/api/demo/test' import { useRequest, useHookPlusRequest } from '@/axios/index' const Axios = defineComponent({ diff --git a/src/views/demo/mock-demo/index.tsx b/src/views/demo/mock-demo/index.tsx index 1b6cbb76..d84fa9ee 100644 --- a/src/views/demo/mock-demo/index.tsx +++ b/src/views/demo/mock-demo/index.tsx @@ -14,9 +14,9 @@ import RTable from '@/components/RTable/index' import RCollapseGrid from '@/components/RCollapseGrid/index' import { useHookPlusRequest } from '@/axios/index' -import { getPersonList } from '@/axios/api/demo/mock/person' +import { getPersonList } from '@/api/demo/mock/person' -import type { Person } from '@/axios/api/demo/mock/person' +import type { Person } from '@/api/demo/mock/person' const MockDemo = defineComponent({ name: 'MockDemo', diff --git a/src/views/login/components/Signin/index.tsx b/src/views/login/components/Signin/index.tsx index bd49c358..d0b8b8f9 100644 --- a/src/views/login/components/Signin/index.tsx +++ b/src/views/login/components/Signin/index.tsx @@ -1,11 +1,11 @@ import { NForm, NFormItem, NInput, NButton } from 'naive-ui' import { setStorage } from '@/utils/cache' -import { useSignin } from '@/store' +import { useSigning } from '@/store' import { useI18n } from '@/hooks/web/index' import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig' import { useVueRouter } from '@/hooks/web/index' -import { setVariable, globalVariableToRefs } from '@/hooks/variable/index' +import { setVariable, getVariableToRefs } from '@/global-variable/index' import type { FormInst } from 'naive-ui' @@ -15,19 +15,19 @@ export default defineComponent({ const loginFormRef = ref() const { t } = useI18n() - const signinStore = useSignin() + const signingStore = useSigning() - const { signin } = signinStore + const { signing } = signingStore const { path } = ROOT_ROUTE - const globalSpinning = globalVariableToRefs('globalSpinning') + const globalSpinning = getVariableToRefs('globalSpinning') - const useSigninForm = () => ({ + const useSigningForm = () => ({ name: 'Ray Admin', pwd: '123456', }) const { router } = useVueRouter() - const signinForm = ref(useSigninForm()) + const signingForm = ref(useSigningForm()) const rules = { name: { @@ -48,16 +48,16 @@ export default defineComponent({ if (!valid) { setVariable('globalSpinning', true) - signin(signinForm.value) + signing(signingForm.value) .then((res) => { if (res.code === 0) { setTimeout(() => { setVariable('globalSpinning', false) - window.$message.success(`欢迎${signinForm.value.name}登陆~`) + window.$message.success(`欢迎${signingForm.value.name}登陆~`) setStorage(APP_CATCH_KEY.token, 'tokenValue') - setStorage(APP_CATCH_KEY.signin, res.data) + setStorage(APP_CATCH_KEY.signing, res.data) router.push(path) }, 2 * 1000) @@ -71,7 +71,7 @@ export default defineComponent({ } return { - signinForm, + signingForm, loginFormRef, handleLogin, rules, @@ -82,16 +82,16 @@ export default defineComponent({ const { $t, globalSpinning } = this return ( - + { * @remark 辅助处理需要全局注入的 css 样式文件, 会在构建期间完成注入 */ export const mixinCSSPlugin = (options?: string[]) => { - const defaultOptions = [] - - if (Array.isArray(options)) { - defaultOptions.push(...options) + if (!Array.isArray(options)) { + throw TypeError( + 'mixinCSSPlugin: The mixinCSSPlugin argument must be an array!', + ) } - const mixisString = defaultOptions.reduce((pre, curr) => { + const mixinString = options.reduce((pre, curr) => { const temp = `@import "${curr}";` return (pre += temp) }, '') - return mixisString as string + return mixinString as string } diff --git a/vite-plugins/type.ts b/vite-plugins/type.ts index 04ce9c8e..1c0d243c 100644 --- a/vite-plugins/type.ts +++ b/vite-plugins/type.ts @@ -86,7 +86,7 @@ export interface LibItem { /** * * whether replace old import statement, default `command === 'build'`, - * that means in vite serve default to `false`, in vite build default to `ture` + * that means in vite serve default to `false`, in vite build default to `true` */ replaceOldImport?: boolean /** @@ -117,7 +117,7 @@ export interface ImpConfig { /** * * By default `vite-plugin-imp` ignores all files inside node_modules. - * You can enable this option to avoid unexpected untranspiled code from third-party dependencies. + * You can enable this option to avoid unexpected untranslated code from third-party dependencies. * * Transpiling all the dependencies could slow down the build process, though. * If build performance is a concern, you can explicitly transpile only some of the dependencies diff --git a/vite.pliugin.config.ts b/vite.pliugin.config.ts index 028667f9..559c7dcf 100644 --- a/vite.pliugin.config.ts +++ b/vite.pliugin.config.ts @@ -166,7 +166,6 @@ export default function (mode: string): PluginOption[] { 'echarts', 'xlsx', 'axios', - 'screenfull', 'print-js', 'clipboard', 'lodash-es',