@4399ywkf/cli 0.0.21 → 1.0.2

package/dist/templates/store/middleware/createHyperStorage/keyMapper.ts

@@ -0,0 +1,57 @@
+import type { HyperStorageOptionsObj } from './type';
+
+export const createKeyMapper = (options: HyperStorageOptionsObj) => {
+  const mapStateKeyToStorageKey = (
+    key: string,
+    mode: keyof HyperStorageOptionsObj = 'localStorage',
+  ) => {
+    const media = options[mode];
+    if (media === false) return key;
+
+    const selectors = media?.selectors;
+    if (!selectors) return key;
+
+    let storageKey: string | undefined;
+
+    for (const selector of selectors) {
+      if (typeof selector === 'string') {
+        if (selector === key) storageKey = key;
+      } else {
+        if (selector[key]) storageKey = selector[key];
+      }
+    }
+
+    return storageKey;
+  };
+
+  const getStateKeyFromStorageKey = (
+    key: string,
+    mode: keyof HyperStorageOptionsObj = 'localStorage',
+  ) => {
+    const media = options[mode];
+    if (media === false) return key;
+
+    const selectors = media?.selectors;
+    if (!selectors) return key;
+
+    let stateKey: string | undefined;
+
+    for (const item of selectors) {
+      // 对象如果是 字符串，直接返回该 item key
+      if (typeof item === 'string') {
+        if (item === key) stateKey = key;
+      } else {
+        for (const [k, v] of Object.entries(item)) {
+          if (v === key) stateKey = k;
+        }
+      }
+    }
+
+    return stateKey;
+  };
+
+  return {
+    getStateKeyFromStorageKey,
+    mapStateKeyToStorageKey,
+  };
+};

package/dist/templates/store/middleware/createHyperStorage/localStorage.ts

@@ -0,0 +1,23 @@
+import type { StorageValue } from 'zustand/middleware';
+
+export const createLocalStorage = <State>() => ({
+  getItem: <T extends State>(name: string): StorageValue<T> | undefined => {
+    if (!global.localStorage) return undefined;
+    const string = localStorage.getItem(name);
+
+    if (string) return JSON.parse(string) as StorageValue<T>;
+
+    return undefined;
+  },
+  removeItem: (name: string) => {
+    if (global.localStorage) localStorage.removeItem(name);
+  },
+  setItem: <T extends State>(
+    name: string,
+    state: T,
+    version: number | undefined,
+  ) => {
+    if (global.localStorage)
+      localStorage.setItem(name, JSON.stringify({ state, version }));
+  },
+});

package/dist/templates/store/middleware/createHyperStorage/type.ts

@@ -0,0 +1,27 @@
+export type StorageSelector = string | Record<string, string>;
+
+export interface LocalStorageOptions {
+  dbName?: string;
+  /**
+   * @default 'localStorage'
+   */
+  mode?: 'indexedDB' | 'localStorage';
+  selectors: StorageSelector[];
+}
+
+export type HyperStorageOptionsObj = {
+  localStorage?: LocalStorageOptions | false;
+  url?: {
+    /**
+     * @default 'hash'
+     */
+    mode?: 'hash' | 'search';
+    selectors: StorageSelector[];
+  };
+};
+
+export type HyperStorageOptionsFn = () => HyperStorageOptionsObj;
+
+export type HyperStorageOptions =
+  | HyperStorageOptionsObj
+  | HyperStorageOptionsFn;

package/dist/templates/store/middleware/createHyperStorage/urlStorage.ts

@@ -0,0 +1,85 @@
+import { isEmpty } from 'lodash-es';
+import type { StorageValue } from 'zustand/middleware';
+
+interface UrlSearchHelper {
+  getUrlSearch: () => string;
+  setUrlSearch: (params: URLSearchParams) => void;
+}
+
+const createUrlSearch = (mode: 'search' | 'hash' = 'hash'): UrlSearchHelper => {
+  if (mode === 'hash')
+    return {
+      getUrlSearch: () => location.hash.slice(1),
+      setUrlSearch: (params: URLSearchParams) => {
+        location.hash = params.toString();
+      },
+    };
+
+  return {
+    getUrlSearch: () => location.search.slice(1),
+    setUrlSearch: (params: URLSearchParams) => {
+      if (params.size === 0) return;
+
+      history.replaceState({}, '', `?${params.toString()}`);
+    },
+  };
+};
+
+export const creatUrlStorage = <State extends object>(
+  mode: 'hash' | 'search' = 'hash',
+) => {
+  const { setUrlSearch, getUrlSearch } = createUrlSearch(mode);
+
+  return {
+    getItem: <T extends State>(): StorageValue<T> | undefined => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+
+      if (searchParameters.size === 0) return undefined;
+
+      const state = Object.fromEntries(searchParameters.entries()) as T;
+
+      return { state };
+    },
+    removeItem: (key?: string) => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+      if (key) searchParameters.delete(key);
+
+      setUrlSearch(searchParameters);
+    },
+    setItem: <T extends State>(name: string, state: T) => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+
+      for (const [urlKey, v] of Object.entries(state)) {
+        switch (typeof v) {
+          case 'boolean': {
+            searchParameters.set(urlKey, (v ? 1 : 0).toString());
+            break;
+          }
+
+          case 'bigint':
+          case 'number': {
+            searchParameters.set(urlKey, v.toString());
+            break;
+          }
+
+          case 'string': {
+            searchParameters.set(urlKey, v);
+            break;
+          }
+
+          case 'object': {
+            if (isEmpty(v)) {
+              searchParameters.delete(urlKey);
+              continue;
+            }
+
+            searchParameters.set(urlKey, JSON.stringify(v));
+            break;
+          }
+        }
+      }
+
+      setUrlSearch(searchParameters);
+    },
+  };
+};

