diff --git a/server/handler_admin_role.go b/server/handler_admin_role.go
index 812ceb39..e7e29745 100644
--- a/server/handler_admin_role.go
+++ b/server/handler_admin_role.go
@@ -8,19 +8,31 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
-// GetChatRoleListHandle 获取聊天角色列表
-func (s *Server) GetChatRoleListHandle(c *gin.Context) {
-	var user *types.User
-	username := c.Query("username")
-	if username != "" {
-		u, err := GetUser(username)
-		if err != nil {
-			c.JSON(http.StatusOK, types.BizVo{Code: types.Failed, Message: "Hacker Access!!!"})
-			return
+// GetAllChatRolesHandle 获取所有聊天角色列表
+func (s *Server) GetAllChatRolesHandle(c *gin.Context) {
+	var rolesOrder = []string{"gpt", "teacher", "translator", "english_trainer", "weekly_report", "girl_friend",
+		"kong_zi", "lu_xun", "steve_jobs", "elon_musk", "red_book", "dou_yin", "programmer",
+		"seller", "good_comment", "psychiatrist", "artist"}
+	var res = make([]interface{}, 0)
+	var roles = GetChatRoles()
+	for _, k := range rolesOrder {
+		if v, ok := roles[k]; ok {
+			res = append(res, v)
 		}
-		user = u
 	}
 
+	c.JSON(http.StatusOK, types.BizVo{Code: types.Success, Message: types.OkMsg, Data: res})
+}
+
+// GetChatRoleListHandle 获取当前登录用户的角色列表
+func (s *Server) GetChatRoleListHandle(c *gin.Context) {
+	sessionId := c.GetHeader(types.TokenName)
+	session := s.ChatSession[sessionId]
+	user, err := GetUser(session.Username)
+	if err != nil {
+		c.JSON(http.StatusOK, types.BizVo{Code: types.Failed, Message: "Hacker Access!!!"})
+		return
+	}
 	var rolesOrder = []string{"gpt", "teacher", "translator", "english_trainer", "weekly_report", "girl_friend",
 		"kong_zi", "lu_xun", "steve_jobs", "elon_musk", "red_book", "dou_yin", "programmer",
 		"seller", "good_comment", "psychiatrist", "artist"}
@@ -28,11 +40,10 @@ func (s *Server) GetChatRoleListHandle(c *gin.Context) {
 	var roles = GetChatRoles()
 	for _, k := range rolesOrder {
 		// 确认当前用户是否订阅了当前角色
-		if user != nil {
-			if v, ok := user.ChatRoles[k]; !ok || v != 1 {
-				continue
-			}
+		if v, ok := user.ChatRoles[k]; !ok || v != 1 {
+			continue
 		}
+
 		if v, ok := roles[k]; ok && v.Enable {
 			res = append(res, struct {
 				Key  string `json:"key"`
diff --git a/server/server.go b/server/server.go
index b8d07ecb..b5a7fd75 100644
--- a/server/server.go
+++ b/server/server.go
@@ -40,10 +40,10 @@ type Server struct {
 
 	// 保存 Websocket 会话 Username, 每个 Username 只能连接一次
 	// 防止第三方直接连接 socket 调用 OpenAI API
-	ChatSession      map[string]types.ChatSession  //map[sessionId]User
-	ChatClients      map[string]*WsClient          // Websocket 连接集合
-	ReqCancelFunc    map[string]context.CancelFunc // HttpClient 请求取消 handle function
-	DebugMode        bool                          // 是否开启调试模式
+	ChatSession   map[string]types.ChatSession  //map[sessionId]User
+	ChatClients   map[string]*WsClient          // Websocket 连接集合
+	ReqCancelFunc map[string]context.CancelFunc // HttpClient 请求取消 handle function
+	DebugMode     bool                          // 是否开启调试模式
 }
 
 func NewServer(configPath string) (*Server, error) {
@@ -63,12 +63,12 @@ func NewServer(configPath string) (*Server, error) {
 		}
 	}
 	return &Server{
-		Config:           config,
-		ConfigPath:       configPath,
-		ChatContexts:     make(map[string]types.ChatContext, 16),
-		ChatSession:      make(map[string]types.ChatSession),
-		ChatClients:      make(map[string]*WsClient),
-		ReqCancelFunc:    make(map[string]context.CancelFunc),
+		Config:        config,
+		ConfigPath:    configPath,
+		ChatContexts:  make(map[string]types.ChatContext, 16),
+		ChatSession:   make(map[string]types.ChatSession),
+		ChatClients:   make(map[string]*WsClient),
+		ReqCancelFunc: make(map[string]context.CancelFunc),
 	}, nil
 }
 
@@ -98,18 +98,22 @@ func (s *Server) Run(webRoot embed.FS, path string, debug bool) {
 
 	engine.GET("api/admin/config/get", s.ConfigGetHandle)
 	engine.POST("api/admin/config/set", s.ConfigSetHandle)
-	engine.POST("api/admin/chat-roles/get", s.GetChatRoleListHandle)
+
+	engine.POST("api/chat-roles/list", s.GetChatRoleListHandle)
+	engine.POST("api/admin/chat-roles/list", s.GetAllChatRolesHandle)
+	engine.POST("api/chat-roles/get", s.GetChatRoleHandle)
 	engine.POST("api/admin/chat-roles/add", s.AddChatRoleHandle)
+	engine.POST("api/admin/chat-roles/set", s.SetChatRoleHandle)
+
 	engine.POST("api/admin/user/add", s.AddUserHandle)
 	engine.POST("api/admin/user/batch-add", s.BatchAddUserHandle)
 	engine.POST("api/admin/user/set", s.SetUserHandle)
 	engine.POST("api/admin/user/list", s.GetUserListHandle)
 	engine.POST("api/admin/user/remove", s.RemoveUserHandle)
+
 	engine.POST("api/admin/apikey/add", s.AddApiKeyHandle)
 	engine.POST("api/admin/apikey/remove", s.RemoveApiKeyHandle)
 	engine.POST("api/admin/apikey/list", s.ListApiKeysHandle)
-	engine.POST("api/admin/role/set", s.SetChatRoleHandle)
-	engine.POST("api/admin/role/get", s.GetChatRoleHandle)
 	engine.POST("api/admin/proxy/add", s.AddProxyHandle)
 	engine.POST("api/admin/proxy/remove", s.RemoveProxyHandle)
 
diff --git a/web/src/views/admin/RoleList.vue b/web/src/views/admin/RoleList.vue
index 1342a4f3..92a2481e 100644
--- a/web/src/views/admin/RoleList.vue
+++ b/web/src/views/admin/RoleList.vue
@@ -1,25 +1,228 @@
 <template>
-  <div class="system-config">
-    {{ title }}
+  <div class="role-list">
+    <!--    <el-row class="opt-box">-->
+    <!--      <el-button type="primary" @click="showDialog = true">-->
+    <!--        <el-icon>-->
+    <!--          <Plus/>-->
+    <!--        </el-icon>-->
+    <!--        新增角色-->
+    <!--      </el-button>-->
+    <!--    </el-row>-->
+
+    <el-row>
+      <el-table :data="tableData" :border="parentBorder" style="width: 100%">
+        <el-table-column type="expand">
+          <template #default="props">
+            <div>
+              <el-table :data="props.row.context" :border="childBorder">
+                <el-table-column label="对话角色" prop="role" width="120"/>
+                <el-table-column label="对话内容" prop="content"/>
+              </el-table>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="角色名称" prop="name"/>
+        <el-table-column label="角色标识" prop="key"/>
+        <el-table-column label="启用状态" width="180">
+          <template #default="scope">
+            <el-tag v-if="scope.row.enable" type="success">启用</el-tag>
+            <el-tag type="danger" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="角色图标" prop="icon">
+          <template #default="scope">
+            <el-image :src="scope.row.icon" style="width: 45px; height: 45px; border-radius: 50%"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="打招呼信息" prop="hello_msg"/>
+        <el-table-column label="操作" width="80" align="right">
+          <template #default="scope">
+            <el-button size="small" type="primary" @click="rowEdit(scope.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+
+    <el-dialog
+        v-model="showDialog"
+        title="编辑用户"
+        width="50%"
+        :destroy-on-close="true"
+
+    >
+      <el-form :model="form1" label-width="120px" ref="formRef" :rules="rules">
+        <el-form-item label="角色名称：" prop="name">
+          <el-input
+              v-model="form1.name"
+              autocomplete="off"
+          />
+        </el-form-item>
+
+        <el-form-item label="角色标志：" prop="key">
+          <el-input
+              v-model="form1.key"
+              autocomplete="off"
+          />
+        </el-form-item>
+
+        <el-form-item label="角色图标：" prop="icon">
+          <el-input
+              v-model="form1.icon"
+              autocomplete="off"
+          />
+        </el-form-item>
+
+        <el-form-item label="打招呼信息：" prop="hello_msg">
+          <el-input
+              v-model="form1.hello_msg"
+              autocomplete="off"
+          />
+        </el-form-item>
+
+        <el-form-item label="上下文信息：" prop="context">
+          <template #default>
+            <el-table :data="form1.context" :border="childBorder" size="small">
+              <el-table-column label="对话角色" width="120">
+                <template #default="scope">
+                  <el-input
+                      v-model="scope.row.role"
+                      autocomplete="off"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="对话内容">
+                <template #header>
+                  <div class="context-msg-key">
+                    <span>对话内容</span>
+                    <span class="fr">
+                      <el-button type="primary" @click="addContext" size="small">
+                      <el-icon>
+                        <Plus/>
+                      </el-icon>
+                      增加一行
+                    </el-button>
+                    </span>
+                  </div>
+                </template>
+
+                <template #default="scope">
+                  <div class="context-msg-content">
+                    <el-input
+                        v-model="scope.row.content"
+                        autocomplete="off"
+                    />
+                    <span><el-icon @click="removeContext(scope.$index)"><RemoveFilled/></el-icon></span>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </template>
+        </el-form-item>
+
+        <el-form-item label="启用状态">
+          <el-switch v-model="form1.enable"/>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+            <span class="dialog-footer">
+              <el-button @click="showDialog = false">取消</el-button>
+              <el-button type="primary" @click="doUpdate">保存</el-button>
+            </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
-<script>
-import {defineComponent} from "vue";
+<script setup>
 
-export default defineComponent({
-  name: 'RoleList',
-  data() {
-    return {
-      title: "角色管理",
+import {Plus, RemoveFilled} from "@element-plus/icons-vue";
+import {reactive, ref} from "vue";
+import {httpPost} from "@/utils/http";
+import {ElMessage} from "element-plus";
 
-    }
-  },
+const showDialog = ref(false)
+const parentBorder = ref(false)
+const childBorder = ref(true)
+const tableData = ref([])
+const form1 = ref({context: []})
+// const form2 = ref({context: []})
+const formRef = ref(null)
+
+const rules = reactive({
+  name: [{required: true, message: '请输入用户名', trigger: 'change',}],
+  key: [{required: true, message: '请输入角色标识', trigger: 'change',}],
+  icon: [{required: true, message: '请输入角色图标', trigger: 'change',}],
+  hello_msg: [{required: true, message: '请输入打招呼信息', trigger: 'change',}]
 })
+
+// 获取角色列表
+httpPost('/api/admin/chat-roles/list').then((res) => {
+  tableData.value = res.data
+}).catch(() => {
+  ElMessage.error("获取聊天角色失败");
+})
+
+// 编辑
+const rowEdit = function (row) {
+  form1.value = row
+  showDialog.value = true
+}
+
+const doUpdate = function () {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      showDialog.value = false
+      httpPost('/api/admin/chat-roles/set', form1.value).then(() => {
+        ElMessage.success('更新角色成功')
+      }).catch((e) => {
+        ElMessage.error('更新角色失败，' + e.message)
+      })
+    } else {
+      return false
+    }
+  })
+}
+
+const addContext = function () {
+  form1.value.context.push({role: '', content: ''})
+}
+
+const removeContext = function (index) {
+  form1.value.context.splice(index, 1);
+}
+
 </script>
 
 <style lang="stylus" scoped>
-.system-config {
+.role-list {
+  .opt-box {
+    padding-bottom: 10px;
 
+    .el-icon {
+      margin-right 5px;
+    }
+  }
+
+  .context-msg-key {
+    .fr {
+      float right
+
+      .el-icon {
+        margin-right 5px
+      }
+    }
+  }
+
+  .context-msg-content {
+    display flex
+
+    .el-icon {
+      font-size: 20px;
+      margin-top 5px;
+      margin-left 5px;
+      cursor pointer
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/web/src/views/admin/UserList.vue b/web/src/views/admin/UserList.vue
index f5fe3bfb..cc4e636b 100644
--- a/web/src/views/admin/UserList.vue
+++ b/web/src/views/admin/UserList.vue
@@ -5,7 +5,7 @@
         <el-icon>
           <Plus/>
         </el-icon>
-        新增
+        新增用户
       </el-button>
 
       <el-button type="success" @click="showBatchAddUserDialog = true">
@@ -306,7 +306,7 @@ onMounted(() => {
   })
 
   // 获取角色列表
-  httpPost("/api/admin/chat-roles/get").then((res) => {
+  httpPost('/api/admin/chat-roles/list').then((res) => {
     roles.value = res.data;
     roles.value.unshift({name: '全部', key: 'all'})
   }).catch(() => {