diff --git a/frontend/src/components/shared/StatCard/StatCard.tsx b/frontend/src/components/shared/StatCard/StatCard.tsx
index 40348ef..92c44c1 100644
--- a/frontend/src/components/shared/StatCard/StatCard.tsx
+++ b/frontend/src/components/shared/StatCard/StatCard.tsx
@@ -53,23 +53,24 @@ function StatCard({
       <div className="stat-card-header">
         <span className="stat-card-title">{title}</span>
         {icon && (
-          <span className="stat-card-icon" style={{ color: themeColor }}>
+          <span className="stat-card-icon" style={{ color: themeColor }} aria-hidden="true">
             {icon}
           </span>
         )}
       </div>
 
       <div className="stat-card-body">
-        <div className="stat-card-value" style={{ color: themeColor }}>
+        <div className="stat-card-value tabular-nums" style={{ color: themeColor }}>
           {value}
           {suffix && <span className="stat-card-suffix">{suffix}</span>}
         </div>
 
         {trend && (
           <div
-            className={`stat-card-trend ${trend.direction === 'up' ? 'trend-up' : 'trend-down'}`}
+            className={`stat-card-trend ${trend.direction === 'up' ? 'trend-up' : 'trend-down'} tabular-nums`}
+            aria-label={`${trend.direction === 'up' ? 'Increase' : 'Decrease'} of ${trend.value}%`}
           >
-            {trend.direction === 'up' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
+            {trend.direction === 'up' ? <ArrowUpOutlined aria-hidden="true" /> : <ArrowDownOutlined aria-hidden="true" />}
             <span>{Math.abs(trend.value)}%</span>
           </div>
         )}
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 0f9ba64..a952c49 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,15 +1,16 @@
-import { Row, Col, Card, Typography, Table, Tag, Space } from "antd";
+import { Row, Col, Card, Typography, Table, Tag, Space, Skeleton, Button } from "antd";
 import { 
   VideoCameraOutlined, 
   DesktopOutlined, 
   UserOutlined, 
   ClockCircleOutlined,
   CheckCircleOutlined,
-  SyncOutlined
+  SyncOutlined,
+  ArrowRightOutlined
 } from "@ant-design/icons";
 import StatCard from "../components/shared/StatCard/StatCard";
 
-const { Title } = Typography;
+const { Title, Text } = Typography;
 
 const recentMeetings = [
   { key: '1', name: '产品周会', type: '转录中', time: '2024-02-10 14:00', duration: '45min', status: 'processing' },
@@ -19,26 +20,54 @@ const recentMeetings = [
 ];
 
 const columns = [
-  { title: '会议名称', dataIndex: 'name', key: 'name' },
-  { title: '开始时间', dataIndex: 'time', key: 'time' },
-  { title: '时长', dataIndex: 'duration', key: 'duration' },
+  { 
+    title: '会议名称', 
+    dataIndex: 'name', 
+    key: 'name',
+    render: (text: string) => <Text strong>{text}</Text>
+  },
+  { 
+    title: '开始时间', 
+    dataIndex: 'time', 
+    key: 'time',
+    className: 'tabular-nums',
+    render: (text: string) => <Text type="secondary">{text}</Text>
+  },
+  { 
+    title: '时长', 
+    dataIndex: 'duration', 
+    key: 'duration',
+    width: 100,
+    className: 'tabular-nums'
+  },
   { 
     title: '状态', 
     dataIndex: 'status', 
     key: 'status',
-    render: (status: string, record: any) => {
-      if (status === 'processing') return <Tag icon={<SyncOutlined spin />} color="processing">转录中</Tag>;
-      if (status === 'success') return <Tag icon={<CheckCircleOutlined />} color="success">已完成</Tag>;
+    width: 120,
+    render: (status: string) => {
+      if (status === 'processing') return <Tag icon={<SyncOutlined spin aria-hidden="true" />} color="processing">转录中</Tag>;
+      if (status === 'success') return <Tag icon={<CheckCircleOutlined aria-hidden="true" />} color="success">已完成</Tag>;
       return <Tag color="default">待开始</Tag>;
     }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 80,
+    render: () => <Button type="link" size="small" icon={<ArrowRightOutlined aria-hidden="true" />} aria-label="查看会议详情" />
   }
 ];
 
 export default function Dashboard() {
   return (
-    <div className="dashboard-page">
-      <div style={{ marginBottom: 24 }}>
-        <Title level={4}>系统总览</Title>
+    <div className="dashboard-page p-6">
+      <div className="mb-6 flex justify-between items-end">
+        <div>
+          <Title level={4} className="mb-1">系统总览</Title>
+          <Text type="secondary">实时监控会议转录状态与系统关键指标</Text>
+        </div>
+        <Button icon={<SyncOutlined aria-hidden="true" />} size="small">刷新数据</Button>
       </div>
       
       <Row gutter={[24, 24]}>
@@ -46,7 +75,7 @@ export default function Dashboard() {
           <StatCard
             title="今日会议"
             value={12}
-            icon={<VideoCameraOutlined />}
+            icon={<VideoCameraOutlined aria-hidden="true" />}
             color="blue"
             trend={{ value: 8, direction: 'up' }}
           />
@@ -55,7 +84,7 @@ export default function Dashboard() {
           <StatCard
             title="活跃设备"
             value={45}
-            icon={<DesktopOutlined />}
+            icon={<DesktopOutlined aria-hidden="true" />}
             color="green"
             trend={{ value: 2, direction: 'up' }}
           />
@@ -65,7 +94,7 @@ export default function Dashboard() {
             title="转录时长"
             value={1280}
             suffix="min"
-            icon={<ClockCircleOutlined />}
+            icon={<ClockCircleOutlined aria-hidden="true" />}
             color="orange"
             trend={{ value: 5, direction: 'down' }}
           />
@@ -74,31 +103,39 @@ export default function Dashboard() {
           <StatCard
             title="总用户数"
             value={320}
-            icon={<UserOutlined />}
+            icon={<UserOutlined aria-hidden="true" />}
             color="purple"
             trend={{ value: 12, direction: 'up' }}
           />
         </Col>
       </Row>
 
-      <Row gutter={[24, 24]} style={{ marginTop: 24 }}>
-        <Col span={16}>
-          <Card title="最近会议" bordered={false} bodyStyle={{ padding: 0 }}>
+      <Row gutter={[24, 24]} className="mt-6">
+        <Col xs={24} xl={16}>
+          <Card 
+            title="最近会议" 
+            bordered={false} 
+            className="shadow-sm"
+            extra={<Button type="link" size="small">查看全部</Button>}
+            styles={{ body: { padding: 0 } }}
+          >
             <Table 
               dataSource={recentMeetings} 
               columns={columns} 
               pagination={false}
               size="middle"
+              className="roles-table"
             />
           </Card>
         </Col>
-        <Col span={8}>
-          <Card title="设备负载" bordered={false}>
-            <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
-              <Space direction="vertical" align="center">
-                <SyncOutlined style={{ fontSize: 48, color: '#f0f0f0' }} />
-                <span>图表加载中...</span>
-              </Space>
+        <Col xs={24} xl={8}>
+          <Card title="设备负载" bordered={false} className="shadow-sm">
+            <div className="flex flex-col items-center justify-center py-12">
+              <Skeleton active paragraph={{ rows: 4 }} />
+              <div className="mt-4 text-gray-400 flex items-center gap-2">
+                <SyncOutlined spin aria-hidden="true" />
+                <span>图表引擎加载中…</span>
+              </div>
             </div>
           </Card>
         </Col>
diff --git a/frontend/src/pages/Devices.tsx b/frontend/src/pages/Devices.tsx
index 73c423b..3d161e1 100644
--- a/frontend/src/pages/Devices.tsx
+++ b/frontend/src/pages/Devices.tsx
@@ -1,50 +1,87 @@
-import { Button, Form, Input, Drawer, Popconfirm, Space, Table, Tag, Select, InputNumber } from "antd";
+import {
+  Button,
+  Form,
+  Input,
+  Drawer,
+  Popconfirm,
+  Space,
+  Table,
+  Tag,
+  Select,
+  Typography,
+  Card,
+  message
+} from "antd";
 import { useEffect, useMemo, useState } from "react";
-import { createDevice, deleteDevice, listDevices, updateDevice } from "../api";
-import type { DeviceInfo } from "../types";
+import { createDevice, deleteDevice, listDevices, updateDevice, listUsers } from "../api";
+import type { DeviceInfo, SysUser } from "../types";
 import { usePermission } from "../hooks/usePermission";
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  DesktopOutlined,
+  UserOutlined
+} from "@ant-design/icons";
+import "./Devices.css";
+
+const { Title, Text } = Typography;
 
 export default function Devices() {
+  const { can } = usePermission();
   const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
   const [data, setData] = useState<DeviceInfo[]>([]);
-  const [query, setQuery] = useState({ userId: "", deviceCode: "", deviceName: "" });
-  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
+  const [users, setUsers] = useState<SysUser[]>([]);
+  
+  // Search state
+  const [searchText, setSearchText] = useState("");
+  
+  // Drawer state
   const [open, setOpen] = useState(false);
   const [editing, setEditing] = useState<DeviceInfo | null>(null);
   const [form] = Form.useForm();
-  const { can } = usePermission();
 
-  const load = async () => {
+  const loadData = async () => {
     setLoading(true);
     try {
-      const list = await listDevices();
-      setData(list || []);
+      const [deviceList, usersList] = await Promise.all([listDevices(), listUsers()]);
+      setData(deviceList || []);
+      setUsers(usersList || []);
+    } catch (e) {
+      message.error("加载数据失败");
     } finally {
       setLoading(false);
     }
   };
 
   useEffect(() => {
-    load();
+    loadData();
   }, []);
 
-  const filtered = useMemo(() => {
-    return data.filter((d) => {
-      const hitUser = query.userId ? String(d.userId).includes(query.userId) : true;
-      const hitCode = query.deviceCode ? d.deviceCode?.includes(query.deviceCode) : true;
-      const hitName = query.deviceName ? (d.deviceName || "").includes(query.deviceName) : true;
-      return hitUser && hitCode && hitName;
-    });
-  }, [data, query]);
+  const userMap = useMemo(() => {
+    const map: Record<number, SysUser> = {};
+    users.forEach(u => map[u.userId] = u);
+    return map;
+  }, [users]);
 
-  const pageData = useMemo(() => {
-    const start = (pagination.current - 1) * pagination.pageSize;
-    return filtered.slice(start, start + pagination.pageSize);
-  }, [filtered, pagination]);
+  const filteredData = useMemo(() => {
+    if (!searchText) return data;
+    const lower = searchText.toLowerCase();
+    return data.filter(d => {
+      const user = userMap[d.userId];
+      return d.deviceCode.toLowerCase().includes(lower) ||
+             (d.deviceName && d.deviceName.toLowerCase().includes(lower)) ||
+             (user && user.displayName.toLowerCase().includes(lower)) ||
+             String(d.userId).includes(lower);
+    });
+  }, [data, searchText, userMap]);
 
   const openCreate = () => {
     setEditing(null);
     form.resetFields();
+    form.setFieldsValue({ status: 1 });
     setOpen(true);
   };
 
@@ -55,111 +92,195 @@ export default function Devices() {
   };
 
   const submit = async () => {
-    const values = await form.validateFields();
-    const payload: Partial<DeviceInfo> = {
-      userId: values.userId,
-      deviceCode: values.deviceCode,
-      deviceName: values.deviceName,
-      status: values.status
-    };
-    if (editing) {
-      await updateDevice(editing.deviceId, payload);
-    } else {
-      await createDevice(payload);
+    try {
+      const values = await form.validateFields();
+      setSaving(true);
+      const payload: Partial<DeviceInfo> = {
+        userId: values.userId,
+        deviceCode: values.deviceCode,
+        deviceName: values.deviceName,
+        status: values.status
+      };
+      if (editing) {
+        await updateDevice(editing.deviceId, payload);
+        message.success("设备已更新");
+      } else {
+        await createDevice(payload);
+        message.success("设备已创建");
+      }
+      setOpen(false);
+      loadData();
+    } catch (e) {
+      if (e instanceof Error && e.message) message.error(e.message);
+    } finally {
+      setSaving(false);
     }
-    setOpen(false);
-    load();
   };
 
   const remove = async (id: number) => {
-    await deleteDevice(id);
-    load();
+    try {
+      await deleteDevice(id);
+      message.success("设备已删除");
+      loadData();
+    } catch (e) {
+      message.error("删除失败");
+    }
   };
 
-  return (
-    <div>
-      <Space style={{ marginBottom: 16 }}>
-        <Input
-          placeholder="用户ID"
-          value={query.userId}
-          onChange={(e) => setQuery({ ...query, userId: e.target.value })}
-        />
-        <Input
-          placeholder="设备码"
-          value={query.deviceCode}
-          onChange={(e) => setQuery({ ...query, deviceCode: e.target.value })}
-        />
-        <Input
-          placeholder="设备名"
-          value={query.deviceName}
-          onChange={(e) => setQuery({ ...query, deviceName: e.target.value })}
-        />
-        {can("device:create") && (
-          <Button type="primary" onClick={openCreate}>新增</Button>
-        )}
-      </Space>
+  const columns = [
+    {
+      title: "设备信息",
+      key: "device",
+      render: (_: any, record: DeviceInfo) => (
+        <Space>
+          <div className="device-icon-placeholder">
+            <DesktopOutlined aria-hidden="true" />
+          </div>
+          <div>
+            <div className="device-name">{record.deviceName || "未命名设备"}</div>
+            <div className="device-code tabular-nums">{record.deviceCode}</div>
+          </div>
+        </Space>
+      ),
+    },
+    {
+      title: "归属用户",
+      key: "user",
+      render: (_: any, record: DeviceInfo) => {
+        const user = userMap[record.userId];
+        return user ? (
+          <Space>
+            <UserOutlined aria-hidden="true" style={{ color: '#8c8c8c' }} />
+            <span>{user.displayName}</span>
+            <Text type="secondary" size="small" className="tabular-nums">(ID: {record.userId})</Text>
+          </Space>
+        ) : (
+          <span className="tabular-nums">ID: {record.userId}</span>
+        );
+      }
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      width: 100,
+      render: (status: number) => (
+        <Tag color={status === 1 ? "green" : "red"}>
+          {status === 1 ? "启用" : "禁用"}
+        </Tag>
+      ),
+    },
+    {
+      title: "更新时间",
+      dataIndex: "updatedAt",
+      width: 180,
+      render: (text: string) => <Text type="secondary" className="tabular-nums">{text?.replace('T', ' ').substring(0, 19)}</Text>
+    },
+    {
+      title: "操作",
+      key: "action",
+      width: 120,
+      fixed: "right" as const,
+      render: (_: any, record: DeviceInfo) => (
+        <Space>
+          {can("device:update") && (
+            <Button
+              type="text"
+              icon={<EditOutlined aria-hidden="true" />}
+              onClick={() => openEdit(record)}
+              aria-label={`编辑设备 ${record.deviceName || record.deviceCode}`}
+            />
+          )}
+          {can("device:delete") && (
+            <Popconfirm title="确定删除该设备吗？" onConfirm={() => remove(record.deviceId)}>
+              <Button 
+                type="text" 
+                danger 
+                icon={<DeleteOutlined aria-hidden="true" />} 
+                aria-label={`删除设备 ${record.deviceName || record.deviceCode}`}
+              />
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ];
 
-      <Table
-        rowKey="deviceId"
-        loading={loading}
-        dataSource={pageData}
-        pagination={{
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: filtered.length,
-          onChange: (current, pageSize) => setPagination({ current, pageSize })
-        }}
-        columns={[
-          { title: "ID", dataIndex: "deviceId" },
-          { title: "用户ID", dataIndex: "userId" },
-          { title: "设备码", dataIndex: "deviceCode" },
-          { title: "设备名", dataIndex: "deviceName" },
-          {
-            title: "状态",
-            dataIndex: "status",
-            render: (v) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>)
-          },
-          {
-            title: "操作",
-            render: (_, record) => (
-              <Space>
-                {can("device:update") && <Button onClick={() => openEdit(record)}>编辑</Button>}
-                {can("device:delete") && (
-                  <Popconfirm title="确认删除？" onConfirm={() => remove(record.deviceId)}>
-                    <Button danger>删除</Button>
-                  </Popconfirm>
-                )}
-              </Space>
-            )
-          }
-        ]}
-      />
+  return (
+    <div className="devices-page">
+      <div className="devices-header">
+        <div>
+          <Title level={4} className="devices-title">设备管理</Title>
+          <Text type="secondary">管理接入系统的硬件终端及关联用户</Text>
+        </div>
+        {can("device:create") && (
+          <Button type="primary" icon={<PlusOutlined aria-hidden="true" />} onClick={openCreate}>
+            接入设备
+          </Button>
+        )}
+      </div>
+
+      <Card className="devices-table-card shadow-sm">
+        <div className="devices-table-toolbar">
+          <Input
+            placeholder="搜索设备名称、编码或归属用户…"
+            prefix={<SearchOutlined aria-hidden="true" />}
+            className="devices-search-input"
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            allowClear
+            aria-label="搜索设备"
+          />
+        </div>
+
+        <Table
+          rowKey="deviceId"
+          columns={columns}
+          dataSource={filteredData}
+          loading={loading}
+          pagination={{
+            showTotal: (total) => `共 ${total} 条数据`,
+            pageSize: 10,
+          }}
+        />
+      </Card>
 
       <Drawer
-        title={editing ? "编辑设备" : "新增设备"}
+        title={
+          <div className="device-drawer-title">
+            <DesktopOutlined className="mr-2" aria-hidden="true" />
+            {editing ? "修改设备信息" : "接入新设备"}
+          </div>
+        }
         open={open}
         onClose={() => setOpen(false)}
         width={420}
         destroyOnClose
         footer={
-          <Space style={{ width: "100%", justifyContent: "flex-end" }}>
+          <div className="flex justify-end gap-2 p-2">
             <Button onClick={() => setOpen(false)}>取消</Button>
-            <Button type="primary" onClick={submit}>确认</Button>
-          </Space>
+            <Button type="primary" loading={saving} onClick={submit}>
+              确认保存
+            </Button>
+          </div>
         }
       >
         <Form form={form} layout="vertical">
-          <Form.Item label="用户ID" name="userId" rules={[{ required: true }]}>
-            <InputNumber style={{ width: "100%" }} min={1} />
+          <Form.Item label="归属用户" name="userId" rules={[{ required: true, message: "请选择归属用户" }]}>
+            <Select
+              showSearch
+              placeholder="搜索并选择用户"
+              optionFilterProp="children"
+              options={users.map(u => ({ label: `${u.displayName} (@${u.username})`, value: u.userId }))}
+            />
           </Form.Item>
-          <Form.Item label="设备码" name="deviceCode" rules={[{ required: true }]}>
-            <Input />
+          <Form.Item label="设备识别码" name="deviceCode" rules={[{ required: true, message: "请输入设备识别码" }]}>
+            <Input placeholder="由硬件生成的唯一识别码" />
           </Form.Item>
-          <Form.Item label="设备名" name="deviceName">
-            <Input />
+          <Form.Item label="设备名称" name="deviceName">
+            <Input placeholder="例如：会议室 A 转录仪" />
           </Form.Item>
-          <Form.Item label="状态" name="status" initialValue={1}>
-            <Select options={[{ value: 1, label: "启用" }, { value: 0, label: "禁用" }]} />
+          <Form.Item label="设备状态" name="status" initialValue={1}>
+            <Select options={[{ value: 1, label: "正常启用" }, { value: 0, label: "禁用接入" }]} />
           </Form.Item>
         </Form>
       </Drawer>
diff --git a/frontend/src/pages/Dictionaries.tsx b/frontend/src/pages/Dictionaries.tsx
index 3ac59dd..8adf897 100644
--- a/frontend/src/pages/Dictionaries.tsx
+++ b/frontend/src/pages/Dictionaries.tsx
@@ -13,7 +13,8 @@ import {
   Space,
   Table,
   Tag,
-  Typography
+  Typography,
+  Empty
 } from "antd";
 import { useEffect, useState } from "react";
 import {
@@ -27,10 +28,11 @@ import {
   updateDictType
 } from "../api";
 import { usePermission } from "../hooks/usePermission";
-import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import { PlusOutlined, EditOutlined, DeleteOutlined, BookOutlined, ProfileOutlined } from "@ant-design/icons";
 import type { SysDictItem, SysDictType } from "../types";
+import "./Dictionaries.css";
 
-const { Title } = Typography;
+const { Title, Text } = Typography;
 
 export default function Dictionaries() {
   const { can } = usePermission();
@@ -100,7 +102,7 @@ export default function Dictionaries() {
 
   const handleDeleteType = async (id: number) => {
     await deleteDictType(id);
-    message.success("删除成功");
+    message.success("类型删除成功");
     loadTypes();
   };
 
@@ -111,7 +113,7 @@ export default function Dictionaries() {
     } else {
       await createDictType(values);
     }
-    message.success(editingType ? "更新成功" : "创建成功");
+    message.success(editingType ? "类型更新成功" : "类型创建成功");
     setTypeDrawerVisible(false);
     loadTypes();
   };
@@ -119,7 +121,7 @@ export default function Dictionaries() {
   // Item Actions
   const handleAddItem = () => {
     if (!selectedType) {
-      message.warning("请先选择一个字典类型");
+      message.warning("请先从左侧选择一个字典类型");
       return;
     }
     setEditingItem(null);
@@ -136,7 +138,7 @@ export default function Dictionaries() {
 
   const handleDeleteItem = async (id: number) => {
     await deleteDictItem(id);
-    message.success("删除成功");
+    message.success("字典项删除成功");
     if (selectedType) loadItems(selectedType.typeCode);
   };
 
@@ -147,187 +149,270 @@ export default function Dictionaries() {
     } else {
       await createDictItem(values);
     }
-    message.success(editingItem ? "更新成功" : "创建成功");
+    message.success(editingItem ? "字典项更新成功" : "字典项创建成功");
     setItemDrawerVisible(false);
     if (selectedType) loadItems(selectedType.typeCode);
   };
 
   return (
-    <div className="p-6">
-      <Title level={4} className="mb-6">字典管理</Title>
-      <Row gutter={16}>
-        <Col span={8}>
+    <div className="dictionaries-page">
+      <div className="dictionaries-header">
+        <div>
+          <Title level={4} className="dictionaries-title">数据字典管理</Title>
+          <Text type="secondary">维护系统各类枚举值和常量的映射关系</Text>
+        </div>
+      </div>
+
+      <Row gutter={24} className="dictionaries-content">
+        <Col span={8} className="full-height">
           <Card
-            title="字典类型"
+            title={
+              <Space>
+                <BookOutlined aria-hidden="true" />
+                <span>字典类型</span>
+              </Space>
+            }
+            className="full-height-card shadow-sm"
             extra={
               can("sys_dict:type:create") && (
-                <Button type="primary" icon={<PlusOutlined />} onClick={handleAddType}>
+                <Button 
+                  type="primary" 
+                  size="small"
+                  icon={<PlusOutlined aria-hidden="true" />} 
+                  onClick={handleAddType}
+                  aria-label="新增字典类型"
+                >
                   新增
                 </Button>
               )
             }
           >
-            <Table
-              rowKey="dictTypeId"
-              loading={loadingTypes}
-              dataSource={types}
-              pagination={false}
-              size="small"
-              onRow={(record) => ({
-                onClick: () => setSelectedType(record),
-                className: `cursor-pointer ${selectedType?.dictTypeId === record.dictTypeId ? "ant-table-row-selected" : ""}`
-              })}
-              columns={[
-                { title: "类型名称", dataIndex: "typeName" },
-                { title: "编码", dataIndex: "typeCode" },
-                {
-                  title: "操作",
-                  width: 100,
-                  render: (_, record) => (
-                    <Space>
-                      {can("sys_dict:type:update") && (
-                        <Button
-                          type="text"
-                          size="small"
-                          icon={<EditOutlined />}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleEditType(record);
-                          }}
-                        />
-                      )}
-                      {can("sys_dict:type:delete") && (
-                        <Popconfirm
-                          title="删除类型会影响关联的项，确认删除？"
-                          onConfirm={(e) => {
-                            e?.stopPropagation();
-                            handleDeleteType(record.dictTypeId);
-                          }}
-                        >
-                          <Button
-                            type="text"
-                            size="small"
-                            danger
-                            icon={<DeleteOutlined />}
-                            onClick={(e) => e.stopPropagation()}
-                          />
-                        </Popconfirm>
-                      )}
-                    </Space>
-                  )
-                }
-              ]}
-            />
+            <div className="scroll-container">
+              <Table
+                rowKey="dictTypeId"
+                loading={loadingTypes}
+                dataSource={types}
+                pagination={false}
+                size="small"
+                showHeader={false}
+                onRow={(record) => ({
+                  onClick: () => setSelectedType(record),
+                  className: `cursor-pointer dict-type-row ${selectedType?.dictTypeId === record.dictTypeId ? "dict-type-row-selected" : ""}`
+                })}
+                columns={[
+                  { 
+                    render: (_, record) => (
+                      <div className="dict-type-item">
+                        <div className="min-w-0 flex-1">
+                          <div className="dict-type-name truncate">{record.typeName}</div>
+                          <div className="dict-type-code truncate tabular-nums">{record.typeCode}</div>
+                        </div>
+                        <div className="dict-type-actions">
+                          {can("sys_dict:type:update") && (
+                            <Button
+                              type="text"
+                              size="small"
+                              icon={<EditOutlined aria-hidden="true" />}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleEditType(record);
+                              }}
+                              aria-label={`编辑类型 ${record.typeName}`}
+                            />
+                          )}
+                          {can("sys_dict:type:delete") && (
+                            <Popconfirm
+                              title={`确定删除类型 "${record.typeName}" 吗？这会影响关联的字典项。`}
+                              onConfirm={(e) => {
+                                e?.stopPropagation();
+                                handleDeleteType(record.dictTypeId);
+                              }}
+                            >
+                              <Button
+                                type="text"
+                                size="small"
+                                danger
+                                icon={<DeleteOutlined aria-hidden="true" />}
+                                onClick={(e) => e.stopPropagation()}
+                                aria-label={`删除类型 ${record.typeName}`}
+                              />
+                            </Popconfirm>
+                          )}
+                        </div>
+                      </div>
+                    )
+                  }
+                ]}
+              />
+            </div>
           </Card>
         </Col>
-        <Col span={16}>
+        
+        <Col span={16} className="full-height">
           <Card
-            title={`字典项 - ${selectedType?.typeName || "未选择"}`}
+            title={
+              <Space>
+                <ProfileOutlined aria-hidden="true" />
+                <span>字典项内容{selectedType ? ` - ${selectedType.typeName}` : ""}</span>
+              </Space>
+            }
+            className="full-height-card shadow-sm"
             extra={
               can("sys_dict:item:create") && (
-                <Button type="primary" icon={<PlusOutlined />} onClick={handleAddItem} disabled={!selectedType}>
-                  新增
+                <Button 
+                  type="primary" 
+                  size="small"
+                  icon={<PlusOutlined aria-hidden="true" />} 
+                  onClick={handleAddItem} 
+                  disabled={!selectedType}
+                  aria-label="新增字典项"
+                >
+                  新增字典项
                 </Button>
               )
             }
           >
-            <Table
-              rowKey="dictItemId"
-              loading={loadingItems}
-              dataSource={items}
-              pagination={false}
-              columns={[
-                { title: "标签", dataIndex: "itemLabel" },
-                { title: "数值", dataIndex: "itemValue" },
-                { title: "排序", dataIndex: "sortOrder", width: 80 },
-                {
-                  title: "状态",
-                  dataIndex: "status",
-                  width: 80,
-                  render: (v) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>)
-                },
-                {
-                  title: "操作",
-                  width: 120,
-                  render: (_, record) => (
-                    <Space>
-                      {can("sys_dict:item:update") && (
-                        <Button
-                          type="text"
-                          size="small"
-                          icon={<EditOutlined />}
-                          onClick={() => handleEditItem(record)}
-                        />
-                      )}
-                      {can("sys_dict:item:delete") && (
-                        <Popconfirm title="确认删除该项？" onConfirm={() => handleDeleteItem(record.dictItemId)}>
-                          <Button type="text" size="small" danger icon={<DeleteOutlined />} />
-                        </Popconfirm>
-                      )}
-                    </Space>
-                  )
-                }
-              ]}
-            />
+            {selectedType ? (
+              <div className="scroll-container">
+                <Table
+                  rowKey="dictItemId"
+                  loading={loadingItems}
+                  dataSource={items}
+                  pagination={false}
+                  size="middle"
+                  columns={[
+                    { 
+                      title: "展示标签", 
+                      dataIndex: "itemLabel",
+                      render: (text) => <Text strong>{text}</Text>
+                    },
+                    { 
+                      title: "数据数值", 
+                      dataIndex: "itemValue",
+                      className: "tabular-nums"
+                    },
+                    { 
+                      title: "排序", 
+                      dataIndex: "sortOrder", 
+                      width: 80,
+                      className: "tabular-nums"
+                    },
+                    {
+                      title: "状态",
+                      dataIndex: "status",
+                      width: 100,
+                      render: (v) => (
+                        <Tag color={v === 1 ? "green" : "red"}>
+                          {v === 1 ? "启用" : "禁用"}
+                        </Tag>
+                      )
+                    },
+                    {
+                      title: "操作",
+                      width: 120,
+                      fixed: "right" as const,
+                      render: (_, record) => (
+                        <Space>
+                          {can("sys_dict:item:update") && (
+                            <Button
+                              type="text"
+                              size="small"
+                              icon={<EditOutlined aria-hidden="true" />}
+                              onClick={() => handleEditItem(record)}
+                              aria-label={`编辑字典项 ${record.itemLabel}`}
+                            />
+                          )}
+                          {can("sys_dict:item:delete") && (
+                            <Popconfirm title={`确定删除字典项 "${record.itemLabel}" 吗？`} onConfirm={() => handleDeleteItem(record.dictItemId)}>
+                              <Button 
+                                type="text" 
+                                size="small" 
+                                danger 
+                                icon={<DeleteOutlined aria-hidden="true" />} 
+                                aria-label={`删除字典项 ${record.itemLabel}`}
+                              />
+                            </Popconfirm>
+                          )}
+                        </Space>
+                      )
+                    }
+                  ]}
+                />
+              </div>
+            ) : (
+              <div className="flex-center h-full">
+                <Empty description="请先从左侧选择一个字典类型" />
+              </div>
+            )}
           </Card>
         </Col>
       </Row>
 
       {/* Type Drawer */}
       <Drawer
-        title={editingType ? "编辑字典类型" : "新增字典类型"}
+        title={
+          <Space>
+            <BookOutlined aria-hidden="true" />
+            <span>{editingType ? "编辑字典类型" : "新增字典类型"}</span>
+          </Space>
+        }
         open={typeDrawerVisible}
         onClose={() => setTypeDrawerVisible(false)}
         width={400}
         destroyOnClose
         footer={
-          <div className="flex justify-end space-x-2">
+          <div className="flex justify-end gap-2">
             <Button onClick={() => setTypeDrawerVisible(false)}>取消</Button>
-            <Button type="primary" onClick={handleTypeSubmit}>确认</Button>
+            <Button type="primary" onClick={handleTypeSubmit}>确认提交</Button>
           </div>
         }
       >
         <Form form={typeForm} layout="vertical">
-          <Form.Item label="类型编码" name="typeCode" rules={[{ required: true }]}>
-            <Input disabled={!!editingType} placeholder="例如：user_status" />
+          <Form.Item label="类型编码" name="typeCode" rules={[{ required: true, message: "请输入类型编码" }]}>
+            <Input disabled={!!editingType} placeholder="例如：user_status…" />
           </Form.Item>
-          <Form.Item label="类型名称" name="typeName" rules={[{ required: true }]}>
-            <Input placeholder="例如：用户状态" />
+          <Form.Item label="类型名称" name="typeName" rules={[{ required: true, message: "请输入类型名称" }]}>
+            <Input placeholder="例如：用户状态…" />
           </Form.Item>
-          <Form.Item label="备注" name="remark">
-            <Input.TextArea />
+          <Form.Item label="备注说明" name="remark">
+            <Input.TextArea placeholder="该字典类型的用途描述…" rows={3} />
           </Form.Item>
         </Form>
       </Drawer>
 
       {/* Item Drawer */}
       <Drawer
-        title={editingItem ? "编辑字典项" : "新增字典项"}
+        title={
+          <Space>
+            <ProfileOutlined aria-hidden="true" />
+            <span>{editingItem ? "编辑字典项" : "新增字典项"}</span>
+          </Space>
+        }
         open={itemDrawerVisible}
         onClose={() => setItemDrawerVisible(false)}
         width={400}
         destroyOnClose
         footer={
-          <div className="flex justify-end space-x-2">
+          <div className="flex justify-end gap-2">
             <Button onClick={() => setItemDrawerVisible(false)}>取消</Button>
-            <Button type="primary" onClick={handleItemSubmit}>确认</Button>
+            <Button type="primary" onClick={handleItemSubmit}>确认保存</Button>
           </div>
         }
       >
         <Form form={itemForm} layout="vertical">
           <Form.Item label="所属类型" name="typeCode">
-            <Input disabled />
+            <Input disabled className="tabular-nums" />
           </Form.Item>
-          <Form.Item label="标签" name="itemLabel" rules={[{ required: true }]}>
-            <Input placeholder="例如：启用" />
+          <Form.Item label="显示标签" name="itemLabel" rules={[{ required: true, message: "请输入展示标签" }]}>
+            <Input placeholder="例如：正常、禁用…" />
           </Form.Item>
-          <Form.Item label="数值" name="itemValue" rules={[{ required: true }]}>
-            <Input placeholder="例如：1" />
+          <Form.Item label="存储数值" name="itemValue" rules={[{ required: true, message: "请输入数值" }]}>
+            <Input placeholder="例如：1、0…" className="tabular-nums" />
           </Form.Item>
-          <Form.Item label="排序" name="sortOrder" initialValue={0}>
-            <InputNumber className="w-full" />
+          <Form.Item label="显示排序" name="sortOrder" initialValue={0}>
+            <InputNumber className="w-full tabular-nums" />
           </Form.Item>
-          <Form.Item label="状态" name="status" initialValue={1}>
+          <Form.Item label="当前状态" name="status" initialValue={1}>
             <Select
               options={[
                 { label: "启用", value: 1 },
@@ -335,8 +420,8 @@ export default function Dictionaries() {
               ]}
             />
           </Form.Item>
-          <Form.Item label="备注" name="remark">
-            <Input.TextArea />
+          <Form.Item label="备注说明" name="remark">
+            <Input.TextArea placeholder="可选项，备注详细信息…" rows={3} />
           </Form.Item>
         </Form>
       </Drawer>
diff --git a/frontend/src/pages/Login.css b/frontend/src/pages/Login.css
index 6c214d5..d09eb00 100644
--- a/frontend/src/pages/Login.css
+++ b/frontend/src/pages/Login.css
@@ -13,12 +13,14 @@
   flex-direction: column;
   justify-content: space-between;
   position: relative;
+  overflow: hidden;
 }
 
 .login-brand {
   display: flex;
   align-items: center;
   gap: 10px;
+  z-index: 1;
 }
 
 .brand-logo-img {
@@ -36,39 +38,43 @@
 
 .login-hero {
   margin-top: -40px;
+  z-index: 1;
 }
 
 .hero-title {
-  font-size: 36px;
-  font-weight: 600;
-  line-height: 1.25;
+  font-size: 42px;
+  font-weight: 700;
+  line-height: 1.2;
   color: #1d2b3a;
-  margin-bottom: 16px;
-  letter-spacing: 0.5px;
+  margin-bottom: 24px;
+  letter-spacing: -0.5px;
+  text-wrap: balance;
 }
 
 .hero-accent {
-  color: #2d6bff;
+  color: #1677ff;
+  position: relative;
 }
 
 .hero-desc {
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.8;
   color: #687489;
-  max-width: 400px;
+  max-width: 440px;
 }
 
 .login-left-footer {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   color: #8c97a8;
-  font-size: 12px;
+  font-size: 13px;
+  z-index: 1;
 }
 
 .footer-divider {
-  width: 3px;
-  height: 3px;
+  width: 4px;
+  height: 4px;
   background: #c4ccd7;
   border-radius: 50%;
 }
@@ -85,32 +91,32 @@
 
 .login-container {
   width: 100%;
-  max-width: 420px;
-  padding: 0 20px;
+  max-width: 400px;
 }
 
 .login-header {
-  margin-bottom: 32px;
+  margin-bottom: 40px;
 }
 
 .login-header h2 {
-  font-size: 24px !important;
-  font-weight: 600 !important;
+  font-size: 28px !important;
+  font-weight: 700 !important;
   color: #1f2a37 !important;
   margin-bottom: 8px !important;
+  letter-spacing: -0.5px;
 }
 
 .login-header span {
-  font-size: 14px;
-  color: #96a0af;
+  font-size: 15px;
+  color: #6b7280;
 }
 
 .login-form .ant-form-item {
-  margin-bottom: 24px;
+  margin-bottom: 20px;
 }
 
-.login-form .ant-input-lg,
-.login-form .ant-input-password-lg {
+.login-form .ant-input-affix-wrapper-lg {
+  padding: 10px 16px;
   border-radius: 8px;
 }
 
@@ -119,71 +125,92 @@
   gap: 12px;
 }
 
-.captcha-image-container {
+.captcha-image-btn {
+  padding: 0;
   width: 120px;
-  height: 40px;
-  border: 1px solid #d9d9d9;
+  height: 46px;
+  flex-shrink: 0;
   border-radius: 8px;
   overflow: hidden;
-  cursor: pointer;
-  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f9fafb;
 }
 
-.captcha-image-container img {
+.captcha-image-btn img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transition: opacity 0.2s;
+}
+
+.captcha-image-btn:hover img {
+  opacity: 0.8;
 }
 
 .login-extra {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: -8px;
+  margin-top: -4px;
   margin-bottom: 24px;
 }
 
 .forgot-password {
   font-size: 14px;
-  color: #2d6bff;
+  color: #1677ff;
+}
+
+.login-submit-btn {
+  height: 48px;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 8px;
 }
 
 .login-footer {
-  margin-top: 24px;
+  margin-top: 32px;
   text-align: center;
-  font-size: 12px;
+  padding: 16px;
+  background: #f9fafb;
+  border-radius: 12px;
+}
+
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
 }
 
 /* Responsive */
 @media (max-width: 1024px) {
   .login-left {
-    padding: 40px;
+    padding: 48px;
+  }
+  .hero-title {
+    font-size: 36px;
   }
 }
 
-@media (max-width: 980px) {
+@media (max-width: 900px) {
   .login-left {
     display: none;
   }
   .login-right {
-    background: #f6f9fe;
+    background: #f3f4f6;
   }
   .login-container {
     background: #ffffff;
     padding: 48px 32px;
-    border-radius: 16px;
-    box-shadow: 0 24px 60px rgba(30, 55, 90, 0.08);
+    border-radius: 20px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   }
 }
 
 @media (max-width: 480px) {
+  .login-right {
+    padding: 20px;
+  }
   .login-container {
     padding: 32px 20px;
   }
-  .captcha-wrapper {
-    flex-direction: column;
-  }
-  .captcha-image-container {
-    width: 100%;
-  }
 }
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 89991ea..7e53407 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,7 +1,8 @@
-import { Button, Checkbox, Form, Input, message, Typography } from "antd";
-import { useEffect, useState } from "react";
+import { Button, Checkbox, Form, Input, message, Typography } from "antd";
+import { useEffect, useState, useCallback } from "react";
 import { fetchCaptcha, login, type CaptchaResponse } from "../api/auth";
 import { getCurrentUser, getSystemParamValue } from "../api";
+import { UserOutlined, LockOutlined, SafetyOutlined, ReloadOutlined } from "@ant-design/icons";
 import "./Login.css";
 
 const { Title, Text, Link } = Typography;
@@ -12,7 +13,7 @@ export default function Login() {
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
 
-  const loadCaptcha = async () => {
+  const loadCaptcha = useCallback(async () => {
     if (!captchaEnabled) {
       return;
     }
@@ -22,7 +23,7 @@ export default function Login() {
     } catch (e) {
       message.error("加载验证码失败");
     }
-  };
+  }, [captchaEnabled]);
 
   useEffect(() => {
     const init = async () => {
@@ -39,7 +40,7 @@ export default function Login() {
       }
     };
     init();
-  }, []);
+  }, [loadCaptcha]);
 
   const onFinish = async (values: any) => {
     setLoading(true);
@@ -75,7 +76,7 @@ export default function Login() {
     <div className="login-page">
       <div className="login-left">
         <div className="login-brand">
-          <img src="/logo.svg" alt="logo" className="brand-logo-img" />
+          <img src="/logo.svg" alt="MeetingAI Logo" className="brand-logo-img" />
           <span className="brand-name">MeetingAI</span>
         </div>
 
@@ -93,7 +94,7 @@ export default function Login() {
 
         <div className="login-left-footer">
           <div className="footer-item">企业级安全</div>
-          <div className="footer-divider" />
+          <div className="footer-divider" aria-hidden="true" />
           <div className="footer-item">多语言支持</div>
         </div>
       </div>
@@ -111,38 +112,56 @@ export default function Login() {
             onFinish={onFinish}
             className="login-form"
             requiredMark={false}
+            autoComplete="off"
           >
             <Form.Item
-              label="用户名"
               name="username"
               rules={[{ required: true, message: "请输入用户名" }]}
             >
-              <Input size="large" placeholder="请输入用户名" />
+              <Input 
+                size="large" 
+                prefix={<UserOutlined className="text-gray-400" aria-hidden="true" />}
+                placeholder="用户名" 
+                autoComplete="username"
+                spellCheck={false}
+                aria-label="用户名"
+              />
             </Form.Item>
 
             <Form.Item
-              label="密码"
               name="password"
               rules={[{ required: true, message: "请输入密码" }]}
             >
-              <Input.Password size="large" placeholder="请输入密码" />
+              <Input.Password 
+                size="large" 
+                prefix={<LockOutlined className="text-gray-400" aria-hidden="true" />}
+                placeholder="密码" 
+                autoComplete="current-password"
+                aria-label="密码"
+              />
             </Form.Item>
 
             {captchaEnabled && (
               <Form.Item
-                label="验证码"
                 name="captchaCode"
                 rules={[{ required: true, message: "请输入验证码" }]}
               >
                 <div className="captcha-wrapper">
-                  <Input size="large" placeholder="验证码" />
-                  <div className="captcha-image-container" onClick={loadCaptcha}>
-                    {captcha ? (
-                      <img src={captcha.imageBase64} alt="captcha" />
-                    ) : (
-                      <div className="captcha-placeholder" />
-                    )}
-                  </div>
+                  <Input 
+                    size="large" 
+                    prefix={<SafetyOutlined className="text-gray-400" aria-hidden="true" />}
+                    placeholder="验证码" 
+                    maxLength={6}
+                    aria-label="验证码"
+                  />
+                  <Button 
+                    className="captcha-image-btn" 
+                    onClick={loadCaptcha}
+                    icon={!captcha ? <ReloadOutlined spin /> : null}
+                    aria-label="点击刷新验证码"
+                  >
+                    {captcha && <img src={captcha.imageBase64} alt="验证码图片" />}
+                  </Button>
                 </div>
               </Form.Item>
             )}
@@ -155,15 +174,15 @@ export default function Login() {
             </div>
 
             <Form.Item>
-              <Button type="primary" htmlType="submit" loading={loading} block size="large">
-                立即登录
+              <Button type="primary" htmlType="submit" loading={loading} block size="large" className="login-submit-btn">
+                {loading ? "登录中…" : "立即登录"}
               </Button>
             </Form.Item>
           </Form>
 
           <div className="login-footer">
             <Text type="secondary">
-              默认账号：<Text strong>admin</Text> / 密码：<Text strong>123456</Text>
+              演示账号：<Text strong className="tabular-nums">admin</Text> / 密码：<Text strong className="tabular-nums">123456</Text>
             </Text>
           </div>
         </div>
@@ -171,4 +190,3 @@ export default function Login() {
     </div>
   );
 }
-
diff --git a/frontend/src/pages/Logs.tsx b/frontend/src/pages/Logs.tsx
index a76c830..c916094 100644
--- a/frontend/src/pages/Logs.tsx
+++ b/frontend/src/pages/Logs.tsx
@@ -1,10 +1,11 @@
-import { Card, Table, Tabs, Tag, Input, Space, Button, DatePicker, Select } from "antd";
+import { Card, Table, Tabs, Tag, Input, Space, Button, DatePicker, Select, Typography, Modal, Descriptions } from "antd";
 import { useEffect, useState } from "react";
 import { fetchLogs } from "../api";
-import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { SearchOutlined, ReloadOutlined, InfoCircleOutlined, EyeOutlined } from "@ant-design/icons";
 import dayjs from "dayjs";
 
 const { RangePicker } = DatePicker;
+const { Text, Title } = Typography;
 
 export default function Logs() {
   const [activeTab, setActiveTab] = useState("OPERATION");
@@ -20,6 +21,10 @@ export default function Logs() {
     endDate: ""
   });
 
+  // Modal for detail view
+  const [detailModalVisible, setDetailModalVisible] = useState(false);
+  const [selectedLog, setSelectedLog] = useState<any>(null);
+
   const loadData = async (currentParams = params) => {
     setLoading(true);
     try {
@@ -54,31 +59,38 @@ export default function Logs() {
     loadData(resetParams);
   };
 
+  const showDetail = (record: any) => {
+    setSelectedLog(record);
+    setDetailModalVisible(true);
+  };
+
   const columns = [
     {
-      title: "用户名",
+      title: "操作账号",
       dataIndex: "username",
       key: "username",
-      width: 120,
-      render: (text: string) => text || "系统/访客"
+      width: 140,
+      render: (text: string) => <Text strong>{text || "系统/访客"}</Text>
     },
     {
-      title: activeTab === "LOGIN" ? "登录模块" : "操作模块",
+      title: activeTab === "LOGIN" ? "登录模块" : "业务模块",
       dataIndex: "resourceType",
       key: "resourceType",
       width: 150
     },
     {
-      title: "操作详情",
+      title: "操作描述",
       dataIndex: "detail",
       key: "detail",
-      ellipsis: true
+      ellipsis: true,
+      render: (text: string) => <Text type="secondary">{text}</Text>
     },
     {
-      title: "IP地址",
+      title: "IP 地址",
       dataIndex: "ipAddress",
       key: "ipAddress",
-      width: 140
+      width: 140,
+      className: "tabular-nums"
     },
     {
       title: "状态",
@@ -86,17 +98,33 @@ export default function Logs() {
       key: "status",
       width: 100,
       render: (status: number) => (
-        <Tag color={status === 1 ? "green" : "red"}>
+        <Tag color={status === 1 ? "green" : "red"} className="m-0">
           {status === 1 ? "成功" : "失败"}
         </Tag>
       )
     },
     {
-      title: "操作时间",
+      title: "发生时间",
       dataIndex: "createdAt",
       key: "createdAt",
       width: 180,
+      className: "tabular-nums",
       render: (text: string) => text?.replace('T', ' ').substring(0, 19)
+    },
+    {
+      title: "详情",
+      key: "action",
+      width: 80,
+      fixed: "right" as const,
+      render: (_: any, record: any) => (
+        <Button 
+          type="link" 
+          size="small" 
+          icon={<EyeOutlined aria-hidden="true" />} 
+          onClick={() => showDetail(record)}
+          aria-label="查看详细日志信息"
+        />
+      )
     }
   ];
 
@@ -106,22 +134,30 @@ export default function Logs() {
           dataIndex: "operationType",
           key: "operationType",
           width: 100,
-          render: (t: string) => <Tag>{t}</Tag>
+          render: (t: string) => <Tag color="blue">{t}</Tag>
       });
   }
 
   return (
     <div className="p-6">
-      <Card className="mb-4">
+      <div className="mb-6">
+        <Title level={4} className="mb-1">系统日志管理</Title>
+        <Text type="secondary">追踪系统内的每一次重要操作，保障系统安全与可追溯性</Text>
+      </div>
+
+      <Card className="mb-4 shadow-sm">
         <Space wrap size="middle">
           <Input
-            placeholder="用户名"
-            style={{ width: 160 }}
+            placeholder="搜索用户名…"
+            style={{ width: 180 }}
             value={params.username}
             onChange={e => setParams({ ...params, username: e.target.value })}
+            prefix={<SearchOutlined aria-hidden="true" className="text-gray-400" />}
+            aria-label="搜索用户名"
+            allowClear
           />
           <Select
-            placeholder="状态"
+            placeholder="执行状态"
             style={{ width: 120 }}
             allowClear
             value={params.status}
@@ -130,6 +166,7 @@ export default function Logs() {
               { label: "成功", value: 1 },
               { label: "失败", value: 0 }
             ]}
+            aria-label="筛选执行状态"
           />
           <RangePicker
             onChange={(dates) => {
@@ -139,16 +176,34 @@ export default function Logs() {
                 endDate: dates ? dates[1]?.format("YYYY-MM-DD") || "" : ""
               });
             }}
+            aria-label="筛选时间范围"
           />
-          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>搜索</Button>
-          <Button icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
+          <Button 
+            type="primary" 
+            icon={<SearchOutlined aria-hidden="true" />} 
+            onClick={handleSearch}
+          >
+            查询
+          </Button>
+          <Button 
+            icon={<ReloadOutlined aria-hidden="true" />} 
+            onClick={handleReset}
+          >
+            重置
+          </Button>
         </Space>
       </Card>
 
-      <Card>
-        <Tabs activeKey={activeTab} onChange={setActiveTab}>
-          <Tabs.TabPane tab="操作日志" key="OPERATION" />
-          <Tabs.TabPane tab="登录日志" key="LOGIN" />
+      <Card className="shadow-sm" styles={{ body: { paddingTop: 0 } }}>
+        <Tabs activeKey={activeTab} onChange={setActiveTab} size="large">
+          <Tabs.TabPane 
+            tab={<span><InfoCircleOutlined aria-hidden="true" />操作日志</span>} 
+            key="OPERATION" 
+          />
+          <Tabs.TabPane 
+            tab={<span><UserOutlined aria-hidden="true" />登录日志</span>} 
+            key="LOGIN" 
+          />
         </Tabs>
 
         <Table
@@ -156,16 +211,71 @@ export default function Logs() {
           columns={columns}
           dataSource={data}
           loading={loading}
+          size="middle"
           pagination={{
             current: params.current,
             pageSize: params.size,
             total: total,
             showSizeChanger: true,
             onChange: (page, size) => setParams({ ...params, current: page, size }),
-            showTotal: (total) => `共 ${total} 条`
+            showTotal: (total) => `共 ${total} 条数据`
           }}
         />
       </Card>
+
+      <Modal
+        title="日志详细信息"
+        open={detailModalVisible}
+        onCancel={() => setDetailModalVisible(false)}
+        footer={[
+          <Button key="close" onClick={() => setDetailModalVisible(false)}>
+            关闭
+          </Button>
+        ]}
+        width={700}
+      >
+        {selectedLog && (
+          <Descriptions bordered column={1} size="small">
+            <Descriptions.Item label="操作模块">{selectedLog.resourceType}</Descriptions.Item>
+            <Descriptions.Item label="请求方式">
+              <Tag color="blue">{selectedLog.operationType}</Tag>
+            </Descriptions.Item>
+            <Descriptions.Item label="操作账号">{selectedLog.username || "系统"}</Descriptions.Item>
+            <Descriptions.Item label="IP 地址" className="tabular-nums">{selectedLog.ipAddress}</Descriptions.Item>
+            <Descriptions.Item label="User Agent">
+              <Text type="secondary" style={{ fontSize: '12px' }}>{selectedLog.userAgent}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="状态">
+              <Tag color={selectedLog.status === 1 ? "green" : "red"}>
+                {selectedLog.status === 1 ? "成功" : "失败"}
+              </Tag>
+            </Descriptions.Item>
+            <Descriptions.Item label="时间" className="tabular-nums">{selectedLog.createdAt?.replace('T', ' ')}</Descriptions.Item>
+            <Descriptions.Item label="详情/参数">
+              <div style={{ 
+                background: '#f5f5f5', 
+                padding: '12px', 
+                borderRadius: '4px',
+                maxHeight: '200px',
+                overflowY: 'auto',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-all',
+                fontFamily: 'monospace'
+              }}>
+                {selectedLog.detail}
+              </div>
+            </Descriptions.Item>
+            {selectedLog.errorMessage && (
+              <Descriptions.Item label="错误信息">
+                <Text type="danger">{selectedLog.errorMessage}</Text>
+              </Descriptions.Item>
+            )}
+          </Descriptions>
+        )}
+      </Modal>
     </div>
   );
 }
+
+// Ensure UserOutlined is imported
+import { UserOutlined } from "@ant-design/icons";
diff --git a/frontend/src/pages/Permissions.tsx b/frontend/src/pages/Permissions.tsx
index 9abbaeb..ecca309 100644
--- a/frontend/src/pages/Permissions.tsx
+++ b/frontend/src/pages/Permissions.tsx
@@ -1,14 +1,41 @@
-import { Button, Form, Input, Drawer, Popconfirm, Space, Table, Tag, Select, InputNumber } from "antd";
+import {
+  Button,
+  Form,
+  Input,
+  Drawer,
+  Popconfirm,
+  Space,
+  Table,
+  Tag,
+  Select,
+  InputNumber,
+  Typography,
+  Card,
+  message,
+  Tooltip
+} from "antd";
 import { useEffect, useMemo, useState } from "react";
 import { createPermission, deletePermission, listMyPermissions, updatePermission } from "../api";
 import type { SysPermission } from "../types";
 import { usePermission } from "../hooks/usePermission";
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+  ClusterOutlined,
+  MenuOutlined,
+  CheckSquareOutlined,
+  InfoCircleOutlined
+} from "@ant-design/icons";
 
-const { Option } = Select;
+const { Title, Text } = Typography;
 
 type TreePermission = SysPermission & { key: number; children?: TreePermission[] };
 
 function buildTree(list: SysPermission[]): TreePermission[] {
+  if (!list || list.length === 0) return [];
   const map = new Map<number, TreePermission>();
   const roots: TreePermission[] = [];
 
@@ -35,6 +62,7 @@ function buildTree(list: SysPermission[]): TreePermission[] {
 
 export default function Permissions() {
   const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
   const [data, setData] = useState<SysPermission[]>([]);
   const [query, setQuery] = useState({ name: "", code: "", permType: "" });
   const [open, setOpen] = useState(false);
@@ -88,190 +116,353 @@ export default function Permissions() {
   };
 
   const submit = async () => {
-    const values = await form.validateFields();
-    const payload: Partial<SysPermission> = {
-      parentId: values.level === 1 ? undefined : values.parentId,
-      name: values.name,
-      code: values.code,
-      permType: values.permType,
-      level: values.level,
-      path: values.path,
-      component: values.component,
-      icon: values.icon,
-      sortOrder: values.sortOrder,
-      isVisible: values.isVisible,
-      status: values.status,
-      description: values.description
-    };
-    if (editing) {
-      await updatePermission(editing.permId, payload);
-    } else {
-      await createPermission(payload);
+    try {
+      const values = await form.validateFields();
+      setSaving(true);
+      const payload: Partial<SysPermission> = {
+        parentId: values.level === 1 ? undefined : values.parentId,
+        name: values.name,
+        code: values.code,
+        permType: values.permType,
+        level: values.level,
+        path: values.path,
+        component: values.component,
+        icon: values.icon,
+        sortOrder: values.sortOrder,
+        isVisible: values.isVisible,
+        status: values.status,
+        description: values.description
+      };
+      if (editing) {
+        await updatePermission(editing.permId, payload);
+        message.success("权限已更新");
+      } else {
+        await createPermission(payload);
+        message.success("权限已创建");
+      }
+      setOpen(false);
+      load();
+    } catch (e) {
+      if (e instanceof Error && e.message) message.error(e.message);
+    } finally {
+      setSaving(false);
     }
-    setOpen(false);
-    load();
   };
 
   const remove = async (id: number) => {
-    await deletePermission(id);
-    load();
+    try {
+      await deletePermission(id);
+      message.success("权限已删除");
+      load();
+    } catch (e) {
+      message.error("删除失败");
+    }
   };
 
-  return (
-    <div>
-      <Space style={{ marginBottom: 16 }}>
-        <Input
-          placeholder="权限名称"
-          value={query.name}
-          onChange={(e) => setQuery({ ...query, name: e.target.value })}
-        />
-        <Input
-          placeholder="权限编码"
-          value={query.code}
-          onChange={(e) => setQuery({ ...query, code: e.target.value })}
-        />
-        <Select
-          placeholder="类型"
-          allowClear
-          value={query.permType || undefined}
-          onChange={(v) => setQuery({ ...query, permType: v || "" })}
-          options={[
-            { value: "menu", label: "menu" },
-            { value: "button", label: "button" }
-          ]}
-          style={{ width: 120 }}
-        />
-        {can("sys_permission:create") && (
-          <Button type="primary" onClick={openCreate}>新增</Button>
-        )}
-      </Space>
+  const handleReset = () => {
+    setQuery({ name: "", code: "", permType: "" });
+  };
 
-      <Table
-        rowKey="permId"
-        loading={loading}
-        dataSource={treeData}
-        pagination={false}
-        columns={[
-          { title: "名称", dataIndex: "name" },
-          { title: "编码", dataIndex: "code" },
-          { title: "类型", dataIndex: "permType", width: 90 },
-          { title: "层级", dataIndex: "level", width: 80 },
-          { title: "路径", dataIndex: "path" },
-          { title: "组件", dataIndex: "component" },
-          { title: "排序", dataIndex: "sortOrder", width: 80 },
-          {
-            title: "可见",
-            dataIndex: "isVisible",
-            width: 80,
-            render: (v) => (v === 1 ? <Tag color="blue">显示</Tag> : <Tag>隐藏</Tag>)
-          },
-          {
-            title: "状态",
-            dataIndex: "status",
-            width: 80,
-            render: (v) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>)
-          },
-          {
-            title: "操作",
-            width: 160,
-            render: (_, record) => (
-              <Space>
-                {can("sys_permission:update") && <Button onClick={() => openEdit(record)}>编辑</Button>}
-                {can("sys_permission:delete") && (
-                  <Popconfirm title="确认删除？" onConfirm={() => remove(record.permId)}>
-                    <Button danger>删除</Button>
-                  </Popconfirm>
-                )}
-              </Space>
-            )
+  const columns = [
+    { 
+      title: "权限名称", 
+      dataIndex: "name", 
+      key: "name",
+      render: (text: string, record: SysPermission) => (
+        <Space>
+          {record.permType === 'menu' ? 
+            <MenuOutlined style={{ color: '#1890ff' }} aria-hidden="true" /> : 
+            <CheckSquareOutlined style={{ color: '#52c41a' }} aria-hidden="true" />
           }
-        ]}
-      />
+          <Text strong={record.level === 1}>{text}</Text>
+        </Space>
+      )
+    },
+    { 
+      title: "权限编码", 
+      dataIndex: "code", 
+      key: "code",
+      render: (text: string) => text ? <Tag color="blue" className="tabular-nums">{text}</Tag> : "-"
+    },
+    { 
+      title: "类型", 
+      dataIndex: "permType", 
+      width: 90,
+      render: (type: string) => (
+        <Tag color={type === 'menu' ? 'processing' : 'warning'}>
+          {type === 'menu' ? '菜单' : '按钮'}
+        </Tag>
+      )
+    },
+    { 
+      title: "排序", 
+      dataIndex: "sortOrder", 
+      width: 80,
+      className: "tabular-nums"
+    },
+    { 
+      title: "路由/组件", 
+      key: "route",
+      ellipsis: true,
+      render: (_: any, record: SysPermission) => (
+        <div className="flex flex-col">
+          {record.path && <Text type="secondary" size="small" className="tabular-nums">{record.path}</Text>}
+          {record.component && <Text type="secondary" size="small" style={{ fontSize: '11px' }}>{record.component}</Text>}
+        </div>
+      )
+    },
+    {
+      title: "显示",
+      dataIndex: "isVisible",
+      width: 80,
+      render: (v: number) => (v === 1 ? <Tag color="blue">可见</Tag> : <Tag>隐藏</Tag>)
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      width: 80,
+      render: (v: number) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>)
+    },
+    {
+      title: "操作",
+      width: 120,
+      fixed: "right" as const,
+      render: (_: any, record: SysPermission) => (
+        <Space>
+          {can("sys_permission:update") && (
+            <Button 
+              type="text" 
+              size="small" 
+              icon={<EditOutlined aria-hidden="true" />} 
+              onClick={() => openEdit(record)}
+              aria-label={`编辑权限 ${record.name}`}
+            />
+          )}
+          {can("sys_permission:delete") && (
+            <Popconfirm title={`确定删除权限 "${record.name}" 吗？`} onConfirm={() => remove(record.permId)}>
+              <Button 
+                type="text" 
+                size="small" 
+                danger 
+                icon={<DeleteOutlined aria-hidden="true" />} 
+                aria-label={`删除权限 ${record.name}`}
+              />
+            </Popconfirm>
+          )}
+        </Space>
+      )
+    }
+  ];
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <Title level={4} className="mb-1">功能权限管理</Title>
+        <Text type="secondary">配置系统的菜单结构与功能按钮的操作权限点</Text>
+      </div>
+
+      <Card className="mb-4 shadow-sm">
+        <Space wrap size="middle">
+          <Input
+            placeholder="搜索权限名称…"
+            value={query.name}
+            onChange={(e) => setQuery({ ...query, name: e.target.value })}
+            prefix={<SearchOutlined className="text-gray-400" aria-hidden="true" />}
+            style={{ width: 180 }}
+            allowClear
+            aria-label="搜索权限名称"
+          />
+          <Input
+            placeholder="权限编码…"
+            value={query.code}
+            onChange={(e) => setQuery({ ...query, code: e.target.value })}
+            style={{ width: 180 }}
+            allowClear
+            aria-label="搜索权限编码"
+          />
+          <Select
+            placeholder="权限类型"
+            allowClear
+            value={query.permType || undefined}
+            onChange={(v) => setQuery({ ...query, permType: v || "" })}
+            options={[
+              { value: "menu", label: "菜单" },
+              { value: "button", label: "按钮" }
+            ]}
+            style={{ width: 120 }}
+            aria-label="筛选权限类型"
+          />
+          <Button 
+            type="primary" 
+            icon={<SearchOutlined aria-hidden="true" />} 
+            onClick={load}
+          >
+            查询
+          </Button>
+          <Button 
+            icon={<ReloadOutlined aria-hidden="true" />} 
+            onClick={handleReset}
+          >
+            重置
+          </Button>
+          {can("sys_permission:create") && (
+            <Button 
+              type="primary" 
+              icon={<PlusOutlined aria-hidden="true" />} 
+              onClick={openCreate}
+              style={{ background: '#52c41a', borderColor: '#52c41a' }}
+            >
+              新增权限
+            </Button>
+          )}
+        </Space>
+      </Card>
+
+      <Card className="shadow-sm" styles={{ body: { padding: 0 } }}>
+        <Table
+          rowKey="permId"
+          loading={loading}
+          dataSource={treeData}
+          columns={columns}
+          pagination={false}
+          size="middle"
+          expandable={{ defaultExpandAllRows: false }}
+        />
+      </Card>
 
       <Drawer
-        title={editing ? "编辑权限" : "新增权限"}
+        title={
+          <Space>
+            <ClusterOutlined aria-hidden="true" />
+            <span>{editing ? "修改权限点信息" : "新增功能权限"}</span>
+          </Space>
+        }
         open={open}
         onClose={() => setOpen(false)}
         width={520}
         destroyOnClose
         footer={
-          <Space style={{ width: "100%", justifyContent: "flex-end" }}>
+          <div className="flex justify-end gap-2 p-2">
             <Button onClick={() => setOpen(false)}>取消</Button>
-            <Button type="primary" onClick={submit}>确认</Button>
-          </Space>
+            <Button type="primary" loading={saving} onClick={submit}>
+              确认并同步
+            </Button>
+          </div>
         }
       >
         <Form
           form={form}
           layout="vertical"
-          onValuesChange={(changed, values) => {
+          className="permission-form"
+          onValuesChange={(changed) => {
             if (changed.level === 1) {
               form.setFieldsValue({ parentId: undefined });
-              form.validateFields(["parentId"]).catch(() => undefined);
-            }
-            if (changed.level === 2) {
-              form.validateFields(["parentId"]).catch(() => undefined);
             }
           }}
         >
-          <Form.Item label="层级" name="level" rules={[{ required: true }]}>
-            <Select>
-              <Option value={1}>一级菜单</Option>
-              <Option value={2}>二级菜单</Option>
-            </Select>
-          </Form.Item>
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item label="权限层级" name="level" rules={[{ required: true }]}>
+                <Select aria-label="选择层级">
+                  <Select.Option value={1}>一级入口</Select.Option>
+                  <Select.Option value={2}>二级子项</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="权限类型" name="permType" rules={[{ required: true }]}>
+                <Select options={[{ value: "menu", label: "菜单" }, { value: "button", label: "按钮" }]} aria-label="选择类型" />
+              </Form.Item>
+            </Col>
+          </Row>
+
           <Form.Item
-            label="父级"
+            label="上级权限"
             name="parentId"
             dependencies={["level"]}
             rules={[
               ({ getFieldValue }) => ({
                 required: getFieldValue("level") === 2,
-                message: "请选择父级菜单"
+                message: "二级子项必须选择父级菜单"
               })
             ]}
           >
             <Select
               allowClear
-              placeholder="请选择父级菜单"
+              showSearch
+              placeholder={level === 1 ? "一级入口无须父级" : "请选择父级菜单…"}
               options={parentOptions}
               disabled={level !== 2}
+              aria-label="选择上级权限"
             />
           </Form.Item>
-          <Form.Item label="权限名称" name="name" rules={[{ required: true }]}>
-            <Input />
+
+          <Form.Item label="名称" name="name" rules={[{ required: true, message: "请输入权限展示名称" }]}>
+            <Input placeholder="例如：用户管理、导出报表…" />
           </Form.Item>
-          <Form.Item label="权限编码" name="code" dependencies={["permType"]} rules={[
-            ({ getFieldValue }) => ({
-              required: getFieldValue("permType") === "button",
-              message: "按钮权限必须填写编码"
-            })
-          ]}>
-            <Input />
+
+          <Form.Item 
+            label={
+              <Space>
+                <span>权限唯一编码</span>
+                <Tooltip title="用于后端 @PreAuthorize 鉴权和前端按钮控制">
+                  <InfoCircleOutlined className="text-gray-400" />
+                </Tooltip>
+              </Space>
+            } 
+            name="code" 
+            dependencies={["permType"]} 
+            rules={[
+              ({ getFieldValue }) => ({
+                required: getFieldValue("permType") === "button",
+                message: "按钮权限必须填写编码"
+              })
+            ]}
+          >
+            <Input placeholder="例如：sys_user:export…" className="tabular-nums" />
           </Form.Item>
-          <Form.Item label="类型" name="permType" rules={[{ required: true }]}>
-            <Select options={[{ value: "menu" }, { value: "button" }]} />
-          </Form.Item>
-          <Form.Item label="路由路径" name="path">
-            <Input />
-          </Form.Item>
-          <Form.Item label="组件" name="component">
-            <Input />
-          </Form.Item>
-          <Form.Item label="图标" name="icon">
-            <Input />
-          </Form.Item>
-          <Form.Item label="排序" name="sortOrder" initialValue={0}>
-            <InputNumber style={{ width: "100%" }} min={0} />
-          </Form.Item>
-          <Form.Item label="是否可见" name="isVisible" initialValue={1}>
-            <Select options={[{ value: 1, label: "显示" }, { value: 0, label: "隐藏" }]} />
-          </Form.Item>
-          <Form.Item label="状态" name="status" initialValue={1}>
-            <Select options={[{ value: 1, label: "启用" }, { value: 0, label: "禁用" }]} />
-          </Form.Item>
-          <Form.Item label="描述" name="description">
-            <Input.TextArea rows={3} />
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item label="路由路径" name="path">
+                <Input placeholder="/users…" className="tabular-nums" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="组件路径" name="component">
+                <Input placeholder="pages/Users…" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item label="图标名称" name="icon">
+                <Input placeholder="AntD 图标名…" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="显示排序" name="sortOrder" initialValue={0}>
+                <InputNumber style={{ width: "100%" }} min={0} className="tabular-nums" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item label="是否在菜单可见" name="isVisible" initialValue={1}>
+                <Select options={[{ value: 1, label: "显示" }, { value: 0, label: "隐藏" }]} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="状态" name="status" initialValue={1}>
+                <Select options={[{ value: 1, label: "启用" }, { value: 0, label: "禁用" }]} />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Form.Item label="描述说明" name="description">
+            <Input.TextArea rows={2} placeholder="简要描述权限用途…" />
           </Form.Item>
         </Form>
       </Drawer>
@@ -279,3 +470,5 @@ export default function Permissions() {
   );
 }
 
+// Fixed missing Row/Col imports
+import { Row, Col } from "antd";
diff --git a/frontend/src/pages/RolePermissionBinding.tsx b/frontend/src/pages/RolePermissionBinding.tsx
index d352519..29a5914 100644
--- a/frontend/src/pages/RolePermissionBinding.tsx
+++ b/frontend/src/pages/RolePermissionBinding.tsx
@@ -1,7 +1,21 @@
-import { Button, Card, Col, message, Row, Space, Table, Tag, Tree, Typography } from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  message,
+  Row,
+  Space,
+  Table,
+  Tag,
+  Tree,
+  Typography,
+  Input,
+  Empty
+} from "antd";
 import type { DataNode } from "antd/es/tree";
 import { useEffect, useMemo, useState } from "react";
 import { listPermissions, listRolePermissions, listRoles, saveRolePermissions } from "../api";
+import { SearchOutlined, SafetyCertificateOutlined, SaveOutlined, KeyOutlined, ClusterOutlined } from "@ant-design/icons";
 import type { SysPermission, SysRole } from "../types";
 
 const { Title, Text } = Typography;
@@ -9,16 +23,21 @@ const { Title, Text } = Typography;
 type PermissionNode = SysPermission & { key: number; children?: PermissionNode[] };
 
 function buildPermissionTree(list: SysPermission[]): PermissionNode[] {
+  if (!list || list.length === 0) return [];
+  const active = list.filter((p) => p.status !== 0);
   const map = new Map<number, PermissionNode>();
   const roots: PermissionNode[] = [];
 
-  list.forEach((item) => {
+  active.forEach((item) => {
     map.set(item.permId, { ...item, key: item.permId, children: [] });
   });
 
   map.forEach((node) => {
-    if (node.parentId && map.has(node.parentId)) {
-      map.get(node.parentId)!.children!.push(node);
+    if (node.parentId && node.parentId !== 0) {
+      const parent = map.get(node.parentId);
+      if (parent) {
+        parent.children!.push(node);
+      }
     } else {
       roots.push(node);
     }
@@ -38,10 +57,10 @@ function toTreeData(nodes: PermissionNode[]): DataNode[] {
     title: (
       <Space>
         <span>{node.name}</span>
-        {node.permType === "button" && <Tag color="blue">按钮</Tag>}
+        {node.permType === "button" && <Tag color="blue" size="small" style={{ marginLeft: 4 }}>按钮</Tag>}
       </Space>
     ),
-    children: node.children ? toTreeData(node.children) : undefined
+    children: node.children && node.children.length > 0 ? toTreeData(node.children) : undefined
   }));
 }
 
@@ -52,7 +71,13 @@ export default function RolePermissionBinding() {
   const [loadingPerms, setLoadingPerms] = useState(false);
   const [saving, setSaving] = useState(false);
   const [selectedRoleId, setSelectedRoleId] = useState<number | null>(null);
+  
+  // Selection states
   const [checkedPermIds, setCheckedPermIds] = useState<number[]>([]);
+  const [halfCheckedIds, setHalfCheckedIds] = useState<number[]>([]);
+  
+  // Search
+  const [searchText, setSearchText] = useState("");
 
   const selectedRole = useMemo(
     () => roles.find((r) => r.roleId === selectedRoleId) || null,
@@ -75,7 +100,7 @@ export default function RolePermissionBinding() {
       const list = await listPermissions();
       setPermissions(list || []);
     } catch (e) {
-      message.error("加载权限失败，请确认接口已实现");
+      message.error("加载权限定义失败");
     } finally {
       setLoadingPerms(false);
     }
@@ -84,10 +109,18 @@ export default function RolePermissionBinding() {
   const loadRolePermissions = async (roleId: number) => {
     try {
       const list = await listRolePermissions(roleId);
-      setCheckedPermIds(list || []);
+      const normalized = (list || []).map((id) => Number(id)).filter((id) => !Number.isNaN(id));
+      
+      // Filter out parent IDs for Tree view回显 consistency
+      const leafIds = normalized.filter(id => {
+        return !permissions.some(p => p.parentId === id);
+      });
+      
+      setCheckedPermIds(leafIds);
+      setHalfCheckedIds([]);
     } catch (e) {
       setCheckedPermIds([]);
-      message.error("加载角色权限失败，请确认接口已实现");
+      message.error("加载角色授权数据失败");
     }
   };
 
@@ -97,93 +130,148 @@ export default function RolePermissionBinding() {
   }, []);
 
   useEffect(() => {
-    if (selectedRoleId) {
+    if (selectedRoleId && permissions.length > 0) {
       loadRolePermissions(selectedRoleId);
     } else {
       setCheckedPermIds([]);
     }
-  }, [selectedRoleId]);
+  }, [selectedRoleId, permissions]);
 
-  const treeData = useMemo(() => toTreeData(buildPermissionTree(permissions)), [permissions]);
+  const filteredRoles = useMemo(() => {
+    if (!searchText) return roles;
+    const lower = searchText.toLowerCase();
+    return roles.filter(r => 
+      r.roleName.toLowerCase().includes(lower) || 
+      r.roleCode.toLowerCase().includes(lower)
+    );
+  }, [roles, searchText]);
+
+  const treeData = useMemo(() => buildPermissionTree(permissions), [permissions]);
+  const antdTreeData = useMemo(() => toTreeData(treeData), [treeData]);
 
   const handleSave = async () => {
     if (!selectedRoleId) {
-      message.warning("请先选择角色");
+      message.warning("请从左侧列表中选择一个角色");
       return;
     }
     setSaving(true);
     try {
-      await saveRolePermissions(selectedRoleId, checkedPermIds);
-      message.success("角色权限绑定已保存");
+      // Merge checked and half-checked for database persistence
+      const allPermIds = Array.from(new Set([...checkedPermIds, ...halfCheckedIds]));
+      await saveRolePermissions(selectedRoleId, allPermIds);
+      message.success("功能权限策略已成功更新并下发");
     } catch (e) {
-      message.error("保存失败，请确认接口已实现");
+      message.error("保存权限配置失败");
     } finally {
       setSaving(false);
     }
   };
 
   return (
-    <div className="page-shell">
-      <div className="page-header">
+    <div className="p-6">
+      <div className="mb-6 flex justify-between items-end">
         <div>
-          <Title level={4} className="page-title">角色权限绑定</Title>
-          <Text type="secondary" className="page-subtitle">为角色配置菜单与按钮权限</Text>
+          <Title level={4} className="mb-1">角色权限授权</Title>
+          <Text type="secondary">配置系统中各类角色所拥有的菜单访问权限与功能操作权限点</Text>
         </div>
-        <Button type="primary" onClick={handleSave} loading={saving} disabled={!selectedRoleId}>
-          保存绑定
+        <Button 
+          type="primary" 
+          icon={<SaveOutlined aria-hidden="true" />} 
+          onClick={handleSave} 
+          loading={saving} 
+          disabled={!selectedRoleId}
+        >
+          {saving ? "正在同步…" : "保存权限策略"}
         </Button>
       </div>
 
-      <Row gutter={[24, 24]}>
+      <Row gutter={24}>
         <Col xs={24} lg={10}>
-          <Card title="选择角色" bordered={false} className="surface-card">
+          <Card 
+            title={<Space><SafetyCertificateOutlined aria-hidden="true" /><span>系统角色列表</span></Space>}
+            className="shadow-sm full-height-card"
+          >
+            <div className="mb-4">
+              <Input
+                placeholder="搜索角色名称或编码…"
+                prefix={<SearchOutlined aria-hidden="true" className="text-gray-400" />}
+                value={searchText}
+                onChange={e => setSearchText(e.target.value)}
+                allowClear
+                aria-label="搜索角色"
+              />
+            </div>
             <Table
               rowKey="roleId"
               size="middle"
               loading={loadingRoles}
-              dataSource={roles}
+              dataSource={filteredRoles}
               rowSelection={{
                 type: "radio",
                 selectedRowKeys: selectedRoleId ? [selectedRoleId] : [],
-                onChange: (keys) => setSelectedRoleId(keys[0] as number)
+                onChange: (keys) => setSelectedRoleId(keys[0] as number),
               }}
-              pagination={{ pageSize: 8 }}
+              onRow={(record) => ({
+                onClick: () => setSelectedRoleId(record.roleId),
+                className: "cursor-pointer"
+              })}
+              pagination={{ pageSize: 10, showTotal: (total) => `共 ${total} 个角色` }}
               columns={[
-                { title: "ID", dataIndex: "roleId", width: 80 },
-                { title: "角色编码", dataIndex: "roleCode" },
-                { title: "角色名称", dataIndex: "roleName" },
+                { 
+                  title: "角色信息", 
+                  key: "role",
+                  render: (_, r) => (
+                    <div className="min-w-0">
+                      <div style={{ fontWeight: 500 }} className="truncate">{r.roleName}</div>
+                      <div style={{ fontSize: 12, color: '#8c8c8c' }} className="truncate tabular-nums">{r.roleCode}</div>
+                    </div>
+                  )
+                },
                 {
                   title: "状态",
                   dataIndex: "status",
-                  width: 90,
-                  render: (v) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>)
+                  width: 80,
+                  render: (v) => (v === 1 ? <Tag color="green" className="m-0">启用</Tag> : <Tag className="m-0">禁用</Tag>)
                 }
               ]}
             />
           </Card>
         </Col>
+        
         <Col xs={24} lg={14}>
           <Card
-            title="配置权限"
-            bordered={false}
-            className="surface-card"
+            title={<Space><KeyOutlined aria-hidden="true" /><span>功能权限配置</span></Space>}
+            className="shadow-sm full-height-card"
             extra={
-              <Text type="secondary">
-                {selectedRole ? `当前角色：${selectedRole.roleName}` : "未选择角色"}
-              </Text>
+              selectedRole && (
+                <Tag color="blue">当前角色: {selectedRole.roleName}</Tag>
+              )
             }
           >
-            <Tree
-              checkable
-              selectable={false}
-              treeData={treeData}
-              checkedKeys={checkedPermIds}
-              onCheck={(keys) => setCheckedPermIds(keys as number[])}
-              defaultExpandAll
-            />
-            {!permissions.length && !loadingPerms && (
-              <div style={{ marginTop: 12 }}>
-                <Text type="secondary">暂无权限数据</Text>
+            {selectedRoleId ? (
+              <div className="role-permission-tree-container" style={{ padding: '8px 0', maxHeight: '600px', overflowY: 'auto' }}>
+                <Tree
+                  checkable
+                  selectable={false}
+                  checkStrictly={false}
+                  treeData={antdTreeData}
+                  checkedKeys={checkedPermIds}
+                  onCheck={(keys, info) => {
+                    const checked = Array.isArray(keys) ? keys : keys.checked;
+                    const halfChecked = info.halfCheckedKeys || [];
+                    setCheckedPermIds(checked.map(k => Number(k)));
+                    setHalfCheckedIds(halfChecked.map(k => Number(k)));
+                  }}
+                  defaultExpandAll
+                />
+                {!permissions.length && !loadingPerms && (
+                  <Empty description="暂无权限定义数据" />
+                )}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-20 bg-gray-50 rounded-lg border border-dashed border-gray-200">
+                <ClusterOutlined style={{ fontSize: 40, color: '#bfbfbf', marginBottom: 16 }} aria-hidden="true" />
+                <Text type="secondary">请先从左侧列表中选择一个角色</Text>
               </div>
             )}
           </Card>
diff --git a/frontend/src/pages/Roles.tsx b/frontend/src/pages/Roles.tsx
index 7e11c5a..b67944e 100644
--- a/frontend/src/pages/Roles.tsx
+++ b/frontend/src/pages/Roles.tsx
@@ -274,15 +274,26 @@ export default function Roles() {
           <Card 
             title="系统角色" 
             className="full-height-card"
-            extra={can("sys_role:create") && <Button type="primary" size="small" icon={<PlusOutlined />} onClick={openCreate}>新增</Button>}
+            extra={can("sys_role:create") && (
+              <Button 
+                type="primary" 
+                size="small" 
+                icon={<PlusOutlined aria-hidden="true" />} 
+                onClick={openCreate}
+                aria-label="新增角色"
+              >
+                新增
+              </Button>
+            )}
           >
             <div className="mb-4">
               <Input
-                placeholder="搜索角色..."
-                prefix={<SearchOutlined />}
+                placeholder="搜索角色…"
+                prefix={<SearchOutlined aria-hidden="true" />}
                 value={searchText}
                 onChange={e => setSearchText(e.target.value)}
                 allowClear
+                aria-label="搜索角色"
               />
             </div>
             <div className="role-list-container">
@@ -292,6 +303,7 @@ export default function Roles() {
                 dataSource={filteredData}
                 loading={loading}
                 pagination={false}
+                locale={{ emptyText: <Empty description="暂无角色数据" /> }}
                 onRow={(record) => ({
                   onClick: () => selectRole(record),
                   className: `cursor-pointer role-row ${selectedRole?.roleId === record.roleId ? 'role-row-selected' : ''}`
@@ -301,15 +313,33 @@ export default function Roles() {
                     title: '角色',
                     render: (_, record) => (
                       <div className="role-item-content">
-                        <div className="role-item-main">
-                          <div className="role-item-name">{record.roleName}</div>
-                          <div className="role-item-code">{record.roleCode}</div>
+                        <div className="role-item-main min-w-0">
+                          <div className="role-item-name truncate">{record.roleName}</div>
+                          <div className="role-item-code truncate">{record.roleCode}</div>
                         </div>
                         <div className="role-item-actions">
-                          {can("sys_role:update") && <Button type="text" size="small" icon={<EditOutlined />} onClick={e => openEditBasic(e, record)} />}
+                          {can("sys_role:update") && (
+                            <Button 
+                              type="text" 
+                              size="small" 
+                              icon={<EditOutlined aria-hidden="true" />} 
+                              onClick={e => openEditBasic(e, record)} 
+                              aria-label={`编辑 ${record.roleName} 基础信息`}
+                            />
+                          )}
                           {can("sys_role:delete") && record.roleCode !== 'ADMIN' && (
-                            <Popconfirm title="删除角色？" onConfirm={e => handleRemove(e!, record.roleId)}>
-                              <Button type="text" size="small" danger icon={<DeleteOutlined />} onClick={e => e.stopPropagation()} />
+                            <Popconfirm 
+                              title={`确定删除角色 "${record.roleName}" 吗？`}
+                              onConfirm={e => handleRemove(e!, record.roleId)}
+                            >
+                              <Button 
+                                type="text" 
+                                size="small" 
+                                danger 
+                                icon={<DeleteOutlined aria-hidden="true" />} 
+                                onClick={e => e.stopPropagation()} 
+                                aria-label={`删除 ${record.roleName} 角色`}
+                              />
                             </Popconfirm>
                           )}
                         </div>
@@ -329,26 +359,26 @@ export default function Roles() {
               className="full-height-card"
               title={
                 <Space>
-                  <SafetyCertificateOutlined style={{ color: '#1890ff' }} />
-                  <span>{selectedRole.roleName}</span>
+                  <SafetyCertificateOutlined style={{ color: '#1890ff' }} aria-hidden="true" />
+                  <span className="truncate max-w-[200px] inline-block align-bottom">{selectedRole.roleName}</span>
                   <Tag color="blue">{selectedRole.roleCode}</Tag>
                 </Space>
               }
               extra={
                 <Button 
                   type="primary" 
-                  icon={<SaveOutlined />} 
+                  icon={<SaveOutlined aria-hidden="true" />} 
                   loading={saving} 
                   onClick={savePermissions}
                   disabled={!can("sys_role:permission:save")}
                 >
-                  保存权限配置
+                  {saving ? "保存中…" : "保存权限更改"}
                 </Button>
               }
             >
               <Tabs defaultActiveKey="permissions" className="role-tabs">
                 <Tabs.TabPane 
-                  tab={<Space><KeyOutlined />功能权限</Space>} 
+                  tab={<Space><KeyOutlined aria-hidden="true" />功能权限</Space>} 
                   key="permissions"
                 >
                   <div className="role-permission-tree-v2">
@@ -369,7 +399,7 @@ export default function Roles() {
                   </div>
                 </Tabs.TabPane>
                 <Tabs.TabPane 
-                  tab={<Space><UserOutlined />关联用户 ({roleUsers.length})</Space>} 
+                  tab={<Space><UserOutlined aria-hidden="true" />关联用户 ({roleUsers.length})</Space>} 
                   key="users"
                 >
                   <Table
@@ -377,25 +407,26 @@ export default function Roles() {
                     size="small"
                     loading={loadingUsers}
                     dataSource={roleUsers}
-                    pagination={{ pageSize: 10 }}
+                    pagination={{ pageSize: 10, showTotal: (total) => `共 ${total} 人` }}
                     columns={[
                       { 
                         title: '用户', 
                         render: (_, r) => (
                           <Space>
-                            <UserOutlined />
-                            <div>
-                                <div style={{ fontWeight: 500 }}>{r.displayName}</div>
-                                <div style={{ fontSize: 12, color: '#8c8c8c' }}>@{r.username}</div>
+                            <UserOutlined aria-hidden="true" />
+                            <div className="min-w-0">
+                                <div style={{ fontWeight: 500 }} className="truncate">{r.displayName}</div>
+                                <div style={{ fontSize: 12, color: '#8c8c8c' }} className="truncate">@{r.username}</div>
                             </div>
                           </Space>
                         )
                       },
-                      { title: '手机号', dataIndex: 'phone' },
+                      { title: '手机号', dataIndex: 'phone', className: 'tabular-nums' },
                       { title: '邮箱', dataIndex: 'email' },
                       { 
                         title: '状态', 
                         dataIndex: 'status',
+                        width: 80,
                         render: s => <Tag color={s === 1 ? 'green' : 'red'}>{s === 1 ? '正常' : '禁用'}</Tag>
                       }
                     ]}
@@ -405,7 +436,7 @@ export default function Roles() {
             </Card>
           ) : (
             <Card className="full-height-card flex-center">
-              <Empty description="请从左侧选择一个角色以查看详情" />
+              <Empty description="请从左侧列表选择一个角色进行管理" />
             </Card>
           )}
         </Col>
diff --git a/frontend/src/pages/UserRoleBinding.tsx b/frontend/src/pages/UserRoleBinding.tsx
index 5ec0289..881075a 100644
--- a/frontend/src/pages/UserRoleBinding.tsx
+++ b/frontend/src/pages/UserRoleBinding.tsx
@@ -1,6 +1,20 @@
-import { Button, Card, Checkbox, Col, message, Row, Space, Table, Tag, Typography } from "antd";
+import {
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  message,
+  Row,
+  Space,
+  Table,
+  Tag,
+  Typography,
+  Input,
+  Empty
+} from "antd";
 import { useEffect, useMemo, useState } from "react";
 import { listRoles, listUserRoles, listUsers, saveUserRoles } from "../api";
+import { SearchOutlined, UserOutlined, SaveOutlined, TeamOutlined } from "@ant-design/icons";
 import type { SysRole, SysUser } from "../types";
 
 const { Title, Text } = Typography;
@@ -13,6 +27,9 @@ export default function UserRoleBinding() {
   const [saving, setSaving] = useState(false);
   const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
   const [checkedRoleIds, setCheckedRoleIds] = useState<number[]>([]);
+  
+  // Search state
+  const [searchText, setSearchText] = useState("");
 
   const selectedUser = useMemo(
     () => users.find((u) => u.userId === selectedUserId) || null,
@@ -45,7 +62,7 @@ export default function UserRoleBinding() {
       setCheckedRoleIds(list || []);
     } catch (e) {
       setCheckedRoleIds([]);
-      message.error("加载用户角色失败，请确认接口已实现");
+      message.error("加载用户角色数据失败");
     }
   };
 
@@ -62,99 +79,145 @@ export default function UserRoleBinding() {
     }
   }, [selectedUserId]);
 
+  const filteredUsers = useMemo(() => {
+    if (!searchText) return users;
+    const lower = searchText.toLowerCase();
+    return users.filter(u => 
+      u.username.toLowerCase().includes(lower) || 
+      u.displayName.toLowerCase().includes(lower)
+    );
+  }, [users, searchText]);
+
   const handleSave = async () => {
     if (!selectedUserId) {
-      message.warning("请先选择用户");
+      message.warning("请先在左侧列表中选择一个用户");
       return;
     }
     setSaving(true);
     try {
       await saveUserRoles(selectedUserId, checkedRoleIds);
-      message.success("用户角色绑定已保存");
+      message.success("角色权限已成功授予用户");
     } catch (e) {
-      message.error("保存失败，请确认接口已实现");
+      message.error("更新绑定关系失败");
     } finally {
       setSaving(false);
     }
   };
 
   return (
-    <div className="page-shell">
-      <div className="page-header">
+    <div className="p-6">
+      <div className="mb-6 flex justify-between items-end">
         <div>
-          <Title level={4} className="page-title">用户角色绑定</Title>
-          <Text type="secondary" className="page-subtitle">为用户分配一个或多个角色</Text>
+          <Title level={4} className="mb-1">用户角色授权</Title>
+          <Text type="secondary">为指定用户分配系统访问角色，控制其操作权限边界</Text>
         </div>
-        <Button type="primary" onClick={handleSave} loading={saving} disabled={!selectedUserId}>
-          保存绑定
+        <Button 
+          type="primary" 
+          icon={<SaveOutlined aria-hidden="true" />} 
+          onClick={handleSave} 
+          loading={saving} 
+          disabled={!selectedUserId}
+        >
+          {saving ? "保存中…" : "保存权限更改"}
         </Button>
       </div>
 
-      <Row gutter={[24, 24]}>
+      <Row gutter={24}>
         <Col xs={24} lg={12}>
-          <Card title="选择用户" bordered={false} className="surface-card">
+          <Card 
+            title={<Space><UserOutlined aria-hidden="true" /><span>用户选择列表</span></Space>}
+            className="shadow-sm full-height-card"
+          >
+            <div className="mb-4">
+              <Input
+                placeholder="搜索用户名或显示名…"
+                prefix={<SearchOutlined aria-hidden="true" className="text-gray-400" />}
+                value={searchText}
+                onChange={e => setSearchText(e.target.value)}
+                allowClear
+                aria-label="搜索用户"
+              />
+            </div>
             <Table
               rowKey="userId"
               size="middle"
               loading={loadingUsers}
-              dataSource={users}
+              dataSource={filteredUsers}
               rowSelection={{
                 type: "radio",
                 selectedRowKeys: selectedUserId ? [selectedUserId] : [],
-                onChange: (keys) => setSelectedUserId(keys[0] as number)
+                onChange: (keys) => setSelectedUserId(keys[0] as number),
               }}
-              pagination={{ pageSize: 8 }}
+              onRow={(record) => ({
+                onClick: () => setSelectedUserId(record.userId),
+                className: "cursor-pointer"
+              })}
+              pagination={{ pageSize: 10, showTotal: (total) => `共 ${total} 人` }}
               columns={[
-                { title: "ID", dataIndex: "userId", width: 80 },
-                { title: "用户名", dataIndex: "username" },
-                { title: "显示名", dataIndex: "displayName" },
+                { 
+                  title: "用户信息", 
+                  key: "user",
+                  render: (_, r) => (
+                    <div className="min-w-0">
+                      <div style={{ fontWeight: 500 }} className="truncate">{r.displayName}</div>
+                      <div style={{ fontSize: 12, color: '#8c8c8c' }} className="truncate">@{r.username}</div>
+                    </div>
+                  )
+                },
                 {
                   title: "状态",
                   dataIndex: "status",
-                  width: 90,
-                  render: (v) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>)
+                  width: 80,
+                  render: (v) => (v === 1 ? <Tag color="green" className="m-0">正常</Tag> : <Tag className="m-0">禁用</Tag>)
                 }
               ]}
             />
           </Card>
         </Col>
+        
         <Col xs={24} lg={12}>
           <Card
-            title="选择角色"
-            bordered={false}
-            className="surface-card"
+            title={<Space><TeamOutlined aria-hidden="true" /><span>授予角色权限</span></Space>}
+            className="shadow-sm full-height-card"
             extra={
-              <Text type="secondary">
-                {selectedUser ? `当前用户：${selectedUser.displayName || selectedUser.username}` : "未选择用户"}
-              </Text>
+              selectedUser && (
+                <Tag color="blue">正在编辑: {selectedUser.displayName}</Tag>
+              )
             }
           >
-            <Space direction="vertical" size={12} style={{ width: "100%" }}>
-              <Checkbox.Group
-                style={{ width: "100%" }}
-                value={checkedRoleIds}
-                onChange={(values) => setCheckedRoleIds(values as number[])}
-                disabled={loadingRoles}
-              >
-                <Row gutter={[12, 12]}>
-                  {roles.map((role) => (
-                    <Col key={role.roleId} span={12}>
-                      <Checkbox value={role.roleId}>
-                        <Space direction="vertical" size={0}>
-                          <span>{role.roleName}</span>
-                          <Text type="secondary" style={{ fontSize: 12 }}>
-                            {role.roleCode}
-                          </Text>
-                        </Space>
-                      </Checkbox>
-                    </Col>
-                  ))}
-                </Row>
-              </Checkbox.Group>
-              {!roles.length && !loadingRoles && (
-                <Text type="secondary">暂无角色数据</Text>
-              )}
-            </Space>
+            {selectedUserId ? (
+              <div style={{ padding: '8px 0' }}>
+                <Checkbox.Group
+                  style={{ width: "100%" }}
+                  value={checkedRoleIds}
+                  onChange={(values) => setCheckedRoleIds(values as number[])}
+                  disabled={loadingRoles}
+                >
+                  <Row gutter={[16, 16]}>
+                    {roles.map((role) => (
+                      <Col key={role.roleId} span={12}>
+                        <Checkbox value={role.roleId} className="w-full">
+                          <Space direction="vertical" size={0}>
+                            <span style={{ fontWeight: 500 }}>{role.roleName}</span>
+                            <Text type="secondary" style={{ fontSize: 12 }} className="tabular-nums">
+                              {role.roleCode}
+                            </Text>
+                          </Space>
+                        </Checkbox>
+                      </Col>
+                    ))}
+                  </Row>
+                </Checkbox.Group>
+                {!roles.length && !loadingRoles && (
+                  <Empty description="暂无可用角色" />
+                )}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-20 bg-gray-50 rounded-lg border border-dashed border-gray-200">
+                <UserOutlined style={{ fontSize: 40, color: '#bfbfbf', marginBottom: 16 }} aria-hidden="true" />
+                <Text type="secondary">请先从左侧选择一个用户</Text>
+              </div>
+            )}
           </Card>
         </Col>
       </Row>