package/dist/templates/store/theme/index.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+interface ThemeStore {
+  theme: string;
+  setTheme: (theme: string) => void;
+  isDark: () => boolean;
+}
+
+export const useThemeStore = create<ThemeStore, [['zustand/persist', unknown]]>(
+  persist(
+    (set, get) => ({
+      theme: 'light',
+      setTheme: theme => set({ theme }),
+      isDark: () => get().theme === 'dark',
+    }),
+    {
+      name: 'theme',
+      storage: createJSONStorage(() => localStorage),
+      version: 1,
+    },
+  ),
+);
+
+export default useThemeStore;

package/dist/templates/store/types.ts

@@ -0,0 +1,83 @@
+interface SiderRoutesItem {
+  path: string;
+  name: string;
+  id: string;
+  icon: any;
+  perarr: string;
+  children?: SiderRoutesItem[];
+}
+
+export interface SiderRoutesProps {
+  name?: string;
+  routes?: SiderRoutesItem[];
+}
+
+export interface IBestAFSRoute {
+  /**
+   * @description 菜单上显示的名称，没有则不展示该菜单。
+   */
+  name?: string;
+  /**
+   * @description icon 图标。
+   */
+  icon?: any;
+  /**
+   * @description 权限位。
+   */
+  perarr?: string;
+  /**
+   * @name false 时不显示顶栏
+   */
+  headerRender?: boolean;
+  /**
+   * @name false 时不显示页脚
+   */
+  footerRender?: false;
+  /**
+   * @name false 时不显示菜单
+   */
+  menuRender?: false;
+  /**
+   * @name false 时不显示菜单的 title 和 logo
+   */
+  menuHeaderRender?: false;
+  /**
+   * @name false 时隐藏子菜单
+   */
+  hideChildrenInMenu?: false;
+  /**
+   * @name false 时隐藏自己和子菜单
+   */
+  hideInMenu?: false;
+  /**
+   * @name false 时不跳过权限认证
+   */
+  skipAuth?: boolean;
+  /**
+   * @name string 归属某个具体的分类
+   */
+  category?: string;
+  /**
+   * @name string 路由的 title
+   */
+  title?: string;
+}
+
+// 定义路由的数据结构
+export interface RoutesTree {
+  key?: string;
+  path?: string;
+  wrappers?: string[];
+  component?: string | (() => React.JSX.Element);
+  routes?: RoutesTree[];
+  microApp?: string;
+  entry?: string;
+  redirect?: string;
+  props?: IBestAFSRoute;
+}
+
+export interface ApiParams {
+  id: string | number[] | string[] | number;
+  action: string;
+  data: any;
+}

package/dist/templates/store/user/index.tsx

@@ -0,0 +1 @@
+export * from './store';

package/dist/templates/store/user/indexApi.tsx

@@ -0,0 +1,5 @@
+import request from '@config/request';
+
+export function apiGetV1GatewayProfile(params?: Record<string, any>) {
+  return request.get('/v1/gateway/profile', params);
+}

package/dist/templates/store/user/initialState.ts

@@ -0,0 +1,15 @@
+import {
+  type UserProfileState,
+  initialState as initialProfileState,
+} from './slices/profile/initialState';
+import {
+  type UserSettingsState,
+  initialState as initialSettingsState,
+} from './slices/settings/initialState';
+
+export type UserState = UserProfileState & UserSettingsState;
+
+export const initialState: UserState = {
+  ...initialProfileState,
+  ...initialSettingsState,
+};

package/dist/templates/store/user/slices/profile/actions.ts

