diff --git a/.eslintignore b/.eslintignore index 108c8d65..989633d8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -15,3 +15,4 @@ src/locales/lang .depcheckrc src/components/RayChart/theme *.md +src/icons/*.svg \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 7aeaa58d..f564c44a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -106,7 +106,7 @@ module.exports = { 'no-lone-blocks': 2, // 禁止不必要的嵌套块 'no-multi-spaces': 1, // 禁止使用多余的空格 'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过 `2` 行 - 'no-new-func': 1, // 禁止使用 `new Function` + 'no-new-func': 2, // 禁止使用 `new Function` 'no-new-object': 2, // 禁止使用 `new Object` 'no-new-require': 2, // 禁止使用 `new require` 'no-sparse-arrays': 2, // 禁止稀疏数组 @@ -124,7 +124,6 @@ module.exports = { 'no-useless-call': 2, // 禁止不必要的 `call` 和 `apply` 'no-var': 'error', // 禁用 `var` 'no-with': 2, // 禁用 `with` - 'no-undef': 0, 'use-isnan': 2, // 强制使用 isNaN 判断 NaN 'no-multi-assign': 2, // 禁止连续声明变量 'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调 @@ -143,15 +142,6 @@ module.exports = { ], 'vue/require-v-for-key': ['error'], 'vue/require-valid-default-prop': ['error'], - 'no-use-before-define': [ - 'error', - { - functions: true, - classes: true, - variables: false, - allowNamedExports: false, - }, - ], 'vue/component-definition-name-casing': ['error', 'PascalCase'], 'vue/html-closing-bracket-newline': [ 'error', diff --git a/.vscode/settings.json b/.vscode/settings.json index 93251d2d..409e9964 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,5 +9,13 @@ "i18n-ally.displayLanguage": "zh-CN", "i18n-ally.enabledFrameworks": ["vue", "react"], "typescript.tsdk": "node_modules/typescript/lib", - "synthwave84.disableGlow": true + "alias-skip.mappings": { + "@": "/src", + "@use-utils": "/src/utils", + "@use-api": "/src/axios/api", + "@use-images": "/src/assets/images", + "@mock": "/mock" + }, + "alias-skip.allowedsuffix": ["ts", "tsx"], + "alias-skip.rootpath": "package.json" } diff --git a/CHANGELOG.md b/CHANGELOG.md index efc011ad..76374d13 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,9 @@ - RayChartInst 新增 dispose render 方法，允许手动渲染与卸载 chart 图 - 新增 animation 属性，如果为 true 则会强制触发渲染过渡动画。该配置受 `options.animation` 属性影响，如果该配置为 false 则不会启用过渡动画 - 移除反转色功能 +- 新增图标页面 +- 修改国际化图标 +- 剔除无用代码，性能++++ ## 4.1.7 diff --git a/src/axios/index.ts b/src/axios/index.ts index 2dec3231..ec52083e 100644 --- a/src/axios/index.ts +++ b/src/axios/index.ts @@ -29,10 +29,10 @@ import type { AppRawRequestConfig } from '@/axios/type' /** * - * 该方法有一定的局限性，仅可在 setup 环境中使用 - * 如果在非 vue component 文件中使用，会抛出一些警告 + * 该方法有一定的局限性，仅可在 effect 作用域中使用 + * 如果在非 vue effect scope 中使用，会抛出一些警告 * - * 非 vue component 中使用 + * 非 vue effect 中使用 * @example * * const getUser = () => request({ url: 'http://localhost:3000/user' }) diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index 7439beec..bc6838ab 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -61,7 +61,7 @@ import type { MaybeComputedElementRef, MaybeElement, } from '@vueuse/core' -import type { ECharts, EChartsCoreOption } from 'echarts/core' +import type { ECharts, EChartsCoreOption, SetOptionOpts } from 'echarts/core' export type EChartsExtensionInstallRegisters = typeof CanvasRenderer export type { RayChartInst } from './type' @@ -205,6 +205,22 @@ const RayChart = defineComponent({ type: Boolean, default: true, }, + setChartOptions: { + /** + * + * 当 options 配置项更改时候，setOptions 方法配置项 + * + * 默认值 + * notMerge: false, + * lazyUpdate: true, + * silent: false, + * replaceMerge: [], + * + * 会自动进行合并配置项 + */ + type: Object as PropType, + default: () => ({}), + }, }, setup(props, { expose }) { const settingStore = useSetting() @@ -264,7 +280,7 @@ const RayChart = defineComponent({ echarts.use(props.use?.filter(Boolean)) } catch (e) { console.error( - 'Error: wrong property and method passed in extend attribute', + 'register chart Core error: wrong property and method passed in extend attribute', ) } } @@ -481,22 +497,28 @@ const RayChart = defineComponent({ }, ) - if (props.watchOptions) { - /** 监听 options 变化 */ - watch( - () => props.options, - (noptions) => { + /** 监听 options 变化 */ + watch( + () => props.options, + (noptions) => { + if (props.watchOptions) { /** 重新组合 options */ const options = combineChartOptions(noptions) + const setOpt = Object.assign({}, props.setChartOptions, { + notMerge: false, + lazyUpdate: true, + silent: false, + replaceMerge: [], + }) /** 如果 options 发生变动更新 echarts */ - echartInstance?.setOption(options) - }, - { - deep: true, - }, - ) - } + echartInstance?.setOption(options, setOpt) + } + }, + { + deep: true, + }, + ) expose({ echart: echartInstanceRef, diff --git a/src/directives/modules/copy/index.ts b/src/directives/modules/copy/index.ts index becc4554..b40cbe82 100644 --- a/src/directives/modules/copy/index.ts +++ b/src/directives/modules/copy/index.ts @@ -23,11 +23,9 @@ const copyDirective: CustomDirectiveFC = () => { let clipboard: ClipboardJS | null return { - mounted: (el, binding) => { - const value = binding.value - + mounted: (el, { value }) => { clipboard = new ClipboardJS(el, { - text: () => String(value), + text: () => value, }) clipboard?.on('success', () => { @@ -37,12 +35,10 @@ const copyDirective: CustomDirectiveFC = () => { window.$message.error('复制失败') }) }, - updated: (el, binding) => { + updated: (el, { value }) => { /** 其实这块代码写的挺蠢的, 但是我目前不知道怎么去优化, 阿巴阿巴阿巴 */ - const value = binding.value - clipboard = new ClipboardJS(el, { - text: () => String(value), + text: () => value, }) }, beforeUnmount: () => { diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts index ec5cb83e..f7bd712a 100644 --- a/src/directives/modules/debounce/index.ts +++ b/src/directives/modules/debounce/index.ts @@ -30,16 +30,19 @@ const debounceDirective: CustomDirectiveFC< let debounceFunction: DebouncedFunc | null return { - beforeMount: (el, binding) => { - const { func, trigger = 'click', wait = 500, options } = binding.value + beforeMount: (el, { value }) => { + const { func, trigger = 'click', wait = 500, options } = value + if (typeof func !== 'function') { throw new Error('debounce directive value must be a function') } - debounceFunction = debounce(func, wait, Object.assign({}, {}, options)) + + debounceFunction = debounce(func, wait, Object.assign({}, options)) + on(el, trigger, debounceFunction) }, - beforeUnmount: (el, binding) => { - const { trigger = 'click' } = binding.value + beforeUnmount: (el, { value }) => { + const { trigger = 'click' } = value if (debounceFunction) { debounceFunction.cancel() diff --git a/src/directives/modules/disabled/index.ts b/src/directives/modules/disabled/index.ts index d49a6302..5bda0374 100644 --- a/src/directives/modules/disabled/index.ts +++ b/src/directives/modules/disabled/index.ts @@ -16,7 +16,6 @@ import { addClass, removeClass } from '@/utils/element' -import type { Directive } from 'vue' import type { CustomDirectiveFC } from '@/directives/type' const updateElementDisabledType = (el: HTMLElement, value: boolean) => { @@ -30,13 +29,13 @@ const updateElementDisabledType = (el: HTMLElement, value: boolean) => { const disabledDirective: CustomDirectiveFC = () => { return { - mounted: (el, binding) => { - const value = binding.value - + mounted: (el, { value }) => { updateElementDisabledType(el, value) }, - updated: (el, binding) => { - const value = binding.value + updated: (el, { value, oldValue }) => { + if (value === oldValue) { + return + } updateElementDisabledType(el, value) }, diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts index 6a322aca..ccf91301 100644 --- a/src/directives/modules/throttle/index.ts +++ b/src/directives/modules/throttle/index.ts @@ -30,19 +30,19 @@ const throttleDirective: CustomDirectiveFC< let throttleFunction: DebouncedFunc | null return { - beforeMount: (el, binding) => { - const { func, trigger = 'click', wait = 500, options } = binding.value + beforeMount: (el, { value }) => { + const { func, trigger = 'click', wait = 500, options } = value if (typeof func !== 'function') { throw new Error('throttle directive value must be a function') } - throttleFunction = throttle(func, wait, Object.assign({}, {}, options)) + throttleFunction = throttle(func, wait, Object.assign({}, options)) on(el, trigger, throttleFunction) }, - beforeUnmount: (el, binding) => { - const { trigger = 'click' } = binding.value + beforeUnmount: (el, { value }) => { + const { trigger = 'click' } = value if (throttleFunction) { throttleFunction.cancel() diff --git a/src/icons/language.svg b/src/icons/language.svg index b399fdcb..96673e07 100644 --- a/src/icons/language.svg +++ b/src/icons/language.svg @@ -1,6 +1,7 @@ - + \ No newline at end of file diff --git a/src/icons/scroll_reveal.svg b/src/icons/mouse.svg similarity index 100% rename from src/icons/scroll_reveal.svg rename to src/icons/mouse.svg diff --git a/src/router/helper/permission.ts b/src/router/helper/permission.ts index a16469f0..3042d817 100644 --- a/src/router/helper/permission.ts +++ b/src/router/helper/permission.ts @@ -41,7 +41,7 @@ export const permissionRouter = (router: Router) => { beforeEach((to, from, next) => { const token = getStorage(APP_CATCH_KEY.token) - const catchRoutePath = getStorage( + const catchRoutePath = getStorage( 'menuKey', 'sessionStorage', ROOT_ROUTE.path, diff --git a/src/router/modules/demo/router-demo.ts b/src/router/modules/demo/router-demo.ts index 29f267cf..d7a41d81 100644 --- a/src/router/modules/demo/router-demo.ts +++ b/src/router/modules/demo/router-demo.ts @@ -29,7 +29,6 @@ const routerDemo: AppRouteRecordRaw = { import('@/views/demo/router-demo/router-demo-detail/index'), meta: { noLocalTitle: '信息详情', - hidden: true, sameLevel: true, }, }, diff --git a/src/router/modules/demo/svg-icons.ts b/src/router/modules/demo/svg-icons.ts new file mode 100644 index 00000000..c7aa971c --- /dev/null +++ b/src/router/modules/demo/svg-icons.ts @@ -0,0 +1,17 @@ +import { t } from '@/locales/useI18n' +import { LAYOUT } from '@/router/constant/index' + +import type { AppRouteRecordRaw } from '@/router/type' + +const previewSVGIcons: AppRouteRecordRaw = { + path: '/svg-icons', + name: 'PreviewSVGIcons', + component: () => import('@/views/demo/svg-icons/index'), + meta: { + noLocalTitle: 'SVG图标', + icon: 'other', + order: 3, + }, +} + +export default previewSVGIcons diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts index 323f5b59..4b35bfca 100644 --- a/src/store/modules/menu/index.ts +++ b/src/store/modules/menu/index.ts @@ -34,11 +34,9 @@ import { } from './helper' import { useI18n } from '@/locales/useI18n' import { getAppRawRoutes } from '@/router/routeModules' -import { expandRoutes } from '@/router/helper/expandRoutes' import { useKeepAlive } from '@/store' import { useVueRouter } from '@/router/helper/useVueRouter' -import type { MenuOption } from 'naive-ui' import type { AppRouteMeta, AppRouteRecordRaw } from '@/router/type' import type { AppMenuOption, diff --git a/src/styles/base.scss b/src/styles/base.scss index 2c3bcc9b..623162c6 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -41,6 +41,35 @@ fieldset, img { border: 0; vertical-align: middle; + border-style: none; +} + +a { + background-color: transparent; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ } body { diff --git a/src/views/demo/doc/index.tsx b/src/views/demo/doc/index.tsx index 23dc6b56..027f4aeb 100644 --- a/src/views/demo/doc/index.tsx +++ b/src/views/demo/doc/index.tsx @@ -21,7 +21,7 @@ const RTemplateDoc = defineComponent({ ) diff --git a/src/views/demo/echart/index.tsx b/src/views/demo/echart/index.tsx index c478bcfe..12eb9b4c 100644 --- a/src/views/demo/echart/index.tsx +++ b/src/views/demo/echart/index.tsx @@ -3,6 +3,8 @@ import './index.scss' import { NCard, NSwitch, NSpace, NP, NH2, NButton } from 'naive-ui' import RayChart from '@/components/RayChart/index' +import dayjs from 'dayjs' + import type { ECharts } from 'echarts/core' import type { RayChartInst } from '@/components/RayChart/index' @@ -82,9 +84,9 @@ const Echart = defineComponent({ }, ], } - const baseLineOptions = { + const baseLineOptions = ref({ title: { - text: 'Stacked Area Chart', + text: dayjs().valueOf(), }, tooltip: { trigger: 'axis', @@ -177,7 +179,7 @@ const Echart = defineComponent({ data: [820, 932, 901, 934, 1290, 1330, 1320], }, ], - } + }) const handleLoadingShow = (bool: boolean) => { state.loading = bool @@ -205,6 +207,19 @@ const Echart = defineComponent({ baseChartRef.value?.dispose() } + const handleUpdateTitle = () => { + baseLineOptions.value.title.text = dayjs().valueOf() + + const createData = () => Math.floor((Math.random() + 1) * 100) + + baseLineOptions.value.series[0].data = new Array(7) + .fill(0) + .map(() => createData()) + baseLineOptions.value.series[1].data = new Array(7) + .fill(0) + .map(() => createData()) + } + return { baseOptions, baseChartRef, @@ -218,6 +233,7 @@ const Echart = defineComponent({ ...toRefs(state), mountChart, unmountChart, + handleUpdateTitle, } }, render() { @@ -240,12 +256,18 @@ const Echart = defineComponent({

  • 默认启用 animation，强制启用渲染过渡动画

    • +
  • +

    配置 setChartOptions 属性，可以定制化合并模式

    +
    • 强制渲染过渡动画（animation） 渲染 卸载 + + 更新配置项 +
    - + diff --git a/src/views/demo/router-demo/router-demo-detail/index.tsx b/src/views/demo/router-demo/router-demo-detail/index.tsx index 49e9005a..46cb6d23 100644 --- a/src/views/demo/router-demo/router-demo-detail/index.tsx +++ b/src/views/demo/router-demo/router-demo-detail/index.tsx @@ -13,12 +13,17 @@ import { NCard, NSpace } from 'naive-ui' const RouterDemoDetail = defineComponent({ name: 'RouterDemoDetail', - render() { return ( 我是平层路由详情页面 - 可以点击面包屑或者菜单返回到主页面 + +

    1. 可以点击面包屑或者菜单返回到主页面

    +

    + 2. 如果这个页面需要配置多个详情页面，只需将该路由所在的 children + 中，将所需页面配置为 sameLevel 即可。 +

    +     ) }, 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 b72bf663..9319a692 100644 --- a/src/views/demo/router-demo/router-demo-home/index.tsx +++ b/src/views/demo/router-demo/router-demo-home/index.tsx @@ -52,9 +52,6 @@ const RouterDemoHome = defineComponent({ onClick={() => { router.push({ path: '/router-demo/router-demo-detail', - query: { - row: JSON.stringify(row), - }, }) }} > diff --git a/src/views/demo/svg-icons/index.scss b/src/views/demo/svg-icons/index.scss new file mode 100644 index 00000000..44170c60 --- /dev/null +++ b/src/views/demo/svg-icons/index.scss @@ -0,0 +1,10 @@ +.pre-view-icons__card { + width: 120px; + height: 120px; + padding: 18px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid var(--n-border-color); + border-radius: var(--n-border-radius); +} diff --git a/src/views/demo/svg-icons/index.tsx b/src/views/demo/svg-icons/index.tsx new file mode 100644 index 00000000..32f53652 --- /dev/null +++ b/src/views/demo/svg-icons/index.tsx @@ -0,0 +1,65 @@ +/** + * + * @author Ray + * + * @date 2023-08-25 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import './index.scss' + +import { NSpace, NCard, NPopover } from 'naive-ui' +import RayIcon from '@/components/RayIcon/index' + +const PreviewSVGIcons = defineComponent({ + name: 'PreviewSVGIcons', + setup() { + const icons = ref([]) + const iconsModules = import.meta.glob('@/icons/**.svg') + + Object.keys(iconsModules).forEach((curr) => { + const iconName = curr.match(/\/(\w+)\.svg/)![1] + + if (iconName) { + icons.value.push(iconName) + } + }) + + return { + icons, + } + }, + render() { + return ( + + {{ + 'header-extra': () => '点击图标复制代码', + default: () => ( + + {this.icons.map((curr) => ( +
    `} + > + + {{ + trigger: () => ( + + ), + default: () => curr, + }} + +
    + ))} +     + ), + }} +     + ) + }, +}) + +export default PreviewSVGIcons