modify

canal-admin/canal-admin-ui/src/api/user.js

@@ -22,3 +22,11 @@ export function logout() {
     method: 'post'
   })
 }
+
+export function updateUser(data) {
+  return request({
+    url: '/user',
+    method: 'put',
+    data
+  })
+}

canal-admin/canal-admin-ui/src/components/Breadcrumb/index.vue

@@ -33,7 +33,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard', meta: { title: '主页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

canal-admin/canal-admin-ui/src/layout/components/Navbar.vue

@@ -7,23 +7,21 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <!-- avatar+'?imageView2/1/w/80/h/80' -->
+          <img :src="avat+'?imageView2/1/w/80/h/80'" class="user-avatar">
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
             <el-dropdown-item>
-              Home
+              主页
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
+          <router-link to="/sys/user">
+            <el-dropdown-item>账号管理</el-dropdown-item>
+          </router-link>
           <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">Log Out</span>
+            <span style="display:block;" @click="logout">退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -41,6 +39,11 @@ export default {
     Breadcrumb,
     Hamburger
   },
+  data() {
+    return {
+      avat: './avatar.gif'
+    }
+  },
   computed: {
     ...mapGetters([
       'sidebar',

canal-admin/canal-admin-ui/src/router/index.js

@@ -49,158 +49,68 @@ export const constantRoutes = [
     redirect: '/dashboard',
     children: [{
       path: 'dashboard',
-      name: 'Dashboard',
+      name: '主页',
       component: () => import('@/views/dashboard/index'),
-      meta: { title: 'Dashboard', icon: 'dashboard' }
-    }]
+      meta: { title: '主页', icon: 'dashboard' }
+    }],
+    hidden: true
+  },
+
+  {
+    path: '/sys',
+    component: Layout,
+    redirect: '/user',
+    children: [{
+      path: 'user',
+      name: '用户信息',
+      component: () => import('@/views/sys/UserInfo'),
+      meta: { title: '用户信息' }
+    }],
+    hidden: true
   },
 
   {
     path: '/canalServer',
     component: Layout,
-    redirect: '/canalServer/config',
+    redirect: '/canalServer/nodeServers',
     name: 'Canal Server',
     meta: { title: 'Canal Server', icon: 'example' },
     children: [
       {
         path: 'nodeServers',
         name: '节点状态',
-        component: () => import('@/views/canalServer/nodeServer'),
+        component: () => import('@/views/canalServer/NodeServer'),
         meta: { title: '节点管理', icon: 'tree' }
       },
       {
         path: 'config',
         name: 'Canal主配置',
-        component: () => import('@/views/canalServer/config'),
+        component: () => import('@/views/canalServer/Config'),
         meta: { title: 'Canal主配置', icon: 'form' }
       },
       {
         path: 'canalInstances',
         name: '实例管理',
-        component: () => import('@/views/canalServer/canalInstance'),
+        component: () => import('@/views/canalServer/CanalInstance'),
         meta: { title: '实例管理', icon: 'nested' }
       },
       {
         path: 'canalInstance/add',
         name: '新建实例配置',
-        component: () => import('@/views/canalServer/canalInstanceAdd'),
+        component: () => import('@/views/canalServer/CanalInstanceAdd'),
         meta: { title: '新建实例配置' },
         hidden: true
       },
       {
         path: 'canalInstance/modify',
         name: '修改实例配置',
-        component: () => import('@/views/canalServer/canalInstanceUpdate'),
+        component: () => import('@/views/canalServer/CanalInstanceUpdate'),
         meta: { title: '修改实例配置' },
         hidden: true
       }
     ]
   },
 
-  {
-    path: '/example',
-    component: Layout,
-    redirect: '/example/table',
-    name: 'Example',
-    meta: { title: 'Example', icon: 'example' },
-    children: [
-      {
-        path: 'table',
-        name: 'Table',
-        component: () => import('@/views/table/index'),
-        meta: { title: 'Table', icon: 'table' }
-      },
-      {
-        path: 'tree',
-        name: 'Tree',
-        component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'tree' }
-      }
-    ]
-  },
-
-  {
-    path: '/form',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'Form',
-        component: () => import('@/views/form/index'),
-        meta: { title: 'Form', icon: 'form' }
-      }
-    ]
-  },
-
-  {
-    path: '/nested',
-    component: Layout,
-    redirect: '/nested/menu1',
-    name: 'Nested',
-    meta: {
-      title: 'Nested',
-      icon: 'nested'
-    },
-    children: [
-      {
-        path: 'menu1',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'Menu1',
-        meta: { title: 'Menu1' },
-        children: [
-          {
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'Menu1-1',
-            meta: { title: 'Menu1-1' }
-          },
-          {
-            path: 'menu1-2',
-            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'Menu1-2',
-            meta: { title: 'Menu1-2' },
-            children: [
-              {
-                path: 'menu1-2-1',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'Menu1-2-1',
-                meta: { title: 'Menu1-2-1' }
-              },
-              {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'Menu1-2-2',
-                meta: { title: 'Menu1-2-2' }
-              }
-            ]
-          },
-          {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'Menu1-3',
-            meta: { title: 'Menu1-3' }
-          }
-        ]
-      },
-      {
-        path: 'menu2',
-        component: () => import('@/views/nested/menu2/index'),
-        meta: { title: 'menu2' }
-      }
-    ]
-  },
-
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-        meta: { title: 'External Link', icon: 'link' }
-      }
-    ]
-  },
-
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

canal-admin/canal-admin-ui/src/views/dashboard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">name: {{ name }}</div>
+    <div class="dashboard-text">&nbsp;</div>
   </div>
 </template>
 
@@ -13,6 +13,9 @@ export default {
     ...mapGetters([
       'name'
     ])
+  },
+  mounted() {
+    this.$router.push('/canalServer')
   }
 }
 </script>

canal-admin/canal-admin-ui/src/views/form/index.vue

@@ -1,113 +0,0 @@
-<template>
-  <div>
-    <el-form ref="form" :model="form">
-      <div style="padding-left: 10px;padding-top: 20px;">
-        <el-form-item>
-          canal.properties&nbsp;&nbsp;&nbsp;&nbsp;
-          <el-button type="primary" @click="onSubmit">修改</el-button>
-          <el-button @click="onCancel">返回</el-button>
-        </el-form-item>
-      </div>
-      <editor v-model="content" lang="yaml" theme="chrome" width="100%" :height="800" @init="editorInit" />
-    </el-form>
-  </div>
-  <!-- <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-      </el-form-item>
-      <el-form-item>
-        <editor v-model="content" lang="properties" theme="chrome" width="500" height="100" @init="editorInit" />
-      </el-form-item>
-    </el-form>
-  </div> -->
-</template>
-
-<script>
-export default {
-  components: {
-    editor: require('vue2-ace-editor')
-  },
-  data() {
-    return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
-      }
-    }
-  },
-  methods: {
-    editorInit() {
-      require('brace/ext/language_tools')
-      require('brace/mode/html')
-      require('brace/mode/yaml')
-      require('brace/mode/properties')
-      require('brace/mode/javascript')
-      require('brace/mode/less')
-      require('brace/theme/chrome')
-      require('brace/snippets/javascript')
-    },
-    onSubmit() {
-      this.$message('submit!')
-    },
-    onCancel() {
-      this.$message({
-        message: 'cancel!',
-        type: 'warning'
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.line{
-  text-align: center;
-}
-</style>
-

canal-admin/canal-admin-ui/src/views/login/index.vue

@@ -3,7 +3,7 @@
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">Canal Admin Login</h3>
       </div>
 
       <el-form-item prop="username">

canal-admin/canal-admin-ui/src/views/nested/menu1/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1">
-      <router-view />
-    </el-alert>
-  </div>
-</template>

canal-admin/canal-admin-ui/src/views/nested/menu1/menu1-1/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-1" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>

canal-admin/canal-admin-ui/src/views/nested/menu1/menu1-2/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>

canal-admin/canal-admin-ui/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
-  </div>
-</template>

canal-admin/canal-admin-ui/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
-  </div>
-</template>

canal-admin/canal-admin-ui/src/views/nested/menu1/menu1-3/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-3" type="success" />
-  </div>
-</template>

canal-admin/canal-admin-ui/src/views/nested/menu2/index.vue

@@ -1,5 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 2" />
-  </div>
-</template>

canal-admin/canal-admin-ui/src/views/sys/UserInfo.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="app-container" style="width: 600px;">
+    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="form.username" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item label="旧密码" prop="oldPassword">
+        <el-input v-model="form.oldPassword" type="password" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input v-model="form.password" placeholder="空为不修改密码" type="password" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">修改</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getInfo, updateUser } from '@/api/user'
+import { getToken } from '@/utils/auth'
+
+export default {
+  data() {
+    return {
+      form: {
+        username: '',
+        oldPassword: '',
+        password: null
+      },
+      rules: {
+        username: [{ required: true, message: '用户名能为空', trigger: 'change' }],
+        oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    this.fetchUserInfo()
+  },
+  methods: {
+    fetchUserInfo() {
+      getInfo(getToken()).then(res => {
+        this.form.username = res.data.username
+      })
+    },
+    onSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          updateUser(this.form).then(res => {
+            if (res.data === 'success') {
+              this.form.oldPassword = ''
+              this.form.password = null
+              this.$nextTick(() => {
+                this.$refs['form'].clearValidate()
+              })
+              this.$message({
+                message: '修改用户信息成功',
+                type: 'success'
+              })
+            } else {
+              this.$message({
+                message: '修改用户信息成功',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    onCancel() {
+      history.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line{
+  text-align: center;
+}
+</style>
+

canal-admin/canal-admin-ui/src/views/table/index.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column align="center" label="ID" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="Status" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { getList } from '@/api/table'
-
-export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'gray',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listLoading: true
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
-    }
-  }
-}
-</script>

canal-admin/canal-admin-ui/src/views/tree/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
-
-    <el-tree
-      ref="tree2"
-      :data="data2"
-      :props="defaultProps"
-      :filter-node-method="filterNode"
-      class="filter-tree"
-      default-expand-all
-    />
-
-  </div>
-</template>
-
-<script>
-export default {
-
-  data() {
-    return {
-      filterText: '',
-      data2: [{
-        id: 1,
-        label: 'Level one 1',
-        children: [{
-          id: 4,
-          label: 'Level two 1-1',
-          children: [{
-            id: 9,
-            label: 'Level three 1-1-1'
-          }, {
-            id: 10,
-            label: 'Level three 1-1-2'
-          }]
-        }]
-      }, {
-        id: 2,
-        label: 'Level one 2',
-        children: [{
-          id: 5,
-          label: 'Level two 2-1'
-        }, {
-          id: 6,
-          label: 'Level two 2-2'
-        }]
-      }, {
-        id: 3,
-        label: 'Level one 3',
-        children: [{
-          id: 7,
-          label: 'Level two 3-1'
-        }, {
-          id: 8,
-          label: 'Level two 3-2'
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
-    }
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree2.filter(val)
-    }
-  },
-
-  methods: {
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    }
-  }
-}
-</script>
-