@yyp92-cli/template-react-mobile 1.1.0

package/template/src/service/service.ts

@@ -0,0 +1,27 @@
+import requestFn from './request'
+import {apiUrl} from './api'
+
+// 具体的接口
+export const getDemo = () => {
+    const queryData = {}
+
+    return requestFn.get({
+        url: apiUrl.demoUrl,
+        params: {
+            name: '111',
+            age: 20
+        }
+    })
+}
+
+export const postDemo = () => {
+    const queryData = {}
+
+    return requestFn.post({
+        url: apiUrl.demoUrl1,
+        data: {
+            name: '111222',
+            age: 20
+        }
+    })
+}

package/template/src/store/login.ts

@@ -0,0 +1,39 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware';
+
+type UserInfoStoreState = {
+    userInfo: {
+        userId: string,
+        userName: string
+    },
+    token: string
+}
+
+type UserInfoStoreActions = {
+    setUserInfo: (
+        nextUserInfo: 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: 'userInfo-local'
+        }
+    )
+)

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/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 = (theme: number) => {
+    // 获取根元素
+    const root = document.documentElement;
+
+    if (theme != 1) {
+        // 修改 data-theme 属性的值为 "light"
+        root.setAttribute('data-theme', 'light');
+        return
+    }
+
+    // 修改 data-theme 属性的值为 "dark"
+    root.setAttribute('data-theme', 'dark');
+}

package/template/src/utils/filterMenu.ts

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

package/template/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './cache'
+export * from './changeTheme'
+export * from './filterMenu'

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

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

package/template/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "ESNext"],
+    "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
+  },
+  "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,57 @@
+import { defineConfig } from 'vite'
+import path from 'path';
+import react from '@vitejs/plugin-react'
+import autoprefixer from 'autoprefixer';
+import postcsspxtoviewport from 'postcss-px-to-viewport';
+
+// 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' 
+            }
+        },
+        postcss: {
+            plugins: [
+                autoprefixer,
+                postcsspxtoviewport
+            ]
+        }
+    },
+
+    // ...其他配置项
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+            '@components': path.resolve(__dirname, 'src/components'),
+            '@utils': path.resolve(__dirname, 'src/utils'),
+        }
+    }
+})