[incubator-streampark] branch dev updated: [Feature] Add the team and member management page (#1790)

[benjobs]

This is an automated email from the ASF dual-hosted git repository.

benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git


The following commit(s) were added to refs/heads/dev by this push:
     new cfa26213c [Feature] Add the team and member management page (#1790)
cfa26213c is described below

commit cfa26213cbb1081e8d1a45487a4a568898356578
Author: WangSizhu0504 <39726513+wangsizhu0...@users.noreply.github.com>
AuthorDate: Mon Oct 10 00:52:40 2022 +0800

    [Feature] Add the team and member management page (#1790)
    
    * [Chore] Add newui pre commit hook
    
    * [Docs] Change github repository url
    
    * [Docs] Update README
    
    * [Feature] Add the team management page
    
    * [Feature] Add the member management page
    
    * [Fix] add license header,member locales
    
    * [Fix] license header position
---
 .husky/pre-commit                                  |   4 +
 streampark-console/streampark-console-newui/.env   |   2 +-
 .../streampark-console-newui/.env.production       |   2 +-
 .../streampark-console-newui/.husky/commit-msg     |  21 ---
 .../streampark-console-newui/.husky/common.sh      |  24 ---
 .../streampark-console-newui/.husky/pre-commit     |  24 ---
 .../streampark-console-newui/README.md             |  16 +-
 .../streampark-console-newui/README.zh-CN.md       |  17 +-
 .../streampark-console-newui/package.json          |   7 +-
 .../src/adapter/api/baseUrl.ts                     |   2 +-
 .../src/api/demo/model/systemModel.ts              |   6 +
 .../src/api/demo/system.ts                         |   3 +-
 .../src/api/model/baseModel.ts                     |   2 +-
 .../streampark-console-newui/src/api/sys/member.ts | 133 +++++++++++++++
 .../streampark-console-newui/src/api/sys/role.ts   |  11 ++
 .../streampark-console-newui/src/api/sys/team.ts   |  55 +++++--
 .../streampark-console-newui/src/api/sys/user.ts   |  15 ++
 .../src/components/Loading/src/Loading.vue         |   1 +
 .../layouts/default/header/components/Github.vue   |   5 +-
 .../layouts/default/header/components/UserTeam.vue |  49 ++++++
 .../src/layouts/default/header/components/index.ts |   2 +
 .../default/header/components/notify/index.vue     |   2 +-
 .../header/components/user-dropdown/index.vue      |   2 +-
 .../src/layouts/default/header/index.vue           |   9 +-
 .../lang/en/system/member.ts}                      |  25 ++-
 .../locales/lang/en/system/team.ts}                |  40 ++---
 .../lang/zh-CN/system/member.ts}                   |  25 ++-
 .../lang/zh-CN/system/team.ts}                     |  26 ++-
 .../src/router/routes/modules/demo/StreamX.ts      |   2 +-
 .../src/settings/localeSetting.ts                  |   4 +-
 .../src/settings/siteSetting.ts                    |   8 +-
 .../src/store/modules/locale.ts                    |   2 +-
 .../src/store/modules/user.ts                      |   9 +
 .../src/views/flink/app/EditStreamPark.vue         |   4 +-
 .../src/views/system/member/Member.vue             | 182 +++++++++++++++++++++
 .../src/views/system/member/MemberDrawer.vue       | 173 ++++++++++++++++++++
 .../src/views/system/menu/Menu.vue                 |  22 +--
 .../src/views/system/menu/menu.data.ts             |   1 +
 .../src/views/system/role/Role.vue                 |  53 +++---
 .../src/views/system/role/role.data.ts             |  23 ++-
 .../src/views/system/team/Team.vue                 | 103 ++++++------
 .../src/views/system/team/TeamDrawer.vue           |  95 +++++++----
 .../src/views/system/team/team.data.ts             |  44 ++---
 .../src/views/system/token/Token.vue               |  40 ++---
 .../src/views/system/user/User.vue                 |  85 +++++-----
 .../src/views/system/user/user.data.ts             |  48 +++---
 .../tests/server/service/UserService.ts            |   4 +-
 .../streampark-console-newui/types/axios.d.ts      |   2 +-
 48 files changed, 1031 insertions(+), 403 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 72d14ed44..6d1d38785 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -22,3 +22,7 @@
 
 cd streampark-console/streampark-console-webapp
 npm run lint
+
+# newui pre commit lint
+cd ../streampark-console-newui
+npm run lint:lint-staged
diff --git a/streampark-console/streampark-console-newui/.env 
b/streampark-console/streampark-console-newui/.env
index b24c62733..6fea15fb7 100644
--- a/streampark-console/streampark-console-newui/.env
+++ b/streampark-console/streampark-console-newui/.env
@@ -20,4 +20,4 @@ VITE_PORT=3100
 VITE_GLOB_APP_TITLE=StreamPark
 
 # spa shortname
-VITE_GLOB_APP_SHORT_NAME=vue_vben_admin
+VITE_GLOB_APP_SHORT_NAME=StreamPark
diff --git a/streampark-console/streampark-console-newui/.env.production 
b/streampark-console/streampark-console-newui/.env.production
index f09931595..5d914b9ed 100644
--- a/streampark-console/streampark-console-newui/.env.production
+++ b/streampark-console/streampark-console-newui/.env.production
@@ -28,7 +28,7 @@ VITE_BUILD_COMPRESS = 'none'
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=/basic-api
+VITE_GLOB_API_URL=
 
 # File upload address， optional
 # It can be forwarded by nginx or write the actual address directly
diff --git a/streampark-console/streampark-console-newui/.husky/commit-msg 
b/streampark-console/streampark-console-newui/.husky/commit-msg
deleted file mode 100644
index 472457266..000000000
--- a/streampark-console/streampark-console-newui/.husky/commit-msg
+++ /dev/null
@@ -1,21 +0,0 @@
-# Licensed to the Apache Software Foundation (ASF) under one or more
-# contributor license agreements.  See the NOTICE file distributed with
-# this work for additional information regarding copyright ownership.
-# The ASF licenses this file to You under the Apache License, Version 2.0
-# (the "License"); you may not use this file except in compliance with
-# the License.  You may obtain a copy of the License at
-#
-#    https://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-#!/bin/sh
-
-# shellcheck source=./_/husky.sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install commitlint --edit "$1"
diff --git a/streampark-console/streampark-console-newui/.husky/common.sh 
b/streampark-console/streampark-console-newui/.husky/common.sh
deleted file mode 100644
index 9f4ac2cd2..000000000
--- a/streampark-console/streampark-console-newui/.husky/common.sh
+++ /dev/null
@@ -1,24 +0,0 @@
-# Licensed to the Apache Software Foundation (ASF) under one or more
-# contributor license agreements.  See the NOTICE file distributed with
-# this work for additional information regarding copyright ownership.
-# The ASF licenses this file to You under the Apache License, Version 2.0
-# (the "License"); you may not use this file except in compliance with
-# the License.  You may obtain a copy of the License at
-#
-#    https://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-#!/bin/sh
-command_exists () {
-  command -v "$1" >/dev/null 2>&1
-}
-
-# Workaround for Windows 10, Git Bash and Yarn
-if command_exists winpty && test -t 1; then
-  exec < /dev/tty
-fi
diff --git a/streampark-console/streampark-console-newui/.husky/pre-commit 
b/streampark-console/streampark-console-newui/.husky/pre-commit
deleted file mode 100644
index 2bd358130..000000000
--- a/streampark-console/streampark-console-newui/.husky/pre-commit
+++ /dev/null
@@ -1,24 +0,0 @@
-# Licensed to the Apache Software Foundation (ASF) under one or more
-# contributor license agreements.  See the NOTICE file distributed with
-# this work for additional information regarding copyright ownership.
-# The ASF licenses this file to You under the Apache License, Version 2.0
-# (the "License"); you may not use this file except in compliance with
-# the License.  You may obtain a copy of the License at
-#
-#    https://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-
-[ -n "$CI" ] && exit 0
-
-# Format and submit code according to lintstagedrc.js configuration
-npm run lint:lint-staged
diff --git a/streampark-console/streampark-console-newui/README.md 
b/streampark-console/streampark-console-newui/README.md
index f194e26b0..67528d4a3 100644
--- a/streampark-console/streampark-console-newui/README.md
+++ b/streampark-console/streampark-console-newui/README.md
@@ -23,7 +23,7 @@
 
 <div align="center">
 
