@yyp92-cli/template-vue-pc 1.2.0

package/template/src/store/login/index.ts

@@ -0,0 +1,142 @@
+import {defineStore} from 'pinia'
+import { accountLoginRequest, getUserInfoById, getUserMenusByRoleId } from '@/service/api'
+import type {IAccount} from '@/types'
+import { localCache } from '@/utils/cache'
+import { LOGIN_TOKEN, PERMISSION, USER_INFO, USER_MENUS } from '@/global/constants'
+import { mapMenusToRoutes, mapMenusToPermissions } from '@/utils/map-menus'
+import router from '@/router'
+import useMainStore from '../main'
+
+interface LoginState {
+    token: string,
+    userInfo: any,
+    userMenus: any,
+    permissions: string[]
+}
+
+const useLoginStore = defineStore(
+    'login',
+    {
+        state: (): LoginState => ({
+            token: '',
+            userInfo: {},
+            userMenus: [],
+            permissions: []
+        }),
+
+        actions: {
+            async loginAccountAction(account: IAccount) {
+                let id = -1
+
+                try {
+                    // 1. 账号登录，获取 token 信息
+                    const loginResult = await accountLoginRequest(account)
+                    const {
+                        data: {
+                            id: newId,
+                            token
+                        }
+                    } = loginResult ?? {data: {}}
+
+                    this.token = token
+                    id = newId
+
+                    // 2. 进行本地缓存
+                    localCache.setCache(LOGIN_TOKEN, token)
+                }
+                catch(error) {
+                    return error
+                }
+
+                // 3. 获取登录用户的详细信息（role信息）
+                try {
+                    const userInfoResult = await getUserInfoById(id)
+                    const userInfo = userInfoResult.data
+                    this.userInfo = userInfo
+                    localCache.setCache(USER_INFO, userInfo)
+
+                    // 获取登录用户的所有按钮的权限
+                    this.permissions = [
+                        '/analysis',
+                        // '/overview',
+                        '/dashboard',
+                        '/system',
+                        '/user',
+                        '/department',
+                        '/menu',
+                        '/role',
+                        '/product',
+                        '/category',
+                        '/goods',
+                        '/story',
+                        '/chat',
+                        '/list',
+                        '/fullScreen',
+                        '/detail',
+                    ]
+                    localCache.setCache(PERMISSION, [
+                        '/analysis',
+                        // '/overview',
+                        '/dashboard',
+                        '/system',
+                        '/user',
+                        '/department',
+                        '/menu',
+                        '/role',
+                        '/product',
+                        '/category',
+                        '/goods',
+                        '/story',
+                        '/chat',
+                        '/list',
+                        '/fullScreen',
+                        '/detail',
+                    ])
+                }
+                catch(error) {
+                    return error
+                }
+
+                // 4. 根据角色请求用户的权限（菜单menus）
+                try {
+                    const userMenusResult = await getUserMenusByRoleId(this.userInfo?.role?.id)
+                    const userMenus = userMenusResult.data
+                    this.userMenus = mapMenusToRoutes()
+                    localCache.setCache(USER_MENUS, mapMenusToRoutes())
+
+                    // 请求所有的 roles/departments 数据
+                    const mainStore = useMainStore()
+                    mainStore.fetchEntireDataAction()
+                }
+                catch(error) {
+                    return error
+                }
+
+                return 'ok'
+            },
+
+            // 用户进行刷新默认加载数据
+            loadLocalCacheAction() {
+                const token = localCache.getCache(LOGIN_TOKEN)
+                const userInfo = localCache.getCache(USER_INFO)
+                const userMenus = localCache.getCache(USER_MENUS)
+                const permission = localCache.getCache(PERMISSION)
+
+                if (token && userInfo && userMenus) {
+                    this.token = token
+                    this.userInfo = userInfo
+                    this.userMenus = userMenus
+
+                    // 请求所有的 roles/departments 数据
+                    const mainStore = useMainStore()
+                    mainStore.fetchEntireDataAction()
+
+                    // 获取登录用户的所有按钮的权限
+                    this.permissions = permission
+                }
+            }
+        }
+    }
+)
+
+export default useLoginStore

package/template/src/store/main/index.ts

@@ -0,0 +1,54 @@
+import { getEntireDepartments, getEntireMenu, getEntireRoles } from '@/service/api'
+import {defineStore} from 'pinia' 
+
+interface IMainState {
+    entireRoles: any[]
+    entireDepartments: any[],
+    entireMenu: any[]
+}
+
+const useMainStore = defineStore(
+    'main',
+    {
+        state: (): IMainState => ({
+            entireRoles: [],
+            entireDepartments: [],
+            entireMenu: []
+        }),
+
+        actions: {
+            fetchEntireDataAction() {
+                Promise.allSettled([
+                    getEntireRoles(),
+                    getEntireDepartments(),
+                    getEntireMenu()
+                ]).then((res: any[]) => {
+                    res.forEach((item: any, index: number) => {
+                        const {
+                            status,
+                            value
+                        } = item ?? {}
+
+                        if (status === 'fulfilled') {
+                            const list = value.data.list
+
+                            switch(index) {
+                                case 0:
+                                  this.entireRoles = list
+                                    break
+                                case 1: 
+                                    this.entireDepartments = list
+                                    break
+                                case 2: 
+                                    this.entireMenu = list
+                                    break
+                            }
+                        }
+                    })
+                })
+            }
+        }
+    }
+)
+
+export default useMainStore

