perf: 权限申请的引导

src/views/ProtectedRoute.jsx

@@ -1,8 +1,11 @@
 import { useContext } from 'react';
-import { Button, Result, message } from 'antd';
+import { Button, Result, message, Typography, Image } from 'antd';
 import { stores_Context } from '../config';
 import { observer } from 'mobx-react';
-import { Outlet, useLocation, } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
+import authExample from './../auth-apply.png';
+
+const { Text } = Typography;
 
 const ProtectedRoute = ({ auth }) => {
   const { auth_store } = useContext(stores_Context);
@@ -32,16 +35,49 @@ const ProtectedRoute = ({ auth }) => {
         title="403 权限不足"
         subTitle={
           <>
-            <div>
-              复制以下信息到OA审批申请
-              <Button type="link" onClick={() => copyToClipboard(applyInfo)}>复制</Button>
+            <div style={{ width: 300, textAlign: 'left', margin: 'auto auto' }}>
+              <div>
+                <Text type={'danger'} strong>
+                  申请步骤:
+                </Text>
+              </div>
+              <ol>
+                <li>
+                  复制以下信息
+                  {/* <Button type="link" onClick={() => copyToClipboard(applyInfo)}>
+                      复制
+                    </Button> */}
+                </li>
+                <li>
+                  <pre className={'p-s1'} style={{ border: '1px solid rgba(0,0,0,.15)', borderRadius: 4 }}>
+                    {applyInfo}
+                  </pre>
+                </li>
+                <li>
+                  打开OA审批,
+                  <ul>
+                    <li>输入申请信息(姓名等)</li>
+                    <li>
+                      选择开通权限: <Text type={'warning'}>HT系统分析</Text>
+                    </li>
+                    <li>
+                      填入上述复制的信息到 <Text type={'warning'}>权限内容</Text>
+                    </li>
+                  </ul>
+                  <Button type="link" href={authApplyLink}>
+                    打开OA审批 &raquo;
+                  </Button>
+                </li>
+              </ol>
+              <div>
+                <Text type={'secondary'} strong>
+                  示例:
+                </Text>
+              </div>
+              <Image alt="example" src={authExample} preview={false} />
             </div>
-            <pre>
-              {applyInfo}
-            </pre>
           </>
         }
-        extra={<Button type="link" href={authApplyLink}>去申请</Button>}
       />
     </div>
   );