diff --git a/CHANGELOG.md b/CHANGELOG.md index dbd18e1c..b292e9b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,20 @@ # CHANGE LOG +## 4.2.0 + +针对分包，做了全局的重新设计、调整。让包的名称更加语义化；最重要的是，重新抽离了一些全局可能常用的方法，例如：useI18n、useDayjs 等，在以前这些方法存放于对应的包中，其实这样很不合理，所以现在统一存放于 `src/hooks` 包中。并且该包以后统一存放 `hooks` 方法，并不是 `utils` 方法，做了一个本质的区分，所以 `xxxCopilot.ts` 文件中的方法并不会移动，维持存放在原有的模块下。 + +引入 `useGlobalVariable` 来管理全局变量。与 `pinia` `的使用场景不同，useGlobalVariable` 是用于引入一些全局的响应式变量，这些变量不需要缓存，也不依赖任何插件。一个典型的应用是实现 `GlobalSpin`。使用该方法时，请谨慎使用，避免滥用，因为这些变量会被全局缓存且无法被回收。该方法存放的值，暂不支持缓存（如果有需要，可能后期会增加该功能）。 + +当项目插件或者需要配置项过多时候，会导致 `vite.config.ts` 文件变得异常臃肿。所以，在本次更新中，将插件的配置单独提出维护（`vite.plugin.confit.ts`）。系统的常用配置依旧在 `cfg.ts` 文件中。所以默认情况下，一般不需要修改 `vite.config.ts` 文件。 + +### Feats + +- 新增 `useGlobalVariable` 管理全局变量（该变量可以是在注册插件之前被调用） +- `v-disbaled` 指令现在会尝试给元素添加 `disabled` 属性，如果该属性生效的话 +- 注册指令操作现在不会中断程序执行，但是会抛出错误警告 +- 抽离 `vite.plugin.confit.ts` 维护项目启动所需插件 + ## 4.1.9 ### Feats diff --git a/README.md b/README.md index ad22f5e9..a444a38d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ -
Ray Template

- +
+ Ray Template