package/template/src/store/main/system/index.ts

@@ -0,0 +1,88 @@
+import {defineStore} from 'pinia'
+import {
+    postUserList,
+    deleteUserById,
+    newUserData,
+    editUserData
+} from '@/service/api'
+import type { SystemState } from './type'
+
+const useSystemStore = defineStore('system', {
+    state: (): SystemState => ({
+        usersList: [],
+        usersTotalCount: 0,
+        pageList: [],
+        pageTotalCount: 0
+    }),
+
+    actions: {
+        async postUsersListAction(queryInfo: any) {
+            try {
+                const usersListResult = await postUserList(queryInfo)
+                const {totalCount, list} = usersListResult.data
+
+                this.usersTotalCount = totalCount
+                this.usersList = list.map((item: any, index: number) => {
+                    return {
+                        ...item,
+                        order: Math.floor((queryInfo.offset / queryInfo.size)) * queryInfo.size + (index + 1)
+                    }
+                })
+            }
+            catch(error) {}
+            finally {
+                return 'finally'
+            }
+        },
+
+        async deleteUserByIdAction(id: number) {
+            try {
+                await deleteUserById(id)
+
+                ElMessage({
+                    message: '删除成功',
+                    type: 'success',
+                })
+
+                return 'ok'
+            }
+            catch(error) {
+                return 'error'
+            }
+        },
+
+        async addUserDataActions(userInfo: any) {
+            try {
+                await newUserData(userInfo)
+
+                ElMessage({
+                    message: '创建成功',
+                    type: 'success',
+                })
+
+                return 'ok'
+            }
+            catch(error) {
+                return 'error'
+            }
+        },
+
+        async editUserDataActions(id: number, userInfo: any) {
+            try {
+                await editUserData(id, userInfo)
+
+                ElMessage({
+                    message: '编辑成功',
+                    type: 'success',
+                })
+
+                return 'ok'
+            }
+            catch(error) {
+                return 'error'
+            }
+        }
+    }
+})
+
+export default useSystemStore

package/template/src/store/main/system/type.ts

@@ -0,0 +1,19 @@
+export interface UserProps {
+    id: number
+    name: string
+    realname: string
+    cellphone: number
+    enable: number
+    departmentId: number
+    roleId: number
+    createAt: string
+    updateAt: string
+}
+
+export interface SystemState {
+    usersList: UserProps[],
+    usersTotalCount: number,
+
+    pageList: any[],
+    pageTotalCount: number
+}

package/template/src/styles/global.scss

@@ -0,0 +1,33 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#app {
+    width: 100%;
+    min-width: 1000px;
+    height: 100%;
+    background: var(--bg-white-color);
+}
+
+*:focus-visible {
+    outline: none;
+}
+
+
+// element-plus 组件库的样式重写
+
+
+// 滚动条
+// ::-webkit-scrollbar {
+//     width: 8px;
+//     height: 8px;
+// } 
+// ::-webkit-scrollbar-thumb {
+//     border-radius: 6px;
+//     background-color: #dde6f0;
+//     border: 2px dashed transparent;
+//     background-clip: padding-box;
+// }

package/template/src/styles/index.scss

@@ -0,0 +1,4 @@
+@use "@/theme/lightTheme.scss" as *;
+@use "@/theme/darkTheme.scss" as *;
+@use "@/styles/global.scss" as *;
+@use "@/styles/reset.scss" as *;

package/template/src/styles/reset.scss

@@ -0,0 +1,17 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+*:focus-visible {
+    outline: none;
+}
+
+ul,
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

package/template/src/theme/darkTheme.scss

@@ -0,0 +1,51 @@
+: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;
+
+    
+    // 大屏主题
+    --screen-text-color: #29fcff;
+}

package/template/src/theme/lightTheme.scss

@@ -0,0 +1,53 @@
+: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;
+
+
+    // 大屏主题
+    --screen-text-color: #29fcff;
+}

package/template/src/types/index.ts

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

package/template/src/types/login.ts

@@ -0,0 +1,4 @@
+export interface IAccount {
+    name: string,
+    password: string
+}

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/download.ts

@@ -0,0 +1,27 @@
+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) => {
+            const link = document.createElement('a')
+            link.href = window.URL.createObjectURL(res)
+            link.download = downloadFileName
+            link.style.display = 'none'
+            document.body.appendChild(link)
+            link.click()
+        })
+        .finally(() => {
+            isFunction(handleCancel) && handleCancel()
+        })
+}

package/template/src/utils/format.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+
+dayjs.extend(utc)
+
+export function formatUTC(utcString: string, format: string = 'YYYY-MM-DD HH:mm:ss') {
+    const time = dayjs.utc(utcString).utcOffset(8).format(format)
+
+    return time
+}

package/template/src/utils/index.ts

@@ -0,0 +1,14 @@
+// 主题切换
+export const changeTheme = (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');
+}