refactor: refacotr preference

apps/antd-view/package.json

@@ -22,14 +22,14 @@
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
+    "@vben-core/preferences": "workspace:*",
+    "@vben-core/stores": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vben/preference": "workspace:*",
-    "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
@@ -37,6 +37,7 @@
     "ant-design-vue": "^4.2.1",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
+    "pinia": "2.1.7",
     "vue": "3.4.27",
     "vue-router": "^4.3.2"
   },

apps/antd-view/src/app.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import 'dayjs/locale/zh-cn';
 
+import { preferences, usePreferences } from '@vben-core/preferences';
+
 import { GlobalProvider } from '@vben/common-ui';
-import { preference, usePreference } from '@vben/preference';
 import { ConfigProvider, theme } from 'ant-design-vue';
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 import dayjs from 'dayjs';
@@ -12,21 +13,20 @@ defineOptions({ name: 'App' });
 
 dayjs.locale(zhCN.locale);
 
-const { isDark } = usePreference();
+const { isDark } = usePreferences();
 
 const tokenTheme = computed(() => {
-  const { colorPrimary, compact } = preference;
   const algorithms = isDark.value
     ? [theme.darkAlgorithm]
     : [theme.defaultAlgorithm];
 
   // antd 紧凑模式算法
-  if (compact) {
+  if (preferences.app.compact) {
     algorithms.push(theme.compactAlgorithm);
   }
   return {
     algorithms,
-    token: { colorPrimary },
+    token: { colorPrimary: preferences.theme.colorPrimary },
   };
 });
 </script>

apps/antd-view/src/bootstrap.ts

@@ -1,8 +1,9 @@
 import '@vben/styles';
 
+import { preferences } from '@vben-core/preferences';
+
+import { setupStore } from '@/store';
 import { setupI18n } from '@vben/locales';
-import { preference } from '@vben/preference';
-import { setupStore } from '@vben/stores';
 import { createApp } from 'vue';
 
 import App from './app.vue';
@@ -12,7 +13,7 @@ async function bootstrap(namespace: string) {
   const app = createApp(App);
 
   // 国际化 i18n 配置
-  await setupI18n(app, { defaultLocale: preference.locale });
+  await setupI18n(app, { defaultLocale: preferences.app.locale });
 
   // 配置 pinia-store
   await setupStore(app, { namespace });

apps/antd-view/src/layouts/basic.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/common-ui';
 
+import { preferences } from '@vben-core/preferences';
+import { useAccessStore } from '@vben-core/stores';
+
 import { Notification, UserDropdown } from '@vben/common-ui';
 import { IcRoundCreditScore, MdiDriveDocument, MdiGithub } from '@vben/icons';
 import { BasicLayout } from '@vben/layouts';
 import { $t } from '@vben/locales';
-import { preference } from '@vben/preference';
-import { useAccessStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -93,7 +94,7 @@ function handleNoticeClear() {
   <BasicLayout>
     <template #user-dropdown>
       <UserDropdown
-        :avatar="preference.defaultAvatar"
+        :avatar="preferences.app.defaultAvatar"
         :menus="menus"
         text="Vben Admin"
         description="ann.vben@gmail.com"

apps/antd-view/src/layouts/index.ts

@@ -2,7 +2,7 @@ const BasicLayout = () => import('./basic.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
+const AuthPageLayoutType = () =>
+  import('@vben/layouts').then((m) => m.AuthPageLayoutType);
 
-export { AuthPageLayout, BasicLayout, IFrameView };
+export { AuthPageLayoutType, BasicLayout, IFrameView };

apps/antd-view/src/main.ts

@@ -1,18 +1,20 @@
-import { setupPreference } from '@vben/preference';
+import { preferencesManager } from '@vben-core/preferences';
 
-import { overridesPreference } from './preference';
+import { overridesPreferences } from './preferences';
 
 /**
  * 应用初始化完成之后再进行页面加载渲染
  */
 async function initApplication() {
+  // name用于指定项目唯一标识
+  // 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
   const env = import.meta.env.PROD ? 'prod' : 'dev';
   const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${env}`;
 
   // app偏好设置初始化
-  await setupPreference({
+  await preferencesManager.initPreferences({
     namespace,
-    overrides: overridesPreference,
+    overrides: overridesPreferences,
   });
 
   import('./bootstrap').then((m) => m.bootstrap(namespace));

apps/antd-view/src/preference.ts

@@ -1,7 +0,0 @@
-import type { Preference } from '@vben/types';
-
-/**
- * @description 项目配置文件
- * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
- */
-export const overridesPreference: Partial<Preference> = {};

apps/antd-view/src/preferences.ts

@@ -0,0 +1,11 @@
+import type { DeepPartial, Preferences } from '@vben/types';
+
+/**
+ * @description 项目配置文件
+ * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ */
+export const overridesPreferences: DeepPartial<Preferences> = {
+  app: {
+    name: 'Vben Admin',
+  },
+};

apps/antd-view/src/router/guard/access.ts

@@ -1,9 +1,9 @@
 import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben/types';
 
+import { useAccessStore } from '@vben-core/stores';
 import type { RouteRecordRaw, Router } from 'vue-router';
 
 import { LOGIN_PATH } from '@vben/constants';
-import { useAccessStore } from '@vben/stores';
 import { filterTree, mapTree, traverseTreeValues } from '@vben/utils';
 
 import { dynamicRoutes } from '@/router/routes';

apps/antd-view/src/router/guard/index.ts

@@ -1,7 +1,7 @@
+import { preferences } from '@vben-core/preferences';
 import type { Router } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import { preference } from '@vben/preference';
 import { startProgress, stopProgress } from '@vben/utils';
 import { useTitle } from '@vueuse/core';
 
@@ -17,7 +17,7 @@ function configCommonGuard(router: Router) {
 
   router.beforeEach(async (to) => {
     // 页面加载进度条
-    if (preference.pageProgress) {
+    if (preferences.transition.progress) {
       startProgress();
     }
     to.meta.loaded = loadedPaths.has(to.path);
@@ -29,14 +29,14 @@ function configCommonGuard(router: Router) {
     loadedPaths.add(to.path);
 
     // 关闭页面加载进度条
-    if (preference.pageProgress) {
+    if (preferences.transition.progress) {
       stopProgress();
     }
 
     // 动态修改标题
-    if (preference.dynamicTitle) {
+    if (preferences.app.dynamicTitle) {
       const { title } = to.meta;
-      useTitle(`${$t(title)} - ${preference.appName}`);
+      useTitle(`${$t(title)} - ${preferences.app.name}`);
     }
   });
 }

apps/antd-view/src/router/routes/_essential.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { AuthPageLayout } from '@/layouts';
+import { AuthPageLayoutType } from '@/layouts';
 import { Fallback } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
@@ -9,7 +9,7 @@ import Login from '@/views/_essential/authentication/login.vue';
 /** 基本路由，这些路由是必须存在的 */
 const essentialRoutes: RouteRecordRaw[] = [
   {
-    component: AuthPageLayout,
+    component: AuthPageLayoutType,
     meta: {
       title: 'Authentication',
     },

apps/antd-view/src/router/routes/modules/vben.ts

@@ -1,15 +1,15 @@
+import { preferences } from '@vben-core/preferences';
 import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout, IFrameView } from '@/layouts';
 import { VBEN_GITHUB_URL } from '@vben/constants';
 import { $t } from '@vben/locales/helper';
-import { preference } from '@vben/preference';
 
 export const vbenRoutes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
-      icon: preference.logo,
+      icon: preferences.logo.source,
       title: 'Vben',
     },
     name: 'AboutLayout',

apps/antd-view/src/services/request.ts

@@ -2,7 +2,8 @@
  * 该文件可自行根据业务逻辑进行调整
  */
 
-import { useAccessStore } from '@vben/stores';
+import { useAccessStore } from '@vben-core/stores';
+
 import { message } from 'ant-design-vue';
 import axios, {
   AxiosError,

apps/antd-view/src/store/index.ts

@@ -0,0 +1,16 @@
+import type { InitStoreOptions } from '@vben-core/stores';
+
+import { initStore } from '@vben-core/stores';
+
+import type { App } from 'vue';
+
+/**
+ * @zh_CN 初始化pinia
+ * @param app vue app 实例
+ */
+async function setupStore(app: App, options: InitStoreOptions) {
+  const pinia = await initStore(options);
+  app.use(pinia);
+}
+
+export { setupStore };

apps/antd-view/src/store/modules/example.test.ts

@@ -0,0 +1,24 @@
+import { createPinia, setActivePinia } from 'pinia';
+import {
+  //  beforeEach,
+  describe,
+  // expect,
+  it,
+} from 'vitest';
+
+// import { useAccessStore } from '../modules/access';
+
+describe('useCounterStore', () => {
+  it('app Name with test', () => {
+    setActivePinia(createPinia());
+    // let referenceStore = usePreferencesStore();
+
+    // beforeEach(() => {
+    //   referenceStore = usePreferencesStore();
+    // });
+
+    // expect(referenceStore.appName).toBe('vben-admin');
+    // referenceStore.setAppName('vbenAdmin');
+    // expect(referenceStore.getAppName).toBe('vbenAdmin');
+  });
+});

apps/antd-view/src/store/modules/example.ts

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  actions: {
+    increment() {
+      this.count++;
+    },
+  },
+  getters: {
+    double: (state) => state.count * 2,
+  },
+  state: () => ({ count: 0 }),
+});

apps/antd-view/src/views/_essential/authentication/login.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import type { LoginAndRegisterParams } from '@vben/common-ui';
 
+import { useAccessStore } from '@vben-core/stores';
+
 import { getUserInfo, userLogin } from '@/services';
 import { AuthenticationLogin } from '@vben/common-ui';
 import { useRequest } from '@vben/hooks';
 import { $t } from '@vben/locales';
-import { useAccessStore } from '@vben/stores';
 import { notification } from 'ant-design-vue';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';