+ LICENSE
diff --git a/cfg.ts b/cfg.ts index 9d803ba9..83526643 100644 --- a/cfg.ts +++ b/cfg.ts @@ -38,15 +38,12 @@ import path from 'node:path' -import { - HTMLTitlePlugin, - buildOptions, - mixinCSSPlugin, -} from './vite-plugin/index' +import { htmlTitlePlugin, mixinCSSPlugin } from './vite-plugins/index' import { APP_THEME } from './src/app-config/designConfig' import { PRE_LOADING_CONFIG, SIDE_BAR_LOGO } from './src/app-config/appConfig' import type { AppConfigExport } from '@/types/modules/cfg' +import type { BuildOptions } from 'vite' const config: AppConfigExport = { /** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */ @@ -82,7 +79,7 @@ const config: AppConfigExport = { * * 浏览器标题 */ - title: HTMLTitlePlugin('Ray Template'), + title: htmlTitlePlugin(PRE_LOADING_CONFIG.title || 'Ray Template'), /** * * 配置 HMR 特定选项(端口、主机、路径和协议) @@ -109,7 +106,39 @@ const config: AppConfigExport = { * * 打包相关配置 */ - buildOptions: buildOptions, + buildOptions: (mode: string): BuildOptions => { + const outDirMap = { + test: 'dist/test-dist', + development: 'dist/development-dist', + production: 'dist/production-dist', + report: 'dist/report-dist', + } + const dirPath = outDirMap[mode] || 'dist/test-dist' + + if (mode === 'production') { + return { + outDir: dirPath, + sourcemap: false, + terserOptions: { + compress: { + drop_console: true, + drop_debugger: true, + }, + }, + } + } else { + return { + outDir: dirPath, + sourcemap: true, + terserOptions: { + compress: { + drop_console: false, + drop_debugger: false, + }, + }, + } + } + }, /** * * 预设别名 diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts index a99f7ec7..8889df7e 100644 --- a/src/app-config/appConfig.ts +++ b/src/app-config/appConfig.ts @@ -33,7 +33,11 @@ export const APP_KEEP_ALIVE: Readonly = { maxKeepAliveLength: 5, } -/** 首屏加载信息配置 */ +/** + * + * 首屏加载信息配置 + * 其中 title 属性会是默认的浏览器标题（初始化时） + */ export const PRE_LOADING_CONFIG: PreloadingConfig = { title: 'Ray Template', tagColor: '#ff6700', diff --git a/src/axios/index.ts b/src/axios/index.ts index ec52083e..74e17f57 100644 --- a/src/axios/index.ts +++ b/src/axios/index.ts @@ -35,7 +35,10 @@ import type { AppRawRequestConfig } from '@/axios/type' * 非 vue effect 中使用 * @example * + * // 请求函数 * const getUser = () => request({ url: 'http://localhost:3000/user' }) + * + * // effect 中使用 * const { data } = useHookPlusRequest(getUser) */ function useRequest< diff --git a/src/components/RayChart/helper.ts b/src/components/RChart/helper.ts similarity index 97% rename from src/components/RayChart/helper.ts rename to src/components/RChart/helper.ts index 4d1e63a4..9a6589f3 100644 --- a/src/components/RayChart/helper.ts +++ b/src/components/RChart/helper.ts @@ -13,7 +13,7 @@ import type { ChartThemeRawArray, ChartThemeRawModules, LoadingOptions, -} from '@/components/RayChart/type' +} from '@/components/RChart/type' /** * diff --git a/src/components/RayChart/index.scss b/src/components/RChart/index.scss similarity index 100% rename from src/components/RayChart/index.scss rename to src/components/RChart/index.scss diff --git a/src/components/RayChart/index.tsx b/src/components/RChart/index.tsx similarity index 99% rename from src/components/RayChart/index.tsx rename to src/components/RChart/index.tsx index 2fd661b4..9099a691 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RChart/index.tsx @@ -55,7 +55,7 @@ import type { LoadingOptions, AutoResize, ChartTheme, -} from '@/components/RayChart/type' +} from '@/components/RChart/type' import type { UseResizeObserverReturn, MaybeComputedElementRef, diff --git a/src/components/RayChart/theme/macarons/macarons-dark.json b/src/components/RChart/theme/macarons/macarons-dark.json similarity index 100% rename from src/components/RayChart/theme/macarons/macarons-dark.json rename to src/components/RChart/theme/macarons/macarons-dark.json diff --git a/src/components/RayChart/theme/macarons/macarons.json b/src/components/RChart/theme/macarons/macarons.json similarity index 100% rename from src/components/RayChart/theme/macarons/macarons.json rename to src/components/RChart/theme/macarons/macarons.json diff --git a/src/components/RayChart/type.ts b/src/components/RChart/type.ts similarity index 100% rename from src/components/RayChart/type.ts rename to src/components/RChart/type.ts diff --git a/src/components/RayCollapseGrid/index.ts b/src/components/RCollapseGrid/index.ts similarity index 100% rename from src/components/RayCollapseGrid/index.ts rename to src/components/RCollapseGrid/index.ts diff --git a/src/components/RayCollapseGrid/src/index.scss b/src/components/RCollapseGrid/src/index.scss similarity index 100% rename from src/components/RayCollapseGrid/src/index.scss rename to src/components/RCollapseGrid/src/index.scss diff --git a/src/components/RayCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx similarity index 98% rename from src/components/RayCollapseGrid/src/index.tsx rename to src/components/RCollapseGrid/src/index.tsx index 4c29feb4..d6eaa430 100644 --- a/src/components/RayCollapseGrid/src/index.tsx +++ b/src/components/RCollapseGrid/src/index.tsx @@ -24,7 +24,7 @@ import './index.scss' import { collapseGridProps } from './props' import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui' -import RayIcon from '@/components/RayIcon' +import RayIcon from '@/components/RIcon' import { call } from '@/utils/vue/index' diff --git a/src/components/RayCollapseGrid/src/props.ts b/src/components/RCollapseGrid/src/props.ts similarity index 100% rename from src/components/RayCollapseGrid/src/props.ts rename to src/components/RCollapseGrid/src/props.ts diff --git a/src/components/RayCollapseGrid/src/type.ts b/src/components/RCollapseGrid/src/type.ts similarity index 100% rename from src/components/RayCollapseGrid/src/type.ts rename to src/components/RCollapseGrid/src/type.ts diff --git a/src/components/RayIcon/index.scss b/src/components/RIcon/index.scss similarity index 100% rename from src/components/RayIcon/index.scss rename to src/components/RIcon/index.scss diff --git a/src/components/RayIcon/index.tsx b/src/components/RIcon/index.tsx similarity index 100% rename from src/components/RayIcon/index.tsx rename to src/components/RIcon/index.tsx diff --git a/src/components/RayIframe/index.ts b/src/components/RIframe/index.ts similarity index 100% rename from src/components/RayIframe/index.ts rename to src/components/RIframe/index.ts diff --git a/src/components/RayIframe/src/index.scss b/src/components/RIframe/src/index.scss similarity index 100% rename from src/components/RayIframe/src/index.scss rename to src/components/RIframe/src/index.scss diff --git a/src/components/RayIframe/src/index.tsx b/src/components/RIframe/src/index.tsx similarity index 100% rename from src/components/RayIframe/src/index.tsx rename to src/components/RIframe/src/index.tsx diff --git a/src/components/RayQRCode/index.ts b/src/components/RQRCode/index.ts similarity index 100% rename from src/components/RayQRCode/index.ts rename to src/components/RQRCode/index.ts diff --git a/src/components/RayQRCode/src/index.scss b/src/components/RQRCode/src/index.scss similarity index 100% rename from src/components/RayQRCode/src/index.scss rename to src/components/RQRCode/src/index.scss diff --git a/src/components/RayQRCode/src/index.tsx b/src/components/RQRCode/src/index.tsx similarity index 98% rename from src/components/RayQRCode/src/index.tsx rename to src/components/RQRCode/src/index.tsx index f66085c4..fcaad2dc 100644 --- a/src/components/RayQRCode/src/index.tsx +++ b/src/components/RQRCode/src/index.tsx @@ -12,7 +12,7 @@ import './index.scss' import { NButton, NSpin } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import props from './props' import { AwesomeQR } from 'awesome-qr' diff --git a/src/components/RayQRCode/src/props.ts b/src/components/RQRCode/src/props.ts similarity index 100% rename from src/components/RayQRCode/src/props.ts rename to src/components/RQRCode/src/props.ts diff --git a/src/components/RayQRCode/src/type.ts b/src/components/RQRCode/src/type.ts similarity index 100% rename from src/components/RayQRCode/src/type.ts rename to src/components/RQRCode/src/type.ts diff --git a/src/components/RayTable/index.ts b/src/components/RTable/index.ts similarity index 100% rename from src/components/RayTable/index.ts rename to src/components/RTable/index.ts diff --git a/src/components/RayTable/src/components/TableAction/index.tsx b/src/components/RTable/src/components/TableAction/index.tsx similarity index 98% rename from src/components/RayTable/src/components/TableAction/index.tsx rename to src/components/RTable/src/components/TableAction/index.tsx index 319352fa..564f04ae 100644 --- a/src/components/RayTable/src/components/TableAction/index.tsx +++ b/src/components/RTable/src/components/TableAction/index.tsx @@ -10,7 +10,7 @@ */ import { NPopconfirm, NSpace, NButton, NPopover } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' export type EmitterType = 'positive' | 'negative' diff --git a/src/components/RayTable/src/components/TableScreenfull/index.scss b/src/components/RTable/src/components/TableScreenfull/index.scss similarity index 100% rename from src/components/RayTable/src/components/TableScreenfull/index.scss rename to src/components/RTable/src/components/TableScreenfull/index.scss diff --git a/src/components/RayTable/src/components/TableScreenfull/index.tsx b/src/components/RTable/src/components/TableScreenfull/index.tsx similarity index 92% rename from src/components/RayTable/src/components/TableScreenfull/index.tsx rename to src/components/RTable/src/components/TableScreenfull/index.tsx index e8d55abe..eb449a51 100644 --- a/src/components/RayTable/src/components/TableScreenfull/index.tsx +++ b/src/components/RTable/src/components/TableScreenfull/index.tsx @@ -12,11 +12,11 @@ import './index.scss' import { NPopover } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import screenfull from 'screenfull' -import type { TableSettingProvider } from '@/components/RayTable/src/type' +import type { TableSettingProvider } from '@/components/RTable/src/type' const TableScreenfull = defineComponent({ name: 'TableScreenfull', diff --git a/src/components/RayTable/src/components/TableSetting/hook.ts b/src/components/RTable/src/components/TableSetting/hook.ts similarity index 84% rename from src/components/RayTable/src/components/TableSetting/hook.ts rename to src/components/RTable/src/components/TableSetting/hook.ts index 5314b758..59d19d73 100644 --- a/src/components/RayTable/src/components/TableSetting/hook.ts +++ b/src/components/RTable/src/components/TableSetting/hook.ts @@ -1,4 +1,4 @@ -import type { ActionOptions } from '@/components/RayTable/src/type' +import type { ActionOptions } from '@/components/RTable/src/type' export const setupSettingOptions = (options: ActionOptions[]) => { const arr = options.map((curr) => { diff --git a/src/components/RayTable/src/components/TableSetting/index.scss b/src/components/RTable/src/components/TableSetting/index.scss similarity index 100% rename from src/components/RayTable/src/components/TableSetting/index.scss rename to src/components/RTable/src/components/TableSetting/index.scss diff --git a/src/components/RayTable/src/components/TableSetting/index.tsx b/src/components/RTable/src/components/TableSetting/index.tsx similarity index 98% rename from src/components/RayTable/src/components/TableSetting/index.tsx rename to src/components/RTable/src/components/TableSetting/index.tsx index 891e08d0..f48e4816 100644 --- a/src/components/RayTable/src/components/TableSetting/index.tsx +++ b/src/components/RTable/src/components/TableSetting/index.tsx @@ -19,7 +19,7 @@ import './index.scss' import { NCard, NPopover, NEllipsis } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import VueDraggable from 'vuedraggable' import { setupSettingOptions } from './hook' @@ -30,7 +30,7 @@ import type { ActionOptions, FixedType, TableSettingFixedPopoverIcon, -} from '@/components/RayTable/src/type' +} from '@/components/RTable/src/type' const TableSetting = defineComponent({ name: 'TableSetting', diff --git a/src/components/RayTable/src/components/TableSize/index.scss b/src/components/RTable/src/components/TableSize/index.scss similarity index 100% rename from src/components/RayTable/src/components/TableSize/index.scss rename to src/components/RTable/src/components/TableSize/index.scss diff --git a/src/components/RayTable/src/components/TableSize/index.tsx b/src/components/RTable/src/components/TableSize/index.tsx similarity index 96% rename from src/components/RayTable/src/components/TableSize/index.tsx rename to src/components/RTable/src/components/TableSize/index.tsx index fe992cc3..cef8e91b 100644 --- a/src/components/RayTable/src/components/TableSize/index.tsx +++ b/src/components/RTable/src/components/TableSize/index.tsx @@ -12,11 +12,11 @@ import './index.scss' import { NPopover, NCard } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import { call } from '@/utils/vue/index' -import type { TableSettingProvider } from '@/components/RayTable/src/type' +import type { TableSettingProvider } from '@/components/RTable/src/type' import type { ComponentSize } from '@/types/modules/component' import type { MaybeArray } from '@/types/modules/utils' diff --git a/src/components/RayTable/src/index.scss b/src/components/RTable/src/index.scss similarity index 100% rename from src/components/RayTable/src/index.scss rename to src/components/RTable/src/index.scss diff --git a/src/components/RayTable/src/index.tsx b/src/components/RTable/src/index.tsx similarity index 100% rename from src/components/RayTable/src/index.tsx rename to src/components/RTable/src/index.tsx diff --git a/src/components/RayTable/src/props.ts b/src/components/RTable/src/props.ts similarity index 100% rename from src/components/RayTable/src/props.ts rename to src/components/RTable/src/props.ts diff --git a/src/components/RayTable/src/type.ts b/src/components/RTable/src/type.ts similarity index 100% rename from src/components/RayTable/src/type.ts rename to src/components/RTable/src/type.ts diff --git a/src/components/RayTransitionComponent/index.vue b/src/components/RTransitionComponent/index.vue similarity index 100% rename from src/components/RayTransitionComponent/index.vue rename to src/components/RTransitionComponent/index.vue diff --git a/src/dayjs/index.ts b/src/dayjs/index.ts index 84bb5309..359c56aa 100644 --- a/src/dayjs/index.ts +++ b/src/dayjs/index.ts @@ -10,30 +10,9 @@ */ import dayjs from 'dayjs' -import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig' +import { DEFAULT_DAYJS_LOCAL } from '@/app-config/localConfig' import 'dayjs/locale/zh-cn' -import type { DayjsLocal } from './type' - export const setupDayjs = () => { dayjs.locale(DEFAULT_DAYJS_LOCAL) } - -/** - * - * dayjs hook - * - * 说明: - * - locale: 切换 dayjs 语言配置 - */ -export const useDayjs = () => { - const locale = (key: DayjsLocal) => { - const mapkey = DAYJS_LOCAL_MAP[key] - - mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL) - } - - return { - locale, - } -} diff --git a/src/directives/index.ts b/src/directives/index.ts index 4e85bdfd..c7a97d17 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -33,17 +33,20 @@ export const setupDirectives = (app: App) => { // 将所有的包提取出来(./modules/[file-name]/index.ts) const directivesModules = combineDirective(directiveRawModules) // 提取文件名(./modules/copy/index.ts => copy) - const reg = /(?<=modules\/).*(?=\/index\.ts)/ + const regexExtractDirectiveName = /(?<=modules\/).*(?=\/index\.ts)/ + // 匹配合法指令名称 + const regexDirectiveName = /^([^-]+-)*[^-]+$/ forIn(directivesModules, (value, key) => { - const dname = key.match(reg)?.[0] + const dname = key.match(regexExtractDirectiveName)?.[0] - if (isValueType(dname, 'String')) { + if ( + isValueType(dname, 'String') && + regexDirectiveName.test(dname) + ) { app.directive(dname, value?.()) } else { - throw new Error( - 'directiveName is not string, please check your directive file name', - ) + console.error(`[setupDirectives] ${dname} is not a valid directive name`) } }) } diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts index f7bd712a..2dcd14a2 100644 --- a/src/directives/modules/debounce/index.ts +++ b/src/directives/modules/debounce/index.ts @@ -17,7 +17,6 @@ import { debounce } from 'lodash-es' import { on, off } from '@use-utils/element' -import type { Directive } from 'vue' import type { DebounceBindingOptions } from './type' import type { AnyFC } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' diff --git a/src/directives/modules/disabled/index.ts b/src/directives/modules/disabled/index.ts index 5bda0374..68a6599a 100644 --- a/src/directives/modules/disabled/index.ts +++ b/src/directives/modules/disabled/index.ts @@ -22,7 +22,16 @@ const updateElementDisabledType = (el: HTMLElement, value: boolean) => { if (el) { const classes = 'ray-template__directive--disabled' - value ? addClass(el, classes) : removeClass(el, classes) + if (value) { + el.setAttribute('disabled', 'disabled') + + addClass(el, classes) + } else { + el.removeAttribute('disabled') + + removeClass(el, classes) + } + el?.setAttribute('disabled', value ? 'disabled' : '') } } diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts index ccf91301..69c5fab6 100644 --- a/src/directives/modules/throttle/index.ts +++ b/src/directives/modules/throttle/index.ts @@ -17,7 +17,6 @@ import { throttle } from 'lodash-es' import { on, off } from '@use-utils/element' -import type { Directive } from 'vue' import type { ThrottleBindingOptions } from './type' import type { AnyFC } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' diff --git a/src/hooks/variable/index.ts b/src/hooks/variable/index.ts new file mode 100644 index 00000000..191dd170 --- /dev/null +++ b/src/hooks/variable/index.ts @@ -0,0 +1,18 @@ +/** + * + * @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 new file mode 100644 index 00000000..c110e1ea --- /dev/null +++ b/src/hooks/variable/useGlobalVariable.ts @@ -0,0 +1,40 @@ +/** + * + * @author Ray + * + * @date 2023-09-11 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 存放全局临时变量，脱离 pinia 使用的变量 + * 简单的全局变量，并不需要复杂的控制流程 + * + * 但不建议滥用 + */ + +/** 全局响应式变量 */ +const variableState = reactive({ + globalSpinning: 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 toRef(variableState, key) +} diff --git a/src/hooks/web/index.ts b/src/hooks/web/index.ts new file mode 100644 index 00000000..8e86afc1 --- /dev/null +++ b/src/hooks/web/index.ts @@ -0,0 +1,16 @@ +/** + * + * @author Ray + * + * @date 2023-09-11 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { useI18n, t } from './useI18n' +import { useVueRouter } from '../web/useVueRouter' +import { useDayjs } from '../web/useDayjs' + +export { useI18n, useVueRouter, useDayjs, t } diff --git a/src/hooks/web/useDayjs.ts b/src/hooks/web/useDayjs.ts new file mode 100644 index 00000000..e014c776 --- /dev/null +++ b/src/hooks/web/useDayjs.ts @@ -0,0 +1,34 @@ +/** + * + * @author Ray + * + * @date 2023-09-11 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import dayjs from 'dayjs' +import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig' + +import type { DayjsLocal } from '@/dayjs/type' + +/** + * + * dayjs hook + * + * 说明: + * - locale: 切换 dayjs 语言配置 + */ +export const useDayjs = () => { + const locale = (key: DayjsLocal) => { + const mapkey = DAYJS_LOCAL_MAP[key] + + mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL) + } + + return { + locale, + } +} diff --git a/src/locales/useI18n.ts b/src/hooks/web/useI18n.ts similarity index 83% rename from src/locales/useI18n.ts rename to src/hooks/web/useI18n.ts index 32da32a6..4e567115 100644 --- a/src/locales/useI18n.ts +++ b/src/hooks/web/useI18n.ts @@ -1,4 +1,15 @@ -import { i18n } from './index' +/** + * + * @author Ray + * + * @date 2023-09-11 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { i18n } from '@/locales/index' import type { WritableComputedRef } from 'vue' diff --git a/src/router/helper/useVueRouter.ts b/src/hooks/web/useVueRouter.ts similarity index 100% rename from src/router/helper/useVueRouter.ts rename to src/hooks/web/useVueRouter.ts diff --git a/src/layout/components/Menu/components/SiderBarLogo/index.tsx b/src/layout/components/Menu/components/SiderBarLogo/index.tsx index 656a34bd..a26d525d 100644 --- a/src/layout/components/Menu/components/SiderBarLogo/index.tsx +++ b/src/layout/components/Menu/components/SiderBarLogo/index.tsx @@ -11,8 +11,8 @@ import './index.scss' -import { NEllipsis } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import { NEllipsis, NPopover } from 'naive-ui' +import RayIcon from '@/components/RIcon/index' const SiderBarLogo = defineComponent({ name: 'SiderBarLogo', @@ -37,9 +37,14 @@ const SiderBarLogo = defineComponent({ } } + const TemplateLogo = ({ cursor }: { cursor: string }) => ( + + ) + return { sideBarLogo, handleSideBarLogoClick, + TemplateLogo, } }, render() { @@ -47,27 +52,32 @@ const SiderBarLogo = defineComponent({
{this.sideBarLogo?.icon ? ( - - ) : ( - '' - )} + this.collapsed ? ( + + {{ + trigger: () => , + default: () => this.sideBarLogo?.title, + }} + + ) : ( + + ) + ) : null}

{this.sideBarLogo?.title}

- ) : ( - '' - ) + ) : null }, }) diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 6e63f3ae..87794234 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/src/layout/components/MenuTag/index.tsx @@ -26,7 +26,7 @@ import './index.scss' import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import { useMenu, useSetting } from '@/store' import { uuid } from '@/utils/hook' diff --git a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx b/src/layout/components/SiderBar/components/GlobalSeach/index.tsx index ad47961e..a27333b0 100644 --- a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx +++ b/src/layout/components/SiderBar/components/GlobalSeach/index.tsx @@ -12,7 +12,7 @@ import './index.scss' import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import { on, off, queryElements, addClass, removeClass } from '@/utils/element' import { debounce } from 'lodash-es' diff --git a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx index 07b0f8ac..31316c85 100644 --- a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx +++ b/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx @@ -10,10 +10,10 @@ */ import { NSpace, NSwitch, NTooltip } from 'naive-ui' -import RayIcon from '@/components/RayIcon' +import RayIcon from '@/components/RIcon' import { useSetting } from '@/store' -import { useI18n } from '@/locales/useI18n' +import { useI18n } from '@/hooks/web/index' const ThemeSwitch = defineComponent({ name: 'ThemeSwitch', diff --git a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx index 5282c383..725f5b07 100644 --- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx +++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx @@ -15,7 +15,7 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c import { APP_THEME } from '@/app-config/designConfig' import { useSetting } from '@/store' -import { useI18n } from '@/locales/useI18n' +import { useI18n } from '@/hooks/web/index' import type { PropType } from 'vue' import type { Placement } from '@/types/modules/component' diff --git a/src/layout/components/SiderBar/components/TooltipIcon/index.tsx b/src/layout/components/SiderBar/components/TooltipIcon/index.tsx index 56770566..c340c5ed 100644 --- a/src/layout/components/SiderBar/components/TooltipIcon/index.tsx +++ b/src/layout/components/SiderBar/components/TooltipIcon/index.tsx @@ -12,7 +12,7 @@ import './index.scss' import { NTooltip } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import { tooltipProps } from 'naive-ui' diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index c3f145df..5c1a97f3 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -20,7 +20,7 @@ import './index.scss' import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index' import SettingDrawer from './components/SettingDrawer/index' import Breadcrumb from './components/Breadcrumb/index' @@ -31,7 +31,7 @@ import { useSetting } from '@/store' import { LOCAL_OPTIONS } from '@/app-config/localConfig' import { useAvatarOptions, avatarDropdownClick } from './hook' import screenfull from 'screenfull' -import { useI18n } from '@/locales/useI18n' +import { useI18n } from '@/hooks/web/index' import type { IconEventMapOptions, IconEventMap } from './type' diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx index ee0763a2..d9fa1ef1 100644 --- a/src/layout/default/ContentWrapper/index.tsx +++ b/src/layout/default/ContentWrapper/index.tsx @@ -18,7 +18,7 @@ import './index.scss' import { NSpin } from 'naive-ui' -import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' +import RTransitionComponent from '@/components/RTransitionComponent/index.vue' import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCancelerProvider/index' import { useSetting } from '@/store' @@ -66,7 +66,7 @@ const ContentWrapper = defineComponent({ > {this.reloadRouteSwitch ? ( - diff --git a/src/layout/index.tsx b/src/layout/index.tsx index e668a34b..e1cefb38 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -60,9 +60,7 @@ const RLayout = defineComponent({ {this.modelMenuTagSwitch ? ( - ) : ( - '' - )} + ) : null} : ''} - ) : ( - '' - ) + ) : null }, }) diff --git a/src/router/README.md b/src/router/README.md index 3a00d4b0..e023bff5 100644 --- a/src/router/README.md +++ b/src/router/README.md @@ -5,7 +5,7 @@ > router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。 ```ts -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/routeModules.ts b/src/router/appRouteModules.ts similarity index 100% rename from src/router/routeModules.ts rename to src/router/appRouteModules.ts diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts index 29cc8335..5e2f53dc 100644 --- a/src/router/helper/routerCopilot.ts +++ b/src/router/helper/routerCopilot.ts @@ -12,7 +12,7 @@ import { permissionRouter } from './permission' import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig' import { useSignin } from '@/store' -import { useVueRouter } from '@/router/helper/useVueRouter' +import { useVueRouter } from '@/hooks/web/index' import { ROOT_ROUTE } from '@/app-config/appConfig' import { setStorage } from '@/utils/cache' import { getAppEnvironment } from '@/utils/hook' diff --git a/src/router/index.ts b/src/router/index.ts index b2f16a10..545fd69d 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,7 +1,7 @@ import { createRouter, createWebHashHistory } from 'vue-router' import { scrollViewToTop } from '@/router/helper/helper' import { vueRouterRegister } from '@/router/helper/routerCopilot' -import { useVueRouter } from '@/router/helper/useVueRouter' +import { useVueRouter } from '@/hooks/web/index' import constantRoutes from './routes' diff --git a/src/router/modules/dashboard.ts b/src/router/modules/dashboard.ts index bba64493..16f77709 100644 --- a/src/router/modules/dashboard.ts +++ b/src/router/modules/dashboard.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/axios.ts b/src/router/modules/demo/axios.ts index df0d3ed9..f92a6ae8 100644 --- a/src/router/modules/demo/axios.ts +++ b/src/router/modules/demo/axios.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/directive.ts b/src/router/modules/demo/directive.ts index 2b17d1e6..6051a4bc 100644 --- a/src/router/modules/demo/directive.ts +++ b/src/router/modules/demo/directive.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/doc.ts b/src/router/modules/demo/doc.ts index 4ace6670..d3ed1421 100644 --- a/src/router/modules/demo/doc.ts +++ b/src/router/modules/demo/doc.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/echart.ts b/src/router/modules/demo/echart.ts index 6f7904a8..d9f85fb8 100644 --- a/src/router/modules/demo/echart.ts +++ b/src/router/modules/demo/echart.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/iframe.ts b/src/router/modules/demo/iframe.ts index 37c150cc..0e517b97 100644 --- a/src/router/modules/demo/iframe.ts +++ b/src/router/modules/demo/iframe.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/mock.ts b/src/router/modules/demo/mock.ts index af4d5762..187ca628 100644 --- a/src/router/modules/demo/mock.ts +++ b/src/router/modules/demo/mock.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/multi-menu.ts b/src/router/modules/demo/multi-menu.ts index c942d54f..490ad4f1 100644 --- a/src/router/modules/demo/multi-menu.ts +++ b/src/router/modules/demo/multi-menu.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/precision.ts b/src/router/modules/demo/precision.ts index 02857878..abc5dfc9 100644 --- a/src/router/modules/demo/precision.ts +++ b/src/router/modules/demo/precision.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/qrcode.ts b/src/router/modules/demo/qrcode.ts index 27add67f..5f6cf651 100644 --- a/src/router/modules/demo/qrcode.ts +++ b/src/router/modules/demo/qrcode.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/rely.ts b/src/router/modules/demo/rely.ts index ea8778b8..129468a4 100644 --- a/src/router/modules/demo/rely.ts +++ b/src/router/modules/demo/rely.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/router-demo.ts b/src/router/modules/demo/router-demo.ts index d7a41d81..40298ea3 100644 --- a/src/router/modules/demo/router-demo.ts +++ b/src/router/modules/demo/router-demo.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/scroll-reveal.ts b/src/router/modules/demo/scroll-reveal.ts index 993ddc18..3a235ec7 100644 --- a/src/router/modules/demo/scroll-reveal.ts +++ b/src/router/modules/demo/scroll-reveal.ts @@ -4,7 +4,7 @@ * 所以暂时隐藏该页面 */ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/svg-icons.ts b/src/router/modules/demo/svg-icons.ts index c7aa971c..97404aab 100644 --- a/src/router/modules/demo/svg-icons.ts +++ b/src/router/modules/demo/svg-icons.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/demo/table.ts b/src/router/modules/demo/table.ts index 6ef6e2c4..6a40a2cb 100644 --- a/src/router/modules/demo/table.ts +++ b/src/router/modules/demo/table.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/modules/error404.ts b/src/router/modules/error404.ts index 023d1df6..9f3da514 100644 --- a/src/router/modules/error404.ts +++ b/src/router/modules/error404.ts @@ -1,4 +1,4 @@ -import { t } from '@/locales/useI18n' +import { t } from '@/hooks/web/index' import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' diff --git a/src/router/routes.ts b/src/router/routes.ts index 08326655..90149746 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -1,5 +1,5 @@ import Layout from '@/layout/index' -import { getAppRawRoutes } from './routeModules' +import { getAppRawRoutes } from './appRouteModules' import { ROOT_ROUTE } from '@/app-config/appConfig' import { expandRoutes } from '@/router/helper/expandRoutes' diff --git a/src/spin/hook.ts b/src/spin/hook.ts deleted file mode 100644 index 73d89f25..00000000 --- a/src/spin/hook.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const spinValue = ref(false) - -/** - * - * @param bool has spin - * - * @remark 使用 spin 全屏加载效果工具函数 - */ -export const setSpin = (bool: boolean) => (spinValue.value = bool) diff --git a/src/spin/index.tsx b/src/spin/index.tsx index 93abe313..f9b30c98 100644 --- a/src/spin/index.tsx +++ b/src/spin/index.tsx @@ -16,8 +16,8 @@ * 基于 Naive UI Spin 组件 * * 使用方法 - * 1. import { setSpin } from '@/spin' - * 2. setSpin(true) | setSpin(false) + * 1. import { setVariable } from '@/hooks/variable/index' + * 2. setVariable('globalSpinning', true) | setVariable('globalSpinning', false) * * 仅需按照上述步骤实现全屏加载动画 * @@ -29,9 +29,7 @@ import { NSpin } from 'naive-ui' import { spinProps } from 'naive-ui' -import { spinValue } from './hook' - -export { setSpin } from './hook' +import { globalVariableToRefs } from '@/hooks/variable/index' const GlobalSpin = defineComponent({ name: 'GlobalSpin', @@ -42,6 +40,7 @@ const GlobalSpin = defineComponent({ const overrides = { opacitySpinning: '0.3', } + const spinValue = globalVariableToRefs('globalSpinning') return { spinValue, diff --git a/src/store/modules/menu/helper.ts b/src/store/modules/menu/helper.ts index 6d4f11ef..966404bc 100644 --- a/src/store/modules/menu/helper.ts +++ b/src/store/modules/menu/helper.ts @@ -12,7 +12,7 @@ /** 本方法感谢 的支持 */ import { APP_MENU_CONFIG, ROOT_ROUTE } from '@/app-config/appConfig' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import { isValueType } from '@/utils/hook' import { getStorage, setStorage } from '@/utils/cache' @@ -164,6 +164,7 @@ export const hasMenuIcon = (option: AppMenuOption) => { { name: meta!.icon as string, size: APP_MENU_CONFIG.MENU_COLLAPSED_ICON_SIZE, + cursor: 'pointer', }, {}, ) diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts index 4b35bfca..248a42a2 100644 --- a/src/store/modules/menu/index.ts +++ b/src/store/modules/menu/index.ts @@ -32,10 +32,10 @@ import { hasMenuIcon, getCatchMenuKey, } from './helper' -import { useI18n } from '@/locales/useI18n' -import { getAppRawRoutes } from '@/router/routeModules' +import { useI18n } from '@/hooks/web/index' +import { getAppRawRoutes } from '@/router/appRouteModules' import { useKeepAlive } from '@/store' -import { useVueRouter } from '@/router/helper/useVueRouter' +import { useVueRouter } from '@/hooks/web/index' import type { AppRouteMeta, AppRouteRecordRaw } from '@/router/type' import type { diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts index 8f9b5471..750cbaa2 100644 --- a/src/store/modules/setting/index.ts +++ b/src/store/modules/setting/index.ts @@ -2,9 +2,9 @@ import { getAppDefaultLanguage } from '@/locales/helper' import { setStorage } from '@use-utils/cache' import { set } from 'lodash-es' import { addClass, removeClass, colorToRgba } from '@/utils/element' -import { useI18n } from '@/locales/useI18n' +import { useI18n } from '@/hooks/web/index' import { APP_THEME } from '@/app-config/designConfig' -import { useDayjs } from '@/dayjs/index' +import { useDayjs } from '@/hooks/web/index' import type { ConditionalPick } from '@/types/modules/helper' import type { SettingState } from '@/store/modules/setting/type' diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx index b4c42af4..a426e71e 100644 --- a/src/views/dashboard/index.tsx +++ b/src/views/dashboard/index.tsx @@ -9,7 +9,7 @@ import { NP, NH6, } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' import RayLink from '@/app-components/app/RayLink/index' const Dashboard = defineComponent({ diff --git a/src/views/demo/doc/index.tsx b/src/views/demo/doc/index.tsx index 027f4aeb..8a591d1a 100644 --- a/src/views/demo/doc/index.tsx +++ b/src/views/demo/doc/index.tsx @@ -9,7 +9,7 @@ * @remark 今天也是元气满满撸代码的一天 */ -import RayIframe from '@/components/RayIframe/index' +import RayIframe from '@/components/RIframe/index' const RTemplateDoc = defineComponent({ name: 'RTemplateDoc', diff --git a/src/views/demo/echart/index.tsx b/src/views/demo/echart/index.tsx index 12eb9b4c..4a6f0070 100644 --- a/src/views/demo/echart/index.tsx +++ b/src/views/demo/echart/index.tsx @@ -1,12 +1,12 @@ import './index.scss' import { NCard, NSwitch, NSpace, NP, NH2, NButton } from 'naive-ui' -import RayChart from '@/components/RayChart/index' +import RayChart from '@/components/RChart/index' import dayjs from 'dayjs' import type { ECharts } from 'echarts/core' -import type { RayChartInst } from '@/components/RayChart/index' +import type { RayChartInst } from '@/components/RChart/index' const Echart = defineComponent({ name: 'REchart', diff --git a/src/views/demo/iframe/index.tsx b/src/views/demo/iframe/index.tsx index 1e81f0d5..08e6c4de 100644 --- a/src/views/demo/iframe/index.tsx +++ b/src/views/demo/iframe/index.tsx @@ -18,7 +18,7 @@ */ import { NCard, NSpace } from 'naive-ui' -import RayIframe from '@/components/RayIframe/index' +import RayIframe from '@/components/RIframe/index' const IframeDemo = defineComponent({ name: 'IframeDemo', diff --git a/src/views/demo/mock-demo/index.tsx b/src/views/demo/mock-demo/index.tsx index dbc65de9..3751b313 100644 --- a/src/views/demo/mock-demo/index.tsx +++ b/src/views/demo/mock-demo/index.tsx @@ -10,8 +10,8 @@ */ import { NSpace, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui' -import RayTable from '@/components/RayTable/index' -import RayCollapseGrid from '@/components/RayCollapseGrid/index' +import RayTable from '@/components/RTable/index' +import RayCollapseGrid from '@/components/RCollapseGrid/index' import { useHookPlusRequest } from '@/axios/index' import { getPersonList } from '@/axios/api/demo/mock/person' diff --git a/src/views/demo/qrcode/index.tsx b/src/views/demo/qrcode/index.tsx index b91d296f..38470e1c 100644 --- a/src/views/demo/qrcode/index.tsx +++ b/src/views/demo/qrcode/index.tsx @@ -10,11 +10,11 @@ */ import { NSpace, NCard, NButton } from 'naive-ui' -import RayQRcode from '@/components/RayQRCode/index' +import RayQRcode from '@/components/RQRCode/index' import LOGO from '@/assets/images/ray.svg' -import type { QRCodeStatus, QRCodeInst } from '@/components/RayQRCode/index' +import type { QRCodeStatus, QRCodeInst } from '@/components/RQRCode/index' const RQRCode = defineComponent({ name: 'RQRCode', diff --git a/src/views/demo/router-demo/router-demo-home/index.tsx b/src/views/demo/router-demo/router-demo-home/index.tsx index 9319a692..9b9ef7bb 100644 --- a/src/views/demo/router-demo/router-demo-home/index.tsx +++ b/src/views/demo/router-demo/router-demo-home/index.tsx @@ -10,7 +10,7 @@ */ import { NSpace, NDataTable, NButton } from 'naive-ui' -import RayTable from '@/components/RayTable/index' +import RayTable from '@/components/RTable/index' import type { DataTableColumns } from 'naive-ui' diff --git a/src/views/demo/svg-icons/index.tsx b/src/views/demo/svg-icons/index.tsx index 32f53652..1c0e8441 100644 --- a/src/views/demo/svg-icons/index.tsx +++ b/src/views/demo/svg-icons/index.tsx @@ -12,7 +12,7 @@ import './index.scss' import { NSpace, NCard, NPopover } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' const PreviewSVGIcons = defineComponent({ name: 'PreviewSVGIcons', diff --git a/src/views/demo/table/index.tsx b/src/views/demo/table/index.tsx index d219f25d..77d4355d 100644 --- a/src/views/demo/table/index.tsx +++ b/src/views/demo/table/index.tsx @@ -24,11 +24,11 @@ import { NLi, NSpace, } from 'naive-ui' -import RayTable from '@/components/RayTable/index' -import RayCollapseGrid from '@/components/RayCollapseGrid/index' +import RayTable from '@/components/RTable/index' +import RayCollapseGrid from '@/components/RCollapseGrid/index' import type { DataTableColumns } from 'naive-ui' -import type { RayTableInst } from '@/components/RayTable/index' +import type { RayTableInst } from '@/components/RTable/index' type RowData = { key: number diff --git a/src/views/login/components/QRCodeSignin/index.tsx b/src/views/login/components/QRCodeSignin/index.tsx index d4b042c4..0118f86e 100644 --- a/src/views/login/components/QRCodeSignin/index.tsx +++ b/src/views/login/components/QRCodeSignin/index.tsx @@ -11,7 +11,7 @@ import './index.scss' -import RayQRcode from '@/components/RayQRCode/index' +import RayQRcode from '@/components/RQRCode/index' import LOGO from '@/assets/images/ray.svg' diff --git a/src/views/login/components/SSOSignin/index.tsx b/src/views/login/components/SSOSignin/index.tsx index 3eb73f0c..10b1bb01 100644 --- a/src/views/login/components/SSOSignin/index.tsx +++ b/src/views/login/components/SSOSignin/index.tsx @@ -19,7 +19,7 @@ import './index.scss' import { NSpace, NPopover } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import RayIcon from '@/components/RIcon/index' interface SSOSigninOptions { icon: string diff --git a/src/views/login/components/Signin/index.tsx b/src/views/login/components/Signin/index.tsx index e559086f..504115a1 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, NSpace, NDivider } from 'naive-ui' import { setStorage } from '@/utils/cache' -import { setSpin } from '@/spin' import { useSignin } from '@/store' -import { useI18n } from '@/locales/useI18n' +import { useI18n } from '@/hooks/web/index' import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig' -import { useVueRouter } from '@/router/helper/useVueRouter' +import { useVueRouter } from '@/hooks/web/index' +import { setVariable } from '@/hooks/variable/index' import type { FormInst } from 'naive-ui' @@ -45,13 +45,13 @@ const Signin = defineComponent({ const handleLogin = () => { loginFormRef.value?.validate((valid) => { if (!valid) { - setSpin(true) + setVariable('globalSpinning', true) signin(signinForm.value) .then((res) => { if (res.code === 0) { setTimeout(() => { - setSpin(false) + setVariable('globalSpinning', false) window.$message.success(`欢迎${signinForm.value.name}登陆~`) diff --git a/src/views/login/index.scss b/src/views/login/index.scss index de4ea10c..fa0ee0c3 100644 --- a/src/views/login/index.scss +++ b/src/views/login/index.scss @@ -2,6 +2,7 @@ $positionX: 24px; $positionY: 24px; .login { + width: 100%; display: flex; & .login-wrapper { diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx index 12e7418c..41852846 100644 --- a/src/views/login/index.tsx +++ b/src/views/login/index.tsx @@ -15,13 +15,13 @@ import Signin from './components/Signin/index' import Register from './components/Register/index' import QRCodeSignin from './components/QRCodeSignin/index' import SSOSignin from './components/SSOSignin/index' -import RayIcon from '@/components/RayIcon' +import RayIcon from '@/components/RIcon' import RayLink from '@/app-components/app/RayLink/index' import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index' import { useSetting } from '@/store' import { LOCAL_OPTIONS } from '@/app-config/localConfig' -import { useI18n } from '@/locales/useI18n' +import { useI18n } from '@/hooks/web/index' const Login = defineComponent({ name: 'RLogin', @@ -88,6 +88,7 @@ const Login = defineComponent({ customClassName="login-icon" name="language" size="18" + cursor="pointer" /> diff --git a/tsconfig.json b/tsconfig.json index 322df7b6..01b9933f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -34,8 +34,8 @@ }, "include": [ "vite.config.ts", - "vite-plugin/index.ts", - "vite-plugin/type.ts", + "vite-plugins/index.ts", + "vite-plugins/type.ts", "cfg.ts", "package.json", "vite-env.d.ts", diff --git a/unplugin/components.d.ts b/unplugin/components.d.ts index d4befb0f..5daf3b1d 100644 --- a/unplugin/components.d.ts +++ b/unplugin/components.d.ts @@ -10,5 +10,6 @@ declare module 'vue' { RayTransitionComponent: typeof import('./../src/components/RayTransitionComponent/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + RTransitionComponent: typeof import('./../src/components/RTransitionComponent/index.vue')['default'] } } diff --git a/vite-plugin/index.ts b/vite-plugin/index.ts deleted file mode 100644 index 7cc2406c..00000000 --- a/vite-plugin/index.ts +++ /dev/null @@ -1,134 +0,0 @@ -import path from 'node:path' - -import unpluginViteComponents from 'unplugin-vue-components/vite' // 自动按需导入 -import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' // i18n -import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // `svg icon` - -import type { ComponentResolver, TypeImport } from 'unplugin-vue-components' -import type { BuildOptions } from 'vite' -import type { ViteSvgIconsPlugin } from 'vite-plugin-svg-icons' - -/** - * - * @param options `svg icon` 自定义配置 - * - * 使用 `svg` 作为图标 - */ -export const viteSVGIcon = (options?: ViteSvgIconsPlugin) => { - const defaultOptions = { - iconDirs: [path.resolve(process.cwd(), 'src/icons')], - symbolId: 'icon-[dir]-[name]', - inject: 'body-last', - customDomId: '__svg__icons__dom__', - } - - return createSvgIconsPlugin(Object.assign({}, defaultOptions, options)) -} - -/** - * - * @param resolvers 按需加载依赖项 - * @param types 按需加载依赖类型 - * - * 按需加载 - */ -export const viteComponents = async ( - resolvers: (ComponentResolver | ComponentResolver[])[] = [], - types: TypeImport[] = [], -) => - unpluginViteComponents({ - dts: './unplugin/components.d.ts', - resolvers: [...resolvers], - types: [ - { - from: 'vue-router', - names: ['RouterLink', 'RouterView'], - }, - ...types, - ], - }) - -export const viteVueI18nPlugin = () => - vueI18nPlugin({ - runtimeOnly: true, - compositionOnly: true, - forceStringify: true, - defaultSFCLang: 'json', - include: [path.resolve(__dirname, '../locales/**')], - }) - -/** - * - * @param title 浏览器 title 名称 - */ -export const HTMLTitlePlugin = (title: string) => { - return { - name: 'html-transform', - transformIndexHtml: (html: string) => { - return html.replace(/(.*?)<\/title>/, `<title>${title}`) - }, - } -} - -/** - * - * @param mode 打包环境 - * - * @remark 打包输出文件配置 - */ -export const buildOptions = (mode: string): BuildOptions => { - const outDirMap = { - test: 'dist/test-dist', - development: 'dist/development-dist', - production: 'dist/production-dist', - report: 'dist/report-dist', - } - const dirPath = outDirMap[mode] || 'dist/test-dist' - - if (mode === 'production') { - return { - outDir: dirPath, - sourcemap: false, - terserOptions: { - compress: { - drop_console: true, - drop_debugger: true, - }, - }, - } - } else { - return { - outDir: dirPath, - sourcemap: true, - terserOptions: { - compress: { - drop_console: false, - drop_debugger: false, - }, - }, - } - } -} - -/** - * - * @param options 预处理 css 文件 - * @returns additionalData string - * - * @remark 辅助处理需要全局注入的 css 样式文件, 会在构建期间完成注入 - */ -export const mixinCSSPlugin = (options?: string[]) => { - const defaultOptions = [] - - if (Array.isArray(options)) { - defaultOptions.push(...options) - } - - const mixisString = defaultOptions.reduce((pre, curr) => { - const temp = `@import "${curr}";` - - return (pre += temp) - }, '') - - return mixisString as string -} diff --git a/vite-plugins/index.ts b/vite-plugins/index.ts new file mode 100644 index 00000000..63a74c65 --- /dev/null +++ b/vite-plugins/index.ts @@ -0,0 +1,35 @@ +/** + * + * @param title 浏览器 title 名称 + */ +export const htmlTitlePlugin = (title: string) => { + return { + name: 'html-transform', + transformIndexHtml: (html: string) => { + return html.replace(/(.*?)<\/title>/, `<title>${title}`) + }, + } +} + +/** + * + * @param options 预处理 css 文件 + * @returns additionalData string + * + * @remark 辅助处理需要全局注入的 css 样式文件, 会在构建期间完成注入 + */ +export const mixinCSSPlugin = (options?: string[]) => { + const defaultOptions = [] + + if (Array.isArray(options)) { + defaultOptions.push(...options) + } + + const mixisString = defaultOptions.reduce((pre, curr) => { + const temp = `@import "${curr}";` + + return (pre += temp) + }, '') + + return mixisString as string +} diff --git a/vite-plugin/type.ts b/vite-plugins/type.ts similarity index 100% rename from vite-plugin/type.ts rename to vite-plugins/type.ts diff --git a/vite.config.ts b/vite.config.ts index 02c8cad3..e5d805f3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,64 +1,32 @@ import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' - -import { - viteComponents, - viteVueI18nPlugin, - viteSVGIcon, -} from './vite-plugin/index' -import viteVueJSX from '@vitejs/plugin-vue-jsx' -import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite' -import viteInspect from 'vite-plugin-inspect' -import viteSvgLoader from 'vite-svg-loader' -import vitePluginImp from 'vite-plugin-imp' // 按需打包工具 -import { visualizer } from 'rollup-plugin-visualizer' // 打包体积分析工具 -import viteCompression from 'vite-plugin-compression' // 压缩打包 -import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs' -import viteAutoImport from 'unplugin-auto-import/vite' -import viteEslint from 'vite-plugin-eslint' -import mockDevServerPlugin from 'vite-plugin-mock-dev-server' - -import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // 模板自动导入组件并且按需打包 -import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers' import config from './cfg' import pkg from './package.json' - -const { dependencies, devDependencies, name, version } = pkg -const { - server, - buildOptions, - alias, - title, - copyright, - sideBarLogo, - mixinCSS, - appPrimaryColor, - preloadingConfig, - base, -} = config - -/** - * - * 全局注入 `__APP_CFG__` 变量 - * - * 可以在 `views` 页面使用 - * - * 使用方法 `const { pkg, layout } = __APP_CFG__` - * - * 如果有新的补充, 需要自己手动补充类型 `src/types/cfg.ts AppConfig` - */ -const __APP_CFG__ = { - pkg: { dependencies, devDependencies, name, version }, - layout: { - copyright, - sideBarLogo, - }, - appPrimaryColor, -} +import vitePlugins from './vite.pliugin.config' // https://vitejs.dev/config/ export default defineConfig(async ({ mode }) => { + const { dependencies, devDependencies, name, version } = pkg + const { + server, + buildOptions, + alias, + copyright, + sideBarLogo, + mixinCSS, + appPrimaryColor, + base, + } = config + + const __APP_CFG__ = { + pkg: { dependencies, devDependencies, name, version }, + layout: { + copyright, + sideBarLogo, + }, + appPrimaryColor, + } + return { base: base || '/', define: { @@ -67,113 +35,7 @@ export default defineConfig(async ({ mode }) => { resolve: { alias: alias, }, - plugins: [ - vue(), - viteVueJSX(), - title, - viteVeI18nPlugin({}), - viteAutoImport({ - eslintrc: { - enabled: true, - filepath: './unplugin/.eslintrc-auto-import.json', - }, - include: [ - /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx - /\.vue$/, - /\.vue\?vue/, // .vue - /\.md$/, // .md - ], - dts: './unplugin/auto-imports.d.ts', - imports: [ - 'vue', - 'vue-router', - 'pinia', - '@vueuse/core', - 'vue-i18n', - { - 'naive-ui': [ - 'useDialog', - 'useMessage', - 'useNotification', - 'useLoadingBar', - ], - }, - ], - resolvers: [NaiveUiResolver(), VueHooksPlusResolver()], - }), - await viteComponents([NaiveUiResolver(), VueHooksPlusResolver()]), - viteCompression(), - viteVueI18nPlugin(), - viteSvgLoader({ - defaultImport: 'url', // 默认以 `componetn` 形式导入 `svg` - }), - viteSVGIcon(), - viteEslint({ - lintOnStart: true, - failOnError: true, - failOnWarning: true, - fix: true, - exclude: ['dist/**', '**/node_modules/**', 'vite-env.d.ts', '*.md'], - include: ['src/**/*.{vue,js,jsx,ts,tsx}'], - cache: true, - }), - vitePluginImp({ - libList: [ - { - libName: 'lodash-es', - libDirectory: '', - camel2DashComponentName: false, - }, - { - libName: '@vueuse', - libDirectory: '', - camel2DashComponentName: false, - }, - { - libName: 'lodash', - libDirectory: '', - camel2DashComponentName: false, - }, - ], - }), - { - include: [ - 'src/**/*.ts', - 'src/**/*.tsx', - 'src/**/*.vue', - 'src/*.ts', - 'src/*.tsx', - 'src/*.vue', - ], - }, - visualizer({ - gzipSize: true, // 搜集 `gzip` 压缩包 - brotliSize: true, // 搜集 `brotli` 压缩包 - emitFile: false, // 生成文件在根目录下 - filename: 'visualizer.html', - open: mode === 'report' ? true : false, // 以默认服务器代理打开文件 - }), - viteEjsPlugin({ - preloadingConfig, - appPrimaryColor, - }), - viteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态) - mockDevServerPlugin({ - include: ['mock/**/*.mock.ts'], - exclude: [ - '**/node_modules/**', - '**/test/**', - '**/cypress/**', - 'src/**', - '**/.vscode/**', - '**/.git/**', - '**/dist/**', - 'mock/shared/**', - ], - reload: true, - build: true, - }), - ], + plugins: vitePlugins(mode), optimizeDeps: { include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'], }, diff --git a/vite.pliugin.config.ts b/vite.pliugin.config.ts new file mode 100644 index 00000000..764146ba --- /dev/null +++ b/vite.pliugin.config.ts @@ -0,0 +1,165 @@ +/** + * + * @author Ray + * + * @date 2023-09-15 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import path from 'node:path' + +import vue from '@vitejs/plugin-vue' +import viteVueJSX from '@vitejs/plugin-vue-jsx' +import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite' +import viteInspect from 'vite-plugin-inspect' +import viteSvgLoader from 'vite-svg-loader' +import vitePluginImp from 'vite-plugin-imp' +import { visualizer } from 'rollup-plugin-visualizer' +import viteCompression from 'vite-plugin-compression' +import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs' +import viteAutoImport from 'unplugin-auto-import/vite' +import viteEslint from 'vite-plugin-eslint' +import mockDevServerPlugin from 'vite-plugin-mock-dev-server' +import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' +import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' +import unpluginViteComponents from 'unplugin-vue-components/vite' + +import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' +import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers' + +import config from './cfg' + +export default function (mode: string) { + const { title, appPrimaryColor, preloadingConfig } = config + + return [ + vue(), + viteVueJSX(), + title, + viteVeI18nPlugin({}), + viteAutoImport({ + eslintrc: { + enabled: true, + filepath: './unplugin/.eslintrc-auto-import.json', + }, + include: [ + /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx + /\.vue$/, + /\.vue\?vue/, // .vue + /\.md$/, // .md + ], + dts: './unplugin/auto-imports.d.ts', + imports: [ + 'vue', + 'vue-router', + 'pinia', + '@vueuse/core', + 'vue-i18n', + { + 'naive-ui': [ + 'useDialog', + 'useMessage', + 'useNotification', + 'useLoadingBar', + ], + }, + ], + resolvers: [NaiveUiResolver(), VueHooksPlusResolver()], + }), + unpluginViteComponents({ + dts: './unplugin/components.d.ts', + resolvers: [NaiveUiResolver(), VueHooksPlusResolver()], + types: [ + { + from: 'vue-router', + names: ['RouterLink', 'RouterView'], + }, + ], + }), + viteCompression(), + viteSvgLoader({ + defaultImport: 'url', // 默认以 url 形式导入 svg + }), + viteEslint({ + lintOnStart: true, + failOnError: true, + failOnWarning: true, + fix: true, + exclude: ['dist/**', '**/node_modules/**', 'vite-env.d.ts', '*.md'], + include: ['src/**/*.{vue,js,jsx,ts,tsx}'], + cache: true, + }), + vitePluginImp({ + libList: [ + { + libName: 'lodash-es', + libDirectory: '', + camel2DashComponentName: false, + }, + { + libName: '@vueuse', + libDirectory: '', + camel2DashComponentName: false, + }, + { + libName: 'lodash', + libDirectory: '', + camel2DashComponentName: false, + }, + ], + }), + { + include: [ + 'src/**/*.ts', + 'src/**/*.tsx', + 'src/**/*.vue', + 'src/*.ts', + 'src/*.tsx', + 'src/*.vue', + ], + }, + visualizer({ + gzipSize: true, // 搜集 `gzip` 压缩包 + brotliSize: true, // 搜集 `brotli` 压缩包 + emitFile: false, // 生成文件在根目录下 + filename: 'visualizer.html', + open: mode === 'report' ? true : false, // 以默认服务器代理打开文件 + }), + viteEjsPlugin({ + preloadingConfig, + appPrimaryColor, + }), + viteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态) + mockDevServerPlugin({ + include: ['mock/**/*.mock.ts'], + exclude: [ + '**/node_modules/**', + '**/test/**', + '**/cypress/**', + 'src/**', + '**/.vscode/**', + '**/.git/**', + '**/dist/**', + 'mock/shared/**', + ], + reload: true, + build: true, + }), + vueI18nPlugin({ + runtimeOnly: true, + compositionOnly: true, + forceStringify: true, + defaultSFCLang: 'json', + include: [path.resolve(__dirname, '../locales/**')], + }), + createSvgIconsPlugin({ + iconDirs: [path.resolve(process.cwd(), 'src/icons')], + symbolId: 'icon-[dir]-[name]', + inject: 'body-last', + customDomId: '__svg__icons__dom__', + }), + ] +}