-**[Official Website](https://streampark.apache.org)** 
+**[Official Website](https://streampark.apache.org)**
 
 </div>
 
@@ -41,29 +41,38 @@ Make stream processing easier
 
 Open the project in Gitpod (free online dev environment for GitHub) and start 
coding immediately.
 
-[![Open in 
Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/streamxhub/streamx-webapp)
+[![Open in 
Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/apache/incubator-streampark)
 
 ## Install and use
 
+- Node.js
+
+Console is written using Javascript. If you don't have a Node.js development 
environment, please [set it up](https://nodejs.org/en/download/). The minimum 
version required is 14.0.
+
 - Installation dependencies
 
 ```bash
 pnpm install
+# or
+yarn install
 ```
 
 - run
 
 ```bash
 pnpm serve
+# or
+yarn serve
 ```
 
 - build
 
 ```bash
 pnpm build
+# or
+yarn build
 ```
 
-
 ## Browser support
 
 The `Chrome 80+` browser is recommended for local development
@@ -73,4 +82,3 @@ Support modern browsers, not IE
 | [<img 
src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png";
 alt=" Edge" width="24px" height="24px" 
/>](http://godban.github.io/browsers-support-badges/)</br>IE | [<img 
src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png";
 alt=" Edge" width="24px" height="24px" 
/>](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img 
src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefo
 [...]
 | :-: | :-: | :-: | :-: | :-: |
 | not support | last 2 versions | last 2 versions | last 2 versions | last 2 
versions |
-
diff --git a/streampark-console/streampark-console-newui/README.zh-CN.md 
b/streampark-console/streampark-console-newui/README.zh-CN.md
index 9c59d2c48..af405fab4 100644
--- a/streampark-console/streampark-console-newui/README.zh-CN.md
+++ b/streampark-console/streampark-console-newui/README.zh-CN.md
@@ -21,10 +21,9 @@
   <a href="https://www.apache.org/licenses/LICENSE-2.0.html";><img 
src="https://img.shields.io/badge/license-Apache%202-4EB1BA.svg";></a>
 </p>
 
-
 <div align="center">
 
-**[官网](https://streampark.apache.org)** 
+**[官网](https://streampark.apache.org)**
 
 </div>
 
@@ -42,27 +41,36 @@ Make stream processing easier
 
 在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.
 
-[![Open in 
Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/streamxhub/streamx-webapp)
+[![Open in 
Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://github.com/apache/incubator-streampark)
 
 ## 安装使用
 
+- Node.js
+
+webui 是用 Javascript 编写的。如果你没有 Node.js 
开发环境，请[设置](https://nodejs.org/en/download/)它。需要的最低版本是 14.0。
+
 - 安装依赖
 
 ```bash
 pnpm install
-
+# or
+yarn install
 ```
 
 - 运行
 
 ```bash
 pnpm serve
+# or
+yarn serve
 ```
 
 - 打包
 
 ```bash
 pnpm build
+# or
+yarn build
 ```
 
 ## 浏览器支持
@@ -74,4 +82,3 @@ pnpm build
 | [<img 
src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png";
 alt=" Edge" width="24px" height="24px" 
/>](http://godban.github.io/browsers-support-badges/)</br>IE | [<img 
src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png";
 alt=" Edge" width="24px" height="24px" 
/>](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img 
src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefo
 [...]
 | :-: | :-: | :-: | :-: | :-: |
 | not support | last 2 versions | last 2 versions | last 2 versions | last 2 
versions |
-
diff --git a/streampark-console/streampark-console-newui/package.json 
b/streampark-console/streampark-console-newui/package.json
index 04b7fd95c..12ff85b76 100644
--- a/streampark-console/streampark-console-newui/package.json
+++ b/streampark-console/streampark-console-newui/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "streampark webapp",
+  "name": "streampark-webapp",
   "version": "2.0.0",
   "author": {
     "name": "streampark",
@@ -64,6 +64,7 @@
     "sortablejs": "^1.15.0",
     "sweetalert2": "^11.4.18",
     "tinymce": "^5.10.3",
+    "terser": "^5.4.0",
     "vditor": "^3.8.13",
     "vue": "^3.2.39",
     "vue-i18n": "^9.2.2",
@@ -135,16 +136,14 @@
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-plugin-mkcert": "^1.10.1",
-    "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.9.1",
-    "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-theme": "^0.8.6",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vite-plugin-windicss": "^1.8.8",
     "vue-eslint-parser": "^9.1.0",
-    "vue-tsc": "^0.40.13"
+    "vue-tsc": "^1.0.1"
   },
   "resolutions": {
     "bin-wrapper": "npm:bin-wrapper-china",
diff --git 
a/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts 
b/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
index 7bdad0994..ec297e6d0 100644
--- a/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
+++ b/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
@@ -19,7 +19,7 @@ export function baseUrl() {
     return `${location.protocol}//${location.host}`;
   }
 
-  const baseApi = import.meta.env.VITE_APP_BASE_API;
+  const baseApi = import.meta.env.VITE_GLOB_API_URL;
 
   return baseApi ? baseApi : '';
 }
diff --git 
a/streampark-console/streampark-console-newui/src/api/demo/model/systemModel.ts 
b/streampark-console/streampark-console-newui/src/api/demo/model/systemModel.ts
index cc86e3020..d65b8bfba 100644
--- 
a/streampark-console/streampark-console-newui/src/api/demo/model/systemModel.ts
+++ 
b/streampark-console/streampark-console-newui/src/api/demo/model/systemModel.ts
@@ -112,3 +112,9 @@ export type UserListGetResultModel = 
BasicFetchResult<UserListItem>;
 export type RolePageListGetResultModel = BasicFetchResult<RoleListItem>;
 
 export type RoleListGetResultModel = RoleListItem[];
+
+export interface MenuListModel {
+  ids: Array<string>;
+  rows: any;
+  total: number;
+}
diff --git a/streampark-console/streampark-console-newui/src/api/demo/system.ts 
b/streampark-console/streampark-console-newui/src/api/demo/system.ts
index 465408236..562390820 100644
--- a/streampark-console/streampark-console-newui/src/api/demo/system.ts
+++ b/streampark-console/streampark-console-newui/src/api/demo/system.ts
@@ -26,6 +26,7 @@ import {
   AccountListGetResultModel,
   RolePageListGetResultModel,
   RoleListGetResultModel,
+  MenuListModel,
 } from './model/systemModel';
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum } from '/@/enums/httpEnum';
@@ -49,7 +50,7 @@ export const getDeptList = (params?: DeptListItem) =>
   defHttp.get<DeptListGetResultModel>({ url: Api.DeptList, params });
 
 export const getMenuList = (params?: MenuParams) =>
-  defHttp.post<MenuListGetResultModel>({
+  defHttp.post<MenuListModel>({
     url: Api.MenuList,
     params,
     headers: {
diff --git 
a/streampark-console/streampark-console-newui/src/api/model/baseModel.ts 
b/streampark-console/streampark-console-newui/src/api/model/baseModel.ts
index 925d6d214..6a03c663a 100644
--- a/streampark-console/streampark-console-newui/src/api/model/baseModel.ts
+++ b/streampark-console/streampark-console-newui/src/api/model/baseModel.ts
@@ -20,6 +20,6 @@ export interface BasicPageParams {
 }
 
 export interface BasicFetchResult<T> {
-  items: T[];
+  records: T[];
   total: number;
 }
diff --git a/streampark-console/streampark-console-newui/src/api/sys/member.ts 
b/streampark-console/streampark-console-newui/src/api/sys/member.ts
new file mode 100644
index 000000000..b2cb3511a
--- /dev/null
+++ b/streampark-console/streampark-console-newui/src/api/sys/member.ts
@@ -0,0 +1,133 @@
+import { AxiosResponse } from 'axios';
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { defHttp } from '/@/utils/http/axios';
+import { ContentTypeEnum } from '/@/enums/httpEnum';
+import { Result } from '/#/axios';
+
+export interface AddMemberParams {
+  teamId: string;
+  userName: string;
+  roleId: number;
+}
+
+export interface UpdateMemberParams extends AddMemberParams {
+  id: string;
+  userId: string;
+}
+
+enum MEMBER_API {
+  POST = '/member/post',
+  UPDATE = '/member/update',
+  LIST = '/member/list',
+  TEAMS = '/member/teams',
+  CHECK_NAME = '/user/check/name',
+  DELETE = '/member/delete',
+}
+/**
+ * 获取member 列表
+ * @param params
+ * @returns
+ */
+export function fetchMemberList(params) {
+  return defHttp.post({
+    url: MEMBER_API.LIST,
+    params,
+    headers: {
+      'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+    },
+  });
+}
+
+/**
+ * 添加member
+ * @param {String} teamId 组织id
+ * @param {String} userName 用户名
+ * @param {Number} roleId 角色ID
+ * @returns Promise<boolean>
+ */
+export function fetchAddMember(params: AddMemberParams) {
+  return defHttp.post<boolean>({
+    url: MEMBER_API.POST,
+    params,
+    headers: {
+      'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+    },
+  });
+}
+/**
+ * 更新member
+ * @param params
+ * @returns
+ */
+export function fetchUpdateMember(params) {
+  return defHttp.put({
+    url: MEMBER_API.UPDATE,
+    params,
+    headers: {
+      'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+    },
+  });
+}
+/**
+ * 查找用户team
+ * @param {Number|String} userId
+ * @returns Promise<Array<{ id: string; teamName: string }>>
+ */
+export function fetchUserTeam(params: { userId: number | string }) {
+  return defHttp.post<Array<{ id: string; teamName: string }>>({
+    url: MEMBER_API.TEAMS,
+    params,
+    headers: {
+      'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+    },
+  });
+}
+/**
+ * 名称检查
+ * @param {String} username 名称
+ * @returns Promise<boolean>
+ */
+export function fetchCheckUserName(params: { username: string }) {
+  return defHttp.post<boolean>({
+    url: MEMBER_API.CHECK_NAME,
+    params,
+    headers: {
+      'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+    },
+  });
+}
+
+/**
+ * 删除
+ * @param {String} id memeber Id
+ * @returns Promise<boolean>
+ */
+export function fetchMemberDelete(params: { id: string }) {
+  return defHttp.delete<AxiosResponse<Result>>(
+    {
+      url: MEMBER_API.DELETE,
+      params,
+      headers: {
+        'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+      },
+    },
+    {
+      isReturnNativeResponse: true,
+    },
+  );
+}
diff --git a/streampark-console/streampark-console-newui/src/api/sys/role.ts 
b/streampark-console/streampark-console-newui/src/api/sys/role.ts
index 493f80f89..4c1d718eb 100644
--- a/streampark-console/streampark-console-newui/src/api/sys/role.ts
+++ b/streampark-console/streampark-console-newui/src/api/sys/role.ts
@@ -22,6 +22,7 @@ enum Api {
   AddRole = '/role/post',
   UpdateRole = '/role/update',
   DeleteRole = '/role/delete',
+  CHECK_NAME = '/role/check/name',
 }
 
 export function getRoleListByUser(params?) {
@@ -57,3 +58,13 @@ export function deleteRole(params?) {
     },
   });
 }
+
+export function fetchCheckName(params) {
+  return defHttp.post({
+    url: Api.CHECK_NAME,
+    params,
+    headers: {
+      'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+    },
+  });
+}
diff --git a/streampark-console/streampark-console-newui/src/api/sys/team.ts 
b/streampark-console/streampark-console-newui/src/api/sys/team.ts
index 21b4abb9d..159e2d724 100644
--- a/streampark-console/streampark-console-newui/src/api/sys/team.ts
+++ b/streampark-console/streampark-console-newui/src/api/sys/team.ts
@@ -16,31 +16,39 @@
  */
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum } from '/@/enums/httpEnum';
+import { Result } from '/#/axios';
+import { AxiosResponse } from 'axios';
 
 enum Api {
   TeamListByUser = '/team/listByUser',
-  TeamList = '/team/list',
-  AddTeam = '/team/post',
-  DeleteTeam = '/team/delete',
+  POST = '/team/post',
+  UPDATE = '/team/update',
+  LIST = '/team/list',
+  CHECK_NAME = '/team/check/name',
+  DELETE = '/team/delete',
 }
 
 export function getTeamListByUser(params?) {
   return defHttp.post({ url: Api.TeamListByUser, params });
 }
 
-export function getTeamList(params?) {
+export function getTeamList(params) {
   return defHttp.post({
-    url: Api.TeamList,
+    url: Api.LIST,
     params,
     headers: {
       'Content-Type': ContentTypeEnum.FORM_URLENCODED,
     },
   });
 }
-
-export function addTeam(params) {
+/**
+ *  创建组织
+ * @param {Recordable} teamParams
+ * @returns Promise<Boolean>
+ */
+export function fetchTeamCreate(params) {
   return defHttp.post({
-    url: Api.AddTeam,
+    url: Api.POST,
     params,
     headers: {
       'Content-Type': ContentTypeEnum.FORM_URLENCODED,
@@ -48,12 +56,37 @@ export function addTeam(params) {
   });
 }
 
-export function deleteTeam(params) {
-  return defHttp.delete({
-    url: Api.DeleteTeam,
+/**
+ *  更新组织
+ * @param {Recordable} teamParams
+ * @returns Promise<Boolean>
+ */
+export function fetchTeamUpdate(params: Recordable) {
+  return defHttp.put<boolean>({
+    url: Api.UPDATE,
     params,
     headers: {
       'Content-Type': ContentTypeEnum.FORM_URLENCODED,
     },
   });
 }
+/**
+ * 组织删除
+ * @param {String} id 组织id
+ * @returns Promise<AxiosResponse>
+ */
+export function deleteTeam(params: { id: string }) {
+  return defHttp.delete<AxiosResponse<Result>>(
+    {
+      url: Api.DELETE,
+      params,
+      headers: {
+        'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+      },
+    },
+    {
+      isReturnNativeResponse: true,
+      errorMessageMode: 'none',
+    },
+  );
+}
diff --git a/streampark-console/streampark-console-newui/src/api/sys/user.ts 
b/streampark-console/streampark-console-newui/src/api/sys/user.ts
index d4444e5f3..9c326ff48 100644
--- a/streampark-console/streampark-console-newui/src/api/sys/user.ts
+++ b/streampark-console/streampark-console-newui/src/api/sys/user.ts
@@ -34,6 +34,7 @@ enum Api {
   ResetPassword = '/user/password/reset',
   Password = '/user/password',
   CheckName = '/user/check/name',
+  TYPES = '/user/types',
 }
 
 /**
@@ -138,6 +139,20 @@ export function checkUserName(params) {
     },
   });
 }
+
+export function fetchUserTypes() {
+  return defHttp
+    .post({
+      url: Api.TYPES,
+      data: {},
+      headers: {
+        'Content-Type': ContentTypeEnum.FORM_URLENCODED,
+      },
+    })
+    .then((res) => {
+      return res.map((t) => ({ label: t, value: t }));
+    });
+}
 /**
  * 用户修改密码
  * @param{String} username 用户名
diff --git 
a/streampark-console/streampark-console-newui/src/components/Loading/src/Loading.vue
 
b/streampark-console/streampark-console-newui/src/components/Loading/src/Loading.vue
index 9ebf4a67e..20bab1a14 100644
--- 
a/streampark-console/streampark-console-newui/src/components/Loading/src/Loading.vue
+++ 
b/streampark-console/streampark-console-newui/src/components/Loading/src/Loading.vue
@@ -58,6 +58,7 @@
       },
       theme: {
         type: String as PropType<'dark' | 'light'>,
+        default: 'light',
       },
     },
   });
diff --git 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/Github.vue
 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/Github.vue
index 904ed53af..90409de22 100755
--- 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/Github.vue
+++ 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/Github.vue
@@ -23,14 +23,13 @@
   <Tooltip title="Github" placement="bottom" :mouseEnterDelay="0.5">
     <a :href="GITHUB_URL" target="_blank" class="text-black hover:text-black 
github">
       <Icon icon="ant-design:github-outlined" class="!pl-8px" 
style="font-size: 19px !important" />
-
       <img
-        
src="https://img.shields.io/github/stars/streamxhub/streamx.svg?sanitize=true";
+        
src="https://img.shields.io/github/stars/apache/incubator-streampark.svg?sanitize=true";
         class="px-5px hidden md:block"
       />
 
       <img
-        
src="https://img.shields.io/github/forks/streamxhub/streamx.svg?sanitize=true";
+        
src="https://img.shields.io/github/forks/apache/incubator-streampark.svg?sanitize=true";
         class="pr-8px hidden md:block"
       />
     </a>
diff --git 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/UserTeam.vue
 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/UserTeam.vue
new file mode 100644
index 000000000..ecbccb489
--- /dev/null
+++ 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/UserTeam.vue
@@ -0,0 +1,49 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import { useUserStoreWithOut } from '/@/store/modules/user';
+  import { fetchUserTeam } from '/@/api/sys/member';
+  const SelectOption = Select.Option;
+
+  const userStore = useUserStoreWithOut();
+
+  const teamList = ref<Array<{ id: string; teamName: string }>>([]);
+
+  onMounted(async () => {
+    const res = await fetchUserTeam({ userId: userStore?.getUserInfo?.userId 
});
+    teamList.value = [...res];
+  });
+</script>
+
+<template>
+  <div class="flex items-center min-w-160px">
+    <span class="text-blue-500 pr-10px"> Team : </span>
+    <Select
+      :allow-clear="false"
+      class="flex-1"
+      @change="userStore.setTeamId"
+      :value="userStore.getTeamId"
+      placeholder="Team"
+    >
+      <SelectOption v-for="t in teamList" :key="t.id">
+        {{ t.teamName }}
+      </SelectOption>
+    </Select>
+  </div>
+</template>
diff --git 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/index.ts
 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/index.ts
index 7e863f450..a61013cac 100755
--- 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/index.ts
+++ 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/index.ts
@@ -28,6 +28,8 @@ export const Notify = createAsyncComponent(() => 
import('./notify/index.vue'));
 export const Github = createAsyncComponent(() => import('./Github.vue'));
 /* Slogan */
 export const Slogan = createAsyncComponent(() => import('./Slogan.vue'));
+/* User Team */
+export const UserTeam = createAsyncComponent(() => import('./UserTeam.vue'));
 
 export const ErrorAction = createAsyncComponent(() => 
import('./ErrorAction.vue'));
 
diff --git 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/notify/index.vue
 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/notify/index.vue
index cb06edb1f..8667c2c50 100644
--- 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/notify/index.vue
+++ 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/notify/index.vue
@@ -137,7 +137,7 @@
         }
       }
       const wbSocketUrl = `${window.location.origin}${
-        import.meta.env.VITE_APP_BASE_API
+        import.meta.env.VITE_GLOB_API_URL
       }/websocket/${userStore.getUserInfo.userId}`;
 
       const { data } = useWebSocket(wbSocketUrl.replace(/http/, 'ws'), {
diff --git 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/user-dropdown/index.vue
 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/user-dropdown/index.vue
index 9bcec702e..51d3da656 100644
--- 
a/streampark-console/streampark-console-newui/src/layouts/default/header/components/user-dropdown/index.vue
+++ 
b/streampark-console/streampark-console-newui/src/layouts/default/header/components/user-dropdown/index.vue
@@ -166,7 +166,7 @@
     img {
       width: 30px;
       height: 30px;
-      margin-right: 12px;
+      margin-right: 8px;
     }
 
     &__header {
diff --git 
a/streampark-console/streampark-console-newui/src/layouts/default/header/index.vue
 
b/streampark-console/streampark-console-newui/src/layouts/default/header/index.vue
index f481494ea..b0a5eea43 100755
--- 
a/streampark-console/streampark-console-newui/src/layouts/default/header/index.vue
+++ 
b/streampark-console/streampark-console-newui/src/layouts/default/header/index.vue
@@ -56,10 +56,11 @@
         <span class="pl-2px">{{ version }}</span>
       </a-button>
       <Divider type="vertical" />
-      <!-- Theme Switch -->
-      <appDarkModeToggle />
+
       <!-- Github info -->
       <Github :class="`${prefixCls}-action__item github-item`" />
+      <!-- Theme Switch -->
+      <appDarkModeToggle />
 
       <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
 
@@ -75,7 +76,7 @@
         :showText="false"
         :class="`${prefixCls}-action__item`"
       />
-
+      <UserTeam />
       <UserDropDown :theme="getHeaderTheme" />
 
       <SettingDrawer v-if="getShowSetting" 
:class="`${prefixCls}-action__item`" />
@@ -103,6 +104,7 @@
   import { AppLocalePicker } from '/@/components/Application';
 
   import {
+    UserTeam,
     UserDropDown,
     LayoutBreadcrumb,
     FullScreen,
@@ -126,6 +128,7 @@
       LayoutBreadcrumb,
       LayoutMenu,
       UserDropDown,
+      UserTeam,
       AppLocalePicker,
       FullScreen,
       Notify,
diff --git 
a/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts 
b/streampark-console/streampark-console-newui/src/locales/lang/en/system/member.ts
similarity index 67%
copy from streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
copy to 
streampark-console/streampark-console-newui/src/locales/lang/en/system/member.ts
index 7bdad0994..787fde3d6 100644
--- a/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
+++ 
b/streampark-console/streampark-console-newui/src/locales/lang/en/system/member.ts
@@ -14,12 +14,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export function baseUrl() {
-  if (import.meta.env.VITE_APP_ENV) {
-    return `${location.protocol}//${location.host}`;
-  }
-
-  const baseApi = import.meta.env.VITE_APP_BASE_API;
-
-  return baseApi ? baseApi : '';
-}
+export default {
+  addMember: 'Add Member',
+  modifyMember: 'Modify Member',
+  deleteMember: 'Delete Member',
+  deletePopConfirm: 'Are you sure delete this member ?',
+  add: 'Add',
+  success: 'successful',
+  fail: 'failed',
+  table: {
+    title: 'Member List',
+    userName: 'User Name',
+    roleName: 'Role',
+    createTime: 'Create Time',
+    modifyTime: 'Modify Time',
+  },
+};
diff --git 
a/streampark-console/streampark-console-newui/tests/server/service/UserService.ts
 
b/streampark-console/streampark-console-newui/src/locales/lang/en/system/team.ts
similarity index 64%
copy from 
streampark-console/streampark-console-newui/tests/server/service/UserService.ts
copy to 
streampark-console/streampark-console-newui/src/locales/lang/en/system/team.ts
index 606c27c1f..3a381c8e1 100644
--- 
a/streampark-console/streampark-console-newui/tests/server/service/UserService.ts
+++ 
b/streampark-console/streampark-console-newui/src/locales/lang/en/system/team.ts
@@ -14,28 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Result } from '../utils';
-
-const fakeUserInfo = {
-  userId: '1',
-  username: 'vben',
-  realName: 'Vben Admin',
-  desc: 'manager',
-  password: '123456',
-  token: 'fakeToken1',
-  roles: [
-    {
-      roleName: 'Super Admin',
-      value: 'super',
-    },
-  ],
+export default {
+  addTeam: 'Add Team',
+  modifyTeam: 'Modify Team',
+  deleteTeam: 'Delete Team',
+  deletePopConfirm: 'Are you sure delete this team ?',
+  add: 'Add',
+  success: 'successful',
+  fail: 'failed',
+  table: {
+    title: 'Team List',
+    teamName: 'Team Name',
+    description: 'Description',
+    createTime: 'Create Time',
+    modifyTime: 'Modify Time',
+    descriptionMessage: 'exceeds maximum length limit of 100 characters',
+  },
 };
-export default class UserService {
-  async login() {
-    return Result.success(fakeUserInfo);
-  }
-
-  async getUserInfoById() {
-    return Result.success(fakeUserInfo);
-  }
-}
diff --git 
a/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts 
b/streampark-console/streampark-console-newui/src/locales/lang/zh-CN/system/member.ts
similarity index 67%
copy from streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
copy to 
streampark-console/streampark-console-newui/src/locales/lang/zh-CN/system/member.ts
index 7bdad0994..a9af32ffb 100644
--- a/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
+++ 
b/streampark-console/streampark-console-newui/src/locales/lang/zh-CN/system/member.ts
@@ -14,12 +14,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export function baseUrl() {
-  if (import.meta.env.VITE_APP_ENV) {
-    return `${location.protocol}//${location.host}`;
-  }
-
-  const baseApi = import.meta.env.VITE_APP_BASE_API;
-
-  return baseApi ? baseApi : '';
-}
+export default {
+  addMember: '添加成员',
+  modifyMember: '编辑成员',
+  deleteMember: '删除成员',
+  deletePopConfirm: '确定要删除这个成员 ?',
+  add: '添加',
+  success: '成功',
+  fail: '失败',
+  table: {
+    title: '成员列表',
+    userName: '用户名',
+    roleName: '角色',
+    createTime: '创建时间',
+    modifyTime: '修改时间',
+  },
+};
diff --git 
a/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts 
b/streampark-console/streampark-console-newui/src/locales/lang/zh-CN/system/team.ts
similarity index 64%
copy from streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
copy to 
streampark-console/streampark-console-newui/src/locales/lang/zh-CN/system/team.ts
index 7bdad0994..f620e21d7 100644
--- a/streampark-console/streampark-console-newui/src/adapter/api/baseUrl.ts
+++ 
b/streampark-console/streampark-console-newui/src/locales/lang/zh-CN/system/team.ts
@@ -14,12 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export function baseUrl() {
-  if (import.meta.env.VITE_APP_ENV) {
-    return `${location.protocol}//${location.host}`;
-  }
-
-  const baseApi = import.meta.env.VITE_APP_BASE_API;
-
-  return baseApi ? baseApi : '';
-}
+export default {
+  addTeam: '创建Team',
+  modifyTeam: '编辑Team',
+  deleteTeam: '删除Team',
+  deletePopConfirm: '确定要删除这个Team ?',
+  add: '创建',
+  success: '成功',
+  fail: '失败',
+  table: {
+    title: 'Team列表',
+    teamName: 'Team名称',
+    description: '描述',
+    createTime: '创建时间',
+    modifyTime: '修改时间',
+    descriptionMessage: '超过了100个字符的最大长度限制',
+  },
+};
diff --git 
a/streampark-console/streampark-console-newui/src/router/routes/modules/demo/StreamX.ts
 
b/streampark-console/streampark-console-newui/src/router/routes/modules/demo/StreamX.ts
index 10d857fca..e9f1e4766 100644
--- 
a/streampark-console/streampark-console-newui/src/router/routes/modules/demo/StreamX.ts
+++ 
b/streampark-console/streampark-console-newui/src/router/routes/modules/demo/StreamX.ts
@@ -26,7 +26,7 @@ const streamxConsole: AppRouteModule = {
   meta: {
     orderNo: 1,
     icon: 'fluent:stream-input-20-regular',
-    title: 'StreamX',
+    title: 'StreamPark',
   },
   children: [
     {
diff --git 
a/streampark-console/streampark-console-newui/src/settings/localeSetting.ts 
b/streampark-console/streampark-console-newui/src/settings/localeSetting.ts
index 92dd06cd1..23be0246e 100644
--- a/streampark-console/streampark-console-newui/src/settings/localeSetting.ts
+++ b/streampark-console/streampark-console-newui/src/settings/localeSetting.ts
@@ -25,9 +25,9 @@ export const LOCALE: { [key: string]: LocaleType } = {
 export const localeSetting: LocaleSetting = {
   showPicker: true,
   // Locale
-  locale: LOCALE.ZH_CN,
+  locale: LOCALE.EN_US,
   // Default locale
-  fallback: LOCALE.ZH_CN,
+  fallback: LOCALE.EN_US,
   // available Locales
   availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
 };
diff --git 
a/streampark-console/streampark-console-newui/src/settings/siteSetting.ts 
b/streampark-console/streampark-console-newui/src/settings/siteSetting.ts
index e2d4764f2..c504d3cbc 100644
--- a/streampark-console/streampark-console-newui/src/settings/siteSetting.ts
+++ b/streampark-console/streampark-console-newui/src/settings/siteSetting.ts
@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 // github repo url
-export const GITHUB_URL = 'https://github.com/streamxhub/streampark';
+export const GITHUB_URL = 'https://github.com/apache/incubator-streampark';
 
-// vue-vben-admin-next-doc
-export const DOC_URL = 'http://www.streamxhub.com/';
+// doc
+export const DOC_URL = 'https://streampark.apache.org';
 
 // site url
-export const SITE_URL = 'http://www.streamxhub.com/';
+export const SITE_URL = 'https://streampark.apache.org';
diff --git 
a/streampark-console/streampark-console-newui/src/store/modules/locale.ts 
b/streampark-console/streampark-console-newui/src/store/modules/locale.ts
index 168bf4bde..ade45ddea 100644
--- a/streampark-console/streampark-console-newui/src/store/modules/locale.ts
+++ b/streampark-console/streampark-console-newui/src/store/modules/locale.ts
@@ -41,7 +41,7 @@ export const useLocaleStore = defineStore({
       return !!this.localInfo?.showPicker;
     },
     getLocale(): LocaleType {
-      return this.localInfo?.locale ?? 'zh_CN';
+      return this.localInfo?.locale ?? 'en';
     },
   },
   actions: {
diff --git 
a/streampark-console/streampark-console-newui/src/store/modules/user.ts 
b/streampark-console/streampark-console-newui/src/store/modules/user.ts
index 2b3cf265c..237b6f00a 100644
--- a/streampark-console/streampark-console-newui/src/store/modules/user.ts
+++ b/streampark-console/streampark-console-newui/src/store/modules/user.ts
@@ -47,6 +47,7 @@ interface UserState {
   permissions: string[];
   sessionTimeout?: boolean;
   lastUpdateTime: number;
+  teamId?: string;
 }
 
 export const useUserStore = defineStore({
@@ -64,6 +65,8 @@ export const useUserStore = defineStore({
     sessionTimeout: false,
     // Last fetch time
     lastUpdateTime: 0,
+    // user Team
+    teamId: undefined,
   }),
   getters: {
     getUserInfo(): UserInfo {
@@ -89,6 +92,9 @@ export const useUserStore = defineStore({
         ? this.permissions
         : getAuthCache<string[]>(PERMISSION_KEY);
     },
+    getTeamId(): string | undefined {
+      return this.teamId;
+    },
   },
   actions: {
     setToken(info: string | undefined) {
@@ -130,6 +136,9 @@ export const useUserStore = defineStore({
       this.setRoleList(roles);
       this.setPermissions(permissions);
     },
+    setTeamId(teamId: string) {
+      this.teamId = teamId;
+    },
     /**
      * @description: login
      */
diff --git 
a/streampark-console/streampark-console-newui/src/views/flink/app/EditStreamPark.vue
 
b/streampark-console/streampark-console-newui/src/views/flink/app/EditStreamPark.vue
index 0fec0bb37..98bbc0cd5 100644
--- 
a/streampark-console/streampark-console-newui/src/views/flink/app/EditStreamPark.vue
+++ 
b/streampark-console/streampark-console-newui/src/views/flink/app/EditStreamPark.vue
@@ -16,10 +16,10 @@
 -->
 <script lang="ts">
   export default defineComponent({
-    name: 'EditStreamX',
+    name: 'EditStreamPark',
   });
 </script>
-<script setup lang="ts" name="EditStreamX">
+<script setup lang="ts" name="EditStreamPark">
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
   import { onMounted, reactive, ref, nextTick, unref, defineComponent } from 
'vue';
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/member/Member.vue
 
b/streampark-console/streampark-console-newui/src/views/system/member/Member.vue
new file mode 100644
index 000000000..4f7df5374
--- /dev/null
+++ 
b/streampark-console/streampark-console-newui/src/views/system/member/Member.vue
@@ -0,0 +1,182 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<template>
+  <div>
+    <BasicTable @register="registerTable" :formConfig="formConfig">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate" v-auth="'member:add'">
+          {{ t('system.member.addMember') }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'ant-design:edit-outlined',
+                auth: 'member:update',
+                tooltip: t('system.member.modifyMember'),
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: t('system.member.deleteMember'),
+                auth: 'member:delete',
+                popConfirm: {
+                  title: t('system.member.deletePopConfirm'),
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <MemberDrawer
+      @register="registerDrawer"
+      @success="handleSuccess"
+      :roleOptions="roleListOptions"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, onMounted, ref, unref } from 'vue';
+  import { useTabs } from '/@/hooks/web/useTabs';
+  import { useUserStoreWithOut } from '/@/store/modules/user';
+  import { RoleListItem } from '/@/api/demo/model/systemModel';
+
+  export default defineComponent({
+    name: 'Member',
+  });
+</script>
+
+<script setup lang="ts" name="member">
+  import { BasicTable, useTable, TableAction, FormProps } from 
'/@/components/Table';
+  import MemberDrawer from './MemberDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getRoleListByPage } from '/@/api/demo/system';
+  import { fetchMemberDelete, fetchMemberList } from '/@/api/sys/member';
+
+  const roleListOptions = ref<Array<Partial<RoleListItem>>>([]);
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const { createMessage } = useMessage();
+  const { close } = useTabs();
+  const { t } = useI18n();
+  const userStore = useUserStoreWithOut();
+  const formConfig = computed((): Partial<FormProps> => {
+    return {
+      labelWidth: 120,
+      schemas: [
+        {
+          field: 'userName',
+          label: t('system.member.table.userName'),
+          component: 'Input',
+          colProps: { span: 6 },
+        },
+        {
+          field: 'roleName',
+          label: t('system.member.table.roleName'),
+          component: 'Select',
+          componentProps: {
+            options: unref(roleListOptions),
+            fieldNames: { label: 'roleName', value: 'roleName' },
+          },
+          colProps: { span: 6 },
+        },
+        {
+          field: 'createTime',
+          label: t('system.team.table.createTime'),
+          component: 'RangePicker',
+          colProps: { span: 6 },
+        },
+      ],
+      fieldMapToTime: [['createTime', ['createTimeFrom', 'createTimeTo'], 
'YYYY-MM-DD']],
+    };
+  });
+  const [registerTable, { reload }] = useTable({
+    title: t('system.member.table.title'),
+    api: fetchMemberList,
+    beforeFetch: (params) => {
+      params.teamId = userStore.getTeamId;
+      return params;
+    },
+    columns: [
+      { title: t('system.member.table.userName'), dataIndex: 'userName', 
sorter: true },
+      { title: t('system.member.table.roleName'), dataIndex: 'roleName', 
sorter: true },
+      { title: t('system.member.table.createTime'), dataIndex: 'createTime', 
sorter: true },
+      { title: t('system.member.table.modifyTime'), dataIndex: 'modifyTime', 
sorter: true },
+    ],
+    rowKey: 'id',
+    pagination: true,
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 120,
+      title: t('component.table.operation'),
+      dataIndex: 'action',
+    },
+    immediate: false,
+  });
+
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /* 删除成员 */
+  async function handleDelete(record: Recordable) {
+    const { data } = await fetchMemberDelete({ id: record.id });
+    if (data.status === 'success') {
+      createMessage.success(t('system.member.deleteMember') + 
t('system.member.success'));
+      reload();
+    } else {
+      createMessage.error(t('system.member.deleteMember') + 
t('system.member.fail'));
+    }
+  }
+
+  function handleSuccess(isUpdate: boolean) {
+    createMessage.success(
+      `${isUpdate ? t('common.edit') : t('system.member.addMember')} 
${t('system.member.success')}`,
+    );
+    reload();
+  }
+  onMounted(async () => {
+    if (!userStore.getTeamId) {
+      createMessage.warning('Please select Team first!!!');
+      close(undefined, { path: '/system/team' });
+    } else {
+      reload();
+      const roleList = await getRoleListByPage({ page: 1, pageSize: 9999 });
+      roleListOptions.value = roleList?.records;
+    }
+  });
+</script>
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/member/MemberDrawer.vue
 
b/streampark-console/streampark-console-newui/src/views/system/member/MemberDrawer.vue
new file mode 100644
index 000000000..f223e9122
--- /dev/null
+++ 
b/streampark-console/streampark-console-newui/src/views/system/member/MemberDrawer.vue
@@ -0,0 +1,173 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter 
width="650" @ok="handleSubmit">
+    <template #title>
+      <Icon icon="ant-design:user-add-outlined" />
+      {{ getTitle }}
+    </template>
+    <BasicForm @register="registerForm" :schemas="getMemberFormSchema" />
+  </BasicDrawer>
+</template>
+
+<script lang="ts">
+  export default defineComponent({
+    name: 'MemberDrawer',
+  });
+</script>
+
+<script setup lang="ts" name="MemberDrawer">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { Icon } from '/@/components/Icon';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { RoleListItem } from '/@/api/demo/model/systemModel';
+  import { useUserStoreWithOut } from '/@/store/modules/user';
+  import { RuleObject } from 'ant-design-vue/lib/form';
+  import { StoreValue } from 'ant-design-vue/lib/form/interface';
+  import { fetchAddMember, fetchCheckUserName, fetchUpdateMember } from 
'/@/api/sys/member';
+
+  const { t } = useI18n();
+  const userStore = useUserStoreWithOut();
+
+  const emit = defineEmits(['success', 'register']);
+  const props = defineProps({
+    roleOptions: {
+      type: Array as PropType<Array<Partial<RoleListItem>>>,
+      default: () => [],
+    },
+  });
+
+  const isUpdate = ref(false);
+  const validateStatus = ref<'success' | 'warning' | 'error' | 'validating' | 
''>('');
+  const help = ref('');
+  const editParams: { userId: Nullable<number>; id: Nullable<number>; teamId: 
Nullable<number> } = {
+    userId: null,
+    id: null,
+    teamId: null,
+  };
+
+  async function checkUserName(_rule: RuleObject, value: StoreValue) {
+    if (value) {
+      if (value.length > 20) {
+        validateStatus.value = 'error';
+        help.value = 'User name should not be longer than 20 characters';
+        return Promise.reject();
+      } else if (value.length < 4) {
+        validateStatus.value = 'error';
+        help.value = 'User name should not be less than 4 characters';
+        return Promise.reject();
+      } else {
+        validateStatus.value = 'validating';
+        const res = await fetchCheckUserName({
+          username: value,
+        });
+        if (res) {
+          validateStatus.value = 'error';
+          help.value = "Sorry, the user name doesn't exists";
+          return Promise.reject();
+        } else {
+          validateStatus.value = 'success';
+          help.value = '';
+          return Promise.resolve();
+        }
+      }
+    } else {
+      validateStatus.value = 'error';
+      help.value = 'User name cannot be empty';
+      return Promise.reject();
+    }
+  }
+  const getMemberFormSchema = computed((): FormSchema[] => {
+    return [
+      {
+        field: 'userName',
+        label: t('system.member.table.userName'),
+        component: 'Input',
+        componentProps: { disabled: unref(isUpdate) },
+        itemProps: { validateStatus: unref(validateStatus), help: unref(help), 
hasFeedback: true },
+        rules: unref(isUpdate)
+          ? []
+          : [{ required: true, validator: checkUserName, trigger: 'blur' }],
+      },
+      {
+        field: 'roleId',
+        label: t('system.member.table.roleName'),
+        component: 'Select',
+        componentProps: {
+          options: props.roleOptions,
+          fieldNames: { label: 'roleName', value: 'roleId' },
+        },
+        rules: [{ required: true, message: 'please select role' }],
+      },
+    ];
+  });
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    name: 'MemberForm',
+    colon: true,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 },
+    labelCol: { lg: { span: 5, offset: 0 }, sm: { span: 7, offset: 0 } },
+    wrapperCol: { lg: { span: 16, offset: 0 }, sm: { span: 17, offset: 0 } },
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
+    async (data: Recordable) => {
+      validateStatus.value = '';
+      help.value = '';
+      Object.assign(editParams, { userId: null, id: null });
+      resetFields();
+      setDrawerProps({ confirmLoading: false });
+      isUpdate.value = !!data?.isUpdate;
+      if (isUpdate.value) {
+        Object.assign(editParams, {
+          userId: data.record.userId,
+          id: data.record.id,
+          teamId: userStore.getTeamId,
+        });
+      }
+      if (unref(isUpdate)) {
+        setFieldsValue({
+          userName: data.record.userName,
+          roleId: data.record.roleId,
+        });
+      }
+    },
+  );
+
+  const getTitle = computed(() =>
+    !unref(isUpdate) ? t('system.member.addMember') : 
t('system.member.modifyMember'),
+  );
+  /* 表单提交 */
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      await (isUpdate.value
+        ? fetchUpdateMember({ ...editParams, ...values })
+        : fetchAddMember({ teamId: userStore.getTeamId, ...values }));
+      closeDrawer();
+      emit('success', isUpdate.value);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/menu/Menu.vue 
b/streampark-console/streampark-console-newui/src/views/system/menu/Menu.vue
index 533a06f33..518a67134 100644
--- a/streampark-console/streampark-console-newui/src/views/system/menu/Menu.vue
+++ b/streampark-console/streampark-console-newui/src/views/system/menu/Menu.vue
@@ -20,15 +20,17 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> Add Menu </a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
-            },
-          ]"
-        />
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -75,8 +77,6 @@
           width: 100,
           title: 'Operation',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
         },
       });
 
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/menu/menu.data.ts
 
b/streampark-console/streampark-console-newui/src/views/system/menu/menu.data.ts
index ade095afc..d7a7ebf87 100644
--- 
a/streampark-console/streampark-console-newui/src/views/system/menu/menu.data.ts
+++ 
b/streampark-console/streampark-console-newui/src/views/system/menu/menu.data.ts
@@ -146,6 +146,7 @@ export const formSchema: FormSchema[] = [
     label: '排序',
     component: 'InputNumber',
     required: true,
+    ifShow: ({ values }) => !isButton(values.type),
   },
   {
     field: 'icon',
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/role/Role.vue 
b/streampark-console/streampark-console-newui/src/views/system/role/Role.vue
index e37d5671b..7c45f27c4 100644
--- a/streampark-console/streampark-console-newui/src/views/system/role/Role.vue
+++ b/streampark-console/streampark-console-newui/src/views/system/role/Role.vue
@@ -18,32 +18,35 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> Add Role</a-button>
+        <a-button type="primary" @click="handleCreate" v-auth="'role:add'"> 
Add Role</a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              icon: 'carbon:data-view-alt',
-              tooltip: 'view detail',
-              onClick: handleView.bind(null, record),
-            },
-            {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              tooltip: 'delete role',
-              popConfirm: {
-                title: '是否确认删除',
-                placement: 'left',
-                confirm: handleDelete.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                auth: 'role:update',
+                onClick: handleEdit.bind(null, record),
               },
-            },
-          ]"
-        />
+              {
+                icon: 'carbon:data-view-alt',
+                tooltip: 'view detail',
+                onClick: handleView.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                auth: 'role:delete',
+                popConfirm: {
+                  title: 'Are you sure delete this Role',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -86,8 +89,6 @@
           width: 120,
           title: 'Operation',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
         },
       });
 
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/role/role.data.ts
 
b/streampark-console/streampark-console-newui/src/views/system/role/role.data.ts
index 684044af2..1d2888458 100644
--- 
a/streampark-console/streampark-console-newui/src/views/system/role/role.data.ts
+++ 
b/streampark-console/streampark-console-newui/src/views/system/role/role.data.ts
@@ -14,6 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { RuleObject, StoreValue } from 'ant-design-vue/lib/form/interface';
+import { fetchCheckName } from '/@/api/sys/role';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 
@@ -50,7 +52,24 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 8 },
   },
 ];
-
+async function handleRoleCheck(_rule: RuleObject, value: StoreValue) {
+  if (value) {
+    if (value.length > 10) {
+      return Promise.reject('Role name should not be longer than 10 
characters');
+    } else {
+      const res = await fetchCheckName({
+        roleName: value,
+      });
+      if (res) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject('Sorry, the role name already exists');
+      }
+    }
+  } else {
+    return Promise.reject('Role name cannot be empty');
+  }
+}
 export const formSchema: FormSchema[] = [
   {
     field: 'roleId',
@@ -63,6 +82,7 @@ export const formSchema: FormSchema[] = [
     label: 'Role Name',
     required: true,
     component: 'Input',
+    rules: [{ required: true, validator: handleRoleCheck, trigger: 'blur' }],
   },
   {
     label: 'Description',
@@ -75,5 +95,6 @@ export const formSchema: FormSchema[] = [
     slot: 'menu',
     defaultValue: [],
     component: 'Input',
+    rules: [{ required: true, message: 'Please select the permission.' }],
   },
 ];
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/team/Team.vue 
b/streampark-console/streampark-console-newui/src/views/system/team/Team.vue
index 66cfe9409..3e0807f62 100644
--- a/streampark-console/streampark-console-newui/src/views/system/team/Team.vue
+++ b/streampark-console/streampark-console-newui/src/views/system/team/Team.vue
@@ -16,31 +16,42 @@
 -->
 <template>
   <div>
-    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
+    <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> Add Team </a-button>
+        <a-button type="primary" @click="handleCreate" v-auth="'team:add'">
+          {{ t('system.team.addTeam') }}
+        </a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              tooltip: 'delete Team',
-              popConfirm: {
-                title: 'delete Team, are you sure',
-                confirm: handleDelete.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'ant-design:edit-outlined',
+                auth: 'team:update',
+                tooltip: t('system.team.modifyTeam'),
+                onClick: handleTeamEdit.bind(null, record),
               },
-            },
-          ]"
-        />
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: t('system.team.deleteTeam'),
+                auth: 'team:delete',
+                popConfirm: {
+                  title: t('system.team.deletePopConfirm'),
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <TeamDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, nextTick } from 'vue';
+  import { defineComponent } from 'vue';
 
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import TeamDrawer from './TeamDrawer.vue';
@@ -48,15 +59,16 @@
   import { columns, searchFormSchema } from './team.data';
   import { getTeamList, deleteTeam } from '/@/api/sys/team';
   import { useMessage } from '/@/hooks/web/useMessage';
-
+  import { useI18n } from '/@/hooks/web/useI18n';
   export default defineComponent({
-    name: 'User',
+    name: 'Team',
     components: { BasicTable, TeamDrawer, TableAction },
     setup() {
       const [registerDrawer, { openDrawer }] = useDrawer();
       const { createMessage } = useMessage();
-      const [registerTable, { reload, expandAll }] = useTable({
-        title: 'Team List',
+      const { t } = useI18n();
+      const [registerTable, { reload }] = useTable({
+        title: t('system.team.table.title'),
         api: getTeamList,
         columns,
         formConfig: {
@@ -64,21 +76,22 @@
           schemas: searchFormSchema,
           fieldMapToTime: [['createTime', ['createTimeFrom', 'createTimeTo'], 
'YYYY-MM-DD']],
         },
-        rowKey: 'teamId',
-        isTreeTable: true,
+        beforeFetch: (params) => {
+          if (params?.sortField) {
+            params.sortField = params.sortField.replace(/([a-z])([A-Z])/, 
'$1_$2').toLowerCase();
+          }
+          return params;
+        },
+        rowKey: 'id',
         pagination: true,
-        striped: false,
         useSearchForm: true,
         showTableSetting: false,
-        bordered: true,
         showIndexColumn: false,
         canResize: false,
         actionColumn: {
-          width: 120,
-          title: 'Operation',
+          width: 200,
+          title: t('component.table.operation'),
           dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
         },
       });
 
@@ -88,46 +101,42 @@
         });
       }
 
-      function handleEdit(record: Recordable) {
+      function handleTeamEdit(record: Recordable) {
         openDrawer(true, {
           record,
           isUpdate: true,
         });
       }
 
-      function handleView(record: Recordable) {
-        console.log(record);
-      }
-
-      function handleDelete(record: Recordable) {
-        deleteTeam({ teamId: record.teamId }).then((_) => {
-          createMessage.success('delete successful');
+      /* 删除组织 */
+      async function handleDelete(record: Recordable) {
+        const { data } = await deleteTeam({ id: record.id });
+        if (data.status === 'success') {
+          createMessage.success(t('system.team.deleteTeam') + 
t('system.team.success'));
           reload();
-        });
+        } else {
+          createMessage.error(t('system.team.deleteTeam') + 
t('system.team.fail'));
+        }
       }
 
-      function handleSuccess() {
-        createMessage.success('add successful');
+      function handleSuccess(isUpdate: boolean) {
+        createMessage.success(
+          `${isUpdate ? t('common.edit') : 
t('system.team.add')}${t('system.team.success')}`,
+        );
         reload();
       }
 
-      function onFetchSuccess() {
-        // 演示默认展开所有表项
-        nextTick(expandAll);
-      }
-
       function onChange(val) {
         console.log(val);
       }
       return {
+        t,
         registerTable,
         registerDrawer,
         handleCreate,
-        handleEdit,
+        handleTeamEdit,
         handleDelete,
         handleSuccess,
-        onFetchSuccess,
-        handleView,
         onChange,
       };
     },
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/team/TeamDrawer.vue
 
b/streampark-console/streampark-console-newui/src/views/system/team/TeamDrawer.vue
index 9d1b20190..a9a4ea621 100644
--- 
a/streampark-console/streampark-console-newui/src/views/system/team/TeamDrawer.vue
+++ 
b/streampark-console/streampark-console-newui/src/views/system/team/TeamDrawer.vue
@@ -15,66 +15,93 @@
   limitations under the License.
 -->
 <template>
-  <BasicDrawer
-    v-bind="$attrs"
-    @register="registerDrawer"
-    showFooter
-    :title="getTitle"
-    width="50%"
-    @ok="handleSubmit"
-  >
-    <BasicForm @register="registerForm" />
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter 
width="650" @ok="handleSubmit">
+    <template #title>
+      <Icon icon="ant-design:team-outlined" />
+      {{ getTitle }}
+    </template>
+    <BasicForm @register="registerForm" :schemas="getTeamFormSchema" />
   </BasicDrawer>
 </template>
 <script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './team.data';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
 
-  import { addTeam } from '/@/api/sys/team';
+  import { fetchTeamCreate, fetchTeamUpdate } from '/@/api/sys/team';
+  import { Icon } from '/@/components/Icon';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   export default defineComponent({
-    name: 'MenuDrawer',
-    components: { BasicDrawer, BasicForm },
+    name: 'TeamDrawer',
+    components: { BasicDrawer, BasicForm, Icon },
     emits: ['success', 'register'],
     setup(_, { emit }) {
-      const isUpdate = ref(true);
+      const { t } = useI18n();
 
+      const isUpdate = ref(false);
+      const teamId = ref<Nullable<number>>(null);
+      const getTeamFormSchema = computed((): FormSchema[] => {
+        return [
+          {
+            field: 'teamName',
+            label: t('system.team.table.teamName'),
+            component: 'Input',
+            componentProps: { disabled: isUpdate.value },
+            required: !isUpdate.value,
+          },
+          {
+            field: 'description',
+            label: t('system.team.table.description'),
+            component: 'InputTextArea',
+            componentProps: { rows: 4 },
+            rules: [{ max: 100, message: 
t('system.team.table.descriptionMessage') }],
+          },
+        ];
+      });
       const [registerForm, { resetFields, setFieldsValue, validate }] = 
useForm({
-        labelWidth: 120,
-        schemas: formSchema,
+        name: 'TeamEditForm',
+        colon: true,
         showActionButtonGroup: false,
-        baseColProps: { lg: 22, md: 22 },
-      });
-
-      const [registerDrawer, { setDrawerProps, closeDrawer }] = 
useDrawerInner(async (data) => {
-        resetFields();
-        setDrawerProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
-
-        if (unref(isUpdate)) {
-          setFieldsValue({
-            ...data.record,
-          });
-        }
+        baseColProps: { span: 24 },
+        labelCol: { lg: { span: 5, offset: 0 }, sm: { span: 7, offset: 0 } },
+        wrapperCol: { lg: { span: 16, offset: 0 }, sm: { span: 17, offset: 0 } 
},
       });
 
-      const getTitle = computed(() => (!unref(isUpdate) ? 'Add User' : 'Edit 
User'));
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
+        async (data: Recordable) => {
+          teamId.value = null;
+          resetFields();
+          setDrawerProps({ confirmLoading: false });
+          isUpdate.value = !!data?.isUpdate;
+          if (isUpdate.value) teamId.value = data.record.id;
+          if (unref(isUpdate)) {
+            setFieldsValue({
+              ...data.record,
+            });
+          }
+        },
+      );
 
+      const getTitle = computed(() =>
+        !unref(isUpdate) ? t('system.team.addTeam') : 
t('system.team.modifyTeam'),
+      );
+      /* 表单提交 */
       async function handleSubmit() {
         try {
           const values = await validate();
           setDrawerProps({ confirmLoading: true });
-          addTeam(values);
+          await (isUpdate.value
+            ? fetchTeamUpdate({ id: teamId.value, ...values })
+            : fetchTeamCreate(values));
           closeDrawer();
-          emit('success');
+          emit('success', isUpdate.value);
         } finally {
           setDrawerProps({ confirmLoading: false });
         }
       }
 
-      return { registerDrawer, registerForm, getTitle, handleSubmit };
+      return { registerDrawer, registerForm, getTitle, getTeamFormSchema, 
handleSubmit };
     },
   });
 </script>
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/team/team.data.ts
 
b/streampark-console/streampark-console-newui/src/views/system/team/team.data.ts
index d87ca737f..cff870fc4 100644
--- 
a/streampark-console/streampark-console-newui/src/views/system/team/team.data.ts
+++ 
b/streampark-console/streampark-console-newui/src/views/system/team/team.data.ts
@@ -15,51 +15,43 @@
  * limitations under the License.
  */
 import { BasicColumn, FormSchema } from '/@/components/Table';
-
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
 export const columns: BasicColumn[] = [
   {
-    title: 'Team Code',
-    dataIndex: 'teamCode',
-    width: 200,
-    align: 'left',
+    title: t('system.team.table.teamName'),
+    dataIndex: 'teamName',
+    sorter: true,
   },
   {
-    title: 'Team Name',
-    dataIndex: 'teamName',
+    title: t('system.team.table.description'),
+    dataIndex: 'description',
+    ellipsis: true,
+    width: 350,
   },
   {
-    title: 'Create Time',
+    title: t('system.team.table.createTime'),
     dataIndex: 'createTime',
-    width: 180,
+    sorter: true,
+  },
+  {
+    title: t('system.team.table.modifyTime'),
+    dataIndex: 'modifyTime',
+    sorter: true,
   },
 ];
 
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'teamName',
-    label: 'Team Name',
+    label: t('system.team.table.teamName'),
     component: 'Input',
     colProps: { span: 8 },
   },
   {
     field: 'createTime',
-    label: 'Create Time',
+    label: t('system.team.table.createTime'),
     component: 'RangePicker',
     colProps: { span: 8 },
   },
 ];
-
-export const formSchema: FormSchema[] = [
-  {
-    field: 'teamName',
-    label: 'Team Name',
-    component: 'Input',
-    required: true,
-  },
-  {
-    field: 'teamCode',
-    label: 'Team Code',
-    component: 'Input',
-    required: true,
-  },
-];
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/token/Token.vue 
b/streampark-console/streampark-console-newui/src/views/system/token/Token.vue
index 070c14877..171d50996 100644
--- 
a/streampark-console/streampark-console-newui/src/views/system/token/Token.vue
+++ 
b/streampark-console/streampark-console-newui/src/views/system/token/Token.vue
@@ -20,25 +20,27 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> Add Token</a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'ant-design:copy-outlined',
-              tooltip: 'Copy Token',
-              onClick: handleCopy.bind(null, record),
-            },
-            {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              tooltip: 'Delete Token',
-              popConfirm: {
-                title: 'are you sure delete this token ?',
-                confirm: handleDelete.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'ant-design:copy-outlined',
+                tooltip: 'Copy Token',
+                onClick: handleCopy.bind(null, record),
               },
-            },
-          ]"
-        />
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: 'Delete Token',
+                popConfirm: {
+                  title: 'are you sure delete this token ?',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <TokenDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -89,8 +91,6 @@
           width: 120,
           title: 'Operation',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
         },
       });
 
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/user/User.vue 
b/streampark-console/streampark-console-newui/src/views/system/user/User.vue
index 82f7a5630..9c8817cec 100644
--- a/streampark-console/streampark-console-newui/src/views/system/user/User.vue
+++ b/streampark-console/streampark-console-newui/src/views/system/user/User.vue
@@ -18,51 +18,55 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> Add User </a-button>
+        <a-button type="primary" @click="handleCreate" v-auth="'user:add'"> 
Add User </a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'clarity:note-edit-line',
-              tooltip: 'modify',
-              auth: 'user:update',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              icon: 'carbon:data-view-alt',
-              tooltip: 'view detail',
-              onClick: handleView.bind(null, record),
-            },
-            {
-              icon: 'bx:reset',
-              auth: 'user:reset',
-              tooltip: 'reset password',
-              popConfirm: {
-                title: 'reset password, are you sure',
-                confirm: handleReset.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                tooltip: 'modify',
+                auth: 'user:update',
+                ifShow: () => record.username !== 'admin' || userName === 
'admin',
+                onClick: handleEdit.bind(null, record),
               },
-            },
-            {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              auth: 'user:delete',
-              ifShow: record.username !== 'admin',
-              tooltip: 'delete user',
-              popConfirm: {
-                title: 'delete user, are you sure',
-                confirm: handleDelete.bind(null, record),
+              {
+                icon: 'carbon:data-view-alt',
+                tooltip: 'view detail',
+                onClick: handleView.bind(null, record),
               },
-            },
-          ]"
-        />
+              {
+                icon: 'bx:reset',
+                auth: 'user:reset',
+                tooltip: 'reset password',
+                ifShow: () => record.username !== 'admin' || userName === 
'admin',
+                popConfirm: {
+                  title: 'reset password, are you sure',
+                  confirm: handleReset.bind(null, record),
+                },
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                auth: 'user:delete',
+                ifShow: record.username !== 'admin',
+                tooltip: 'delete user',
+                popConfirm: {
+                  title: 'delete user, are you sure',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <UserDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { computed, defineComponent } from 'vue';
 
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import UserDrawer from './UserDrawer.vue';
@@ -71,11 +75,16 @@
   import { columns, searchFormSchema } from './user.data';
   import { FormTypeEnum } from '/@/enums/formEnum';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStoreWithOut } from '/@/store/modules/user';
 
   export default defineComponent({
     name: 'User',
     components: { BasicTable, UserDrawer, TableAction },
     setup() {
+      const userStore = useUserStoreWithOut();
+      const userName = computed(() => {
+        return userStore.getUserInfo?.username;
+      });
       const [registerDrawer, { openDrawer }] = useDrawer();
       const { createMessage, createSuccessModal } = useMessage();
       const [registerTable, { reload }] = useTable({
@@ -88,7 +97,6 @@
           fieldMapToTime: [['createTime', ['createTimeFrom', 'createTimeTo'], 
'YYYY-MM']],
         },
         rowKey: 'userId',
-        isTreeTable: true,
         pagination: true,
         striped: false,
         useSearchForm: true,
@@ -100,8 +108,6 @@
           width: 140,
           title: 'Operation',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
         },
       });
 
@@ -148,6 +154,7 @@
       }
 
       return {
+        userName,
         registerTable,
         registerDrawer,
         handleCreate,
diff --git 
a/streampark-console/streampark-console-newui/src/views/system/user/user.data.ts
 
b/streampark-console/streampark-console-newui/src/views/system/user/user.data.ts
index b60b0e19a..549ff8b3d 100644
--- 
a/streampark-console/streampark-console-newui/src/views/system/user/user.data.ts
+++ 
b/streampark-console/streampark-console-newui/src/views/system/user/user.data.ts
@@ -17,9 +17,7 @@
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
-import { getRoleListByUser } from '/@/api/sys/role';
-import { getTeamListByUser } from '/@/api/sys/team';
-import { checkUserName } from '/@/api/sys/user';
+import { checkUserName, fetchUserTypes } from '/@/api/sys/user';
 import { FormTypeEnum } from '/@/enums/formEnum';
 
 // user status enum
@@ -40,7 +38,6 @@ export const columns: BasicColumn[] = [
     title: 'User Name',
     dataIndex: 'username',
     width: 200,
-    align: 'left',
     sorter: true,
   },
   {
@@ -48,8 +45,8 @@ export const columns: BasicColumn[] = [
     dataIndex: 'nickName',
   },
   {
-    title: 'Team',
-    dataIndex: 'teamName',
+    title: 'User Type',
+    dataIndex: 'userType',
     width: 180,
   },
   {
@@ -61,6 +58,11 @@ export const columns: BasicColumn[] = [
       const text = enable ? 'Effective' : 'locked';
       return h(Tag, { color }, () => text);
     },
+    filters: [
+      { text: 'Effective', value: '1' },
+      { text: 'Locked', value: '0' },
+    ],
+    filterMultiple: false,
   },
   {
     title: 'Create Time',
@@ -102,7 +104,7 @@ export const formSchema = (formType: string): FormSchema[] 
=> {
       label: 'User Name',
       component: 'Input',
       rules: [
-        { required: true, message: 'username is required' },
+        { required: isCreate, message: 'username is required' },
         { min: 4, message: 'username length cannot be less than 4 characters' 
},
         { max: 8, message: 'exceeds maximum length limit of 8 characters' },
         {
@@ -157,33 +159,15 @@ export const formSchema = (formType: string): 
FormSchema[] => {
       },
     },
     {
-      label: 'Role',
-      field: 'roleId',
+      label: 'User Type',
+      field: 'userType',
       component: 'ApiSelect',
       componentProps: {
         disabled: isView,
-        api: getRoleListByUser,
-        resultField: 'records',
-        labelField: 'roleName',
-        valueField: 'roleId',
-        mode: 'multiple',
+        api: fetchUserTypes,
       },
       required: true,
     },
-    {
-      label: 'Team',
-      field: 'teamId',
-      component: 'ApiSelect',
-      componentProps: {
-        id: 'formTeamId',
-        api: getTeamListByUser,
-        resultField: 'records',
-        labelField: 'teamName',
-        valueField: 'teamId',
-      },
-      required: true,
-      show: isCreate,
-    },
     {
       field: 'status',
       label: 'Status',
@@ -195,7 +179,7 @@ export const formSchema = (formType: string): FormSchema[] 
=> {
           { label: 'effective', value: StatusEnum.Effective },
         ],
       },
-      required: true,
+      rules: [{ required: true, message: 'please select status' }],
     },
     {
       field: 'sex',
@@ -211,5 +195,11 @@ export const formSchema = (formType: string): FormSchema[] 
=> {
       },
       required: true,
     },
+    {
+      field: 'description',
+      label: 'Description',
+      component: 'InputTextArea',
+      ifShow: isCreate,
+    },
   ];
 };
diff --git 
a/streampark-console/streampark-console-newui/tests/server/service/UserService.ts
 
b/streampark-console/streampark-console-newui/tests/server/service/UserService.ts
index 606c27c1f..60d7670ff 100644
--- 
a/streampark-console/streampark-console-newui/tests/server/service/UserService.ts
+++ 
b/streampark-console/streampark-console-newui/tests/server/service/UserService.ts
@@ -18,8 +18,8 @@ import { Result } from '../utils';
 
 const fakeUserInfo = {
   userId: '1',
-  username: 'vben',
-  realName: 'Vben Admin',
+  username: 'test',
+  realName: 'test',
   desc: 'manager',
   password: '123456',
   token: 'fakeToken1',
diff --git a/streampark-console/streampark-console-newui/types/axios.d.ts 
b/streampark-console/streampark-console-newui/types/axios.d.ts
index 89234d5af..3aecb7fe8 100644
--- a/streampark-console/streampark-console-newui/types/axios.d.ts
+++ b/streampark-console/streampark-console-newui/types/axios.d.ts
@@ -50,7 +50,7 @@ export interface RetryRequest {
 }
 export interface Result<T = any> {
   code: string | number;
-  type: 'success' | 'error' | 'warning';
+  status: 'success' | 'error' | 'warning';
   message: string;
   data: T;
 }