Api/Ewide.Core/Ewide.Core.Web.Src/src/assets/style/main.less

@@ -59,6 +59,83 @@
         }
       }
     }
+    .user-container {
+      z-index: 10;
+
+      width: 32px + @padding-sm * 2;
+      height: @layout-header-height - 24px;
+      margin: 2px 0;
+
+      transition: @animation-duration-slow;
+      .user-container-inner {
+        position: relative;
+
+        transition: @animation-duration-slow;
+
+        border-radius: @border-radius-base;
+      }
+      .user {
+        &--base {
+          line-height: @layout-header-height - 24px;
+
+          position: relative;
+
+          display: flex;
+          overflow: hidden;
+          align-items: center;
+
+          width: 100%;
+          height: @layout-header-height - 24px;
+          padding: 0 @padding-sm;
+
+          transition: @animation-duration-slow;
+        }
+        &--avatar {
+          box-shadow: 0 0 0 2px @white;
+        }
+        &--name {
+          position: absolute;
+          left: 32px + @padding-sm * 2;
+
+          transition: @animation-duration-slow;
+
+          opacity: 0;
+        }
+        &--dropdown {
+          width: 200px;
+
+          transition: @animation-duration-base;
+          transform: scaleY(0);
+          transform-origin: top;
+
+          opacity: 0;
+          .ant-dropdown-menu {
+            box-shadow: none;
+          }
+        }
+      }
+      &.open {
+        width: 200px;
+        .user-container-inner {
+          background-color: @white;
+          box-shadow: @box-shadow-base;
+        }
+        .user {
+          &--name {
+            opacity: 1;
+          }
+        }
+      }
+      &.drop {
+        .user {
+          &--dropdown {
+            transform: scaleY(1);
+
+            opacity: 1;
+          }
+        }
+      }
+    }
   }
   .ant-layout-content {
     position: relative;
@@ -73,7 +150,7 @@
 
       width: 100%;
       >.ant-tabs-bar {
-        z-index: 6;
+        z-index: 5;
 
         margin-bottom: 0;
 
@@ -176,7 +253,7 @@
     .ant-layout-header {
       line-height: @layout-header-height - 20px;
 
-      z-index: 5;
+      z-index: 6;
 
       height: @layout-header-height - 20px;
       padding: 0;
@@ -188,7 +265,9 @@
       }
       .header-actions {
         .header-action {
-          line-height: @layout-header-height - 20px;
+          line-height: @layout-header-height - 16px;
+
+          height: @layout-header-height - 20px;
           .anticon {
             color: fade(@black, 35%);
           }
@@ -339,6 +418,9 @@
           }
         }
       }
+      .user-container {
+        margin: 12px 0;
+      }
       .logo {
         font-size: @font-size-lg * 1.5;
         font-weight: 500;
@@ -389,7 +471,7 @@
     &--container {
       .ant-layout-header {
         .ant-menu-horizontal {
-          width: 600px;
+          width: 400px;
         }
       }
       .ant-layout-content {

Api/Ewide.Core/Ewide.Core.Web.Src/src/common/api/index.js

@@ -77,12 +77,22 @@ for (let key in urls) {
                 .then(({ data }) => {
                     reslove(data)
                 })
-                .catch(err => {
+                .catch(({ response: { data } }) => {
-                    if (process.env.VUE_APP_NODE_ENV === 'development') {
+                    const { code, message } = data
-                        alert('发生错误，请联系管理员')
+                    app.$notification.error({
-                    } else {
+                        duration: 0,
-                        reject(err, urls[key])
+                        message: code,
-                    }
+                        description: message,
+                    })
+
+                    // if (process.env.VUE_APP_NODE_ENV === 'development') {
+                    //     app.$notification.open({
+                    //         message: '错误',
+                    //         description: '发生错误，请联系管理员',
+                    //     });
+                    // } else {
+                    //     reject(err, urls[key])
+                    // }
                 })
         })
     }

Api/Ewide.Core/Ewide.Core.Web.Src/src/common/login/index.js

@@ -46,7 +46,7 @@ const doLogin = (args) => {
 
 const doLogout = () => {
     return new Promise((resolve, reject) => {
-        api.logout().then(({ result: { success, message } }) => {
+        api.logout().then(({ success, message }) => {
             if (success) {
                 removeGlobal()
                 token.value = ''

Api/Ewide.Core/Ewide.Core.Web.Src/src/components/authorized/index.js

@@ -37,9 +37,9 @@
  * 
  */
 
-const authByArray = (auth, permissions) => {
+import app from '@/main'
 
-    let result = true
+const authByArray = (auth, permissions) => {
 
     const flags = []
 
@@ -57,8 +57,25 @@ const authByArray = (auth, permissions) => {
         }
     })
 
-    flags.forEach(p => {
+    let result
-        result = p[1] === '&&' ? result && p[0] : result || p[0]
+
+    flags.forEach((p, i) => {
+        if (p[1] === '&&') {
+            if (i === 0) {
+                result = true
+            }
+            if (result) {
+                result = p[0]
+            }
+        } else {
+            if (i === 0) {
+                result = false
+            }
+            if (!result) {
+                result = p[0]
+            }
+        }
+        //result = p[1] === '&&' ? result && p[0] : result || p[0]
     })
 
     return result
@@ -71,10 +88,10 @@ const authByJson = (auth, permissions) => {
     const flags = []
 
     const deepName = (arr, key) => {
-        arr.forEach(p => {
+        arr.forEach((p, i) => {
             switch (p.constructor) {
                 case String:
-                    p = `${key}:${p}`
+                    arr[i] = `${key}:${p}`
                     break
                 case Array:
                     p = deepName(p, key)
@@ -84,6 +101,7 @@ const authByJson = (auth, permissions) => {
                     break
             }
         })
+        return arr
     }
 
     for (let key in auth) {
@@ -106,6 +124,41 @@ const authByJson = (auth, permissions) => {
 
 }
 
+export const auth = (auth) => {
+
+    const { info } = app.global
+    const permissions = info.permissions
+
+    if (!info) {
+        return false
+    }
+
+    /**
+     * 超级管理员
+     */
+    if (info.adminType === 1) {
+        return true
+    }
+
+    let flag = false
+
+    if (auth) {
+        switch (auth.constructor) {
+            case String:
+                flag = permissions.indexOf(auth) > -1
+                break
+            case Array:
+                flag = authByArray(auth, permissions)
+                break
+            case Object:
+                flag = authByJson(auth, permissions)
+                break
+        }
+    }
+
+    return flag
+}
+
 export default {
     functional: true,
     props: {
@@ -125,37 +178,9 @@ export default {
 
     render(h, context) {
         const { props, scopedSlots } = context
-        const { info } = context.parent.$root.global
-        const permissions = info.permissions
-        const auth = props.auth
         const authExclude = props.authExclude
 
-        if (!info) {
+        let flag = auth(props.auth)
-            return false
-        }
-
-        /**
-         * 超级管理员
-         */
-        if (info.adminType === 1) {
-            return scopedSlots.default()
-        }
-
-        let flag = false
-
-        if (auth) {
-            switch (auth.constructor) {
-                case String:
-                    flag = permissions.indexOf(auth) > -1
-                    break
-                case Array:
-                    flag = authByArray(auth, permissions)
-                    break
-                case Object:
-                    flag = authByJson(auth, permissions)
-                    break
-            }
-        }
 
         if (flag) {
             return scopedSlots.default()

Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTable/index.js

@@ -1,3 +1,5 @@
+import { template } from "lodash";
+
 export default {
   props: {
     pageNo: {
@@ -33,6 +35,11 @@ export default {
         showQuickJumper: true,
         showTotal: (total) => `总共${total}条数据`
       },
+
+      sorter: {
+        sortField: '',
+        sortOrder: '',
+      }
     };
   },
 
@@ -57,7 +64,8 @@ export default {
 
       this.loadData({
         pageNo: this.pagination.current,
-        pageSize: this.pagination.pageSize
+        pageSize: this.pagination.pageSize,
+        ...this.sorter
       }).then((res) => {
         this.data = res.rows
         this.pagination.total = res.totalRows
@@ -75,6 +83,7 @@ export default {
 
     onTableChange(pagination, filters, sorter) {
       this.pagination = pagination
+      this.sorter = sorter
       this.onLoadData()
     }
   },
@@ -95,11 +104,17 @@ export default {
     }
 
     return (
-      <a-table class="yo-table" {...{ props, on, scopedSlots: { ...this.$scopedSlots } }}>
+      <section>
-        {Object.keys(this.$slots).map((name) => (
+        <a-alert type="error" closable>
-          <template slot={name}>{this.$slots[name]}</template>
+          <template slot="message">后端没有排序参数</template>
-        ))}
+        </a-alert>
-      </a-table>
+        <br />
+        <a-table class="yo-table" {...{ props, on, scopedSlots: { ...this.$scopedSlots } }}>
+          {Object.keys(this.$slots).map((name) => (
+            <template slot={name}>{this.$slots[name]}</template>
+          ))}
+        </a-table>
+      </section>
     )
   },
 }

Api/Ewide.Core/Ewide.Core.Web.Src/src/components/yoTreeLayout/index.js

@@ -180,7 +180,7 @@ export default {
           </swiper>
         </a-layout-sider>
         <a-layout-content>
-          {this.$scopedSlots.default()}
+          {this.$scopedSlots.default ? this.$scopedSlots.default() : null}
         </a-layout-content>
       </a-layout>
     )

Api/Ewide.Core/Ewide.Core.Web.Src/src/main.js

@@ -39,6 +39,9 @@ Vue.prototype.$api = api
 import _ from 'lodash'
 Vue.prototype.$_ = _
 
+import { auth } from './components/authorized'
+Vue.prototype.$auth = auth
+
 /**
  * 注册全局组件
  */

Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/org/addForm.vue

@@ -0,0 +1,69 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="新增应用"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    onOpen() {
+      this.visible = true;
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api.sysAppAdd(this.$refs['form-body'].form).then(({ success, message }) => {
+            this.confirmLoading = false;
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            } else {
+              this.$message.error(message);
+            }
+          });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/org/editForm.vue

@@ -0,0 +1,72 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="编辑应用"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api.sysAppEdit(this.$refs['form-body'].form).then(({ success, message }) => {
+            this.confirmLoading = false;
+            if (success) {
+              this.$message.success('新增成功');
+              this.onCancel();
+              this.$emit('ok');
+            } else {
+              this.$message.error(message);
+            }
+          });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/org/form.vue

@@ -0,0 +1,66 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <div class="yo-form-group">
+      <a-form-model-item label="机构名称" prop="name">
+        <a-input placeholder="请输入机构名称" v-model="form.name" />
+      </a-form-model-item>
+      <a-form-model-item label="唯一编码" prop="code">
+        <a-input placeholder="请输入唯一编码" v-model="form.code" />
+      </a-form-model-item>
+      <a-form-model-item label="排序" prop="sort">
+        <a-input-number
+          :max="1000"
+          :min="0"
+          class="w-100-p"
+          placeholder="请输入排序"
+          v-model="form.sort"
+        />
+      </a-form-model-item>
+      <a-form-model-item label="备注">
+        <a-input placeholder="请输入备注" v-model="form.remark" />
+      </a-form-model-item>
+    </div>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        active: 'N',
+      },
+      rules: {
+        name: [{ required: true, message: '请输入机构名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>

Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/org/index.vue

@@ -1,3 +1,172 @@
 <template>
-  <div></div>
+  <yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
+    <container>
+      <br />
+      <a-card :bordered="false">
+        <Auth auth="sysUser:page">
+          <div class="yo-query-bar">
+            <a-form-model :model="query" layout="inline">
+              <a-form-model-item label="机构名称">
+                <a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
+              </a-form-model-item>
+              <a-form-model-item>
+                <a-button-group>
+                  <a-button @click="onQuery" type="primary">查询</a-button>
+                  <a-button @click="onReset">重置</a-button>
+                </a-button-group>
+              </a-form-model-item>
+            </a-form-model>
+          </div>
+
+          <yo-table :columns="columns" :load-data="loadData" ref="table">
+            <span slot="action" slot-scope="text, record">
+              <yo-table-actions>
+                <Auth auth="sysOrg:edit">
+                  <a @click="onOpen('edit-form', record)">编辑</a>
+                </Auth>
+                <Auth auth="sysOrg:delete">
+                  <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                    <a>删除</a>
+                  </a-popconfirm>
+                </Auth>
+              </yo-table-actions>
+            </span>
+          </yo-table>
+        </Auth>
+      </a-card>
+    </container>
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </yo-tree-layout>
 </template>
+<script>
+import YoTreeLayout from '@/components/yoTreeLayout';
+
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+export default {
+  components: {
+    YoTreeLayout,
+    AddForm,
+    EditForm,
+  },
+
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '机构名称',
+          dataIndex: 'name',
+        },
+        {
+          title: '唯一编码',
+          dataIndex: 'code',
+        },
+        {
+          title: '排序',
+          dataIndex: 'sort',
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+        },
+      ],
+    };
+  },
+
+  created() {
+    const flag = this.$auth({
+      sysOrg: [['edit'], ['delete']],
+    });
+
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+
+  methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api.getOrgTree().then((res) => {
+        return res.data;
+      });
+    },
+
+    onSelect([id]) {
+      this.query = {
+        pid: id,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getOrgPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    onReset() {
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record, this.query['pid']);
+    },
+
+    onDelete(record) {
+      this.$api.sysOrgDelete(record).then(({ success, message }) => {
+        if (success) {
+          this.$message.success('删除成功');
+          this.onReloadData();
+        } else {
+          this.$message.error(message);
+        }
+      });
+    },
+  },
+};
+</script>

Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/user/index.vue

@@ -2,11 +2,14 @@
   <yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
     <container>
       <br />
-      <a-alert banner closable type="error">
+      <a-alert closable type="error">
-        <template slot="message">后端bug:生日不填写,在保存时会默认写入0001-01-01</template>
+        <template slot="message">
+          后端bug:生日不填写,在保存时会默认写入0001-01-01
+          <br />权限问题,在这里需要用到组织架构以及职位的数据接口,所以必须配置该两项的菜单
+        </template>
       </a-alert>
       <br />
-      <a-alert banner closable type="warning">
+      <a-alert closable type="warning">
         <template slot="message">缺授权的两块功能</template>
       </a-alert>
       <br />
@@ -82,7 +85,7 @@
                   <a>删除</a>
                 </a-popconfirm>
               </Auth>
-              <Auth :ath="{ sysUser: [['grantRole'], ['grantData']] }">
+              <Auth :auth="{ sysUser: [['grantRole'], ['grantData']] }">
                 <a-dropdown placement="bottomRight">
                   <a class="ant-dropdown-link">
                     授权
@@ -156,14 +159,6 @@ export default {
             customRender: 'status',
           },
         },
-        {
-          title: '操作',
-          width: '240px',
-          dataIndex: 'action',
-          scopedSlots: {
-            customRender: 'action',
-          },
-        },
       ],
       codes: [
         {
@@ -180,6 +175,18 @@ export default {
 
   created() {
     this.onLoadCodes();
+
+    const flag = this.$auth({
+      sysUser: ['edit', 'resetPwd', 'delete', 'grantRole', 'grantData'],
+    });
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '240px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
   },
 
   methods: {

Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/header/index.vue

@@ -13,6 +13,7 @@
         <search :menus="nav.menus" />
       </div>
       <div class="header-actions">
+        <User />
         <a @click="$emit('reload')" class="header-action">
           <a-icon type="reload" />
         </a>
@@ -30,9 +31,10 @@
       <div class="header-actions">
         <Logo />
         <Sider :nav="nav" @open="(nav) => $emit('open', nav)" />
+        <search :menus="nav.menus" />
       </div>
       <div class="header-actions">
-        <search :menus="nav.menus" />
+        <User />
         <a @click="$emit('reload')" class="header-action">
           <a-icon type="reload" />
         </a>
@@ -52,6 +54,7 @@
 import Logo from '../logo';
 import Sider from '../sider';
 
+import User from './user';
 import Search from './search';
 
 export default {
@@ -59,6 +62,7 @@ export default {
     Logo,
     Sider,
 
+    User,
     Search,
   },
   props: {
@@ -72,45 +76,5 @@ export default {
       type: Object,
     },
   },
-  data() {
-    return {
-      searchText: '',
-      searchResult: [],
-    };
-  },
-  methods: {
-    onSearch(value) {
-      const menus = this.$_.cloneDeep(this.nav.menus);
-
-      const search = (m) => {
-        if (!value) return [];
-        return m.filter((p) => {
-          if (p.children) {
-            p.children = search(p.children);
-          } else {
-            return p.meta.title.indexOf(value) > -1;
-          }
-          return p.children.length;
-        });
-      };
-
-      this.searchResult = search(menus);
-    },
-
-    onSearchSelect(value, node) {
-      this.searchText = '';
-      this.onSearch(this.searchText);
-
-      const id = node.componentOptions.propsData.value;
-      //const menu = this.nav.menus.
-
-      // this.openContentWindow({
-      //   key: menu.id,
-      //   title: menu.meta.title,
-      //   icon: menu.meta.icon,
-      //   path: menu.component,
-      // });
-    },
-  },
 };
 </script>

Api/Ewide.Core/Ewide.Core.Web.Src/src/views/main/_layout/header/user.js

@@ -0,0 +1,78 @@
+let userOpenTimer, userCloseTimer
+
+let initDropdownHeight
+
+import { doLogout } from '@/common/login'
+
+export default {
+    data() {
+        return {
+            dropdownHeight: 0
+        }
+    },
+    mounted() {
+        initDropdownHeight = this.$refs.dropdown.scrollHeight
+    },
+    methods: {
+        onOpen(e) {
+            clearTimeout(userCloseTimer)
+            e.target.classList.add('open')
+            userOpenTimer = setTimeout(() => {
+                e.target.classList.add('drop')
+                this.dropdownHeight = initDropdownHeight
+            }, 300)
+        },
+
+        onClose(e) {
+            clearTimeout(userOpenTimer)
+            e.target.classList.remove('drop')
+            this.dropdownHeight = 0
+            userCloseTimer = setTimeout(() => {
+                e.target.classList.remove('open')
+            }, 300)
+        },
+
+        onLogout() {
+            this.$confirm({
+                title: '提示',
+                content: '是否确定退出登录',
+                onOk: () => {
+                    doLogout()
+                },
+                onCancel() {
+                }
+            })
+        }
+    },
+
+    render() {
+        return (
+            <div onMouseenter={this.onOpen} onMouseleave={this.onClose} class="user-container" >
+                <div class="user-container-inner">
+                    <div class="user--base">
+                        <a-avatar
+                            src={this.$root.global.info && this.$root.global.info.avatar}
+                            class="user--avatar"
+                            icon="user"
+                        />
+                        {
+                            this.$root.global.info &&
+                            <span
+                                class="user--name"
+                            >{this.$root.global.info.nickName || this.$root.global.info.name}</span>
+                        }
+                    </div>
+                    <div class="user--dropdown" ref="dropdown" style={{ height: `${this.dropdownHeight}px` }}>
+                        <ul class="ant-dropdown-menu ant-dropdown-menu-vertical">
+                            <li class="ant-dropdown-menu-item-divider"></li>
+                            <li class="ant-dropdown-menu-item" onClick={this.onLogout}>
+                                <a-icon type="logout" />
+                                退出登录
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div >
+        )
+    }
+}