ch3chi-commons-vue 1.8.0 → 1.8.1

package/src/stores/ViewStore.ts

@@ -0,0 +1,701 @@
+import {ComponentPublicInstance, toRaw} from 'vue'
+import {defineStore, DefineStoreOptions} from 'pinia'
+import CAlert from "../components/CAlert.vue";
+import {CAlertModalData, CAlertModalType} from "../components/CAlertDefine";
+import CBSToast from "../components/CBSToast.vue";
+import CGlobalSpinner from "../components/CGlobalSpinner.vue";
+import {SessionUser} from "../model/SessionUser";
+import {ApiService} from "../api/ApiService";
+import _ from "lodash";
+import {AuthorizationService} from "../auth/AuthorizationService";
+import {CMenuItem} from "../model/CMenuItem";
+import {ShowMessageType} from "../model/ShowMessageDataModel";
+import {v4 as uuidv4} from 'uuid';
+import {AccessToken} from "../model/TokenUser";
+import {BaseDictionary, CBaseDictionary} from "../model/BaseDictionary";
+
+// ~ ----------------------------------------------------------
+
+export type RouterNavigationType = 'push' | 'back' | 'forward' | 'unknown';
+
+/**
+ * 全局視圖相關的狀態
+ */
+export type GlobalViewState = {
+  navigationType: RouterNavigationType;
+  isSidebarOpen: boolean;
+  mainBSModal: ComponentPublicInstance<typeof CAlert> | null;
+  toastView: ComponentPublicInstance<typeof CBSToast> | null;
+  globalSpinner: ComponentPublicInstance<typeof CGlobalSpinner> | null;
+  version: string;
+}
+
+/**
+ * 全局視圖相關的行為
+ */
+export interface GlobalViewActions {
+  routerNavigationType(type: RouterNavigationType): void;
+
+  toggleSidebar(): void;
+
+  showModal(data: CAlertModalData): void;
+
+  showModalError(data: CAlertModalData): void;
+
+  showModelAlert(data: CAlertModalData): void;
+
+  showModalConfirm(data: CAlertModalData): void;
+
+  hideModal(): void;
+
+  addToast(data: CAlertModalData): void;
+
+  showSpinner(): void;
+
+  hideSpinner(): void;
+
+  setVersion(version: string): void;
+}
+
+/**
+ * 全局視圖相關的 getters
+ */
+export interface GlobalViewGetters {
+  // no getters
+}
+
+/**
+ * 全局視圖 store 定義類型
+ */
+export type GlobalViewStoreOptionDefine = Omit<DefineStoreOptions<'view', GlobalViewState, GlobalViewGetters, GlobalViewActions>, 'id'>;
+
+/**
+ * 全局視圖 store 定義
+ */
+export const globalViewStoreOptions: GlobalViewStoreOptionDefine = {
+  state: (): GlobalViewState => ({
+    navigationType: 'unknown' as RouterNavigationType,
+    isSidebarOpen: true,
+    mainBSModal: null as ComponentPublicInstance<typeof CAlert> | null,
+    toastView: null as ComponentPublicInstance<typeof CBSToast> | null,
+    globalSpinner: null as ComponentPublicInstance<typeof CGlobalSpinner> | null,
+    version: ''
+  }),
+  actions: {
+    routerNavigationType(type: RouterNavigationType) {
+      this.navigationType = type;
+    },
+    toggleSidebar() {
+      this.isSidebarOpen = !this.isSidebarOpen
+    },
+    showModal(data: CAlertModalData) {
+      this.mainBSModal?.show({
+        ...data,
+        type: CAlertModalType.Info
+      })
+    },
+    showModalError(data: CAlertModalData) {
+      this.mainBSModal?.show({
+        ...data,
+        type: CAlertModalType.Error
+      })
+    },
+    showModelAlert(data: CAlertModalData) {
+      this.mainBSModal?.show({
+        ...data,
+        type: CAlertModalType.Alert
+      })
+    },
+    showModalConfirm(data: CAlertModalData) {
+      this.mainBSModal?.show({
+        ...data,
+        type: CAlertModalType.Confirm
+      })
+    },
+    hideModal() {
+      this.mainBSModal?.hide()
+    },
+    addToast(data: CAlertModalData) {
+      this.toastView?.addToast(data);
+    },
+    showSpinner() {
+      this.globalSpinner?.show();
+    },
+    hideSpinner() {
+      this.globalSpinner?.hide();
+    },
+    setVersion(version: string) {
+      this.version = version;
+      // 把 version 資訊，儲存到 localStorage
+      localStorage.setItem('app_version', version);
+    }
+  },
+  getters: {}
+};
+
+/**
+ * 保存視圖相關的狀態，例如側邊欄開啟狀態、模態框、Toast、全局加載等
+ */
+export const useViewStore = defineStore('view', globalViewStoreOptions);
+
+// 防止 Vite/rollup tree-shake 掉 type export
+export const __GlobalViewStoreDefine__ = null as unknown as
+  GlobalViewState &
+  GlobalViewActions &
+  GlobalViewGetters &
+  GlobalViewStoreOptionDefine;
+
+// ~ ----------------------------------------------------------
+// 使用者會話相關的 store 定義
+
+/**
+ * 使用者會話相關的狀態
+ */
+export type UserSessionState<T extends SessionUser = SessionUser> = {
+  user: T | null;
+  token?: AccessToken | null;
+  isAuth: boolean;
+  sessionCheckTimer: number | null;
+  shouldRedirectToLogin: boolean | null;
+  shouldRedirectToMessage?: boolean;
+  redirectMessageType?: ShowMessageType | null;
+}
+
+/**
+ * 使用者會話相關的行為
+ */
+export interface UserSessionActions<T extends SessionUser = SessionUser> {
+  // 保存使用者資訊
+  saveUser(user: T | null): void;
+
+  // 保存 token 資訊
+  saveToken(token: AccessToken | null): void;
+
+  // 設定是否已驗證通過
+  setAuthenticated(isAuth: boolean): void;
+
+  // 檢查目前的 session 是否有效
+  checkSessionIsValid(): Promise<boolean>;
+
+  // 使用自訂的 helper 函式驗證 session
+  validateSession(helper: () => Promise<T>): Promise<boolean>;
+
+  // 使用自訂的 helper 函式驗證 token session
+  refreshToken(helper: () => Promise<AccessToken>): Promise<boolean>;
+
+  // 開始定時檢查 session
+  startSessionCheck(): void;
+
+  // 停止定時檢查 session
+  stopSessionCheck(): void;
+
+  // 檢查是否有指定的權限
+  hasPermission(needPermission: string | string[]): boolean;
+
+  // 登出
+  logout(): void;
+
+  // 手動點擊登出
+  triggerManualLogout: () => void;
+
+  // 重置 ShouldRedirectToLogin 狀態
+  resetShouldRedirectToLogin: () => void;
+
+  // token 驗證失敗時觸發重定向，屬於自動行為
+  triggerAuthFailedRedirect: () => void;
+  // 重置重定向狀態
+  resetAuthFailedRedirect: () => void;
+}
+
+/**
+ * 使用者會話相關的 getters
+ */
+export interface UserSessionGetters<T extends SessionUser = SessionUser> {
+  // 取得目前使用者物件
+  currentUser(state: UserSessionState<T>): T | null;
+
+  // 取得目前存取權杖
+  currentToken(state: UserSessionState<T>): AccessToken | null;
+
+  // 是否已驗證通過
+  isAuthenticated(state: UserSessionState<T>): boolean;
+
+  // 取得使用者 UID
+  userUid(state: UserSessionState<T>): string | undefined;
+
+  // 取得使用者帳號
+  account(state: UserSessionState<T>): string | undefined;
+
+  // 取得使用者名稱
+  userName(state: UserSessionState<T>): string | undefined;
+
+  // 取得使用者電子郵件
+  email(state: UserSessionState<T>): string | undefined;
+
+  // 取得使用者角色代碼
+  roleCode(state: UserSessionState<T>): string | undefined;
+
+  // 取得使用者權限列表
+  permissions(state: UserSessionState<T>): string[] | undefined;
+
+  // 取得使用者選單項目
+  menuItems(): CMenuItem[];
+}
+
+/**
+ * 使用者會話 store 定義類型
+ */
+export type UserSessionStoreOptionDefine<T extends SessionUser = SessionUser> = Omit<DefineStoreOptions<'session', UserSessionState<T>, UserSessionGetters<T>, UserSessionActions<T>>, 'id'>;
+
+/**
+ * 使用者會話 store 定義
+ * 此方式僅適用於 SessionUser 類型，只使用 session 當作帳號權限驗證
+ */
+export const userSessionStoreOptions: UserSessionStoreOptionDefine<SessionUser> = {
+  state: (): UserSessionState<SessionUser> => ({
+    user: null as SessionUser | null, // 使用者資訊
+    isAuth: false, // 是否已登入
+    sessionCheckTimer: null as number | null, // 用於定時檢查會話的計時器
+    shouldRedirectToLogin: false // 是否應該重定向到登入頁面
+  }),
+  actions: {
+    saveUser(user: SessionUser | null) {
+      this.user = user;
+      this.isAuth = !!user; // 如果 user 不為 null，則 isAuth 為 true
+    },
+    saveToken(token: AccessToken | null) {
+    },
+    setAuthenticated(isAuth: boolean) {
+      this.isAuth = isAuth;
+    },
+    // 檢查目前的 session 是否有效
+    async checkSessionIsValid(): Promise<boolean> {
+      // 呼叫後端 API 以確認 session 是否仍然有效
+      const resp = await ApiService.call({endpointKey: 'me'});
+      if (!resp.isOk()) {
+        return false;
+      }
+      if (_.isNil(this.user)) {
+        this.saveUser(new SessionUser().load(resp.data));
+      } else {
+        this.user?.merge(resp.data);
+      }
+      this.isAuth = true;
+      return true;
+    },
+    async validateSession(helper: () => Promise<SessionUser>): Promise<boolean> {
+      return helper().then((user) => {
+        return !!user;
+      });
+    },
+    async refreshToken(helper: () => Promise<AccessToken>) {
+      return Promise.reject('Not implemented');
+    },
+    // 開始定時檢查 session
+    startSessionCheck() {
+      if (this.sessionCheckTimer) {
+        return;
+      }
+      this.sessionCheckTimer = window.setInterval(async () => {
+        const isValid = this.checkSessionIsValid();
+        if (!isValid) {
+          this.logout();
+        }
+      }, 10 * 1000) // 每 5 分鐘檢查一次
+    },
+    stopSessionCheck() {
+      if (this.sessionCheckTimer) {
+        clearInterval(this.sessionCheckTimer)
+        this.sessionCheckTimer = null
+      }
+    },
+    hasPermission(needPermission: string | string[]) {
+      return true;
+    },
+    logout() {
+      this.user = null;
+      this.isAuth = false;
+      this.stopSessionCheck();
+    },
+    triggerManualLogout () {
+      this.logout();
+      this.shouldRedirectToLogin = true;
+    },
+    resetShouldRedirectToLogin() {
+      this.shouldRedirectToLogin = false;
+    },
+    triggerAuthFailedRedirect() {
+    },
+    resetAuthFailedRedirect() {
+    }
+  },
+  getters: {
+    currentUser: (state): SessionUser | null => {
+      return state.user;
+    },
+    currentToken: (state): AccessToken | null => {
+      return state.token || null;
+    },
+    isAuthenticated: (state) => {
+      return state.isAuth;
+    },
+    userUid: (state) => {
+      return _.get(state.user, 'sub', '');
+    },
+    account: (state) => {
+      return _.get(state.user, 'account', '');
+    },
+    userName: (state) => {
+      return _.get(state.user, 'name', '');
+    },
+    email: (state) => {
+      return _.get(state.user, 'email', '');
+    },
+    roleCode: (state) => {
+      return _.get(state.user, 'roleCode', '');
+    },
+    permissions: (state) => {
+      return _.get(state.user, 'permissions', []);
+    },
+    menuItems(): CMenuItem[] {
+      return AuthorizationService.provideMenuByPermission({
+        roleCode: this.roleCode || '',
+        permissions: toRaw(this.permissions) || []
+      });
+    },
+  }
+}
+
+/**
+ * 持久化設定選項
+ */
+export interface PersistOptions<T extends SessionUser = SessionUser> {
+  enabled?: boolean;
+  key?: string;
+  storage?: Storage;
+  paths?: string[];
+  userConstructor?: new () => T;
+  serializer?: {
+    serialize: (state: any) => string;
+    deserialize: (str: string) => any;
+  };
+  // 事件回調
+  onLogout?: (user: T | null, token: AccessToken | null) => void;
+  onLogin?: (user: T) => void;
+}
+
+/**
+ * 創建使用者會話 store 選項的工廠函數，支援自訂的 SessionUser 類型
+ * @param persistOptions
+ */
+export function createUserSessionOptions<T extends SessionUser = SessionUser>(
+  persistOptions?: PersistOptions<T>
+): UserSessionStoreOptionDefine<T> {
+  // 定義 user class 建構子
+  const UserClassConstructor = persistOptions?.userConstructor ||  (SessionUser as new () => T);
+
+  // 使用者會話 store 定義
+  const options: UserSessionStoreOptionDefine<T> = {
+    state: (): UserSessionState<T> => ({
+      user: null as T | null,
+      token: null as AccessToken | null,
+      isAuth: false,
+      sessionCheckTimer: null as number | null,
+      shouldRedirectToLogin: false,
+      shouldRedirectToMessage: false,
+      redirectMessageType: null,
+    }),
+    actions: {
+      saveUser(user: T | null) {
+        this.user = user as any;
+
+        // 當 user 不為 null 時，觸發 onLogin 回調
+        if (user && persistOptions?.onLogin) {
+          persistOptions.onLogin(toRaw(user));
+        }
+      },
+      saveToken(token: AccessToken | null) {
+        this.token = token || null;
+      },
+      setAuthenticated(isAuth: boolean) {
+        this.isAuth = isAuth;
+      },
+      async checkSessionIsValid(): Promise<boolean> {
+        const resp = await ApiService.call({endpointKey: 'me'});
+        if (!resp.isOk()) {
+          return false;
+        }
+        if (_.isNil(this.user)) {
+          this.saveUser(new SessionUser().load(resp.data) as T);
+        } else {
+          this.user?.merge(resp.data);
+        }
+        this.isAuth = true;
+        return true;
+      },
+      async validateSession(helper: () => Promise<T>): Promise<boolean> {
+        if (_.isNil(this.user)) {
+          this.isAuth = false;
+          return Promise.resolve(false);
+        }
+        return helper()
+          .then((userData) => {
+            const r = !!userData;``
+            this.isAuth = r;
+            this.user!.loadFromValidateSession?.(userData as Record<string, any>);
+            return r;
+          });
+      },
+      async refreshToken(helper: () => Promise<AccessToken>) {
+        return helper().then((tokenData) => {
+          const isValid = !!tokenData && !tokenData.isExpired();
+          this.isAuth = isValid;
+          if (isValid) {
+            this.saveToken(tokenData);
+          }
+          return isValid;
+        });
+      },
+      startSessionCheck() {
+      },
+      stopSessionCheck() {
+      },
+      hasPermission(needPermission: string | string[]) {
+        // 取得目前的 permissions
+        const permissions = toRaw(this.permissions) || [];
+        if(_.isEmpty(permissions)) {
+          return false;
+        }
+        const neededPermissions = new Set(_.castArray(permissions));
+        if (_.isEmpty(neededPermissions)) {
+          return false;
+        }
+        // 檢查是否有任一需要的權限
+        return _.some(permissions, perm => neededPermissions.has(perm));
+      },
+      logout() {
+        // 觸發登出前的事件，讓外部可以進行額外處理
+        const beforeLogoutEvent = new CustomEvent('user:before-logout', {
+          detail: { user: this.user, token: this.token }
+        });
+        window.dispatchEvent(beforeLogoutEvent);
+
+        // 執行自定義的 onLogout 回調
+        if (persistOptions?.onLogout) {
+          persistOptions.onLogout(toRaw(this.user) as T, toRaw(this.token) || null);
+        }
+
+        // 執行登出邏輯
+        this.user = null;
+        this.token = null;
+        this.isAuth = false;
+
+        // 觸發登出後的事件
+        const afterLogoutEvent = new CustomEvent('user:after-logout', {
+          detail: { timestamp: Date.now() }
+        });
+        window.dispatchEvent(afterLogoutEvent);
+      },
+      triggerManualLogout() {
+        this.logout();
+        this.shouldRedirectToLogin = true;
+      },
+      resetShouldRedirectToLogin() {
+        this.shouldRedirectToLogin = false;
+      },
+      triggerAuthFailedRedirect() {
+        this.logout();
+        this.shouldRedirectToMessage = true;
+        this.redirectMessageType = ShowMessageType.AUTH_EXPIRED;
+      },
+      resetAuthFailedRedirect() {
+        this.shouldRedirectToMessage = false;
+        this.redirectMessageType = null;
+      }
+    },
+    getters: {
+      currentUser: (state: UserSessionState<T>): T | null => {
+        return state.user as T | null;
+      },
+      currentToken: (state: UserSessionState<T>): AccessToken | null => {
+        return state.token || null;
+      },
+      isAuthenticated: (state: UserSessionState<T>) => {
+        return state.isAuth;
+      },
+      userUid: (state: UserSessionState<T>) => {
+        return _.get(state.user, 'userUid', '');
+      },
+      account: (state: UserSessionState<T>) => {
+        return _.get(state.user, 'account', '');
+      },
+      userName: (state: UserSessionState<T>) => {
+        return _.get(state.user, 'name', '');
+      },
+      email: (state: UserSessionState<T>) => {
+        return _.get(state.user, 'email', '');
+      },
+      roleCode: (state: UserSessionState<T>) => {
+        return _.get(state.user, 'roleCode', '');
+      },
+      permissions: (state: UserSessionState<T>) => {
+        return _.get(state.user, 'permissions', []);
+      },
+      menuItems(): CMenuItem[] {
+        return AuthorizationService.provideMenuByPermission({
+          roleCode: this.roleCode || '',
+          permissions: toRaw(this.permissions) || []
+        });
+      },
+    } as any,
+    // 添加持久化設定
+    ...(persistOptions?.enabled && {
+      persist: {
+        key: persistOptions.key || `user-session-${uuidv4()}`,
+        storage: persistOptions.storage || localStorage,
+        paths: persistOptions.paths || ['user', 'token', 'isAuth'],
+        serializer: persistOptions.serializer || {
+          serialize: (state: UserSessionState<T>): string => {
+            return JSON.stringify({
+              user: state.user?.toJSON(),
+              token: state.token?.toJSON(),
+              isAuth: state.isAuth
+            });
+          },
+          deserialize: (str: string): Partial<UserSessionState<T>> => {
+            const data = JSON.parse(str);
+            return {
+              user: data.user ? new UserClassConstructor().loadJSON(data.user) as T : null,
+              token: data.token ? new AccessToken().loadJSON(data.token) : null,
+              isAuth: data.isAuth
+            };
+          }
+        }
+      }
+    })
+  };
+  return options;
+}
+/**
+ * 創建使用者會話 store 的工廠函數，支援自訂的 SessionUser 類型
+ */
+export function createUserSessionStore<T extends SessionUser = SessionUser>(
+  storeId: string = 'session',
+  persistOptions?: PersistOptions<T>
+) {
+  const options: UserSessionStoreOptionDefine<T> = createUserSessionOptions<T>(persistOptions);
+  return defineStore(storeId, options);
+}
+
+/**
+ * 預設的使用者會話 store（使用 SessionUser）
+ */
+export const useUserSessionStore = createUserSessionStore<SessionUser>();
+
+
+// 防止 Vite/rollup tree-shake 掉 type export
+export const __UserSessionTypes__ = null as unknown as
+  UserSessionState &
+  UserSessionGetters &
+  UserSessionActions &
+  UserSessionStoreOptionDefine &
+  PersistOptions;
+
+// ~ ----------------------------------------------------------
+// ~ Dictionary Store 定義
+
+export interface DictionaryPersistOptions<T extends BaseDictionary = CBaseDictionary> {
+  enabled?: boolean;
+  key?: string;
+  storage?: Storage;
+  paths?: string[];
+  dictConstructor?: new () => T;
+  serializer?: {
+    serialize: (state: any) => string;
+    deserialize: (str: string) => any;
+  };
+}
+
+export type DictionaryState<T extends BaseDictionary = CBaseDictionary> = {
+  dictionary: T | null;
+}
+
+export interface DictionaryActions<T extends BaseDictionary = CBaseDictionary> {
+  setDictionary(dict: T): void;
+  loadAll(): void;
+  loadDictionary(key: string): void;
+}
+
+export interface DictionaryGetters<T extends BaseDictionary = CBaseDictionary> {
+  dict(): T | null;
+}
+
+/**
+ * Dictionary store 定義類型
+ */
+export type DictionaryStoreOptionDefine<T extends BaseDictionary = CBaseDictionary> = Omit<DefineStoreOptions<'dictionary', DictionaryState<T>, DictionaryGetters<T>, DictionaryActions<T>>, 'id'>;
+
+/**
+ * 創建 Dictionary store 選項的工廠函數
+ * @param dictConstructor
+ */
+export function createDictionaryStoreOptions<T extends BaseDictionary = CBaseDictionary>(
+  options : {
+    dictionary?: T,
+    persistOptions?: DictionaryPersistOptions<T>
+  }
+): DictionaryStoreOptionDefine<T> {
+
+  const dictConstructor = options.persistOptions?.dictConstructor || (CBaseDictionary as new () => T);
+
+  return {
+    state: (): DictionaryState<T> => ({
+      dictionary: options.dictionary as T | null
+    }),
+    actions: {
+      setDictionary(dict: T | null) {
+        this.dictionary = dict as any;
+      },
+      loadAll() {
+        this.dictionary?.loadAll();
+      },
+      async loadDictionary(key: string) {
+        await this.dictionary?.loadDictionary(key);
+      }
+    },
+    getters: {
+      dict(): T | null {
+        return toRaw(this.dictionary) as T || null;
+      }
+    },
+    // 添加持久化設定
+    ...(options.persistOptions?.enabled && {
+      persist: {
+        key: options.persistOptions.key || `dictionary-store`,
+        storage: options.persistOptions.storage || localStorage,
+        paths: options.persistOptions.paths || ['dictionary'],
+        serializer: options.persistOptions.serializer || {
+          serialize: (state: DictionaryState<T>): string => {
+            return JSON.stringify({
+              dictionary: state.dictionary
+            });
+          },
+          deserialize: (str: string): Partial<DictionaryState<T>> => {
+            const data = JSON.parse(str);
+            return {
+              dictionary: new dictConstructor().loadFromStore(data.dictionary) as T
+            };
+          }
+        }
+      }
+    })
+  };
+}
+
+export const __DictionaryStoreTypes__ = null as unknown as
+  DictionaryState &
+  DictionaryActions &
+  DictionaryGetters &
+  DictionaryStoreOptionDefine;
+
+// ~ ----------------------------------------------------------