diff --git a/src/api/v1/power.ts b/src/api/v1/power.ts
new file mode 100644
index 0000000..c9dfd91
--- /dev/null
+++ b/src/api/v1/power.ts
@@ -0,0 +1,30 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/**
+ * 权限---获取权限列表
+ */
+export const fetchGetPowerList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `power/getPowerList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/**
+ * 权限---添加权限
+ */
+export const fetchAddPower = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'power/addPower', { data });
+};
+
+/**
+ * 权限---更新权限
+ */
+export const fetchUpdatePower = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'power/updatePower', { data });
+};
+
+/**
+ * 权限---删除权限
+ */
+export const fetchDeletePower = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'power/deletePower', { data });
+};
diff --git a/src/layout/components/lay-footer/index.vue b/src/layout/components/lay-footer/index.vue
index 7763134..877e323 100644
--- a/src/layout/components/lay-footer/index.vue
+++ b/src/layout/components/lay-footer/index.vue
@@ -1,31 +1,23 @@
 <script lang="ts" setup>
-import { getConfig } from "@/config";
+import { getConfig } from '@/config';
 
-const TITLE = getConfig("Title");
+const TITLE = getConfig('Title');
 </script>
 
 <template>
-  <footer
-    class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
-  >
-    Copyright © 2020-present
-    <a
-      class="hover:text-primary"
-      href="https://github.com/pure-admin"
-      target="_blank"
-    >
-      &nbsp;{{ TITLE }}
-    </a>
-  </footer>
+	<footer class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]">
+		Copyright © 2020-present
+		<a class="hover:text-primary" href="https://github.com/pure-admin" target="_blank"> &nbsp;{{ TITLE }} </a>
+	</footer>
 </template>
 
 <style lang="scss" scoped>
 .layout-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 0 0 8px;
-  font-size: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	padding: 0 0 8px;
+	font-size: 14px;
 }
 </style>
diff --git a/src/layout/components/lay-navbar/index.vue b/src/layout/components/lay-navbar/index.vue
index 760a010..8b2761c 100644
--- a/src/layout/components/lay-navbar/index.vue
+++ b/src/layout/components/lay-navbar/index.vue
@@ -1,191 +1,150 @@
 <script lang="ts" setup>
-import { useNav } from "@/layout/hooks/useNav";
-import LaySearch from "../lay-search/index.vue";
-import LayNotice from "../lay-notice/index.vue";
-import LayNavMix from "../lay-sidebar/NavMix.vue";
-import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
-import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
-import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vue";
-import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
+import { useNav } from '@/layout/hooks/useNav';
+import LaySearch from '../lay-search/index.vue';
+import LayNotice from '../lay-notice/index.vue';
+import LayNavMix from '../lay-sidebar/NavMix.vue';
+import { useTranslationLang } from '@/layout/hooks/useTranslationLang';
+import LaySidebarFullScreen from '../lay-sidebar/components/SidebarFullScreen.vue';
+import LaySidebarBreadCrumb from '../lay-sidebar/components/SidebarBreadCrumb.vue';
+import LaySidebarTopCollapse from '../lay-sidebar/components/SidebarTopCollapse.vue';
 
-import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
-import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
-import Setting from "@iconify-icons/ri/settings-3-line";
-import Check from "@iconify-icons/ep/check";
-import { $t } from "@/plugins/i18n";
+import GlobalizationIcon from '@/assets/svg/globalization.svg?component';
+import LogoutCircleRLine from '@iconify-icons/ri/logout-circle-r-line';
+import Setting from '@iconify-icons/ri/settings-3-line';
+import Check from '@iconify-icons/ep/check';
+import { $t } from '@/plugins/i18n';
 
-const {
-  layout,
-  device,
-  logout,
-  onPanel,
-  pureApp,
-  username,
-  userAvatar,
-  avatarsStyle,
-  toggleSideBar,
-  getDropdownItemStyle,
-  getDropdownItemClass
-} = useNav();
+const { layout, device, logout, onPanel, pureApp, username, userAvatar, avatarsStyle, toggleSideBar, getDropdownItemStyle, getDropdownItemClass } = useNav();
 
 const { t, locale, translationCh, translationEn } = useTranslationLang();
 </script>
 
 <template>
-  <div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
-    <LaySidebarTopCollapse
-      v-if="device === 'mobile'"
-      :is-active="pureApp.sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"
-    />
+	<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
+		<LaySidebarTopCollapse v-if="device === 'mobile'" :is-active="pureApp.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <LaySidebarBreadCrumb
-      v-if="layout !== 'mix' && device !== 'mobile'"
-      class="breadcrumb-container"
-    />
+		<LaySidebarBreadCrumb v-if="layout !== 'mix' && device !== 'mobile'" class="breadcrumb-container" />
 
-    <LayNavMix v-if="layout === 'mix'" />
+		<LayNavMix v-if="layout === 'mix'" />
 
-    <div v-if="layout === 'vertical'" class="vertical-header-right">
-      <!-- 菜单搜索 -->
-      <LaySearch id="header-search" />
-      <!-- 国际化 -->
-      <el-dropdown id="header-translation" trigger="click">
-        <GlobalizationIcon
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
-        />
-        <template #dropdown>
-          <el-dropdown-menu class="translation">
-            <el-dropdown-item
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
-              :style="getDropdownItemStyle(locale, 'zh')"
-              @click="translationCh"
-            >
-              <IconifyIconOffline
-                v-show="locale === 'zh'"
-                :icon="Check"
-                class="check-zh"
-              />
-              简体中文
-            </el-dropdown-item>
-            <el-dropdown-item
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
-              :style="getDropdownItemStyle(locale, 'en')"
-              @click="translationEn"
-            >
-              <span v-show="locale === 'en'" class="check-en">
-                <IconifyIconOffline :icon="Check" />
-              </span>
-              English
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <!-- 全屏 -->
-      <LaySidebarFullScreen id="full-screen" />
-      <!-- 消息通知 -->
-      <LayNotice id="header-notice" />
-      <!-- 退出登录 -->
-      <el-dropdown trigger="click">
-        <span class="el-dropdown-link navbar-bg-hover select-none">
-          <img :src="userAvatar" :style="avatarsStyle" alt="" />
-          <p v-if="username" class="dark:text-white">{{ username }}</p>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu class="logout">
-            <el-dropdown-item @click="logout">
-              <IconifyIconOffline
-                :icon="LogoutCircleRLine"
-                style="margin: 5px"
-              />
-              {{ $t("buttons.pureLoginOut") }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <span
-        :title="$t('buttons.pureOpenSystemSet')"
-        class="set-icon navbar-bg-hover"
-        @click="onPanel"
-      >
-        <IconifyIconOffline :icon="Setting" />
-      </span>
-    </div>
-  </div>
+		<div v-if="layout === 'vertical'" class="vertical-header-right">
+			<!-- 菜单搜索 -->
+			<LaySearch id="header-search" />
+			<!-- 国际化 -->
+			<el-dropdown id="header-translation" trigger="click">
+				<GlobalizationIcon class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none" />
+				<template #dropdown>
+					<el-dropdown-menu class="translation">
+						<el-dropdown-item :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]" :style="getDropdownItemStyle(locale, 'zh')" @click="translationCh">
+							<IconifyIconOffline v-show="locale === 'zh'" :icon="Check" class="check-zh" />
+							简体中文
+						</el-dropdown-item>
+						<el-dropdown-item :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]" :style="getDropdownItemStyle(locale, 'en')" @click="translationEn">
+							<span v-show="locale === 'en'" class="check-en">
+								<IconifyIconOffline :icon="Check" />
+							</span>
+							English
+						</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+			<!-- 全屏 -->
+			<LaySidebarFullScreen id="full-screen" />
+			<!-- 消息通知 -->
+			<LayNotice id="header-notice" />
+			<!-- 退出登录 -->
+			<el-dropdown trigger="click">
+				<span class="el-dropdown-link navbar-bg-hover select-none">
+					<img :src="userAvatar" :style="avatarsStyle" alt="" />
+					<p v-if="username" class="dark:text-white">{{ username }}</p>
+				</span>
+				<template #dropdown>
+					<el-dropdown-menu class="logout">
+						<el-dropdown-item @click="logout">
+							<IconifyIconOffline :icon="LogoutCircleRLine" style="margin: 5px" />
+							{{ $t('buttons.pureLoginOut') }}
+						</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+			<span :title="$t('buttons.pureOpenSystemSet')" class="set-icon navbar-bg-hover" @click="onPanel">
+				<IconifyIconOffline :icon="Setting" />
+			</span>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .navbar {
-  width: 100%;
-  height: 48px;
-  overflow: hidden;
+	width: 100%;
+	height: 48px;
+	overflow: hidden;
 
-  .hamburger-container {
-    float: left;
-    height: 100%;
-    line-height: 48px;
-    cursor: pointer;
-  }
+	.hamburger-container {
+		float: left;
+		height: 100%;
+		line-height: 48px;
+		cursor: pointer;
+	}
 
-  .vertical-header-right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    min-width: 280px;
-    height: 48px;
-    color: #000000d9;
+	.vertical-header-right {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		min-width: 280px;
+		height: 48px;
+		color: #000000d9;
 
-    .el-dropdown-link {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      height: 48px;
-      padding: 10px;
-      color: #000000d9;
-      cursor: pointer;
+		.el-dropdown-link {
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+			height: 48px;
+			padding: 10px;
+			color: #000000d9;
+			cursor: pointer;
 
-      p {
-        font-size: 14px;
-      }
+			p {
+				font-size: 14px;
+			}
 
-      img {
-        width: 22px;
-        height: 22px;
-        border-radius: 50%;
-      }
-    }
-  }
+			img {
+				width: 22px;
+				height: 22px;
+				border-radius: 50%;
+			}
+		}
+	}
 
-  .breadcrumb-container {
-    float: left;
-    margin-left: 16px;
-  }
+	.breadcrumb-container {
+		float: left;
+		margin-left: 16px;
+	}
 }
 
 .translation {
-  ::v-deep(.el-dropdown-menu__item) {
-    padding: 5px 40px;
-  }
+	::v-deep(.el-dropdown-menu__item) {
+		padding: 5px 40px;
+	}
 
-  .check-zh {
-    position: absolute;
-    left: 20px;
-  }
+	.check-zh {
+		position: absolute;
+		left: 20px;
+	}
 
-  .check-en {
-    position: absolute;
-    left: 20px;
-  }
+	.check-en {
+		position: absolute;
+		left: 20px;
+	}
 }
 
 .logout {
-  width: 120px;
+	width: 120px;
 
-  ::v-deep(.el-dropdown-menu__item) {
-    display: inline-flex;
-    flex-wrap: wrap;
-    min-width: 100%;
-  }
+	::v-deep(.el-dropdown-menu__item) {
+		display: inline-flex;
+		flex-wrap: wrap;
+		min-width: 100%;
+	}
 }
 </style>
diff --git a/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue b/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
index 4d38bd0..ee21128 100644
--- a/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
@@ -1,30 +1,25 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useNav } from "@/layout/hooks/useNav";
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useNav } from '@/layout/hooks/useNav';
 
 const screenIcon = ref();
 const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav();
 
-isFullscreen.value = !!(
-  document.fullscreenElement ||
-  document.webkitFullscreenElement ||
-  document.mozFullScreenElement ||
-  document.msFullscreenElement
-);
+isFullscreen.value = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
 
 watch(
-  isFullscreen,
-  full => {
-    screenIcon.value = full ? ExitFullscreen : Fullscreen;
-  },
-  {
-    immediate: true
-  }
+	isFullscreen,
+	full => {
+		screenIcon.value = full ? ExitFullscreen : Fullscreen;
+	},
+	{
+		immediate: true,
+	},
 );
 </script>
 
 <template>
-  <span class="fullscreen-icon navbar-bg-hover" @click="toggle">
-    <IconifyIconOffline :icon="screenIcon" />
-  </span>
+	<span class="fullscreen-icon navbar-bg-hover" @click="toggle">
+		<IconifyIconOffline :icon="screenIcon" />
+	</span>
 </template>
diff --git a/src/store/system/power.ts b/src/store/system/power.ts
new file mode 100644
index 0000000..dd6bb59
--- /dev/null
+++ b/src/store/system/power.ts
@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia';
+import { fetchAddPower, fetchDeletePower, fetchGetPowerList, fetchUpdatePower } from '@/api/v1/power';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+
+/**
+ * 权限 Store
+ */
+export const usePowerStore = defineStore('powerStore', {
+	state() {
+		return {
+			// 权限列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// 父级id
+				parentId: undefined,
+				// 权限编码
+				powerCode: undefined,
+				// 权限名称
+				powerName: undefined,
+				// 请求路径
+				requestUrl: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 150,
+				total: 100,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/**
+		 * * 获取权限
+		 */
+		async getPowerList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+
+			// 获取权限列表
+			const result = await fetchGetPowerList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/**
+		 * * 添加权限
+		 */
+		async addPower(data: any) {
+			const result = await fetchAddPower(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 修改权限
+		 */
+		async updatePower(data: any) {
+			const result = await fetchUpdatePower(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 删除权限
+		 */
+		async deletePower(data: any) {
+			const result = await fetchDeletePower(data);
+			return storeMessage(result);
+		},
+	},
+});
diff --git a/src/views/i18n/i18n-setting/utils/columns.tsx b/src/views/i18n/i18n-setting/utils/columns.tsx
index 7c6ea02..91e9ac1 100644
--- a/src/views/i18n/i18n-setting/utils/columns.tsx
+++ b/src/views/i18n/i18n-setting/utils/columns.tsx
@@ -12,8 +12,8 @@ export const columns: TableColumnList = [
 	{ label: $t('i18n.typeName'), prop: 'typeName' },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
-	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
-	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
+	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
+	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
 ];
 
diff --git a/src/views/i18n/i18n-setting/utils/hooks.tsx b/src/views/i18n/i18n-setting/utils/hooks.tsx
index bed17a2..cc114c1 100644
--- a/src/views/i18n/i18n-setting/utils/hooks.tsx
+++ b/src/views/i18n/i18n-setting/utils/hooks.tsx
@@ -1,7 +1,6 @@
 import { h, ref } from 'vue';
 import { userI18nStore } from '@/store/i18n/i18n';
 import { addDialog, closeDialog } from '@/components/BaseDialog/index';
-import { deviceDetection } from '@pureadmin/utils';
 import I18nDialog from '@/views/i18n/i18n-setting/i18n-dialog.vue';
 import type { FormProps } from '@/views/i18n/i18n-setting/utils/types';
 import { $t } from '@/plugins/i18n';
@@ -30,7 +29,6 @@ export const onAdd = () => {
 		width: '30%',
 		props: { formInline: { keyName: '', translation: '', typeName: '' } },
 		draggable: true,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(I18nDialog, { ref: formRef }),
@@ -90,7 +88,6 @@ export const onUpdate = (row: any) => {
 		width: '30%',
 		props: { formInline: { keyName: row.keyName, translation: row.translation, typeName: row.typeName } },
 		draggable: true,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(I18nDialog, { ref: formRef }),
diff --git a/src/views/i18n/i18n-type-setting/utils/columns.tsx b/src/views/i18n/i18n-type-setting/utils/columns.tsx
index 0d04623..46611e8 100644
--- a/src/views/i18n/i18n-type-setting/utils/columns.tsx
+++ b/src/views/i18n/i18n-type-setting/utils/columns.tsx
@@ -10,8 +10,8 @@ export const columns: TableColumnList = [
 	{ label: $t('isDefault'), prop: 'isDefault', slot: 'isDefault' },
 	{ label: $t('table.updateTime'), prop: 'updateTime' },
 	{ label: $t('table.createTime'), prop: 'createTime' },
-	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
-	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
+	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
+	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
 ];
 
diff --git a/src/views/i18n/i18n-type-setting/utils/hooks.tsx b/src/views/i18n/i18n-type-setting/utils/hooks.tsx
index 640fed7..96435d9 100644
--- a/src/views/i18n/i18n-type-setting/utils/hooks.tsx
+++ b/src/views/i18n/i18n-type-setting/utils/hooks.tsx
@@ -1,4 +1,3 @@
-import { deviceDetection } from '@pureadmin/utils';
 import { addDialog } from '@/components/BaseDialog/index';
 import AddI18nType from '@/views/i18n/i18n-type-setting/i18n-type-dialog.vue';
 import { userI18nTypeStore } from '@/store/i18n/i18nType';
@@ -29,7 +28,6 @@ export function onAdd() {
 			formInline: { typeName: '', summary: '', isDefault: false },
 		},
 		draggable: true,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(AddI18nType, { ref: formRef }),
@@ -57,7 +55,6 @@ export function onUpdate(row: any) {
 		width: '30%',
 		props: { formInline: { typeName: row.typeName, summary: row.summary, isDefault: row.isDefault } },
 		draggable: true,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(AddI18nType, { ref: formRef }),
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index ae83565..f4589a6 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -12,6 +12,7 @@ import PureTable from '@pureadmin/table';
 import { columns } from '@/views/system/menu/utils/columns';
 import { userRouterStore } from '@/store/system/router';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 
 const formRef = ref();
 const tableRef = ref();
@@ -97,6 +98,14 @@ onMounted(() => {
 						/>
 					</template>
 
+					<template #createUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
+					</template>
+
+					<template #updateUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
+					</template>
+
 					<template #operation="{ row }">
 						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> 修改 </el-button>
 						<el-button v-show="row.menuType !== 3" :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)"> 新增 </el-button>
diff --git a/src/views/system/menu/utils/columns.tsx b/src/views/system/menu/utils/columns.tsx
index 4d12205..5142664 100644
--- a/src/views/system/menu/utils/columns.tsx
+++ b/src/views/system/menu/utils/columns.tsx
@@ -39,6 +39,10 @@ export const columns: TableColumnList = [
 	},
 	{ label: '排序', prop: 'rank', width: 100 },
 	{ label: '隐藏', prop: 'visible', slot: 'visible', width: 100 },
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
+	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
+	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
 	{ label: '操作', fixed: 'right', width: 210, slot: 'operation' },
 ];
 
diff --git a/src/views/system/menu/utils/hooks.tsx b/src/views/system/menu/utils/hooks.tsx
index 487da45..3cd7887 100644
--- a/src/views/system/menu/utils/hooks.tsx
+++ b/src/views/system/menu/utils/hooks.tsx
@@ -73,7 +73,6 @@ export function onAdd(parentId: any = 0) {
 		width: '45%',
 		draggable: true,
 		closeOnClickModal: false,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		contentRenderer: () => h(editForm, { ref: formRef }),
 		beforeSure: (done, { options }) => {
diff --git a/src/views/system/menuIcon/utils/columns.ts b/src/views/system/menuIcon/utils/columns.ts
index e0eef3a..1697156 100644
--- a/src/views/system/menuIcon/utils/columns.ts
+++ b/src/views/system/menuIcon/utils/columns.ts
@@ -10,8 +10,8 @@ export const columns: TableColumnList = [
 	{ label: $t('menuIcon_iconName'), prop: 'iconName', slot: 'iconName' },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
-	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
-	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
+	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
+	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
 ];
 
diff --git a/src/views/system/menuIcon/utils/hooks.ts b/src/views/system/menuIcon/utils/hooks.ts
index 18ab634..8eb5fce 100644
--- a/src/views/system/menuIcon/utils/hooks.ts
+++ b/src/views/system/menuIcon/utils/hooks.ts
@@ -1,4 +1,3 @@
-import { deviceDetection } from '@pureadmin/utils';
 import { addDialog } from '@/components/BaseDialog/index';
 import MenuIconDialog from '@/views/system/menuIcon/menu-icon-dialog.vue';
 import { useMenuIconStore } from '@/store/system/menuIcon';
@@ -32,7 +31,6 @@ export function onAdd() {
 			},
 		},
 		draggable: true,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(MenuIconDialog, { ref: formRef }),
@@ -64,7 +62,6 @@ export function onUpdate(row: any) {
 			},
 		},
 		draggable: true,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(MenuIconDialog, { ref: formRef }),
diff --git a/src/views/system/power/index.vue b/src/views/system/power/index.vue
new file mode 100644
index 0000000..3c36be7
--- /dev/null
+++ b/src/views/system/power/index.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/system/power/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { onAdd, onDelete, onSearch, onUpdate } from '@/views/system/power/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+import { selectUserinfo } from '@/components/Table/Userinfo/columns';
+import { $t } from '@/plugins/i18n';
+import { usePowerStore } from '@/store/system/power.ts';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+
+const tableRef = ref();
+const formRef = ref();
+const powerStore = usePowerStore();
+
+const resetForm = async formEl => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="powerStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<el-form-item :label="$t('power_parentId')" prop="parentId">
+				<el-input v-model="powerStore.form.parentId" :placeholder="`${$t('input')}${$t('power_parentId')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('power_powerCode')" prop="powerCode">
+				<el-input v-model="powerStore.form.powerCode" :placeholder="`${$t('input')}${$t('power_powerCode')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('power_powerName')" prop="powerName">
+				<el-input v-model="powerStore.form.powerName" :placeholder="`${$t('input')}${$t('power_powerName')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('power_requestUrl')" prop="requestUrl">
+				<el-input v-model="powerStore.form.requestUrl" :placeholder="`${$t('input')}${$t('power_requestUrl')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="powerStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
+				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
+			</el-form-item>
+		</el-form>
+
+		<PureTableBar :columns="columns" title="权限" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加权限</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 45 }"
+					:columns="dynamicColumns"
+					:data="powerStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="powerStore.loading"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+				>
+					<template #createUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
+					</template>
+
+					<template #updateUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
+					</template>
+
+					<template #operation="{ row }">
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
+						<el-popconfirm :title="`是否确认删除 ${row.powerName}数据`" @confirm="onDelete(row)">
+							<template #reference>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>
diff --git a/src/views/system/power/power-dialog.vue b/src/views/system/power/power-dialog.vue
new file mode 100644
index 0000000..4b4cf7d
--- /dev/null
+++ b/src/views/system/power/power-dialog.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/system/power/utils/columns';
+import { FormProps } from '@/views/system/power/utils/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 父级id
+		parentId: undefined,
+		// 权限编码
+		powerCode: undefined,
+		// 权限名称
+		powerName: undefined,
+		// 请求路径
+		requestUrl: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<el-form-item :label="$t('power_parentId')" prop="parentId">
+			<el-input v-model="form.parentId" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('power_powerCode')" prop="powerCode">
+			<el-input v-model="form.powerCode" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('power_powerName')" prop="powerName">
+			<el-input v-model="form.powerName" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('power_requestUrl')" prop="requestUrl">
+			<el-input v-model="form.requestUrl" autocomplete="off" type="text" />
+		</el-form-item>
+	</el-form>
+</template>
diff --git a/src/views/system/power/utils/columns.ts b/src/views/system/power/utils/columns.ts
new file mode 100644
index 0000000..cfdc891
--- /dev/null
+++ b/src/views/system/power/utils/columns.ts
@@ -0,0 +1,32 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'index', index: (index: number) => index + 1 },
+	// { type: 'selection', align: 'left' },
+	{ label: $t('id'), prop: 'id' },
+	// 父级id
+	{ label: $t('power_parentId'), prop: 'parentId' },
+	// 权限编码
+	{ label: $t('power_powerCode'), prop: 'powerCode' },
+	// 权限名称
+	{ label: $t('power_powerName'), prop: 'powerName' },
+	// 请求路径
+	{ label: $t('power_requestUrl'), prop: 'requestUrl' },
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
+	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
+	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
+	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
+];
+
+// 添加规则
+export const rules = reactive({
+	// 权限编码
+	powerCode: [{ required: true, message: `${$t('input')}${$t('power_powerCode')}`, trigger: 'blur' }],
+	// 权限名称
+	powerName: [{ required: true, message: `${$t('input')}${$t('power_powerName')}`, trigger: 'blur' }],
+	// 请求路径
+	requestUrl: [{ required: true, message: `${$t('input')}${$t('power_requestUrl')}`, trigger: 'blur' }],
+});
diff --git a/src/views/system/power/utils/hooks.ts b/src/views/system/power/utils/hooks.ts
new file mode 100644
index 0000000..8f14c10
--- /dev/null
+++ b/src/views/system/power/utils/hooks.ts
@@ -0,0 +1,106 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import PowerDialog from '@/views/system/power/power-dialog.vue';
+import { usePowerStore } from '@/store/system/power.ts';
+import { h, ref } from 'vue';
+import { messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/system/power/utils/types';
+import { $t } from '@/plugins/i18n';
+
+export const formRef = ref();
+const powerStore = usePowerStore();
+
+/**
+ * * 搜索初始化权限
+ */
+export async function onSearch() {
+	powerStore.loading = true;
+	await powerStore.getPowerList();
+	powerStore.loading = false;
+}
+
+/**
+ * * 添加权限
+ */
+export function onAdd() {
+	addDialog({
+		title: `${$t('add_new')}${$t('power')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				parentId: undefined,
+				powerCode: undefined,
+				powerName: undefined,
+				requestUrl: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(PowerDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await powerStore.addPower(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 更新权限
+ * @param row
+ */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('power')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				parentId: row.parentId,
+				powerCode: row.powerCode,
+				powerName: row.powerName,
+				requestUrl: row.requestUrl,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(PowerDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await powerStore.updatePower({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 删除权限
+ */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirm_delete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await powerStore.deletePower([id]);
+	await onSearch();
+};
diff --git a/src/views/system/power/utils/types.ts b/src/views/system/power/utils/types.ts
new file mode 100644
index 0000000..4c4cde3
--- /dev/null
+++ b/src/views/system/power/utils/types.ts
@@ -0,0 +1,16 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 父级id
+	parentId: number;
+	// 权限编码
+	powerCode: string;
+	// 权限名称
+	powerName: string;
+	// 请求路径
+	requestUrl: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}
diff --git a/src/views/system/role/utils/columns.ts b/src/views/system/role/utils/columns.ts
index f9cc0c5..b4bf2d6 100644
--- a/src/views/system/role/utils/columns.ts
+++ b/src/views/system/role/utils/columns.ts
@@ -12,8 +12,8 @@ export const columns: TableColumnList = [
 	{ label: $t('role_description'), prop: 'description' },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
-	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
-	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
+	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
+	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
 ];
 
diff --git a/src/views/system/role/utils/hooks.ts b/src/views/system/role/utils/hooks.ts
index f49fcd9..a5ec341 100644
--- a/src/views/system/role/utils/hooks.ts
+++ b/src/views/system/role/utils/hooks.ts
@@ -1,4 +1,3 @@
-import { deviceDetection } from '@pureadmin/utils';
 import { addDialog } from '@/components/BaseDialog/index';
 import RoleDialog from '@/views/system/role/role-dialog.vue';
 import { useRoleStore } from '@/store/system/role';
@@ -33,7 +32,6 @@ export function onAdd() {
 			},
 		},
 		draggable: true,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(RoleDialog, { ref: formRef }),
@@ -66,7 +64,6 @@ export function onUpdate(row: any) {
 			},
 		},
 		draggable: true,
-		fullscreen: deviceDetection(),
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(RoleDialog, { ref: formRef }),