diff --git a/apps/web/src/pages/system/roles/RoleDetailPanel.spec.tsx b/apps/web/src/pages/system/roles/RoleDetailPanel.spec.tsx
index 5255e43..85215c1 100644
--- a/apps/web/src/pages/system/roles/RoleDetailPanel.spec.tsx
+++ b/apps/web/src/pages/system/roles/RoleDetailPanel.spec.tsx
@@ -160,7 +160,8 @@ describe('角色详情面板', () => {
     renderPanel({ canManage: false });
     expect(screen.queryByText('复制')).toBeNull();
     expect(screen.queryByText('停用')).toBeNull();
-    expect(screen.getByText('编辑角色')).toBeTruthy();
+    expect(screen.queryByText('编辑角色')).toBeNull();
+    expect(screen.getByText('查看角色')).toBeTruthy();
   });
 
   it('未选择角色时展示空态', () => {
diff --git a/apps/web/src/pages/system/roles/RoleDetailPanel.tsx b/apps/web/src/pages/system/roles/RoleDetailPanel.tsx
index 790b7cc..5053a2a 100644
--- a/apps/web/src/pages/system/roles/RoleDetailPanel.tsx
+++ b/apps/web/src/pages/system/roles/RoleDetailPanel.tsx
@@ -2,7 +2,15 @@
 import { Button } from '@douyinfe/semi-ui-19';
 import type { PermissionTree, RoleDetail } from '@lingxi/shared';
 import { ErrorState, PageEmpty, PageSkeleton } from '@lingxi/ui';
-import { IconCopy, IconEdit, IconPause, IconPlay, IconShield, IconStar } from '@lingxi/ui/icons';
+import {
+  IconCopy,
+  IconEdit,
+  IconPause,
+  IconPlay,
+  IconShield,
+  IconStar,
+  IconView,
+} from '@lingxi/ui/icons';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
 
@@ -47,11 +55,15 @@ function RoleAvatar({ status }: { status: 'active' | 'disabled' }): ReactNode {
 function DetailHead({
   role,
   canManage,
+  onEdit,
   onCopy,
   onRename,
   onDisable,
   onEnable,
-}: Pick<RoleDetailPanelProps, 'canManage' | 'onCopy' | 'onRename' | 'onDisable' | 'onEnable'> & {
+}: Pick<
+  RoleDetailPanelProps,
+  'canManage' | 'onEdit' | 'onCopy' | 'onRename' | 'onDisable' | 'onEnable'
+> & {
   role: RoleDetail;
 }): ReactNode {
   return (
@@ -65,47 +77,59 @@ function DetailHead({
         </div>
         <p className="lx-role-detail__desc">{role.description}</p>
       </div>
-      {canManage ? (
-        <div className="lx-role-detail__actions">
-          <Button
-            icon={<IconCopy size={14} />}
-            onClick={() => {
-              onCopy(role);
-            }}
-          >
-            复制
-          </Button>
-          {role.isSystem ? (
+      <div className="lx-role-detail__actions">
+        {canManage ? (
+          <>
             <Button
-              icon={<IconEdit size={14} />}
+              icon={<IconCopy size={14} />}
               onClick={() => {
-                onRename(role);
+                onCopy(role);
               }}
             >
-              改名
+              复制
             </Button>
-          ) : role.status === 'active' ? (
-            <Button
-              type="danger"
-              icon={<IconPause size={14} />}
-              onClick={() => {
-                onDisable(role);
-              }}
-            >
-              停用
-            </Button>
-          ) : (
-            <Button
-              icon={<IconPlay size={14} />}
-              onClick={() => {
-                onEnable(role);
-              }}
-            >
-              启用
-            </Button>
-          )}
-        </div>
-      ) : null}
+            {role.isSystem ? (
+              <Button
+                icon={<IconEdit size={14} />}
+                onClick={() => {
+                  onRename(role);
+                }}
+              >
+                改名
+              </Button>
+            ) : role.status === 'active' ? (
+              <Button
+                type="danger"
+                icon={<IconPause size={14} />}
+                onClick={() => {
+                  onDisable(role);
+                }}
+              >
+                停用
+              </Button>
+            ) : (
+              <Button
+                icon={<IconPlay size={14} />}
+                onClick={() => {
+                  onEnable(role);
+                }}
+              >
+                启用
+              </Button>
+            )}
+          </>
+        ) : null}
+        <Button
+          theme="solid"
+          type="primary"
+          icon={canManage && !role.isSystem ? <IconEdit size={14} /> : <IconView size={14} />}
+          onClick={() => {
+            onEdit(role.id);
+          }}
+        >
+          {canManage && !role.isSystem ? '编辑角色' : '查看角色'}
+        </Button>
+      </div>
     </header>
   );
 }
@@ -300,6 +324,7 @@ export function RoleDetailPanel(props: RoleDetailPanelProps): ReactNode {
           <DetailHead
             role={detail}
             canManage={props.canManage}
+            onEdit={props.onEdit}
             onCopy={props.onCopy}
             onRename={props.onRename}
             onDisable={props.onDisable}
@@ -324,21 +349,6 @@ export function RoleDetailPanel(props: RoleDetailPanelProps): ReactNode {
             <ScopeAndSpecial role={detail} tree={props.tree} />
             <BoundUsers role={detail} />
           </div>
-          <footer className="lx-role-detail__foot">
-            <span className="lx-role-detail__foot-note">
-              {detail.isSystem ? '系统内置角色，不可停用或删除' : '自定义角色，可复制、停用或删除'}
-            </span>
-            <Button
-              theme="solid"
-              type="primary"
-              icon={<IconEdit size={14} />}
-              onClick={() => {
-                props.onEdit(detail.id);
-              }}
-            >
-              编辑角色
-            </Button>
-          </footer>
         </>
       ) : (
         <div className="lx-role-detail__empty">
diff --git a/apps/web/src/styles/roles.css b/apps/web/src/styles/roles.css
index 40b0aeb..5f62eff 100644
--- a/apps/web/src/styles/roles.css
+++ b/apps/web/src/styles/roles.css
@@ -711,25 +711,6 @@
   white-space: nowrap;
 }
 
-.lx-role-detail__foot {
-  display: flex;
-  height: 56px;
-  flex: 0 0 56px;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--lx-space-3);
-  padding: 0 18px;
-  border-top: 1px solid var(--lx-color-border);
-}
-
-.lx-role-detail__foot-note {
-  overflow: hidden;
-  font-size: var(--lx-font-size-xs);
-  color: var(--lx-color-text-tertiary);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 /* ---------- 角色模板（新建页左列） ---------- */
 
 .lx-role-templates {