v4.1.8一些细节补充

.eslintignore

@@ -15,3 +15,4 @@ src/locales/lang
 .depcheckrc
 src/components/RayChart/theme
 *.md
+src/icons/*.svg

.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',

.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"
 }

CHANGELOG.md

@@ -15,6 +15,9 @@
   - RayChartInst 新增 dispose render 方法，允许手动渲染与卸载 chart 图
   - 新增 animation 属性，如果为 true 则会强制触发渲染过渡动画。该配置受 `options.animation` 属性影响，如果该配置为 false 则不会启用过渡动画
 - 移除反转色功能
+- 新增图标页面
+- 修改国际化图标
+- 剔除无用代码，性能++++
 
 ## 4.1.7
 

src/axios/index.ts

@@ -29,10 +29,10 @@ import type { AppRawRequestConfig } from '@/axios/type'
 
 /**
  *
- * 该方法有一定的局限性，仅可在 setup 环境中使用
+ * 该方法有一定的局限性，仅可在 effect 作用域中使用
- * 如果在非 vue component 文件中使用，会抛出一些警告
+ * 如果在非 vue effect scope 中使用，会抛出一些警告
  *
- * 非 vue component 中使用
+ * 非 vue effect 中使用
  * @example
  *
  * const getUser = () => request({ url: 'http://localhost:3000/user' })

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<SetOptionOpts>,
+      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 变化 */
-      /** 监听 options 变化 */
+    watch(
-      watch(
+      () => props.options,
-        () => props.options,
+      (noptions) => {
-        (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)
+          echartInstance?.setOption(options, setOpt)
-        },
+        }
-        {
+      },
-          deep: true,
+      {
-        },
+        deep: true,
-      )
+      },
-    }
+    )
 
     expose({
       echart: echartInstanceRef,

src/directives/modules/copy/index.ts

@@ -23,11 +23,9 @@ const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
   let clipboard: ClipboardJS | null
 
   return {
-    mounted: (el, binding) => {
+    mounted: (el, { value }) => {
-      const value = binding.value
-
       clipboard = new ClipboardJS(el, {
-        text: () => String(value),
+        text: () => value,
       })
 
       clipboard?.on('success', () => {
@@ -37,12 +35,10 @@ const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
         window.$message.error('复制失败')
       })
     },
-    updated: (el, binding) => {
+    updated: (el, { value }) => {
       /** 其实这块代码写的挺蠢的, 但是我目前不知道怎么去优化, 阿巴阿巴阿巴 */
-      const value = binding.value
-
       clipboard = new ClipboardJS(el, {
-        text: () => String(value),
+        text: () => value,
       })
     },
     beforeUnmount: () => {

src/directives/modules/debounce/index.ts

@@ -30,16 +30,19 @@ const debounceDirective: CustomDirectiveFC<
   let debounceFunction: DebouncedFunc<AnyFC> | null
 
   return {
-    beforeMount: (el, binding) => {
+    beforeMount: (el, { value }) => {
-      const { func, trigger = 'click', wait = 500, options } = binding.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) => {
+    beforeUnmount: (el, { value }) => {
-      const { trigger = 'click' } = binding.value
+      const { trigger = 'click' } = value
 
       if (debounceFunction) {
         debounceFunction.cancel()

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<HTMLElement, boolean> = () => {
   return {
-    mounted: (el, binding) => {
+    mounted: (el, { value }) => {
-      const value = binding.value
-
       updateElementDisabledType(el, value)
     },
-    updated: (el, binding) => {
+    updated: (el, { value, oldValue }) => {
-      const value = binding.value
+      if (value === oldValue) {
+        return
+      }
 
       updateElementDisabledType(el, value)
     },

src/directives/modules/throttle/index.ts

@@ -30,19 +30,19 @@ const throttleDirective: CustomDirectiveFC<
   let throttleFunction: DebouncedFunc<AnyFC> | null
 
   return {
-    beforeMount: (el, binding) => {
+    beforeMount: (el, { value }) => {
-      const { func, trigger = 'click', wait = 500, options } = binding.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) => {
+    beforeUnmount: (el, { value }) => {
-      const { trigger = 'click' } = binding.value
+      const { trigger = 'click' } = value
 
       if (throttleFunction) {
         throttleFunction.cancel()

src/icons/language.svg

@@ -1,6 +1,7 @@
-<svg t="1669090001868" class="icon" viewBox="0 0 1024 1024" version="1.1"
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg" p-id="7911" width="200" height="200">
+>
+  <path d="M0 0h24v24H0z" fill="currentColor"></path>
   <path
-    d="M918.954667 880.896c-0.618667-1.322667-154.688-334.378667-177.194667-382.421333-135.402667-288.917333-174.976-369.642667-196.821333-391.957334a31.829333 31.829333 0 0 0-13.013334-12.138666 32 32 0 0 0-42.944 14.293333L109.909333 865.706667a32 32 0 0 0 57.216 28.672l99.349334-198.421334h496.725333a49853.44 49853.44 0 0 1 97.536 211.605334 32.021333 32.021333 0 0 0 58.218667-26.666667zM521.002667 187.626667c39.850667 76.650667 126.698667 260.117333 212.458666 444.330666H298.517333L521.002667 187.626667z"
+    d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
-    fill="currentColor" p-id="7912"></path>
+  ></path>
 </svg>

src/router/helper/permission.ts

@@ -41,7 +41,7 @@ export const permissionRouter = (router: Router) => {
 
   beforeEach((to, from, next) => {
     const token = getStorage<string>(APP_CATCH_KEY.token)
-    const catchRoutePath = getStorage<string>(
+    const catchRoutePath = getStorage(
       'menuKey',
       'sessionStorage',
       ROOT_ROUTE.path,

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,
       },
     },

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

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,

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 {

src/views/demo/doc/index.tsx

@@ -21,7 +21,7 @@ const RTemplateDoc = defineComponent({
       <RayIframe
         width="100%"
         height="100%"
-        src="https://ray-template.yunkuangao.com/ray-template-doc/"
+        src="https://xiaodaigua-ray.github.io/ray-template-doc/"
         lazy
       ></RayIframe>
     )

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({
             <li>
               <h3>默认启用 animation，强制启用渲染过渡动画</h3>
             </li>
+            <li>
+              <h3>配置 setChartOptions 属性，可以定制化合并模式</h3>
+            </li>
           </ul>
         </NCard>
         <NH2>强制渲染过渡动画（animation）</NH2>
         <NSpace style={['padding: 18px 0']}>
           <NButton onClick={this.mountChart.bind(this)}>渲染</NButton>
           <NButton onClick={this.unmountChart.bind(this)}>卸载</NButton>
+          <NButton onClick={this.handleUpdateTitle.bind(this)}>
+            更新配置项
+          </NButton>
         </NSpace>
         <div class="chart--container">
           <RayChart

src/views/demo/iframe/index.tsx

@@ -35,9 +35,9 @@ const IframeDemo = defineComponent({
             allow="fullscreen"
           />
         </NCard>
-        <NCard title="vueuse（立即加载）">
+        <NCard title="vue-hooks-plus（立即加载）">
           <RayIframe
-            src="https://www.vueusejs.com/"
+            src="https://inhiblabcore.github.io/docs/hooks/"
             height="300"
             lazy={false}
           />

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 (
       <NSpace wrapItem={false}>
         <NCard title="平层路由详情页面">我是平层路由详情页面</NCard>
-        <NCard title="TIP">可以点击面包屑或者菜单返回到主页面</NCard>
+        <NCard title="TIP">
+          <h2>1. 可以点击面包屑或者菜单返回到主页面</h2>
+          <h2>
+            2. 如果这个页面需要配置多个详情页面，只需将该路由所在的 children
+            中，将所需页面配置为 sameLevel 即可。
+          </h2>
+        </NCard>
       </NSpace>
     )
   },

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),
-                    },
                   })
                 }}
               >

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);
+}

src/views/demo/svg-icons/index.tsx

@@ -0,0 +1,65 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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<string[]>([])
+    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 (
+      <NCard title="svg图标">
+        {{
+          'header-extra': () => '点击图标复制代码',
+          default: () => (
+            <NSpace wrapItem={false}>
+              {this.icons.map((curr) => (
+                <div
+                  class="pre-view-icons__card"
+                  v-copy={`<RayIcon name="${curr}" size="56" />`}
+                >
+                  <NPopover>
+                    {{
+                      trigger: () => (
+                        <RayIcon name={curr} size="56" cursor="pointer" />
+                      ),
+                      default: () => curr,
+                    }}
+                  </NPopover>
+                </div>
+              ))}
+            </NSpace>
+          ),
+        }}
+      </NCard>
+    )
+  },
+})
+
+export default PreviewSVGIcons