From ea3caa766d30057a0831f0e5c1366c5ef6556cea Mon Sep 17 00:00:00 2001 From: chuan_wuhao <443547225@qq.com> Date: Wed, 23 Nov 2022 10:34:32 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 86 ++----------------- src/App.tsx | 7 -- src/components/RayGlobalProvider/index.tsx | 16 +++- src/icons/github.svg | 4 +- .../SiderBar/Components/SettingDrawer/hook.ts | 2 - src/store/modules/setting.ts | 13 ++- src/views/rely/views/rely-about/index.tsx | 7 +- 7 files changed, 35 insertions(+), 100 deletions(-) diff --git a/README.md b/README.md index 87fd3d77..22297bec 100644 --- a/README.md +++ b/README.md @@ -69,88 +69,12 @@ ## 如果你采用的 `naive-ui` 作为组件库, 可能需要它 -```tsx -/* eslint-disable */ -import { - createDiscreteApi, - NDialogProvider, - NLoadingBarProvider, - NMessageProvider, - NNotificationProvider, -} from 'naive-ui' - -/** - * - * 全局注入 `naive-ui` 组件: `dialog`、`message`、`loadingBar`、`notification` - * 注意: 脱离上下文创建方式, 不会受 `n-xxx-provider` 控制 - */ -const GlobalInject = defineComponent({ - name: 'GlovalInject', - setup() { - // 创建 `naive-ui` 组件, 并且让其可以在 `setup` 外使用 - const { message, notification, dialog, loadingBar } = createDiscreteApi( - ['message', 'dialog', 'notification', 'loadingBar'], - {}, - ) - - window.$dialog = dialog // 注入 `dialog` - window.$message = message // 注入 `message` - window.$loadingBar = loadingBar // 注入 `loadingBar` - window.$notification = notification // 注入 `notification` - }, - render() { - return <>{this.$slots.default?.()} - }, -}) - -const GlobalProvider = defineComponent({ - name: 'GlobalProvider', - render() { - return ( - - - - - {/* {this.$slots.default?.()} */} - {this.$slots.default?.()} - - - - - ) - }, -}) - -export default GlobalProvider ``` - -> 如何使用 - -- 打开 `App.tsx` -- 引入组件 -- 在 `RouterView` 组件外层包裹即可 - -```tsx -import { defineComponent } from 'vue' -import { NConfigProvider, NGlobalStyle } from 'naive-ui' -import { RouterView } from 'vue-router' -import RayGlobalProvider from '@/components/RayGlobalProvider/index' - -const App = defineComponent({ - name: 'App', - render() { - return ( - - - - - - - ) - }, -}) - -export default App +# 如何在项目内使用提示组件 +window.$dialog +window.$message +window.$loadingBar +window.$notification ``` ### 祝大家搬砖愉快, 希望这个模板能帮你省很多时间 diff --git a/src/App.tsx b/src/App.tsx index ad25fe1f..d1f1d685 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,13 +3,6 @@ import { RouterView } from 'vue-router' const App = defineComponent({ name: 'App', - setup() { - const { height: windowHeight } = useWindowSize() - - return { - windowHeight, - } - }, render() { return ( diff --git a/src/components/RayGlobalProvider/index.tsx b/src/components/RayGlobalProvider/index.tsx index 670a94de..b243bd2f 100644 --- a/src/components/RayGlobalProvider/index.tsx +++ b/src/components/RayGlobalProvider/index.tsx @@ -4,7 +4,7 @@ import { NMessageProvider, NNotificationProvider, NConfigProvider, - NGlobalStyle, + createDiscreteApi, darkTheme, } from 'naive-ui' import { useSetting } from '@/store' @@ -21,6 +21,20 @@ const GlobalProvider = defineComponent({ settingStore.themeValue ? darkTheme : null, ) + const { message, notification, dialog, loadingBar } = createDiscreteApi( + ['message', 'dialog', 'notification', 'loadingBar'], + { + configProviderProps: computed(() => ({ + theme: modelThemeValue.value, + })), + }, + ) + + window.$dialog = dialog // 注入 `dialog` + window.$message = message // 注入 `message` + window.$loadingBar = loadingBar // 注入 `loadingBar` + window.$notification = notification // 注入 `notification` + return { modelPrimaryColorOverride, modelThemeValue, diff --git a/src/icons/github.svg b/src/icons/github.svg index 77b04d19..1c0235ed 100644 --- a/src/icons/github.svg +++ b/src/icons/github.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/src/layout/SiderBar/Components/SettingDrawer/hook.ts b/src/layout/SiderBar/Components/SettingDrawer/hook.ts index 6c7bba2b..3d285190 100644 --- a/src/layout/SiderBar/Components/SettingDrawer/hook.ts +++ b/src/layout/SiderBar/Components/SettingDrawer/hook.ts @@ -1,5 +1,3 @@ -import { getCache } from '@/utils/cache' - export const useSwatchesColorOptions = () => [ '#FFFFFF', '#18A058', diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts index ad5399bd..f8b91f20 100644 --- a/src/store/modules/setting.ts +++ b/src/store/modules/setting.ts @@ -2,8 +2,13 @@ import { setCache, getCache } from '@/utils/cache' export const useSetting = defineStore('setting', () => { const cachePrimaryColor: string = - getCache('primaryColor') === 'no' ? '#18A058' : getCache('primaryColor') - const cacheTheme = getCache('theme') === 'no' ? false : getCache('theme') + getCache('primaryColor', 'localStorage') === 'no' + ? '#18A058' + : getCache('primaryColor', 'localStorage') + const cacheTheme = + getCache('theme', 'localStorage') === 'no' + ? false + : getCache('theme', 'localStorage') const settingState = reactive({ drawerPlacement: 'right' as NaiveDrawerPlacement, @@ -26,13 +31,13 @@ export const useSetting = defineStore('setting', () => { const changeTheme = (bool: boolean) => { settingState.themeValue = bool - setCache('theme', bool) + setCache('theme', bool, 'localStorage') } const changePrimaryColor = (value: string) => { settingState.primaryColorOverride.common.primaryColor = value - setCache('primaryColor', value) + setCache('primaryColor', value, 'localStorage') } return { diff --git a/src/views/rely/views/rely-about/index.tsx b/src/views/rely/views/rely-about/index.tsx index 2606a6be..fa5bd320 100644 --- a/src/views/rely/views/rely-about/index.tsx +++ b/src/views/rely/views/rely-about/index.tsx @@ -89,9 +89,10 @@ const RelyAbout = defineComponent({ return (
- ray-template 是一个基于 vue3、vite3、TypeScript 的中后台解决方案, - 相对于市面上已有的成熟模板, 此项目的特点便是轻巧. - 不需要手动去剔除冗余的、不相关的东西. 持续更新中. + ray template 是一个基于: tsx pinia vue3.x vite sass 的中后台解决方案. + 项目干净与轻巧, + 已经集成了很多项目中可能需要的搬砖工具可以让你快速起一个相关项目, + 并且不需要剔除大量无用页面与组件.