feat: Allow users to view their associated user groups and roles in the frontend

close: #265

仅在 PC端 展示，移动端不变

web/src/components/Header.js

@@ -5,6 +5,7 @@ import { UserContext } from '../context/User';
 import { Button, Container, Dropdown, Icon, Menu, Segment } from 'semantic-ui-react';
 import { API, getLogo, getSystemName, isAdmin, isMobile, showSuccess } from '../helpers';
 import '../index.css';
+import { renderGroup, renderRole } from '../helpers/render';
 
 // Header Buttons
 let headerButtons = [
@@ -202,7 +203,12 @@ const Header = () => {
                 className='link item'
               >
                 <Dropdown.Menu>
-                  <Dropdown.Item onClick={logout}>注销</Dropdown.Item>
+                  <Dropdown.Item>用户组：{renderGroup(userState.user.group)}</Dropdown.Item>
+                  <Dropdown.Item>角色：{renderRole(userState.user.role)}</Dropdown.Item>
+                  <Dropdown.Item onClick={logout}>
+                    <Icon name='sign-out' />
+                    注销
+                  </Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
             ) : (

web/src/components/UserRole.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Label } from 'semantic-ui-react';
+
+const UserRole = ({ role }) => {
+  switch (role) {
+    case 1:
+      return <Label>普通用户</Label>;
+    case 10:
+      return <Label color='yellow'>管理员</Label>;
+    case 100:
+      return <Label color='orange'>超级管理员</Label>;
+    default:
+      return <Label color='red'>未知身份</Label>;
+  }
+};
+
+export default UserRole;

web/src/components/UsersTable.js

@@ -4,20 +4,7 @@ import { Link } from 'react-router-dom';
 import { API, showError, showSuccess } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
-import { renderGroup, renderNumber, renderQuota, renderText } from '../helpers/render';
+import { renderGroup, renderNumber, renderQuota, renderRole, renderText } from '../helpers/render';
-
-function renderRole(role) {
-  switch (role) {
-    case 1:
-      return <Label>普通用户</Label>;
-    case 10:
-      return <Label color='yellow'>管理员</Label>;
-    case 100:
-      return <Label color='orange'>超级管理员</Label>;
-    default:
-      return <Label color='red'>未知身份</Label>;
-  }
-}
 
 const UsersTable = () => {
   const [users, setUsers] = useState([]);

web/src/helpers/render.js

@@ -7,6 +7,19 @@ export function renderText(text, limit) {
   return text;
 }
 
+export function renderRole(role) {
+  switch (role) {
+    case 1:
+      return <Label>普通用户</Label>;
+    case 10:
+      return <Label color='yellow'>管理员</Label>;
+    case 100:
+      return <Label color='orange'>超级管理员</Label>;
+    default:
+      return <Label color='red'>未知身份</Label>;
+  }
+}
+
 export function renderGroup(group) {
   if (group === '') {
     return <Label>default</Label>;