Răsfoiți Sursa

💄 style(admin): 优化管理后台界面样式

- 全局主题配置: 设置主色调、圆角和容器背景色
- 侧边栏样式优化: 添加渐变背景、白色标题文字和暗色菜单主题
- 内容区域改进: 添加卡片悬停效果、表格边框和行交替背景色
- 表单样式调整: 优化表单布局和间距,增强视觉层次
- 模态框改进: 添加关闭销毁和禁用点击遮罩关闭功能
yourname 5 luni în urmă
părinte
comite
c829e69c8a

+ 16 - 1
src/client/admin/index.tsx

@@ -25,7 +25,22 @@ const queryClient = new QueryClient();
 const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <ConfigProvider locale={zhCN}>
+      <ConfigProvider locale={zhCN} theme={{
+        token: {
+          colorPrimary: '#1890ff',
+          borderRadius: 4,
+          colorBgContainer: '#f5f5f5',
+        },
+        components: {
+          Button: {
+            borderRadius: 4,
+          },
+          Card: {
+            borderRadius: 6,
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+          }
+        }
+      }}>
         <AntdApp>
           <AuthProvider>
             <RouterProvider router={router} />

+ 10 - 4
src/client/admin/layouts/MainLayout.tsx

@@ -125,11 +125,12 @@ export const MainLayout = () => {
           zIndex: 100,
           transition: 'all 0.2s ease',
           boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)',
+          background: 'linear-gradient(180deg, #001529 0%, #003a6c 100%)',
         }}
       >
         <div className="p-4">
           <Typography.Title level={2} className="text-xl font-bold truncate">
-            {collapsed ? '应用' : appName}
+            <span className="text-white">{collapsed ? '应用' : appName}</span>
           </Typography.Title>
           
           {/* 菜单搜索框 */}
@@ -147,7 +148,7 @@ export const MainLayout = () => {
         
         {/* 菜单列表 */}
         <Menu
-          theme='light'
+          theme='dark'
           mode="inline"
           items={filteredMenuItems}
           openKeys={openKeys}
@@ -155,13 +156,18 @@ export const MainLayout = () => {
           onOpenChange={onOpenChange}
           onClick={({ key }) => handleMenuClick(key)}
           inlineCollapsed={collapsed}
+          style={{
+            backgroundColor: 'transparent',
+            borderRight: 'none'
+          }}
         />
       </Sider>
       
       <Layout style={{ marginLeft: collapsed ? 80 : 240, transition: 'margin-left 0.2s' }}>
         <div className="sticky top-0 z-50 bg-white shadow-sm transition-all duration-200 h-16 flex items-center justify-between pl-2"
           style={{
-            boxShadow: '0 1px 4px rgba(0,21,41,0.08)'
+            boxShadow: '0 1px 8px rgba(0,21,41,0.12)',
+            borderBottom: '1px solid #f0f0f0'
           }}
         >
           <Button
@@ -194,7 +200,7 @@ export const MainLayout = () => {
         </div>
         
         <Content className="m-6" style={{ overflow: 'initial', transition: 'all 0.2s ease' }}>
-          <div className="site-layout-content p-6 rounded-lg bg-white shadow-sm">
+          <div className="site-layout-content p-6 rounded-lg bg-white shadow-sm transition-all duration-300 hover:shadow-md">
             <Outlet />
           </div>
           

+ 12 - 3
src/client/admin/pages/Users.tsx

@@ -202,9 +202,11 @@ export const UsersPage = () => {
   
   return (
     <div>
-      <Title level={2}>用户管理</Title>
-      <Card>
-        <Form layout="inline" onFinish={handleSearch} style={{ marginBottom: 16 }}>
+      <div className="mb-6 flex justify-between items-center">
+        <Title level={2}>用户管理</Title>
+      </div>
+      <Card className="shadow-md transition-all duration-300 hover:shadow-lg">
+        <Form layout="inline" onFinish={handleSearch} style={{ marginBottom: 16, padding: '16px 0' }}>
           <Form.Item name="search" label="搜索">
             <Input placeholder="用户名/昵称/邮箱" allowClear />
           </Form.Item>
@@ -232,6 +234,9 @@ export const UsersPage = () => {
             showTotal: (total) => `共 ${total} 条记录`
           }}
           onChange={handleTableChange}
+          bordered
+          scroll={{ x: 'max-content' }}
+          rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
         />
       </Card>
 
@@ -246,10 +251,14 @@ export const UsersPage = () => {
         }}
         width={600}
         centered
+        destroyOnClose
+        maskClosable={false}
       >
         <Form
           form={form}
           layout="vertical"
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
         >
           <Form.Item
             name="username"