@yyp92-cli/template-react-pc 1.1.0

package/template/src/store/login.ts

@@ -0,0 +1,40 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { USER_INFO} from '@/global/constants'
+
+type UserInfoStoreState = {
+    userInfo: {
+        userId: string,
+        userName: string
+    },
+    token: string
+}
+
+type UserInfoStoreActions = {
+    setUserInfo: (
+        userInfo: UserInfoStoreState['userInfo']
+    ) => void,
+    setToken: (token: string) => void
+}
+
+type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
+
+export const userInfoStore = create<UserInfoStore>()(
+    persist(
+        (set) => ({
+            userInfo: {
+                userName: '小明',
+                userId: '111'
+            },
+            token: '',
+            setUserInfo: (userInfo) => set({userInfo}),
+            setToken: (token) => set({token})
+        }),
+        {
+            name: USER_INFO
+        }
+    )
+)

package/template/src/store/menus.ts

@@ -0,0 +1,28 @@
+/**
+ * * 用户菜单
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { MENUS} from '@/global/constants'
+
+type MenusStoreState = {
+    menus: any[]
+}
+
+type MenusStoreActions = {
+    setMenus: (menus: string[]) => void,
+}
+
+type MenusStore = MenusStoreState & MenusStoreActions
+
+export const menusStore = create<MenusStore>()(
+    persist(
+        (set) => ({
+            menus: [],
+            setMenus: (menus) => set({menus})
+        }),
+        {
+            name: MENUS
+        }
+    )
+)

package/template/src/store/permission.ts

@@ -0,0 +1,28 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { PERMISSION} from '@/global/constants'
+
+type PermissionStoreState = {
+    permissions: string[]
+}
+
+type PermissionStoreActions = {
+    setPermissions: (permissions: string[]) => void,
+}
+
+type PermissionStore = PermissionStoreState & PermissionStoreActions
+
+export const permissionStore = create<PermissionStore>()(
+    persist(
+        (set) => ({
+            permissions: [],
+            setPermissions: (permissions) => set({permissions})
+        }),
+        {
+            name: PERMISSION
+        }
+    )
+)

package/template/src/theme/darkTheme.scss

@@ -0,0 +1,47 @@
+:root[data-theme="dark"] {
+    --primary-text-color: #FFFFFF;
+    --primary-white-color: #2A2A2D;
+
+    // 全局主色
+    --primary-color: #3591F4;
+    --primary-color1: rgba(53, 145, 244, 0.1);
+    // 链接色
+    --link-color: #3591F4;
+    // 成功色
+    --success-color: #0CAA43;
+    --success-color1: rgba(12, 170, 67, 0.1);
+    // 警告色
+    --warning-color: #FFA00A;
+    --warning-color1: rgba(255, 160, 10, 0.1);
+    // 错误色
+    --error-color: #F43835;
+    --error-color1: rgba(244, 56, 53, 0.1);
+
+    // 主文本色
+    --text-color: #FFFFFF;
+    // 次文本色
+    --text-color-secondary: #898D97;
+
+    // 白的背景
+    --bg-white-color: #1C1C1C;
+    --bg-grey-color: #161616;
+    --bg-grey-color1: transparent;
+    --bg-black2-color: #222222;
+    --bg-hover-color: rgba(53, 145, 244, 0.1);
+    --bg-white-color1: rgba(0, 0, 0, 0.5);
+
+    // 边框、输入框、分割线
+    --border-color-base: #2A2A2D;
+    // icon
+    --icon-color: #898D97;
+
+    // 主字号
+    --font-size-base: 14px;
+  
+    // 组件/浮层圆角
+    --border-radius-base: 4px;
+    --modal-border-radius-base: 5px;
+  
+    // 阴影
+    --box-shadow-color: #000000;
+}

package/template/src/theme/lightTheme.scss

@@ -0,0 +1,49 @@
+:root[data-theme="light"] {
+    --primary-text-color: #FFFFFF;
+    --primary-white-color: #FFFFFF;
+  
+    // 全局主色
+    --primary-color: #3591F4;
+    --primary-color1: rgba(53, 145, 244, 0.1);
+    // 链接色
+    --link-color: var(--primary-color);
+    // 成功色
+    --success-color: #0CAA43;
+    --success-color1: rgba(12, 170, 67, 0.1);
+    // 警告色
+    --warning-color: #FFA00A;
+    --warning-color1: rgba(255, 160, 10, 0.1);
+    // 错误色
+    --error-color: #F43835;
+    --error-color1: rgba(244, 56, 53, 0.1);
+  
+    // 主文本色
+    --text-color: #363A45; 
+    // 次文本色
+    --text-color-secondary: #898D97; 
+  
+    // 白的背景
+    --bg-white-color: var(--primary-white-color);
+    --bg-grey-color: #F2F4F9;
+    --bg-grey-color1: var(--bg-grey-color);
+    --bg-black2-color: var(--primary-white-color);
+    --bg-hover-color: rgba(53, 145, 244, 0.1);
+    --bg-white-color1: rgba(255, 255, 255, 0.5);
+  
+    // 边框、输入框、分割线
+    --border-color-base: #DDE6F0;
+    // icon
+    --icon-color: #CCD6DD;
+  
+  
+  
+    // 主字号
+    --font-size-base: 14px;
+  
+    // 组件/浮层圆角
+    --border-radius-base: 4px;
+    --modal-border-radius-base: 5px;
+  
+    // 阴影
+    --box-shadow-color: #000000;
+}

package/template/src/utils/base64ToBlob.ts

@@ -0,0 +1,41 @@
+import { v4 as uuidv4 } from 'uuid'
+
+export const base64ToBlob = (
+    base64String: any,
+    type: string, 
+    fileName: string
+) => {
+    type = type || 'png'
+    let base64Arr = [];
+
+    try {
+        base64Arr = base64String?.split?.(",");
+    }
+    catch (error) {
+        base64String = `data:image/${type || "png"};base64,` + base64String;
+    }
+
+    base64Arr = base64String?.split(",");
+
+    let mime = base64Arr?.[0]?.match(/:(.*?);/)?.[1] || `image/${type}`;
+    // 去掉url的头，并转化为byte
+    let bytes = window.atob(base64Arr[1]); 
+    // 处理异常,将ascii码小于0的转换为大于0
+    let ab = new window.ArrayBuffer(bytes.length); 
+    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
+    let ia = new window.Uint8Array(ab); 
+
+    for (let i = 0; i < bytes.length; i++) {
+        ia[i] = bytes.charCodeAt(i);
+    }
+    let dateTime = new Date();
+    let name = uuidv4();
+    const blobObject: any = new window.Blob([ab], {
+        type: mime,
+    });
+
+    //禁止改动
+    blobObject.name = `${name}.${type}`; 
+
+    return blobObject;
+}

package/template/src/utils/cache.ts

@@ -0,0 +1,44 @@
+enum CacheType {
+    Local,
+    Session
+}
+
+class Cache {
+    storage: Storage
+
+    constructor(type: CacheType) {
+        this.storage = type === CacheType.Local
+            ? localStorage
+            : sessionStorage
+    }
+
+    setCache(key: string, value: any) {
+        if (value) {
+            this.storage.setItem(key, JSON.stringify(value))
+        }
+    }
+
+    getCache(key: string) {
+        const value = this.storage.getItem(key)
+
+        if (value) {
+            return JSON.parse(value)
+        }
+    }
+
+    removeCache(key: string) {
+        this.storage.removeItem(key)
+    }
+
+    clear() {
+        this.storage.clear()
+    }
+}
+
+const localCache = new Cache(CacheType.Local)
+const sessionCache = new Cache(CacheType.Session)
+
+export {
+    localCache,
+    sessionCache
+}

package/template/src/utils/changeTheme.ts

@@ -0,0 +1,14 @@
+// 主题切换
+export const getDarkTheme = (isDark: boolean) => {
+    // 获取根元素
+    const root = document.documentElement;
+
+    if (!isDark) {
+        // 修改 data-theme 属性的值为 "light"
+        root.setAttribute('data-theme', 'light');
+        return
+    }
+
+    // 修改 data-theme 属性的值为 "dark"
+    root.setAttribute('data-theme', 'dark');
+}

package/template/src/utils/download.ts

@@ -0,0 +1,45 @@
+import {isFunction} from 'lodash-es'
+
+// 下载文件
+export const downloadFile = (
+    output: any,
+    downloadFileName: string = '未命名文件',
+    handleCancel: () => void = () => {}
+) => {
+    if (!output && isFunction(handleCancel)) {
+        handleCancel()
+        return
+    }
+  
+    fetch(output, {responseType: 'blob'} as any)
+        .then((res: any) => res?.blob?.())
+        .then((res: any) => {
+            if ((window?.navigator as any)?.msSaveBlob) {
+                const suffix = output?.split?.('.')?.pop?.();
+                downloadFileName = downloadFileName === '未命名文件'
+                    ? downloadFileName + '.' + suffix
+                    : downloadFileName;
+        
+                try {
+                    (window?.navigator as any)?.msSaveBlob(res, downloadFileName);
+                }
+                catch(e) {
+                    
+                }
+            }
+            else {
+                const link = document.createElement('a');
+                link.href = window.URL.createObjectURL(res);
+                link.download = downloadFileName;
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+            }
+        }).catch(e => {
+            // console.error(e)
+            // handleCancel()
+        })
+        .finally(() => {
+            isFunction(handleCancel) && handleCancel()
+        })
+}

package/template/src/utils/filterMenu.ts

@@ -0,0 +1,34 @@
+/**
+ * * 根据权限来生成菜单
+ * @param menu 
+ * @param permissions 
+ * @returns 
+ */
+export const filterMenu = (menu: any[], permissions: string[]) => {
+    const newList: any = []
+
+    menu.forEach((group: any) => {
+        if (permissions.includes(group.key)) {
+            const data = {...group}
+            delete data.hideInMenu
+            delete data.showFullScreen
+
+            if (Array.isArray(data?.children)) {
+                const children = data.children
+                    .filter((item: any) => permissions.includes(item.key) && !item?.hideInMenu)
+                    .map((item: any) => {
+                        const newItem = {...item}
+                        delete newItem.hideInMenu
+                        delete newItem.showFullScreen
+
+                        return newItem
+                    })
+                data.children = children
+            }
+
+            newList.push(data)
+        }
+    })
+
+    return newList
+}