@@ -0,0 +1,20 @@
+import type { StateCreator } from 'zustand/vanilla';
+
+import type { UserStore } from '../../store';
+import { apiGetV1GatewayProfile } from './api';
+
+export interface UserProfileAction {
+  getUserProfile: () => Promise<void>;
+}
+
+export const createProfileSlice: StateCreator<
+  UserStore,
+  [['zustand/devtools', never]],
+  [],
+  UserProfileAction
+> = (set, get) => ({
+  getUserProfile: async () => {
+    const { data } = await apiGetV1GatewayProfile();
+    set({ user: data });
+  },
+});

package/dist/templates/store/user/slices/profile/api.ts

@@ -0,0 +1,5 @@
+import request from '@config/request';
+
+export function apiGetV1GatewayProfile(params?: Record<string, any>) {
+  return request.get('/v1/gateway/profile', params);
+}

package/dist/templates/store/user/slices/profile/initialState.ts

@@ -0,0 +1,14 @@
+import type { User } from '@/types/user';
+
+export interface UserProfileState {
+  user?: User;
+}
+
+export const initialState: UserProfileState = {
+  user: {
+    id: 0,
+    name: '',
+    cname: '',
+    staffId: '',
+  },
+};

package/dist/templates/store/user/slices/settings/actions.ts

@@ -0,0 +1,23 @@
+import type { StateCreator } from "zustand/vanilla";
+
+import type { UserStore } from "../../store";
+import type { AnimationMode, ThemeMode } from "./initialState";
+
+export interface UserSettingsAction {
+  setAnimationMode: (animationMode: AnimationMode) => void;
+  setThemeMode: (themeMode: ThemeMode) => void;
+}
+
+export const createSettingsSlice: StateCreator<
+  UserStore,
+  [["zustand/devtools", never]],
+  [],
+  UserSettingsAction
+> = (set, get) => ({
+  setAnimationMode: (animationMode: AnimationMode) => {
+    set({ animationMode });
+  },
+  setThemeMode: (themeMode: ThemeMode) => {
+    set({ themeMode });
+  },
+});

package/dist/templates/store/user/slices/settings/initialState.ts

@@ -0,0 +1,32 @@
+export type AnimationMode = "disabled" | "agile" | "elegant";
+export type ResponseAnimationStyle = "smooth" | "fadeIn" | "none";
+export type ThemeMode = "auto" | "dark" | "light";
+import type {
+  HighlighterProps,
+  MermaidProps,
+  NeutralColors,
+  PrimaryColors,
+} from "@/styles";
+
+export interface UserSettingsState {
+  animationMode?: AnimationMode;
+  neutralColor?: NeutralColors;
+  primaryColor?: PrimaryColors;
+  fontSize: number;
+  transitionMode?: ResponseAnimationStyle;
+  highlighterTheme?: HighlighterProps["theme"];
+  mermaidTheme?: MermaidProps["theme"];
+
+  themeMode?: ThemeMode;
+}
+
+export const initialState: UserSettingsState = {
+  animationMode: "agile",
+  neutralColor: undefined,
+  primaryColor: undefined,
+  fontSize: 14,
+  transitionMode: "fadeIn",
+  highlighterTheme: "lobe-theme",
+  mermaidTheme: "lobe-theme",
+  themeMode: "auto",
+};

package/dist/templates/store/user/store.ts

