打包分析工具命令修正

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "test": "vue-tsc --noEmit && vite build --mode test",
     "dev-build": "vue-tsc --noEmit && vite build --mode development",
-    "report": "vue-tsc --noEmit && vite build"
+    "report": "vue-tsc --noEmit && vite build --mode report"
   },
   "dependencies": {
     "@vueuse/core": "^9.1.0",

src/components/RayTooltipIcon/index.scss

@@ -0,0 +1,5 @@
+.ray-tooltip-text__icon {
+  cursor: pointer;
+  outline: none;
+  border: none;
+}

src/components/RayTooltipIcon/index.tsx

@@ -0,0 +1,65 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-29
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NTooltip } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+import { tooltipProps } from 'naive-ui'
+
+const RayTooltipIcon = defineComponent({
+  name: 'RayTooltipIcon',
+  props: {
+    ...tooltipProps,
+    iconName: {
+      type: String,
+      required: true,
+    },
+    customClassName: {
+      type: String,
+      default: '',
+    },
+    tooltipText: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['click'],
+  setup(_, { emit }) {
+    const handleClick = (e?: MouseEvent) => {
+      emit('click', e)
+    }
+
+    return {
+      handleClick,
+    }
+  },
+  render() {
+    return (
+      <NTooltip {...this.$props}>
+        {{
+          trigger: () => (
+            <RayIcon
+              name={this.iconName}
+              size="18"
+              customClassName={`ray-tooltip-text__icon ${this.customClassName}`}
+              onClick={this.handleClick.bind(this)}
+            />
+          ),
+          default: () => this.tooltipText,
+        }}
+      </NTooltip>
+    )
+  },
+})
+
+export default RayTooltipIcon

src/layout/components/SiderBar/index.tsx

@@ -1,9 +1,12 @@
 import './index.scss'
+
 import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
+import RayTooltipIcon from '@/components/RayTooltipIcon/index'
+import SettingDrawer from './components/SettingDrawer/index'
+
 import { useSetting } from '@/store'
 import { useLanguageOptions } from '@/language/index'
-import SettingDrawer from './Components/SettingDrawer/index'
 import { useAvatarOptions } from './hook'
 import { removeCache } from '@/utils/cache'
 import screenfull from 'screenfull'
@@ -26,6 +29,10 @@ const SiderBar = defineComponent({
     const modelDrawerPlacement = ref(settingStore.drawerPlacement)
     const showSettings = ref(false)
 
+    /**
+     *
+     * 顶部左边操作栏
+     */
     const leftIconOptions = [
       {
         name: 'reload',
@@ -33,24 +40,17 @@ const SiderBar = defineComponent({
         tooltip: 'LayoutHeaderTooltipOptions.Reload',
       },
     ]
-    const rightIconOptions = [
+    /**
+     *
+     * 顶部右边提示框操作栏
+     */
+    const rightTooltipIconOptions = [
       {
         name: 'fullscreen',
         size: 18,
-        tooltip: '',
+        tooltip: 'LayoutHeaderTooltipOptions.FullScreen',
         eventKey: 'screen',
       },
-      {
-        name: 'language',
-        size: 18,
-        tooltip: '',
-        dropdown: {
-          eventKey: 'handleSelect', // 默认为 `handleSelect`
-          switch: true,
-          options: useLanguageOptions(),
-          handleSelect: (key: string | number) => updateLocale(String(key)),
-        },
-      },
       {
         name: 'github',
         size: 18,
@@ -63,9 +63,26 @@ const SiderBar = defineComponent({
         tooltip: 'LayoutHeaderTooltipOptions.Setting',
         eventKey: 'setting',
       },
+    ]
+    /**
+     *
+     * 顶部右边下拉框操作栏
+     */
+    const rightDropdownIconOptions = [
+      {
+        name: 'language',
+        size: 18,
+        tooltip: '',
+        dropdown: {
+          eventKey: 'handleSelect', // 默认为 `handleSelect`
+          switch: true,
+          options: useLanguageOptions(),
+          handleSelect: (key: string | number) => updateLocale(String(key)),
+        },
+      },
       {
         name: 'ray',
-        size: 22,
+        size: 18,
         tooltip: '',
         dropdown: {
           eventKey: 'handleSelect', // 默认为 `handleSelect`
@@ -80,9 +97,7 @@ const SiderBar = defineComponent({
                 negativeText: '不确定',
                 onPositiveClick: () => {
                   window.$message.info('账号退出中...')
-
                   removeCache('all-sessionStorage')
-
                   setTimeout(() => window.location.reload(), 2 * 1000)
                 },
               })
@@ -105,7 +120,7 @@ const SiderBar = defineComponent({
       github: () => {
         window.open('https://github.com/XiaoDaiGua-Ray/ray-template')
       },
-      screen: () => {
+      fullscreen: () => {
         if (screenfull.isEnabled) {
           screenfull.toggle()
         } else {
@@ -118,36 +133,14 @@ const SiderBar = defineComponent({
       iconEventMap[key]?.()
     }
 
-    const Icon = (curr: IconOptions) => (
-      <RayIcon
-        customClassName="layout-header__method--icon"
-        name={curr.name}
-        size={curr.size}
-        onClick={handleIconClick.bind(this, curr.eventKey ?? '')}
-      />
-    )
-
-    const TooltipIcon = (curr: IconOptions) =>
-      curr.tooltip ? (
-        <NTooltip>
-          {{
-            trigger: () => Icon(curr),
-            default: () => t(curr.tooltip ?? ''),
-          }}
-        </NTooltip>
-      ) : (
-        Icon(curr)
-      )
-
     return {
       leftIconOptions,
-      rightIconOptions,
+      rightTooltipIconOptions,
       t,
       handleIconClick,
       modelDrawerPlacement,
       showSettings,
-      TooltipIcon,
+      rightDropdownIconOptions,
-      Icon,
     }
   },
   render() {
@@ -176,20 +169,27 @@ const SiderBar = defineComponent({
             ))}
           </NSpace>
           <NSpace align="center">
-            {this.rightIconOptions.map((curr) =>
+            {this.rightTooltipIconOptions.map((curr) => (
-              curr.dropdown?.switch ? (
+              <RayTooltipIcon
-                <NDropdown
+                iconName={curr.name}
-                  options={curr.dropdown.options}
+                tooltipText={this.t(curr.tooltip)}
-                  onSelect={
+                onClick={this.handleIconClick.bind(this, curr.name)}
-                    curr.dropdown[curr.dropdown.eventKey ?? 'handleSelect']
+              />
-                  }
+            ))}
-                >
+            {this.rightDropdownIconOptions.map((curr) => (
-                  {this.Icon(curr)}
+              <NDropdown
-                </NDropdown>
+                options={curr.dropdown.options}
-              ) : (
+                onSelect={
-                this.TooltipIcon(curr)
+                  curr.dropdown[curr.dropdown.eventKey ?? 'handleSelect']
-              ),
+                }
-            )}
+              >
+                <RayIcon
+                  customClassName="layout-header__method--icon"
+                  name={curr.name}
+                  size={curr.size}
+                />
+              </NDropdown>
+            ))}
           </NSpace>
         </NSpace>
         <SettingDrawer

vite.config.ts

@@ -95,7 +95,7 @@ export default defineConfig(async ({ mode }) => {
         brotliSize: true, // 搜集 `brotli` 压缩包
         emitFile: false, // 生成文件在根目录下
         filename: 'visualizer.html',
-        open: true, // 以默认服务器代理打开文件
+        open: mode === 'report' ? true : false, // 以默认服务器代理打开文件
       }),
     ],
     optimizeDeps: {