feat(projects): 添加naiveUI按需引入

.vscode/extensions.json

@@ -24,6 +24,7 @@
 		"yzhang.markdown-all-in-one",
 		"pkief.material-icon-theme",
 		"zhuangtongfa.material-theme",
+		"jimdong.naive-ui-snippets",
 		"christian-kohler.path-intellisense",
 		"esbenp.prettier-vscode",
 		"johnsoncodehk.volar",

build/plugins/html.ts

@@ -1,17 +1,17 @@
 import { loadEnv } from 'vite';
 import type { ConfigEnv, PluginOption } from 'vite';
-import { minifyHtml, injectHtml } from 'vite-plugin-html'; // html插件(使用变量、压缩)
+import { createHtmlPlugin } from 'vite-plugin-html'; // html插件(使用变量、压缩)
 
 export default (config: ConfigEnv): PluginOption[] => {
   const viteEnv = loadEnv(config.mode, `.env.${config.mode}`);
 
-  return [
-    minifyHtml(),
-    injectHtml({
-      injectData: {
+  return createHtmlPlugin({
+    minify: true,
+    inject: {
+      data: {
         appName: viteEnv.VITE_APP_NAME,
         appTitle: viteEnv.VITE_APP_TITLE
       }
-    })
-  ];
+    }
+  });
 };

build/plugins/index.ts

@@ -7,7 +7,7 @@ import mock from './mock';
 import visualizer from './visualizer';
 
 export function setupVitePlugins(configEnv: ConfigEnv): (PluginOption | PluginOption[])[] {
-  const plugins = [vue, ...html(configEnv), ...iconify, windicss, mock];
+  const plugins = [vue, html(configEnv), ...iconify, windicss, mock];
 
   if (configEnv.command === 'build') {
     plugins.push(visualizer);

package.json

@@ -50,7 +50,7 @@
     "@amap/amap-jsapi-types": "^0.0.8",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
-    "@iconify/json": "^2.1.1",
+    "@iconify/json": "^2.1.2",
     "@iconify/vue": "^3.1.3",
     "@types/bmapgl": "^0.0.5",
     "@types/crypto-js": "^4.1.1",
@@ -84,7 +84,7 @@
     "unplugin-icons": "^0.13.1",
     "unplugin-vue-components": "^0.17.18",
     "vite": "2.8.3",
-    "vite-plugin-html": "^2.1.2",
+    "vite-plugin-html": "^3.0.6",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-windicss": "^1.7.0",
     "vue-tsc": "^0.31.4",

src/App.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui';
+import { zhCN, dateZhCN } from 'naive-ui';
 import { NaiveProvider } from '@/components';
 import { useThemeStore, subscribeStore } from '@/store';
 

src/components/business/LoadingEmptyWrapper/index.vue

@@ -27,7 +27,6 @@
 
 <script setup lang="ts">
 import { computed, watch, nextTick, onUnmounted } from 'vue';
-import { NSpin } from 'naive-ui';
 import { NETWORK_ERROR_MSG } from '@/config';
 import { SvgEmptyData, SvgNetworkError } from '@/components';
 import { useBoolean } from '@/hooks';

src/components/business/LoginAgreement/index.vue

@@ -8,7 +8,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NCheckbox, NButton } from 'naive-ui';
 
 interface Props {
   /** 是否勾选 */

src/components/common/HoverContainer/index.vue

@@ -16,7 +16,6 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NTooltip } from 'naive-ui';
 import type { FollowerPlacement } from 'vueuc';
 
 interface Props {

src/components/common/NaiveProvider/index.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { NLoadingBarProvider, NDialogProvider, NNotificationProvider, NMessageProvider } from 'naive-ui';
 import { NaiveProviderContent } from './components';
 </script>
 <style scoped></style>

src/components/custom/ChromeTab/index.vue

@@ -25,7 +25,6 @@
 </template>
 
 <script setup lang="ts">
-import { NDivider } from 'naive-ui';
 import { useBoolean } from '@/hooks';
 import IconClose from '../IconClose/index.vue';
 import { SvgRadiusBg } from './components';

src/components/custom/IconSelect/index.vue

@@ -26,7 +26,6 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import { NPopover, NInput, NEmpty } from 'naive-ui';
 import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
 

src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue

@@ -24,7 +24,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { NBreadcrumb, NBreadcrumbItem, NDropdown } from 'naive-ui';
 import { routePath } from '@/router';
 import { useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';

src/layouts/common/GlobalHeader/components/HeaderMenu.vue

@@ -5,7 +5,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
 import { useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NDropdown, useDialog } from 'naive-ui';
 import { HoverContainer } from '@/components';
 import { useAuthStore } from '@/store';
 import { iconifyRender } from '@/utils';
@@ -17,7 +16,6 @@ import avatar from '@/assets/svg/common/avatar01.svg';
 type DropdownKey = 'user-center' | 'logout';
 
 const auth = useAuthStore();
-const dialog = useDialog();
 
 const options = [
   {
@@ -39,7 +37,7 @@ const options = [
 function handleDropdown(optionKey: string) {
   const key = optionKey as DropdownKey;
   if (key === 'logout') {
-    dialog.info({
+    window.$dialog?.info({
       title: '提示',
       content: '您确定要退出登录吗？',
       positiveText: '确定',

src/layouts/common/GlobalSearch/components/SearchModal.vue

@@ -26,7 +26,6 @@
 <script lang="ts" setup>
 import { ref, shallowRef, computed, watch, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
-import { NModal, NInput, NEmpty } from 'naive-ui';
 import { useDebounceFn, onKeyStroke } from '@vueuse/core';
 import { useRouteStore } from '@/store';
 import type { RouteList } from './types';

src/layouts/common/GlobalSearch/components/SearchResult.vue

@@ -22,7 +22,6 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NScrollbar } from 'naive-ui';
 import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
 import type { RouteList } from './types';

src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NButton } from 'naive-ui';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();

src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue

@@ -31,7 +31,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { NScrollbar, NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
 import { DarkModeContainer } from '@/components';
 import { useAppStore, useThemeStore } from '@/store';

src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue

@@ -23,7 +23,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { NScrollbar } from 'naive-ui';
 import { DarkModeContainer } from '@/components';
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';

src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue

@@ -17,7 +17,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { NScrollbar, NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';

src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue

@@ -12,7 +12,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NDropdown } from 'naive-ui';
 import type { DropdownOption } from 'naive-ui';
 import { useAppStore, useTabStore } from '@/store';
 import { iconifyRender } from '@/utils';

src/layouts/common/SettingDrawer/components/DarkMode/index.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NDivider, NSwitch } from 'naive-ui';
 import { useThemeStore } from '@/store';
 
 const theme = useThemeStore();

src/layouts/common/SettingDrawer/components/DrawerButton/index.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { NButton } from 'naive-ui';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();

src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue

@@ -17,7 +17,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NTooltip } from 'naive-ui';
 import type { FollowerPlacement } from 'vueuc';
 import { EnumThemeLayoutMode } from '@/enum';
 import type { ThemeLayoutMode } from '@/interface';

src/layouts/common/SettingDrawer/components/LayoutMode/index.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { NDivider, NSpace } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { LayoutCheckbox } from './components';
 

src/layouts/common/SettingDrawer/components/PageFunc/index.vue

@@ -59,7 +59,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NDivider, NSpace, NSwitch, NSelect, NInputNumber } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import SettingMenu from '../SettingMenu/index.vue';
 

src/layouts/common/SettingDrawer/components/PageView/index.vue

@@ -35,7 +35,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NDivider, NSpace, NSwitch, NSelect } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import SettingMenu from '../SettingMenu/index.vue';
 

src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue

@@ -23,7 +23,6 @@
 </template>
 
 <script setup lang="ts">
-import { NModal, NGradientText, NTabs, NTabPane, NGrid, NGridItem } from 'naive-ui';
 import { traditionColors } from '@/settings';
 import { useThemeStore } from '@/store';
 import ColorCheckbox from './ColorCheckbox.vue';

src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue

@@ -14,7 +14,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NDivider, NGrid, NGridItem, NSpace, NButton, NColorPicker } from 'naive-ui';
 import { isInTraditionColors } from '@/settings';
 import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';

src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue

@@ -11,7 +11,6 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from 'vue';
-import { NDivider, NSpace, NButton } from 'naive-ui';
 import Clipboard from 'clipboard';
 import { useThemeStore } from '@/store';
 

src/layouts/common/SettingDrawer/index.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
 import { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect, PageFunc, PageView, ThemeConfig } from './components';
 

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import { setupAssets } from '@/plugins';
+import { setupAssets, setupNaiveUI } from '@/plugins';
 import { setupRouter } from '@/router';
 import { setupStore } from '@/store';
 import { setupDirectives } from '@/directives';
@@ -17,6 +17,9 @@ async function setupApp() {
   // 挂载自定义vue指令
   setupDirectives(app);
 
+  // 按需引入naiveUI
+  setupNaiveUI(app);
+
   // 挂载路由
   await setupRouter(app);
 

src/plugins/index.ts

@@ -1,3 +1,4 @@
 import setupAssets from './assets';
+import setupNaiveUI from './naive';
 
-export { setupAssets };
+export { setupAssets, setupNaiveUI };