细节优化

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 (
-      <NDialogProvider>
-        <NNotificationProvider>
-          <NMessageProvider>
-            <NLoadingBarProvider>
-              {/* <GlobalInject>{this.$slots.default?.()}</GlobalInject> */}
-              {this.$slots.default?.()}
-            </NLoadingBarProvider>
-          </NMessageProvider>
-        </NNotificationProvider>
-      </NDialogProvider>
-    )
-  },
-})
-
-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 (
-      <NConfigProvider>
-        <RayGlobalProvider>
-          <RouterView />
-          <NGlobalStyle />
-        </RayGlobalProvider>
-      </NConfigProvider>
-    )
-  },
-})
-
-export default App
+# 如何在项目内使用提示组件
+window.$dialog
+window.$message
+window.$loadingBar
+window.$notification
 ```
 
 ### 祝大家搬砖愉快, 希望这个模板能帮你省很多时间

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 (
       <RayGlobalProvider>

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,

src/icons/github.svg

@@ -1,3 +1,3 @@
-<svg t="1669111756887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26207" width="200" height="200">
-  <path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="26208"></path>
+<svg t="1669170696481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1372" width="200" height="200">
+  <path d="M512 0C229.283787 0 0.142041 234.942803 0.142041 524.867683c0 231.829001 146.647305 428.553077 350.068189 497.952484 25.592898 4.819996 34.976961-11.38884 34.976961-25.294314 0-12.45521-0.469203-45.470049-0.725133-89.276559-142.381822 31.735193-172.453477-70.380469-172.453477-70.380469-23.246882-60.569859-56.816233-76.693384-56.816234-76.693385-46.493765-32.58829 3.540351-31.948468 3.540351-31.948467 51.356415 3.71097 78.356923 54.086324 78.356923 54.086324 45.683323 80.19108 119.817417 57.072162 148.993321 43.593236 4.649376-33.91059 17.915029-57.029508 32.50298-70.167195-113.675122-13.222997-233.151301-58.223843-233.1513-259.341366 0-57.285437 19.919806-104.163095 52.678715-140.846248-5.246544-13.265652-22.820334-66.626844 4.990615-138.884127 0 0 42.996069-14.076094 140.760939 53.787741 40.863327-11.644769 84.627183-17.445825 128.177764-17.6591 43.465272 0.213274 87.271782 6.014331 128.135109 17.6591 97.679561-67.906489 140.59032-53.787741 140.59032-53.787741 27.938914 72.257282 10.407779 125.618474 5.118579 138.884127 32.844219 36.683154 52.593405 83.560812 52.593405 140.846248 0 201.586726-119.646798 245.990404-233.663158 258.957473 18.341577 16.208835 34.721032 48.199958 34.721032 97.210357 0 70.167195-0.639822 126.7275-0.639823 143.960051 0 14.033439 9.213443 30.370239 35.190235 25.209005 203.250265-69.527373 349.769606-266.123484 349.769605-497.867175C1023.857959 234.942803 794.673558 0 512 0" fill="currentColor" p-id="1373"></path>
 </svg>

src/layout/SiderBar/Components/SettingDrawer/hook.ts

@@ -1,5 +1,3 @@
-import { getCache } from '@/utils/cache'
-
 export const useSwatchesColorOptions = () => [
   '#FFFFFF',
   '#18A058',

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 {

src/views/rely/views/rely-about/index.tsx

@@ -89,9 +89,10 @@ const RelyAbout = defineComponent({
     return (
       <div class="rely-about">
         <NCard title="关于项目">
-          ray-template 是一个基于 vue3、vite3、TypeScript 的中后台解决方案,
-          相对于市面上已有的成熟模板, 此项目的特点便是轻巧.
-          不需要手动去剔除冗余的、不相关的东西. 持续更新中.
+          ray template 是一个基于: tsx pinia vue3.x vite sass 的中后台解决方案.
+          项目干净与轻巧,
+          已经集成了很多项目中可能需要的搬砖工具可以让你快速起一个相关项目,
+          并且不需要剔除大量无用页面与组件.
         </NCard>
         <NCard title="项目信息">
           <NDescriptions bordered labelPlacement="left">