package/template/src/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './download'
+export * from './base64ToBlob'
+export * from './cache'
+export * from './changeTheme'
+export * from './filterMenu'

package/template/src/vite-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+// * 为了解决 导入.tsx结尾的组件报错
+declare module '*.tsx'
+declare module 'loadsh'}

package/template/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    /* 
+    * 报错：配置文件报错及 React.StrictNode报错：类型“Element”的参数不能赋给类型“ReactNode”的参数
+    *
+    * 解决：
+    * 1.改为node
+    * 2.删除这行 "resolveJsonModule": true
+    */
+    "moduleResolution": "node",
+
+    /*
+    * import 导入的react报错
+    * 解决： 增加这行："esModuleInterop": true,
+    */
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@utils/*": ["src/utils/*"]
+      // 其他路径别名...
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig, loadEnv } from 'vite'
+import type {ConfigEnv} from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    base: './',
+    
+    server: {
+        proxy: {
+            '/api': {
+                target: 'https://httpbin.org',
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/api/, '')
+            }
+        }
+    },
+
+    build: {
+        sourcemap: true, 
+        outDir: 'dist'
+    },
+
+    plugins: [
+        react()
+    ],
+
+    css: {
+        preprocessorOptions: {
+            scss: {
+                // 启用现代 API（关键配置）
+                api: 'modern-compiler' 
+            },
+            sass: {
+                // sass 和 scss 都需要配置
+                api: 'modern-compiler' 
+            }
+        }
+    },
+
+    resolve: {
+        alias: {
+            // 在这里添加路径别名
+            '@': path.resolve("./src")
+            // 其他路径别名...
+        },
+    }
+})