@4399ywkf/cli 0.0.21 → 1.0.2

package/dist/templates/app/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/app/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/app/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/app/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/app/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/app/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/app/store/user/index.tsx

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

package/dist/templates/app/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/app/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/app/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/app/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/app/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/app/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/app/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/app/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/app/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  important: `#${process.env.APP_NAME}`,
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: ['variant', '&:not(.light *)'],
+  theme: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [],
+};

package/dist/templates/app/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "declaration": false, // 生成声明文件
+    "esModuleInterop": true, // 允许 export = 导出，由import from 导入
+    "module": "commonjs", // 生成代码的模块标准
+    "moduleResolution": "node", // 模块解析策略
+    "noUnusedLocals": false, // 检查只声明，未使用的局部变量
+    "noImplicitAny": false, // 不允许隐式的 any 类型。
+    "noUnusedParameters": true, // 检查未使用的函数参数
+    "sourceMap": true, // 编译器编译时，生成目标文件的sourceMap文件。
+    "strict": true, // 开启所有严格的类型检查
+    "skipLibCheck": true, // 用来控制是否在编译时进行库文件检查的
+    "target": "es5", // 目标语言的版本
+    "jsx": "react", // 控制如何在 JavaScript 文件中发出 JSX 构造。这只影响以.tsx files 开头的 JS 文件的输出
+    "lib": ["es5", "dom", "dom.iterable", "esnext"], // TypeScript 包含内置 JS API 的一组默认类型定义（如Math），以及浏览器环境中找到的内容的类型定义（如document)
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"],
+      "@config/*": ["./config/*"],
+      "@store/*": ["./store/*"],
+      "@utils/*": ["./utils/*"]
+    }, // 将导入重新映射到相对于baseUrlif 集或 tsconfig 文件本身的查找位置
+    "types": ["jest", "node", "@testing-library/jest-dom"]
+  },
+  "exclude": ["**/node_modules", "**/examples", "**/dist", "**/fixtures", "**/*.test.ts", "**/*.e2e.ts", "**/templates", "ui"], // 指定解析时应跳过的文件名或模式数组include。
+  "include": ["./src/**/*", "./store/**/*", "./react-app-env.d.ts", "config/router", "**/*.test.ts", "**/*.test.tsx"] // 指定要包含在程序中的文件名或模式的数组。这些文件名是相对于包含该tsconfig.json文件的目录进行解析的。
+}

package/dist/templates/app//347/277/273/350/257/221.md

@@ -0,0 +1,9 @@
+1. 先在终端执行 node scripts/convert-locales-to-json.js （主要是将ts转换json文件）
+
+2. 配置OpenaiKey 和 baseURL
+```shell
+export OPENAI_PROXY_URL="xxxx"
+export OPENAI_API_KEY="sk-xxx"
+```
+
+3. 在chat目录根目录下，执行 `lobe-i18n`

package/dist/templates/auth/index.tsx

@@ -0,0 +1,82 @@
+import { create } from "zustand";
+const Cookie = require("js-cookie");
+import jwt from "@config/jwt";
+import {
+  apiLogin,
+  apiLogout
+} from './indexApi';
+
+interface BearState {
+  showCaptcha: boolean,
+  captchaR: string,
+  loginStatus: boolean,
+  login: (params: LoginProps) => Promise<{loginStatus: boolean}>,
+  loginLoading: boolean,
+
+  logout: () => Promise<void>,
+}
+
+interface LoginProps {
+  payload: Object,
+  redirect?: string,
+}
+
+const useStore = create<BearState>()((set) => ({
+  showCaptcha: false,
+  loginStatus: false,
+  captchaR: (Math.random().toString(36).substr(2) + Math.random().toString(36).substr(2))
+    .slice(2, 18),
+  loginLoading: false,
+  login: async (params: LoginProps) => {
+    set({ loginLoading: true })
+    const { payload, redirect } = params;
+    let defaultUrl = ""
+    let client = Cookie.get("client");
+    if (!client) {
+      client = (Math.random().toString(36).substr(2) + Math.random().toString(36).substr(2))
+        .slice(2, 18);
+      Cookie.set('client', client);
+    }
+    try {
+      const { data } = await apiLogin({ ...payload, _xsrf: client })
+      // const { data } = yield call(apiLogin, { ...payload, _xsrf: client });
+      // yield put({ type: 'showCaptcha', payload: false });
+      set({ showCaptcha: false });
+      jwt.setAccessToken(data);
+      if (data?.path != "") {
+        defaultUrl = data?.path
+      }
+      if (redirect) {
+        defaultUrl = redirect
+      }
+      set({ loginStatus: true, loginLoading: false, })
+      return { loginStatus: true }
+      // yield put({ type: "setLoginStatus", payload: true })
+    } catch (error) {
+      // yield put({ type: 'updateCaptcha' });
+      set({
+        captchaR: (Math.random().toString(36).substr(2) + Math.random().toString(36).substr(2))
+          .slice(2, 18)
+      })
+
+      // yield put({ type: 'global/showMsg', payload: error });
+      if ((error as Error).message === '请输入验证码') {
+        set({ showCaptcha: true })
+        // yield put({ type: 'showCaptcha', payload: true });
+      }
+      set({ loginStatus: false, loginLoading: false })
+      // yield put({ type: "setLoginStatus", payload: false })
+      return { loginStatus: false }
+    }
+  },
+
+  logout:async () => {
+    await apiLogout({})
+    Cookie.remove(jwt.key);
+    Cookie.remove('_xsrf');
+  }
+
+}))
+
+
+export default useStore;

package/dist/templates/auth/indexApi.tsx

@@ -0,0 +1,11 @@
+import { Request } from '@config/request';
+
+const request = new Request({});
+
+export function apiLogin(params: any) {
+  return request.post('/main/gateway/login', params);
+}
+
+export function apiLogout(params: any) {
+  return request.put('/main/gateway/logout', params);
+}

package/dist/templates/base/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createStyles } from "antd-style"
+
+
+const useStyles = createStyles(({ token, isDarkMode }) => ({
+  button: {
+    backgroundColor: token.colorPrimary,
+    width: '100px',
+    color: isDarkMode ? token.colorText : "#fff",
+    padding: `${token.paddingXS}px ${token.paddingSM}px`,
+    borderRadius: token.borderRadius,
+    cursor: 'pointer',
+    transition: 'all 0.3s ease',
+
+    '&:hover': {
+      backgroundColor: token.colorPrimaryHover,
+    },
+    '&:active': {
+      backgroundColor: token.colorPrimaryActive,
+    },
+  },
+}));
+
+export default function Base() {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.button}>
+      Base
+      {/* <Button type="primary">antd按钮</Button> */}
+    </div>
+  );
+}

package/dist/templates/base/layout.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Outlet } from 'react-router';
+
+export default function BaseLayout() {
+  return <Outlet />;
+}