604 lines
125 KiB
HTML
604 lines
125 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hans-CN"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=Edge"/><link rel="stylesheet" type="text/css" href="css/modern-norm.min.css"/><link rel="stylesheet" type="text/css" href="css/prism.min.css"/><link rel="stylesheet" type="text/css" href="css/katex.min.css"/><link rel="stylesheet" type="text/css" href="css/wolai.css"/><title>PlayEdu前端开发手册 - wolai 笔记</title><link rel="shortcut icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M610.08,0c66,0,90,6.88,114.13,19.79a134.62,134.62,0,0,1,56,56l2.28,4.4C793.93,103,800,127.88,800,189.92V610.08l-.08,11.56c-.78,57.38-7.58,79.89-19.71,102.57a134.62,134.62,0,0,1-56,56l-4.4,2.28C697,793.93,672.12,800,610.08,800H189.92l-11.56-.08c-57.38-.78-79.89-7.58-102.57-19.71a134.62,134.62,0,0,1-56-56l-2.28-4.4C6.44,697.75.4,673.72,0,616L0,189.92c0-66,6.88-90,19.79-114.13a134.62,134.62,0,0,1,56-56l4.4-2.28C102.25,6.44,126.28.4,184,0Z'/%3E%3Cpath d='M610.08,0c66,0,90,6.88,114.13,19.79a134.62,134.62,0,0,1,56,56l2.28,4.4C793.93,103,800,127.88,800,189.92V610.08l-.08,11.56c-.78,57.38-7.58,79.89-19.71,102.57a134.62,134.62,0,0,1-56,56l-4.4,2.28C697,793.93,672.12,800,610.08,800H189.92l-11.56-.08c-57.38-.78-79.89-7.58-102.57-19.71a134.62,134.62,0,0,1-56-56l-2.28-4.4C6.44,697.75.4,673.72,0,616L0,189.92c0-66,6.88-90,19.79-114.13a134.62,134.62,0,0,1,56-56l4.4-2.28C102.25,6.44,126.28.4,184,0Zm4.72,88.9H185.2L172.42,89c-32.78.62-43.68,3.24-54.71,9.14a45.84,45.84,0,0,0-19.54,19.54c-6.61,12.36-9.11,24.55-9.27,67.49V614.8L89,627.58c.62,32.78,3.24,43.68,9.14,54.71a45.84,45.84,0,0,0,19.54,19.54c12.36,6.61,24.55,9.11,67.49,9.27H610.08c46.79,0,59.41-2.44,72.21-9.28a45.84,45.84,0,0,0,19.54-19.54c6.61-12.36,9.11-24.55,9.27-67.49V189.92c0-46.79-2.44-59.41-9.28-72.21a45.84,45.84,0,0,0-19.54-19.54C669.93,91.56,657.74,89.06,614.8,88.9ZM233.33,493.33A73.34,73.34,0,1,1,160,566.67,73.35,73.35,0,0,1,233.33,493.33Z'/%3E%3C/g%3E%3C/svg%3E"></link></head><body><header><div class="image"></div><div class="title"><div class="banner"><div data-symbol="🍕" class="icon"></div></div><div data-title="PlayEdu前端开发手册" class="main-title"></div></div></header><article><h2 id="6dL6hxqwRuqj4VPB46E8A8" class="wolai-block"><span class="inline-wrap">一、背景</span></h2><div id="7U5bjRJSpz9EjtbzTJRyfm" class="wolai-block wolai-text"><div><span class="inline-wrap">Playedu<span class="jill"></span>的前端是基于<span class="jill"></span>React18 + TypeScript<span class="jill"></span>开发。主要包括：PC<span class="jill"></span>学员界面、H5<span class="jill"></span>学员界面、后台管理界面三个界面程序。它们都是相同的技术架构，因此只要您懂得其中一个项目的开发，那么另外<span class="jill"></span>2<span class="jill"></span>个项目可以无缝上手。</span></div></div><h2 id="obT3CAJsK2AoYfC3DDB7na" class="wolai-block"><span class="inline-wrap">二、开发运行快速上手</span></h2><h3 id="pKcvzLKYU1aVQkgs4FekT" class="wolai-block"><span class="inline-wrap"><b>2.1</b></span><span class="inline-wrap">环境要求</span></h3><ul class="wolai-block"><li id="9sWMxKpcTdmHXVpSCj2D2j"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">操作系统：Window,Mac,Linux<span class="jill"></span>均可以</span></li><li id="kp5mY8V3Er4ujNwsVSJWoy"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">nodejs ≥ v18</span></li><li id="42ASedz1KNjhCTYvQHUW29"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">pnpm</span><span class="inline-wrap"> ≥ v 8.15.4</span></li></ul><h3 id="n6rtUn8mV6CqGwQXnMNWA3" class="wolai-block"><span class="inline-wrap">2.2 运行系统</span></h3><blockquote id="4LDb7Yc9mCLQYajnxyCVgU" class="wolai-block"><span class="inline-wrap">下面我们将以后台管理界面为例，给您演示如何将系统跑起来。</span></blockquote><h4 id="gxPyu4Qdt5ir9q6XjpGy6" class="wolai-block"><span class="inline-wrap">2.2.1 安装依赖</span></h4><div id="ffksSLEAeTSZBzb3KeDyNH" class="wolai-block wolai-text"><div><span class="inline-wrap">首先，进入到后台管理界面程序的根目录，然后执下面命令安装依赖：</span></div></div><code-block id="d2N9JvR7k8dLyq6XZMtmAf" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre><span class="token function">pnpm</span> <span class="token function">install</span></pre></div></code-block><h4 id="tywgSUn9fZk59Xs56aXQFL" class="wolai-block"><span class="inline-wrap">2.2.2 配置文件</span></h4><div id="jbzS7byRitibkgB9peWwSC" class="wolai-block wolai-text"><div><span class="inline-wrap">依赖安装完成之后，执行下面命令创建本地开发配置文件：</span></div></div><code-block id="3u5hCKCKoeZGYvkarFdvck" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre><span class="token function">cp</span> .env.example .env.local</pre></div></code-block><blockquote id="uBi2E7b6rj3hPxwD2RcXUH" class="wolai-block"><span class="inline-wrap">注意，上述命令仅适用于<span class="jill"></span>mac<span class="jill"></span>或者<span class="jill"></span>linux<span class="jill"></span>系统，如果您是<span class="jill"></span>window<span class="jill"></span>系统的话，这一步请手动复制 </span><span class="inline-wrap"><code>.env.example</code></span><span class="inline-wrap"> 文件并重命名为</span><span class="inline-wrap"><code>.env.local</code></span></blockquote><div id="5BoyodfFfdwb5bvL24ntTq" class="wolai-block wolai-text"><div><span class="inline-wrap">修改</span><span class="inline-wrap"><code>.env.local</code></span><span class="inline-wrap">中的</span><span class="inline-wrap"><code>VITE_APP_URL</code></span><span class="inline-wrap">的值为您的<span class="jill"></span>PlayEdu API<span class="jill"></span>服务的地址，示例如下：</span></div></div><code-block id="23EUCX8CLEQmL1J3szgufQ" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre><span class="token assign-left variable">VITE_APP_URL</span><span class="token operator">=</span>http://127.0.0.1:9898</pre></div></code-block><h4 id="72xPWVyZy28swT8pbQuAdL" class="wolai-block"><span class="inline-wrap">2.2.3 程序跑起来</span></h4><div id="vyWwmALj9Hg9ozcYNoicCH" class="wolai-block wolai-text"><div><span class="inline-wrap">执行下面命令将程序跑起来：</span></div></div><code-block id="g5rkHeMbBN6Bk9SjpYEoBZ" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre><span class="token function">pnpm</span> dev</pre></div></code-block><div id="adcDnexasgi3GB9VQHE31B" class="wolai-block wolai-text"><div><span class="inline-wrap">跑起来之后可以看到：</span></div></div><code-block id="6DXPZq6AiFWTFUNHcPoAHm" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre> VITE v4.4.9 ready <span class="token keyword">in</span> <span class="token number">515</span> ms
|
||
|
||
➜ Local: http://localhost:4000/
|
||
➜ Network: http://192.168.3.14:4000/
|
||
➜ Network: http://192.168.64.1:4000/
|
||
➜ press h to show <span class="token builtin class-name">help</span></pre></div></code-block><div id="7iCZcmhbrsrw7cKCDzn6q6" class="wolai-block wolai-text"><div><span class="inline-wrap">我们在浏览器就可以打开上述地址访问。</span></div></div><h2 id="gtb4G9ibPP9UwGHXam1gxp" class="wolai-block"><span class="inline-wrap">三、生产部署快速上手</span></h2><div id="j3n2yiR793NfbDs7sYGdLZ" class="wolai-block wolai-text"><div><span class="inline-wrap">当我们程序二开完成之后，需要将程序部署更新到生产服务器，在部署之前，我们需要编译程序。下面将是编译的流程。</span></div></div><h4 id="r9GRXfMK7JYarYYGyv2dyf" class="wolai-block"><span class="inline-wrap">3.1 生产环境配置文件</span></h4><div id="eNsbntA4aTfEn6zRLWyUFA" class="wolai-block wolai-text"><div><span class="inline-wrap">执行下面命令创建生产环境配置文件：</span></div></div><code-block id="gewammrcLeoYCt63VQzmF7" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre><span class="token function">cp</span> .env.example .env.production</pre></div></code-block><blockquote id="qjwi8eZDDXM6LAS8abtSH3" class="wolai-block"><span class="inline-wrap">注意，上述命令仅适用于<span class="jill"></span>mac<span class="jill"></span>或者<span class="jill"></span>linux<span class="jill"></span>系统，如果您是<span class="jill"></span>window<span class="jill"></span>系统的话，这一步请手动复制 </span><span class="inline-wrap"><code>.env.example</code></span><span class="inline-wrap"> 文件并重命名为</span><span class="inline-wrap"><code>.env.production</code></span></blockquote><div id="p1BgiQtb4QssJGFt36ewDe" class="wolai-block wolai-text"><div><span class="inline-wrap">修改</span><span class="inline-wrap"><code>.env.production</code></span><span class="inline-wrap">中的</span><span class="inline-wrap"><code>VITE_APP_URL</code></span><span class="inline-wrap">的值为您的<span class="jill"></span>PlayEdu API<span class="jill"></span>服务生产环境的地址，示例如下：</span></div></div><code-block id="cN9rsQhAqLpptztcDHvCfc" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre><span class="token assign-left variable">VITE_APP_URL</span><span class="token operator">=</span>https://demo-api.playedu.xyz</pre></div></code-block><h4 id="cu6nwp2fxuXhm3czWTFrxj" class="wolai-block"><span class="inline-wrap">3.2 编译程序</span></h4><div id="fW1C9JghXnvf5SiczKvn4g" class="wolai-block wolai-text"><div><span class="inline-wrap">执行下面命令编译程序：</span></div></div><code-block id="uxEqMCzoXy3VnndXDjDkE2" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre><span class="token function">pnpm</span> build</pre></div></code-block><div id="dWaAfW8nbFPjsVcmBVqNjc" class="wolai-block wolai-text"><div><span class="inline-wrap">上述命令执行成功之后，可以看到类似下面的输出信息：</span></div></div><code-block id="eaHfihDsBdJd7EYqJ5H8Sq" class="wolai-block"><div class="wolai-pre"><div data-lang="Bash" class="marker"></div><pre>dist/assets/index-c61b50c7.js <span class="token number">100.60</span> kB │ gzip: <span class="token number">30.06</span> kB
|
||
dist/assets/xlsx-4f9172c7.js <span class="token number">424.92</span> kB │ gzip: <span class="token number">140.79</span> kB
|
||
dist/assets/index-e0333ef0.js <span class="token number">1,029</span>.09 kB │ gzip: <span class="token number">341.34</span> kB
|
||
dist/assets/index-3c2cf1a6.js <span class="token number">1,347</span>.42 kB │ gzip: <span class="token number">442.01</span> kB
|
||
|
||
<span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">)</span> Some chunks are larger than <span class="token number">500</span> kBs after minification. Consider:
|
||
- Using dynamic import<span class="token punctuation">(</span><span class="token punctuation">)</span> to code-split the application
|
||
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/<span class="token comment">#output-manualchunks</span>
|
||
- Adjust chunk size limit <span class="token keyword">for</span> this warning via build.chunkSizeWarningLimit.
|
||
✓ built <span class="token keyword">in</span> <span class="token number">7</span>.46s
|
||
✨ Done <span class="token keyword">in</span> <span class="token number">14</span>.22s.</pre></div></code-block><div id="si8QS355iAHSybG6KroSt2" class="wolai-block wolai-text"><div><span class="inline-wrap">这就是编译完成了。编译后的程序文件在 </span><span class="inline-wrap"><code>dist</code></span><span class="inline-wrap"> 目录。到这里，我们就可以将 </span><span class="inline-wrap"><code>dist</code></span><span class="inline-wrap"> 目录的程序文件部署到生产环境服务器了。</span></div></div><h2 id="44PQ2XVYgfmBzk3AcW3tEU" class="wolai-block"><span class="inline-wrap">四、项目介绍</span></h2><h3 id="2PcXTpKDJfo2gtpWJteZSB" class="wolai-block"><span class="inline-wrap">4.1</span><span class="inline-wrap"><b>后台管理</b></span><span class="inline-wrap">界面</span></h3><h4 id="p1CxZtmzi2yFydWB4qt2hs" class="wolai-block"><span class="inline-wrap">4.1.1<span class="jill"></span>文件目录结构</span></h4><code-block id="vVY2V9EAzpui8gHa7x3zDs" class="wolai-block"><div class="wolai-pre"><div data-lang="Text" class="marker"></div><pre>playedu
|
||
├── public // 公共资源
|
||
│ └── js // 公共JS
|
||
│ └── template // 公共下载、导入模板
|
||
│ └── favicon.ico // 网站ICO
|
||
│
|
||
├── scripts // 脚本
|
||
├── src // 资源
|
||
│ └── api // 各页面API
|
||
│ └── internal // 全局API配置
|
||
│ └──... // 各模块API配置
|
||
│ └── compenents // 全局组件
|
||
│ └── assets // 全局外部资源
|
||
│ └── i18n // 国际化配置
|
||
│ └── cn.json // 简中语言JSON
|
||
│ └── config.ts // 国际化配置
|
||
│ └── tc.json // 繁中语言JSON
|
||
│ └── js // 通用JS
|
||
│ └── pages // 页面资源
|
||
│ └── cert // 证书模块
|
||
│ └── change-password // 修改密码模块
|
||
│ └── course // 线上课模块
|
||
│ └── dashboard // 主页模块
|
||
│ └── department // 部门模块
|
||
│ └── error // 错误模块
|
||
│ └── exam // 考试模块
|
||
│ └── papers // 试卷模块
|
||
│ └── questions // 试题模块
|
||
│ └── task // 考试任务模块
|
||
│ └── init // 初始化
|
||
│ └── layouts // 页面布局
|
||
│ └── loading // 公用loading模块
|
||
│ └── login // 登录模块
|
||
│ └── member // 学员模块
|
||
│ └── paper-show // 试卷阅览模块
|
||
│ └── resource // 资源模块
|
||
│ └── attachment // 课件模块
|
||
│ └── audio // 音频模块
|
||
│ └── courseware // 文档模块
|
||
│ └── images // 图片模块
|
||
│ └── resource-category // 分类模块
|
||
│ └── videos // 视频模块
|
||
│ └── study // 学习任务模块
|
||
│ └── system // 系统模块
|
||
│ └── administrator // 管理人员模块
|
||
│ └── adminlog // 管理日志模块
|
||
│ └── adminroles // 管理角色模块
|
||
│ └── config // 系统配置模块
|
||
│ └── teacher // 讲师模块
|
||
│ └── test // 测试页面（仅用于测试环境）
|
||
│ └── routes // 路由
|
||
│ └── store // 中间件及store
|
||
│ └── system // 系统store
|
||
│ └── user // 用户store
|
||
│ └── index.ts // store配置
|
||
│ └── types // 全局静态类型
|
||
│ └── utils // 工具类
|
||
│ └── playedu.d.ts // 全局类型
|
||
│ └── AutoTop.ts // 全局页面自动滚动到最上方
|
||
│ └── custom.d.ts // 全局css、less、scss配置
|
||
│ └── index.less // 全局样式
|
||
│ └── main.tsx // 主要模块
|
||
│ └── App.module.less // 系统样式
|
||
│ └── App.tsx // 系统模块
|
||
├── .env.example // Env配置模版
|
||
├── .env.local // Env配置
|
||
├── .env（可用） // Env配置
|
||
├── vite.config.ts // VITE配置
|
||
├── ...
|
||
|
||
</pre></div></code-block><h4 id="v3CzFeKp7vztuCeDXXifwK" class="wolai-block"><span class="inline-wrap">4.1.2 依赖库
|
||
</span></h4><div id="9S5ZJbiz2DsLFjrvpvczA6" class="wolai-block wolai-simple-table"><table><tbody><tr><td style="width: 151px"><span class="inline-wrap">依赖库</span></td><td style="width: 259px"><span class="inline-wrap">地址</span></td><td style="width: 164px"><span class="inline-wrap">说明</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>antd</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://ant.design/"><span>https://ant.design</span></a></span></td><td style="width: 164px"><span class="inline-wrap">UI<span class="jill"></span>框架</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>axios</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://axios-http.com/docs/intro"><span>https://axios-http.com/docs/intro</span></a></span></td><td style="width: 164px"><span class="inline-wrap">HTTP<span class="jill"></span>请求库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>echarts</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://echarts.apache.org/zh/index.html"><span>https://echarts.apache.org/zh/index.html</span></a></span></td><td style="width: 164px"><span class="inline-wrap">图表渲染库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>i18next</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://www.i18next.com/"><span>https://www.i18next.com</span></a></span></td><td style="width: 164px"><span class="inline-wrap">国际化</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>moment</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://momentjs.cn/"><span>https://momentjs.cn</span></a></span></td><td style="width: 164px"><span class="inline-wrap">时间解析库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>ahooks</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://ahooks.js.org/zh-CN/"><span>https://ahooks.js.org/zh-CN/</span></a></span></td><td style="width: 164px"><span class="inline-wrap">React Hooks<span class="jill"></span>库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>localforage</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://localforage.docschina.org/"><span>https://localforage.docschina.org</span></a></span></td><td style="width: 164px"><span class="inline-wrap">LocalStorage<span class="jill"></span>的封装</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>match-sorter</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://github.com/kentcdodds/match-sorter"><span>https://github.com/kentcdodds/match-sorter</span></a></span></td><td style="width: 164px"><span class="inline-wrap">数组处理库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>react-router-dom</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://reactrouter.com/en/main"><span>https://reactrouter.com/en/main</span></a></span></td><td style="width: 164px"><span class="inline-wrap">路由库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>redux</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://cn.redux.js.org/"><span>https://cn.redux.js.org</span></a></span></td><td style="width: 164px"><span class="inline-wrap">全局状态</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>sort-by</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://github.com/kvnneff/sort-by"><span>https://github.com/kvnneff/sort-by</span></a></span></td><td style="width: 164px"><span class="inline-wrap">数组加强库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>xlsx</code></span></td><td style="width: 259px"><span class="inline-wrap"><a href="https://github.com/SheetJS/sheetjs"><span>https://github.com/SheetJS/sheetjs</span></a></span></td><td style="width: 164px"><span class="inline-wrap">Excel<span class="jill"></span>操作</span></td></tr></tbody></table></div><h4 id="5srFW2uiLSRYNpzTbRnGTK" class="wolai-block"><span class="inline-wrap">4.1.3 页面架构图</span></h4><div id="xvHTE19eA6cwchkyrSuD89" class="wolai-block"><figure class="wolai-center" style="width: 100%; flex-direction: column"><img src="media/image.png" style="width: 100%"/></figure></div><h4 id="5VJ7hU7drYNTZF1yrHUdDf" class="wolai-block"><span class="inline-wrap">4.1.4 全局状态</span></h4><h5 id="dXpRUpPGi2PyMiQNsqSQkv" class="wolai-block"><span class="inline-wrap">4.1.4.1 全局状态一、登录用户</span></h5><ul class="wolai-block"><li id="4f9YLEpgVPykz5U7bbP7cN"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">路径</span></li></ul><div id="qmKvWvetbBsd3Mi1L75ZQM" class="wolai-block wolai-text"><div><span class="inline-wrap"><code>src/store/user/loginUserSlice.ts</code></span></div></div><ul class="wolai-block"><li id="hrPkDAzbxTdTyeDhH92TUu"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">存储变量结构</span></li></ul><code-block id="4CMxhBiLhoYp9SUPKmREQ2" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">type</span> <span class="token class-name">UserInterface</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
email<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">type</span> <span class="token class-name">UserStoreInterface</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
user<span class="token operator">:</span> UserInterface <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||
isLogin<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
permissions<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
uploadStatus<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
uploadCateIds<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="vCcqV5UdYaz6aixsye9LA6"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>一、读取信息</span></li></ul><code-block id="eEN7v1STDWtmnpWJHVaiX7" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户信息</span>
|
||
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的关联权限</span>
|
||
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>permissions<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</pre></div></code-block><ul class="wolai-block"><li id="9orkq9g2r7ZN138sxaMVF9"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>二、存储信息</span></li></ul><code-block id="2tD4sPh9Mdf83Dyru5AeAv" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useDispatch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> loginAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./store/user/loginUserSlice"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> dispatch <span class="token operator">=</span> <span class="token function">useDispatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 获取用户数据</span>
|
||
<span class="token keyword">let</span> res<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token keyword">await</span> loginApi<span class="token punctuation">.</span><span class="token function">getUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 将用户数据存储到全局状态</span>
|
||
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">loginAction</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</pre></div></code-block><h4 id="pb1w1fvkB1JH7ra2Hv2h9r" class="wolai-block"><span class="inline-wrap">4.1.4.2 全局状态二、全局配置</span></h4><ul class="wolai-block"><li id="kwWHMevfZoXgTAfEKg8KxZ"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">路径</span></li></ul><div id="3v1ZkGWBadd1EE3jRxQNJe" class="wolai-block wolai-text"><div><span class="inline-wrap"><code>src/store/system/systemConfigSlice.ts</code></span></div></div><ul class="wolai-block"><li id="6hdF6PtEaHnCA8cAp41qLd"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">存储变量结构</span></li></ul><code-block id="n18FVTwGPY5ArS5r7yrRiK" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">type</span> <span class="token class-name">SystemConfigStoreInterface</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
synchEnabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
synchScene<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
systemLanguage<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemApiUrl<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemPcUrl<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemH5Url<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemLogo<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemName<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
memberDefaultAvatar<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
resourceUrl<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="uj1NDijpDP58FRpgKnoW2g"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>一、读取信息</span></li></ul><code-block id="gGbYoVFdV3SRayY5sbGiiz" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> systemConfig <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>systemConfig<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="6h9atq5qn2Vo7oRwdJMfhD"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>二、存储信息</span></li></ul><code-block id="gx2rA8QVt53q1Xz6k7f37K" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useDispatch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||
SystemConfigStoreInterface<span class="token punctuation">,</span>
|
||
saveConfigAction<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../../store/system/systemConfigSlice"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">let</span> config<span class="token operator">:</span> SystemConfigStoreInterface <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">saveConfigAction</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</pre></div></code-block><h4 id="7KvMyTx5rHaZgh96L4yRdR" class="wolai-block"><span class="inline-wrap">4.1.5 后台权限概述</span></h4><h5 id="sxA78KQZnUqcuAdRZEeacv" class="wolai-block"><span class="inline-wrap">4.1.5.1<span class="jill"></span>按钮权限组件 </span></h5><div id="ds8GhjhpQV5Z4gnYBzZjST" class="wolai-block wolai-text"><div><span class="inline-wrap">文件：</span><span class="inline-wrap"><code>src/components/permission-button</code></span></div></div><div id="7ru5m1afRfzVF8zaNMk366" class="wolai-block wolai-text"><div><span class="inline-wrap">使用权限按钮组件（</span><span class="inline-wrap">demo</span><span class="inline-wrap">）</span></div></div><code-block id="bG6h4Qfe66DkJ4Y58KHVuZ" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> PerButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@/components/permission-button"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> PlusOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@ant-design/icons"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token operator"><</span><span class="token operator">></span>
|
||
<span class="token operator"><</span>PerButton
|
||
type<span class="token operator">=</span><span class="token string">"primary"</span>
|
||
text<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"测试按钮"</span><span class="token punctuation">}</span>
|
||
<span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"demo-button"</span>
|
||
icon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>PlusOutlined <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">}</span><span class="token comment">//或者null</span>
|
||
p<span class="token operator">=</span><span class="token string">"upload-word"</span> <span class="token comment">//该按钮权限 </span>
|
||
onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
disabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token operator">|</span><span class="token boolean">false</span><span class="token punctuation">}</span><span class="token comment">//或者null</span>
|
||
<span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token operator"><</span><span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token punctuation">)</span></pre></div></code-block><h5 id="bz3ps4Q1h1LZQTWgcNjEWb" class="wolai-block"><span class="inline-wrap">4.1.5.2 左侧菜单组件 </span></h5><div id="3zN6RDi92ZS5LPUm8PPfFG" class="wolai-block wolai-text"><div><span class="inline-wrap">文件：</span><span class="inline-wrap"><code>src/components/left-menu</code></span></div></div><code-block id="2fRiUxAPhWPcJci8NXnaUR" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"antd"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> useNavigate<span class="token punctuation">,</span> useLocation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">const</span> LeftMenu<span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> location <span class="token operator">=</span> <span class="token function">useLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 全局权限</span>
|
||
<span class="token keyword">const</span> permissions <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span>
|
||
<span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>permissions
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 选中的菜单</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>selectedKeys<span class="token punctuation">,</span> setSelectedKeys<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useState</span><span class="token generic class-name"><span class="token operator"><</span><span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
location<span class="token punctuation">.</span>pathname<span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 展开菜单</span>
|
||
<span class="token keyword">const</span> hit <span class="token operator">=</span> <span class="token punctuation">(</span>pathname<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> p <span class="token keyword">in</span> children2Parent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>pathname<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> children2Parent<span class="token punctuation">[</span>p<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>openKeys<span class="token punctuation">,</span> setOpenKeys<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useState</span><span class="token generic class-name"><span class="token operator"><</span><span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token function">hit</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>pathname<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token function">getItem</span><span class="token punctuation">(</span>
|
||
<span class="token string">"主页"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"/"</span><span class="token punctuation">,</span>
|
||
<span class="token operator"><</span>i className<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">iconfont icon-icon-home</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
|
||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
<span class="token string">"menu-index"</span> <span class="token comment">//该菜单权限 </span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token function">getItem</span><span class="token punctuation">(</span>
|
||
<span class="token string">"分类"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"/resource-category"</span><span class="token punctuation">,</span>
|
||
<span class="token operator"><</span>i className<span class="token operator">=</span><span class="token string">"iconfont icon-icon-category"</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
|
||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
<span class="token string">"menu-category"</span> <span class="token comment">//该菜单权限 </span>
|
||
<span class="token punctuation">)</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">]</span>
|
||
|
||
<span class="token comment">// ...省略代码</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">[</span><span class="token string">"menu-box"</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token operator"><</span>Menu
|
||
onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span>
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
width<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||
background<span class="token operator">:</span> <span class="token string">"#ffffff"</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||
selectedKeys<span class="token operator">=</span><span class="token punctuation">{</span>selectedKeys<span class="token punctuation">}</span>
|
||
openKeys<span class="token operator">=</span><span class="token punctuation">{</span>openKeys<span class="token punctuation">}</span>
|
||
mode<span class="token operator">=</span><span class="token string">"inline"</span>
|
||
items<span class="token operator">=</span><span class="token punctuation">{</span>activeMenus<span class="token punctuation">}</span>
|
||
onSelect<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token function">setSelectedKeys</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>selectedKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||
onOpenChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>keys<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token function">setOpenKeys</span><span class="token punctuation">(</span>keys<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||
<span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
||
<span class="token punctuation">)</span>
|
||
|
||
<span class="token punctuation">}</span>
|
||
</pre></div></code-block><h3 id="3Gkqnn4R7o9B64PJfAuRbU" class="wolai-block"><span class="inline-wrap">4.2 </span><span class="inline-wrap"><b>PC</b></span><span class="inline-wrap">学员界面</span></h3><h4 id="oBH5eBrSzGAho5a1Cd1Vgy" class="wolai-block"><span class="inline-wrap">4.2.1<span class="jill"></span>文件目录结构</span></h4><code-block id="99f3aWzt5ekvuiRN9zR8vK" class="wolai-block"><div class="wolai-pre"><div data-lang="Text" class="marker"></div><pre>playedu
|
||
├── public // 公共资源
|
||
│ └── js // 公共JS
|
||
│ └── favicon.ico // 网站ICO
|
||
│
|
||
├── src // 资源
|
||
│ └── api // 各页面API
|
||
│ └── internal // 全局API配置
|
||
│ └──... // 各模块API配置
|
||
│ └── compenents // 全局组件
|
||
│ └── assets // 全局外部资源
|
||
│ └── i18n // 国际化配置
|
||
│ └── cn.json // 简中语言JSON
|
||
│ └── config.ts // 国际化配置
|
||
│ └── tc.json // 繁中语言JSON
|
||
│ └── js // 通用JS
|
||
│ └── pages // 页面资源
|
||
│ └── cert // 证书模块
|
||
│ └── course // 线上课模块
|
||
│ └── index // 首页模块
|
||
│ └── error // 错误模块
|
||
│ └── init // 初始化
|
||
│ └── layouts // 页面布局
|
||
│ └── loading // 公用loading模块
|
||
│ └── login // 登录模块
|
||
│ └── task // 任务模块
|
||
│ └── index.tsx // 学习任务模块
|
||
│ └── exam.tsx // 考试任务模块
|
||
│ └── ... // 任务相关模块
|
||
│ └── latest-learn // 最近学习模块
|
||
│ └── routes // 路由
|
||
│ └── store // 中间件及store
|
||
│ └── system // 系统store
|
||
│ └── user // 用户store
|
||
│ └── index.ts // store配置
|
||
│ └── utils // 工具类
|
||
│ └── global.d.ts // 全局变量
|
||
│ └── playedu.d.ts // 全局类型
|
||
│ └── AutoTop.ts // 全局页面自动滚动到最上方
|
||
│ └── custom.d.ts // 全局css、less、scss配置
|
||
│ └── index.scss // 全局样式
|
||
│ └── main.tsx // 主要模块
|
||
│ └── App.scss // 系统样式
|
||
│ └── App.tsx // 系统模块
|
||
├── .env.example // Env配置模版
|
||
├── .env.local // Env配置
|
||
├── .env（可用） // Env配置
|
||
├── vite.config.ts // VITE配置
|
||
├── ...
|
||
|
||
</pre></div></code-block><h4 id="e8RrUjZJaD3zBmmmaKNASM" class="wolai-block"><span class="inline-wrap">4.2.2 依赖库</span></h4><div id="qkcSZVB7sUm6NRyS7tyz6G" class="wolai-block wolai-simple-table"><table><tbody><tr><td style="width: 151px"><span class="inline-wrap">依赖库</span></td><td style="width: 235px"><span class="inline-wrap">地址</span></td><td style="width: 168px"><span class="inline-wrap">说明</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>antd</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://ant.design/"><span>https://ant.design</span></a></span></td><td style="width: 168px"><span class="inline-wrap">UI<span class="jill"></span>框架</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>axios</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://axios-http.com/docs/intro"><span>https://axios-http.com/docs/intro</span></a></span></td><td style="width: 168px"><span class="inline-wrap">HTTP<span class="jill"></span>请求库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>jspdf</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://github.com/parallax/jsPDF"><span>https://github.com/parallax/jsPDF</span></a></span></td><td style="width: 168px"><span class="inline-wrap">生成<span class="jill"></span>PDF<span class="jill"></span>文档</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>html2canvas</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://html2canvas.hertzen.com/"><span>https://html2canvas.hertzen.com/</span></a></span></td><td style="width: 168px"><span class="inline-wrap">html<span class="jill"></span>内容写入<span class="jill"></span>canvas<span class="jill"></span>生成图片</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>lodash</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://www.lodashjs.com/"><span>https://www.lodashjs.com/</span></a></span></td><td style="width: 168px"><span class="inline-wrap">Lodash</span><span class="inline-wrap">库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>i18next</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://www.i18next.com/"><span>https://www.i18next.com</span></a></span></td><td style="width: 168px"><span class="inline-wrap">国际化</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>moment</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://momentjs.cn/"><span>https://momentjs.cn</span></a></span></td><td style="width: 168px"><span class="inline-wrap">时间解析库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>localforage</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://localforage.docschina.org/"><span>https://localforage.docschina.org</span></a></span></td><td style="width: 168px"><span class="inline-wrap">LocalStorage<span class="jill"></span>的封装</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>match-sorter</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://github.com/kentcdodds/match-sorter"><span>https://github.com/kentcdodds/match-sorter</span></a></span></td><td style="width: 168px"><span class="inline-wrap">数组处理库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>react-router-dom</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://reactrouter.com/en/main"><span>https://reactrouter.com/en/main</span></a></span></td><td style="width: 168px"><span class="inline-wrap">路由库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>redux</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://cn.redux.js.org/"><span>https://cn.redux.js.org</span></a></span></td><td style="width: 168px"><span class="inline-wrap">全局状态</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>sort-by</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://github.com/kvnneff/sort-by"><span>https://github.com/kvnneff/sort-by</span></a></span></td><td style="width: 168px"><span class="inline-wrap">数组加强库</span></td></tr><tr><td style="width: 151px"><span class="inline-wrap"><code>react-ga</code></span></td><td style="width: 235px"><span class="inline-wrap"><a href="https://github.com/react-ga/react-ga"><span>https://github.com/react-ga/react-ga</span></a></span></td><td style="width: 168px"><span class="inline-wrap">反应谷歌分析模块</span></td></tr></tbody></table></div><h4 id="o6a7pm2UKSHnsSuqVSEwWv" class="wolai-block"><span class="inline-wrap">4.2.3 页面架构图</span></h4><div id="w577VPcUFPHeAkWeC5t2qA" class="wolai-block"><figure class="wolai-center" style="width: 100%; flex-direction: column"><img src="media/image_1.png" style="width: 100%"/></figure></div><h4 id="2gZ1nNwpoSggD2S3EfZkgp" class="wolai-block"><span class="inline-wrap">4.2.4 全局状态</span></h4><h5 id="4vn3icMANCtpRAh2XXVCGY" class="wolai-block"><span class="inline-wrap">4.2.4.1 全局状态一、登录用户</span></h5><ul class="wolai-block"><li id="uUHTrMND9tXft1FZ58GXhs"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">路径</span></li></ul><div id="2HwNZSpVRnWM1VyQojJVAr" class="wolai-block wolai-text"><div><span class="inline-wrap"><code>src/store/user/loginUserSlice.ts</code></span></div></div><ul class="wolai-block"><li id="7ayvQjBkw5XNWkhGDiYTor"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">存储变量结构</span></li></ul><code-block id="rax6kx7afMUxAdn2gPtg67" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">type</span> <span class="token class-name">ResourceUrlModel</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">type</span> <span class="token class-name">UserModel</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
avatar<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
credit1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
email<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
create_city<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
create_ip<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
id_card<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
is_active<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
is_lock<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
from_scene<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
is_set_password<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
is_verify<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
created_at<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
updated_at<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
login_at<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
verify_at<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">type</span> <span class="token class-name">UserStoreInterface</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
user<span class="token operator">:</span> UserModel <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||
departments<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
currentDepId<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
resourceUrl<span class="token operator">:</span> ResourceUrlModel<span class="token punctuation">;</span>
|
||
isLogin<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="mbJJQJyjyzEvQrffDFKf3N"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>一、读取信息</span></li></ul><code-block id="wGkgLdxfSpcwU8u2mjn86R" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户信息</span>
|
||
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的部门</span>
|
||
<span class="token keyword">const</span> departments <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>departments<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的资源地址</span>
|
||
<span class="token keyword">const</span> resourceUrl <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>resourceUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的登录状态</span>
|
||
<span class="token keyword">const</span> isLogin <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>isLogin<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的默认当前部门ID</span>
|
||
<span class="token keyword">const</span> currentDepId <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>currentDepId<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</pre></div></code-block><ul class="wolai-block"><li id="oXV7NwyC189Y48XMZSsrWW"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>二、存储信息</span></li></ul><code-block id="rTA6K478fKRNVzmkJ6F9X7" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useDispatch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> loginAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./store/user/loginUserSlice"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> dispatch <span class="token operator">=</span> <span class="token function">useDispatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 获取用户数据</span>
|
||
<span class="token keyword">let</span> userRes<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token keyword">await</span> user<span class="token punctuation">.</span><span class="token function">detail</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 将用户数据存储到全局状态</span>
|
||
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">loginAction</span><span class="token punctuation">(</span>userRes<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
</pre></div></code-block><h4 id="mxYHe3oHgZb94iVVoP932v" class="wolai-block"><span class="inline-wrap">4.2.4.2 全局状态二、全局配置</span></h4><ul class="wolai-block"><li id="2f9xoX5HuW4tF27t6R7uaw"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">路径</span></li></ul><div id="safEuE8eD71itcysG6PL3k" class="wolai-block wolai-text"><div><span class="inline-wrap"><code>src/store/system/systemConfigSlice.ts</code></span></div></div><ul class="wolai-block"><li id="8Vdxboi166DGwJyehv75Tz"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">存储变量结构</span></li></ul><code-block id="qopcdehowg7cTwdThTw8Ja" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">type</span> <span class="token class-name">SystemConfigStoreInterface</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
synchEnabled<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
synchScene<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
synchWorkAgentId<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
synchWorkCorpId<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
synchWorkCorpSecret<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
synchWorkUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemApiUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemLanguage<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemPcUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemH5Url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemLogo<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
pcIndexFooterMsg<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
playerPoster<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
playerIsEnabledBulletSecret<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
playerIsDisabledDrag<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
playerBulletSecretText<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
playerBulletSecretColor<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
playerBulletSecretOpacity<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
resourceUrl<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="eC4mF7gxhWdwrkXk8ExDjS"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>一、读取信息</span></li></ul><code-block id="3V9dymD4Pt4oPjx4pnNNJv" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> systemConfig <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>systemConfig<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="cdxB3uVJonzdCafDJXSJCf"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>二、存储信息</span></li></ul><code-block id="39nRfRwzLxqQA2Gf2pcgwg" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useDispatch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||
SystemConfigStoreInterface<span class="token punctuation">,</span>
|
||
saveConfigAction<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../../store/system/systemConfigSlice"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">let</span> configRes<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token keyword">await</span> system<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">let</span> config<span class="token operator">:</span> SystemConfigStoreInterface <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//系统配置</span>
|
||
synchEnabled<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.enabled"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchScene<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.scene"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchWorkAgentId<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.agentid"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchWorkCorpId<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.corpid"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchWorkCorpSecret<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.corpsecret"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchWorkUrl<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemApiUrl<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-api-url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemLanguage<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system.language"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemH5Url<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-h5-url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemLogo<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>
|
||
<span class="token function">Number</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"system-logo"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">?</span> configRe<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>
|
||
<span class="token function">Number</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"system-logo"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||
systemName<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-name"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemPcUrl<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-pc-url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
pcIndexFooterMsg<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-pc-index-footer-msg"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token comment">//播放器配置</span>
|
||
playerPoster<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>
|
||
<span class="token function">Number</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"player-poster"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">?</span> configRes<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>
|
||
<span class="token function">Number</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"player-poster"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||
playerIsEnabledBulletSecret<span class="token operator">:</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-is-enabled-bullet-secret"</span><span class="token punctuation">]</span> <span class="token operator">&&</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-is-enabled-bullet-secret"</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"1"</span>
|
||
<span class="token operator">?</span> <span class="token boolean">true</span>
|
||
<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
playerIsDisabledDrag<span class="token operator">:</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-disabled-drag"</span><span class="token punctuation">]</span> <span class="token operator">&&</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-disabled-drag"</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"1"</span>
|
||
<span class="token operator">?</span> <span class="token boolean">true</span>
|
||
<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
playerBulletSecretText<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"player-bullet-secret-text"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
playerBulletSecretColor<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"player-bullet-secret-color"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
playerBulletSecretOpacity<span class="token operator">:</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-bullet-secret-opacity"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
resourceUrl<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
i18n<span class="token punctuation">.</span><span class="token function">changeLanguage</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"system.language"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 将系统数据存储到全局状态</span>
|
||
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">saveConfigAction</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</pre></div></code-block><h3 id="qv8hULiRFQCU2NUw28nn7P" class="wolai-block"><span class="inline-wrap">4.3 H5<span class="jill"></span>学员界面</span></h3><h4 id="rLCTHLbrCQBAspVVxwgYNL" class="wolai-block"><span class="inline-wrap">4.3.1<span class="jill"></span>文件目录结构</span></h4><code-block id="f1tVVcawByg7nXhY2BqotK" class="wolai-block"><div class="wolai-pre"><div data-lang="Text" class="marker"></div><pre>playedu
|
||
├── public // 公共资源
|
||
│ └── js // 公共JS
|
||
│ └── favicon.ico // 网站ICO
|
||
│
|
||
├── src // 资源
|
||
│ └── api // 各页面API
|
||
│ └── internal // 全局API配置
|
||
│ └──... // 各模块API配置
|
||
│ └── compenents // 全局组件
|
||
│ └── assets // 全局外部资源
|
||
│ └── i18n // 国际化配置
|
||
│ └── cn.json // 简中语言JSON
|
||
│ └── config.ts // 国际化配置
|
||
│ └── tc.json // 繁中语言JSON
|
||
│ └── js // 通用JS
|
||
│ └── pages // 页面资源
|
||
│ └── cert // 证书模块
|
||
│ └── change-department // 切换部门模块
|
||
│ └── change-password // 修改密码模块
|
||
│ └── course // 线上课模块
|
||
│ └── index // 首页模块
|
||
│ └── error // 错误模块
|
||
│ └── init // 初始化
|
||
│ └── layouts // 页面布局
|
||
│ └── loading // 公用loading模块
|
||
│ └── login // 登录模块
|
||
│ └── member // 学员中心模块
|
||
│ └── task // 任务模块
|
||
│ └── index.tsx // 学习任务模块
|
||
│ └── exam.tsx // 考试任务模块
|
||
│ └── ... // 任务相关模块
|
||
│ └── study // 最近学习模块
|
||
│ └── upload // PC扫码、H5的考试上传模块
|
||
│ └── routes // 路由
|
||
│ └── store // 中间件及store
|
||
│ └── system // 系统store
|
||
│ └── user // 用户store
|
||
│ └── index.ts // store配置
|
||
│ └── utils // 工具类
|
||
│ └── global.d.ts // 全局变量
|
||
│ └── playedu.d.ts // 全局类型
|
||
│ └── AutoTop.ts // 全局页面自动滚动到最上方
|
||
│ └── custom.d.ts // 全局css、less、scss配置
|
||
│ └── main.scss // 全局样式
|
||
│ └── main.tsx // 主要模块
|
||
│ └── App.scss // 系统样式
|
||
│ └── App.tsx // 系统模块
|
||
├── .env.example // Env配置模版
|
||
├── .env.local // Env配置
|
||
├── .env（可用） // Env配置
|
||
├── vite.config.ts // VITE配置
|
||
├── ...
|
||
</pre></div></code-block><h4 id="iwWwAkWzyvJRJunqYxvz7V" class="wolai-block"><span class="inline-wrap">4.3.2 依赖库</span></h4><div id="hSZaihMXEiTY9eM16T8JQu" class="wolai-block wolai-simple-table"><table><tbody><tr><td style="width: 186px"><span class="inline-wrap">依赖库</span></td><td style="width: 207px"><span class="inline-wrap">地址</span></td><td style="width: 158px"><span class="inline-wrap">说明</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>antd-mobile</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://ant-design-mobile.antgroup.com/zh"><span>https://ant-design-mobile.antgroup.com/zh</span></a></span></td><td style="width: 158px"><span class="inline-wrap">UI<span class="jill"></span>框架</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>axios</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://axios-http.com/docs/intro"><span>https://axios-http.com/docs/intro</span></a></span></td><td style="width: 158px"><span class="inline-wrap">HTTP<span class="jill"></span>请求库</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>jspdf</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://github.com/parallax/jsPDF"><span>https://github.com/parallax/jsPDF</span></a></span></td><td style="width: 158px"><span class="inline-wrap">生成<span class="jill"></span>PDF<span class="jill"></span>文档</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>html2canvas</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://html2canvas.hertzen.com/"><span>https://html2canvas.hertzen.com/</span></a></span></td><td style="width: 158px"><span class="inline-wrap">html<span class="jill"></span>内容写入<span class="jill"></span>canvas<span class="jill"></span>生成图片</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>@types/lodash</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://www.lodashjs.com/"><span>https://www.lodashjs.com/</span></a></span></td><td style="width: 158px"><span class="inline-wrap">Lodash</span><span class="inline-wrap">库</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>i18next</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://www.i18next.com/"><span>https://www.i18next.com</span></a></span></td><td style="width: 158px"><span class="inline-wrap">国际化</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>moment</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://momentjs.cn/"><span>https://momentjs.cn</span></a></span></td><td style="width: 158px"><span class="inline-wrap">时间解析库</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>xgplayer</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://h5player.bytedance.com/"><span>https://h5player.bytedance.com</span></a></span></td><td style="width: 158px"><span class="inline-wrap">播放器</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>xgplayer-hls</code></span></td><td style="width: 207px"><span class="inline-wrap">-</span></td><td style="width: 158px"><span class="inline-wrap">播放器<span class="jill"></span>HLS<span class="jill"></span>库</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>localforage</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://localforage.docschina.org/"><span>https://localforage.docschina.org</span></a></span></td><td style="width: 158px"><span class="inline-wrap">LocalStorage<span class="jill"></span>的封装</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>match-sorter</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://github.com/developit/mitt"><span>https://github.com/developit/mitt</span></a></span></td><td style="width: 158px"><span class="inline-wrap">数组处理库</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>mitt</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://github.com/kentcdodds/match-sorter"><span>https://github.com/kentcdodds/match-sorter</span></a></span></td><td style="width: 158px"><span class="inline-wrap">Mitt<span class="jill"></span>事件库</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>react-router-dom</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://reactrouter.com/en/main"><span>https://reactrouter.com/en/main</span></a></span></td><td style="width: 158px"><span class="inline-wrap">路由库</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>redux</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://cn.redux.js.org/"><span>https://cn.redux.js.org</span></a></span></td><td style="width: 158px"><span class="inline-wrap">全局状态</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>sort-by</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://github.com/kvnneff/sort-by"><span>https://github.com/kvnneff/sort-by</span></a></span></td><td style="width: 158px"><span class="inline-wrap">数组加强库</span></td></tr><tr><td style="width: 186px"><span class="inline-wrap"><code>react-ga</code></span></td><td style="width: 207px"><span class="inline-wrap"><a href="https://github.com/react-ga/react-ga"><span>https://github.com/react-ga/react-ga</span></a></span></td><td style="width: 158px"><span class="inline-wrap">反应谷歌分析模块</span></td></tr></tbody></table></div><h4 id="kvWbSH5hyeHnRtKg2WnigA" class="wolai-block"><span class="inline-wrap">4.3.3 页面架构图</span></h4><div id="hbdEaGb9ifPDXTPXrJgN48" class="wolai-block"><figure class="wolai-center" style="width: 100%; flex-direction: column"><img src="media/image_2.png" style="width: 100%"/></figure></div><div id="u8XKJmNMzgupow1RRUKX6g" class="wolai-block wolai-text"><div><span class="inline-wrap"></span><br/></div></div><h4 id="3BmVCEtdgKiTJC64kxsbZr" class="wolai-block"><span class="inline-wrap">4.3.4 全局状态</span></h4><h5 id="2NNj6rEE6taMdnsTDb5CtJ" class="wolai-block"><span class="inline-wrap">4.3.4.1 全局状态一、登录用户</span></h5><ul class="wolai-block"><li id="jUZNCFNgPsj12TB8Jidfxt"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">路径</span></li></ul><div id="27FsnmWR7SSrev3bQ1AQyL" class="wolai-block wolai-text"><div><span class="inline-wrap"><code>src/store/user/loginUserSlice.ts</code></span></div></div><ul class="wolai-block"><li id="26sn4A729BdUZPmRnPgKef"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">存储变量结构</span></li></ul><code-block id="mD3aEgjmqUJTkL4Ec8xnJM" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">type</span> <span class="token class-name">ResourceUrlModel</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">type</span> <span class="token class-name">UserModel</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
avatar<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
credit1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
email<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
create_city<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
create_ip<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
id_card<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
is_active<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
is_lock<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
from_scene<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
is_set_password<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
is_verify<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
created_at<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
updated_at<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
login_at<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
verify_at<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">type</span> <span class="token class-name">UserStoreInterface</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
user<span class="token operator">:</span> UserModel <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||
departments<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
currentDepId<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
resourceUrl<span class="token operator">:</span> ResourceUrlModel<span class="token punctuation">;</span>
|
||
isLogin<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="vjBmjQzpP5BMYPB8DBrxLn"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>一、读取信息</span></li></ul><code-block id="tMmb7BTky4hd9r2Vg4vVWr" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户信息</span>
|
||
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的部门</span>
|
||
<span class="token keyword">const</span> departments <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>departments<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的资源地址</span>
|
||
<span class="token keyword">const</span> resourceUrl <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>resourceUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的登录状态</span>
|
||
<span class="token keyword">const</span> isLogin <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>isLogin<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 读取登录用户的默认当前部门ID</span>
|
||
<span class="token keyword">const</span> currentDepId <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>loginUser<span class="token punctuation">.</span>value<span class="token punctuation">.</span>currentDepId<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</pre></div></code-block><ul class="wolai-block"><li id="2Wn5yti55rQPNNYiABhd9w"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>二、存储信息</span></li></ul><code-block id="tL2jSw6fXh9FpGsKLkzh3Z" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useDispatch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> loginAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./store/user/loginUserSlice"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> dispatch <span class="token operator">=</span> <span class="token function">useDispatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 获取用户数据</span>
|
||
<span class="token keyword">let</span> userRes<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token keyword">await</span> user<span class="token punctuation">.</span><span class="token function">detail</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 将用户数据存储到全局状态</span>
|
||
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">loginAction</span><span class="token punctuation">(</span>userRes<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
</pre></div></code-block><h4 id="6ELebnzfn6mpPUugwFMZqe" class="wolai-block"><span class="inline-wrap">4.3.4.2 全局状态二、全局配置</span></h4><ul class="wolai-block"><li id="inbHXxNGj9S2pZgXM5siBs"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">路径</span></li></ul><div id="cEpVVZXwbTV7iG9AuT1j9T" class="wolai-block wolai-text"><div><span class="inline-wrap"><code>src/store/system/systemConfigSlice.ts</code></span></div></div><ul class="wolai-block"><li id="x1mtsGVZMwMdp7twfXRjKw"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">存储变量结构</span></li></ul><code-block id="tnRxHz12Lg8R3jqw3wHBia" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">type</span> <span class="token class-name">SystemConfigStoreInterface</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
synchEnabled<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
synchScene<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
synchWorkAgentId<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
synchWorkCorpId<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
synchWorkCorpSecret<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
synchWorkUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemApiUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemLanguage<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemPcUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemH5Url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemLogo<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
systemName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
pcIndexFooterMsg<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
playerPoster<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
playerIsEnabledBulletSecret<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
playerIsDisabledDrag<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
playerBulletSecretText<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
playerBulletSecretColor<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
playerBulletSecretOpacity<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
resourceUrl<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="bvrAx2eApL6RYfDKo9DGCX"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>一、读取信息</span></li></ul><code-block id="edw6DefLrRZRB8bUwQEyzb" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> systemConfig <span class="token operator">=</span> <span class="token function">useSelector</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>systemConfig<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></div></code-block><ul class="wolai-block"><li id="wh1VgMt9vv2LJNJ8W9ao7S"><div class="marker"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path></svg></div><span class="inline-wrap">demo<span class="jill"></span>二、存储信息</span></li></ul><code-block id="8JfWR7cUunMoZvMvW7MoMX" class="wolai-block"><div class="wolai-pre"><div data-lang="TypeScript" class="marker"></div><pre style="white-space: pre-wrap; word-break: break-all"><span class="token keyword">import</span> <span class="token punctuation">{</span> useDispatch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-redux"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||
SystemConfigStoreInterface<span class="token punctuation">,</span>
|
||
saveConfigAction<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../../store/system/systemConfigSlice"</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">let</span> configRes<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token keyword">await</span> system<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">let</span> config<span class="token operator">:</span> SystemConfigStoreInterface <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//系统配置</span>
|
||
synchEnabled<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.enabled"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchScene<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.scene"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchWorkAgentId<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.agentid"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchWorkCorpId<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.corpid"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchWorkCorpSecret<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.corpsecret"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
synchWorkUrl<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"synch.url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemApiUrl<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-api-url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemLanguage<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system.language"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemH5Url<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-h5-url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemLogo<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>
|
||
<span class="token function">Number</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"system-logo"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">?</span> configRe<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>
|
||
<span class="token function">Number</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"system-logo"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||
systemName<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-name"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
systemPcUrl<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-pc-url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
pcIndexFooterMsg<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"system-pc-index-footer-msg"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token comment">//播放器配置</span>
|
||
playerPoster<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>
|
||
<span class="token function">Number</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"player-poster"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">?</span> configRes<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>
|
||
<span class="token function">Number</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"player-poster"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||
playerIsEnabledBulletSecret<span class="token operator">:</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-is-enabled-bullet-secret"</span><span class="token punctuation">]</span> <span class="token operator">&&</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-is-enabled-bullet-secret"</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"1"</span>
|
||
<span class="token operator">?</span> <span class="token boolean">true</span>
|
||
<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
playerIsDisabledDrag<span class="token operator">:</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-disabled-drag"</span><span class="token punctuation">]</span> <span class="token operator">&&</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-disabled-drag"</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"1"</span>
|
||
<span class="token operator">?</span> <span class="token boolean">true</span>
|
||
<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
playerBulletSecretText<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"player-bullet-secret-text"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
playerBulletSecretColor<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"player-bullet-secret-color"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
playerBulletSecretOpacity<span class="token operator">:</span>
|
||
configRes<span class="token punctuation">[</span><span class="token string">"player-bullet-secret-opacity"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
resourceUrl<span class="token operator">:</span> configRes<span class="token punctuation">[</span><span class="token string">"resource_url"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
i18n<span class="token punctuation">.</span><span class="token function">changeLanguage</span><span class="token punctuation">(</span>configRes<span class="token punctuation">[</span><span class="token string">"system.language"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 将系统数据存储到全局状态</span>
|
||
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">saveConfigAction</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</pre></div></code-block><div id="smpPHghrjqPbQqxCRVqBMj" class="wolai-block wolai-text"><div></div></div></article><footer></footer></body></html> |