diff --git a/packages/toolkits/pro/template/server/nestJs/src/menu/dto/delete-menu.dto.ts b/packages/toolkits/pro/template/server/nestJs/src/menu/dto/delete-menu.dto.ts
deleted file mode 100644
index fba71a0f..00000000
--- a/packages/toolkits/pro/template/server/nestJs/src/menu/dto/delete-menu.dto.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { IsNotEmpty } from 'class-validator';
-
-export class DeleteMenuDto {
-  @IsNotEmpty()
-  id: number;
-  @IsNotEmpty()
-  name: string;
-}
diff --git a/packages/toolkits/pro/template/server/nestJs/src/menu/dto/update-menu.dto.ts b/packages/toolkits/pro/template/server/nestJs/src/menu/dto/update-menu.dto.ts
index a8de5514..13a859e8 100644
--- a/packages/toolkits/pro/template/server/nestJs/src/menu/dto/update-menu.dto.ts
+++ b/packages/toolkits/pro/template/server/nestJs/src/menu/dto/update-menu.dto.ts
@@ -1,6 +1,8 @@
 import { PartialType } from '@nestjs/mapped-types';
 import { CreateMenuDto } from './create-menu.dto';
+import {IsNotEmpty} from "class-validator";
 
 export class UpdateMenuDto extends PartialType(CreateMenuDto) {
+  @IsNotEmpty()
   id: number;
 }
diff --git a/packages/toolkits/pro/template/server/nestJs/src/menu/menu.controller.ts b/packages/toolkits/pro/template/server/nestJs/src/menu/menu.controller.ts
index 5913c059..acbc9b7a 100644
--- a/packages/toolkits/pro/template/server/nestJs/src/menu/menu.controller.ts
+++ b/packages/toolkits/pro/template/server/nestJs/src/menu/menu.controller.ts
@@ -4,22 +4,27 @@ import {
   Post,
   Body,
   Patch,
-  Req,
-  Delete,
+  Query,
+  Delete, Param,
 } from '@nestjs/common';
 import { MenuService } from './menu.service';
 import { CreateMenuDto } from './dto/create-menu.dto';
 import { Permission } from '../public/permission.decorator';
 import { UpdateMenuDto } from './dto/update-menu.dto';
