diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index a5dddfcc..fc8b7303 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -361,6 +361,11 @@ export default {
   'Never': '从不',
   'DingTalk Robot Webhook': '钉钉机器人 Webhook',
   'Wechat Robot Webhook': '微信机器人 Webhook',
+  'Password Settings': '密码设置',
+  'Notify Settings': '通知设置',
+  'Global Variable': '全局变量',
+  'Add Global Variable': '新增全局变量',
+  'Are you sure to delete this global variable': '确定删除该全局变量？',
 
   // 其他
   tagsView: {
diff --git a/frontend/src/store/modules/user.js b/frontend/src/store/modules/user.js
index af778816..3324ba15 100644
--- a/frontend/src/store/modules/user.js
+++ b/frontend/src/store/modules/user.js
@@ -9,6 +9,8 @@ const user = {
     avatar: '',
     roles: [],
     userList: [],
+    globalVariableList: [],
+    globalVariableForm: {},
     userForm: {},
     userInfo: undefined,
     adminPaths: [
@@ -61,6 +63,9 @@ const user = {
     },
     SET_TOTAL_COUNT: (state, value) => {
       state.totalCount = value
+    },
+    SET_GLOBAL_VARIABLE_LIST: (state, value) => {
+      state.globalVariableList = value
     }
   },
 
@@ -148,6 +153,23 @@ const user = {
     // 添加用户
     addUser ({ dispatch, commit, state }) {
       return request.put('/users', state.userForm)
+    },
+    // 新增全局变量
+    addGlobalVariable ({ commit, state }) {
+      return request.post(`/variable`, state.globalVariableForm)
+        .then(() => {
+          state.globalVariableForm = {}
+        })
+    },
+    // 获取全局变量列表
+    getGlobalVariable ({ commit, state }) {
+      request.get('/variables').then((response) => {
+        commit('SET_GLOBAL_VARIABLE_LIST', response.data.data)
+      })
+    },
+    // 删除全局变量
+    deleteGlobalVariable ({ commit, state }, id) {
+      return request.delete(`/variable/${id}`)
     }
   }
 }
diff --git a/frontend/src/views/setting/Setting.vue b/frontend/src/views/setting/Setting.vue
index e82d47b6..0eade556 100644
--- a/frontend/src/views/setting/Setting.vue
+++ b/frontend/src/views/setting/Setting.vue
@@ -1,47 +1,98 @@
 <template>
   <div class="app-container">
+    <!-- 新增全局变量 -->
+    <el-dialog :title="$t('Add Global Variable')"
+               :visible.sync="addDialogVisible">
+      <el-form label-width="80px" ref="globalVariableForm">
+        <el-form-item label="Key">
+          <el-input size="small" v-model="globalVariableForm.key"/>
+        </el-form-item>
+        <el-form-item label="Value">
+          <el-input size="small" v-model="globalVariableForm.value"/>
+        </el-form-item>
+        <el-form-item label="Remark">
+          <el-input size="small" v-model="globalVariableForm.remark"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="addDialogVisible = false" type="danger" size="small">{{$t('Cancel')}}</el-button>
+          <el-button @click="addGlobalVariableHandle(false)" type="success" size="small">{{$t('Save')}}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
+    <el-tabs v-model="activeName" @tab-click="tabActiveHandle">
+      <el-tab-pane :label="$t('Password Settings')" name="passwordSetting">
+        <el-form :model="userInfo" class="setting-form" ref="setting-form" label-width="200px" :rules="rules"
+                 inline-message>
+          <el-form-item prop="username" :label="$t('Username')">
+            <el-input v-model="userInfo.username" disabled></el-input>
+          </el-form-item>
+          <el-form-item prop="password" :label="$t('Password')">
+            <el-input v-model="userInfo.password" type="password" :placeholder="$t('Password')"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('Notify Settings')" name="notifySetting">
+        <el-form :model="userInfo" class="setting-form" ref="setting-form" label-width="200px" :rules="rules"
+                 inline-message>
+          <el-form-item :label="$t('Notification Trigger Timing')">
+            <el-radio-group v-model="userInfo.setting.notification_trigger">
+              <el-radio label="notification_trigger_on_task_end">
+                {{$t('On Task End')}}
+              </el-radio>
+              <el-radio label="notification_trigger_on_task_error">
+                {{$t('On Task Error')}}
+              </el-radio>
+              <el-radio label="notification_trigger_never">
+                {{$t('Never')}}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item prop="enabledNotifications" :label="$t('消息通知方式')">
+            <el-checkbox-group v-model="userInfo.setting.enabled_notifications">
+              <el-checkbox label="notification_type_mail">{{$t('邮件')}}</el-checkbox>
+              <el-checkbox label="notification_type_ding_talk">{{$t('钉钉')}}</el-checkbox>
+              <el-checkbox label="notification_type_wechat">{{$t('企业微信')}}</el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item prop="email" :label="$t('Email')">
+            <el-input v-model="userInfo.email" :placeholder="$t('Email')"></el-input>
+          </el-form-item>
+          <el-form-item prop="setting.ding_talk_robot_webhook" :label="$t('DingTalk Robot Webhook')">
+            <el-input v-model="userInfo.setting.ding_talk_robot_webhook"
+                      :placeholder="$t('DingTalk Robot Webhook')"></el-input>
+          </el-form-item>
+          <el-form-item prop="setting.wechat_robot_webhook" :label="$t('Wechat Robot Webhook')">
+            <el-input v-model="userInfo.setting.wechat_robot_webhook" :placeholder="$t('Wechat Robot Webhook')"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('Global Variable')" name="globalVariable">
+        <el-form :inline="true">
+          <el-form-item>
+            <el-button size="mini" @click="addGlobalVariableHandle(true)"
+                       type="success">
+              {{$t('Add')}}
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <el-table :data="globalVariableList" border>
+          <el-table-column prop="key" label="Key"/>
+          <el-table-column prop="value" label="Value"/>
+          <el-table-column prop="remark" label="Remark"/>
+          <el-table-column prop="" :label="$t('Action')" width="80">
+            <template slot-scope="scope">
+              <el-button @click="deleteGlobalVariableHandle(scope.row._id)" icon="el-icon-delete" type="danger" size="mini"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
     <el-form :model="userInfo" class="setting-form" ref="setting-form" label-width="200px" :rules="rules"
-             inline-message>
-      <el-form-item prop="username" :label="$t('Username')">
-        <el-input v-model="userInfo.username" disabled></el-input>
-      </el-form-item>
-      <el-form-item prop="password" :label="$t('Password')">
-        <el-input v-model="userInfo.password" type="password" :placeholder="$t('Password')"></el-input>
-      </el-form-item>
-      <div style="border-bottom: 1px solid #DCDFE6"></div>
-      <el-form-item :label="$t('Notification Trigger Timing')">
-        <el-radio-group v-model="userInfo.setting.notification_trigger">
-          <el-radio label="notification_trigger_on_task_end">
-            {{$t('On Task End')}}
-          </el-radio>
-          <el-radio label="notification_trigger_on_task_error">
-            {{$t('On Task Error')}}
-          </el-radio>
-          <el-radio label="notification_trigger_never">
-            {{$t('Never')}}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item prop="enabledNotifications" :label="$t('消息通知方式')">
-        <el-checkbox-group v-model="userInfo.setting.enabled_notifications">
-          <el-checkbox label="notification_type_mail">{{$t('邮件')}}</el-checkbox>
-          <el-checkbox label="notification_type_ding_talk">{{$t('钉钉')}}</el-checkbox>
-          <el-checkbox label="notification_type_wechat">{{$t('企业微信')}}</el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item prop="email" :label="$t('Email')">
-        <el-input v-model="userInfo.email" :placeholder="$t('Email')"></el-input>
-      </el-form-item>
-      <el-form-item prop="setting.ding_talk_robot_webhook" :label="$t('DingTalk Robot Webhook')">
-        <el-input v-model="userInfo.setting.ding_talk_robot_webhook"
-                  :placeholder="$t('DingTalk Robot Webhook')"></el-input>
-      </el-form-item>
-      <el-form-item prop="setting.wechat_robot_webhook" :label="$t('Wechat Robot Webhook')">
-        <el-input v-model="userInfo.setting.wechat_robot_webhook" :placeholder="$t('Wechat Robot Webhook')"></el-input>
-      </el-form-item>
+             inline-message v-if="activeName !== 'globalVariable'">
       <el-form-item>
         <div class="buttons">
-          <el-button type="success" @click="saveUserInfo">{{$t('Save')}}</el-button>
+          <el-button size="small" type="success" @click="saveUserInfo">{{$t('Save')}}</el-button>
         </div>
       </el-form-item>
     </el-form>
@@ -49,6 +100,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'Setting',
   data () {
@@ -92,16 +144,55 @@ export default {
         'setting.ding_talk_robot_webhook': [{ trigger: 'blur', validator: validateDingTalkRobotWebhook }],
         'setting.wechat_robot_webhook': [{ trigger: 'blur', validator: validateWechatRobotWebhook }]
       },
-      isShowDingTalkAppSecret: false
+      isShowDingTalkAppSecret: false,
+      activeName: 'passwordSetting',
+      addDialogVisible: false
     }
   },
+  computed: {
+    ...mapState('user', [
+      'globalVariableList',
+      'globalVariableForm'
+    ])
+  },
   methods: {
+    deleteGlobalVariableHandle (id) {
+      this.$confirm(this.$t('Are you sure to delete this global variable'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('user/deleteGlobalVariable', id).then(() => {
+          this.$store.dispatch('user/getGlobalVariable')
+        })
+      }).catch(() => {})
+    },
+    addGlobalVariableHandle (isShow) {
+      if (isShow) {
+        this.addDialogVisible = true
+        return
+      }
+      this.$store.dispatch('user/addGlobalVariable')
+        .then(() => {
+          this.addDialogVisible = false
+          this.$st.sendEv('设置', '添加全局变量')
+        })
+        .then(() => {
+          this.$store.dispatch('user/getGlobalVariable')
+        })
+    },
     getUserInfo () {
       const data = localStorage.getItem('user_info')
-      if (!data) return {}
+      if (!data) {
+        return {}
+      }
       this.userInfo = JSON.parse(data)
-      if (!this.userInfo.setting) this.userInfo.setting = {}
-      if (!this.userInfo.setting.enabled_notifications) this.userInfo.setting.enabled_notifications = []
+      if (!this.userInfo.setting) {
+        this.userInfo.setting = {}
+      }
+      if (!this.userInfo.setting.enabled_notifications) {
+        this.userInfo.setting.enabled_notifications = []
+      }
     },
     saveUserInfo () {
       this.$refs['setting-form'].validate(async valid => {
@@ -114,10 +205,12 @@ export default {
         }
       })
       this.$st.sendEv('设置', '保存')
-    }
+    },
+    tabActiveHandle () {}
   },
   async created () {
     await this.$store.dispatch('user/getInfo')
+    this.$store.dispatch('user/getGlobalVariable')
     this.getUserInfo()
   }
 }