@@ -0,0 +1,39 @@
+import { subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { StateCreator } from 'zustand/vanilla';
+
+import { createDevtools } from '../middleware/createDevtools';
+import { type UserState, initialState } from './initialState';
+
+import {
+  type UserProfileAction,
+  createProfileSlice,
+} from './slices/profile/actions';
+import {
+  type UserSettingsAction,
+  createSettingsSlice,
+} from './slices/settings/actions';
+
+//  ===============  聚合 createStoreFn ============ //
+
+export type UserStore = UserState & UserProfileAction & UserSettingsAction;
+
+const createStore: StateCreator<UserStore, [['zustand/devtools', never]]> = (
+  ...parameters
+) => ({
+  ...initialState,
+  ...createProfileSlice(...parameters),
+  ...createSettingsSlice(...parameters),
+});
+
+//  ===============  实装 useStore ============ //
+
+const devtools = createDevtools('user');
+
+export const useUserStore = createWithEqualityFn<UserStore>()(
+  subscribeWithSelector(devtools(createStore)),
+  shallow,
+);
+
+export const getUserStoreState = () => useUserStore.getState();

package/dist/templates/store.ts

@@ -0,0 +1,39 @@
+import { subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { StateCreator } from 'zustand/vanilla';
+
+import { createDevtools } from '../middleware/createDevtools';
+import { type UserState, initialState } from './initialState';
+
+import {
+  type UserProfileAction,
+  createProfileSlice,
+} from './slices/profile/actions';
+import {
+  type UserSettingsAction,
+  createSettingsSlice,
+} from './slices/settings/actions';
+
+//  ===============  聚合 createStoreFn ============ //
+
+export type UserStore = UserState & UserProfileAction & UserSettingsAction;
+
+const createStore: StateCreator<UserStore, [['zustand/devtools', never]]> = (
+  ...parameters
+) => ({
+  ...initialState,
+  ...createProfileSlice(...parameters),
+  ...createSettingsSlice(...parameters),
+});
+
+//  ===============  实装 useStore ============ //
+
+const devtools = createDevtools('user');
+
+export const useUserStore = createWithEqualityFn<UserStore>()(
+  subscribeWithSelector(devtools(createStore)),
+  shallow,
+);
+
+export const getUserStoreState = () => useUserStore.getState();

package/dist/templates/style.ts

@@ -0,0 +1,42 @@
+import { createStyles } from 'antd-style';
+
+export const alphaBg = {
+  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',
+  light:
+    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',
+};
+
+export const useStyles = createStyles(({ css, token }) => ({
+  scaleBox: css`
+    cursor: pointer;
+
+    position: relative;
+
+    width: 48px;
+    height: 32px;
+
+    background-position:
+      0 0,
+      0 8px,
+      8px -8px,
+      -8px 0;
+    background-size: 16px 16px;
+
+    transition: scale 400ms ${token.motionEaseOut};
+
+    &:active {
+      scale: 0.8;
+    }
+  `,
+  scaleItem: css`
+    width: 100%;
+    height: 100%;
+  `,
+  scaleRowTitle: css`
+    width: 64px;
+    height: 32px;
+  `,
+  text: css`
+    opacity: 0.5;
+  `,
+}));

package/dist/templates/styleMock.ts

@@ -0,0 +1 @@
+export default {};

package/dist/templates/styles/antdOverride.ts

@@ -0,0 +1,24 @@
+import { type Theme, css } from 'antd-style';
+import { rgba } from 'polished';
+
+export default ({ token }: { prefixCls: string; token: Theme }) => css`
+  .${token.prefixCls}-popover {
+    z-index: 1100;
+  }
+
+  .${token.prefixCls}-menu-sub.${token.prefixCls}-menu-vertical {
+    border: 1px solid ${token.colorBorder};
+    box-shadow: ${token.boxShadow};
+  }
+
+  .${token.prefixCls}-menu-item-selected {
+    .${token.prefixCls}-menu-title-content {
+      color: ${token.colorText};
+    }
+  }
+
+  .${token.prefixCls}-modal-mask, .${token.prefixCls}-drawer-mask {
+    background: ${rgba(token.colorBgLayout, 0.5)} !important;
+    backdrop-filter: blur(2px);
+  }
+`;

package/dist/templates/styles/customTheme.ts

@@ -0,0 +1,70 @@
+import {
+  blue,
+  cyan,
+  geekblue,
+  gold,
+  green,
+  lime,
+  magenta,
+  orange,
+  purple,
+  red,
+  volcano,
+  yellow,
+} from '@/color/colors';
+import { mauve, olive, sage, sand, slate } from '@/color/neutrals';
+
+export const primaryColors = {
+  blue: blue.dark[9],
+  cyan: cyan.dark[9],
+  geekblue: geekblue.dark[9],
+  gold: gold.dark[9],
+  green: green.dark[9],
+  lime: lime.dark[9],
+  magenta: magenta.dark[9],
+  orange: orange.dark[9],
+  purple: purple.dark[9],
+  red: red.dark[9],
+  volcano: volcano.dark[9],
+  yellow: yellow.dark[9],
+};
+
+export type PrimaryColorsObj = typeof primaryColors;
+export type PrimaryColors = keyof PrimaryColorsObj;
+export const primaryColorsSwatches = [
+  primaryColors.red,
+  primaryColors.orange,
+  primaryColors.gold,
+  primaryColors.yellow,
+  primaryColors.lime,
+  primaryColors.green,
+  primaryColors.cyan,
+  primaryColors.blue,
+  primaryColors.geekblue,
+  primaryColors.purple,
+  primaryColors.magenta,
+  primaryColors.volcano,
+];
+export const neutralColors = {
+  mauve: mauve.dark[9],
+  olive: olive.dark[9],
+  sage: sage.dark[9],
+  sand: sand.dark[9],
+  slate: slate.dark[9],
+};
+export const neutralColorsSwatches = [
+  neutralColors.mauve,
+  neutralColors.slate,
+  neutralColors.sage,
+  neutralColors.olive,
+  neutralColors.sand,
+];
+
+export type NeutralColorsObj = typeof neutralColors;
+export type NeutralColors = keyof NeutralColorsObj;
+
+export const findCustomThemeName = (type: 'primary' | 'neutral', value: string) => {
+  const res = type === 'primary' ? primaryColors : neutralColors;
+  const result = Object.entries(res).find((item) => item[1] === value);
+  return result?.[0];
+};