-import { DeleteMenuDto } from './dto/delete-menu.dto';
 
 @Controller('menu')
 export class MenuController {
   constructor(private readonly menuService: MenuService) {}
 
+  @Get('/role/:email')
+  async getMenus(@Param('email') email: string) {
+    return this.menuService.findRoleMenu(email);
+  }
+
   @Get()
-  async getMenus(@Req() req) {
-    return this.menuService.findAll(req.user);
+  @Permission('menu::query')
+  async getAllMenus() {
+    return this.menuService.findAllMenu();
   }
 
   @Post()
@@ -36,7 +41,7 @@ export class MenuController {
 
   @Delete()
   @Permission('menu::remove')
-  async deleteMenu(@Body() dto: DeleteMenuDto) {
-    return this.menuService.deleteMenu(dto);
+  async deleteMenu(@Query('id') id: number, @Query('parentId') parentId: number) {
+    return this.menuService.deleteMenu(id, parentId);
   }
 }
diff --git a/packages/toolkits/pro/template/server/nestJs/src/menu/menu.service.ts b/packages/toolkits/pro/template/server/nestJs/src/menu/menu.service.ts
index 8609f651..67b474bc 100644
--- a/packages/toolkits/pro/template/server/nestJs/src/menu/menu.service.ts
+++ b/packages/toolkits/pro/template/server/nestJs/src/menu/menu.service.ts
@@ -4,7 +4,6 @@ import { Menu, User } from '@app/models';
 import { Repository } from 'typeorm';
 import { CreateMenuDto } from './dto/create-menu.dto';
 import { UpdateMenuDto } from './dto/update-menu.dto';
-import { DeleteMenuDto } from './dto/delete-menu.dto';
 
 export interface ITreeNodeData {
   // node-key='id' 设置节点的唯一标识
@@ -17,6 +16,14 @@ export interface ITreeNodeData {
   url: string;
   //组件
   component: string;
+  //图标
+  icon: string;
+  //类型
+  menuType: string;
+  //父节点
+  parentId: number;
+  //排序
+  order: number;
 }
 
 interface MenuMap {
@@ -30,6 +37,10 @@ const toNode = (menu: Menu): ITreeNodeData => {
     children: [],
     url: menu.path,
     component: menu.component,
+    icon: menu.icon,
+    menuType: menu.menuType,
+    parentId: menu.parentId,
+    order: menu.order,
   };
 };
 
@@ -58,13 +69,13 @@ export class MenuService {
     @InjectRepository(Menu)
     private menu: Repository<Menu>
   ) {}
-  async findAll(user: User) {
+  async findRoleMenu(email: string) {
     const userInfo = await this.user
       .createQueryBuilder('user')
       .leftJoinAndSelect('user.role', 'role')
       .leftJoinAndSelect('role.menus', 'menus')
       .where({
-        email: user.email,
+        email: email,
       })
       .orderBy('menus.order', 'ASC')
       .getOne();
@@ -75,6 +86,12 @@ export class MenuService {
     });
     return convertToTree(menus);
   }
+
+  async findAllMenu(){
+    const menu = this.menu.find();
+    return convertToTree(await menu)
+  }
+
   async createMenu(dto: CreateMenuDto) {
     const {
       order,
@@ -107,13 +124,23 @@ export class MenuService {
     });
     return true;
   }
-  async deleteMenu(dto: DeleteMenuDto) {
+  async deleteMenu(id: number, parentId: number) {
     const menu = this.menu.findOne({
       where: {
-        id: dto.id,
-        name: dto.name,
+        id: id,
       },
     });
+    const allMenu = await this.menu.find();
+    for (const tmp of allMenu){
+      if(Number(tmp.parentId) === Number(id)){
+        if(Number(parentId) === -1){
+          tmp.parentId = null;
+        }else {
+          tmp.parentId = parentId;
+        }
+        await this.updateMenu(tmp)
+      }
+    }
     return this.menu.remove(await menu);
   }
 }
diff --git a/packages/toolkits/pro/template/server/nestJs/src/role/dto/delete-role.dto.ts b/packages/toolkits/pro/template/server/nestJs/src/role/dto/delete-role.dto.ts
deleted file mode 100644
index a53480b0..00000000
--- a/packages/toolkits/pro/template/server/nestJs/src/role/dto/delete-role.dto.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { IsNotEmpty } from 'class-validator';
-
-export class DeleteRoleDto {
-  @IsNotEmpty()
-  name: string;
-}
diff --git a/packages/toolkits/pro/template/server/nestJs/src/role/role.controller.ts b/packages/toolkits/pro/template/server/nestJs/src/role/role.controller.ts
index b65bd3e4..0b1dd3db 100644
--- a/packages/toolkits/pro/template/server/nestJs/src/role/role.controller.ts
+++ b/packages/toolkits/pro/template/server/nestJs/src/role/role.controller.ts
@@ -10,7 +10,6 @@ import {
 import { RoleService } from './role.service';
 import { CreateRoleDto } from './dto/create-role.dto';
 import { UpdateRoleDto } from './dto/update-role.dto';
-import { DeleteRoleDto } from './dto/delete-role.dto';
 import { Permission } from '../public/permission.decorator';
 
 @Controller('role')
@@ -29,16 +28,22 @@ export class RoleController {
     return this.roleService.findAll();
   }
 
+  @Permission('role::get')
+  @Get('/detail')
+  getAllRoleDetail() {
+    return this.roleService.findAllDetail();
+  }
+
   @Patch()
   @Permission('role::update')
   updateRole(@Body() dto: UpdateRoleDto) {
     return this.roleService.update(dto);
   }
 
-  @Delete()
+  @Delete('/:id')
   @Permission('role::remove')
-  deleteRole(@Body() dto: DeleteRoleDto) {
-    return this.roleService.delete(dto);
+  deleteRole(@Param('id') id: number) {
+    return this.roleService.delete(id);
   }
 
   @Permission('role::get')
diff --git a/packages/toolkits/pro/template/server/nestJs/src/role/role.service.ts b/packages/toolkits/pro/template/server/nestJs/src/role/role.service.ts
index 564c17b9..0fdacd93 100644
--- a/packages/toolkits/pro/template/server/nestJs/src/role/role.service.ts
+++ b/packages/toolkits/pro/template/server/nestJs/src/role/role.service.ts
@@ -1,10 +1,10 @@
 import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
 import { CreateRoleDto } from './dto/create-role.dto';
 import { UpdateRoleDto } from './dto/update-role.dto';
-import { DeleteRoleDto } from './dto/delete-role.dto';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Menu, Permission, Role } from '@app/models';
 import { DataSource, In, Repository } from 'typeorm';
+import { convertToTree } from "../menu/menu.service";
 
 @Injectable()
 export class RoleService {
@@ -42,7 +42,25 @@ export class RoleService {
     return this.role.save({ name, permission: permissions, menus });
   }
   findAll() {
-    return this.role.find();
+    return this.role.find()
+  }
+
+  async findAllDetail() {
+    const roleInfo = await this.role
+      .createQueryBuilder('role')
+      .leftJoinAndSelect('role.menus', 'menus')
+      .leftJoinAndSelect('role.permission', 'permission')
+      .getMany();
+    const menuTree = [] as any;
+    for(const item of roleInfo){
+      const temp = convertToTree(item.menus);
+      menuTree.push(temp)
+    }
+
+    return {
+      roleInfo: roleInfo,
+      menuTree: menuTree,
+    }
   }
 
   async findOne(id: string) {
@@ -83,10 +101,10 @@ export class RoleService {
     role.menus = menus.length ? menus : undefined;
     return this.role.save(role);
   }
-  async delete(data: DeleteRoleDto) {
+  async delete(id: number) {
     const role = await this.role.find({
       where: {
-        name: data.name,
+        id: id,
       },
     });
     return this.role.remove(role);
diff --git a/packages/toolkits/pro/template/tinyvue/src/api/menu.ts b/packages/toolkits/pro/template/tinyvue/src/api/menu.ts
new file mode 100644
index 00000000..1cb247cb
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/api/menu.ts
@@ -0,0 +1,23 @@
+import axios from "axios";
+
+
+
+export function getAllMenu() {
+  return axios.get('/api/menu');
+}
+
+export function getRoleMenu(email: string) {
+  return axios.get(`/api/menu/role/${email}`);
+}
+
+export function updateMenu(data: any) {
+  return axios.patch(`/api/menu`, data);
+}
+
+export function deleteMenu(id: number, parentId: number) {
+  return axios.delete(`/api/menu?id=${id}&parentId=${parentId}`);
+}
+
+export function createMenu(data: any) {
+  return axios.post(`/api/menu`, data);
+}
diff --git a/packages/toolkits/pro/template/tinyvue/src/api/role.ts b/packages/toolkits/pro/template/tinyvue/src/api/role.ts
index 089039c5..6e57f754 100644
--- a/packages/toolkits/pro/template/tinyvue/src/api/role.ts
+++ b/packages/toolkits/pro/template/tinyvue/src/api/role.ts
@@ -2,6 +2,22 @@ import axios from "axios";
 
 
 
-export function getRoles() {
+export function getAllRole() {
   return axios.get('/api/role');
 }
+
+export function getAllRoleDetail() {
+  return axios.get('/api/role/detail');
+}
+
+export function updateRole(data: any) {
+  return axios.patch(`/api/role`, data);
+}
+
+export function deleteRole(id: number) {
+  return axios.delete(`/api/role/${id}`);
+}
+
+export function createRole(data: any) {
+  return axios.post(`/api/role`, data);
+}
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue b/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
index b53081d4..70fd6f21 100644
--- a/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
@@ -35,6 +35,8 @@
     IconApplication,
     IconGroup,
     IconFolderOpened,
+    IconActivation,
+    IconGrade,
   } from '@opentiny/vue-icon';
   import { TreeMenu as tinyTreeMenu } from '@opentiny/vue';
   import router from '@/router';
@@ -52,6 +54,8 @@
   const iconApplication = IconApplication();
   const iconFolderOpened = IconFolderOpened();
   const iconGroup = IconGroup();
+  const iconActivation = IconActivation();
+  const iconGrade = IconGrade();
   const tree = ref();
   const expandeArr = ref();
   const routerTitle = [
@@ -230,14 +234,26 @@
       bold: 'title',
     },
     {
-      value: 'PermissionSetting',
-      name: 'menu.permission.setting',
+      value: 'Role',
+      name: 'menu.role',
+      icon: iconActivation,
+      bold: 'main-title',
+    },
+    {
+      value: 'AllRole',
+      name: 'menu.role.info',
       icon: null,
       bold: 'title',
     },
     {
-      value: 'PermissionAdd',
-      name: 'menu.permission.permissionAdd',
+      value: 'Menu',
+      name: 'menu.menu',
+      icon: iconGrade,
+      bold: 'main-title',
+    },
+    {
+      value: 'AllMenu',
+      name: 'menu.menu.info',
       icon: null,
       bold: 'title',
     },
@@ -311,6 +327,9 @@
       'User',
       'Cloud',
       'UserManager',
+      'Permission',
+      'Role',
+      'Menu',
     ];
     if (filter.indexOf(data.id) === -1) {
       router.push({ name: data.id });
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/navbar/index.vue b/packages/toolkits/pro/template/tinyvue/src/components/navbar/index.vue
index 3f07cd3e..16310fdb 100644
--- a/packages/toolkits/pro/template/tinyvue/src/components/navbar/index.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/components/navbar/index.vue
@@ -76,7 +76,7 @@
       show-header
       show-footer
       mask-closable="true"
-      height="350"
+      height="auto"
       width="600"
       :title="$t('userInfo.modal.title.pwdUpdate')"
     >
@@ -213,8 +213,8 @@ const state = reactive<{
     { label: 'messageBox.switchRoles', value: 1 },
     { label: 'messageBox.userCenter', value: 2 },
     { label: 'messageBox.userSettings', value: 3 },
-    { label: 'messageBox.logout', value: 4 },
-    { label: 'messageBox.updatePwd',value: 5 },
+    { label: 'messageBox.updatePwd',value: 4 },
+    { label: 'messageBox.logout', value: 5 },
   ];
 
   const switchRoles = async () => {
@@ -238,10 +238,10 @@ const state = reactive<{
         router.push({ name: 'Setting' });
         break;
       case 4:
-        logout();
+        handlePwdUpdate();
         break;
       case 5:
-        handlePwdUpdate();
+        logout();
         break;
       default:
       // eslint-disable-next-line no-console
diff --git a/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts b/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
index 750d6e04..bd60f659 100644
--- a/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
+++ b/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
@@ -32,6 +32,10 @@ import localeUserManagerUserAdd from '@/views/userManager/useradd/locale/en-US';
 
 import localePermission from '@/views/permission/info/locale/en-US';
 
+import localeRole from '@/views/role/info/locale/en-US';
+
+import localeMenu from '@/views/menu/info/locale/en-US';
+
 import localeSettings from './en-US/settings';
 
 import localeHttpError from './en-US/httpError';
@@ -56,6 +60,10 @@ export default {
   'menu.permission.info':'All Permission Info',
   'menu.permission.setting':'Permission Setting',
   'menu.permission.permissionAdd':'Add Permission',
+  'menu.role': 'Role Manager',
+  'menu.role.info':'All Role Info',
+  'menu.menu': 'Menu Manager',
+  'menu.menu.info': 'All Menu Info',
   'navbar.docs': 'Docs',
   'navbar.action.locale': 'Switch to English',
   'messageBox.switchRoles': 'Switch Roles',
@@ -86,4 +94,6 @@ export default {
   ...localeUserManagerSetting,
   ...localeUserManagerUserAdd,
   ...localePermission,
+  ...localeRole,
+  ...localeMenu,
 };
diff --git a/packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts b/packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts
index 09ae2408..c2c49b48 100644
--- a/packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts
+++ b/packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts
@@ -32,6 +32,10 @@ import localeUserManagerUserAdd from '@/views/userManager/useradd/locale/zh-CN';
 
 import localePermission from '@/views/permission/info/locale/zh-CN';
 
+import localeRole from '@/views/role/info/locale/zh-CN';
+
+import localeMenu from '@/views/menu/info/locale/zh-CN';
+
 import localeSettings from './zh-CN/settings';
 
 import localeHttpError from './zh-CN/httpError';
@@ -57,6 +61,10 @@ export default {
   'menu.permission.info':'查看权限',
   'menu.permission.setting':'修改权限',
   'menu.permission.permissionAdd':'添加权限',
+  'menu.role': '角色管理',
+  'menu.role.info':'查看角色',
+  'menu.menu': '菜单管理',
+  'menu.menu.info': '查看菜单',
   'navbar.docs': '文档中心',
   'navbar.action.locale': '切换为中文',
   'messageBox.switchRoles': '切换角色',
@@ -87,4 +95,6 @@ export default {
   ...localeUserManagerSetting,
   ...localeUserManagerUserAdd,
   ...localePermission,
+  ...localeRole,
+  ...localeMenu,
 };
diff --git a/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/menu.ts b/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/menu.ts
new file mode 100644
index 00000000..8f645538
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/menu.ts
@@ -0,0 +1,29 @@
+import { RoleType } from '@/types/roleType';
+
+export default {
+  path: 'menu',
+  name: 'Menu',
+  id: 'Menu',
+  label: 'Menu',
+  component: () => import('@/views/menu/index.vue'),
+  meta: {
+    locale: 'menu.menu',
+    requiresAuth: true,
+    order: 9,
+    roles: [RoleType.admin],
+  },
+  children: [
+    {
+      path: 'allMenu',
+      name: 'AllMenu',
+      id: 'AllMenu',
+      label: 'AllMenu',
+      component: () => import('@/views/menu/info/index.vue'),
+      meta: {
+        locale: 'menu.menu.info',
+        requiresAuth: true,
+        roles: [RoleType.admin],
+      },
+    },
+  ],
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/role.ts b/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/role.ts
new file mode 100644
index 00000000..d6e1f749
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/role.ts
@@ -0,0 +1,29 @@
+import { RoleType } from '@/types/roleType';
+
+export default {
+  path: 'role',
+  name: 'Role',
+  id: 'Role',
+  label: 'Role',
+  component: () => import('@/views/role/index.vue'),
+  meta: {
+    locale: 'menu.role',
+    requiresAuth: true,
+    order: 9,
+    roles: [RoleType.admin],
+  },
+  children: [
+    {
+      path: 'allRole',
+      name: 'AllRole',
+      id: 'AllRole',
+      label: 'AllRole',
+      component: () => import('@/views/role/info/index.vue'),
+      meta: {
+        locale: 'menu.role.info',
+        requiresAuth: true,
+        roles: [RoleType.admin],
+      },
+    },
+  ],
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/menu/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/menu/index.vue
new file mode 100644
index 00000000..6c71efda
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/menu/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup></script>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/menu/info/components/info-tab.vue b/packages/toolkits/pro/template/tinyvue/src/views/menu/info/components/info-tab.vue
new file mode 100644
index 00000000..e625bc9a
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/menu/info/components/info-tab.vue
@@ -0,0 +1,603 @@
+<template>
+  <div class="tiny-fullscreen-scroll">
+    <div class="tiny-fullscreen-wrapper">
+      <div class="menu-add-btn">
+        <tiny-button type="primary" @click="handleAddMenu">{{ $t('menuInfo.modal.title.add') }}</tiny-button>
+      </div>
+      <div class="table">
+        <tiny-tree
+          :data="state.tableData"
+          :size="medium"
+          :indent="18"
+          :show-line="showLine === 'show'"
+          default-expand-all
+        >
+          <template #operation="{node}">
+              <a class="operation-info" @click="handleCheck(node)"> {{$t('menuInfo.table.operations.info')}} </a>
+              <a class="operation-update" @click="handleUpdate(node)"> {{$t('menuInfo.table.operations.update')}} </a> &nbsp;
+              <a class="operation-delete" @click="handleDelete(node)"> {{$t('menuInfo.table.operations.delete')}} </a>
+          </template>
+        </tiny-tree>
+      </div>
+    </div>
+  </div>
+  <div v-if="state.isMenuInfo">
+    <tiny-modal
+      v-model="state.isMenuInfo"
+      :lock-scroll="true"
+      show-header
+      show-footer
+      mask-closable="true"
+      height="auto"
+      width="600"
+      :title="$t('menuInfo.modal.title.info')"
+    >
+      <template #default>
+        <tiny-layout>
+          <tiny-form
+            :model="state.menuInfoData"
+            :rules="rules"
+            label-width="150px"
+            :label-align="true"
+            label-position="left"
+            size="small"
+          >
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.id')"
+                >
+                  <label>{{ state.menuInfoData.id }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.name')"
+                >
+                  <label>{{ state.menuInfoData.label }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.order')"
+                >
+                  <label>{{ state.menuInfoData.order }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.parentId')"
+                >
+                  <label>{{ state.menuInfoData.parentId }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.menuType')"
+                >
+                  <label>{{ state.menuInfoData.menuType }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.icon')"
+                >
+                  <label>{{ state.menuInfoData.icon }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.component')"
+                >
+                  <label>{{ state.menuInfoData.component }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.path')"
+                >
+                  <label>{{ state.menuInfoData.url }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+          </tiny-form>
+        </tiny-layout>
+      </template>
+      <template #footer>
+        <tiny-button @click="handleMenuInfoCancel">取消</tiny-button>
+      </template>
+    </tiny-modal>
+  </div>
+  <div v-if="state.isMenuUpdate">
+    <tiny-modal
+      v-model="state.isMenuUpdate"
+      :lock-scroll="true"
+      show-header
+      show-footer
+      mask-closable="true"
+      height="auto"
+      width="600"
+      :title="$t('menuInfo.modal.title.update')"
+    >
+      <template #default>
+        <tiny-layout>
+          <tiny-form
+            :model="state.menuUpdData"
+            :rules="rules"
+            label-width="150px"
+            :label-align="true"
+            label-position="left"
+            size="small"
+          >
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.id')"
+                >
+                  <label>{{ state.menuUpdData.id }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.name')"
+                  prop="label"
+                >
+                  <tiny-input v-model="state.menuUpdData.label"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.order')"
+                  prop="order"
+                >
+                  <tiny-input v-model="state.menuUpdData.order"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.parentId')"
+                  prop="parentId"
+                >
+                  <tiny-select
+                    v-model="state.menuUpdData.parentId"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    value-field="id"
+                    text-field="label"
+                    render-type="tree"
+                    :tree-op="state.menuData"
+                  >
+                  </tiny-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.menuType')"
+                  prop="menuType"
+                >
+                  <tiny-input v-model="state.menuUpdData.menuType"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.icon')"
+                  prop="icon"
+                >
+                  <tiny-input v-model="state.menuUpdData.icon"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.component')"
+                  prop="component"
+                >
+                  <tiny-input v-model="state.menuUpdData.component"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.path')"
+                  prop="url"
+                >
+                  <tiny-input v-model="state.menuUpdData.url"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+          </tiny-form>
+        </tiny-layout>
+      </template>
+      <template #footer>
+        <tiny-button type="primary" @click="handleMenuUpdateSubmit">确定</tiny-button>
+        <tiny-button @click="handleMenuUpdateCancel">取消</tiny-button>
+      </template>
+    </tiny-modal>
+  </div>
+  <div v-if="state.isMenuAdd">
+    <tiny-modal
+      v-model="state.isMenuAdd"
+      :lock-scroll="true"
+      show-header
+      show-footer
+      mask-closable="true"
+      height=auto
+      width="600"
+      :title="$t('menuInfo.modal.title.add')"
+    >
+      <template #default>
+        <tiny-layout>
+          <tiny-form
+            :model="state.menuAddData"
+            :rules="rules"
+            label-width="150px"
+            :label-align="true"
+            label-position="left"
+            size="small"
+          >
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.name')"
+                  prop="label"
+                >
+                  <tiny-input v-model="state.menuAddData.label"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.order')"
+                  prop="order"
+                >
+                  <tiny-input v-model="state.menuAddData.order"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.parentId')"
+                  prop="parentId"
+                >
+                  <tiny-select
+                    v-model="state.menuAddData.parentId"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    value-field="id"
+                    text-field="label"
+                    render-type="tree"
+                    :tree-op="state.menuData"
+                  >
+                  </tiny-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.menuType')"
+                  prop="menuType"
+                >
+                  <tiny-input v-model="state.menuAddData.menuType"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.icon')"
+                  prop="icon"
+                >
+                  <tiny-input v-model="state.menuAddData.icon"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.component')"
+                  prop="component"
+                >
+                  <tiny-input v-model="state.menuAddData.component"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('menuInfo.table.path')"
+                  prop="url"
+                >
+                  <tiny-input v-model="state.menuAddData.url"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+          </tiny-form>
+        </tiny-layout>
+      </template>
+      <template #footer>
+        <tiny-button type="primary" @click="handleMenuAddSubmit">确定</tiny-button>
+        <tiny-button @click="handleMenuAddCancel">取消</tiny-button>
+      </template>
+    </tiny-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, onMounted, watch, computed} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {
+  Modal as TinyModal,
+  Button as TinyButton,
+  Form as TinyForm,
+  FormItem as TinyFormItem,
+  Row as TinyRow,
+  Col as TinyCol,
+  Input as TinyInput, Modal,
+  BaseSelect as TinyBaseSelect,
+  Select as TinySelect,
+  Option as TinyOption,
+  Tree as TinyTree,
+} from '@opentiny/vue';
+import {IconChevronDown} from '@opentiny/vue-icon';
+import {useUserStore} from '@/store';
+import {getAllMenu, updateMenu ,createMenu, deleteMenu} from '@/api/menu';
+import {getAllPermission} from "@/api/permission";
+import { useRouter } from 'vue-router';
+import {getSimpleDate} from "@/utils/time";
+import {updateUserInfo} from "@/api/user";
+
+const router = useRouter();
+
+const {t} = useI18n();
+
+const treeRef = ref();
+
+// 加载效果
+const state = reactive<{
+  tableData: any;
+  menuData:  any;
+  menuUpdData: any;
+  menuAddData: any;
+  menuInfoData: any;
+  isMenuUpdate: boolean;
+  isMenuAdd: boolean;
+  isMenuInfo: boolean;
+}>({
+  tableData: [] as any,
+  menuData: {} as any,
+  menuUpdData: {} as any,
+  menuAddData: {} as any,
+  menuInfoData: {} as any,
+  isMenuAdd: false,
+  isMenuUpdate: false,
+  isMenuInfo: false,
+});
+
+// 变量设置
+const userStore = useUserStore();
+
+// 校验规则
+const rulesType = {
+  required: true,
+  trigger: 'blur',
+};
+const rulesSelect = {
+  required: true,
+  message: '必选',
+  trigger: 'blur',
+};
+const rules = computed(() => {
+  return {
+    label: [rulesType],
+    order: [rulesType],
+    menuType: [rulesType],
+    icon: [rulesType],
+    component: [rulesType],
+    url: [rulesType],
+  };
+});
+
+// 初始化请求数据
+onMounted(() => {
+  fetchMenuData();
+});
+
+// 请求数据接口方法
+async function fetchMenuData() {
+  const {data} = await getAllMenu();
+  state.tableData = data;
+};
+
+
+async function handleDelete (node: any){
+  if(node.data.parentId === null){
+    node.data.parentId = -1
+  }
+  try {
+    await deleteMenu(node.data.id, node.data.parentId);
+    TinyModal.message({
+      message: '已删除',
+      status: 'success',
+    });
+    await fetchMenuData();
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = error.response.data.message || '未知错误';
+      Modal.message({
+        message: errorMessage,
+        status: 'error',
+      });
+    }
+  }
+}
+
+const handleUpdate = (node: any) => {
+  state.isMenuUpdate = true;
+  state.menuUpdData = node.data;
+  state.menuData = ref({
+    data: state.tableData,
+  })
+}
+
+const handleMenuUpdateCancel =()=>{
+  state.isMenuUpdate = false;
+  state.menuUpdData = {} as any;
+}
+
+const handleCheck = (node: any) => {
+  state.isMenuInfo = true;
+  state.menuInfoData = node.data;
+}
+
+const handleMenuInfoCancel = () => {
+  state.isMenuInfo = false;
+  state.menuInfoData = {} as any;
+}
+
+async function handleMenuUpdateSubmit(){
+  let data = state.menuUpdData;
+  let newTemp = {
+    id: data.id,
+    name: data.label,
+    order: data.order,
+    parentId: data.parentId,
+    menuType: data.menuType,
+    icon: data.icon,
+    component: data.component,
+    path: data.url,
+  };
+  if(newTemp.id === newTemp.parentId){
+    Modal.message({
+      message: t('menuInfo.modal.message.error'),
+      status: 'error',
+    });
+  }else{
+    try {
+      await updateMenu(newTemp);
+      Modal.message({
+        message: t('baseForm.form.submit.success'),
+        status: 'success',
+      });
+      state.isMenuUpdate = false;
+      state.menuUpdData = {} as any;
+      await fetchMenuData();
+    } catch (error) {
+      if (error.response && error.response.data) {
+        const errorMessage = error.response.data.message || '未知错误';
+        Modal.message({
+          message: errorMessage,
+          status: 'error',
+        });
+      }
+    }
+  }
+}
+
+function handleAddMenu() {
+  state.isMenuAdd = true;
+  state.menuData = ref({
+    data: state.tableData,
+  })
+}
+
+async function handleMenuAddSubmit() {
+  let data = state.menuAddData;
+  let newTemp = {
+    name: data.label,
+    order: data.order,
+    parentId: data.parentId,
+    menuType: data.menuType,
+    icon: data.icon,
+    component: data.component,
+    path: data.url,
+  };
+  try {
+    await createMenu(newTemp);
+    Modal.message({
+      message: t('baseForm.form.submit.success'),
+      status: 'success',
+    });
+    state.isMenuAdd = false;
+    state.menuAddData = {} as any;
+    await fetchMenuData();
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = error.response.data.message || '未知错误';
+      Modal.message({
+        message: errorMessage,
+        status: 'error',
+      });
+    }
+  }
+}
+
+async function handleMenuAddCancel() {
+  state.isMenuAdd = false;
+  state.menuAddData = {} as any;
+}
+
+</script>
+
+<style scoped lang="less">
+#contain {
+  height: 100%;
+  padding: 15px;
+  overflow: hidden;
+}
+
+.menu-add-btn{
+  padding: 10px 0 10px 10px;
+}
+
+.table {
+  padding-bottom: 20px;
+  background-color: #fff;
+}
+
+.operation {
+
+  &-delete {
+    color: red;
+    padding-right: 10px;
+  }
+
+  &-update {
+    padding-right: 5px;
+    color: #1890ff;
+  }
+
+  &-info {
+    color: orange;
+    padding-right: 10px;
+  }
+}
+
+
+</style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/menu/info/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/menu/info/index.vue
new file mode 100644
index 00000000..4164be0e
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/menu/info/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.menu', 'menu.menu.info']" />
+    <div class="container-info">
+      <div class="general-card">
+        <div class="general-content">
+          <info-tab></info-tab>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import infoTab from './components/info-tab.vue';
+</script>
+
+<style scoped lang="less">
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+  .container-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: calc(100% - 60px);
+    margin: 0 auto;
+
+    .general-card {
+      flex: 1 1 auto;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      border-radius: 10px;
+
+      .general-top {
+        display: flex;
+        min-height: 178px;
+        margin-bottom: 20px;
+        overflow: hidden;
+        background-image: url('@/assets/images/blue-bg.png');
+        background-size: 100% 100%;
+        border-radius: 4px;
+        box-shadow: 0 0 8px 8px rgba(169, 174, 184, 0.05);
+      }
+
+      .general-content {
+        height: calc(100% - 198px);
+        position: relative;
+        color: black;
+        font-size: medium;
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 0 8px 8px rgba(169, 174, 184, 0.05);
+        overflow-y: auto;
+      }
+    }
+  }
+</style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/menu/info/locale/en-US.ts b/packages/toolkits/pro/template/tinyvue/src/views/menu/info/locale/en-US.ts
new file mode 100644
index 00000000..4c7a69a0
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/menu/info/locale/en-US.ts
@@ -0,0 +1,20 @@
+export default {
+  'menu.allMenu.info': 'All Menu Info',
+  'menuInfo.table.id': 'ID',
+  'menuInfo.table.name': 'Name',
+  'menuInfo.table.order': 'Order',
+  'menuInfo.table.parentId': 'ParentID',
+  'menuInfo.table.menuType': 'MenuType',
+  'menuInfo.table.icon': 'Icon',
+  'menuInfo.table.component': 'Component',
+  'menuInfo.table.path': 'Path',
+  'menuInfo.table.operations': 'Operation',
+  'menuInfo.table.operations.info': 'Detail',
+  'menuInfo.table.operations.update': 'Update',
+  'menuInfo.table.operations.delete': 'Delete',
+  'menuInfo.modal.title.info': 'Menu Detail',
+  'menuInfo.modal.title.update': 'Update Menu',
+  'menuInfo.modal.title.add': 'Add Menu',
+  'menuInfo.modal.message.error': 'ParentId is not as same as id',
+  'menuInfo.modal.message.notNull': 'Not Null',
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/menu/info/locale/zh-CN.ts b/packages/toolkits/pro/template/tinyvue/src/views/menu/info/locale/zh-CN.ts
new file mode 100644
index 00000000..13e42383
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/menu/info/locale/zh-CN.ts
@@ -0,0 +1,21 @@
+export default {
+  'menu.allMenu.info': '查看菜单',
+  'menuInfo.table.id': 'ID',
+  'menuInfo.table.name': '名称',
+  'menuInfo.table.order': '优先级',
+  'menuInfo.table.parentId': '父菜单ID',
+  'menuInfo.table.menuType': '菜单类型',
+  'menuInfo.table.icon': '图标',
+  'menuInfo.table.component': '组件',
+  'menuInfo.table.path': '路径',
+  'menuInfo.table.operations': '操作',
+  'menuInfo.table.operations.info': '查看',
+  'menuInfo.table.operations.update': '修改',
+  'menuInfo.table.operations.delete': '删除',
+  'menuInfo.modal.title.info': '查看菜单',
+  'menuInfo.modal.title.update': '修改菜单',
+  'menuInfo.modal.title.add': '添加菜单',
+  'menuInfo.modal.message.error': 'parentId不能和id相同',
+  'menuInfo.modal.message.notNull': '不能为空',
+
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue b/packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue
index 88f53dfb..81cd69bb 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue
@@ -2,7 +2,7 @@
   <div class="tiny-fullscreen-scroll">
     <div class="tiny-fullscreen-wrapper">
       <div class="permission-add-btn">
-        <tiny-button type="primary" @click="handleAddPermission">添加权限</tiny-button>
+        <tiny-button type="primary" @click="handleAddPermission">{{ $t('permissionInfo.modal.title.add') }}</tiny-button>
       </div>
       <div class="table">
         <tiny-grid ref="expandGrid"
@@ -54,7 +54,7 @@
       show-header
       show-footer
       mask-closable="true"
-      height="350"
+      height="auto"
       width="600"
       :title="$t('permissionInfo.modal.title.update')"
     >
@@ -114,7 +114,7 @@
       show-header
       show-footer
       mask-closable="true"
-      height="350"
+      height="auto"
       width="600"
       :title="$t('permissionInfo.modal.title.add')"
     >
@@ -237,6 +237,7 @@ async function handleDelete (id: string){
     });
     state.isPermissionUpdate = false;
     state.permissionUpdData = {} as any;
+    await fetchData();
   } catch (error) {
     if (error.response && error.response.data) {
       const errorMessage = error.response.data.message || '未知错误';
@@ -273,6 +274,7 @@ async function handlePermissionUpdateSubmit(){
     });
     state.isPermissionUpdate = false;
     state.permissionUpdData = {} as any;
+    await fetchData();
   } catch (error) {
     if (error.response && error.response.data) {
       const errorMessage = error.response.data.message || '未知错误';
@@ -291,7 +293,6 @@ function handleAddPermission() {
 async function handlePermissionAddSubmit() {
   let data = state.permissionAddData;
   let newTemp = {
-    id: data.id,
     name: data.name,
     desc: data.desc,
   };
@@ -303,6 +304,7 @@ async function handlePermissionAddSubmit() {
     });
     state.isPermissionAdd = false;
     state.permissionAddData = {} as any;
+    await fetchData();
   } catch (error) {
     if (error.response && error.response.data) {
       const errorMessage = error.response.data.message || '未知错误';
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/role/index.vue
new file mode 100644
index 00000000..6c71efda
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup></script>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue b/packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue
new file mode 100644
index 00000000..c94674ef
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue
@@ -0,0 +1,529 @@
+<template>
+  <div class="tiny-fullscreen-scroll">
+    <div class="tiny-fullscreen-wrapper">
+      <div class="role-add-btn">
+        <tiny-button type="primary" @click="handleAddRole">{{ $t('roleInfo.modal.title.add') }}</tiny-button>
+      </div>
+      <div class="table">
+        <tiny-grid ref="expandGrid"
+                   :data="state.tableData"
+                   :auto-resize="true"
+        >
+          <tiny-grid-column type="index" width="60"></tiny-grid-column>
+          <tiny-grid-column type="expand" width="60">
+            <template #default="data">
+              <ul>
+                <li>
+                  <span>{{ $t('roleInfo.table.id') }}:</span>
+                  <span>{{ $t(`${data.row.id}`) }}</span>
+                </li>
+                <li>
+                  <span>{{ $t('roleInfo.table.name') }}:</span>
+                  <span>{{ $t(`${data.row.name}`) }}</span>
+                </li>
+                <li>
+                  <span>{{ $t('roleInfo.table.desc') }}:</span>
+                  <div v-for="item in data.row.permission" :key="item.id">
+                    <span>{{ $t('permissionInfo.table.id')}}:{{ $t(`${item.id}`) }}&nbsp;
+                        {{ $t('permissionInfo.table.name')}}:{{ $t(`${item.name}`) }}&nbsp;
+                        {{ $t('permissionInfo.table.desc')}}:{{ $t(`${item.desc}`) }}</span>
+                  </div>
+                </li>
+                <li>
+                  <tiny-tree
+                    :data="data.row.menuTree"
+                    :size="medium"
+                    :indent="18"
+                    default-expand-all
+                  ></tiny-tree>
+                </li>
+              </ul>
+            </template>
+          </tiny-grid-column>
+          <tiny-grid-column
+            field="name"
+            :title="$t('roleInfo.table.id')"
+          >
+            <template #default="data">
+              <span>{{ $t(`${data.row.id}`) }}</span>
+            </template>
+          </tiny-grid-column>
+          <tiny-grid-column
+            field="time"
+            :title="$t('roleInfo.table.name')"
+          >
+            <template #default="data">
+              <span>{{ $t(`${data.row.name}`) }}</span>
+            </template>
+          </tiny-grid-column>
+          <tiny-grid-column field="type" :title="$t('roleInfo.table.desc')">
+            <template #default="data">
+              <div v-for="item in data.row.permission" :key="item.id">
+                    <span>{{ $t(`${item.name}`) }}&nbsp;</span>
+              </div>
+            </template>
+          </tiny-grid-column>
+          <tiny-grid-column field="type" :title="$t('roleInfo.table.menu')">
+            <template #default="data">
+              <tiny-tree
+                :data="data.row.menuTree"
+                :size="medium"
+                :indent="18"
+              ></tiny-tree>
+            </template>
+          </tiny-grid-column>
+          <tiny-grid-column
+            :title="$t('roleInfo.table.operations')"
+            align="center"
+          >
+            <template v-slot="data">
+              <a class="operation-update" @click="handleUpdate(data.row.id)">
+                {{ $t('roleInfo.table.operations.update') }}
+              </a>
+              <a class="operation-delete" @click="handleDelete(data.row.id)">
+                {{ $t('roleInfo.table.operations.delete') }}
+              </a>
+            </template>
+          </tiny-grid-column>
+        </tiny-grid>
+      </div>
+    </div>
+  </div>
+  <div v-if="state.isRoleUpdate">
+    <tiny-modal
+      v-model="state.isRoleUpdate"
+      :lock-scroll="true"
+      show-header
+      show-footer
+      mask-closable="true"
+      height="auto"
+      width="600"
+      :title="$t('roleInfo.modal.title.update')"
+    >
+      <template #default>
+        <tiny-layout>
+          <tiny-form
+            :model="state.roleUpdData"
+            :rules="rules"
+            label-width="150px"
+            :label-align="true"
+            label-position="left"
+            size="small"
+          >
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.id')"
+                >
+                  <label>{{ state.roleUpdData.id }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.name')"
+                  prop="name"
+                >
+                  <tiny-input v-model="state.roleUpdData.name"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.desc')"
+                  prop="desc"
+                >
+                  <tiny-base-select
+                    v-model="state.roleUpdData.desc"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    multiple
+                  >
+                    <tiny-option
+                      v-for="item in (state.permissionData as any)"
+                      :key="item.id"
+                      :label="$t(item.name)"
+                      :value="item.id"
+                    ></tiny-option>
+                  </tiny-base-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.menu')"
+                  prop="menu"
+                >
+                  <tiny-select
+                    v-model="state.roleUpdData.menus"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    multiple
+                    value-field="id"
+                    text-field="label"
+                    render-type="tree"
+                    :tree-op="state.menuOptionData"
+                  >
+                  </tiny-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+          </tiny-form>
+        </tiny-layout>
+      </template>
+      <template #footer>
+        <tiny-button type="primary" @click="handleRoleUpdateSubmit">确定</tiny-button>
+        <tiny-button @click="handleRoleUpdateCancel">取消</tiny-button>
+      </template>
+    </tiny-modal>
+  </div>
+  <div v-if="state.isRoleAdd">
+    <tiny-modal
+      v-model="state.isRoleAdd"
+      :lock-scroll="true"
+      show-header
+      show-footer
+      mask-closable="true"
+      height="auto"
+      width="600"
+      :title="$t('roleInfo.modal.title.add')"
+    >
+      <template #default>
+        <tiny-layout>
+          <tiny-form
+            :model="state.roleAddData"
+            :rules="rules"
+            label-width="150px"
+            :label-align="true"
+            label-position="left"
+            size="small"
+          >
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.name')"
+                  prop="name"
+                >
+                  <tiny-input v-model="state.roleAddData.name"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.desc')"
+                  prop="desc"
+                >
+                  <tiny-base-select
+                    v-model="state.roleAddData.desc"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    multiple
+                  >
+                    <tiny-option
+                      v-for="item in (state.permissionData as any)"
+                      :key="item.id"
+                      :label="$t(item.name)"
+                      :value="item.id"
+                    ></tiny-option>
+                  </tiny-base-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.menu')"
+                  prop="menu"
+                >
+                  <tiny-select
+                    v-model="state.roleAddData.menus"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    multiple
+                    value-field="id"
+                    text-field="label"
+                    render-type="tree"
+                    :tree-op="state.menuOptionData"
+                  >
+                  </tiny-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+          </tiny-form>
+        </tiny-layout>
+      </template>
+      <template #footer>
+        <tiny-button type="primary" @click="handleRoleAddSubmit">确定</tiny-button>
+        <tiny-button @click="handleRoleAddCancel">取消</tiny-button>
+      </template>
+    </tiny-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, onMounted, watch, computed} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {
+  Tabs as TinyTabs,
+  TabItem as TinyTabItem,
+  Loading,
+  GridColumn as TinyGridColumn,
+  Grid as TinyGrid, Pager as TinyPager, Modal as TinyModal,
+  Button as TinyButton,
+  Form as TinyForm,
+  FormItem as TinyFormItem,
+  Row as TinyRow,
+  Col as TinyCol,
+  Input as TinyInput, Modal,
+  BaseSelect as TinyBaseSelect,
+  Select as TinySelect,
+  Option as TinyOption,
+  Tree as TinyTree,
+} from '@opentiny/vue';
+import {IconChevronDown} from '@opentiny/vue-icon';
+import {useUserStore} from '@/store';
+import {getAllRoleDetail, updateRole ,createRole, deleteRole} from '@/api/role';
+import {getAllPermission} from "@/api/permission";
+import {getAllMenu} from "@/api/menu";
+import { useRouter } from 'vue-router';
+import {getSimpleDate} from "@/utils/time";
+import {updateUserInfo} from "@/api/user";
+
+const router = useRouter();
+
+const {t} = useI18n();
+
+// 加载效果
+const state = reactive<{
+  tableData: any;
+  permissionData: any;
+  menuData:  any;
+  menuOptionData: any;
+  roleUpdData: any;
+  roleAddData: any;
+  isRoleUpdate: boolean;
+  isRoleAdd: boolean;
+}>({
+  tableData: [] as any,
+  permissionData: [] as any,
+  menuData: {} as any,
+  menuOptionData: {} as any,
+  roleUpdData: {} as any,
+  roleAddData: {} as any,
+  isRoleAdd: false,
+  isRoleUpdate: false,
+});
+
+// 变量设置
+const userStore = useUserStore();
+
+// 校验规则
+const rulesType = {
+  required: true,
+  trigger: 'blur',
+};
+const rulesSelect = {
+  required: true,
+  message: '必选',
+  trigger: 'blur',
+};
+const rules = computed(() => {
+  return {
+    name: [rulesType],
+    desc: [rulesSelect],
+    menu: [rulesSelect]
+  };
+});
+
+// 初始化请求数据
+onMounted(() => {
+  fetchRoleData();
+  fetchPermissionData();
+  fetchMenuData();
+});
+
+// 请求数据接口方法
+async function fetchRoleData() {
+  const {data} = await getAllRoleDetail();
+  for(let i = 0; i < data.roleInfo.length; i+=1){
+    data.roleInfo[i].menuTree = data.menuTree[i]
+  }
+  state.tableData = data.roleInfo
+};
+
+async function fetchPermissionData() {
+  const {data} = await getAllPermission();
+  state.permissionData = data;
+};
+
+async function fetchMenuData() {
+  const {data} = await getAllMenu();
+  state.menuData = data;
+};
+
+async function handleDelete (id: string){
+  try {
+    await deleteRole(id);
+    TinyModal.message({
+      message: '已删除',
+      status: 'success',
+    });
+    state.isRoleUpdate = false;
+    state.roleUpdData = {} as any;
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = error.response.data.message || '未知错误';
+      Modal.message({
+        message: errorMessage,
+        status: 'error',
+      });
+    }
+  }
+}
+
+async function convertMenu(data: any){
+  let menu = [] as any;
+  for (let j = 0; j < data.menus.length; j+=1){
+    menu.push(data.menus[j].id)
+    if(data.menus[j].children !== null){
+      convertMenu(data.menus[j].children)
+    }
+  }
+  return menu;
+}
+
+const handleUpdate = (id: string) => {
+  state.isRoleUpdate = true;
+  let data = state.tableData[id - 1];
+  let permission = [] as any;
+  for (let i = 0; i < data.permission.length; i+=1){
+    permission.push(data.permission[i].id)
+  }
+  let menu = [] as any;
+  for (let j = 0; j < data.menus.length; j+=1){
+    menu.push(data.menus[j].id)
+  }
+  state.roleUpdData = {
+    id: data.id,
+    name: data.name,
+    menus: menu,
+    desc: permission,
+  }
+  state.menuOptionData = ref({
+    data: state.menuData
+  })
+}
+
+const handleRoleUpdateCancel =()=>{
+  state.isRoleUpdate = false;
+  state.roleUpdData = {} as any;
+}
+
+async function handleRoleUpdateSubmit(){
+  let data = state.roleUpdData;
+  let newTemp = {
+    id: data.id,
+    name: data.name,
+    permissionIds: data.desc,
+    menuIds:data.menus,
+  };
+  try {
+    await updateRole(newTemp);
+    Modal.message({
+      message: t('baseForm.form.submit.success'),
+      status: 'success',
+    });
+    state.isRoleUpdate = false;
+    state.roleUpdData = {} as any;
+    await fetchRoleData();
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = error.response.data.message || '未知错误';
+      Modal.message({
+        message: errorMessage,
+        status: 'error',
+      });
+    }
+  }
+}
+
+function handleAddRole() {
+  state.isRoleAdd = true;
+  state.menuOptionData = ref({
+    data: state.menuData
+  })
+}
+
+async function handleRoleAddSubmit() {
+  let data = state.roleAddData;
+  let newTemp = {
+    name: data.name,
+    permissionIds: data.desc,
+    menuIds:data.menus,
+  };
+  try {
+    await createRole(newTemp);
+    Modal.message({
+      message: t('baseForm.form.submit.success'),
+      status: 'success',
+    });
+    state.isRoleAdd = false;
+    state.roleAddData = {} as any;
+    await fetchRoleData();
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = error.response.data.message || '未知错误';
+      Modal.message({
+        message: errorMessage,
+        status: 'error',
+      });
+    }
+  }
+}
+
+async function handleRoleAddCancel() {
+  state.isRoleAdd = false;
+  state.roleAddData = {} as any;
+}
+
+</script>
+
+<style scoped lang="less">
+#contain {
+  height: 100%;
+  padding: 15px;
+  overflow: hidden;
+}
+
+.role-add-btn{
+  padding: 10px 0 10px 10px;
+}
+
+.table {
+  padding-bottom: 20px;
+  background-color: #fff;
+}
+
+.operation {
+
+  &-delete {
+    padding-right: 5px;
+    color: red;
+  }
+
+  &-update {
+    padding-right: 5px;
+    color: #1890ff;
+  }
+
+  &-pwd-update {
+    color: orange;
+  }
+}
+
+
+</style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/role/info/index.vue
new file mode 100644
index 00000000..5ceec97d
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/info/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.role', 'menu.role.info']" />
+    <div class="container-info">
+      <div class="general-card">
+        <div class="general-content">
+          <info-tab></info-tab>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import infoTab from './components/info-tab.vue';
+</script>
+
+<style scoped lang="less">
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+  .container-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: calc(100% - 60px);
+    margin: 0 auto;
+
+    .general-card {
+      flex: 1 1 auto;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      border-radius: 10px;
+
+      .general-top {
+        display: flex;
+        min-height: 178px;
+        margin-bottom: 20px;
+        overflow: hidden;
+        background-image: url('@/assets/images/blue-bg.png');
+        background-size: 100% 100%;
+        border-radius: 4px;
+        box-shadow: 0 0 8px 8px rgba(169, 174, 184, 0.05);
+      }
+
+      .general-content {
+        height: calc(100% - 198px);
+        position: relative;
+        color: black;
+        font-size: medium;
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 0 8px 8px rgba(169, 174, 184, 0.05);
+        overflow-y: auto;
+      }
+    }
+  }
+</style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/en-US.ts b/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/en-US.ts
new file mode 100644
index 00000000..c5e62c6d
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/en-US.ts
@@ -0,0 +1,18 @@
+export default {
+  'menu.allRole.info': 'All Role Info',
+  'roleInfo.table.id': 'ID',
+  'roleInfo.table.name': 'Name',
+  'roleInfo.table.desc': 'Desc',
+  'roleInfo.table.menu': 'Menu',
+  'roleInfo.table.operations': 'Operation',
+  'roleInfo.table.operations.update': 'Update',
+  'roleInfo.table.operations.delete': 'Delete',
+  'roleInfo.modal.title.update': 'Update Role',
+  'roleInfo.modal.title.add': 'Add Role',
+  'roleInfo.modal.input.id': 'ID',
+  'roleInfo.modal.input.name': 'Name',
+  'roleInfo.modal.input.desc': 'Desc',
+  'roleInfo.modal.input.menu': 'Menu',
+  'roleInfo.modal.message.error': 'Error',
+  'roleInfo.modal.message.notNull': 'Not Null',
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/zh-CN.ts b/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/zh-CN.ts
new file mode 100644
index 00000000..9c48c5e1
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/zh-CN.ts
@@ -0,0 +1,18 @@
+export default {
+  'menu.allRole.info': '查看权限',
+  'roleInfo.table.id': 'ID',
+  'roleInfo.table.name': '名称',
+  'roleInfo.table.desc': '权限',
+  'roleInfo.table.menu': '菜单',
+  'roleInfo.table.operations': '操作',
+  'roleInfo.table.operations.update': '修改',
+  'roleInfo.table.operations.delete': '删除',
+  'roleInfo.modal.title.update': '修改角色',
+  'roleInfo.modal.title.add': '添加角色',
+  'roleInfo.modal.input.id': 'ID',
+  'roleInfo.modal.input.name': '名称',
+  'roleInfo.modal.input.desc': '权限',
+  'roleInfo.modal.input.menu': '菜单',
+  'roleInfo.modal.message.error': '错误',
+  'roleInfo.modal.message.notNull': '不能为空',
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/userManager/info/components/info-tab.vue b/packages/toolkits/pro/template/tinyvue/src/views/userManager/info/components/info-tab.vue
index 4ed20dd4..b669f356 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/userManager/info/components/info-tab.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/userManager/info/components/info-tab.vue
@@ -167,7 +167,7 @@
       show-header
       show-footer
       mask-closable="true"
-      height="350"
+      height="auto"
       width="600"
       :title="$t('userInfo.modal.title.pwdUpdate')"
     >
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/userManager/setting/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/userManager/setting/index.vue
index 4286f560..fff3f3f2 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/userManager/setting/index.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/userManager/setting/index.vue
@@ -169,7 +169,7 @@ import {
 import {getSimpleDate} from '@/utils/time';
 import {useRoute, useRouter} from 'vue-router';
 import {getAllUser, getUserInfo, updateUserInfo} from '@/api/user'
-import {getRoles} from '@/api/role'
+import {getAllRole} from '@/api/role'
 
 import headtop from './components/head.vue';
 import setFrom from './components/set-from.vue';
@@ -307,7 +307,7 @@ async function fetchData() {
 }
 
 async function fetchRole(){
-  const {data} = await getRoles();
+  const {data} = await getAllRole();
   state.roleData = data;
 }
 
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/userManager/useradd/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/userManager/useradd/index.vue
index 98b0c394..4561fc74 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/userManager/useradd/index.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/userManager/useradd/index.vue
@@ -180,7 +180,7 @@ import {
 import {getSimpleDate} from '@/utils/time';
 import {useRoute, useRouter} from 'vue-router';
 import {getUserInfo, registerUser, updateUserInfo} from '@/api/user'
-import {getRoles} from '@/api/role'
+import {getAllRole} from '@/api/role'
 
 
 const route = useRoute();
@@ -295,7 +295,7 @@ async function handleSubmit() {
 }
 
 async function fetchRole(){
-  const {data} = await getRoles();
+  const {data} = await getAllRole();
   state.roleData = data;
 }