fixed https://github.com/crawlab-team/crawlab/issues/456

frontend/src/i18n/zh.js

@@ -245,6 +245,9 @@ export default {
   'Home Page Response Time (sec)': '首页响应时间(秒)',
   'Home Page Response Status Code': '首页响应状态码',
 
+  // 用户
+  'Super Admin': '超级管理员',
+
   // 文件
   'Choose Folder': '选择文件',
   'File': '文件',
@@ -350,7 +353,7 @@ export default {
   'Username': '用户名',
   'Password': '密码',
   'Confirm Password': '确认密码',
-  'normal': '正常用户',
+  'normal': '普通用户',
   'admin': '管理用户',
   'Role': '角色',
   'Edit User': '更改用户',

frontend/src/views/user/UserList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <!--dialog-->
-    <el-dialog :visible.sync="dialogVisible" :title="$t('Edit User')">
+    <el-dialog :visible.sync="dialogVisible" width="640px" :title="$t('Edit User')">
       <el-form ref="form" :model="userForm" label-width="80px" :rules="rules" inline-message>
         <el-form-item prop="username" :label="$t('Username')" required>
           <el-input v-model="userForm.username" :placeholder="$t('Username')" :disabled="!isAdd"></el-input>
@@ -50,7 +50,10 @@
           :label="$t('Role')"
         >
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.role === 'admin'" type="primary">
+            <el-tag v-if="scope.row.username === 'admin'" type="success">
+              {{ $t('Super Admin') }}
+            </el-tag>
+            <el-tag v-else-if="scope.row.role === 'admin'" type="primary">
               {{ $t(scope.row.role) }}
             </el-tag>
             <el-tag v-else type="warning">
@@ -71,8 +74,20 @@
           fixed="right"
         >
           <template slot-scope="scope">
-            <el-button icon="el-icon-edit" type="warning" size="mini" @click="onEdit(scope.row)"></el-button>
-            <el-button icon="el-icon-delete" type="danger" size="mini" @click="onRemove(scope.row)"></el-button>
+            <el-button
+              v-if="isShowEdit(scope.row)"
+              icon="el-icon-edit"
+              type="warning"
+              size="mini"
+              @click="onEdit(scope.row)"
+            />
+            <el-button
+              v-if="isShowRemove(scope.row)"
+              icon="el-icon-delete"
+              type="danger"
+              size="mini"
+              @click="onRemove(scope.row)"
+            />
           </template>
         </el-table-column>
       </el-table>
@@ -95,7 +110,8 @@
 
 <script>
 import {
-  mapState
+  mapState,
+  mapGetters
 } from 'vuex'
 import dayjs from 'dayjs'
 
@@ -133,6 +149,9 @@ export default {
       'userForm',
       'totalCount'
     ]),
+    ...mapGetters('user', [
+      'userInfo'
+    ]),
     pageSize: {
       get () {
         return this.$store.state.user.pageSize
@@ -219,6 +238,15 @@ export default {
       this.dialogVisible = true
     },
     onValidateEmail (value) {
+    },
+    isShowEdit (row) {
+      if (row.username === 'admin') {
+        return this.userInfo.username === 'admin'
+      }
+      return true
+    },
+    isShowRemove (row) {
+      return row.username !== 'admin'
     }
   },
   created () {
@@ -227,23 +255,21 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .filter {
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
 
-  .filter-search {
-    width: 240px;
-  }
+    .filter-search {
+      width: 240px;
+    }
 
-  .right {
-
-  .btn {
-    margin-left: 10px;
-  }
-
-  }
+    .right {
+      .btn {
+        margin-left: 10px;
+      }
+    }
   }
 
   .el-table {