diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..d604a03
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,6 @@
+# .dockerignore
+node_modules
+npm-debug.log
+yarn-error.log
+dist
+build
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..2cdc894
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,14 @@
+# 构建阶段
+FROM node:16 as build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# 生产阶段
+FROM nginx:alpine
+COPY --from=build /app/dist  /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 8000
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..577d11a
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,24 @@
+upstream backend {
+    server backend:8080;  # 保持不变（Docker Compose中服务名即容器间通信域名）
+}
+
+server {
+    listen 8000;  # 修改为Docker Compose中映射的前端端口（与docker-compose.yml保持一致）
+    server_name _;  # 允许所有域名访问
+
+    # 静态资源处理
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;  # 适配SPA路由（如React/Vue）
+    }
+
+    # 反向代理API请求到后端
+    location /api/ {
+        proxy_pass http://backend/;  # 代理路径与后端API前缀匹配
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/User/Login/index.tsx b/src/pages/User/Login/index.tsx
index a18f785..233cb3d 100644
--- a/src/pages/User/Login/index.tsx
+++ b/src/pages/User/Login/index.tsx
@@ -167,7 +167,18 @@
   }, []);
 
   return (
-    <div className={containerClassName}>
+    <div
+      className={containerClassName}
+      style={{
+        backgroundImage:
+          "url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=1500&q=80')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '100vh',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
       <Helmet>
         <title>
           {intl.formatMessage({
@@ -178,31 +189,86 @@
         </title>
       </Helmet>
       <Lang />
+      {/* 星空粒子特效层 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 0,
+          pointerEvents: 'none',
+          background: 'radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)',
+        }}
+      >
+        {/* 可以集成粒子库如 tsParticles 或者简单用 CSS 动画 */}
+        <svg width="100%" height="100%">
+          {[...Array(60)].map((_, i) => (
+            <circle
+              key={i}
+              cx={Math.random() * 1600}
+              cy={Math.random() * 900}
+              r={Math.random() * 1.5 + 0.5}
+              fill="#fff"
+              opacity={Math.random() * 0.8 + 0.2}
+            />
+          ))}
+        </svg>
+      </div>
       <div
         style={{
           flex: '1',
           padding: '32px 0',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '100vh',
+          position: 'relative',
+          zIndex: 1,
         }}
       >
         <LoginForm
           contentStyle={{
-            minWidth: 280,
-            maxWidth: '75vw',
+            minWidth: 320,
+            maxWidth: 400,
+            background: 'rgba(25, 34, 54, 0.92)',
+            borderRadius: 16,
+            boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
+            border: '1px solid rgba(255,255,255,0.18)',
+            padding: '32px 32px 24px 32px',
+            color: '#fff',
           }}
-          logo={<img alt="logo" src="/logo.svg" />}
-          title="Ant Design"
-          subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
+          // logo={
+          //   <img
+          //     alt="logo"
+          //     src="/planet-logo.svg"
+          //     style={{
+          //       width: 64,
+          //       height: 64,
+          //       filter: 'drop-shadow(0 0 8px #fff8) drop-shadow(0 0 16px #6cf)',
+          //       marginBottom: 8,
+          //     }}
+          //   />
+          // }
+          title={
+            <span style={{ color: '#fff', fontWeight: 700, fontSize: 28, letterSpacing: 2 }}>
+              PT星球
+            </span>
+          }
+          subTitle={
+            <span style={{ color: '#b3c7f9', fontSize: 16 }}>
+              探索你的专属星球，畅享PT世界
+            </span>
+          }
           initialValues={{
             autoLogin: true,
           }}
-          actions={[
-            <FormattedMessage
-              key="loginWith"
-              id="pages.login.loginWith"
-              defaultMessage="其他登录方式"
-            />,
-            <ActionIcons key="icons" />,
-          ]}
+          // actions={[
+          //   <FormattedMessage
+          //     key="loginWith"
+          //     id="pages.login.loginWith"
+          //     defaultMessage="其他登录方式"
+          //   />,
+          //   <ActionIcons key="icons" />,
+          // ]}
           onFinish={async (values) => {
             await handleSubmit(values as API.LoginParams);
           }}
@@ -214,19 +280,28 @@
             items={[
               {
                 key: 'account',
-                label: intl.formatMessage({
-                  id: 'pages.login.accountLogin.tab',
-                  defaultMessage: '账户密码登录',
-                }),
+                label: (
+                  <span style={{ color: '#fff' }}>
+                    {intl.formatMessage({
+                      id: 'pages.login.accountLogin.tab',
+                      defaultMessage: '账户密码登录',
+                    })}
+                  </span>
+                ),
               },
               {
                 key: 'mobile',
-                label: intl.formatMessage({
-                  id: 'pages.login.phoneLogin.tab',
-                  defaultMessage: '手机号登录',
-                }),
+                label: (
+                  <span style={{ color: '#fff' }}>
+                    {intl.formatMessage({
+                      id: 'pages.login.phoneLogin.tab',
+                      defaultMessage: '手机号登录',
+                    })}
+                  </span>
+                ),
               },
             ]}
+            style={{ marginBottom: 24 }}
           />
 
           {code !== 200 && loginType === 'account' && (
@@ -244,7 +319,8 @@
                 initialValue="admin"
                 fieldProps={{
                   size: 'large',
-                  prefix: <UserOutlined />,
+                  prefix: <UserOutlined style={{ color: '#6cf' }} />,
+                  style: { background: 'rgba(255,255,255,0.08)', color: '#fff' },
                 }}
                 placeholder={intl.formatMessage({
                   id: 'pages.login.username.placeholder',
@@ -267,7 +343,8 @@
                 initialValue="admin123"
                 fieldProps={{
                   size: 'large',
-                  prefix: <LockOutlined />,
+                  prefix: <LockOutlined style={{ color: '#6cf' }} />,
+                  style: { background: 'rgba(255,255,255,0.08)', color: '#fff' },
                 }}
                 placeholder={intl.formatMessage({
                   id: 'pages.login.password.placeholder',
@@ -290,6 +367,8 @@
                   <ProFormText
                     style={{
                       float: 'right',
+                      background: 'rgba(255,255,255,0.08)',
+                      color: '#fff',
                     }}
                     name="code"
                     placeholder={intl.formatMessage({
@@ -319,6 +398,9 @@
                       cursor: 'pointer',
                       paddingLeft: '10px',
                       width: '100px',
+                      borderRadius: 8,
+                      boxShadow: '0 0 8px #6cf8',
+                      background: '#fff',
                     }}
                     preview={false}
                     onClick={() => getCaptchaCode()}
@@ -328,13 +410,16 @@
             </>
           )}
 
-          {code !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
+          {code !== 200 && loginType === 'mobile' && (
+            <LoginMessage content="验证码错误" />
+          )}
           {type === 'mobile' && (
             <>
               <ProFormText
                 fieldProps={{
                   size: 'large',
-                  prefix: <MobileOutlined />,
+                  prefix: <MobileOutlined style={{ color: '#6cf' }} />,
+                  style: { background: 'rgba(255,255,255,0.08)', color: '#fff' },
                 }}
                 name="mobile"
                 placeholder={intl.formatMessage({
@@ -365,7 +450,8 @@
               <ProFormCaptcha
                 fieldProps={{
                   size: 'large',
-                  prefix: <LockOutlined />,
+                  prefix: <LockOutlined style={{ color: '#6cf' }} />,
+                  style: { background: 'rgba(255,255,255,0.08)', color: '#fff' },
                 }}
                 captchaProps={{
                   size: 'large',
@@ -413,14 +499,23 @@
           <div
             style={{
               marginBottom: 24,
+              color: '#b3c7f9',
             }}
           >
-            <ProFormCheckbox noStyle name="autoLogin">
-              <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
+            <ProFormCheckbox>
+              <a
+                style={{
+                  float: 'right',
+                  color: '#fff',
+                  fontSize: 14,
+                }}>
+              <FormattedMessage id="pages.login.rememberMe"  defaultMessage="自动登录" />
+              </a>
             </ProFormCheckbox>
             <a
               style={{
                 float: 'right',
+                color: '#6cf',
               }}
             >
               <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />