diff --git a/stdiet-ui/src/api/custom/message.js b/stdiet-ui/src/api/custom/message.js
new file mode 100644
index 000000000..f453c905f
--- /dev/null
+++ b/stdiet-ui/src/api/custom/message.js
@@ -0,0 +1,33 @@
+import request from "@/utils/request";
+
+export function fetchTopicList(query) {
+  return request({
+    url: "/services/topic/list",
+    method: "get",
+    params: query
+  });
+}
+
+export function fetchTopicDetail(query) {
+  return request({
+    url: "/services/topic/detail",
+    method: "get",
+    params: query
+  });
+}
+
+export function postTopicReply(data) {
+  return request({
+    url: "/services/topic/reply",
+    method: "post",
+    body: data
+  });
+}
+
+export function postTopicComment(data) {
+  return request({
+    url: "/services/topic/comment",
+    method: "post",
+    body: data
+  });
+}
diff --git a/stdiet-ui/src/components/RecipesPlanDrawer/index.vue b/stdiet-ui/src/components/RecipesPlanDrawer/index.vue
index 45498bca8..66535901b 100644
--- a/stdiet-ui/src/components/RecipesPlanDrawer/index.vue
+++ b/stdiet-ui/src/components/RecipesPlanDrawer/index.vue
@@ -151,8 +151,11 @@
 </template>
 <script>
 import Clipboard from "clipboard";
-import { listRecipesPlanByCusId } from "@/api/custom/recipesPlan";
-import { addRecipesPlan, updateRecipesPlan } from "@/api/custom/recipesPlan";
+import {
+  listRecipesPlanByCusId,
+  addRecipesPlan,
+  updateRecipesPlan,
+} from "@/api/custom/recipesPlan";
 import PlanPauseDrawer from "./PlanPauseDrawer";
 import VueQr from "vue-qr";
 import dayjs from "dayjs";
diff --git a/stdiet-ui/src/layout/components/Navbar.vue b/stdiet-ui/src/layout/components/Navbar.vue
index f8c983055..af5333114 100644
--- a/stdiet-ui/src/layout/components/Navbar.vue
+++ b/stdiet-ui/src/layout/components/Navbar.vue
@@ -103,7 +103,7 @@ export default {
       this.$store.dispatch("app/toggleSideBar");
     },
     handleOnMessageClick() {
-
+      this.$router.push("/user/message");
     },
     async logout() {
       this.$confirm("确定注销并退出系统吗？", "提示", {
diff --git a/stdiet-ui/src/router/index.js b/stdiet-ui/src/router/index.js
index 303bbf182..cd5169b06 100644
--- a/stdiet-ui/src/router/index.js
+++ b/stdiet-ui/src/router/index.js
@@ -83,6 +83,13 @@ export const constantRoutes = [
           require(["@/views/system/user/profile/index"], resolve),
         name: "Profile",
         meta: { title: "个人中心", icon: "user" }
+      },
+      {
+        path: "message",
+        component: resolve =>
+          require(["@/views/custom/message/index"], resolve),
+        name: "Profile",
+        meta: { title: "客户消息", icon: "user" }
       }
     ]
   },
diff --git a/stdiet-ui/src/store/index.js b/stdiet-ui/src/store/index.js
index ee09d42f2..f845dbf32 100644
--- a/stdiet-ui/src/store/index.js
+++ b/stdiet-ui/src/store/index.js
@@ -8,6 +8,7 @@ import settings from "./modules/settings";
 import recipes from "./modules/recipes";
 import recipesShow from "./modules/recipesShow";
 import global from "./modules/global";
+import message from "./modules/message";
 
 import getters from "./getters";
 import actions from "./actions";
@@ -23,7 +24,8 @@ const store = new Vuex.Store({
     settings,
     recipes,
     recipesShow,
-    global
+    global,
+    message
   },
   getters,
   actions
diff --git a/stdiet-ui/src/store/modules/message.js b/stdiet-ui/src/store/modules/message.js
new file mode 100644
index 000000000..b65fc812f
--- /dev/null
+++ b/stdiet-ui/src/store/modules/message.js
@@ -0,0 +1,45 @@
+import {
+  fetchTopicList,
+  postTopicReply,
+  fetchTopicDetail,
+  postTopicComment
+} from "@/api/custom/message";
+
+const oriState = {
+  topicList: undefined,
+  detailData: undefined
+};
+
+const mutations = {
+  save(state, payload) {
+    Object.keys(payload).forEach(key => {
+      state[key] = payload[key];
+    });
+  },
+  clean(state) {
+    Object.keys(oriState).forEach(key => {
+      state[key] = oriState[key];
+    });
+  }
+};
+
+const actions = {
+  async init({ rootGetters, commit }, payload) {
+    const {
+      roles: [role],
+      userId
+    } = rootGetters;
+    const result = await fetchTopicList({ role: "dietician", uid: 131 });
+    console.log({ result });
+  }
+};
+
+const getters = {};
+
+export default {
+  namespaced: "message",
+  state: Object.assign({}, oriState),
+  mutations,
+  actions,
+  getters
+};
diff --git a/stdiet-ui/src/views/custom/message/index.vue b/stdiet-ui/src/views/custom/message/index.vue
new file mode 100644
index 000000000..0df449440
--- /dev/null
+++ b/stdiet-ui/src/views/custom/message/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="user_message_wrapper">
+    <MessageBrowser />
+    <div class="info_zone"></div>
+  </div>
+</template>
+<script>
+import MessageBrowser from "./messageBrowser";
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    MessageBrowser,
+  },
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.user_message_wrapper {
+  padding: 12px;
+  display: flex;
+  box-sizing: border-box;
+  height: calc(100vh - 84px);
+  background: #f3f4f5;
+
+  & > div:nth-child(1) {
+    flex: 3;
+    background: white;
+  }
+
+  & > div:nth-child(2) {
+    flex: 2;
+    margin-left: 12px;
+    padding-left: 12px;
+    background: white;
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/message/messageBrowser.vue b/stdiet-ui/src/views/custom/message/messageBrowser.vue
new file mode 100644
index 000000000..bd861a855
--- /dev/null
+++ b/stdiet-ui/src/views/custom/message/messageBrowser.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="message_browser_wrapper">
+    <div class="topic_list">
+
+    </div>
+    <div class="topic_detail"></div>
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const {
+  mapActions,
+  mapState,
+  mapMutations,
+  mapGetters,
+} = createNamespacedHelpers("message");
+export default {
+  data() {
+    return {};
+  },
+  created() {
+    this.init();
+  },
+  computed: {
+    ...mapState([]),
+  },
+  methods: {
+    ...mapActions(["init"]),
+    ...mapMutations(["clean"]),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.message_browser_wrapper {
+  display: flex;
+  .topic_list {
+    flex: 2;
+  }
+
+  .topic_detail {
+    flex: 3;
+    background: gray;
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesPlan/index.vue b/stdiet-ui/src/views/custom/recipesPlan/index.vue
index 0e8e94dcd..e21c723a4 100644
--- a/stdiet-ui/src/views/custom/recipesPlan/index.vue
+++ b/stdiet-ui/src/views/custom/recipesPlan/index.vue
@@ -115,30 +115,14 @@
         </template>
       </el-table-column>
       <el-table-column label="客户姓名" align="center" prop="customer" />
-      <el-table-column
-        label="客户手机号"
-        align="center"
-        prop="hidePhone"
-        width="180"
-      />
-      <el-table-column
-        label="计划"
-        align="center"
-        prop="scopeDay"
-        width="200"
-      />
-      <el-table-column
-        label="日期"
-        align="center"
-        prop="scopeDate"
-        width="200"
-      />
+      <el-table-column label="客户手机号" align="center" prop="hidePhone" />
+      <el-table-column label="计划" align="center" prop="scopeDay" />
+      <el-table-column label="日期" align="center" prop="scopeDate" width="200"/>
       <el-table-column label="营养师" align="center" prop="nutritionist" />
       <el-table-column
         label="营养师助理"
         align="center"
         prop="nutritionistAssis"
-        width="180"
       />
       <el-table-column label="订阅情况" align="center">
         <template slot-scope="scope">
@@ -147,7 +131,7 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="发送" align="center" width="80">
+      <el-table-column label="发送" align="center">
         <template slot-scope="scope">
           <el-switch
             v-model="!!scope.row.sendFlag"
@@ -159,7 +143,6 @@
         label="操作"
         align="center"
         class-name="small-padding fixed-width"
-        width="300"
       >
         <template slot-scope="scope">
           <el-button