fix(deploy): add Google OAuth credentials to deployment workflow

This reverts commit 0fcc4b9e85.

.env.example

@@ -1,3 +1,12 @@
 AUTH_GITHUB_ID = ""
 AUTH_GITHUB_SECRET = ""
-AUTH_SECRET = ""
+AUTH_GOOGLE_ID = ""
+AUTH_GOOGLE_SECRET = ""
+AUTH_SECRET = ""
+
+CLOUDFLARE_API_TOKEN = ""
+CLOUDFLARE_ACCOUNT_ID = ""
+DATABASE_NAME = ""
+KV_NAMESPACE_NAME = ""
+
+CUSTOM_DOMAIN = ""

.github/workflows/deploy.yml

@@ -4,6 +4,7 @@ on:
   push:
     tags:
       - 'v*'
+  workflow_dispatch:
 
 jobs:
   deploy:
@@ -15,9 +16,10 @@ jobs:
 
       - name: Get previous tag
         id: previoustag
+        if: github.event_name == 'push'
         run: |
           echo "tag=$(git describe --tags --abbrev=0 HEAD^)" >> $GITHUB_OUTPUT
-        continue-on-error: true  # Allow failure if this is the first tag
+        continue-on-error: true
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
@@ -33,103 +35,25 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
 
-      # Check if database migrations have changes
-      - name: Check migrations changes
-        id: check_migrations
+      - name: Run deploy script
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          PROJECT_NAME: ${{ secrets.PROJECT_NAME }}
+          DATABASE_NAME: ${{ secrets.DATABASE_NAME }}
+          DATABASE_ID: ${{ secrets.DATABASE_ID }}
+          KV_NAMESPACE_NAME: ${{ secrets.KV_NAMESPACE_NAME }}
+          KV_NAMESPACE_ID: ${{ secrets.KV_NAMESPACE_ID }}
+          CUSTOM_DOMAIN: ${{ secrets.CUSTOM_DOMAIN }}
+          AUTH_GITHUB_ID: ${{ secrets.AUTH_GITHUB_ID }}
+          AUTH_GITHUB_SECRET: ${{ secrets.AUTH_GITHUB_SECRET }}
+          AUTH_GOOGLE_ID: ${{ secrets.AUTH_GOOGLE_ID }}
+          AUTH_GOOGLE_SECRET: ${{ secrets.AUTH_GOOGLE_SECRET }}
+          AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
+        run: pnpm dlx tsx scripts/deploy/index.ts
+
+      # Clean up
+      - name: Post deployment cleanup
         run: |
-          # If this is the first tag, we need to run migrations
-          if [ -z "${{ steps.previoustag.outputs.tag }}" ]; then
-            echo "migrations_changed=true" >> $GITHUB_OUTPUT
-          else
-            # Check if any files in drizzle directory have changed
-            if git diff ${{ steps.previoustag.outputs.tag }}..HEAD --name-only | grep -q "^drizzle/"; then
-              echo "migrations_changed=true" >> $GITHUB_OUTPUT
-            else
-              echo "migrations_changed=false" >> $GITHUB_OUTPUT
-            fi
-          fi
-
-      # Process configuration files
-      - name: Process configuration files
-        run: |
-          # Process wrangler.example.toml
-          if [ -f wrangler.example.toml ]; then
-            cp wrangler.example.toml wrangler.toml
-            sed -i "s/database_name = \".*\"/database_name = \"${{ secrets.DATABASE_NAME }}\"/" wrangler.toml
-            sed -i "s/database_id = \".*\"/database_id = \"${{ secrets.DATABASE_ID }}\"/" wrangler.toml
-          fi
-          
-          # Process wrangler.email.example.toml
-          if [ -f wrangler.email.example.toml ]; then
-            cp wrangler.email.example.toml wrangler.email.toml
-            sed -i "s/database_name = \".*\"/database_name = \"${{ secrets.DATABASE_NAME }}\"/" wrangler.email.toml
-            sed -i "s/database_id = \".*\"/database_id = \"${{ secrets.DATABASE_ID }}\"/" wrangler.email.toml
-          fi
-          
-          # Process wrangler.cleanup.example.toml
-          if [ -f wrangler.cleanup.example.toml ]; then
-            cp wrangler.cleanup.example.toml wrangler.cleanup.toml
-            sed -i "s/database_name = \".*\"/database_name = \"${{ secrets.DATABASE_NAME }}\"/" wrangler.cleanup.toml
-            sed -i "s/database_id = \".*\"/database_id = \"${{ secrets.DATABASE_ID }}\"/" wrangler.cleanup.toml
-          fi
-
-      # Run database migrations if needed
-      - name: Run database migrations
-        if: steps.check_migrations.outputs.migrations_changed == 'true'
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-        run: pnpm db:migrate-remote
-
-      # Check if workers have changes
-      - name: Check workers changes
-        id: check_changes
-        run: |
-          # If this is the first tag, check all files
-          if [ -z "${{ steps.previoustag.outputs.tag }}" ]; then
-            if git ls-files | grep -q "workers/email-receiver.ts"; then
-              echo "email_worker_changed=true" >> $GITHUB_OUTPUT
-            else
-              echo "email_worker_changed=false" >> $GITHUB_OUTPUT
-            fi
-            if git ls-files | grep -q "workers/cleanup.ts"; then
-              echo "cleanup_worker_changed=true" >> $GITHUB_OUTPUT
-            else
-              echo "cleanup_worker_changed=false" >> $GITHUB_OUTPUT
-            fi
-          else
-            # Compare changes between two tags
-            if git diff ${{ steps.previoustag.outputs.tag }}..HEAD --name-only | grep -q "workers/email-receiver.ts"; then
-              echo "email_worker_changed=true" >> $GITHUB_OUTPUT
-            else
-              echo "email_worker_changed=false" >> $GITHUB_OUTPUT
-            fi
-            if git diff ${{ steps.previoustag.outputs.tag }}..HEAD --name-only | grep -q "workers/cleanup.ts"; then
-              echo "cleanup_worker_changed=true" >> $GITHUB_OUTPUT
-            else
-              echo "cleanup_worker_changed=false" >> $GITHUB_OUTPUT
-            fi
-          fi
-
-      # Deploy Pages application
-      - name: Deploy Pages
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-        run: pnpm run deploy:pages
-
-      # Deploy email worker if changed
-      - name: Deploy Email Worker
-        if: steps.check_changes.outputs.email_worker_changed == 'true'
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-        run: pnpm run deploy:email
-
-      # Deploy cleanup worker if changed
-      - name: Deploy Cleanup Worker
-        if: steps.check_changes.outputs.cleanup_worker_changed == 'true'
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-        run: pnpm run deploy:cleanup
+          rm -f .env*.*
+          rm -f wrangler*.json

.gitignore

@@ -46,4 +46,8 @@ wrangler.email.toml
 wrangler.cleanup.toml
 
 public/workbox-*.js
-public/sw.js
+public/sw.js
+
+wrangler.json
+wrangler.cleanup.json
+wrangler.email.json

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.en.md

@@ -0,0 +1,618 @@
+
+<p align="center">
+  <img src="public/icons/icon-192x192.png" alt="MoeMail Logo" width="100" height="100">
+  <h1 align="center">MoeMail</h1>
+</p>
+
+<p align="center">
+  A cute temporary email service built with NextJS + Cloudflare technology stack 🎉
+</p>
+
+<p align="center">
+  <a href="./README.en.md">English</a> | 
+  <a href="./README.md">简体中文</a>
+</p>
+
+<p align="center">
+  <a href="#live-demo">Live Demo</a> •
+  <a href="#documentation">Documentation</a> •
+  <a href="#features">Features</a> •
+  <a href="#tech-stack">Tech Stack</a> •
+  <a href="#local-run">Local Run</a> •
+  <a href="#deployment">Deployment</a> •
+  <a href="#email-domain-configuration">Email Domain Config</a> •
+  <a href="#permission-system">Permission System</a> •
+  <a href="#system-settings">System Settings</a> •
+  <a href="#sending-emails">Sending Emails</a> •
+  <a href="#webhook-integration">Webhook Integration</a> •
+  <a href="#openapi">OpenAPI</a> •
+  <a href="#environment-variables">Environment Variables</a> •
+  <a href="#github-oauth-app-configuration">Github OAuth Config</a> •
+  <a href="#google-oauth-app-configuration">Google OAuth Config</a> •
+  <a href="#contribution">Contribution</a> •
+  <a href="#license">License</a> •
+  <a href="#community">Community</a> •
+  <a href="#support">Support</a>
+</p>
+
+## Live Demo
+[https://moemail.app](https://moemail.app)
+
+![Home](https://pic.otaku.ren/20241209/AQADwsUxG9k1uVZ-.jpg "Home")
+
+![Mailbox](https://pic.otaku.ren/20241209/AQADw8UxG9k1uVZ-.jpg "Mailbox")
+
+![Profile](https://pic.otaku.ren/20241227/AQADVsIxG7OzcFd-.jpg "Profile")
+
+## Documentation
+**Full Documentation**: [https://docs.moemail.app](https://docs.moemail.app)
+
+The documentation site contains detailed usage guides, API documentation, deployment tutorials, and other complete information.
+
+## Features
+
+- 🔒 **Privacy Protection**: Protect your real email address from spam and unnecessary subscriptions
+- ⚡ **Real-time Receipt**: Automatic polling, receive email notifications instantly
+- ⏱️ **Flexible Validity**: Supports 1 hour, 24 hours, 3 days, or permanent validity
+- 🎨 **Theme Switching**: Supports light and dark modes
+- 📱 **Responsive Design**: Perfectly adapted for desktop and mobile devices
+- 🔄 **Auto Cleanup**: Automatically cleans up expired mailboxes and emails
+- 📱 **PWA Support**: Support PWA installation
+- 💸 **Free Self-hosting**: Built on Cloudflare, capable of free self-hosting without any cost
+- 🎉 **Cute UI**: Simple and cute UI interface
+- 📤 **Sending Function**: Support sending emails using temporary addresses, based on Resend service
+- 🔔 **Webhook Notification**: Support receiving new email notifications via webhook
+- 🛡️ **Permission System**: Role-based access control system
+- 🔑 **OpenAPI**: Support accessing OpenAPI via API Key
+- 🌍 **Multi-language Support**: Supports Chinese and English interfaces, freely switchable
+
+## Tech Stack
+
+- **Framework**: [Next.js](https://nextjs.org/) (App Router)
+- **Platform**: [Cloudflare Pages](https://pages.cloudflare.com/)
+- **Database**: [Cloudflare D1](https://developers.cloudflare.com/d1/) (SQLite)
+- **Authentication**: [NextAuth](https://authjs.dev/getting-started/installation?framework=Next.js) with GitHub/Google Login
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
+- **UI Components**: Custom components based on [Radix UI](https://www.radix-ui.com/)
+- **Email Handling**: [Cloudflare Email Workers](https://developers.cloudflare.com/email-routing/)
+- **Type Safety**: [TypeScript](https://www.typescriptlang.org/)
+- **ORM**: [Drizzle ORM](https://orm.drizzle.team/)
+- **Internationalization**: [next-intl](https://next-intl-docs.vercel.app/)
+
+## Local Run
+
+### Prerequisites
+
+- Node.js 18+
+- Pnpm
+- Wrangler CLI
+- Cloudflare Account
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/beilunyang/moemail.git
+cd moemail
+```
+
+2. Install dependencies:
+```bash
+pnpm install
+```
+
+3. Setup Wrangler:
+```bash
+cp wrangler.example.json wrangler.json
+cp wrangler.email.example.json wrangler.email.json
+cp wrangler.cleanup.example.json wrangler.cleanup.json
+```
+Set Cloudflare D1 database name and database ID.
+
+4. Setup Environment Variables:
+```bash
+cp .env.example .env.local
+```
+Set `AUTH_GITHUB_ID`, `AUTH_GITHUB_SECRET`, `AUTH_SECRET`.
+
+5. Create local database schema:
+```bash
+pnpm db:migrate-local
+```
+
+### Development
+
+1. Start development server:
+```bash
+pnpm dev
+```
+
+2. Test Email Worker:
+Currently cannot run and test locally, please use Wrangler to deploy the email worker and test.
+```bash
+pnpm deploy:email
+```
+
+3. Test Cleanup Worker:
+```bash
+pnpm dev:cleanup
+pnpm test:cleanup
+```
+
+4. Generate Mock Data (Mailboxes and Messages):
+```bash
+pnpm generate-test-data
+```
+
+## Deployment
+
+### Video Tutorial
+https://www.youtube.com/watch?v=Vcw3nqsq2-E
+
+### Local Wrangler Deployment
+1. Create .env file
+```bash
+cp .env.example .env
+```
+2. Set [Environment Variables](#environment-variables) in the .env file.
+
+3. Run deployment script
+```bash
+pnpm dlx tsx ./scripts/deploy/index.ts
+```
+
+### Github Actions Deployment
+
+This project supports automated deployment using GitHub Actions. It supports the following triggers:
+
+1. **Auto Trigger**: Automatically triggers deployment flow when a new tag is pushed.
+2. **Manual Trigger**: Manually trigger in the GitHub Actions page.
+
+#### Deployment Steps
+
+1. Add the following Secrets in GitHub repository settings:
+   - `CLOUDFLARE_API_TOKEN`: Cloudflare API Token
+   - `CLOUDFLARE_ACCOUNT_ID`: Cloudflare Account ID
+   - `AUTH_GITHUB_ID`: GitHub OAuth App ID
+   - `AUTH_GITHUB_SECRET`: GitHub OAuth App Secret
+   - `AUTH_SECRET`: NextAuth Secret, used to encrypt session, please set a random string
+   - `CUSTOM_DOMAIN`: Custom domain for the website (Optional, if empty, uses Cloudflare Pages default domain)
+   - `PROJECT_NAME`: Pages project name (Optional, if empty, defaults to moemail)
+   - `DATABASE_NAME`: D1 database name (Optional, if empty, defaults to moemail-db)
+   - `KV_NAMESPACE_NAME`: Cloudflare KV namespace name, used for site settings (Optional, if empty, defaults to moemail-kv)
+
+2. Choose trigger method:
+
+   **Method 1: Push Tag Trigger**
+   ```bash
+   # Create a new tag
+   git tag v1.0.0
+   
+   # Push tag to remote repository
+   git push origin v1.0.0
+   ```
+
+   **Method 2: Manual Trigger**
+   - Go to the Actions page of the repository
+   - Select "Deploy" workflow
+   - Click "Run workflow"
+
+3. Deployment progress can be viewed in the Actions tab of the repository.
+
+#### Notes
+- Ensure all Secrets are set correctly.
+- When using tag trigger, the tag must start with `v` (e.g., v1.0.0).
+
+[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/beilunyang/moemail)
+
+
+## Email Domain Configuration
+
+In the MoeMail User Profile page, you can configure the site's email domains. Supports multiple domain configurations, separated by commas.
+![Email Domain Configuration](https://pic.otaku.ren/20241227/AQAD88AxG67zeVd-.jpg "Email Domain Configuration")
+
+### Cloudflare Email Routing Configuration
+
+To make email domains effective, you also need to configure email routing in the Cloudflare console to forward received emails to the Email Worker.
+
+1. Login to [Cloudflare Console](https://dash.cloudflare.com/)
+2. Select your domain
+3. Click "Email" -> "Email Routing" in the left menu
+4. If it shows "Email Routing is currently disabled", please click "Enable Email Routing"
+![Enable Email Routing](https://pic.otaku.ren/20241223/AQADNcQxG_K0SVd-.jpg "Enable Email Routing")
+5. After clicking, it will prompt you to add Email Routing DNS records, click "Add records and enable"
+![Add DNS Records](https://pic.otaku.ren/20241223/AQADN8QxG_K0SVd-.jpg "Add DNS Records")
+6. Configure Routing Rules:
+   - Catch-all address: Enable "Catch-all"
+   - Edit Catch-all address
+    - Action: Select "Send to Worker"
+    - Destination: Select the "email-receiver-worker" you just deployed
+    - Save
+  ![Configure Routing Rules](https://pic.otaku.ren/20241223/AQADNsQxG_K0SVd-.jpg "Configure Routing Rules")
+
+### Notes
+- Ensure domain DNS is hosted on Cloudflare.
+- Email Worker must be successfully deployed.
+- If Catch-All status is unavailable (stuck loading), please click `Destination addresses` next to `Routing rules`, and bind an email address there.
+
+## Permission System
+
+The project uses a Role-Based Access Control (RBAC) system.
+
+### Role Configuration
+
+New user default roles are configured by the Emperor in the site settings in the User Profile:
+- Duke: New users get temporary email, Webhook config permissions, and API Key management permissions.
+- Knight: New users get temporary email and Webhook config permissions.
+- Civilian: New users have no permissions, need to wait for Emperor to promote to Knight or Duke.
+
+### Role Levels
+
+The system includes four role levels:
+
+1. **Emperor**
+   - Website Owner
+   - Has all permissions
+   - Only one Emperor per site
+
+2. **Duke**
+   - Super User
+   - Can use temporary email features
+   - Can configure Webhook
+   - Can create API Key to call OpenAPI
+   - Can be demoted to Knight or Civilian by Emperor
+
+3. **Knight**
+   - Advanced User
+   - Can use temporary email features
+   - Can configure Webhook
+   - Can be demoted to Civilian or promoted to Duke by Emperor
+
+4. **Civilian**
+   - Regular User
+   - No permissions
+   - Can be promoted to Knight or Duke by Emperor
+
+### Role Upgrade
+
+1. **Become Emperor**
+   - The first user to visit `/api/roles/init-emperor` interface will become the Emperor (Website Owner).
+   - Once an Emperor exists, no other user can be promoted to Emperor.
+
+2. **Role Changes**
+   - The Emperor can set other users as Duke, Knight, or Civilian in the User Profile page.
+
+### Permission Details
+
+- **Email Management**: Create and manage temporary emails
+- **Webhook Management**: Configure Webhooks for email notifications
+- **API Key Management**: Create and manage API access keys
+- **User Management**: Promote/Demote user roles
+- **System Settings**: Manage global system settings
+
+## System Settings
+
+System settings are stored in Cloudflare KV, including:
+
+- `DEFAULT_ROLE`: Default role for new users, values: `CIVILIAN`, `KNIGHT`, `DUKE`
+- `EMAIL_DOMAINS`: Supported email domains, comma-separated
+- `ADMIN_CONTACT`: Administrator contact info
+- `MAX_EMAILS`: Maximum number of emails per user
+
+**Emperor** role can configure these in the User Profile page.
+
+## Sending Emails
+
+MoeMail supports sending emails using temporary addresses, based on [Resend](https://resend.com/) service.
+
+### Features
+
+- 📨 **Send from Temp Email**: Use created temporary emails as sender
+- 🎯 **Role Limits**: Different roles have different daily sending limits
+- 💌 **HTML Support**: Supports rich text email format
+
+### Role Sending Limits
+
+| Role | Daily Limit | Description |
+|------|-------------|-------------|
+| Emperor | Unlimited | Admin has no limits |
+| Duke | 5/day | Default 5 emails per day |
+| Knight | 2/day | Default 2 emails per day |
+| Civilian | Forbidden | No sending permission |
+
+> 💡 **Tip**: The Emperor can customize the daily limits for Dukes and Knights in the Mail Service Configuration.
+
+### Configure Sending Service
+
+1. **Get Resend API Key**
+   - Register at [Resend](https://resend.com/)
+   - Create API Key in console
+   - Copy API Key for later use
+
+2. **Configure Service**
+   - Login as Emperor
+   - Go to User Profile
+   - In "Resend Service Configuration":
+     - Enable Sending Service switch
+     - Enter Resend API Key
+     - Set daily limits for Duke and Knight (Optional)
+   - Save configuration
+
+3. **Verify Configuration**
+   - After saving, authorized users will see a "Send Email" button in the email list
+   - Click to open dialog and test
+
+### How to Send
+
+1. **Create Temp Email**
+   - Create a new temporary email in Mailbox page
+
+2. **Send Email**
+   - Find the email in the list
+   - Click "Send Email" button next to it
+   - Fill in:
+     - Recipient address
+     - Subject
+     - Content (supports HTML)
+   - Click "Send"
+
+3. **View History**
+   - Sent emails are saved in the message list of the corresponding mailbox
+   - View all sent/received emails in mailbox detail page
+
+### Notes
+
+- 📋 **Resend Limits**: Please note Resend's sending limits and pricing
+- 🔐 **Domain Verification**: Using custom domains requires verification in Resend
+- 🚫 **Anti-Spam**: Please follow email sending standards, avoid spamming
+- 📊 **Quota Monitoring**: System counts daily usage, stops sending when limit reached
+- 🔄 **Quota Reset**: Daily quota resets at 00:00
+
+## Webhook Integration
+
+When a new email is received, the system sends a POST request to the configured and enabled Webhook URL.
+
+### Request Header
+```http
+Content-Type: application/json
+X-Webhook-Event: new_message
+```
+
+### Request Body
+```json
+{
+  "emailId": "email-uuid",
+  "messageId": "message-uuid",
+  "fromAddress": "sender@example.com",
+  "subject": "Email Subject",
+  "content": "Email Text Content",
+  "html": "Email HTML Content",
+  "receivedAt": "2024-01-01T12:00:00.000Z",
+  "toAddress": "your-email@moemail.app"
+}
+```
+
+### Configuration
+1. Click avatar to enter User Profile
+2. Enable Webhook
+3. Set notification URL
+4. Click Test button
+5. Save to receive notifications
+
+### Testing
+
+The project provides a simple test server:
+
+```bash
+pnpm webhook-test-server
+```
+
+The test server listens on port 3001 (http://localhost:3001) and prints received Webhook details.
+
+For external testing, use Cloudflare Tunnel:
+```bash
+pnpx cloudflared tunnel --url http://localhost:3001
+```
+
+### Notes
+- Webhook must respond within 10 seconds
+- Non-2xx response triggers retry
+
+## OpenAPI
+
+The project provides OpenAPI interfaces, accessible via API Key. API Keys can be created in User Profile (Requires Duke or Emperor role).
+
+### Using API Key
+
+Add API Key to request header:
+```http
+X-API-Key: YOUR_API_KEY
+```
+
+### API Endpoints
+
+#### Get System Config
+```http
+GET /api/config
+```
+Response:
+```json
+{
+  "defaultRole": "CIVILIAN",
+  "emailDomains": "moemail.app,example.com",
+  "adminContact": "admin@example.com",
+  "maxEmails": "10"
+}
+```
+
+#### Generate Temp Email
+```http
+POST /api/emails/generate
+Content-Type: application/json
+
+{
+  "name": "test",
+  "expiryTime": 3600000,
+  "domain": "moemail.app"
+}
+```
+Params:
+- `name`: Prefix (optional)
+- `expiryTime`: Validity in ms. 3600000(1h), 86400000(24h), 604800000(7d), 0(Permanent)
+- `domain`: From config
+
+Response:
+```json
+{
+  "id": "email-uuid-123",
+  "email": "test@moemail.app"
+}
+```
+
+#### Get Email List
+```http
+GET /api/emails?cursor=xxx
+```
+
+#### Get Messages for Email
+```http
+GET /api/emails/{emailId}?cursor=xxx
+```
+
+#### Delete Email
+```http
+DELETE /api/emails/{emailId}
+```
+
+#### Get Single Message
+```http
+GET /api/emails/{emailId}/{messageId}
+```
+
+#### Create Email Share Link
+```http
+POST /api/emails/{emailId}/share
+Content-Type: application/json
+
+{
+  "expiresIn": 86400000
+}
+```
+
+#### Get Email Share Links
+```http
+GET /api/emails/{emailId}/share
+```
+
+#### Delete Email Share Link
+```http
+DELETE /api/emails/{emailId}/share/{shareId}
+```
+
+#### Create Message Share Link
+```http
+POST /api/emails/{emailId}/messages/{messageId}/share
+Content-Type: application/json
+
+{
+  "expiresIn": 86400000
+}
+```
+
+#### Get Message Share Links
+```http
+GET /api/emails/{emailId}/messages/{messageId}/share
+```
+
+#### Delete Message Share Link
+```http
+DELETE /api/emails/{emailId}/messages/{messageId}/share/{shareId}
+```
+
+## Environment Variables
+
+### Authentication
+- `AUTH_GITHUB_ID`: GitHub OAuth App ID
+- `AUTH_GITHUB_SECRET`: GitHub OAuth App Secret
+- `AUTH_GOOGLE_ID`: Google OAuth App ID
+- `AUTH_GOOGLE_SECRET`: Google OAuth App Secret
+- `AUTH_SECRET`: NextAuth Secret
+
+### Cloudflare
+- `CLOUDFLARE_API_TOKEN`: Cloudflare API Token
+- `CLOUDFLARE_ACCOUNT_ID`: Cloudflare Account ID
+- `DATABASE_NAME`: D1 Database Name
+- `DATABASE_ID`: D1 Database ID (Optional, auto-fetched if empty)
+- `KV_NAMESPACE_NAME`: KV Name
+- `KV_NAMESPACE_ID`: KV ID (Optional, auto-fetched if empty)
+- `CUSTOM_DOMAIN`: Custom domain
+- `PROJECT_NAME`: Pages Project Name
+
+## Github OAuth App Configuration
+
+1. Login [Github Developer](https://github.com/settings/developers) create new OAuth App
+2. Generate `Client ID` and `Client Secret`
+3. Configure:
+   - `Application name`: `<your-app-name>`
+   - `Homepage URL`: `https://<your-domain>`
+   - `Authorization callback URL`: `https://<your-domain>/api/auth/callback/github`
+
+## Google OAuth App Configuration
+
+1. Visit [Google Cloud Console](https://console.cloud.google.com/) create project
+2. Configure OAuth consent screen
+3. Create OAuth Client ID
+   - Type: Web application
+   - Authorized Javascript origins: `https://<your-domain>`
+   - Authorized redirect URIs: `https://<your-domain>/api/auth/callback/google`
+4. Get `Client ID` and `Client Secret`
+5. Configure env vars `AUTH_GOOGLE_ID` and `AUTH_GOOGLE_SECRET`
+
+## Contribution
+
+Welcome to submit Pull Requests or Issues to help improve this project.
+
+## License
+
+[MIT](LICENSE)
+
+## Community
+<table>
+  <tr style="max-width: 360px">
+    <td>
+      <img src="https://pic.otaku.ren/20250309/AQADAcQxGxQjaVZ-.jpg" />
+    </td>
+    <td>
+      <img src="https://pic.otaku.ren/20250309/AQADCMQxGxQjaVZ-.jpg" />
+    </td>
+  </tr>
+  <tr style="max-width: 360px">
+    <td>
+      Follow official account for more project updates, AI, Blockchain, and Indie Dev news.
+    </td>
+    <td>
+      Add WeChat, remark "MoeMail" to join the WeChat community group.
+    </td>
+  </tr>
+</table>
+
+## Support
+
+If you like this project, please give it a Star ⭐️
+Or sponsor it
+<br />
+<br />
+<img src="https://pic.otaku.ren/20240212/AQADPrgxGwoIWFZ-.jpg" style="width: 400px;"/>
+<br />
+<br />
+<a href="https://www.buymeacoffee.com/beilunyang" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="width: 400px;" ></a>
+
+## Star History
+
+<a href="https://www.star-history.com/#beilunyang/moemail&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=beilunyang/moemail&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=beilunyang/moemail&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=beilunyang/moemail&type=Date" />
+ </picture>
+</a>

README.md

@@ -7,12 +7,27 @@
   一个基于 NextJS + Cloudflare 技术栈构建的可爱临时邮箱服务🎉
 </p>
 
+<p align="center">
+  <a href="./README.md">简体中文</a> | 
+  <a href="./README.en.md">English</a> 
+</p>
+
 <p align="center">
   <a href="#在线演示">在线演示</a> •
+  <a href="#文档">文档</a> •
   <a href="#特性">特性</a> •
   <a href="#技术栈">技术栈</a> •
   <a href="#本地运行">本地运行</a> •
   <a href="#部署">部署</a> •
+  <a href="#邮箱域名配置">邮箱域名配置</a> •
+  <a href="#权限系统">权限系统</a> •
+  <a href="#系统设置">系统设置</a> •
+  <a href="#发件功能">发件功能</a> •
+  <a href="#Webhook 集成">Webhook 集成</a> •
+  <a href="#OpenAPI">OpenAPI</a> •
+  <a href="#环境变量">环境变量</a> •
+  <a href="#Github OAuth App 配置">Github OAuth App 配置</a> •
+  <a href="#Google OAuth App 配置">Google OAuth App 配置</a> •
   <a href="#贡献">贡献</a> •
   <a href="#许可证">许可证</a> •
   <a href="#交流群">交流群</a> •
@@ -27,20 +42,29 @@
 
 ![邮箱](https://pic.otaku.ren/20241209/AQADw8UxG9k1uVZ-.jpg "邮箱")
 
-![个人中心](https://pic.otaku.ren/20241217/AQAD9sQxG0g1EVd-.jpg "个人中心")
+![个人中心](https://pic.otaku.ren/20241227/AQADVsIxG7OzcFd-.jpg "个人中心")
+
+## 文档
+**完整文档**: [https://docs.moemail.app](https://docs.moemail.app)
+
+文档站点包含详细的使用指南、API 文档、部署教程等完整信息。
 
 ## 特性
 
 - 🔒 **隐私保护**：保护您的真实邮箱地址，远离垃圾邮件和不必要的订阅
 - ⚡ **实时收件**：自动轮询，即时接收邮件通知
-- ⏱️ **灵活过期**：支持 1 小时、24 小时或 3 天的过期时间选择
+- ⏱️ **灵活有效期**：支持 1 小时、24 小时、3 天或永久有效
 - 🎨 **主题切换**：支持亮色和暗色模式
 - 📱 **响应式设计**：完美适配桌面和移动设备
 - 🔄 **自动清理**：自动清理过期的邮箱和邮件
 - 📱 **PWA 支持**：支持 PWA 安装
 - 💸 **免费自部署**：基于 Cloudflare 构建, 可实现免费自部署，无需任何费用
 - 🎉 **可爱的 UI**：简洁可爱萌萌哒 UI 界面
+- 📤 **发件功能**：支持使用临时邮箱发送邮件，基于 Resend 服务
 - 🔔 **Webhook 通知**：支持通过 webhook 接收新邮件通知
+- 🛡️ **权限系统**：支持基于角色的权限控制系统
+- 🔑 **OpenAPI**：支持通过 API Key 访问 OpenAPI
+- 🌍 **多语言支持**：支持中文和英文界面，可自由切换
 
 ## 技术栈
 
@@ -53,13 +77,14 @@
 - **邮件处理**: [Cloudflare Email Workers](https://developers.cloudflare.com/email-routing/)
 - **类型安全**: [TypeScript](https://www.typescriptlang.org/)
 - **ORM**: [Drizzle ORM](https://orm.drizzle.team/)
+- **国际化**: [next-intl](https://next-intl-docs.vercel.app/) 支持多语言
 
 ## 本地运行
 
 ### 前置要求
 
 - Node.js 18+
-- pnpm
+- Pnpm
 - Wrangler CLI
 - Cloudflare 账号
 
@@ -78,9 +103,9 @@ pnpm install
 
 3. 设置 wrangler：
 ```bash
-cp wrangler.example.toml wrangler.toml
-cp wrangler.email.example.toml wrangler.email.toml
-cp wrangler.cleanup.example.toml wrangler.cleanup.toml
+cp wrangler.example.json wrangler.json
+cp wrangler.email.example.json wrangler.email.json
+cp wrangler.cleanup.example.json wrangler.cleanup.json
 ```
 设置 Cloudflare D1 数据库名以及数据库 ID
 
@@ -118,84 +143,229 @@ pnpm test:cleanup
 ```bash
 pnpm generate-test-data
 ```
-
 ## 部署
 
+### 视频版保姆级部署教程
+https://www.bilibili.com/video/BV19wrXY2ESM/
+
 ### 本地 Wrangler 部署
-
-1. 设置 wrangler：
+1. 创建 .env 文件
 ```bash
-cp wrangler.example.toml wrangler.toml
-cp wrangler.email.example.toml wrangler.email.toml
-cp wrangler.cleanup.example.toml wrangler.cleanup.toml
+cp .env.example .env
 ```
-设置 Cloudflare D1 数据库名以及数据库 ID
+2. 在 .env 文件中设置[环境变量](#环境变量)
 
-2. 创建云端 D1 数据库表结构
+3. 运行部署脚本
 ```bash
-pnpm db:migrate-remote
-```
-
-2. 部署主应用到 Cloudflare Pages：
-```bash
-pnpm deploy:pages
-```
-
-3. 部署邮件 worker：
-```bash
-pnpm deploy:email
-```
-
-4. 部署清理 worker：
-```bash
-pnpm deploy:cleanup
+pnpm dlx tsx ./scripts/deploy/index.ts
 ```
 
 ### Github Actions 部署
 
-本项目可使用 GitHub Actions 实现自动化部署。当推送新的 tag 时会触发部署流程。
+本项目可使用 GitHub Actions 实现自动化部署。支持以下触发方式：
+
+1. **自动触发**：推送新的 tag 时自动触发部署流程
+2. **手动触发**：在 GitHub Actions 页面手动触发
+
+#### 部署步骤
 
 1. 在 GitHub 仓库设置中添加以下 Secrets：
+   - `CLOUDFLARE_API_TOKEN`: Cloudflare API 令牌
+   - `CLOUDFLARE_ACCOUNT_ID`: Cloudflare 账户 ID
+   - `AUTH_GITHUB_ID`: GitHub OAuth App ID
+   - `AUTH_GITHUB_SECRET`: GitHub OAuth App Secret
+   - `AUTH_SECRET`: NextAuth Secret，用来加密 session，请设置一个随机字符串
+   - `CUSTOM_DOMAIN`: 网站自定义域名，用于访问 MoeMail (可选， 如果不填, 则会使用 Cloudflare Pages 默认域名)
+   - `PROJECT_NAME`: Pages 项目名 （可选，如果不填，则为 moemail） 
+   - `DATABASE_NAME`: D1 数据库名称 (可选，如果不填，则为 moemail-db)
+   - `KV_NAMESPACE_NAME`: Cloudflare KV namespace 名称，用于存储网站配置 （可选，如果不填，则为 moemail-kv）
 
-- `CLOUDFLARE_API_TOKEN`: Cloudflare API 令牌
-- `CLOUDFLARE_ACCOUNT_ID`: Cloudflare 账户 ID
-- `DATABASE_NAME`: D1 数据库名称
-- `DATABASE_ID`: D1 数据库 ID
+2. 选择触发方式：
 
-2. 创建并推送新的 tag 来触发部署：
+   **方式一：推送 tag 触发**
+   ```bash
+   # 创建新的 tag
+   git tag v1.0.0
+   
+   # 推送 tag 到远程仓库
+   git push origin v1.0.0
+   ```
 
-```bash
-# 创建新的 tag
-git tag v1.0.0
+   **方式二：手动触发**
+   - 进入仓库的 Actions 页面
+   - 选择 "Deploy" workflow
+   - 点击 "Run workflow"
 
-# 推送 tag 到远程仓库
-git push origin v1.0.0
-```
+3. 部署进度可以在仓库的 Actions 标签页查看
 
-3. GitHub Actions 会自动执行以下任务：
-
-- 构建并部署主应用到 Cloudflare Pages
-- 检测并部署更新的 Email Worker
-- 检测并部署更新的 Cleanup Worker
-
-4. 部署进度可以在仓库的 Actions 标签页查看
-
-注意事项：
+#### 注意事项
 - 确保所有 Secrets 都已正确设置
-- tag 必须以 `v` 开头（例如：v1.0.0）
-- 只有推送 tag 才会触发部署，普通的 commit 不会触发
-- 如果只修改了某个 worker，只会部署该 worker
+- 使用 tag 触发时，tag 必须以 `v` 开头（例如：v1.0.0）
 
 [![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/beilunyang/moemail)
 
 
-### 初次部署完成后
-初次通过本地 Wrangler 或者 Github Actions 部署完成后，请登录到 Cloudflare 控制台，添加 AUTH 认证 相关 SECRETS
-- 登录 [Cloudflare 控制台](https://dash.cloudflare.com/) 并选择你的账户
-- 选择 Workers 和 Pages
-- 在 Overview 中选择刚刚部署的 Cloudflare Pages
-- 在 Settings 中选择变量和机密
-- 添加 AUTH_GITHUB_ID, AUTH_GITHUB_SECRET, AUTH_SECRET
+## 邮箱域名配置
+
+在 MoeMail 个人中心页面，可以配置网站的邮箱域名，支持多域名配置，多个域名用逗号分隔
+![邮箱域名配置](https://pic.otaku.ren/20241227/AQAD88AxG67zeVd-.jpg "邮箱域名配置")
+
+### Cloudflare 邮件路由配置
+
+为了使邮箱域名生效，还需要在 Cloudflare 控制台配置邮件路由，将收到的邮件转发给 Email Worker 处理。
+
+1. 登录 [Cloudflare 控制台](https://dash.cloudflare.com/)
+2. 选择您的域名
+3. 点击左侧菜单的 "电子邮件" -> "电子邮件路由"
+4. 如果显示 “电子邮件路由当前被禁用，没有在路由电子邮件”，请点击 "启用电子邮件路由"
+![启用电子邮件路由](https://pic.otaku.ren/20241223/AQADNcQxG_K0SVd-.jpg "启用电子邮件路由")
+5. 点击后，会提示你添加电子邮件路由 DNS 记录，点击 “添加记录并启用” 即可
+![添加电子邮件路由 DNS 记录](https://pic.otaku.ren/20241223/AQADN8QxG_K0SVd-.jpg "添加电子邮件路由 DNS 记录")
+6. 配置路由规则：
+   - Catch-all 地址: 启用 "Catch-all"
+   - 编辑 Catch-all 地址
+    - 操作: 选择 "发送到 Worker"
+    - 目标位置: 选择刚刚部署的 "email-receiver-worker"
+    - 保存
+  ![配置路由规则](https://pic.otaku.ren/20241223/AQADNsQxG_K0SVd-.jpg "配置路由规则")
+
+### 注意事项
+- 确保域名的 DNS 托管在 Cloudflare
+- Email Worker 必须已经部署成功
+- 如果 Catch-All 状态不可用(一直 loading)，请点击`路由规则`旁边的`目标地址`, 进去绑定一个邮箱
+
+## 权限系统
+
+本项目采用基于角色的权限控制系统（RBAC）。
+
+### 角色配置
+
+新用户默认角色由皇帝在个人中心的网站设置中配置：
+- 公爵：新用户将获得临时邮箱、Webhook 配置权限以及 API Key 管理权限
+- 骑士：新用户将获得临时邮箱和 Webhook 配置权限
+- 平民：新用户无任何权限，需要等待皇帝册封为骑士或公爵
+
+### 角色等级
+
+系统包含四个角色等级：
+
+1. **皇帝（Emperor）**
+   - 网站所有者
+   - 拥有所有权限
+   - 每个站点只能有一个皇帝
+
+2. **公爵（Duke）**  
+   - 超级用户
+   - 可以使用临时邮箱功能
+   - 可以配置 Webhook
+   - 可以使用创建 API Key 调用 OpenAPI
+   - 可以被皇帝贬为骑士或平民
+
+3. **骑士（Knight）**
+   - 高级用户
+   - 可以使用临时邮箱功能
+   - 可以配置 Webhook
+   - 可以被皇帝贬为平民或册封为公爵
+
+3. **平民（Civilian）**
+   - 普通用户
+   - 无任何权限
+   - 可以被皇帝册封为骑士或者公爵
+
+### 角色升级
+
+1. **成为皇帝**
+   - 第一个访问 `/api/roles/init-emperor` 接口的用户将成为皇帝，即网站所有者
+   - 站点已有皇帝后，无法再提升其他用户为皇帝
+
+2. **角色变更**
+   - 皇帝可以在个人中心页面将其他用户设为公爵、骑士或平民
+
+### 权限说明
+
+- **邮箱管理**：创建和管理临时邮箱
+- **Webhook 管理**：配置邮件通知的 Webhook
+- **API Key 管理**：创建和管理 API 访问密钥
+- **用户管理**：升降用户角色
+- **系统设置**：管理系统全局设置
+
+## 系统设置
+
+系统设置存储在 Cloudflare KV 中，包括以下内容：
+
+- `DEFAULT_ROLE`: 新注册用户默认角色，可选值为 `CIVILIAN`、`KNIGHT`、`DUKE`
+- `EMAIL_DOMAINS`: 支持的邮箱域名，多个域名用逗号分隔
+- `ADMIN_CONTACT`: 管理员联系方式
+- `MAX_EMAILS`: 每个用户可创建的最大邮箱数量
+
+**皇帝**角色可以在个人中心页面设置
+
+## 发件功能
+
+MoeMail 支持使用临时邮箱发送邮件，基于 [Resend](https://resend.com/) 服务。
+
+### 功能特性
+
+- 📨 **临时邮箱发件**：可以使用创建的临时邮箱作为发件人发送邮件
+- 🎯 **角色权限控制**：不同角色有不同的每日发件限制
+- 💌 **支持 HTML**：支持发送富文本格式邮件
+
+### 角色发件权限
+
+| 角色 | 每日发件限制 | 说明 |
+|------|-------------|------|
+| 皇帝 (Emperor) | 无限制 | 网站管理员，无发件限制 |
+| 公爵 (Duke) | 5封/天 | 默认每日可发送5封邮件 |
+| 骑士 (Knight) | 2封/天 | 默认每日可发送2封邮件 |
+| 平民 (Civilian) | 禁止发件 | 无发件权限 |
+
+> 💡 **提示**：皇帝可以在个人中心的邮件服务配置中自定义公爵和骑士的每日发件限制。
+
+### 配置发件服务
+
+1. **获取 Resend API Key**
+   - 访问 [Resend 官网](https://resend.com/) 注册账号
+   - 在控制台中创建 API Key
+   - 复制 API Key 供后续配置使用
+
+2. **配置发件服务**
+   - 皇帝角色登录 MoeMail
+   - 进入个人中心页面
+   - 在"Resend 发件服务配置"部分：
+     - 启用发件服务开关
+     - 填入 Resend API Key
+     - 设置公爵和骑士的每日发件限制（可选）
+   - 点击保存配置
+
+3. **验证配置**
+   - 配置保存后，有权限的用户在邮箱列表页面会看到"发送邮件"按钮
+   - 点击按钮可以打开发件对话框进行测试
+
+### 使用发件功能
+
+1. **创建临时邮箱**
+   - 在邮箱页面创建一个新的临时邮箱
+
+2. **发送邮件**
+   - 在邮箱列表中找到要使用的邮箱
+   - 点击邮箱旁边的"发送邮件"按钮
+   - 在弹出的对话框中填写：
+     - 收件人邮箱地址
+     - 邮件主题
+     - 邮件内容（支持 HTML 格式）
+   - 点击"发送"按钮
+
+3. **查看发送记录**
+   - 发送的邮件会自动保存到对应邮箱的消息列表中
+   - 可以在邮箱详情页面查看所有发送和接收的邮件
+
+### 注意事项
+
+- 📋 **Resend 限制**：请注意 Resend 服务的发送限制和定价政策
+- 🔐 **域名验证**：使用自定义域名发件需要在 Resend 中验证域名
+- 🚫 **反垃圾邮件**：请遵守邮件发送规范，避免发送垃圾邮件
+- 📊 **配额监控**：系统会自动统计每日发件数量，达到限额后将无法继续发送
+- 🔄 **配额重置**：每日发件配额在每天 00:00 自动重置
 
 ## Webhook 集成
 
@@ -236,7 +406,7 @@ X-Webhook-Event: new_message
 pnpm webhook-test-server
 ```
 
-测试服务器会在本地启动一个 HTTP 服务器，监听 3001 端口（http://localhost:3001），并打印收到的 Webhook 消息详情。
+测试服务器会在本地启动一个 HTTP 服务器，监听 3001 端口（http://localhost:3001）, 并打印收到的 Webhook 消息详情。
 
 如果需要进行外网测试，可以通过 Cloudflare Tunnel 将服务暴露到外网：
 ```bash
@@ -247,19 +417,440 @@ pnpx cloudflared tunnel --url http://localhost:3001
 - Webhook 接口应在 10 秒内响应
 - 非 2xx 响应码会触发重试
 
+## OpenAPI
+
+本项目提供了 OpenAPI 接口，支持通过 API Key 进行访问。API Key 可以在个人中心页面创建（需要是公爵或皇帝角色）。
+
+### 使用 API Key
+
+在请求头中添加 API Key：
+```http
+X-API-Key: YOUR_API_KEY
+```
+
+### API 接口
+
+#### 获取系统配置
+```http
+GET /api/config
+```
+返回响应：
+```json
+{
+  "defaultRole": "CIVILIAN",
+  "emailDomains": "moemail.app,example.com",
+  "adminContact": "admin@example.com",
+  "maxEmails": "10"
+}
+```
+响应字段说明：
+- `defaultRole`: 新用户默认角色，可选值：`CIVILIAN`（平民）、`KNIGHT`（骑士）、`DUKE`（公爵）
+- `emailDomains`: 支持的邮箱域名，多个域名用逗号分隔
+- `adminContact`: 管理员联系方式
+- `maxEmails`: 每个用户可创建的最大邮箱数量
+
+#### 创建临时邮箱
+```http
+POST /api/emails/generate
+Content-Type: application/json
+
+{
+  "name": "test",
+  "expiryTime": 3600000,
+  "domain": "moemail.app"
+}
+```
+参数说明：
+- `name`: 邮箱前缀，可选
+- `expiryTime`: 有效期（毫秒），可选值：3600000（1小时）、86400000（1天）、604800000（7天）、0（永久）
+- `domain`: 邮箱域名，可通过 `/api/config` 接口获取
+
+返回响应：
+```json
+{
+  "id": "email-uuid-123",
+  "email": "test@moemail.app"
+}
+```
+响应字段说明：
+- `id`: 邮箱的唯一标识符
+- `email`: 创建的邮箱地址
+
+#### 获取邮箱列表
+```http
+GET /api/emails?cursor=xxx
+```
+参数说明：
+- `cursor`: 分页游标，可选
+
+返回响应：
+```json
+{
+  "emails": [
+    {
+      "id": "email-uuid-123",
+      "address": "test@moemail.app",
+      "createdAt": "2024-01-01T12:00:00.000Z",
+      "expiresAt": "2024-01-02T12:00:00.000Z",
+      "userId": "user-uuid-456"
+    }
+  ],
+  "nextCursor": "encoded-cursor-string",
+  "total": 5
+}
+```
+响应字段说明：
+- `emails`: 邮箱列表数组
+- `nextCursor`: 下一页游标，用于分页请求
+- `total`: 邮箱总数量
+
+#### 获取指定邮箱邮件列表
+```http
+GET /api/emails/{emailId}?cursor=xxx
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+- `cursor`: 分页游标，可选
+
+返回响应：
+```json
+{
+  "messages": [
+    {
+      "id": "message-uuid-789",
+      "from_address": "sender@example.com",
+      "subject": "邮件主题",
+      "received_at": 1704110400000
+    }
+  ],
+  "nextCursor": "encoded-cursor-string",
+  "total": 3
+}
+```
+响应字段说明：
+- `messages`: 邮件列表数组
+- `nextCursor`: 下一页游标，用于分页请求
+- `total`: 邮件总数量
+
+#### 删除邮箱
+```http
+DELETE /api/emails/{emailId}
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+
+返回响应：
+```json
+{
+  "success": true
+}
+```
+响应字段说明：
+- `success`: 删除操作是否成功
+
+#### 获取单封邮件内容
+```http
+GET /api/emails/{emailId}/{messageId}
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+- `messageId`: 邮件的唯一标识符，必填
+
+返回响应：
+```json
+{
+  "message": {
+    "id": "message-uuid-789",
+    "from_address": "sender@example.com",
+    "subject": "邮件主题",
+    "content": "邮件文本内容",
+    "html": "<p>邮件HTML内容</p>",
+    "received_at": 1704110400000
+  }
+}
+```
+响应字段说明：
+- `message`: 邮件详细信息对象
+- `id`: 邮件的唯一标识符
+- `from_address`: 发件人邮箱地址
+- `subject`: 邮件主题
+- `content`: 邮件纯文本内容
+- `html`: 邮件HTML内容
+- `received_at`: 接收时间（时间戳）
+
+#### 创建邮箱分享链接
+```http
+POST /api/emails/{emailId}/share
+Content-Type: application/json
+
+{
+  "expiresIn": 86400000
+}
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+- `expiresIn`: 分享链接有效期（毫秒），0 表示永久有效，可选
+
+返回响应：
+```json
+{
+  "id": "share-uuid-123",
+  "emailId": "email-uuid-123",
+  "token": "abc123def456",
+  "expiresAt": "2024-01-02T12:00:00.000Z",
+  "createdAt": "2024-01-01T12:00:00.000Z"
+}
+```
+响应字段说明：
+- `id`: 分享记录的唯一标识符
+- `emailId`: 关联的邮箱 ID
+- `token`: 分享链接的访问令牌
+- `expiresAt`: 分享链接过期时间，null 表示永久有效
+- `createdAt`: 创建时间
+
+分享链接访问地址：`https://your-domain.com/shared/{token}`
+
+#### 获取邮箱的所有分享链接
+```http
+GET /api/emails/{emailId}/share
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+
+返回响应：
+```json
+{
+  "shares": [
+    {
+      "id": "share-uuid-123",
+      "emailId": "email-uuid-123",
+      "token": "abc123def456",
+      "expiresAt": "2024-01-02T12:00:00.000Z",
+      "createdAt": "2024-01-01T12:00:00.000Z"
+    }
+  ],
+  "total": 1
+}
+```
+响应字段说明：
+- `shares`: 分享链接列表数组
+- `total`: 分享链接总数
+
+#### 删除邮箱分享链接
+```http
+DELETE /api/emails/{emailId}/share/{shareId}
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+- `shareId`: 分享记录的唯一标识符，必填
+
+返回响应：
+```json
+{
+  "success": true
+}
+```
+响应字段说明：
+- `success`: 删除操作是否成功
+
+#### 创建邮件分享链接
+```http
+POST /api/emails/{emailId}/messages/{messageId}/share
+Content-Type: application/json
+
+{
+  "expiresIn": 86400000
+}
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+- `messageId`: 邮件的唯一标识符，必填
+- `expiresIn`: 分享链接有效期（毫秒），0 表示永久有效，可选
+
+返回响应：
+```json
+{
+  "id": "share-uuid-456",
+  "messageId": "message-uuid-789",
+  "token": "xyz789ghi012",
+  "expiresAt": "2024-01-02T12:00:00.000Z",
+  "createdAt": "2024-01-01T12:00:00.000Z"
+}
+```
+响应字段说明：
+- `id`: 分享记录的唯一标识符
+- `messageId`: 关联的邮件 ID
+- `token`: 分享链接的访问令牌
+- `expiresAt`: 分享链接过期时间，null 表示永久有效
+- `createdAt`: 创建时间
+
+分享链接访问地址：`https://your-domain.com/shared/message/{token}`
+
+#### 获取邮件的所有分享链接
+```http
+GET /api/emails/{emailId}/messages/{messageId}/share
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+- `messageId`: 邮件的唯一标识符，必填
+
+返回响应：
+```json
+{
+  "shares": [
+    {
+      "id": "share-uuid-456",
+      "messageId": "message-uuid-789",
+      "token": "xyz789ghi012",
+      "expiresAt": "2024-01-02T12:00:00.000Z",
+      "createdAt": "2024-01-01T12:00:00.000Z"
+    }
+  ],
+  "total": 1
+}
+```
+响应字段说明：
+- `shares`: 分享链接列表数组
+- `total`: 分享链接总数
+
+#### 删除邮件分享链接
+```http
+DELETE /api/emails/{emailId}/messages/{messageId}/share/{shareId}
+```
+参数说明：
+- `emailId`: 邮箱的唯一标识符，必填
+- `messageId`: 邮件的唯一标识符，必填
+- `shareId`: 分享记录的唯一标识符，必填
+
+返回响应：
+```json
+{
+  "success": true
+}
+```
+响应字段说明：
+- `success`: 删除操作是否成功
+
+### 使用示例
+
+使用 curl 创建临时邮箱：
+```bash
+curl -X POST https://your-domain.com/api/emails/generate \
+  -H "X-API-Key: YOUR_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "name": "test",
+    "expiryTime": 3600000,
+    "domain": "moemail.app"
+  }'
+```
+
+使用 JavaScript 获取邮件列表：
+```javascript
+const res = await fetch('https://your-domain.com/api/emails/your-email-id', {
+  headers: {
+    'X-API-Key': 'YOUR_API_KEY'
+  }
+});
+const data = await res.json();
+```
+
+使用 curl 创建邮箱分享链接：
+```bash
+curl -X POST https://your-domain.com/api/emails/your-email-id/share \
+  -H "X-API-Key: YOUR_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "expiresIn": 86400000
+  }'
+```
+
+使用 JavaScript 创建邮件分享链接：
+```javascript
+const res = await fetch('https://your-domain.com/api/emails/your-email-id/messages/your-message-id/share', {
+  method: 'POST',
+  headers: {
+    'X-API-Key': 'YOUR_API_KEY',
+    'Content-Type': 'application/json'
+  },
+  body: JSON.stringify({
+    expiresIn: 0  // 永久有效
+  })
+});
+const data = await res.json();
+console.log('分享链接:', `https://your-domain.com/shared/message/${data.token}`);
+```
+
+## 环境变量
+
+本项目使用以下环境变量：
+
+### 认证相关
+- `AUTH_GITHUB_ID`: GitHub OAuth App ID
+- `AUTH_GITHUB_SECRET`: GitHub OAuth App Secret
+- `AUTH_GOOGLE_ID`: Google OAuth App ID
+- `AUTH_GOOGLE_SECRET`: Google OAuth App Secret
+- `AUTH_SECRET`: NextAuth Secret，用来加密 session，请设置一个随机字符串
+
+### Cloudflare 配置
+- `CLOUDFLARE_API_TOKEN`: Cloudflare API Token
+- `CLOUDFLARE_ACCOUNT_ID`: Cloudflare Account ID
+- `DATABASE_NAME`: D1 数据库名称
+- `DATABASE_ID`: D1 数据库 ID (可选, 如果不填, 则会自动通过 Cloudflare API 获取)
+- `KV_NAMESPACE_NAME`: Cloudflare KV namespace 名称，用于存储网站配置
+- `KV_NAMESPACE_ID`: Cloudflare KV namespace ID，用于存储网站配置 （可选， 如果不填, 则会自动通过 Cloudflare API 获取）
+- `CUSTOM_DOMAIN`: 网站自定义域名, 如：moemail.app (可选， 如果不填, 则会使用 Cloudflare Pages 默认域名)
+- `PROJECT_NAME`: Pages 项目名 （可选，如果不填，则为 moemail） 
+
+## Github OAuth App 配置
+
+1. 登录 [Github Developer](https://github.com/settings/developers) 创建一个新的 OAuth App
+2. 生成一个新的 `Client ID` 和 `Client Secret`
+3. 配置参数：
+   - `Application name`: `<your-app-name>`
+   - `Homepage URL`: `https://<your-domain>`
+   - `Authorization callback URL`: `https://<your-domain>/api/auth/callback/github`
+
+## Google OAuth App 配置
+
+1. 访问 [Google Cloud Console](https://console.cloud.google.com/) 创建项目
+2. 配置 OAuth 同意屏幕
+3. 创建 OAuth 客户端 ID
+   - 应用类型：Web 应用
+   - 已获授权的 Javascript 来源：`https://<your-domain>`
+   - 已获授权的重定向 URI：`https://<your-domain>/api/auth/callback/google`
+4. 获取 `Client ID` 和 `Client Secret`
+5. 配置环境变量 `AUTH_GOOGLE_ID` 和 `AUTH_GOOGLE_SECRET`
+
+
 
 ## 贡献
 
-欢迎提交 Pull Request 或者 Issue来帮助改进这个项目
+欢迎提交 Pull Request 或者 Issue 来帮助改进这个项目
 
 ## 许可证
 
 本项目采用 [MIT](LICENSE) 许可证
 
-## 交流群
-<img src="https://pic.otaku.ren/20241215/AQADXcMxGyDw-FZ-.jpg" style="width: 400px;"/>
-<br />
-如二维码失效，请添加我的个人微信（hansenones），并备注 “MoeMail” 加入微信交流群
+## 交流
+<table>
+  <tr style="max-width: 360px">
+    <td>
+      <img src="https://pic.otaku.ren/20250309/AQADAcQxGxQjaVZ-.jpg" />
+    </td>
+    <td>
+      <img src="https://pic.otaku.ren/20250309/AQADCMQxGxQjaVZ-.jpg" />
+    </td>
+  </tr>
+  <tr style="max-width: 360px">
+    <td>
+      关注公众号，了解更多项目进展以及AI，区块链，独立开发资讯
+    </td>
+    <td>
+      添加微信，备注 "MoeMail" 拉你进微信交流群
+    </td>
+  </tr>
+</table>
 
 ## 支持
 
@@ -271,3 +862,13 @@ pnpx cloudflared tunnel --url http://localhost:3001
 <br />
 <br />
 <a href="https://www.buymeacoffee.com/beilunyang" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="width: 400px;" ></a>
+
+## Star History
+
+<a href="https://www.star-history.com/#beilunyang/moemail&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=beilunyang/moemail&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=beilunyang/moemail&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=beilunyang/moemail&type=Date" />
+ </picture>
+</a>

app/[locale]/layout.tsx

@@ -0,0 +1,147 @@
+import { NextIntlClientProvider } from "next-intl"
+import { notFound } from "next/navigation"
+import { getTranslations } from "next-intl/server"
+import { i18n, type Locale } from "@/i18n/config"
+import type { Metadata, Viewport } from "next"
+import { FloatMenu } from "@/components/float-menu"
+import { ThemeProvider } from "@/components/theme/theme-provider"
+import { Toaster } from "@/components/ui/toaster"
+import { cn } from "@/lib/utils"
+import { zpix } from "../fonts"
+import "../globals.css"
+import { Providers } from "../providers"
+
+export const runtime = "edge"
+
+export const viewport: Viewport = {
+  themeColor: '#826DD9',
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+}
+
+async function getMessages(locale: Locale) {
+  try {
+    const common = (await import(`@/i18n/messages/${locale}/common.json`)).default
+    const home = (await import(`@/i18n/messages/${locale}/home.json`)).default
+    const auth = (await import(`@/i18n/messages/${locale}/auth.json`)).default
+    const metadata = (await import(`@/i18n/messages/${locale}/metadata.json`)).default
+    const emails = (await import(`@/i18n/messages/${locale}/emails.json`)).default
+    const profile = (await import(`@/i18n/messages/${locale}/profile.json`)).default
+    return { common, home, auth, metadata, emails, profile }
+  } catch (error) {
+    console.error(`Failed to load messages for locale ${locale}:`, error)
+    return { common: {}, home: {}, auth: {}, metadata: {}, emails: {}, profile: {} }
+  }
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale: localeFromParams } = await params
+  const locale = localeFromParams as Locale
+  const t = await getTranslations({ locale, namespace: "metadata" })
+
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://moemail.app"
+  
+  // Generate hreflang links for all supported locales
+  const languages: Record<string, string> = {}
+  i18n.locales.forEach((loc) => {
+    languages[loc] = `${baseUrl}/${loc}`
+  })
+
+  return {
+    title: t("title"),
+    description: t("description"),
+    keywords: t("keywords"),
+    authors: [{ name: "SoftMoe Studio" }],
+    creator: "SoftMoe Studio",
+    publisher: "SoftMoe Studio",
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+      },
+    },
+    openGraph: {
+      type: "website",
+      locale: locale === "zh-CN" ? "zh_CN" : locale === "zh-TW" ? "zh_TW" : locale,
+      url: `${baseUrl}/${locale}`,
+      title: t("title"),
+      description: t("description"),
+      siteName: "MoeMail",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("title"),
+      description: t("description"),
+    },
+    alternates: {
+      canonical: `${baseUrl}/${locale}`,
+      languages,
+    },
+    manifest: '/manifest.json',
+    icons: [
+      { rel: 'apple-touch-icon', url: '/icons/icon-192x192.png' },
+    ],
+  }
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: Promise<{ locale: string }>
+}) {
+  const { locale: localeFromParams } = await params
+  const locale = localeFromParams as Locale
+  if (!i18n.locales.includes(locale)) {
+    notFound()
+  }
+
+  const messages = await getMessages(locale)
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <head>
+        <meta name="application-name" content="MoeMail" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <meta name="apple-mobile-web-app-title" content="MoeMail" />
+        <meta name="format-detection" content="telephone=no" />
+        <meta name="mobile-web-app-capable" content="yes" />
+      </head>
+      <body 
+        className={cn(
+          zpix.variable,
+          "font-zpix min-h-screen antialiased",
+          "bg-background text-foreground",
+          "transition-colors duration-300"
+        )}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange={false}
+          storageKey="temp-mail-theme"
+        >
+          <Providers>
+            <NextIntlClientProvider locale={locale} messages={messages}>
+              {children}
+              <FloatMenu />
+            </NextIntlClientProvider>
+          </Providers>
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+

app/[locale]/login/page.tsx

@@ -0,0 +1,29 @@
+import { LoginForm } from "@/components/auth/login-form"
+import { auth } from "@/lib/auth"
+import { redirect } from "next/navigation"
+import type { Locale } from "@/i18n/config"
+import { getTurnstileConfig } from "@/lib/turnstile"
+
+export const runtime = "edge"
+
+export default async function LoginPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale: localeFromParams } = await params
+  const locale = localeFromParams as Locale
+  const session = await auth()
+  
+  if (session?.user) {
+    redirect(`/${locale}`)
+  }
+
+  const turnstile = await getTurnstileConfig()
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      <LoginForm turnstile={{ enabled: turnstile.enabled, siteKey: turnstile.siteKey }} />
+    </div>
+  )
+}

app/[locale]/moe/page.tsx

@@ -1,25 +1,39 @@
 import { Header } from "@/components/layout/header"
 import { ThreeColumnLayout } from "@/components/emails/three-column-layout"
+import { NoPermissionDialog } from "@/components/no-permission-dialog"
 import { auth } from "@/lib/auth"
 import { redirect } from "next/navigation"
+import { checkPermission } from "@/lib/auth"
+import { PERMISSIONS } from "@/lib/permissions"
+import type { Locale } from "@/i18n/config"
 
 export const runtime = "edge"
 
-export default async function MoePage() {
+export default async function MoePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale: localeFromParams } = await params
+  const locale = localeFromParams as Locale
   const session = await auth()
   
-  if (!session) {
-    redirect("/")
+  if (!session?.user) {
+    redirect(`/${locale}`)
   }
 
+  const hasPermission = await checkPermission(PERMISSIONS.MANAGE_EMAIL)
+
   return (
     <div className="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 h-screen">
       <div className="container mx-auto h-full px-4 lg:px-8 max-w-[1600px]">
         <Header />
         <main className="h-full">
           <ThreeColumnLayout />
+          {!hasPermission && <NoPermissionDialog />}
         </main>
       </div>
     </div>
   )
-} 
+}
+

app/[locale]/page.tsx

@@ -0,0 +1,74 @@
+import { Header } from "@/components/layout/header"
+import { auth } from "@/lib/auth"
+import { Shield, Share2, Clock, Code2 } from "lucide-react"
+import { ActionButton } from "@/components/home/action-button"
+import { FeatureCard } from "@/components/home/feature-card"
+import { getTranslations } from "next-intl/server"
+import type { Locale } from "@/i18n/config"
+
+export const runtime = "edge"
+
+export default async function Home({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale: localeFromParams } = await params
+  const locale = localeFromParams as Locale
+  const session = await auth()
+  const t = await getTranslations({ locale, namespace: "home" })
+
+  return (
+    <div className="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 min-h-screen">
+      <div className="container mx-auto px-4 lg:px-8 max-w-[1600px]">
+        <Header />
+        <main className="pt-16">
+          <div className="h-[calc(100vh-4rem)] flex flex-col items-center justify-center text-center px-2 relative overflow-hidden">
+            <div className="absolute inset-0 -z-10 bg-grid-primary/5" />
+
+            <div className="w-full max-w-3xl mx-auto space-y-6 sm:space-y-8 py-4">
+              <div className="space-y-2 sm:space-y-3">
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-wider">
+                  <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
+                    {t("title")}
+                  </span>
+                </h1>
+                <p className="text-lg sm:text-xl text-gray-600 dark:text-gray-300 tracking-wide">
+                  {t("subtitle")}
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 px-2 sm:px-0">
+                <FeatureCard
+                  icon={<Shield className="w-5 h-5" />}
+                  title={t("features.privacy.title")}
+                  description={t("features.privacy.description")}
+                />
+                <FeatureCard
+                  icon={<Share2 className="w-5 h-5" />}
+                  title={t("features.instant.title")}
+                  description={t("features.instant.description")}
+                />
+                <FeatureCard
+                  icon={<Clock className="w-5 h-5" />}
+                  title={t("features.expiry.title")}
+                  description={t("features.expiry.description")}
+                />
+                <FeatureCard
+                  icon={<Code2 className="w-5 h-5" />}
+                  title={t("features.openapi.title")}
+                  description={t("features.openapi.description")}
+                />
+              </div>
+
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-2 sm:px-0">
+                <ActionButton isLoggedIn={!!session} />
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+

app/[locale]/profile/page.tsx

@@ -0,0 +1,33 @@
+import { Header } from "@/components/layout/header"
+import { ProfileCard } from "@/components/profile/profile-card"
+import { auth } from "@/lib/auth"
+import { redirect } from "next/navigation"
+import type { Locale } from "@/i18n/config"
+
+export const runtime = "edge"
+
+export default async function ProfilePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale: localeFromParams } = await params
+  const locale = localeFromParams as Locale
+  const session = await auth()
+  
+  if (!session?.user) {
+    redirect(`/${locale}`)
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 lg:px-8 max-w-[1600px]">
+        <Header />
+        <main className="pt-20 pb-5">
+          <ProfileCard user={session.user} />
+        </main>
+      </div>
+    </div>
+  )
+}
+

app/[locale]/shared/[token]/page-client.tsx

@@ -0,0 +1,379 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { useTranslations } from "next-intl"
+import { BrandHeader } from "@/components/ui/brand-header"
+import { FloatingLanguageSwitcher } from "@/components/layout/floating-language-switcher"
+import { SharedMessageList } from "@/components/emails/shared-message-list"
+import { SharedMessageDetail } from "@/components/emails/shared-message-detail"
+import { EMAIL_CONFIG } from "@/config"
+
+interface Email {
+  id: string
+  address: string
+  createdAt: Date
+  expiresAt: Date
+}
+
+interface Message {
+  id: string
+  from_address?: string
+  to_address?: string
+  subject: string
+  received_at?: Date
+  sent_at?: Date
+}
+
+interface MessageDetail extends Message {
+  content?: string
+  html?: string
+}
+
+interface SharedEmailPageClientProps {
+  email: Email
+  initialMessages: Message[]
+  initialNextCursor: string | null
+  initialTotal: number
+  token: string
+}
+
+export function SharedEmailPageClient({
+  email,
+  initialMessages,
+  initialNextCursor,
+  initialTotal,
+  token
+}: SharedEmailPageClientProps) {
+  const t = useTranslations("emails")
+  const tShared = useTranslations("emails.shared")
+
+  const [messages, setMessages] = useState<Message[]>(initialMessages)
+  const [selectedMessage, setSelectedMessage] = useState<MessageDetail | null>(null)
+  const [messageLoading, setMessageLoading] = useState(false)
+  const [nextCursor, setNextCursor] = useState<string | null>(initialNextCursor)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [total, setTotal] = useState(initialTotal)
+  const [refreshing, setRefreshing] = useState(false)
+  const pollTimeoutRef = useRef<Timer | null>(null)
+  const messagesRef = useRef<Message[]>(initialMessages)
+
+  // 当 messages 改变时更新 ref
+  useEffect(() => {
+    messagesRef.current = messages
+  }, [messages])
+
+  const fetchMessages = async (cursor?: string) => {
+    try {
+      if (cursor) {
+        setLoadingMore(true)
+      }
+
+      const url = new URL(`/api/shared/${token}/messages`, window.location.origin)
+      if (cursor) {
+        url.searchParams.set('cursor', cursor)
+      }
+
+      const messagesResponse = await fetch(url)
+      if (messagesResponse.ok) {
+        const messagesData = await messagesResponse.json() as {
+          messages: Message[]
+          nextCursor: string | null
+          total: number
+        }
+
+        if (!cursor) {
+          // 刷新时：合并新消息和旧消息，避免重复
+          const newMessages = messagesData.messages
+          const oldMessages = messagesRef.current
+
+          // 找到第一个重复的消息
+          const lastDuplicateIndex = newMessages.findIndex(
+            newMsg => oldMessages.some(oldMsg => oldMsg.id === newMsg.id)
+          )
+
+          if (lastDuplicateIndex === -1) {
+            // 没有重复，直接使用新消息
+            setMessages(newMessages)
+            setNextCursor(messagesData.nextCursor)
+            setTotal(messagesData.total)
+            return
+          }
+          // 有重复，只添加新的消息
+          const uniqueNewMessages = newMessages.slice(0, lastDuplicateIndex)
+          setMessages([...uniqueNewMessages, ...oldMessages])
+          setTotal(messagesData.total)
+          return
+        }
+        // 加载更多：追加到列表末尾
+        setMessages(prev => [...prev, ...(messagesData.messages || [])])
+        setNextCursor(messagesData.nextCursor)
+        setTotal(messagesData.total)
+      }
+    } catch (err) {
+      console.error("Failed to fetch messages:", err)
+    } finally {
+      setLoadingMore(false)
+      setRefreshing(false)
+    }
+  }
+
+  const startPolling = () => {
+    stopPolling()
+    pollTimeoutRef.current = setInterval(() => {
+      if (!refreshing && !loadingMore) {
+        fetchMessages()
+      }
+    }, EMAIL_CONFIG.POLL_INTERVAL)
+  }
+
+  const stopPolling = () => {
+    if (pollTimeoutRef.current) {
+      clearInterval(pollTimeoutRef.current)
+      pollTimeoutRef.current = null
+    }
+  }
+
+  const handleRefresh = async () => {
+    setRefreshing(true)
+    await fetchMessages()
+  }
+
+  // 启动轮询
+  useEffect(() => {
+    startPolling()
+    return () => {
+      stopPolling()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token])
+
+  const handleLoadMore = () => {
+    if (nextCursor && !loadingMore) {
+      fetchMessages(nextCursor)
+    }
+  }
+
+  const fetchMessageDetail = async (messageId: string) => {
+    try {
+      setMessageLoading(true)
+
+      const response = await fetch(`/api/shared/${token}/messages/${messageId}`)
+
+      if (!response.ok) {
+        throw new Error("Failed to load message")
+      }
+
+      const data = await response.json() as { message: MessageDetail }
+      setSelectedMessage(data.message)
+    } catch (err) {
+      console.error("Failed to fetch message:", err)
+    } finally {
+      setMessageLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="container mx-auto p-4 max-w-7xl">
+        <BrandHeader
+          title={email.address}
+          subtitle={(() => {
+            try {
+              const expiresDate = new Date(email.expiresAt)
+              if (isNaN(expiresDate.getTime())) return tShared("sharedMailbox")
+              return expiresDate.getFullYear() === 9999
+                ? tShared("permanent")
+                : `${tShared("expiresAt")}: ${expiresDate.toLocaleDateString()} ${expiresDate.toLocaleTimeString()}`
+            } catch {
+              return tShared("sharedMailbox")
+            }
+          })()}
+          ctaText={tShared("createOwnEmail")}
+        />
+
+        {/* 桌面端双栏布局 */}
+        <div className="hidden lg:grid grid-cols-2 gap-4 h-[calc(100vh-280px)] mt-6">
+          <div className="border-2 border-primary/20 bg-background rounded-lg overflow-hidden">
+            <SharedMessageList
+              messages={messages.map(msg => ({
+                ...msg,
+                received_at: (() => {
+                  if (!msg.received_at) return undefined
+                  try {
+                    const date = new Date(msg.received_at)
+                    return isNaN(date.getTime()) ? undefined : date.getTime()
+                  } catch {
+                    return undefined
+                  }
+                })(),
+                sent_at: (() => {
+                  if (!msg.sent_at) return undefined
+                  try {
+                    const date = new Date(msg.sent_at)
+                    return isNaN(date.getTime()) ? undefined : date.getTime()
+                  } catch {
+                    return undefined
+                  }
+                })()
+              }))}
+              selectedMessageId={selectedMessage?.id}
+              onMessageSelect={fetchMessageDetail}
+              onLoadMore={handleLoadMore}
+              onRefresh={handleRefresh}
+              loading={false}
+              loadingMore={loadingMore}
+              refreshing={refreshing}
+              hasMore={!!nextCursor}
+              total={total}
+              t={{
+                received: t("messages.received"),
+                noMessages: t("messages.noMessages"),
+                messageCount: t("messages.messageCount"),
+                loading: t("messageView.loading"),
+                loadingMore: t("messages.loadingMore")
+              }}
+            />
+          </div>
+
+          <div className="border-2 border-primary/20 bg-background rounded-lg overflow-hidden">
+            <SharedMessageDetail
+              message={selectedMessage ? {
+                ...selectedMessage,
+                received_at: (() => {
+                  if (!selectedMessage.received_at) return undefined
+                  try {
+                    const date = new Date(selectedMessage.received_at)
+                    return isNaN(date.getTime()) ? undefined : date.getTime()
+                  } catch {
+                    return undefined
+                  }
+                })(),
+                sent_at: (() => {
+                  if (!selectedMessage.sent_at) return undefined
+                  try {
+                    const date = new Date(selectedMessage.sent_at)
+                    return isNaN(date.getTime()) ? undefined : date.getTime()
+                  } catch {
+                    return undefined
+                  }
+                })()
+              } : null}
+              loading={messageLoading}
+              t={{
+                messageContent: t("layout.messageContent"),
+                selectMessage: t("layout.selectMessage"),
+                loading: t("messageView.loading"),
+                from: t("messageView.from"),
+                to: t("messageView.to"),
+                subject: t("messages.subject"),
+                time: t("messageView.time"),
+                htmlFormat: t("messageView.htmlFormat"),
+                textFormat: t("messageView.textFormat")
+              }}
+            />
+          </div>
+        </div>
+
+        {/* 移动端单栏布局 */}
+        <div className="lg:hidden h-[calc(100vh-260px)] mt-6">
+          <div className="border-2 border-primary/20 bg-background rounded-lg overflow-hidden h-full flex flex-col">
+            {!selectedMessage ? (
+              // 消息列表视图
+              <SharedMessageList
+                messages={messages.map(msg => ({
+                  ...msg,
+                  received_at: (() => {
+                    if (!msg.received_at) return undefined
+                    try {
+                      const date = new Date(msg.received_at)
+                      return isNaN(date.getTime()) ? undefined : date.getTime()
+                    } catch {
+                      return undefined
+                    }
+                  })(),
+                  sent_at: (() => {
+                    if (!msg.sent_at) return undefined
+                    try {
+                      const date = new Date(msg.sent_at)
+                      return isNaN(date.getTime()) ? undefined : date.getTime()
+                    } catch {
+                      return undefined
+                    }
+                  })()
+                }))}
+                selectedMessageId={null}
+                onMessageSelect={fetchMessageDetail}
+                onLoadMore={handleLoadMore}
+                onRefresh={handleRefresh}
+                loading={false}
+                loadingMore={loadingMore}
+                refreshing={refreshing}
+                hasMore={!!nextCursor}
+                total={total}
+                t={{
+                  received: t("messages.received"),
+                  noMessages: t("messages.noMessages"),
+                  messageCount: t("messages.messageCount"),
+                  loading: t("messageView.loading"),
+                  loadingMore: t("messages.loadingMore")
+                }}
+              />
+            ) : (
+              // 消息详情视图
+              <>
+                <div className="p-2 border-b-2 border-primary/20 flex items-center justify-between shrink-0">
+                  <button
+                    onClick={() => setSelectedMessage(null)}
+                    className="text-sm text-primary"
+                  >
+                    {t("layout.backToMessageList")}
+                  </button>
+                  <span className="text-sm font-medium">{t("layout.messageContent")}</span>
+                </div>
+                <div className="flex-1 overflow-auto">
+                  <SharedMessageDetail
+                    message={{
+                      ...selectedMessage,
+                      received_at: (() => {
+                        if (!selectedMessage.received_at) return undefined
+                        try {
+                          const date = new Date(selectedMessage.received_at)
+                          return isNaN(date.getTime()) ? undefined : date.getTime()
+                        } catch {
+                          return undefined
+                        }
+                      })(),
+                      sent_at: (() => {
+                        if (!selectedMessage.sent_at) return undefined
+                        try {
+                          const date = new Date(selectedMessage.sent_at)
+                          return isNaN(date.getTime()) ? undefined : date.getTime()
+                        } catch {
+                          return undefined
+                        }
+                      })()
+                    }}
+                    loading={messageLoading}
+                    t={{
+                      messageContent: t("layout.messageContent"),
+                      selectMessage: t("layout.selectMessage"),
+                      loading: t("messageView.loading"),
+                      from: t("messageView.from"),
+                      to: t("messageView.to"),
+                      subject: t("messages.subject"),
+                      time: t("messageView.time"),
+                      htmlFormat: t("messageView.htmlFormat"),
+                      textFormat: t("messageView.textFormat")
+                    }}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <FloatingLanguageSwitcher />
+    </div>
+  )
+}

app/[locale]/shared/[token]/page.tsx

@@ -0,0 +1,42 @@
+import { getSharedEmail, getSharedEmailMessages } from "@/lib/shared-data"
+import { SharedErrorPage } from "@/components/emails/shared-error-page"
+import { SharedEmailPageClient } from "./page-client"
+
+interface PageProps {
+  params: Promise<{
+    token: string
+    locale: string
+  }>
+}
+
+export default async function SharedEmailPage({ params }: PageProps) {
+  const { token } = await params
+
+  // 服务端获取数据
+  const email = await getSharedEmail(token)
+
+  if (!email) {
+    return (
+      <SharedErrorPage
+        titleKey="emailNotFound"
+        subtitleKey="linkExpired"
+        errorKey="linkInvalid"
+        descriptionKey="linkInvalidDescription"
+        ctaTextKey="createOwnEmail"
+      />
+    )
+  }
+
+  // 获取初始消息列表
+  const messagesResult = await getSharedEmailMessages(token)
+
+  return (
+    <SharedEmailPageClient
+      email={email}
+      initialMessages={messagesResult.messages}
+      initialNextCursor={messagesResult.nextCursor}
+      initialTotal={messagesResult.total}
+      token={token}
+    />
+  )
+}

app/[locale]/shared/message/[token]/page-client.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { useTranslations } from "next-intl"
+import { BrandHeader } from "@/components/ui/brand-header"
+import { FloatingLanguageSwitcher } from "@/components/layout/floating-language-switcher"
+import { SharedMessageDetail } from "@/components/emails/shared-message-detail"
+
+interface MessageDetail {
+  id: string
+  from_address?: string
+  to_address?: string
+  subject: string
+  content?: string
+  html?: string
+  received_at?: Date
+  sent_at?: Date
+  expiresAt?: Date
+  emailAddress?: string
+  emailExpiresAt?: Date
+}
+
+interface SharedMessagePageClientProps {
+  message: MessageDetail
+}
+
+export function SharedMessagePageClient({ message }: SharedMessagePageClientProps) {
+  const t = useTranslations("emails")
+  const tShared = useTranslations("emails.shared")
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="container mx-auto p-4 max-w-7xl">
+        <BrandHeader
+          title={message.emailAddress || message.to_address || message.subject}
+          subtitle={message.emailExpiresAt && new Date(message.emailExpiresAt).getFullYear() === 9999
+            ? tShared("permanent")
+            : message.emailExpiresAt
+              ? `${tShared("expiresAt")}: ${new Date(message.emailExpiresAt).toLocaleString()}`
+              : tShared("sharedMessage")}
+          ctaText={tShared("createOwnEmail")}
+        />
+
+        <div className="mt-6">
+          <div className="border-2 border-primary/20 bg-background rounded-lg overflow-hidden h-[calc(100vh-260px)] lg:h-[calc(100vh-280px)]">
+            <SharedMessageDetail
+              message={{
+                ...message,
+                received_at: message.received_at ? new Date(message.received_at).getTime() : undefined,
+                sent_at: message.sent_at ? new Date(message.sent_at).getTime() : undefined
+              }}
+              loading={false}
+              t={{
+                messageContent: t("layout.messageContent"),
+                selectMessage: t("layout.selectMessage"),
+                loading: tShared("loading"),
+                from: t("messageView.from"),
+                to: t("messageView.to"),
+                subject: t("messages.subject"),
+                time: t("messageView.time"),
+                htmlFormat: t("messageView.htmlFormat"),
+                textFormat: t("messageView.textFormat")
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      
+      <FloatingLanguageSwitcher />
+    </div>
+  )
+}

app/[locale]/shared/message/[token]/page.tsx

@@ -0,0 +1,31 @@
+import { getSharedMessage } from "@/lib/shared-data"
+import { SharedErrorPage } from "@/components/emails/shared-error-page"
+import { SharedMessagePageClient } from "./page-client"
+
+interface PageProps {
+  params: Promise<{
+    token: string
+    locale: string
+  }>
+}
+
+export default async function SharedMessagePage({ params }: PageProps) {
+  const { token } = await params
+  
+  // 服务端获取数据
+  const message = await getSharedMessage(token)
+  
+  if (!message) {
+    return (
+      <SharedErrorPage
+        titleKey="messageNotFound"
+        subtitleKey="linkExpired"
+        errorKey="linkInvalid"
+        descriptionKey="linkInvalidDescription"
+        ctaTextKey="createOwnEmail"
+      />
+    )
+  }
+
+  return <SharedMessagePageClient message={message} />
+}

app/api/api-keys/[id]/route.ts

@@ -0,0 +1,91 @@
+import { auth } from "@/lib/auth"
+import { createDb } from "@/lib/db"
+import { apiKeys } from "@/lib/schema"
+import { NextResponse } from "next/server"
+import { checkPermission } from "@/lib/auth"
+import { PERMISSIONS } from "@/lib/permissions"
+import { eq, and } from "drizzle-orm"
+
+export const runtime = "edge"
+
+export async function DELETE(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const hasPermission = await checkPermission(PERMISSIONS.MANAGE_API_KEY)
+  if (!hasPermission) {
+    return NextResponse.json({ error: "权限不足" }, { status: 403 })
+  }
+  try {
+    const db = createDb()
+    const session = await auth()
+    const { id } = await params
+    
+    const result = await db.delete(apiKeys)
+      .where(
+        and(
+          eq(apiKeys.id, id),
+          eq(apiKeys.userId, session!.user.id!)
+        )
+      )
+      .returning()
+
+    if (!result.length) {
+      return NextResponse.json(
+        { error: "API Key 不存在或无权删除" },
+        { status: 404 }
+      )
+    }
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Failed to delete API key:", error)
+    return NextResponse.json(
+      { error: "删除 API Key 失败" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const hasPermission = await checkPermission(PERMISSIONS.MANAGE_API_KEY)
+  if (!hasPermission) {
+    return NextResponse.json({ error: "权限不足" }, { status: 403 })
+  }
+
+  try {
+    const session = await auth()
+    const { id } = await params
+
+    const { enabled } = await request.json() as { enabled: boolean }
+    const db = createDb()
+    
+    const result = await db.update(apiKeys)
+      .set({ enabled })
+      .where(
+        and(
+          eq(apiKeys.id, id),
+          eq(apiKeys.userId, session!.user.id!)
+        )
+      )
+      .returning()
+
+    if (!result.length) {
+      return NextResponse.json(
+        { error: "API Key 不存在或无权更新" },
+        { status: 404 }
+      )
+    }
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Failed to update API key:", error)
+    return NextResponse.json(
+      { error: "更新 API Key 失败" },
+      { status: 500 }
+    )
+  }
+} 

app/api/api-keys/route.ts

@@ -0,0 +1,75 @@
+import { auth } from "@/lib/auth"
+import { createDb } from "@/lib/db"
+import { apiKeys } from "@/lib/schema"
+import { nanoid } from "nanoid"
+import { NextResponse } from "next/server"
+import { checkPermission } from "@/lib/auth"
+import { PERMISSIONS } from "@/lib/permissions"
+import { desc, eq } from "drizzle-orm"
+
+export const runtime = "edge"
+
+export async function GET() {
+  const hasPermission = await checkPermission(PERMISSIONS.MANAGE_API_KEY)
+  if (!hasPermission) {
+    return NextResponse.json({ error: "权限不足" }, { status: 403 })
+  }
+
+  const session = await auth()
+  try {
+    const db = createDb()
+    const keys = await db.query.apiKeys.findMany({
+      where: eq(apiKeys.userId, session!.user.id!),
+      orderBy: desc(apiKeys.createdAt),
+    })
+
+    return NextResponse.json({
+      apiKeys: keys.map(key => ({
+        ...key,
+        key: undefined
+      }))
+    })
+  } catch (error) {
+    console.error("Failed to fetch API keys:", error)
+    return NextResponse.json(
+      { error: "获取 API Keys 失败" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(request: Request) {
+  const hasPermission = await checkPermission(PERMISSIONS.MANAGE_API_KEY)
+  if (!hasPermission) {
+    return NextResponse.json({ error: "权限不足" }, { status: 403 })
+  }
+
+  const session = await auth()
+  try {
+    const { name } = await request.json() as { name: string }
+    if (!name?.trim()) {
+      return NextResponse.json(
+        { error: "名称不能为空" },
+        { status: 400 }
+      )
+    }
+
+    const key = `mk_${nanoid(32)}`
+    const db = createDb()
+    
+    await db.insert(apiKeys).values({
+      name,
+      key,
+      userId: session!.user.id!,
+      expiresAt: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 year
+    })
+
+    return NextResponse.json({ key })
+  } catch (error) {
+    console.error("Failed to create API key:", error)
+    return NextResponse.json(
+      { error: "创建 API Key 失败" },
+      { status: 500 }
+    )
+  }
+} 

app/api/auth/register/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from "next/server"
+import { register } from "@/lib/auth"
+import { authSchema, AuthSchema } from "@/lib/validation"
+import { verifyTurnstileToken } from "@/lib/turnstile"
+
+export const runtime = "edge"
+
+export async function POST(request: Request) {
+  try {
+    const json = await request.json() as AuthSchema
+    
+    try {
+      authSchema.parse(json)
+    } catch (error) {
+      return NextResponse.json(
+        { error: error instanceof Error ? error.message : "输入格式不正确" },
+        { status: 400 }
+      )
+    }
+
+    const { username, password, turnstileToken } = json
+
+    const verification = await verifyTurnstileToken(turnstileToken)
+    if (!verification.success) {
+      const message = verification.reason === "missing-token"
+        ? "请先完成安全验证"
+        : "安全验证未通过"
+      return NextResponse.json({ error: message }, { status: 400 })
+    }
+
+    const user = await register(username, password)
+
+    return NextResponse.json({ user })
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "注册失败" },
+      { status: 500 }
+    )
+  }
+} 

app/api/config/email-service/route.ts

@@ -0,0 +1,99 @@
+import { NextResponse } from "next/server"
+import { getRequestContext } from "@cloudflare/next-on-pages"
+import { checkPermission } from "@/lib/auth"
+import { PERMISSIONS } from "@/lib/permissions"
+import { EMAIL_CONFIG } from "@/config"
+
+export const runtime = "edge"
+
+interface EmailServiceConfig {
+  enabled: boolean
+  apiKey: string
+  roleLimits: {
+    duke?: number
+    knight?: number
+  }
+}
+
+export async function GET() {
+  const canAccess = await checkPermission(PERMISSIONS.MANAGE_CONFIG)
+
+  if (!canAccess) {
+    return NextResponse.json({
+      error: "权限不足"
+    }, { status: 403 })
+  }
+
+  try {
+    const env = getRequestContext().env
+    const [enabled, apiKey, roleLimits] = await Promise.all([
+      env.SITE_CONFIG.get("EMAIL_SERVICE_ENABLED"),
+      env.SITE_CONFIG.get("RESEND_API_KEY"),
+      env.SITE_CONFIG.get("EMAIL_ROLE_LIMITS")
+    ])
+
+    const customLimits = roleLimits ? JSON.parse(roleLimits) : {}
+    
+    const finalLimits = {
+      duke: customLimits.duke !== undefined ? customLimits.duke : EMAIL_CONFIG.DEFAULT_DAILY_SEND_LIMITS.duke,
+      knight: customLimits.knight !== undefined ? customLimits.knight : EMAIL_CONFIG.DEFAULT_DAILY_SEND_LIMITS.knight,
+    }
+
+    return NextResponse.json({
+      enabled: enabled === "true",
+      apiKey: apiKey || "",
+      roleLimits: finalLimits
+    })
+  } catch (error) {
+    console.error("Failed to get email service config:", error)
+    return NextResponse.json(
+      { error: "获取 Resend 发件服务配置失败" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(request: Request) {
+  const canAccess = await checkPermission(PERMISSIONS.MANAGE_CONFIG)
+
+  if (!canAccess) {
+    return NextResponse.json({
+      error: "权限不足"
+    }, { status: 403 })
+  }
+
+  try {
+    const config = await request.json() as EmailServiceConfig
+
+    if (config.enabled && !config.apiKey) {
+      return NextResponse.json(
+        { error: "启用 Resend 时，API Key 为必填项" },
+        { status: 400 }
+      )
+    }
+
+    const env = getRequestContext().env
+    
+    const customLimits: { duke?: number; knight?: number } = {}
+    if (config.roleLimits?.duke !== undefined) {
+      customLimits.duke = config.roleLimits.duke
+    }
+    if (config.roleLimits?.knight !== undefined) {
+      customLimits.knight = config.roleLimits.knight
+    }
+
+    await Promise.all([
+      env.SITE_CONFIG.put("EMAIL_SERVICE_ENABLED", config.enabled.toString()),
+      env.SITE_CONFIG.put("RESEND_API_KEY", config.apiKey),
+      env.SITE_CONFIG.put("EMAIL_ROLE_LIMITS", JSON.stringify(customLimits))
+    ])
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Failed to save email service config:", error)
+    return NextResponse.json(
+      { error: "保存 Resend 发件服务配置失败" },
+      { status: 500 }
+    )
+  }
+} 

app/api/config/route.ts

@@ -0,0 +1,96 @@
+import { PERMISSIONS, Role, ROLES } from "@/lib/permissions"
+import { getRequestContext } from "@cloudflare/next-on-pages"
+import { EMAIL_CONFIG } from "@/config"
+import { checkPermission } from "@/lib/auth"
+
+export const runtime = "edge"
+
+export async function GET() {
+  const env = getRequestContext().env
+  const canManageConfig = await checkPermission(PERMISSIONS.MANAGE_CONFIG)
+
+  const [
+    defaultRole,
+    emailDomains,
+    adminContact,
+    maxEmails,
+    turnstileEnabled,
+    turnstileSiteKey,
+    turnstileSecretKey
+  ] = await Promise.all([
+    env.SITE_CONFIG.get("DEFAULT_ROLE"),
+    env.SITE_CONFIG.get("EMAIL_DOMAINS"),
+    env.SITE_CONFIG.get("ADMIN_CONTACT"),
+    env.SITE_CONFIG.get("MAX_EMAILS"),
+    env.SITE_CONFIG.get("TURNSTILE_ENABLED"),
+    env.SITE_CONFIG.get("TURNSTILE_SITE_KEY"),
+    env.SITE_CONFIG.get("TURNSTILE_SECRET_KEY")
+  ])
+
+  return Response.json({
+    defaultRole: defaultRole || ROLES.CIVILIAN,
+    emailDomains: emailDomains || "moemail.app",
+    adminContact: adminContact || "",
+    maxEmails: maxEmails || EMAIL_CONFIG.MAX_ACTIVE_EMAILS.toString(),
+    turnstile: canManageConfig ? {
+      enabled: turnstileEnabled === "true",
+      siteKey: turnstileSiteKey || "",
+      secretKey: turnstileSecretKey || "",
+    } : undefined
+  })
+}
+
+export async function POST(request: Request) {
+  const canAccess = await checkPermission(PERMISSIONS.MANAGE_CONFIG)
+
+  if (!canAccess) {
+    return Response.json({
+      error: "权限不足"
+    }, { status: 403 })
+  }
+
+  const {
+    defaultRole,
+    emailDomains,
+    adminContact,
+    maxEmails,
+    turnstile
+  } = await request.json() as { 
+    defaultRole: Exclude<Role, typeof ROLES.EMPEROR>,
+    emailDomains: string,
+    adminContact: string,
+    maxEmails: string,
+    turnstile?: {
+      enabled: boolean,
+      siteKey: string,
+      secretKey: string
+    }
+  }
+  
+  if (![ROLES.DUKE, ROLES.KNIGHT, ROLES.CIVILIAN].includes(defaultRole)) {
+    return Response.json({ error: "无效的角色" }, { status: 400 })
+  }
+
+  const turnstileConfig = turnstile ?? {
+    enabled: false,
+    siteKey: "",
+    secretKey: ""
+  }
+
+  if (turnstileConfig.enabled && (!turnstileConfig.siteKey || !turnstileConfig.secretKey)) {
+    return Response.json({ error: "Turnstile 启用时需要提供 Site Key 和 Secret Key" }, { status: 400 })
+  }
+
+  const env = getRequestContext().env
+  await Promise.all([
+    env.SITE_CONFIG.put("DEFAULT_ROLE", defaultRole),
+    env.SITE_CONFIG.put("EMAIL_DOMAINS", emailDomains),
+    env.SITE_CONFIG.put("ADMIN_CONTACT", adminContact),
+    env.SITE_CONFIG.put("MAX_EMAILS", maxEmails),
+    env.SITE_CONFIG.put("TURNSTILE_ENABLED", turnstileConfig.enabled.toString()),
+    env.SITE_CONFIG.put("TURNSTILE_SITE_KEY", turnstileConfig.siteKey),
+    env.SITE_CONFIG.put("TURNSTILE_SECRET_KEY", turnstileConfig.secretKey)
+  ])
+
+  return Response.json({ success: true })
+} 

app/api/emails/[id]/[messageId]/route.ts

@@ -1,14 +1,80 @@
 import { NextResponse } from "next/server"
 import { createDb } from "@/lib/db"
-import { messages } from "@/lib/schema"
+import { messages, emails } from "@/lib/schema"
 import { and, eq } from "drizzle-orm"
-
+import { getUserId } from "@/lib/apiKey"
 export const runtime = "edge"
 
-export async function GET(request: Request, { params }: { params: Promise<{ id: string; messageId: string }> }) {
+export async function DELETE(
+    request: Request,
+    { params }: { params: Promise<{ id: string; messageId: string }> }
+) {
+  const userId = await getUserId()
+
+  try {
+    const db = createDb()
+    const { id, messageId } = await params
+    const email = await db.query.emails.findFirst({
+      where: and(
+          eq(emails.id, id),
+          eq(emails.userId, userId!)
+      )
+    })
+
+    if (!email) {
+      return NextResponse.json(
+          { error: "Email not found or no permission to view" },
+          { status: 403 }
+      )
+    }
+
+    const message = await db.query.messages.findFirst({
+      where: and(
+          eq(messages.emailId, id),
+          eq(messages.id, messageId)
+      )
+    })
+
+    if(!message) {
+      return NextResponse.json(
+          { error: "Message not found or already deleted" },
+          { status: 404 }
+      )
+    }
+
+    await db.delete(messages)
+        .where(eq(messages.id, messageId))
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Failed to delete email:', error)
+    return NextResponse.json(
+        { error: "Failed to delete message" },
+        { status: 500 }
+    )
+  }
+}
+
+export async function GET(_request: Request, { params }: { params: Promise<{ id: string; messageId: string }> }) {
   try {
     const { id, messageId } = await params
     const db = createDb()
+    const userId = await getUserId()
+
+    const email = await db.query.emails.findFirst({
+      where: and(
+        eq(emails.id, id),
+        eq(emails.userId, userId!)
+      )
+    })
+
+    if (!email) {
+      return NextResponse.json(
+        { error: "无权限查看" },
+        { status: 403 }
+      )
+    }
+
     const message = await db.query.messages.findFirst({
       where: and(
         eq(messages.id, messageId),
@@ -27,10 +93,13 @@ export async function GET(request: Request, { params }: { params: Promise<{ id:
       message: {
         id: message.id,
         from_address: message.fromAddress,
+        to_address: message.toAddress,
         subject: message.subject,
         content: message.content,
         html: message.html,
-        received_at: message.receivedAt.getTime()
+        received_at: message.receivedAt.getTime(),
+        sent_at: message.receivedAt.getTime(),
+        type: message.type as 'received' | 'sent'
       }
     })
   } catch (error) {

app/api/emails/[id]/messages/[messageId]/share/[shareId]/route.ts

@@ -0,0 +1,55 @@
+import { createDb } from "@/lib/db"
+import { messageShares, messages, emails } from "@/lib/schema"
+import { eq, and } from "drizzle-orm"
+import { NextResponse } from "next/server"
+import { getUserId } from "@/lib/apiKey"
+
+export const runtime = "edge"
+
+// 删除消息分享链接
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string; messageId: string; shareId: string }> }
+) {
+  const userId = await getUserId()
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { id: emailId, messageId, shareId } = await params
+  const db = createDb()
+
+  try {
+    // 验证邮箱所有权
+    const email = await db.query.emails.findFirst({
+      where: and(eq(emails.id, emailId), eq(emails.userId, userId))
+    })
+
+    if (!email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 403 })
+    }
+
+    // 获取消息并验证
+    const message = await db.query.messages.findFirst({
+      where: and(eq(messages.id, messageId), eq(messages.emailId, emailId))
+    })
+
+    if (!message) {
+      return NextResponse.json({ error: "Message not found" }, { status: 404 })
+    }
+
+    // 删除分享记录
+    await db.delete(messageShares).where(
+      and(eq(messageShares.id, shareId), eq(messageShares.messageId, messageId))
+    )
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Failed to delete message share:", error)
+    return NextResponse.json(
+      { error: "Failed to delete share" },
+      { status: 500 }
+    )
+  }
+}
+

app/api/emails/[id]/messages/[messageId]/share/route.ts

@@ -0,0 +1,119 @@
+import { createDb } from "@/lib/db"
+import { messageShares, messages, emails } from "@/lib/schema"
+import { eq, and } from "drizzle-orm"
+import { NextResponse } from "next/server"
+import { getUserId } from "@/lib/apiKey"
+import { nanoid } from "nanoid"
+
+export const runtime = "edge"
+
+// 获取消息的所有分享链接
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string; messageId: string }> }
+) {
+  const userId = await getUserId()
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { id: emailId, messageId } = await params
+  const db = createDb()
+
+  try {
+    // 验证邮箱所有权
+    const email = await db.query.emails.findFirst({
+      where: and(eq(emails.id, emailId), eq(emails.userId, userId))
+    })
+
+    if (!email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 403 })
+    }
+
+    // 获取消息
+    const message = await db.query.messages.findFirst({
+      where: and(eq(messages.id, messageId), eq(messages.emailId, emailId))
+    })
+
+    if (!message) {
+      return NextResponse.json({ error: "Message not found" }, { status: 404 })
+    }
+
+    // 获取该消息的所有分享链接
+    const shares = await db.query.messageShares.findMany({
+      where: eq(messageShares.messageId, messageId),
+      orderBy: (messageShares, { desc }) => [desc(messageShares.createdAt)]
+    })
+
+    return NextResponse.json({ shares, total: shares.length })
+  } catch (error) {
+    console.error("Failed to fetch message shares:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch shares" },
+      { status: 500 }
+    )
+  }
+}
+
+// 创建新的消息分享链接
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string; messageId: string }> }
+) {
+  const userId = await getUserId()
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { id: emailId, messageId } = await params
+  const db = createDb()
+
+  try {
+    // 验证邮箱所有权
+    const email = await db.query.emails.findFirst({
+      where: and(eq(emails.id, emailId), eq(emails.userId, userId))
+    })
+
+    if (!email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 403 })
+    }
+
+    // 获取消息并验证
+    const message = await db.query.messages.findFirst({
+      where: and(eq(messages.id, messageId), eq(messages.emailId, emailId))
+    })
+
+    if (!message) {
+      return NextResponse.json({ error: "Message not found" }, { status: 404 })
+    }
+
+    // 解析请求体
+    const body = await request.json() as { expiresIn: number }
+    const { expiresIn } = body // expiresIn 单位为毫秒，0表示永久
+
+    // 生成简短的分享token (16个字符)
+    const token = nanoid(16)
+
+    // 计算过期时间
+    let expiresAt = null
+    if (expiresIn && expiresIn > 0) {
+      expiresAt = new Date(Date.now() + expiresIn)
+    }
+
+    // 创建分享记录
+    const [share] = await db.insert(messageShares).values({
+      messageId,
+      token,
+      expiresAt
+    }).returning()
+
+    return NextResponse.json(share, { status: 201 })
+  } catch (error) {
+    console.error("Failed to create message share:", error)
+    return NextResponse.json(
+      { error: "Failed to create share" },
+      { status: 500 }
+    )
+  }
+}
+

app/api/emails/[id]/route.ts

@@ -1,11 +1,51 @@
 import { NextResponse } from "next/server"
 import { createDb } from "@/lib/db"
-import { messages } from "@/lib/schema"
-import { and, eq, lt, or, sql } from "drizzle-orm"
+import { emails, messages } from "@/lib/schema"
+import { eq, and, lt, or, sql, ne, isNull } from "drizzle-orm"
 import { encodeCursor, decodeCursor } from "@/lib/cursor"
+import { getUserId } from "@/lib/apiKey"
+import { checkBasicSendPermission } from "@/lib/send-permissions"
 
 export const runtime = "edge"
 
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const userId = await getUserId()
+
+  try {
+    const db = createDb()
+    const { id } = await params
+    const email = await db.query.emails.findFirst({
+      where: and(
+        eq(emails.id, id),
+        eq(emails.userId, userId!)
+      )
+    })
+
+    if (!email) {
+      return NextResponse.json(
+        { error: "邮箱不存在或无权限删除" },
+        { status: 403 }
+      )
+    }
+    await db.delete(messages)
+      .where(eq(messages.emailId, id))
+
+    await db.delete(emails)
+      .where(eq(emails.id, id))
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Failed to delete email:', error)
+    return NextResponse.json(
+      { error: "删除邮箱失败" },
+      { status: 500 }
+    )
+  }
+} 
+
 const PAGE_SIZE = 20
 
 export async function GET(
@@ -14,12 +54,46 @@ export async function GET(
 ) {
   const { searchParams } = new URL(request.url)
   const cursorStr = searchParams.get('cursor')
+  const messageType = searchParams.get('type')
 
   try {
     const db = createDb()
     const { id } = await params
 
-    const baseConditions = eq(messages.emailId, id)
+    const userId = await getUserId()
+    if (messageType === 'sent') {
+      const permissionResult = await checkBasicSendPermission(userId!)
+      if (!permissionResult.canSend) {
+        return NextResponse.json(
+          { error: permissionResult.error || "您没有查看发送邮件的权限" },
+          { status: 403 }
+        )
+      }
+    }
+
+    const email = await db.query.emails.findFirst({
+      where: and(
+        eq(emails.id, id),
+        eq(emails.userId, userId!)
+      )
+    })
+
+    if (!email) {
+      return NextResponse.json(
+        { error: "无权限查看" },
+        { status: 403 }
+      )
+    }
+
+    const baseConditions = and(
+      eq(messages.emailId, id),
+      messageType === 'sent' 
+        ? eq(messages.type, "sent") 
+        : or(
+            ne(messages.type, "sent"),
+            isNull(messages.type)
+          )
+    )
 
     const totalResult = await db.select({ count: sql<number>`count(*)` })
       .from(messages)
@@ -30,22 +104,24 @@ export async function GET(
 
     if (cursorStr) {
       const { timestamp, id } = decodeCursor(cursorStr)
+      const orderByTime = messageType === 'sent' ? messages.sentAt : messages.receivedAt
       conditions.push(
-        // @ts-expect-error "ignore the error"
         or(
-          lt(messages.receivedAt, new Date(timestamp)),
+          lt(orderByTime, new Date(timestamp)),
           and(
-            eq(messages.receivedAt, new Date(timestamp)),
+            eq(orderByTime, new Date(timestamp)),
             lt(messages.id, id)
           )
         )
       )
     }
 
+    const orderByTime = messageType === 'sent' ? messages.sentAt : messages.receivedAt
+    
     const results = await db.query.messages.findMany({
       where: and(...conditions),
       orderBy: (messages, { desc }) => [
-        desc(messages.receivedAt),
+        desc(orderByTime),
         desc(messages.id)
       ],
       limit: PAGE_SIZE + 1
@@ -54,7 +130,9 @@ export async function GET(
     const hasMore = results.length > PAGE_SIZE
     const nextCursor = hasMore 
       ? encodeCursor(
-          results[PAGE_SIZE - 1].receivedAt.getTime(),
+          messageType === 'sent' 
+            ? results[PAGE_SIZE - 1].sentAt!.getTime()
+            : results[PAGE_SIZE - 1].receivedAt.getTime(),
           results[PAGE_SIZE - 1].id
         )
       : null
@@ -63,9 +141,13 @@ export async function GET(
     return NextResponse.json({ 
       messages: messageList.map(msg => ({
         id: msg.id,
-        from_address: msg.fromAddress,
+        from_address: msg?.fromAddress,
+        to_address: msg?.toAddress,
         subject: msg.subject,
-        received_at: msg.receivedAt.getTime()
+        content: msg.content,
+        html: msg.html,
+        sent_at: msg.sentAt?.getTime(),
+        received_at: msg.receivedAt?.getTime()
       })),
       nextCursor,
       total: totalCount

app/api/emails/[id]/send/route.ts

@@ -0,0 +1,134 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { createDb } from "@/lib/db"
+import { emails, messages } from "@/lib/schema"
+import { eq } from "drizzle-orm"
+import { getRequestContext } from "@cloudflare/next-on-pages"
+import { checkSendPermission } from "@/lib/send-permissions"
+
+export const runtime = "edge"
+
+interface SendEmailRequest {
+  to: string
+  subject: string
+  content: string
+}
+
+async function sendWithResend(
+  to: string,
+  subject: string,
+  content: string,
+  fromEmail: string,
+  config: { apiKey: string }
+) {
+  const response = await fetch('https://api.resend.com/emails', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${config.apiKey}`,
+    },
+    body: JSON.stringify({
+      from: fromEmail,
+      to: [to],
+      subject: subject,
+      html: content,
+    }),
+  })
+
+  if (!response.ok) {
+    const errorData = await response.json() as { message?: string }
+    console.error('Resend API error:', errorData)
+    throw new Error(errorData.message || "Resend发送失败，请稍后重试")
+  }
+
+  return { success: true }
+}
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "未授权" },
+        { status: 401 }
+      )
+    }
+
+    const { id } = await params
+    const db = createDb()
+
+    const permissionResult = await checkSendPermission(session.user.id)
+    if (!permissionResult.canSend) {
+      return NextResponse.json(
+        { error: permissionResult.error },
+        { status: 403 }
+      )
+    }
+    
+    const remainingEmails = permissionResult.remainingEmails
+
+    const { to, subject, content } = await request.json() as SendEmailRequest
+
+    if (!to || !subject || !content) {
+      return NextResponse.json(
+        { error: "收件人、主题和内容都是必填项" },
+        { status: 400 }
+      )
+    }
+
+    const email = await db.query.emails.findFirst({
+      where: eq(emails.id, id)
+    })
+
+    if (!email) {
+      return NextResponse.json(
+        { error: "邮箱不存在" },
+        { status: 404 }
+      )
+    }
+
+    if (email.userId !== session.user.id) {
+      return NextResponse.json(
+        { error: "无权访问此邮箱" },
+        { status: 403 }
+      )
+    }
+
+    const env = getRequestContext().env
+    const apiKey = await env.SITE_CONFIG.get("RESEND_API_KEY")
+
+    if (!apiKey) {
+      return NextResponse.json(
+        { error: "Resend 发件服务未配置，请联系管理员" },
+        { status: 500 }
+      )
+    }
+
+    await sendWithResend(to, subject, content, email.address, { apiKey })
+
+    await db.insert(messages).values({
+      emailId: email.id,
+      fromAddress: email.address,
+      toAddress: to,
+      subject,
+      content: '',
+      type: "sent",
+      html: content
+    })
+
+    return NextResponse.json({ 
+      success: true,
+      message: "邮件发送成功",
+      remainingEmails
+    })
+  } catch (error) {
+    console.error('Failed to send email:', error)
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "发送邮件失败" },
+      { status: 500 }
+    )
+  }
+} 

app/api/emails/[id]/share/[shareId]/route.ts

@@ -0,0 +1,46 @@
+import { createDb } from "@/lib/db"
+import { emailShares, emails } from "@/lib/schema"
+import { eq, and } from "drizzle-orm"
+import { NextResponse } from "next/server"
+import { getUserId } from "@/lib/apiKey"
+
+export const runtime = "edge"
+
+// 删除分享链接
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string; shareId: string }> }
+) {
+  const userId = await getUserId()
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { id: emailId, shareId } = await params
+  const db = createDb()
+
+  try {
+    // 验证邮箱所有权
+    const email = await db.query.emails.findFirst({
+      where: and(eq(emails.id, emailId), eq(emails.userId, userId))
+    })
+
+    if (!email) {
+      return NextResponse.json({ error: "Email not found" }, { status: 404 })
+    }
+
+    // 删除分享记录
+    await db.delete(emailShares).where(
+      and(eq(emailShares.id, shareId), eq(emailShares.emailId, emailId))
+    )
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Failed to delete email share:", error)
+    return NextResponse.json(
+      { error: "Failed to delete share" },
+      { status: 500 }
+    )
+  }
+}
+

app/api/emails/[id]/share/route.ts

@@ -0,0 +1,101 @@
+import { createDb } from "@/lib/db"
+import { emailShares, emails } from "@/lib/schema"
+import { eq, and } from "drizzle-orm"
+import { NextResponse } from "next/server"
+import { getUserId } from "@/lib/apiKey"
+import { nanoid } from "nanoid"
+
+export const runtime = "edge"
+
+// 获取邮箱的所有分享链接
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const userId = await getUserId()
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { id: emailId } = await params
+  const db = createDb()
+
+  try {
+    // 验证邮箱所有权
+    const email = await db.query.emails.findFirst({
+      where: and(eq(emails.id, emailId), eq(emails.userId, userId))
+    })
+
+    if (!email) {
+      return NextResponse.json({ error: "Email not found" }, { status: 404 })
+    }
+
+    // 获取该邮箱的所有分享链接
+    const shares = await db.query.emailShares.findMany({
+      where: eq(emailShares.emailId, emailId),
+      orderBy: (emailShares, { desc }) => [desc(emailShares.createdAt)]
+    })
+
+    return NextResponse.json({ shares, total: shares.length })
+  } catch (error) {
+    console.error("Failed to fetch email shares:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch shares" },
+      { status: 500 }
+    )
+  }
+}
+
+// 创建新的分享链接
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const userId = await getUserId()
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { id: emailId } = await params
+  const db = createDb()
+
+  try {
+    // 验证邮箱所有权
+    const email = await db.query.emails.findFirst({
+      where: and(eq(emails.id, emailId), eq(emails.userId, userId))
+    })
+
+    if (!email) {
+      return NextResponse.json({ error: "Email not found" }, { status: 404 })
+    }
+
+    // 解析请求体
+    const body = await request.json() as { expiresIn: number }
+    const { expiresIn } = body // expiresIn 单位为毫秒，0表示永久
+
+    // 生成简短的分享token (16个字符)
+    const token = nanoid(16)
+
+    // 计算过期时间
+    let expiresAt = null
+    if (expiresIn && expiresIn > 0) {
+      expiresAt = new Date(Date.now() + expiresIn)
+    }
+
+    // 创建分享记录
+    const [share] = await db.insert(emailShares).values({
+      emailId,
+      token,
+      expiresAt
+    }).returning()
+
+    return NextResponse.json(share, { status: 201 })
+  } catch (error) {
+    console.error("Failed to create email share:", error)
+    return NextResponse.json(
+      { error: "Failed to create share" },
+      { status: 500 }
+    )
+  }
+}
+

app/api/emails/generate/route.ts

@@ -1,70 +1,90 @@
 import { NextResponse } from "next/server"
 import { nanoid } from "nanoid"
-import { auth } from "@/lib/auth"
 import { createDb } from "@/lib/db"
 import { emails } from "@/lib/schema"
 import { eq, and, gt, sql } from "drizzle-orm"
 import { EXPIRY_OPTIONS } from "@/types/email"
 import { EMAIL_CONFIG } from "@/config"
+import { getRequestContext } from "@cloudflare/next-on-pages"
+import { getUserId } from "@/lib/apiKey"
+import { getUserRole } from "@/lib/auth"
+import { ROLES } from "@/lib/permissions"
 
 export const runtime = "edge"
 
 export async function POST(request: Request) {
   const db = createDb()
-  const session = await auth()
+  const env = getRequestContext().env
+
+  const userId = await getUserId()
+  const userRole = await getUserRole(userId!)
 
   try {
-    // Check current number of active emails for user
-    const activeEmailsCount = await db
-      .select({ count: sql<number>`count(*)` })
-      .from(emails)
-      .where(
-        and(
-          eq(emails.userId, session!.user!.id!),
-          gt(emails.expiresAt, new Date())
+    if (userRole !== ROLES.EMPEROR) {
+      const maxEmails = await env.SITE_CONFIG.get("MAX_EMAILS") || EMAIL_CONFIG.MAX_ACTIVE_EMAILS.toString()
+      const activeEmailsCount = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(emails)
+        .where(
+          and(
+            eq(emails.userId, userId!),
+            gt(emails.expiresAt, new Date())
+          )
         )
-      )
-    
-    if (Number(activeEmailsCount[0].count) >= EMAIL_CONFIG.MAX_ACTIVE_EMAILS) {
-      return NextResponse.json(
-        { error: `Reached the maximum email limit (${EMAIL_CONFIG.MAX_ACTIVE_EMAILS})` },
-        { status: 403 }
-      )
+      
+      if (Number(activeEmailsCount[0].count) >= Number(maxEmails)) {
+        return NextResponse.json(
+          { error: `已达到最大邮箱数量限制 (${maxEmails})` },
+          { status: 403 }
+        )
+      }
     }
 
-    const { name, expiryTime } = await request.json<{ 
+    const { name, expiryTime, domain } = await request.json<{ 
       name: string
-      expiryTime: number 
+      expiryTime: number
+      domain: string
     }>()
 
-    // Validate expiry time
     if (!EXPIRY_OPTIONS.some(option => option.value === expiryTime)) {
       return NextResponse.json(
-        { error: "Invalid expiry time" },
+        { error: "无效的过期时间" },
         { status: 400 }
       )
     }
 
-    const address = `${name || nanoid(8)}@${EMAIL_CONFIG.DOMAIN}`
+    const domainString = await env.SITE_CONFIG.get("EMAIL_DOMAINS")
+    const domains = domainString ? domainString.split(',') : ["moemail.app"]
+
+    if (!domains || !domains.includes(domain)) {
+      return NextResponse.json(
+        { error: "无效的域名" },
+        { status: 400 }
+      )
+    }
+
+    const address = `${name || nanoid(8)}@${domain}`
     const existingEmail = await db.query.emails.findFirst({
-      where: eq(emails.address, address)
+      where: eq(sql`LOWER(${emails.address})`, address.toLowerCase())
     })
 
     if (existingEmail) {
       return NextResponse.json(
-        { error: "Email already exists" },
+        { error: "该邮箱地址已被使用" },
         { status: 409 }
       )
     }
 
     const now = new Date()
-    const expires = new Date(now.getTime() + expiryTime)
+    const expires = expiryTime === 0 
+      ? new Date('9999-01-01T00:00:00.000Z')
+      : new Date(now.getTime() + expiryTime)
     
     const emailData: typeof emails.$inferInsert = {
       address,
       createdAt: now,
       expiresAt: expires,
-      userId: session!.user!.id
+      userId: userId!
     }
     
     const result = await db.insert(emails)
@@ -78,7 +98,7 @@ export async function POST(request: Request) {
   } catch (error) {
     console.error('Failed to generate email:', error)
     return NextResponse.json(
-      { error: "Failed to generate email" },
+      { error: "创建邮箱失败" },
       { status: 500 }
     )
   }

app/api/emails/route.ts

@@ -1,28 +1,25 @@
-import { auth } from "@/lib/auth"
 import { createDb } from "@/lib/db"
 import { and, eq, gt, lt, or, sql } from "drizzle-orm"
 import { NextResponse } from "next/server"
 import { emails } from "@/lib/schema"
 import { encodeCursor, decodeCursor } from "@/lib/cursor"
+import { getUserId } from "@/lib/apiKey"
 
 export const runtime = "edge"
 
 const PAGE_SIZE = 20
 
 export async function GET(request: Request) {
-  const session = await auth()
+  const userId = await getUserId()
+
   const { searchParams } = new URL(request.url)
   const cursor = searchParams.get('cursor')
   
-  if (!session?.user?.email) {
-    return NextResponse.json({ emails: [], nextCursor: null, total: 0 })
-  }
-
   const db = createDb()
 
   try {
     const baseConditions = and(
-      eq(emails.userId, session.user.id!),
+      eq(emails.userId, userId!),
       gt(emails.expiresAt, new Date())
     )
 

app/api/emails/send-permission/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { checkSendPermission } from "@/lib/send-permissions"
+
+export const runtime = "edge"
+
+export async function GET() {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({
+        canSend: false,
+        error: "未授权"
+      })
+    }
+    const result = await checkSendPermission(session.user.id)
+    
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error('Failed to check send permission:', error)
+    return NextResponse.json(
+      { 
+        canSend: false, 
+        error: "权限检查失败" 
+      },
+      { status: 500 }
+    )
+  }
+} 

app/api/roles/init-emperor/route.ts

@@ -0,0 +1,61 @@
+import { auth, assignRoleToUser } from "@/lib/auth";
+import { createDb } from "@/lib/db";
+import { roles, userRoles } from "@/lib/schema";
+import { ROLES } from "@/lib/permissions";
+import { eq } from "drizzle-orm";
+
+export const runtime = "edge";
+
+export async function GET() {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return Response.json({ error: "未授权" }, { status: 401 });
+  }
+
+  const db = createDb();
+
+  const emperorRole = await db.query.roles.findFirst({
+    where: eq(roles.name, ROLES.EMPEROR),
+    with: {
+      userRoles: true,
+    },
+  });
+
+  if (emperorRole && emperorRole.userRoles.length > 0) {
+    return Response.json({ error: "已存在皇帝, 谋反将被处死" }, { status: 400 });
+  }
+
+  try {
+    const currentUserRole = await db.query.userRoles.findFirst({
+      where: eq(userRoles.userId, session.user.id),
+      with: {
+        role: true,
+      },
+    });
+
+    if (currentUserRole?.role.name === ROLES.EMPEROR) {
+      return Response.json({ message: "你已经是皇帝了" });
+    }
+
+    let roleId = emperorRole?.id;
+    if (!roleId) {
+      const [newRole] = await db.insert(roles)
+        .values({
+          name: ROLES.EMPEROR,
+          description: "皇帝（网站所有者）",
+        })
+        .returning({ id: roles.id });
+      roleId = newRole.id;
+    }
+
+    await assignRoleToUser(db, session.user.id, roleId);
+
+    return Response.json({ message: "登基成功，你已成为皇帝" });
+  } catch (error) {
+    console.error("Failed to initialize emperor:", error);
+    return Response.json(
+      { error: "登基称帝失败" },
+      { status: 500 }
+    );
+  }
+} 

app/api/roles/promote/route.ts

@@ -0,0 +1,77 @@
+import { createDb } from "@/lib/db";
+import { roles, userRoles } from "@/lib/schema";
+import { eq } from "drizzle-orm";
+import { ROLES } from "@/lib/permissions";
+import { assignRoleToUser } from "@/lib/auth";
+
+export const runtime = "edge";
+
+export async function POST(request: Request) {
+  try {
+    const { userId, roleName } = await request.json() as { 
+      userId: string, 
+      roleName: typeof ROLES.DUKE | typeof ROLES.KNIGHT | typeof ROLES.CIVILIAN 
+    };
+    if (!userId || !roleName) {
+      return Response.json(
+        { error: "缺少必要参数" },
+        { status: 400 }
+      );
+    }
+
+    if (![ROLES.DUKE, ROLES.KNIGHT, ROLES.CIVILIAN].includes(roleName)) {
+      return Response.json(
+        { error: "角色不合法" },
+        { status: 400 }
+      );
+    }
+
+    const db = createDb();
+
+    const currentUserRole = await db.query.userRoles.findFirst({
+      where: eq(userRoles.userId, userId),
+      with: {
+        role: true,
+      },
+    });
+
+    if (currentUserRole?.role.name === ROLES.EMPEROR) {
+      return Response.json(
+        { error: "不能降级皇帝" },
+        { status: 400 }
+      );
+    }
+
+    let targetRole = await db.query.roles.findFirst({
+      where: eq(roles.name, roleName),
+    });
+
+    if (!targetRole) {
+      const description = {
+        [ROLES.DUKE]: "超级用户",
+        [ROLES.KNIGHT]: "高级用户",
+        [ROLES.CIVILIAN]: "普通用户",
+      }[roleName];
+
+      const [newRole] = await db.insert(roles)
+        .values({
+          name: roleName,
+          description,
+        })
+        .returning();
+      targetRole = newRole;
+    }
+
+    await assignRoleToUser(db, userId, targetRole.id);
+
+    return Response.json({ 
+      success: true,
+    });
+  } catch (error) {
+    console.error("Failed to change user role:", error);
+    return Response.json(
+      { error: "操作失败" },
+      { status: 500 }
+    );
+  }
+}

app/api/roles/users/route.ts

@@ -0,0 +1,49 @@
+import { createDb } from "@/lib/db"
+import { users } from "@/lib/schema"
+import { eq } from "drizzle-orm"
+
+export const runtime = "edge"
+
+export async function POST(request: Request) {
+  try {
+    const json = await request.json()
+    const { searchText } = json as { searchText: string }
+
+    if (!searchText) {
+      return Response.json({ error: "请提供用户名或邮箱地址" }, { status: 400 })
+    }
+
+    const db = createDb()
+
+    const user = await db.query.users.findFirst({
+      where: searchText.includes('@') ? eq(users.email, searchText) : eq(users.username, searchText),
+      with: {
+        userRoles: {
+          with: {
+            role: true
+          }
+        }
+      }
+    });
+
+    if (!user) {
+      return Response.json({ error: "未找到用户" }, { status: 404 })
+    }
+
+    return Response.json({
+      user: {
+        id: user.id,
+        name: user.name,
+        username: user.username,
+        email: user.email,
+        role: user.userRoles[0]?.role.name
+      }
+    })
+  } catch (error) {
+    console.error("Failed to find user:", error)
+    return Response.json(
+      { error: "查询用户失败" },
+      { status: 500 }
+    )
+  }
+} 

app/api/shared/[token]/messages/[messageId]/route.ts

@@ -0,0 +1,83 @@
+import { createDb } from "@/lib/db"
+import { emailShares, messages } from "@/lib/schema"
+import { eq, and } from "drizzle-orm"
+import { NextResponse } from "next/server"
+
+export const runtime = "edge"
+
+// 通过分享token获取消息详情
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ token: string; messageId: string }> }
+) {
+  const { token, messageId } = await params
+  const db = createDb()
+
+  try {
+    // 验证分享token
+    const share = await db.query.emailShares.findFirst({
+      where: eq(emailShares.token, token),
+      with: {
+        email: true
+      }
+    })
+
+    if (!share) {
+      return NextResponse.json(
+        { error: "Share link not found or expired" },
+        { status: 404 }
+      )
+    }
+
+    // 检查分享是否过期
+    if (share.expiresAt && share.expiresAt < new Date()) {
+      return NextResponse.json(
+        { error: "Share link has expired" },
+        { status: 410 }
+      )
+    }
+
+    // 检查邮箱是否过期
+    if (share.email.expiresAt < new Date()) {
+      return NextResponse.json(
+        { error: "Email has expired" },
+        { status: 410 }
+      )
+    }
+
+    // 获取消息详情
+    const message = await db.query.messages.findFirst({
+      where: and(
+        eq(messages.id, messageId),
+        eq(messages.emailId, share.email.id)
+      )
+    })
+
+    if (!message) {
+      return NextResponse.json(
+        { error: "Message not found" },
+        { status: 404 }
+      )
+    }
+
+    return NextResponse.json({
+      message: {
+        id: message.id,
+        from_address: message.fromAddress,
+        to_address: message.toAddress,
+        subject: message.subject,
+        content: message.content,
+        html: message.html,
+        received_at: message.receivedAt,
+        sent_at: message.sentAt
+      }
+    })
+  } catch (error) {
+    console.error("Failed to fetch shared message:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch message" },
+      { status: 500 }
+    )
+  }
+}
+

app/api/shared/[token]/messages/route.ts

@@ -0,0 +1,124 @@
+import { createDb } from "@/lib/db"
+import { emailShares, messages } from "@/lib/schema"
+import { eq, and, lt, or, sql, ne, isNull } from "drizzle-orm"
+import { NextResponse } from "next/server"
+import { encodeCursor, decodeCursor } from "@/lib/cursor"
+
+export const runtime = "edge"
+
+const PAGE_SIZE = 20
+
+// 通过分享token获取邮箱的消息列表
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ token: string }> }
+) {
+  const { token } = await params
+  const db = createDb()
+  const { searchParams } = new URL(request.url)
+  const cursor = searchParams.get('cursor')
+
+  try {
+    // 验证分享token
+    const share = await db.query.emailShares.findFirst({
+      where: eq(emailShares.token, token),
+      with: {
+        email: true
+      }
+    })
+
+    if (!share) {
+      return NextResponse.json(
+        { error: "Share link not found or expired" },
+        { status: 404 }
+      )
+    }
+
+    // 检查分享是否过期
+    if (share.expiresAt && share.expiresAt < new Date()) {
+      return NextResponse.json(
+        { error: "Share link has expired" },
+        { status: 410 }
+      )
+    }
+
+    // 检查邮箱是否过期
+    if (share.email.expiresAt < new Date()) {
+      return NextResponse.json(
+        { error: "Email has expired" },
+        { status: 410 }
+      )
+    }
+
+    const emailId = share.email.id
+
+    // 只显示接收的邮件，不显示发送的邮件
+    const baseConditions = and(
+      eq(messages.emailId, emailId),
+      or(
+        ne(messages.type, "sent"),
+        isNull(messages.type)
+      )
+    )
+
+    // 获取消息总数（只统计接收的邮件）
+    const totalResult = await db.select({ count: sql<number>`count(*)` })
+      .from(messages)
+      .where(baseConditions)
+    const totalCount = Number(totalResult[0].count)
+
+    const conditions = [baseConditions]
+
+    if (cursor) {
+      const { timestamp, id } = decodeCursor(cursor)
+      const cursorCondition = or(
+        lt(messages.receivedAt, new Date(timestamp)),
+        and(
+          eq(messages.receivedAt, new Date(timestamp)),
+          lt(messages.id, id)
+        )
+      )
+      if (cursorCondition) {
+        conditions.push(cursorCondition)
+      }
+    }
+
+    const results = await db.query.messages.findMany({
+      where: and(...conditions),
+      orderBy: (messages, { desc }) => [
+        desc(messages.receivedAt),
+        desc(messages.id)
+      ],
+      limit: PAGE_SIZE + 1
+    })
+
+    const hasMore = results.length > PAGE_SIZE
+    const nextCursor = hasMore
+      ? encodeCursor(
+          results[PAGE_SIZE - 1].receivedAt.getTime(),
+          results[PAGE_SIZE - 1].id
+        )
+      : null
+    const messageList = hasMore ? results.slice(0, PAGE_SIZE) : results
+
+    return NextResponse.json({
+      messages: messageList.map(msg => ({
+        id: msg.id,
+        from_address: msg.fromAddress,
+        to_address: msg.toAddress,
+        subject: msg.subject,
+        received_at: msg.receivedAt,
+        sent_at: msg.sentAt
+      })),
+      nextCursor,
+      total: totalCount
+    })
+  } catch (error) {
+    console.error("Failed to fetch shared messages:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch messages" },
+      { status: 500 }
+    )
+  }
+}
+

app/api/shared/[token]/route.ts

@@ -0,0 +1,64 @@
+import { createDb } from "@/lib/db"
+import { emailShares } from "@/lib/schema"
+import { eq } from "drizzle-orm"
+import { NextResponse } from "next/server"
+
+export const runtime = "edge"
+
+// 通过分享token获取邮箱信息
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ token: string }> }
+) {
+  const { token } = await params
+  const db = createDb()
+
+  try {
+    // 查找分享记录
+    const share = await db.query.emailShares.findFirst({
+      where: eq(emailShares.token, token),
+      with: {
+        email: true
+      }
+    })
+
+    if (!share) {
+      return NextResponse.json(
+        { error: "Share link not found or expired" },
+        { status: 404 }
+      )
+    }
+
+    // 检查分享是否过期
+    if (share.expiresAt && share.expiresAt < new Date()) {
+      return NextResponse.json(
+        { error: "Share link has expired" },
+        { status: 410 }
+      )
+    }
+
+    // 检查邮箱是否过期
+    if (share.email.expiresAt < new Date()) {
+      return NextResponse.json(
+        { error: "Email has expired" },
+        { status: 410 }
+      )
+    }
+
+    return NextResponse.json({
+      email: {
+        id: share.email.id,
+        address: share.email.address,
+        createdAt: share.email.createdAt,
+        expiresAt: share.email.expiresAt
+      }
+    })
+  } catch (error) {
+    console.error("Failed to fetch shared email:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch shared email" },
+      { status: 500 }
+    )
+  }
+}
+

app/api/shared/message/[token]/route.ts

@@ -0,0 +1,69 @@
+import { createDb } from "@/lib/db"
+import { messageShares, messages } from "@/lib/schema"
+import { eq } from "drizzle-orm"
+import { NextResponse } from "next/server"
+
+export const runtime = "edge"
+
+// 通过分享token获取消息详情
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ token: string }> }
+) {
+  const { token } = await params
+  const db = createDb()
+
+  try {
+    // 验证分享token
+    const share = await db.query.messageShares.findFirst({
+      where: eq(messageShares.token, token)
+    })
+
+    if (!share) {
+      return NextResponse.json(
+        { error: "Share link not found or disabled" },
+        { status: 404 }
+      )
+    }
+
+    // 检查分享是否过期
+    if (share.expiresAt && share.expiresAt < new Date()) {
+      return NextResponse.json(
+        { error: "Share link has expired" },
+        { status: 410 }
+      )
+    }
+
+    // 获取消息详情
+    const message = await db.query.messages.findFirst({
+      where: eq(messages.id, share.messageId)
+    })
+
+    if (!message) {
+      return NextResponse.json(
+        { error: "Message not found" },
+        { status: 404 }
+      )
+    }
+
+    return NextResponse.json({
+      message: {
+        id: message.id,
+        from_address: message.fromAddress,
+        to_address: message.toAddress,
+        subject: message.subject,
+        content: message.content,
+        html: message.html,
+        received_at: message.receivedAt,
+        sent_at: message.sentAt
+      }
+    })
+  } catch (error) {
+    console.error("Failed to fetch shared message:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch message" },
+      { status: 500 }
+    )
+  }
+}
+

app/components/auth/login-form.tsx

@@ -0,0 +1,433 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import { signIn } from "next-auth/react"
+import { useTranslations } from "next-intl"
+import { useToast } from "@/components/ui/use-toast"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs"
+import { Github, Loader2, KeyRound, User2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Turnstile } from "@/components/auth/turnstile"
+
+interface TurnstileConfigProps {
+  enabled: boolean
+  siteKey: string
+}
+
+interface LoginFormProps {
+  turnstile?: TurnstileConfigProps
+}
+
+interface FormErrors {
+  username?: string
+  password?: string
+  confirmPassword?: string
+}
+
+export function LoginForm({ turnstile }: LoginFormProps) {
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [errors, setErrors] = useState<FormErrors>({})
+  const [turnstileToken, setTurnstileToken] = useState("")
+  const [turnstileResetCounter, setTurnstileResetCounter] = useState(0)
+  const [activeTab, setActiveTab] = useState<"login" | "register">("login")
+  const { toast } = useToast()
+  const t = useTranslations("auth.loginForm")
+
+  const turnstileSiteKey = turnstile?.siteKey ?? ""
+  const turnstileEnabled = Boolean(turnstile?.enabled && turnstileSiteKey)
+
+  const resetTurnstile = useCallback(() => {
+    setTurnstileToken("")
+    setTurnstileResetCounter((prev) => prev + 1)
+  }, [])
+
+  const ensureTurnstileSolved = () => {
+    if (!turnstileEnabled) return true
+    if (turnstileToken) return true
+
+    toast({
+      title: t("toast.turnstileRequired"),
+      description: t("toast.turnstileRequiredDesc"),
+      variant: "destructive",
+    })
+    return false
+  }
+
+  const clearForm = () => {
+    setUsername("")
+    setPassword("")
+    setConfirmPassword("")
+    setErrors({})
+  }
+
+  const handleTabChange = (value: string) => {
+    setActiveTab(value as "login" | "register")
+    clearForm()
+  }
+
+  const validateLoginForm = () => {
+    const newErrors: FormErrors = {}
+    if (!username) newErrors.username = t("errors.usernameRequired")
+    if (!password) newErrors.password = t("errors.passwordRequired")
+    if (username.includes('@')) newErrors.username = t("errors.usernameInvalid")
+    if (password && password.length < 8) newErrors.password = t("errors.passwordTooShort")
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const validateRegisterForm = () => {
+    const newErrors: FormErrors = {}
+    if (!username) newErrors.username = t("errors.usernameRequired")
+    if (!password) newErrors.password = t("errors.passwordRequired")
+    if (username.includes('@')) newErrors.username = t("errors.usernameInvalid")
+    if (password && password.length < 8) newErrors.password = t("errors.passwordTooShort")
+    if (!confirmPassword) newErrors.confirmPassword = t("errors.confirmPasswordRequired")
+    if (password !== confirmPassword) newErrors.confirmPassword = t("errors.passwordMismatch")
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleLogin = async () => {
+    if (!validateLoginForm()) return
+    if (!ensureTurnstileSolved()) return
+
+    setLoading(true)
+    try {
+      const result = await signIn("credentials", {
+        username,
+        password,
+        turnstileToken,
+        redirect: false,
+      })
+
+      if (result?.error) {
+        toast({
+          title: t("toast.loginFailed"),
+          description: result.error,
+          variant: "destructive",
+        })
+        setLoading(false)
+        resetTurnstile()
+        return
+      }
+
+      window.location.href = "/"
+    } catch (error) {
+      toast({
+        title: t("toast.loginFailed"),
+        description: error instanceof Error ? error.message : t("toast.registerFailedDesc"),
+        variant: "destructive",
+      })
+      setLoading(false)
+      resetTurnstile()
+    }
+  }
+
+  const handleRegister = async () => {
+    if (!validateRegisterForm()) return
+    if (!ensureTurnstileSolved()) return
+
+    setLoading(true)
+    try {
+      const response = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password, turnstileToken }),
+      })
+
+      const data = await response.json() as { error?: string }
+
+      if (!response.ok) {
+        toast({
+          title: t("toast.registerFailed"),
+          description: data.error || t("toast.registerFailedDesc"),
+          variant: "destructive",
+        })
+        setLoading(false)
+        resetTurnstile()
+        return
+      }
+
+      // 注册成功后自动登录
+      const result = await signIn("credentials", {
+        username,
+        password,
+        turnstileToken,
+        redirect: false,
+      })
+
+      if (result?.error) {
+        toast({
+          title: t("toast.loginFailed"),
+          description: result.error || t("toast.autoLoginFailed"),
+          variant: "destructive",
+        })
+        setLoading(false)
+        resetTurnstile()
+        return
+      }
+
+      window.location.href = "/"
+    } catch (error) {
+      toast({
+        title: t("toast.registerFailed"),
+        description: error instanceof Error ? error.message : t("toast.registerFailedDesc"),
+        variant: "destructive",
+      })
+      setLoading(false)
+      resetTurnstile()
+    }
+  }
+
+  const handleGithubLogin = () => {
+    signIn("github", { callbackUrl: "/" })
+  }
+
+  const handleGoogleLogin = () => {
+    signIn("google", { callbackUrl: "/" })
+  }
+
+  return (
+    <Card className="w-[95%] max-w-lg border-2 border-primary/20">
+      <CardHeader className="space-y-2">
+        <CardTitle className="text-2xl text-center bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
+          {t("title")}
+        </CardTitle>
+        <CardDescription className="text-center">
+          {t("subtitle")}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="px-6">
+        <Tabs value={activeTab} className="w-full" onValueChange={handleTabChange}>
+          <TabsList className="grid w-full grid-cols-2 mb-6">
+            <TabsTrigger value="login">{t("tabs.login")}</TabsTrigger>
+            <TabsTrigger value="register">{t("tabs.register")}</TabsTrigger>
+          </TabsList>
+          <div className="min-h-[220px]">
+            <TabsContent value="login" className="space-y-4 mt-0">
+              <div className="space-y-3">
+                <div className="space-y-1.5">
+                  <div className="relative">
+                    <div className="absolute left-2.5 top-2 text-muted-foreground">
+                      <User2 className="h-5 w-5" />
+                    </div>
+                    <Input
+                      className={cn(
+                        "h-9 pl-9 pr-3",
+                        errors.username && "border-destructive focus-visible:ring-destructive"
+                      )}
+                      placeholder={t("fields.username")}
+                      value={username}
+                      onChange={(e) => {
+                        setUsername(e.target.value)
+                        setErrors({})
+                      }}
+                      disabled={loading}
+                    />
+                  </div>
+                  {errors.username && (
+                    <p className="text-xs text-destructive">{errors.username}</p>
+                  )}
+                </div>
+                <div className="space-y-1.5">
+                  <div className="relative">
+                    <div className="absolute left-2.5 top-2 text-muted-foreground">
+                      <KeyRound className="h-5 w-5" />
+                    </div>
+                    <Input
+                      className={cn(
+                        "h-9 pl-9 pr-3",
+                        errors.password && "border-destructive focus-visible:ring-destructive"
+                      )}
+                      type="password"
+                      placeholder={t("fields.password")}
+                      value={password}
+                      onChange={(e) => {
+                        setPassword(e.target.value)
+                        setErrors({})
+                      }}
+                      disabled={loading}
+                    />
+                  </div>
+                  {errors.password && (
+                    <p className="text-xs text-destructive">{errors.password}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-3 pt-1">
+                <Button
+                  className="w-full"
+                  onClick={handleLogin}
+                  disabled={loading}
+                >
+                  {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  {t("actions.login")}
+                </Button>
+
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-background px-2 text-muted-foreground">
+                      {t("actions.or")}
+                    </span>
+                  </div>
+                </div>
+
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={handleGithubLogin}
+                >
+                  <Github className="mr-2 h-4 w-4" />
+                  {t("actions.githubLogin")}
+                </Button>
+
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={handleGoogleLogin}
+                >
+                  <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                    />
+                    <path
+                      fill="currentColor"
+                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                    />
+                    <path
+                      fill="currentColor"
+                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                    />
+                    <path
+                      fill="currentColor"
+                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                    />
+                  </svg>
+                  {t("actions.googleLogin")}
+                </Button>
+              </div>
+            </TabsContent>
+            <TabsContent value="register" className="space-y-4 mt-0">
+              <div className="space-y-3">
+                <div className="space-y-1.5">
+                  <div className="relative">
+                    <div className="absolute left-2.5 top-2 text-muted-foreground">
+                      <User2 className="h-5 w-5" />
+                    </div>
+                    <Input
+                      className={cn(
+                        "h-9 pl-9 pr-3",
+                        errors.username && "border-destructive focus-visible:ring-destructive"
+                      )}
+                      placeholder={t("fields.username")}
+                      value={username}
+                      onChange={(e) => {
+                        setUsername(e.target.value)
+                        setErrors({})
+                      }}
+                      disabled={loading}
+                    />
+                  </div>
+                  {errors.username && (
+                    <p className="text-xs text-destructive">{errors.username}</p>
+                  )}
+                </div>
+                <div className="space-y-1.5">
+                  <div className="relative">
+                    <div className="absolute left-2.5 top-2 text-muted-foreground">
+                      <KeyRound className="h-5 w-5" />
+                    </div>
+                    <Input
+                      className={cn(
+                        "h-9 pl-9 pr-3",
+                        errors.password && "border-destructive focus-visible:ring-destructive"
+                      )}
+                      type="password"
+                      placeholder={t("fields.password")}
+                      value={password}
+                      onChange={(e) => {
+                        setPassword(e.target.value)
+                        setErrors({})
+                      }}
+                      disabled={loading}
+                    />
+                  </div>
+                  {errors.password && (
+                    <p className="text-xs text-destructive">{errors.password}</p>
+                  )}
+                </div>
+                <div className="space-y-1.5">
+                  <div className="relative">
+                    <div className="absolute left-2.5 top-2 text-muted-foreground">
+                      <KeyRound className="h-5 w-5" />
+                    </div>
+                    <Input
+                      className={cn(
+                        "h-9 pl-9 pr-3",
+                        errors.confirmPassword && "border-destructive focus-visible:ring-destructive"
+                      )}
+                      type="password"
+                      placeholder={t("fields.confirmPassword")}
+                      value={confirmPassword}
+                      onChange={(e) => {
+                        setConfirmPassword(e.target.value)
+                        setErrors({})
+                      }}
+                      disabled={loading}
+                    />
+                  </div>
+                  {errors.confirmPassword && (
+                    <p className="text-xs text-destructive">{errors.confirmPassword}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-3 pt-1">
+                <Button
+                  className="w-full"
+                  onClick={handleRegister}
+                  disabled={loading}
+                >
+                  {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  {t("actions.register")}
+                </Button>
+              </div>
+            </TabsContent>
+          </div>
+        </Tabs>
+        {turnstileEnabled && turnstileSiteKey && (
+          <div className={cn("space-y-2", activeTab === "login" ? "mt-4" : "")}>
+            <Turnstile
+              siteKey={turnstileSiteKey}
+              onVerify={setTurnstileToken}
+              onExpire={resetTurnstile}
+              resetSignal={turnstileResetCounter}
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

app/components/auth/sign-button.tsx

@@ -2,46 +2,56 @@
 
 import { Button } from "@/components/ui/button"
 import Image from "next/image"
-import { signIn, signOut, useSession } from "next-auth/react"
-import { Github } from "lucide-react"
+import { signOut, useSession } from "next-auth/react"
+import { LogIn } from "lucide-react"
+import { useRouter } from 'next/navigation'
+import { useTranslations, useLocale } from "next-intl"
 import Link from "next/link"
+import { cn } from "@/lib/utils"
 
-export function SignButton() {
+interface SignButtonProps {
+  size?: "default" | "lg"
+}
+
+export function SignButton({ size = "default" }: SignButtonProps) {
+  const router = useRouter()
+  const locale = useLocale()
   const { data: session, status } = useSession()
+  const t = useTranslations("auth.signButton")
   const loading = status === "loading"
 
   if (loading) {
-    return <div className="h-9" /> // 防止布局跳动
+    return <div className="h-9" />
   }
 
   if (!session?.user) {
     return (
-      <Button onClick={() => signIn("github", { callbackUrl: "/moe" })} className="gap-2">
-        <Github className="w-4 h-4" />
-        使用 GitHub 登录
+      <Button onClick={() => router.push(`/${locale}/login`)} className={cn("gap-2", size === "lg" ? "px-8" : "")} size={size}>
+        <LogIn className={size === "lg" ? "w-5 h-5" : "w-4 h-4"} />
+        {t("login")}
       </Button>
     )
   }
 
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-y-4 gap-x-3 sm:gap-x-4">
       <Link 
-        href="/profile"
+        href={`/${locale}/profile`}
         className="flex items-center gap-2 hover:opacity-80 transition-opacity"
       >
         {session.user.image && (
           <Image
             src={session.user.image}
-            alt={session.user.name || "用户头像"}
+            alt={session.user.name || t("userAvatar")}
             width={24}
             height={24}
             className="rounded-full"
           />
         )}
-        <span className="text-sm">{session.user.name}</span>
+        <span className="hidden sm:inline-block text-sm">{session.user.name}</span>
       </Link>
-      <Button onClick={() => signOut({ callbackUrl: "/" })} variant="outline">
-        登出
+      <Button onClick={() => signOut({ callbackUrl: `/${locale}` })} variant="outline" className={cn("flex-shrink-0", size === "lg" ? "px-8" : "")} size={size}>
+        {t("logout")}
       </Button>
     </div>
   )

app/components/auth/turnstile.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { cn } from "@/lib/utils"
+
+interface TurnstileProps {
+  siteKey: string
+  onVerify: (token: string) => void
+  onExpire?: () => void
+  resetSignal?: number
+  className?: string
+}
+
+export function Turnstile({
+  siteKey,
+  onVerify,
+  onExpire,
+  resetSignal,
+  className,
+}: TurnstileProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const widgetIdRef = useRef<string>(null)
+
+  useEffect(() => {
+    if (!siteKey) return
+
+    const renderWidget = () => {
+      if (!containerRef.current || !window.turnstile) return
+
+      if (widgetIdRef.current) {
+        window.turnstile.reset(widgetIdRef.current)
+        return
+      }
+
+      widgetIdRef.current = window.turnstile.render(containerRef.current, {
+        sitekey: siteKey,
+        theme: "auto",
+        callback: (token: string) => onVerify(token),
+        "error-callback": () => onVerify(""),
+        "expired-callback": () => {
+          onVerify("")
+          onExpire?.()
+        },
+      })
+    }
+
+    const existingScript = document.querySelector<HTMLScriptElement>('script[data-turnstile="true"]')
+
+    if (window.turnstile) {
+      renderWidget()
+    } else if (existingScript) {
+      const handleExistingScriptLoad = () => renderWidget()
+
+      if (existingScript.dataset.loaded === "true") {
+        renderWidget()
+      } else {
+        existingScript.addEventListener("load", handleExistingScriptLoad)
+      }
+
+      return () => {
+        existingScript.removeEventListener("load", handleExistingScriptLoad)
+      }
+    } else {
+      const script = document.createElement("script")
+      script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+      script.async = true
+      script.defer = true
+      script.dataset.turnstile = "true"
+      const handleScriptLoad = () => {
+        script.dataset.loaded = "true"
+        renderWidget()
+      }
+      script.addEventListener("load", handleScriptLoad)
+      document.head.appendChild(script)
+
+      return () => {
+        script.removeEventListener("load", handleScriptLoad)
+      }
+    }
+
+    return () => {
+      if (widgetIdRef.current && window.turnstile) {
+        window.turnstile.remove(widgetIdRef.current)
+        widgetIdRef.current = null
+      }
+    }
+  }, [siteKey, onExpire, onVerify])
+
+  useEffect(() => {
+    if (resetSignal === undefined) return
+    if (widgetIdRef.current && window.turnstile) {
+      window.turnstile.reset(widgetIdRef.current)
+    }
+    onVerify("")
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resetSignal])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("flex justify-center", className)}
+    />
+  )
+}

app/components/emails/create-dialog.tsx

@@ -1,35 +1,48 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { useTranslations } from "next-intl"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { Plus, RefreshCw } from "lucide-react"
+import { Copy, Plus, RefreshCw } from "lucide-react"
 import { useToast } from "@/components/ui/use-toast"
 import { nanoid } from "nanoid"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { EXPIRY_OPTIONS } from "@/types/email"
-import { EMAIL_CONFIG } from "@/config"
+import { useCopy } from "@/hooks/use-copy"
+import { useConfig } from "@/hooks/use-config"
 
 interface CreateDialogProps {
   onEmailCreated: () => void
 }
 
 export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
+  const { config } = useConfig()
+  const t = useTranslations("emails.create")
+  const tList = useTranslations("emails.list")
+  const tCommon = useTranslations("common.actions")
   const [open, setOpen] = useState(false)
   const [loading, setLoading] = useState(false)
   const [emailName, setEmailName] = useState("")
-  const [expiryTime, setExpiryTime] = useState(EXPIRY_OPTIONS[1].value.toString()) // Default to 24 hours
+  const [currentDomain, setCurrentDomain] = useState("")
+  const [expiryTime, setExpiryTime] = useState(EXPIRY_OPTIONS[1].value.toString())
   const { toast } = useToast()
+  const { copyToClipboard } = useCopy()
 
   const generateRandomName = () => setEmailName(nanoid(8))
 
+  const copyEmailAddress = () => {
+    copyToClipboard(`${emailName}@${currentDomain}`)
+  }
+
   const createEmail = async () => {
     if (!emailName.trim()) {
       toast({
-        title: "错误",
-        description: "请输入邮箱名",
+        title: tList("error"),
+        description: t("namePlaceholder"),
         variant: "destructive"
       })
       return
@@ -40,43 +53,34 @@ export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
       const response = await fetch("/api/emails/generate", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ 
+        body: JSON.stringify({
           name: emailName,
-          expiryTime: parseInt(expiryTime)  // 确保转换为数字
+          domain: currentDomain,
+          expiryTime: parseInt(expiryTime)
         })
       })
-      
-      if (response.status === 409) {
-        toast({
-          title: "错误",
-          description: "该邮箱名已被使用",
-          variant: "destructive"
-        })
-        return
-      }
 
-      if (response.status === 403) {
+      if (!response.ok) {
+        const data = await response.json()
         toast({
-          title: "错误",
-          description: "已达到最大邮箱数量限制",
+          title: tList("error"),
+          description: (data as { error: string }).error,
           variant: "destructive"
         })
         return
       }
-      
-      if (!response.ok) throw new Error("Failed to create email")
 
       toast({
-        title: "成功",
-        description: "已创建新的临时邮箱"
+        title: tList("success"),
+        description: t("success")
       })
       onEmailCreated()
       setOpen(false)
       setEmailName("")
     } catch {
       toast({
-        title: "错误",
-        description: "创建邮箱失败",
+        title: tList("error"),
+        description: t("failed"),
         variant: "destructive"
       })
     } finally {
@@ -84,26 +88,44 @@ export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
     }
   }
 
+  useEffect(() => {
+    if ((config?.emailDomainsArray?.length ?? 0) > 0) {
+      setCurrentDomain(config?.emailDomainsArray[0] ?? "")
+    }
+  }, [config])
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button className="gap-2">
           <Plus className="w-4 h-4" />
-          创建新邮箱
+          {t("title")}
         </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>创建新的临时邮箱</DialogTitle>
+          <DialogTitle>{t("title")}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4 py-4">
           <div className="flex gap-2">
             <Input
               value={emailName}
               onChange={(e) => setEmailName(e.target.value)}
-              placeholder="输入邮箱名"
+              placeholder={t("namePlaceholder")}
               className="flex-1"
             />
+            {(config?.emailDomainsArray?.length ?? 0) > 1 && (
+              <Select value={currentDomain} onValueChange={setCurrentDomain}>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {config?.emailDomainsArray?.map(d => (
+                    <SelectItem key={d} value={d}>@{d}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
             <Button
               variant="outline"
               size="icon"
@@ -113,35 +135,51 @@ export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
               <RefreshCw className="w-4 h-4" />
             </Button>
           </div>
-          
+
           <div className="flex items-center gap-4">
-            <Label className="shrink-0 text-muted-foreground">过期时间</Label>
+            <Label className="shrink-0 text-muted-foreground">{t("expiryTime")}</Label>
             <RadioGroup
               value={expiryTime}
               onValueChange={setExpiryTime}
               className="flex gap-6"
             >
-              {EXPIRY_OPTIONS.map((option) => (
-                <div key={option.value} className="flex items-center gap-2">
-                  <RadioGroupItem value={option.value.toString()} id={option.value.toString()} />
-                  <Label htmlFor={option.value.toString()} className="cursor-pointer text-sm">
-                    {option.label}
-                  </Label>
-                </div>
-              ))}
+              {EXPIRY_OPTIONS.map((option, index) => {
+                const labels = [t("oneHour"), t("oneDay"), t("threeDays"), t("permanent")]
+                return (
+                  <div key={option.value} className="flex items-center gap-2">
+                    <RadioGroupItem value={option.value.toString()} id={option.value.toString()} />
+                    <Label htmlFor={option.value.toString()} className="cursor-pointer text-sm">
+                      {labels[index]}
+                    </Label>
+                  </div>
+                )
+              })}
             </RadioGroup>
           </div>
 
-          <div className="text-sm text-gray-500">
-            完整邮箱地址将为: {emailName ? `${emailName}@${EMAIL_CONFIG.DOMAIN}` : "..."}
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span className="shrink-0">{t("domain")}:</span>
+            {emailName ? (
+              <div className="flex items-center gap-2 min-w-0">
+                <span className="truncate">{`${emailName}@${currentDomain}`}</span>
+                <div
+                  className="shrink-0 cursor-pointer hover:text-primary transition-colors"
+                  onClick={copyEmailAddress}
+                >
+                  <Copy className="size-4" />
+                </div>
+              </div>
+            ) : (
+              <span className="text-gray-400">...</span>
+            )}
           </div>
         </div>
         <div className="flex justify-end gap-2">
           <Button variant="outline" onClick={() => setOpen(false)} disabled={loading}>
-            取消
+            {tCommon("cancel")}
           </Button>
           <Button onClick={createEmail} disabled={loading}>
-            {loading ? "创建中..." : "创建"}
+            {loading ? t("creating") : t("create")}
           </Button>
         </div>
       </DialogContent>

app/components/emails/email-list.tsx

@@ -2,12 +2,28 @@
 
 import { useEffect, useState } from "react"
 import { useSession } from "next-auth/react"
+import { useTranslations } from "next-intl"
 import { CreateDialog } from "./create-dialog"
-import { Mail, RefreshCw } from "lucide-react"
+import { ShareDialog } from "./share-dialog"
+import { Mail, RefreshCw, Trash2 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { useThrottle } from "@/hooks/use-throttle"
 import { EMAIL_CONFIG } from "@/config"
+import { useToast } from "@/components/ui/use-toast"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { ROLES } from "@/lib/permissions"
+import { useUserRole } from "@/hooks/use-user-role"
+import { useConfig } from "@/hooks/use-config"
 
 interface Email {
   id: string
@@ -17,7 +33,7 @@ interface Email {
 }
 
 interface EmailListProps {
-  onEmailSelect: (email: Email) => void
+  onEmailSelect: (email: Email | null) => void
   selectedEmailId?: string
 }
 
@@ -29,12 +45,18 @@ interface EmailResponse {
 
 export function EmailList({ onEmailSelect, selectedEmailId }: EmailListProps) {
   const { data: session } = useSession()
+  const { config } = useConfig()
+  const { role } = useUserRole()
+  const t = useTranslations("emails.list")
+  const tCommon = useTranslations("common.actions")
   const [emails, setEmails] = useState<Email[]>([])
   const [loading, setLoading] = useState(true)
   const [refreshing, setRefreshing] = useState(false)
   const [nextCursor, setNextCursor] = useState<string | null>(null)
   const [loadingMore, setLoadingMore] = useState(false)
   const [total, setTotal] = useState(0)
+  const [emailToDelete, setEmailToDelete] = useState<Email | null>(null)
+  const { toast } = useToast()
 
   const fetchEmails = async (cursor?: string) => {
     try {
@@ -96,67 +118,147 @@ export function EmailList({ onEmailSelect, selectedEmailId }: EmailListProps) {
 
   useEffect(() => {
     if (session) fetchEmails()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session])
 
+  const handleDelete = async (email: Email) => {
+    try {
+      const response = await fetch(`/api/emails/${email.id}`, {
+        method: "DELETE"
+      })
+
+      if (!response.ok) {
+        const data = await response.json()
+        toast({
+          title: t("error"),
+          description: (data as { error: string }).error,
+          variant: "destructive"
+        })
+        return
+      }
+
+      setEmails(prev => prev.filter(e => e.id !== email.id))
+      setTotal(prev => prev - 1)
+
+      toast({
+        title: t("success"),
+        description: t("deleteSuccess")
+      })
+      
+      if (selectedEmailId === email.id) {
+        onEmailSelect(null)
+      }
+    } catch {
+      toast({
+        title: t("error"),
+        description: t("deleteFailed"),
+        variant: "destructive"
+      })
+    } finally {
+      setEmailToDelete(null)
+    }
+  }
+
   if (!session) return null
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="p-2 flex justify-between items-center border-b border-primary/20">
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={handleRefresh}
-            disabled={refreshing}
-            className={cn("h-8 w-8", refreshing && "animate-spin")}
-          >
-            <RefreshCw className="h-4 w-4" />
-          </Button>
-          <span className="text-xs text-gray-500">
-            {total}/{EMAIL_CONFIG.MAX_ACTIVE_EMAILS} 个邮箱
-          </span>
+    <>
+      <div className="flex flex-col h-full">
+        <div className="p-2 flex justify-between items-center border-b border-primary/20">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleRefresh}
+              disabled={refreshing}
+              className={cn("h-8 w-8", refreshing && "animate-spin")}
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+            <span className="text-xs text-gray-500">
+              {role === ROLES.EMPEROR ? (
+                t("emailCountUnlimited", { count: total })
+              ) : (
+                t("emailCount", { count: total, max: config?.maxEmails || EMAIL_CONFIG.MAX_ACTIVE_EMAILS })
+              )}
+            </span>
+          </div>
+          <CreateDialog onEmailCreated={handleRefresh} />
         </div>
-        <CreateDialog onEmailCreated={handleRefresh} />
-      </div>
-      
-      <div className="flex-1 overflow-auto p-2" onScroll={handleScroll}>
-        {loading ? (
-          <div className="text-center text-sm text-gray-500">加载中...</div>
-        ) : emails.length > 0 ? (
-          <div className="space-y-1">
-            {emails.map(email => (
-              <div
-                key={email.id}
-                onClick={() => onEmailSelect(email)}
-                className={cn(
-                  "flex items-center gap-2 p-2 rounded cursor-pointer text-sm",
-                  "hover:bg-primary/5",
-                  selectedEmailId === email.id && "bg-primary/10"
-                )}
-              >
-                <Mail className="w-4 h-4 text-primary/60" />
-                <div className="truncate flex-1">
-                  <div className="font-medium truncate">{email.address}</div>
-                  <div className="text-xs text-gray-500">
-                    过期时间: {new Date(email.expiresAt).toLocaleString()}
+        
+        <div className="flex-1 overflow-auto p-2" onScroll={handleScroll}>
+          {loading ? (
+            <div className="text-center text-sm text-gray-500">{t("loading")}</div>
+          ) : emails.length > 0 ? (
+            <div className="space-y-1">
+              {emails.map(email => (
+                <div
+                  key={email.id}
+                  className={cn("flex items-center gap-2 p-2 rounded cursor-pointer text-sm group",
+                    "hover:bg-primary/5",
+                    selectedEmailId === email.id && "bg-primary/10"
+                  )}
+                  onClick={() => onEmailSelect(email)}
+                >
+                  <Mail className="h-4 w-4 text-primary/60" />
+                  <div className="truncate flex-1">
+                    <div className="font-medium truncate">{email.address}</div>
+                    <div className="text-xs text-gray-500">
+                      {new Date(email.expiresAt).getFullYear() === 9999 ? (
+                        t("permanent")
+                      ) : (
+                        `${t("expiresAt")}: ${new Date(email.expiresAt).toLocaleString()}`
+                      )}
+                    </div>
+                  </div>
+                  <div className="opacity-0 group-hover:opacity-100 flex gap-1" onClick={(e) => e.stopPropagation()}>
+                    <ShareDialog emailId={email.id} emailAddress={email.address} />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        setEmailToDelete(email)
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
                   </div>
                 </div>
-              </div>
-            ))}
-            {loadingMore && (
-              <div className="text-center text-sm text-gray-500 py-2">
-                加载更多...
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className="text-center text-sm text-gray-500">
-            还没有邮箱，创建一个吧！
-          </div>
-        )}
+              ))}
+              {loadingMore && (
+                <div className="text-center text-sm text-gray-500 py-2">
+                  {t("loadingMore")}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-center text-sm text-gray-500">
+              {t("noEmails")}
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+
+      <AlertDialog open={!!emailToDelete} onOpenChange={() => setEmailToDelete(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("deleteConfirm")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("deleteDescription", { email: emailToDelete?.address || "" })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive hover:bg-destructive/90"
+              onClick={() => emailToDelete && handleDelete(emailToDelete)}
+            >
+              {tCommon("delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   )
 } 

app/components/emails/message-list-container.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useState } from "react"
+import { useTranslations } from "next-intl"
+import { Send, Inbox } from "lucide-react"
+import { Tabs, SlidingTabsList, SlidingTabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { MessageList } from "./message-list"
+import { useSendPermission } from "@/hooks/use-send-permission"
+
+interface MessageListContainerProps {
+  email: {
+    id: string
+    address: string
+  }
+  onMessageSelect: (messageId: string | null, messageType?: 'received' | 'sent') => void
+  selectedMessageId?: string | null
+  refreshTrigger?: number
+}
+
+export function MessageListContainer({ email, onMessageSelect, selectedMessageId, refreshTrigger }: MessageListContainerProps) {
+  const t = useTranslations("emails.messages")
+  const [activeTab, setActiveTab] = useState<'received' | 'sent'>('received')
+  const { canSend: canSendEmails } = useSendPermission()
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId as 'received' | 'sent')
+    onMessageSelect(null)
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {canSendEmails ? (
+        <Tabs value={activeTab} onValueChange={handleTabChange} className="h-full flex flex-col">
+          <div className="p-2 border-b border-primary/20">
+            <SlidingTabsList>
+              <SlidingTabsTrigger value="received">
+                <Inbox className="h-4 w-4" />
+                {t("received")}
+              </SlidingTabsTrigger>
+              <SlidingTabsTrigger value="sent">
+                <Send className="h-4 w-4" />
+                {t("sent")}
+              </SlidingTabsTrigger>
+            </SlidingTabsList>
+          </div>
+          
+          <TabsContent value="received" className="flex-1 overflow-hidden m-0">
+            <MessageList
+              email={email}
+              messageType="received"
+              onMessageSelect={onMessageSelect}
+              selectedMessageId={selectedMessageId}
+            />
+          </TabsContent>
+          
+          <TabsContent value="sent" className="flex-1 overflow-hidden m-0">
+            <MessageList
+              email={email}
+              messageType="sent"
+              onMessageSelect={onMessageSelect}
+              selectedMessageId={selectedMessageId}
+              refreshTrigger={refreshTrigger}
+            />
+          </TabsContent>
+        </Tabs>
+      ) : (
+        <div className="flex-1 overflow-hidden">
+          <MessageList
+            email={email}
+            messageType="received"
+            onMessageSelect={onMessageSelect}
+            selectedMessageId={selectedMessageId}
+          />
+        </div>
+      )}
+    </div>
+  )
+} 

app/components/emails/message-list.tsx

@@ -1,17 +1,34 @@
 "use client"
 
 import { useState, useEffect, useRef } from "react"
-import { Mail, Calendar, RefreshCw } from "lucide-react"
+import { useTranslations } from "next-intl"
+import {Mail, Calendar, RefreshCw, Trash2, Share2} from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { useThrottle } from "@/hooks/use-throttle"
 import { EMAIL_CONFIG } from "@/config"
+import { useToast } from "@/components/ui/use-toast"
+import { ShareMessageDialog } from "./share-message-dialog"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "@/components/ui/alert-dialog";
 
 interface Message {
   id: string
-  from_address: string
+  from_address?: string
+  to_address?: string
   subject: string
-  received_at: number
+  received_at?: number
+  sent_at?: number
+  content?: string
+  html?: string
 }
 
 interface MessageListProps {
@@ -19,8 +36,10 @@ interface MessageListProps {
     id: string
     address: string
   }
-  onMessageSelect: (messageId: string) => void
+  messageType: 'received' | 'sent'
+  onMessageSelect: (messageId: string | null, messageType?: 'received' | 'sent') => void
   selectedMessageId?: string | null
+  refreshTrigger?: number
 }
 
 interface MessageResponse {
@@ -29,15 +48,20 @@ interface MessageResponse {
   total: number
 }
 
-export function MessageList({ email, onMessageSelect, selectedMessageId }: MessageListProps) {
+export function MessageList({ email, messageType, onMessageSelect, selectedMessageId, refreshTrigger }: MessageListProps) {
+  const t = useTranslations("emails.messages")
+  const tList = useTranslations("emails.list")
+  const tCommon = useTranslations("common.actions")
   const [messages, setMessages] = useState<Message[]>([])
   const [loading, setLoading] = useState(true)
   const [refreshing, setRefreshing] = useState(false)
   const [nextCursor, setNextCursor] = useState<string | null>(null)
   const [loadingMore, setLoadingMore] = useState(false)
-  const pollTimeoutRef = useRef<Timer>()
+  const pollTimeoutRef = useRef<Timer>(null)
   const messagesRef = useRef<Message[]>([]) // 添加 ref 来追踪最新的消息列表
   const [total, setTotal] = useState(0)
+  const [messageToDelete, setMessageToDelete] = useState<Message | null>(null)
+  const { toast } = useToast()
 
   // 当 messages 改变时更新 ref
   useEffect(() => {
@@ -47,6 +71,9 @@ export function MessageList({ email, onMessageSelect, selectedMessageId }: Messa
   const fetchMessages = async (cursor?: string) => {
     try {
       const url = new URL(`/api/emails/${email.id}`, window.location.origin)
+      if (messageType === 'sent') {
+        url.searchParams.set('type', 'sent')
+      }
       if (cursor) {
         url.searchParams.set('cursor', cursor)
       }
@@ -96,7 +123,7 @@ export function MessageList({ email, onMessageSelect, selectedMessageId }: Messa
   const stopPolling = () => {
     if (pollTimeoutRef.current) {
       clearInterval(pollTimeoutRef.current)
-      pollTimeoutRef.current = undefined
+      pollTimeoutRef.current = null
     }
   }
 
@@ -118,6 +145,44 @@ export function MessageList({ email, onMessageSelect, selectedMessageId }: Messa
     }
   }, 200)
 
+  const handleDelete = async (message: Message) => {
+    try {
+      const response = await fetch(`/api/emails/${email.id}/${message.id}${messageType === 'sent' ? '?type=sent' : ''}`, {
+        method: "DELETE"
+      })
+
+      if (!response.ok) {
+        const data = await response.json()
+        toast({
+          title: tList("error"),
+          description: (data as { error: string }).error,
+          variant: "destructive"
+        })
+        return
+      }
+
+      setMessages(prev => prev.filter(e => e.id !== message.id))
+      setTotal(prev => prev - 1)
+
+      toast({
+        title: tList("success"),
+        description: tList("deleteSuccess")
+      })
+
+      if (selectedMessageId === message.id) {
+        onMessageSelect(null)
+      }
+    } catch {
+      toast({
+        title: tList("error"),
+        description: tList("deleteFailed"),
+        variant: "destructive"
+      })
+    } finally {
+      setMessageToDelete(null)
+    }
+  }
+
   useEffect(() => {
     if (!email.id) {
       return
@@ -133,7 +198,16 @@ export function MessageList({ email, onMessageSelect, selectedMessageId }: Messa
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [email.id])
 
+  useEffect(() => {
+    if (refreshTrigger && refreshTrigger > 0) {
+      setRefreshing(true)
+      fetchMessages()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshTrigger])
+
   return (
+  <>
     <div className="h-full flex flex-col">
       <div className="p-2 flex justify-between items-center border-b border-primary/20">
         <Button
@@ -146,21 +220,21 @@ export function MessageList({ email, onMessageSelect, selectedMessageId }: Messa
           <RefreshCw className="h-4 w-4" />
         </Button>
         <span className="text-xs text-gray-500">
-          {total > 0 ? `${total} 封邮件` : "暂无邮件"}
+          {total > 0 ? `${total} ${t("messageCount")}` : t("noMessages")}
         </span>
       </div>
 
       <div className="flex-1 overflow-auto" onScroll={handleScroll}>
         {loading ? (
-          <div className="p-4 text-center text-sm text-gray-500">加载中...</div>
+          <div className="p-4 text-center text-sm text-gray-500">{t("loading")}</div>
         ) : messages.length > 0 ? (
           <div className="divide-y divide-primary/10">
             {messages.map(message => (
               <div
                 key={message.id}
-                onClick={() => onMessageSelect(message.id)}
+                onClick={() => onMessageSelect(message.id, messageType)}
                 className={cn(
-                  "p-3 hover:bg-primary/5 cursor-pointer",
+                  "p-3 hover:bg-primary/5 cursor-pointer group",
                   selectedMessageId === message.id && "bg-primary/10"
                 )}
               >
@@ -169,28 +243,77 @@ export function MessageList({ email, onMessageSelect, selectedMessageId }: Messa
                   <div className="min-w-0 flex-1">
                     <p className="font-medium text-sm truncate">{message.subject}</p>
                     <div className="mt-1 flex items-center gap-2 text-xs text-gray-500">
-                      <span className="truncate">{message.from_address}</span>
+                      <span className="truncate">
+                        {message.from_address || message.to_address || ''}
+                      </span>
                       <span className="flex items-center gap-1">
                         <Calendar className="w-3 h-3" />
-                        {new Date(message.received_at).toLocaleString()}
+                        {new Date(message.received_at || message.sent_at || 0).toLocaleString()}
                       </span>
                     </div>
                   </div>
+                  <div className="opacity-0 group-hover:opacity-100 flex gap-1" onClick={(e) => e.stopPropagation()}>
+                    <ShareMessageDialog
+                      emailId={email.id}
+                      messageId={message.id}
+                      messageSubject={message.subject}
+                      trigger={
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                        >
+                          <Share2 className="h-4 w-4" />
+                        </Button>
+                      }
+                    />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        setMessageToDelete(message)
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  </div>
                 </div>
               </div>
             ))}
             {loadingMore && (
               <div className="text-center text-sm text-gray-500 py-2">
-                加载更多...
+                {t("loadingMore")}
               </div>
             )}
           </div>
         ) : (
           <div className="p-4 text-center text-sm text-gray-500">
-            暂无邮件
+            {t("noMessages")}
           </div>
         )}
       </div>
     </div>
+    <AlertDialog open={!!messageToDelete} onOpenChange={() => setMessageToDelete(null)}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{tList("deleteConfirm")}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {tList("deleteDescription", { email: messageToDelete?.subject || "" })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
+          <AlertDialogAction
+              className="bg-destructive hover:bg-destructive/90"
+              onClick={() => messageToDelete && handleDelete(messageToDelete)}
+          >
+            {tCommon("delete")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  </>
   )
 } 

app/components/emails/message-view.tsx

@@ -1,43 +1,80 @@
 "use client"
 
 import { useState, useEffect, useRef } from "react"
-import { Loader2 } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { Loader2, Share2 } from "lucide-react"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { Label } from "@/components/ui/label"
+import { useTheme } from "next-themes"
+import { useToast } from "@/components/ui/use-toast"
+import { ShareMessageDialog } from "./share-message-dialog"
 
 interface Message {
   id: string
-  from_address: string
+  from_address?: string
+  to_address?: string
   subject: string
   content: string
-  html: string | null
-  received_at: number
+  html?: string
+  received_at?: number
+  sent_at?: number
 }
 
 interface MessageViewProps {
   emailId: string
   messageId: string
+  messageType?: 'received' | 'sent'
   onClose: () => void
 }
 
 type ViewMode = "html" | "text"
 
-export function MessageView({ emailId, messageId }: MessageViewProps) {
+export function MessageView({ emailId, messageId, messageType = 'received' }: MessageViewProps) {
+  const t = useTranslations("emails.messageView")
+  const tList = useTranslations("emails.list")
   const [message, setMessage] = useState<Message | null>(null)
   const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
   const [viewMode, setViewMode] = useState<ViewMode>("html")
   const iframeRef = useRef<HTMLIFrameElement>(null)
+  const { theme } = useTheme()
+  const { toast } = useToast()
 
   useEffect(() => {
     const fetchMessage = async () => {
       try {
-        const response = await fetch(`/api/emails/${emailId}/${messageId}`)
+        setLoading(true)
+        setError(null)
+        
+        const url = `/api/emails/${emailId}/${messageId}${messageType === 'sent' ? '?type=sent' : ''}`;
+        
+        const response = await fetch(url)
+        
+        if (!response.ok) {
+          const errorData = await response.json()
+          const errorMessage = (errorData as { error?: string }).error || t("loadError")
+          setError(errorMessage)
+          toast({
+            title: tList("error"),
+            description: errorMessage,
+            variant: "destructive"
+          })
+          return
+        }
+        
         const data = await response.json() as { message: Message }
         setMessage(data.message)
         if (!data.message.html) {
           setViewMode("text")
         }
       } catch (error) {
+        const errorMessage = t("networkError")
+        setError(errorMessage)
+        toast({
+          title: tList("error"), 
+          description: errorMessage,
+          variant: "destructive"
+        })
         console.error("Failed to fetch message:", error)
       } finally {
         setLoading(false)
@@ -45,10 +82,9 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
     }
 
     fetchMessage()
-  }, [emailId, messageId])
+  }, [emailId, messageId, messageType, toast, t, tList])
 
-  // 处理 iframe 内容
-  useEffect(() => {
+  const updateIframeContent = () => {
     if (viewMode === "html" && message?.html && iframeRef.current) {
       const iframe = iframeRef.current
       const doc = iframe.contentDocument || iframe.contentWindow?.document
@@ -66,8 +102,8 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
                   padding: 0;
                   min-height: 100%;
                   font-family: system-ui, -apple-system, sans-serif;
-                  color: ${document.documentElement.classList.contains('dark') ? '#fff' : '#000'};
-                  background: transparent;
+                  color: ${theme === 'dark' ? '#fff' : '#000'};
+                  background: ${theme === 'dark' ? '#1a1a1a' : '#fff'};
                 }
                 body {
                   padding: 20px;
@@ -88,21 +124,21 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
                   background: transparent;
                 }
                 ::-webkit-scrollbar-thumb {
-                  background: ${document.documentElement.classList.contains('dark') 
-                    ? 'rgba(130, 109, 217, 0.3)' 
+                  background: ${theme === 'dark'
+                    ? 'rgba(130, 109, 217, 0.3)'
                     : 'rgba(130, 109, 217, 0.2)'};
                   border-radius: 9999px;
                   transition: background-color 0.2s;
                 }
                 ::-webkit-scrollbar-thumb:hover {
-                  background: ${document.documentElement.classList.contains('dark')
+                  background: ${theme === 'dark'
                     ? 'rgba(130, 109, 217, 0.5)'
                     : 'rgba(130, 109, 217, 0.4)'};
                 }
                 /* Firefox 滚动条 */
                 * {
                   scrollbar-width: thin;
-                  scrollbar-color: ${document.documentElement.classList.contains('dark')
+                  scrollbar-color: ${theme === 'dark'
                     ? 'rgba(130, 109, 217, 0.3) transparent'
                     : 'rgba(130, 109, 217, 0.2) transparent'};
                 }
@@ -139,12 +175,32 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
         }
       }
     }
-  }, [message?.html, viewMode])
+  }
+
+  // 监听主题变化和内容变化
+  useEffect(() => {
+    updateIframeContent()
+  }, [message?.html, viewMode, theme])
 
   if (loading) {
     return (
       <div className="flex items-center justify-center h-32">
         <Loader2 className="w-5 h-5 animate-spin text-primary/60" />
+        <span className="ml-2 text-sm text-gray-500">{t("loading")}</span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-32 text-center">
+        <p className="text-sm text-destructive mb-2">{error}</p>
+        <button 
+          onClick={() => window.location.reload()} 
+          className="text-xs text-primary hover:underline"
+        >
+          {t("retry")}
+        </button>
       </div>
     )
   }
@@ -154,14 +210,31 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
   return (
     <div className="h-full flex flex-col">
       <div className="p-4 space-y-3 border-b border-primary/20">
-        <h3 className="text-base font-bold">{message.subject}</h3>
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="text-base font-bold flex-1">{message.subject}</h3>
+          <ShareMessageDialog 
+            emailId={emailId}
+            messageId={message.id} 
+            messageSubject={message.subject}
+            trigger={
+              <button className="p-1.5 hover:bg-primary/10 rounded-md transition-colors">
+                <Share2 className="h-4 w-4 text-gray-500" />
+              </button>
+            }
+          />
+        </div>
         <div className="text-xs text-gray-500 space-y-1">
-          <p>发件人：{message.from_address}</p>
-          <p>时间：{new Date(message.received_at).toLocaleString()}</p>
+          {message.from_address && (
+            <p>{t("from")}: {message.from_address}</p>
+          )}
+          {message.to_address && (
+            <p>{t("to")}: {message.to_address}</p>
+          )}
+          <p>{t("time")}: {new Date(message.sent_at || message.received_at || 0).toLocaleString()}</p>
         </div>
       </div>
       
-      {message.html && (
+      {message.html && message.content && (
         <div className="border-b border-primary/20 p-2">
           <RadioGroup
             value={viewMode}
@@ -174,7 +247,7 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
                 htmlFor="html" 
                 className="text-xs cursor-pointer"
               >
-                HTML 格式
+                {t("htmlFormat")}
               </Label>
             </div>
             <div className="flex items-center space-x-2">
@@ -183,7 +256,7 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
                 htmlFor="text" 
                 className="text-xs cursor-pointer"
               >
-                纯文本格式
+                {t("textFormat")}
               </Label>
             </div>
           </RadioGroup>

app/components/emails/send-dialog.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { useState } from "react"
+import { useTranslations } from "next-intl"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Send } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+interface SendDialogProps {
+  emailId: string
+  fromAddress: string
+  onSendSuccess?: () => void
+}
+
+export function SendDialog({ emailId, fromAddress, onSendSuccess }: SendDialogProps) {
+  const t = useTranslations("emails.send")
+  const tList = useTranslations("emails.list")
+  const tCommon = useTranslations("common.actions")
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [to, setTo] = useState("")
+  const [subject, setSubject] = useState("")
+  const [content, setContent] = useState("")
+  const { toast } = useToast()
+
+  const handleSend = async () => {
+    if (!to.trim() || !subject.trim() || !content.trim()) {
+      toast({
+        title: tList("error"),
+        description: t("toPlaceholder") + ", " + t("subjectPlaceholder") + ", " + t("contentPlaceholder"),
+        variant: "destructive"
+      })
+      return
+    }
+
+    setLoading(true)
+    try {
+      const response = await fetch(`/api/emails/${emailId}/send`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ to, subject, content })
+      })
+
+      if (!response.ok) {
+        const data = await response.json()
+        toast({
+          title: tList("error"),
+          description: (data as { error: string }).error,
+          variant: "destructive"
+        })
+        return
+      }
+
+      toast({
+        title: tList("success"),
+        description: t("success")
+      })
+      setOpen(false)
+      setTo("")
+      setSubject("")
+      setContent("")
+      
+      onSendSuccess?.()
+    
+    } catch {
+      toast({
+        title: tList("error"),
+        description: t("failed"),
+        variant: "destructive"
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <TooltipProvider>
+        <Tooltip>
+          <DialogTrigger asChild>
+            <TooltipTrigger asChild>
+              <Button 
+                variant="ghost" 
+                size="sm"
+                className="h-8 gap-2 hover:bg-primary/10 hover:text-primary transition-colors"
+              >
+                <Send className="h-4 w-4" />
+                <span className="hidden sm:inline">{t("title")}</span>
+              </Button>
+            </TooltipTrigger>
+          </DialogTrigger>
+          <TooltipContent className="sm:hidden">
+            <p>{t("title")}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("title")}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="text-sm text-muted-foreground">
+            {t("from")}: {fromAddress}
+          </div>
+          <Input
+            value={to}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTo(e.target.value)}
+            placeholder={t("toPlaceholder")}
+          />
+          <Input
+            value={subject}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSubject(e.target.value)}
+            placeholder={t("subjectPlaceholder")}
+          />
+          <Textarea
+            value={content}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setContent(e.target.value)}
+            placeholder={t("contentPlaceholder")}
+            rows={6}
+          />
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => setOpen(false)} disabled={loading}>
+            {tCommon("cancel")}
+          </Button>
+          <Button onClick={handleSend} disabled={loading}>
+            {loading ? t("sending") : t("send")}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+} 

app/components/emails/share-dialog.tsx

@@ -0,0 +1,347 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useTranslations } from "next-intl"
+import { Share2, Copy, Trash2, Link2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useToast } from "@/components/ui/use-toast"
+import { useCopy } from "@/hooks/use-copy"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { EXPIRY_OPTIONS } from "@/types/email"
+
+interface ShareDialogProps {
+  emailId: string
+  emailAddress: string
+}
+
+interface ShareLink {
+  id: string
+  token: string
+  createdAt: number | string | Date
+  expiresAt: number | string | Date | null
+  enabled: boolean
+}
+
+export function ShareDialog({ emailId }: ShareDialogProps) {
+  const t = useTranslations("emails.share")
+  const { toast } = useToast()
+  const { copyToClipboard } = useCopy()
+
+  const [open, setOpen] = useState(false)
+  const [shares, setShares] = useState<ShareLink[]>([])
+  const [loading, setLoading] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [expiryTime, setExpiryTime] = useState(EXPIRY_OPTIONS[1].value.toString())
+  const [deleteTarget, setDeleteTarget] = useState<ShareLink | null>(null)
+
+  const fetchShares = async () => {
+    try {
+      setLoading(true)
+      const response = await fetch(`/api/emails/${emailId}/share`)
+      if (!response.ok) throw new Error("Failed to fetch shares")
+
+      const data = await response.json() as { shares: ShareLink[] }
+      setShares(data.shares || [])
+    } catch (error) {
+      console.error("Failed to fetch shares:", error)
+      toast({
+        title: t("createFailed"),
+        description: String(error),
+        variant: "destructive"
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createShare = async () => {
+    try {
+      setCreating(true)
+      const response = await fetch(`/api/emails/${emailId}/share`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ expiresIn: Number(expiryTime) })
+      })
+
+      if (!response.ok) throw new Error("Failed to create share")
+
+      const share = await response.json() as ShareLink
+      setShares(prev => [share, ...prev])
+
+      toast({
+        title: t("createSuccess"),
+      })
+    } catch (error) {
+      console.error("Failed to create share:", error)
+      toast({
+        title: t("createFailed"),
+        description: String(error),
+        variant: "destructive"
+      })
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const deleteShare = async (share: ShareLink) => {
+    try {
+      const response = await fetch(`/api/emails/${emailId}/share/${share.id}`, {
+        method: "DELETE"
+      })
+
+      if (!response.ok) throw new Error("Failed to delete share")
+
+      setShares(prev => prev.filter(s => s.id !== share.id))
+
+      toast({
+        title: t("deleteSuccess"),
+      })
+    } catch (error) {
+      console.error("Failed to delete share:", error)
+      toast({
+        title: t("deleteFailed"),
+        description: String(error),
+        variant: "destructive"
+      })
+    } finally {
+      setDeleteTarget(null)
+    }
+  }
+
+  const getShareUrl = (token: string) => {
+    return `${window.location.origin}/shared/${token}`
+  }
+
+  const handleCopy = async (token: string) => {
+    const url = getShareUrl(token)
+    const success = await copyToClipboard(url)
+
+    if (success) {
+      toast({
+        title: t("copied"),
+      })
+    } else {
+      toast({
+        title: t("copyFailed"),
+        variant: "destructive"
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      fetchShares()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <Share2 className="h-4 w-4" />
+          </Button>
+        </DialogTrigger>
+        <DialogContent
+          className="sm:max-w-[600px]"
+          onInteractOutside={(e) => e.preventDefault()}
+          onEscapeKeyDown={(e) => {
+            if (deleteTarget) {
+              e.preventDefault()
+            }
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>{t("title")}</DialogTitle>
+            <DialogDescription>
+              {t("description")}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {/* Create new share link */}
+            <div className="space-y-2">
+              <Label>{t("expiryTime")}</Label>
+              <div className="flex gap-2">
+                <Select value={expiryTime} onValueChange={setExpiryTime}>
+                  <SelectTrigger className="flex-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {EXPIRY_OPTIONS.map(option => (
+                      <SelectItem key={option.value} value={option.value.toString()}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button onClick={createShare} disabled={creating} className="min-w-[100px]">
+                  {creating ? t("creating") : t("createLink")}
+                </Button>
+              </div>
+            </div>
+
+            {/* Active share links */}
+            <div className="space-y-2">
+              <Label>{t("activeLinks")}</Label>
+              <div className="h-[270px] overflow-y-auto">
+                {loading ? (
+                  <div className="text-sm text-gray-500 text-center py-8 flex flex-col items-center gap-2">
+                    <div className="w-5 h-5 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
+                    <span>{t("loading")}</span>
+                  </div>
+                ) : shares.length === 0 ? (
+                  <div className="text-sm text-gray-500 text-center py-4">
+                    {t("noLinks")}
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {shares.map(share => {
+                      // 将expiresAt转换为时间戳进行比较
+                      const expiresAtTime = share.expiresAt
+                        ? (typeof share.expiresAt === 'number'
+                          ? share.expiresAt
+                          : new Date(share.expiresAt).getTime())
+                        : null
+                      const isExpired = expiresAtTime !== null && expiresAtTime < Date.now()
+                      return (
+                        <div
+                          key={share.id}
+                          className={cn(
+                            "p-3 border rounded-lg space-y-2 transition-all",
+                            isExpired
+                              ? "border-destructive/30 bg-destructive/5 opacity-75"
+                              : "border-border"
+                          )}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Link2 className={cn(
+                              "h-4 w-4 flex-shrink-0",
+                              isExpired ? "text-destructive/60" : "text-primary/60"
+                            )} />
+                            <a
+                              href={isExpired ? undefined : getShareUrl(share.token)}
+                              target={isExpired ? undefined : "_blank"}
+                              rel={isExpired ? undefined : "noopener noreferrer"}
+                              onClick={(e) => {
+                                if (isExpired) {
+                                  e.preventDefault()
+                                }
+                              }}
+                              className={cn(
+                                "flex-1 text-xs p-1 rounded font-mono transition-colors break-all",
+                                isExpired
+                                  ? "bg-destructive/10 text-destructive/70 cursor-not-allowed pointer-events-none"
+                                  : "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary cursor-pointer"
+                              )}
+                            >
+                              {getShareUrl(share.token)}
+                            </a>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8 flex-shrink-0"
+                              onClick={() => handleCopy(share.token)}
+                            >
+                              <Copy className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8 flex-shrink-0"
+                              onClick={() => setDeleteTarget(share)}
+                            >
+                              <Trash2 className="h-4 w-4 text-destructive" />
+                            </Button>
+                          </div>
+                          <div className="flex gap-y-4 gap-x-2 sm:gap-x-4 text-xs">
+                            <span className={cn(
+                              isExpired ? "text-destructive/70" : "text-gray-500"
+                            )}>
+                              {t("createdAt")}: {new Date(
+                                typeof share.createdAt === 'number'
+                                  ? share.createdAt
+                                  : share.createdAt
+                              ).toLocaleString()}
+                            </span>
+                            <span className={cn(
+                              isExpired ? "text-destructive/70" : "text-gray-500"
+                            )}>
+                              {t("expiresAt")}: {
+                                share.expiresAt
+                                  ? new Date(
+                                    typeof share.expiresAt === 'number'
+                                      ? share.expiresAt
+                                      : share.expiresAt
+                                  ).toLocaleString()
+                                  : t("permanent")
+                              }
+                            </span>
+                            {isExpired && (
+                              <span className="text-destructive font-medium flex items-center gap-1">
+                                <span className="w-2 h-2 bg-destructive rounded-full"></span>
+                                {t("expired")}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("deleteConfirm")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("deleteDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive hover:bg-destructive/90"
+              onClick={() => deleteTarget && deleteShare(deleteTarget)}
+            >
+              {t("delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+

app/components/emails/share-message-dialog.tsx

@@ -0,0 +1,356 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useTranslations } from "next-intl"
+import { Share2, Copy, Trash2, Link2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useToast } from "@/components/ui/use-toast"
+import { useCopy } from "@/hooks/use-copy"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { EXPIRY_OPTIONS } from "@/types/email"
+
+interface ShareMessageDialogProps {
+  emailId: string
+  messageId: string
+  messageSubject: string
+  trigger?: React.ReactNode
+}
+
+interface ShareLink {
+  id: string
+  token: string
+  createdAt: number | string | Date
+  expiresAt: number | string | Date | null
+  enabled: boolean
+}
+
+export function ShareMessageDialog({ emailId, messageId, messageSubject, trigger }: ShareMessageDialogProps) {
+  const t = useTranslations("emails.shareMessage")
+  const { toast } = useToast()
+  const { copyToClipboard } = useCopy()
+  
+  const [open, setOpen] = useState(false)
+  const [shares, setShares] = useState<ShareLink[]>([])
+  const [loading, setLoading] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [expiryTime, setExpiryTime] = useState(EXPIRY_OPTIONS[1].value.toString())
+  const [deleteTarget, setDeleteTarget] = useState<ShareLink | null>(null)
+
+  const fetchShares = async () => {
+    try {
+      setLoading(true)
+      const response = await fetch(`/api/emails/${emailId}/messages/${messageId}/share`)
+      if (!response.ok) throw new Error("Failed to fetch shares")
+      
+      const data = await response.json() as { shares: ShareLink[] }
+      setShares(data.shares || [])
+    } catch (error) {
+      console.error("Failed to fetch shares:", error)
+      toast({
+        title: t("createFailed"),
+        description: String(error),
+        variant: "destructive"
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createShare = async () => {
+    try {
+      setCreating(true)
+      const response = await fetch(`/api/emails/${emailId}/messages/${messageId}/share`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ expiresIn: Number(expiryTime) })
+      })
+
+      if (!response.ok) throw new Error("Failed to create share")
+      
+      const share = await response.json() as ShareLink
+      setShares(prev => [share, ...prev])
+      
+      toast({
+        title: t("createSuccess"),
+      })
+    } catch (error) {
+      console.error("Failed to create share:", error)
+      toast({
+        title: t("createFailed"),
+        description: String(error),
+        variant: "destructive"
+      })
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const deleteShare = async (share: ShareLink) => {
+    try {
+      const response = await fetch(`/api/emails/${emailId}/messages/${messageId}/share/${share.id}`, {
+        method: "DELETE"
+      })
+
+      if (!response.ok) throw new Error("Failed to delete share")
+      
+      setShares(prev => prev.filter(s => s.id !== share.id))
+      
+      toast({
+        title: t("deleteSuccess"),
+      })
+    } catch (error) {
+      console.error("Failed to delete share:", error)
+      toast({
+        title: t("deleteFailed"),
+        description: String(error),
+        variant: "destructive"
+      })
+    } finally {
+      setDeleteTarget(null)
+    }
+  }
+
+  const getShareUrl = (token: string) => {
+    return `${window.location.origin}/shared/message/${token}`
+  }
+
+  const handleCopy = async (token: string) => {
+    const url = getShareUrl(token)
+    const success = await copyToClipboard(url)
+    
+    if (success) {
+      toast({
+        title: t("copied"),
+      })
+    } else {
+      toast({
+        title: t("copyFailed"),
+        variant: "destructive"
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      fetchShares()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          {trigger || (
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <Share2 className="h-4 w-4" />
+            </Button>
+          )}
+        </DialogTrigger>
+        <DialogContent 
+          className="sm:max-w-[600px]"
+          onInteractOutside={(e) => e.preventDefault()}
+          onEscapeKeyDown={(e) => {
+            if (deleteTarget) {
+              e.preventDefault()
+            }
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>{t("title")}</DialogTitle>
+            <DialogDescription>
+              {t("description")}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {/* Message info */}
+            <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+              <p className="text-sm font-medium truncate">{messageSubject}</p>
+            </div>
+
+            {/* Create new share link */}
+            <div className="space-y-2">
+              <Label>{t("expiryTime")}</Label>
+              <div className="flex gap-2">
+                <Select value={expiryTime} onValueChange={setExpiryTime}>
+                  <SelectTrigger className="flex-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {EXPIRY_OPTIONS.map(option => (
+                      <SelectItem key={option.value} value={option.value.toString()}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button onClick={createShare} disabled={creating} className="min-w-[100px]">
+                  {creating ? t("creating") : t("createLink")}
+                </Button>
+              </div>
+            </div>
+
+            {/* Active share links */}
+            <div className="space-y-2">
+              <Label>{t("activeLinks")}</Label>
+              <div className="h-[270px] overflow-y-auto">
+                {loading ? (
+                  <div className="text-sm text-gray-500 text-center py-8 flex flex-col items-center gap-2">
+                    <div className="w-5 h-5 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
+                    <span>{t("loading")}</span>
+                  </div>
+                ) : shares.length === 0 ? (
+                  <div className="text-sm text-gray-500 text-center py-4">
+                    {t("noLinks")}
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {shares.map(share => {
+                    // 将expiresAt转换为时间戳进行比较
+                    const expiresAtTime = share.expiresAt 
+                      ? (typeof share.expiresAt === 'number' 
+                          ? share.expiresAt 
+                          : new Date(share.expiresAt).getTime())
+                      : null
+                    const isExpired = expiresAtTime !== null && expiresAtTime < Date.now()
+                    return (
+                      <div
+                        key={share.id}
+                        className={cn(
+                          "p-3 border rounded-lg space-y-2 transition-all",
+                          isExpired 
+                            ? "border-destructive/30 bg-destructive/5 opacity-75" 
+                            : "border-border"
+                        )}
+                      >
+                        <div className="flex items-center gap-2">
+                          <Link2 className={cn(
+                            "h-4 w-4 flex-shrink-0",
+                            isExpired ? "text-destructive/60" : "text-primary/60"
+                          )} />
+                          <a
+                            href={isExpired ? undefined : getShareUrl(share.token)}
+                            target={isExpired ? undefined : "_blank"}
+                            rel={isExpired ? undefined : "noopener noreferrer"}
+                            onClick={(e) => {
+                              if (isExpired) {
+                                e.preventDefault()
+                              }
+                            }}
+                            className={cn(
+                              "flex-1 text-xs p-1 rounded font-mono transition-colors break-all",
+                              isExpired
+                                ? "bg-destructive/10 text-destructive/70 cursor-not-allowed pointer-events-none"
+                                : "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary cursor-pointer"
+                            )}
+                          >
+                            {getShareUrl(share.token)}
+                          </a>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 flex-shrink-0"
+                            onClick={() => handleCopy(share.token)}
+                          >
+                            <Copy className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 flex-shrink-0"
+                            onClick={() => setDeleteTarget(share)}
+                          >
+                            <Trash2 className="h-4 w-4 text-destructive" />
+                          </Button>
+                        </div>
+                        <div className="flex gap-y-4 gap-x-2 sm:gap-x-4 text-xs">
+                          <span className={cn(
+                            isExpired ? "text-destructive/70" : "text-gray-500"
+                          )}>
+                            {t("createdAt")}: {new Date(
+                              typeof share.createdAt === 'number' 
+                                ? share.createdAt 
+                                : share.createdAt
+                            ).toLocaleString()}
+                          </span>
+                          <span className={cn(
+                            isExpired ? "text-destructive/70" : "text-gray-500"
+                          )}>
+                            {t("expiresAt")}: {
+                              share.expiresAt
+                                ? new Date(
+                                    typeof share.expiresAt === 'number' 
+                                      ? share.expiresAt 
+                                      : share.expiresAt
+                                  ).toLocaleString()
+                                : t("permanent")
+                            }
+                          </span>
+                          {isExpired && (
+                            <span className="text-destructive font-medium flex items-center gap-1">
+                              <span className="w-2 h-2 bg-destructive rounded-full"></span>
+                              {t("expired")}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    )
+                  })}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("deleteConfirm")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("deleteDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive hover:bg-destructive/90"
+              onClick={() => deleteTarget && deleteShare(deleteTarget)}
+            >
+              {t("delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+

app/components/emails/shared-error-page.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { useTranslations } from "next-intl"
+import { AlertCircle } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { BrandHeader } from "@/components/ui/brand-header"
+import { FloatingLanguageSwitcher } from "@/components/layout/floating-language-switcher"
+
+interface SharedErrorPageProps {
+  titleKey: string
+  subtitleKey: string
+  errorKey: string
+  descriptionKey: string
+  ctaTextKey: string
+}
+
+export function SharedErrorPage({
+  titleKey,
+  subtitleKey,
+  errorKey,
+  descriptionKey,
+  ctaTextKey,
+}: SharedErrorPageProps) {
+  const tShared = useTranslations("emails.shared")
+
+  const resolvedTitle = tShared(titleKey)
+  const resolvedSubtitle = tShared(subtitleKey)
+  const resolvedError = tShared(errorKey)
+  const resolvedDescription = tShared(descriptionKey)
+  const resolvedCtaText = tShared(ctaTextKey)
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center items-center">
+      <div className="container mx-auto p-4 max-w-4xl">
+        <BrandHeader
+          title={resolvedTitle}
+          subtitle={resolvedSubtitle}
+          ctaText={resolvedCtaText}
+        />
+        <div className="text-center mt-6">
+          <Card className="max-w-md mx-auto p-8 text-center space-y-4">
+            <AlertCircle className="h-12 w-12 mx-auto text-destructive" />
+            <h2 className="text-2xl font-bold">{resolvedError}</h2>
+            <p className="text-gray-500">
+              {resolvedDescription}
+            </p>
+          </Card>
+        </div>
+      </div>
+
+      <FloatingLanguageSwitcher />
+    </div>
+  )
+}

app/components/emails/shared-message-detail.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { Loader2 } from "lucide-react"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Label } from "@/components/ui/label"
+import { useTheme } from "next-themes"
+
+interface MessageDetail {
+  id: string
+  from_address?: string
+  to_address?: string
+  subject: string
+  content?: string
+  html?: string
+  received_at?: number
+  sent_at?: number
+}
+
+interface SharedMessageDetailProps {
+  message: MessageDetail | null
+  loading?: boolean
+  t: {
+    messageContent: string
+    selectMessage: string
+    loading: string
+    from: string
+    to: string
+    subject: string
+    time: string
+    htmlFormat: string
+    textFormat: string
+  }
+}
+
+type ViewMode = "html" | "text"
+
+export function SharedMessageDetail({
+  message,
+  loading = false,
+  t,
+}: SharedMessageDetailProps) {
+  const [viewMode, setViewMode] = useState<ViewMode>("html")
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const { theme } = useTheme()
+
+  // 如果没有HTML内容，默认显示文本
+  useEffect(() => {
+    if (message) {
+      if (!message.html && message.content) {
+        setViewMode("text")
+      } else if (message.html) {
+        setViewMode("html")
+      }
+    }
+  }, [message])
+
+  const updateIframeContent = () => {
+    if (viewMode === "html" && message?.html && iframeRef.current) {
+      const iframe = iframeRef.current
+      const doc = iframe.contentDocument || iframe.contentWindow?.document
+
+      if (doc) {
+        doc.open()
+        doc.write(`
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <base target="_blank">
+              <style>
+                html, body {
+                  margin: 0;
+                  padding: 0;
+                  min-height: 100%;
+                  font-family: system-ui, -apple-system, sans-serif;
+                  color: ${theme === "dark" ? "#fff" : "#000"};
+                  background: ${theme === "dark" ? "#1a1a1a" : "#fff"};
+                }
+                body {
+                  padding: 20px;
+                }
+                img {
+                  max-width: 100%;
+                  height: auto;
+                }
+                a {
+                  color: #2563eb;
+                }
+                ::-webkit-scrollbar {
+                  width: 6px;
+                  height: 6px;
+                }
+                ::-webkit-scrollbar-track {
+                  background: transparent;
+                }
+                ::-webkit-scrollbar-thumb {
+                  background: ${
+                    theme === "dark"
+                      ? "rgba(130, 109, 217, 0.3)"
+                      : "rgba(130, 109, 217, 0.2)"
+                  };
+                  border-radius: 9999px;
+                  transition: background-color 0.2s;
+                }
+                ::-webkit-scrollbar-thumb:hover {
+                  background: ${
+                    theme === "dark"
+                      ? "rgba(130, 109, 217, 0.5)"
+                      : "rgba(130, 109, 217, 0.4)"
+                  };
+                }
+                * {
+                  scrollbar-width: thin;
+                  scrollbar-color: ${
+                    theme === "dark"
+                      ? "rgba(130, 109, 217, 0.3) transparent"
+                      : "rgba(130, 109, 217, 0.2) transparent"
+                  };
+                }
+              </style>
+            </head>
+            <body>${message.html}</body>
+          </html>
+        `)
+        doc.close()
+
+        const updateHeight = () => {
+          const container = iframe.parentElement
+          if (container) {
+            iframe.style.height = `${container.clientHeight}px`
+          }
+        }
+
+        updateHeight()
+        window.addEventListener("resize", updateHeight)
+
+        const resizeObserver = new ResizeObserver(updateHeight)
+        resizeObserver.observe(doc.body)
+
+        doc.querySelectorAll("img").forEach((img: HTMLImageElement) => {
+          img.onload = updateHeight
+        })
+
+        return () => {
+          window.removeEventListener("resize", updateHeight)
+          resizeObserver.disconnect()
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    updateIframeContent()
+  }, [message?.html, viewMode, theme])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-32">
+        <Loader2 className="w-5 h-5 animate-spin text-primary/60" />
+        <span className="ml-2 text-sm text-gray-500">{t.loading}</span>
+      </div>
+    )
+  }
+
+  if (!message) {
+    return (
+      <div className="flex items-center justify-center h-32 text-gray-500">
+        {t.selectMessage}
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-4 space-y-3 border-b border-primary/20">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="text-base font-bold flex-1">{message.subject}</h3>
+        </div>
+        <div className="text-xs text-gray-500 space-y-1">
+          {message.from_address && (
+            <p>
+              {t.from}: {message.from_address}
+            </p>
+          )}
+          {message.to_address && (
+            <p>
+              {t.to}: {message.to_address}
+            </p>
+          )}
+          <p>
+            {t.time}:{" "}
+            {new Date(
+              message.sent_at || message.received_at || 0
+            ).toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      {message.html && message.content && (
+        <div className="border-b border-primary/20 p-2">
+          <RadioGroup
+            value={viewMode}
+            onValueChange={(value) => setViewMode(value as ViewMode)}
+            className="flex items-center gap-4"
+          >
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="html" id="html" />
+              <Label htmlFor="html" className="text-xs cursor-pointer">
+                {t.htmlFormat}
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="text" id="text" />
+              <Label htmlFor="text" className="text-xs cursor-pointer">
+                {t.textFormat}
+              </Label>
+            </div>
+          </RadioGroup>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-auto relative">
+        {viewMode === "html" && message.html ? (
+          <iframe
+            ref={iframeRef}
+            className="absolute inset-0 w-full h-full border-0 bg-transparent"
+            sandbox="allow-same-origin allow-popups"
+          />
+        ) : message.content ? (
+          <div className="p-4 text-sm whitespace-pre-wrap">
+            {message.content}
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-32 text-gray-500 text-sm">
+            {t.selectMessage}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/components/emails/shared-message-list.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import { Mail, Calendar, RefreshCw } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { useThrottle } from "@/hooks/use-throttle"
+import { Button } from "@/components/ui/button"
+
+interface Message {
+  id: string
+  from_address?: string
+  to_address?: string
+  subject: string
+  received_at?: number
+  sent_at?: number
+}
+
+interface SharedMessageListProps {
+  messages: Message[]
+  selectedMessageId?: string | null
+  onMessageSelect: (messageId: string) => void
+  onLoadMore?: () => void
+  onRefresh?: () => void
+  loading?: boolean
+  loadingMore?: boolean
+  refreshing?: boolean
+  hasMore?: boolean
+  total?: number
+  t: {
+    received: string
+    noMessages: string
+    messageCount: string
+    loading: string
+    loadingMore: string
+  }
+}
+
+export function SharedMessageList({
+  messages,
+  selectedMessageId,
+  onMessageSelect,
+  onLoadMore,
+  onRefresh,
+  loading = false,
+  loadingMore = false,
+  refreshing = false,
+  hasMore = false,
+  total = 0,
+  t,
+}: SharedMessageListProps) {
+  const handleScroll = useThrottle((e: React.UIEvent<HTMLDivElement>) => {
+    if (loadingMore || !hasMore || !onLoadMore) return
+
+    const { scrollHeight, scrollTop, clientHeight } = e.currentTarget
+    const threshold = clientHeight * 1.5
+    const remainingScroll = scrollHeight - scrollTop
+
+    if (remainingScroll <= threshold) {
+      onLoadMore()
+    }
+  }, 200)
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-2 flex justify-between items-center border-b border-primary/20">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onRefresh}
+          disabled={refreshing || loading}
+          className={cn("h-8 w-8", refreshing && "animate-spin")}
+        >
+          <RefreshCw className="h-4 w-4" />
+        </Button>
+        <span className="text-xs text-gray-500">
+          {total > 0 ? `${total} ${t.messageCount}` : t.noMessages}
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-auto" onScroll={handleScroll}>
+        {loading ? (
+          <div className="p-4 text-center text-sm text-gray-500">
+            <RefreshCw className="h-6 w-6 animate-spin mx-auto text-primary mb-2" />
+            {t.loading}
+          </div>
+        ) : messages.length > 0 ? (
+          <div className="divide-y divide-primary/10">
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                onClick={() => onMessageSelect(message.id)}
+                className={cn(
+                  "p-3 hover:bg-primary/5 cursor-pointer",
+                  selectedMessageId === message.id && "bg-primary/10"
+                )}
+              >
+                <div className="flex items-start gap-3">
+                  <Mail className="w-4 h-4 text-primary/60 mt-1" />
+                  <div className="min-w-0 flex-1">
+                    <p className="font-medium text-sm truncate">
+                      {message.subject}
+                    </p>
+                    <div className="mt-1 flex items-center gap-2 text-xs text-gray-500">
+                      <span className="truncate">
+                        {message.from_address || message.to_address || ""}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="w-3 h-3" />
+                        {new Date(
+                          message.received_at || message.sent_at || 0
+                        ).toLocaleString()}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+            {loadingMore && (
+              <div className="text-center text-sm text-gray-500 py-2">
+                {t.loadingMore}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="p-4 text-center text-sm text-gray-500">
+            {t.noMessages}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/components/emails/three-column-layout.tsx

@@ -1,10 +1,15 @@
 "use client"
 
 import { useState } from "react"
+import { useTranslations } from "next-intl"
 import { EmailList } from "./email-list"
-import { MessageList } from "./message-list"
+import { MessageListContainer } from "./message-list-container"
 import { MessageView } from "./message-view"
+import { SendDialog } from "./send-dialog"
 import { cn } from "@/lib/utils"
+import { useCopy } from "@/hooks/use-copy"
+import { useSendPermission } from "@/hooks/use-send-permission"
+import { Copy } from "lucide-react"
 
 interface Email {
   id: string
@@ -12,12 +17,17 @@ interface Email {
 }
 
 export function ThreeColumnLayout() {
+  const t = useTranslations("emails.layout")
   const [selectedEmail, setSelectedEmail] = useState<Email | null>(null)
   const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null)
+  const [selectedMessageType, setSelectedMessageType] = useState<'received' | 'sent'>('received')
+  const [refreshTrigger, setRefreshTrigger] = useState(0)
+  const { copyToClipboard } = useCopy()
+  const { canSend: canSendEmails } = useSendPermission()
 
   const columnClass = "border-2 border-primary/20 bg-background rounded-lg overflow-hidden flex flex-col"
   const headerClass = "p-2 border-b-2 border-primary/20 flex items-center justify-between shrink-0"
-  const titleClass = "text-sm font-bold px-2"
+  const titleClass = "text-sm font-bold px-2 w-full overflow-hidden"
 
   // 移动端视图逻辑
   const getMobileView = () => {
@@ -28,17 +38,33 @@ export function ThreeColumnLayout() {
 
   const mobileView = getMobileView()
 
+  const copyEmailAddress = () => {
+    copyToClipboard(selectedEmail?.address || "")
+  }
+
+  const handleMessageSelect = (messageId: string | null, messageType: 'received' | 'sent' = 'received') => {
+    setSelectedMessageId(messageId)
+    setSelectedMessageType(messageType)
+  }
+
+  const handleSendSuccess = () => {
+    setRefreshTrigger(prev => prev + 1)
+  }
+
   return (
     <div className="pb-5 pt-20 h-full flex flex-col">
       {/* 桌面端三栏布局 */}
       <div className="hidden lg:grid grid-cols-12 gap-4 h-full min-h-0">
         <div className={cn("col-span-3", columnClass)}>
           <div className={headerClass}>
-            <h2 className={titleClass}>我的邮箱</h2>
+            <h2 className={titleClass}>{t("myEmails")}</h2>
           </div>
           <div className="flex-1 overflow-auto">
-            <EmailList 
-              onEmailSelect={setSelectedEmail}
+            <EmailList
+              onEmailSelect={(email) => {
+                setSelectedEmail(email)
+                setSelectedMessageId(null)
+              }}
               selectedEmailId={selectedEmail?.id}
             />
           </div>
@@ -48,18 +74,33 @@ export function ThreeColumnLayout() {
           <div className={headerClass}>
             <h2 className={titleClass}>
               {selectedEmail ? (
-                <span className="truncate block">{selectedEmail.address}</span>
+                <div className="w-full flex justify-between items-center gap-2">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate min-w-0">{selectedEmail.address}</span>
+                    <div className="shrink-0 cursor-pointer text-primary" onClick={copyEmailAddress}>
+                      <Copy className="size-4" />
+                    </div>
+                  </div>
+                  {selectedEmail && canSendEmails && (
+                    <SendDialog 
+                      emailId={selectedEmail.id} 
+                      fromAddress={selectedEmail.address}
+                      onSendSuccess={handleSendSuccess}
+                    />
+                  )}
+                </div>
               ) : (
-                "选择邮箱查看消息"
+                t("selectEmail")
               )}
             </h2>
           </div>
           {selectedEmail && (
             <div className="flex-1 overflow-auto">
-              <MessageList
+              <MessageListContainer
                 email={selectedEmail}
-                onMessageSelect={setSelectedMessageId}
+                onMessageSelect={handleMessageSelect}
                 selectedMessageId={selectedMessageId}
+                refreshTrigger={refreshTrigger}
               />
             </div>
           )}
@@ -68,7 +109,7 @@ export function ThreeColumnLayout() {
         <div className={cn("col-span-5", columnClass)}>
           <div className={headerClass}>
             <h2 className={titleClass}>
-              {selectedMessageId ? "邮件内容" : "选择邮件查看详情"}
+              {selectedMessageId ? t("messageContent") : t("selectMessage")}
             </h2>
           </div>
           {selectedEmail && selectedMessageId && (
@@ -76,6 +117,7 @@ export function ThreeColumnLayout() {
               <MessageView
                 emailId={selectedEmail.id}
                 messageId={selectedMessageId}
+                messageType={selectedMessageType}
                 onClose={() => setSelectedMessageId(null)}
               />
             </div>
@@ -89,10 +131,10 @@ export function ThreeColumnLayout() {
           {mobileView === "list" && (
             <>
               <div className={headerClass}>
-                <h2 className={titleClass}>我的邮箱</h2>
+                <h2 className={titleClass}>{t("myEmails")}</h2>
               </div>
               <div className="flex-1 overflow-auto">
-                <EmailList 
+                <EmailList
                   onEmailSelect={(email) => {
                     setSelectedEmail(email)
                   }}
@@ -101,32 +143,45 @@ export function ThreeColumnLayout() {
               </div>
             </>
           )}
-          
+
           {mobileView === "emails" && selectedEmail && (
             <div className="h-full flex flex-col">
-              <div className={headerClass}>
+              <div className={cn(headerClass, "gap-2")}>
                 <button
                   onClick={() => {
                     setSelectedEmail(null)
                   }}
-                  className="text-sm text-primary"
+                  className="text-sm text-primary shrink-0"
                 >
-                  ← 返回邮箱列表
+                  {t("backToEmailList")}
                 </button>
-                <span className="text-sm font-medium truncate">
-                  {selectedEmail.address}
-                </span>
+                <div className="flex-1 flex justify-between items-center gap-2 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate min-w-0 flex-1 text-right">{selectedEmail.address}</span>
+                    <div className="shrink-0 cursor-pointer text-primary" onClick={copyEmailAddress}>
+                      <Copy className="size-4" />
+                    </div>
+                  </div>
+                  {canSendEmails && (
+                    <SendDialog 
+                      emailId={selectedEmail.id} 
+                      fromAddress={selectedEmail.address}
+                      onSendSuccess={handleSendSuccess}
+                    />
+                  )}
+                </div>
               </div>
               <div className="flex-1 overflow-auto">
-                <MessageList
+                <MessageListContainer
                   email={selectedEmail}
-                  onMessageSelect={setSelectedMessageId}
+                  onMessageSelect={handleMessageSelect}
                   selectedMessageId={selectedMessageId}
+                  refreshTrigger={refreshTrigger}
                 />
               </div>
             </div>
           )}
-          
+
           {mobileView === "message" && selectedEmail && selectedMessageId && (
             <div className="h-full flex flex-col">
               <div className={headerClass}>
@@ -134,14 +189,15 @@ export function ThreeColumnLayout() {
                   onClick={() => setSelectedMessageId(null)}
                   className="text-sm text-primary"
                 >
-                  ← 返回消息列表
+                  {t("backToMessageList")}
                 </button>
-                <span className="text-sm font-medium">邮件内容</span>
+                <span className="text-sm font-medium">{t("messageContent")}</span>
               </div>
               <div className="flex-1 overflow-auto">
                 <MessageView
                   emailId={selectedEmail.id}
                   messageId={selectedMessageId}
+                  messageType={selectedMessageType}
                   onClose={() => setSelectedMessageId(null)}
                 />
               </div>

app/components/float-menu.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useTranslations } from "next-intl"
+import { usePathname } from "next/navigation"
+import { Github } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+export function FloatMenu() {
+  const t = useTranslations("common")
+  const pathname = usePathname()
+  
+  // 在分享页面隐藏GitHub悬浮框
+  if (pathname.includes("/shared/")) {
+    return null
+  }
+  
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="bg-white dark:bg-background rounded-full shadow-lg group relative border-primary/20"
+              onClick={() => window.open("https://github.com/beilunyang/moemail", "_blank")}
+            >
+              <Github 
+                className="w-4 h-4 transition-all duration-300 text-primary group-hover:scale-110"
+              />
+              <span className="sr-only">{t("github")}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <div className="text-sm">
+              <p>{t("github")}</p>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  )
+} 

app/components/home/action-button.tsx

@@ -1,9 +1,10 @@
 "use client"
 
 import { Button } from "@/components/ui/button"
-import { Mail, Github } from "lucide-react"
+import { Mail } from "lucide-react"
 import { useRouter } from "next/navigation"
-import { signIn } from "next-auth/react"
+import { useTranslations, useLocale } from "next-intl"
+import { SignButton } from "../auth/sign-button"
 
 interface ActionButtonProps {
   isLoggedIn?: boolean
@@ -11,28 +12,21 @@ interface ActionButtonProps {
 
 export function ActionButton({ isLoggedIn }: ActionButtonProps) {
   const router = useRouter()
+  const locale = useLocale()
+  const t = useTranslations("home")
 
   if (isLoggedIn) {
     return (
       <Button 
         size="lg" 
-        onClick={() => router.push("/moe")}
+        onClick={() => router.push(`/${locale}/moe`)}
         className="gap-2 bg-primary hover:bg-primary/90 text-white px-8"
       >
         <Mail className="w-5 h-5" />
-        进入邮箱
+        {t("actions.enterMailbox")}
       </Button>
     )
   }
 
-  return (
-    <Button 
-      size="lg" 
-      onClick={() => signIn("github", { callbackUrl: "/moe" })}
-      className="gap-2 bg-primary hover:bg-primary/90 text-white px-8"
-    >
-      <Github className="w-5 h-5" />
-      使用 GitHub 登录
-    </Button>
-  )
+  return <SignButton size="lg" />
 } 

app/components/layout/floating-language-switcher.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { useLocaleSwitcher } from "@/hooks/use-locale-switcher"
+import { LOCALE_LABELS } from "@/i18n/config"
+import { Button } from "@/components/ui/button"
+import { Languages } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function FloatingLanguageSwitcher() {
+  const { locale, locales, switchLocale } = useLocaleSwitcher()
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className="bg-white dark:bg-background rounded-full shadow-lg group relative border-primary/20 hover:border-primary/40 transition-all"
+            aria-label="Switch language"
+          >
+            <Languages className="h-5 w-5 text-primary group-hover:scale-110 transition-transform" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" side="top" className="mb-2">
+          {locales.map((loc) => (
+            <DropdownMenuItem
+              key={loc}
+              onClick={() => switchLocale(loc)}
+              className={locale === loc ? "bg-accent" : ""}
+            >
+              {LOCALE_LABELS[loc]}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

app/components/layout/header.tsx

@@ -1,5 +1,6 @@
 import { SignButton } from "@/components/auth/sign-button"
 import { ThemeToggle } from "@/components/theme/theme-toggle"
+import { LanguageSwitcher } from "@/components/layout/language-switcher"
 import { Logo } from "@/components/ui/logo"
 
 export function Header() {
@@ -8,7 +9,8 @@ export function Header() {
       <div className="container mx-auto h-full px-4">
         <div className="h-full flex items-center justify-between">
           <Logo />
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-y-4 gap-x-3 sm:gap-x-4">
+            <LanguageSwitcher />
             <ThemeToggle />
             <SignButton />
           </div>

app/components/layout/language-switcher.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useLocaleSwitcher } from "@/hooks/use-locale-switcher"
+import { LOCALE_LABELS } from "@/i18n/config"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { Languages } from "lucide-react"
+
+export function LanguageSwitcher() {
+  const { locale, locales, switchLocale } = useLocaleSwitcher()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Switch language">
+          <Languages className="h-5 w-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {locales.map((loc) => (
+          <DropdownMenuItem
+            key={loc}
+            onClick={() => switchLocale(loc)}
+            className={locale === loc ? "bg-accent" : ""}
+          >
+            {LOCALE_LABELS[loc]}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

app/components/no-permission-dialog.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { useTranslations, useLocale } from "next-intl"
+import { useConfig } from "@/hooks/use-config"
+
+export function NoPermissionDialog() {
+  const router = useRouter()
+  const locale = useLocale()
+  const t = useTranslations("emails.noPermission")
+  const { config } = useConfig()
+
+  return (
+    <div className="fixed inset-0 bg-background/50 backdrop-blur-sm z-50">
+      <div className="fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-[90%] max-w-md">
+        <div className="bg-background border-2 border-primary/20 rounded-lg p-6 md:p-12 shadow-lg">
+          <div className="text-center space-y-4">
+            <h1 className="text-xl md:text-2xl font-bold">{t("title")}</h1>
+            <p className="text-sm md:text-base text-muted-foreground">{t("description")}</p>
+            {
+              config?.adminContact && (
+                <p className="text-sm md:text-base text-muted-foreground">{t("adminContact")}：{config.adminContact}</p>
+              )
+            }
+            <Button 
+              onClick={() => router.push(`/${locale}`)}
+              className="mt-4 w-full md:w-auto"
+            >
+              {t("backToHome")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+} 

app/components/profile/api-key-panel.tsx

@@ -0,0 +1,590 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useTranslations } from "next-intl"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Key, Plus, Loader2, Copy, Trash2, ChevronDown, ChevronUp } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  DialogDescription,
+  DialogClose,
+} from "@/components/ui/dialog"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { useCopy } from "@/hooks/use-copy"
+import { useRolePermission } from "@/hooks/use-role-permission"
+import { PERMISSIONS } from "@/lib/permissions"
+import { useConfig } from "@/hooks/use-config"
+
+type ApiKey = {
+  id: string
+  name: string
+  key: string
+  createdAt: string
+  expiresAt: string | null
+  enabled: boolean
+}
+
+export function ApiKeyPanel() {
+  const t = useTranslations("profile.apiKey")
+  const tCommon = useTranslations("common.actions")
+  const tNoPermission = useTranslations("emails.noPermission")
+  const tMessages = useTranslations("emails.messages")
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([])
+  const [loading, setLoading] = useState(false)
+  const [createDialogOpen, setCreateDialogOpen] = useState(false)
+  const [newKeyName, setNewKeyName] = useState("")
+  const [newKey, setNewKey] = useState<string | null>(null)
+  const { toast } = useToast()
+  const { copyToClipboard } = useCopy()
+  const [showExamples, setShowExamples] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const { checkPermission } = useRolePermission()
+  const canManageApiKey = checkPermission(PERMISSIONS.MANAGE_API_KEY)
+
+  const fetchApiKeys = async () => {
+    try {
+      const res = await fetch("/api/api-keys")
+      if (!res.ok) throw new Error(t("createFailed"))
+      const data = await res.json() as { apiKeys: ApiKey[] }
+      setApiKeys(data.apiKeys)
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: t("createFailed"),
+        description: t("createFailed"),
+        variant: "destructive"
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (canManageApiKey) {
+      fetchApiKeys()
+    }
+  }, [canManageApiKey])
+
+  const { config } = useConfig()
+
+  const createApiKey = async () => {
+    if (!newKeyName.trim()) return
+
+    setLoading(true)
+    try {
+      const res = await fetch("/api/api-keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newKeyName })
+      })
+
+      if (!res.ok) throw new Error(t("createFailed"))
+
+      const data = await res.json() as { key: string }
+      setNewKey(data.key)
+      fetchApiKeys()
+    } catch (error) {
+      toast({
+        title: t("createFailed"),
+        description: error instanceof Error ? error.message : t("createFailed"),
+        variant: "destructive"
+      })
+      setCreateDialogOpen(false)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDialogClose = () => {
+    setCreateDialogOpen(false)
+    setNewKeyName("")
+    setNewKey(null)
+  }
+
+  const toggleApiKey = async (id: string, enabled: boolean) => {
+    try {
+      const res = await fetch(`/api/api-keys/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled })
+      })
+
+      if (!res.ok) throw new Error(t("createFailed"))
+
+      setApiKeys(keys =>
+        keys.map(key =>
+          key.id === id ? { ...key, enabled } : key
+        )
+      )
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: t("createFailed"),
+        description: t("createFailed"),
+        variant: "destructive"
+      })
+    }
+  }
+
+  const deleteApiKey = async (id: string) => {
+    try {
+      const res = await fetch(`/api/api-keys/${id}`, {
+        method: "DELETE"
+      })
+
+      if (!res.ok) throw new Error(t("deleteFailed"))
+
+      setApiKeys(keys => keys.filter(key => key.id !== id))
+      toast({
+        title: t("deleteSuccess"),
+        description: t("deleteSuccess")
+      })
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: t("deleteFailed"),
+        description: t("deleteFailed"),
+        variant: "destructive"
+      })
+    }
+  }
+
+  return (
+    <div className="bg-background rounded-lg border-2 border-primary/20 p-6 space-y-6">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-2">
+          <Key className="w-5 h-5 text-primary" />
+          <h2 className="text-lg font-semibold">{t("title")}</h2>
+        </div>
+        {
+          canManageApiKey && (
+            <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+              <DialogTrigger asChild>
+                <Button className="gap-2" onClick={() => setCreateDialogOpen(true)}>
+                  <Plus className="w-4 h-4" />
+                  {t("create")}
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>
+                    {newKey ? t("createSuccess") : t("create")}
+                  </DialogTitle>
+                  {newKey && (
+                    <DialogDescription className="text-destructive">
+                      {t("description")}
+                    </DialogDescription>
+                  )}
+                </DialogHeader>
+
+                {!newKey ? (
+                  <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                      <Label>{t("name")}</Label>
+                      <Input
+                        value={newKeyName}
+                        onChange={(e) => setNewKeyName(e.target.value)}
+                        placeholder={t("namePlaceholder")}
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                      <Label>{t("key")}</Label>
+                      <div className="flex gap-2">
+                        <Input
+                          value={newKey}
+                          readOnly
+                          className="font-mono text-sm"
+                        />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          onClick={() => copyToClipboard(newKey)}
+                        >
+                          <Copy className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button
+                      variant="outline"
+                      onClick={handleDialogClose}
+                      disabled={loading}
+                    >
+                      {newKey ? tCommon("ok") : tCommon("cancel")}
+                    </Button>
+                  </DialogClose>
+                  {!newKey && (
+                    <Button
+                      onClick={createApiKey}
+                      disabled={loading || !newKeyName.trim()}
+                    >
+                      {loading ? (
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                      ) : (
+                        t("create")
+                      )}
+                    </Button>
+                  )}
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          )
+        }
+      </div>
+
+      {
+        !canManageApiKey ? (
+          <div className="text-center text-muted-foreground py-8">
+            <p>{tNoPermission("needPermission")}</p>
+            <p className="mt-2">{tNoPermission("contactAdmin")}</p>
+            {
+              config?.adminContact && (
+                <p className="mt-2">{tNoPermission("adminContact")}: {config.adminContact}</p>
+              )
+            }
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {isLoading ? (
+              <div className="text-center py-8 space-y-3">
+                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
+                  <Loader2 className="w-6 h-6 text-primary animate-spin" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">{tMessages("loading")}</p>
+                </div>
+              </div>
+            ) : apiKeys.length === 0 ? (
+              <div className="text-center py-8 space-y-3">
+                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
+                  <Key className="w-6 h-6 text-primary" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-medium">{t("noKeys")}</h3>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {t("description")}
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <>
+                {apiKeys.map((key) => (
+                  <div
+                    key={key.id}
+                    className="flex items-center justify-between p-4 rounded-lg border bg-card"
+                  >
+                    <div className="space-y-1">
+                      <div className="font-medium">{key.name}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {t("createdAt")}: {new Date(key.createdAt).toLocaleString()}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        checked={key.enabled}
+                        onCheckedChange={(checked) => toggleApiKey(key.id, checked)}
+                      />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => deleteApiKey(key.id)}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+
+                <div className="mt-8 space-y-4">
+                  <button
+                    type="button"
+                    className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    onClick={() => setShowExamples(!showExamples)}
+                  >
+                    {showExamples ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                    {t("viewDocs")}
+                  </button>
+
+                  {showExamples && (
+                    <div className="rounded-lg border bg-card p-4 space-y-4">
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.getConfig")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl ${window.location.protocol}//${window.location.host}/api/config \\
+  -H "X-API-Key: YOUR_API_KEY"`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl ${window.location.protocol}//${window.location.host}/api/config \\
+  -H "X-API-Key: YOUR_API_KEY"`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.generateEmail")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl -X POST ${window.location.protocol}//${window.location.host}/api/emails/generate \\
+  -H "X-API-Key: YOUR_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "name": "test",
+    "expiryTime": 3600000,
+    "domain": "moemail.app"
+  }'`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl -X POST ${window.location.protocol}//${window.location.host}/api/emails/generate \\
+  -H "X-API-Key: YOUR_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "name": "test",
+    "expiryTime": 3600000,
+    "domain": "moemail.app"
+  }'`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.getEmails")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl ${window.location.protocol}//${window.location.host}/api/emails?cursor=CURSOR \\
+  -H "X-API-Key: YOUR_API_KEY"`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl ${window.location.protocol}//${window.location.host}/api/emails?cursor=CURSOR \\
+  -H "X-API-Key: YOUR_API_KEY"`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.getMessages")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl ${window.location.protocol}//${window.location.host}/api/emails/{emailId}?cursor=CURSOR \\
+  -H "X-API-Key: YOUR_API_KEY"`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl ${window.location.protocol}//${window.location.host}/api/emails/{emailId}?cursor=CURSOR \\
+  -H "X-API-Key: YOUR_API_KEY"`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.getMessage")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/{messageId} \\
+  -H "X-API-Key: YOUR_API_KEY"`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/{messageId} \\
+  -H "X-API-Key: YOUR_API_KEY"`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.createEmailShare")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl -X POST ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/share \\
+  -H "X-API-Key: YOUR_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{"expiresIn": 86400000}'`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl -X POST ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/share \\
+  -H "X-API-Key: YOUR_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{"expiresIn": 86400000}'`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.getEmailShares")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/share \\
+  -H "X-API-Key: YOUR_API_KEY"`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/share \\
+  -H "X-API-Key: YOUR_API_KEY"`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.deleteEmailShare")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl -X DELETE ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/share/{shareId} \\
+  -H "X-API-Key: YOUR_API_KEY"`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl -X DELETE ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/share/{shareId} \\
+  -H "X-API-Key: YOUR_API_KEY"`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.createMessageShare")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl -X POST ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/messages/{messageId}/share \\
+  -H "X-API-Key: YOUR_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{"expiresIn": 0}'`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl -X POST ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/messages/{messageId}/share \\
+  -H "X-API-Key: YOUR_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{"expiresIn": 0}'`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.getMessageShares")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/messages/{messageId}/share \\
+  -H "X-API-Key: YOUR_API_KEY"`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/messages/{messageId}/share \\
+  -H "X-API-Key: YOUR_API_KEY"`}
+                        </pre>
+                      </div>
+
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="text-sm font-medium">{t("docs.deleteMessageShare")}</div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => copyToClipboard(
+                              `curl -X DELETE ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/messages/{messageId}/share/{shareId} \\
+  -H "X-API-Key: YOUR_API_KEY"`
+                            )}
+                          >
+                            <Copy className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <pre className="text-xs bg-muted/50 rounded-lg p-4 overflow-x-auto">
+                          {`curl -X DELETE ${window.location.protocol}//${window.location.host}/api/emails/{emailId}/messages/{messageId}/share/{shareId} \\
+  -H "X-API-Key: YOUR_API_KEY"`}
+                        </pre>
+                      </div>
+
+                      <div className="text-xs text-muted-foreground mt-4">
+                        <p>{t("docs.notes")}</p>
+                        <ul className="list-disc list-inside space-y-1 mt-2">
+                          <li>{t("docs.note1")}</li>
+                          <li>{t("docs.note2")}</li>
+                          <li>{t("docs.note3")}</li>
+                          <li>{t("docs.note4")}</li>
+                          <li>{t("docs.note5")}</li>
+                          <li>{t("docs.note6")}</li>
+                          <li>{t("docs.note7")}</li>
+                          <li>{t("docs.note8")}</li>
+                          <li>{t("docs.note9")}</li>
+                          <li>{t("docs.note10")}</li>
+                        </ul>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        )
+      }
+    </div>
+  )
+} 

app/components/profile/email-service-config.tsx

@@ -0,0 +1,265 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { useTranslations } from "next-intl"
+import { Button } from "@/components/ui/button"
+import { Zap, Eye, EyeOff } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
+
+interface EmailServiceConfig {
+  enabled: boolean
+  apiKey: string
+  roleLimits: {
+    duke: number
+    knight: number
+  }
+}
+
+export function EmailServiceConfig() {
+  const t = useTranslations("profile.emailService")
+  const tCard = useTranslations("profile.card")
+  const tSend = useTranslations("emails.send")
+  const [config, setConfig] = useState<EmailServiceConfig>({
+    enabled: false,
+    apiKey: "",
+    roleLimits: {
+      duke: -1,
+      knight: -1,
+    }
+  })
+  const [loading, setLoading] = useState(false)
+  const [showToken, setShowToken] = useState(false)
+  const { toast } = useToast()
+
+  useEffect(() => {
+    fetchConfig()
+  }, [])
+
+  const fetchConfig = async () => {
+    try {
+      const res = await fetch("/api/config/email-service")
+      if (res.ok) {
+        const data = await res.json() as EmailServiceConfig
+        setConfig(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch email service config:", error)
+    }
+  }
+
+  const handleSave = async () => {
+    setLoading(true)
+    try {
+      const saveData = {
+        enabled: config.enabled,
+        apiKey: config.apiKey,
+        roleLimits: config.roleLimits
+      }
+
+      const res = await fetch("/api/config/email-service", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(saveData),
+      })
+
+      if (!res.ok) {
+        const error = await res.json() as { error: string }
+        throw new Error(error.error || t("saveFailed"))
+      }
+
+      toast({
+        title: t("saveSuccess"),
+        description: t("saveSuccess"),
+      })
+    } catch (error) {
+      toast({
+        title: t("saveFailed"),
+        description: error instanceof Error ? error.message : t("saveFailed"),
+        variant: "destructive",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <Zap className="w-5 h-5 text-primary" />
+        <h2 className="text-lg font-semibold">{t("title")}</h2>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="enabled" className="text-sm font-medium">
+              {t("enable")}
+            </Label>
+            <p className="text-xs text-muted-foreground">
+              {t("enableDescription")}
+            </p>
+          </div>
+          <Switch
+            id="enabled"
+            checked={config.enabled}
+            onCheckedChange={(checked: boolean) =>
+              setConfig((prev: EmailServiceConfig) => ({ ...prev, enabled: checked }))
+            }
+          />
+        </div>
+
+        {config.enabled && (
+          <>
+            <div className="space-y-2">
+              <Label htmlFor="apiKey" className="text-sm font-medium">
+                {t("apiKey")}
+              </Label>
+              <div className="relative">
+                <Input
+                  id="apiKey"
+                  type={showToken ? "text" : "password"}
+                  value={config.apiKey}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setConfig((prev: EmailServiceConfig) => ({ ...prev, apiKey: e.target.value }))}
+                  placeholder={t("apiKeyPlaceholder")}
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                  onClick={() => setShowToken(!showToken)}
+                >
+                  {showToken ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">
+                {t("roleLimits")}
+              </Label>
+              <div className="space-y-4">
+                <div className="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg text-sm">
+                  <p className="font-semibold text-blue-900 mb-3 flex items-center gap-2">
+                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                    {t("fixedRoleLimits")}
+                  </p>
+                  <div className="space-y-2 text-blue-800">
+                    <div className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-green-500 rounded-full"></div>
+                      <span><strong>{tCard("roles.EMPEROR")}</strong> - {t("emperorLimit")}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-red-500 rounded-full"></div>
+                      <span><strong>{tCard("roles.CIVILIAN")}</strong> - {t("civilianLimit")}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="space-y-4">
+                  <div className="flex items-center gap-2">
+                    <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
+                    <p className="text-sm font-medium text-gray-900">{t("configRoleLabel")}</p>
+                  </div>
+                  {[
+                    { value: "duke", label: tCard("roles.DUKE"), key: "duke" as const },
+                    { value: "knight", label: tCard("roles.KNIGHT"), key: "knight" as const }
+                  ].map((role) => {
+                    const isDisabled = config.roleLimits[role.key] === -1
+                    const isEnabled = !isDisabled
+                    
+                    return (
+                      <div 
+                        key={role.value} 
+                        className={`group relative p-4 border-2 rounded-xl transition-all duration-200 ${
+                          isEnabled
+                            ? 'border-primary/30 bg-primary/5 shadow-sm' 
+                            : 'border-gray-200 hover:border-primary/20 hover:shadow-sm'
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center space-x-4">
+                            <div className="relative">
+                              <Checkbox
+                                id={`role-${role.value}`}
+                                checked={isEnabled}
+                                onChange={(checked: boolean) => {
+                                  setConfig((prev: EmailServiceConfig) => ({
+                                    ...prev,
+                                    roleLimits: {
+                                      ...prev.roleLimits,
+                                      [role.key]: checked ? 0 : -1
+                                    }
+                                  }))
+                                }}
+                              />
+                            </div>
+                            <div>
+                              <Label 
+                                htmlFor={`role-${role.value}`} 
+                                className="text-base font-semibold cursor-pointer select-none flex items-center gap-2"
+                              >
+                                <span className="text-2xl">
+                                  {role.value === 'duke' ? '🏰' : '⚔️'}
+                                </span>
+                                {role.label}
+                              </Label>
+                              <p className="text-xs text-muted-foreground mt-1">
+                                {isEnabled ? t("enabled") : t("disabled")}
+                              </p>
+                            </div>
+                          </div>
+                          <div className="flex items-center space-x-3">
+                            <div className="text-right">
+                              <Label className="text-xs font-medium text-gray-600 block mb-1">{t("dailyLimit")}</Label>
+                              <div className="flex items-center space-x-2">
+                                <Input
+                                  type="number"
+                                  min="-1"
+                                  value={config.roleLimits[role.key]}
+                                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+                                    setConfig((prev: EmailServiceConfig) => ({
+                                      ...prev,
+                                      roleLimits: {
+                                        ...prev.roleLimits,
+                                        [role.key]: parseInt(e.target.value) || 0
+                                      }
+                                    }))
+                                  }
+                                  className="w-20 h-9 text-center text-sm font-medium"
+                                  placeholder="0"
+                                  disabled={isDisabled}
+                                />
+                                <span className="text-xs text-muted-foreground whitespace-nowrap">{tSend("dailyLimitUnit")}</span>
+                              </div>
+                              <p className="text-xs text-muted-foreground mt-1">0 = {t("unlimited")}</p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+
+        <Button 
+          onClick={handleSave}
+          disabled={loading}
+          className="w-full"
+        >
+          {loading ? t("saving") : t("save")}
+        </Button>
+      </div>
+    </div>
+  )
+} 

app/components/profile/profile-card.tsx

@@ -1,30 +1,84 @@
 "use client"
 
 import { User } from "next-auth"
+import { useTranslations, useLocale } from "next-intl"
 import Image from "next/image"
 import { Button } from "@/components/ui/button"
 import { signOut } from "next-auth/react"
-import { Github, Mail, Settings } from "lucide-react"
+import { Github, Settings, Crown, Sword, User2, Gem, Mail } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { WebhookConfig } from "./webhook-config"
+import { PromotePanel } from "./promote-panel"
+import { EmailServiceConfig } from "./email-service-config"
+import { useRolePermission } from "@/hooks/use-role-permission"
+import { PERMISSIONS } from "@/lib/permissions"
+import { WebsiteConfigPanel } from "./website-config-panel"
+import { ApiKeyPanel } from "./api-key-panel"
 
 interface ProfileCardProps {
   user: User
 }
 
+const roleConfigs = {
+  emperor: { key: 'EMPEROR', icon: Crown },
+  duke: { key: 'DUKE', icon: Gem },
+  knight: { key: 'KNIGHT', icon: Sword },
+  civilian: { key: 'CIVILIAN', icon: User2 },
+} as const
+
+const providerConfigs = {
+  google: {
+    label: "Google",
+    className: "text-red-500 bg-red-500/10",
+    icon: (props: any) => (
+      <svg viewBox="0 0 24 24" {...props}>
+        <path
+          fill="currentColor"
+          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        />
+        <path
+          fill="currentColor"
+          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        />
+        <path
+          fill="currentColor"
+          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        />
+        <path
+          fill="currentColor"
+          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        />
+      </svg>
+    ),
+  },
+  github: {
+    label: "GitHub",
+    className: "text-primary bg-primary/10",
+    icon: Github,
+  },
+} as const
+
 export function ProfileCard({ user }: ProfileCardProps) {
+  const t = useTranslations("profile.card")
+  const tAuth = useTranslations("auth.signButton")
+  const tWebhook = useTranslations("profile.webhook")
+  const tNav = useTranslations("common.nav")
+  const locale = useLocale()
   const router = useRouter()
+  const { checkPermission } = useRolePermission()
+  const canManageWebhook = checkPermission(PERMISSIONS.MANAGE_WEBHOOK)
+  const canPromote = checkPermission(PERMISSIONS.PROMOTE_USER)
+  const canManageConfig = checkPermission(PERMISSIONS.MANAGE_CONFIG)
 
   return (
     <div className="max-w-2xl mx-auto space-y-6">
-      {/* 用户信息卡片 */}
       <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
         <div className="flex items-center gap-6">
           <div className="relative">
             {user.image && (
               <Image
                 src={user.image}
-                alt={user.name || "用户头像"}
+                alt={user.name || tAuth("userAvatar")}
                 width={80}
                 height={80}
                 className="rounded-full ring-2 ring-primary/20"
@@ -34,42 +88,82 @@ export function ProfileCard({ user }: ProfileCardProps) {
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
               <h2 className="text-xl font-bold truncate">{user.name}</h2>
-              <div className="flex items-center gap-1 text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full">
-                <Github className="w-3 h-3" />
-                已关联
-              </div>
+              {!!user?.providers?.length && (
+                <div className="flex gap-2">
+                  {user.providers.map((provider) => {
+                    const config = providerConfigs[provider as keyof typeof providerConfigs]
+                    if (!config) return null
+                    const Icon = config.icon
+                    return (
+                      <div
+                        key={provider}
+                        className={`flex items-center gap-1 text-xs px-2 py-0.5 rounded-full flex-shrink-0 ${config.className}`}
+                      >
+                        <Icon className="w-3 h-3" />
+                        {config.label}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
             </div>
             <p className="text-sm text-muted-foreground truncate mt-1">
-              {user.email}
+              {
+                user.email ? user.email : `${t("name")}: ${user.username}`
+              }
             </p>
+            {user.roles && (
+              <div className="flex gap-2 mt-2">
+                {user.roles.map(({ name }) => {
+                  const roleConfig = roleConfigs[name as keyof typeof roleConfigs]
+                  const Icon = roleConfig.icon
+                  const roleName = t(`roles.${roleConfig.key}` as any)
+                  return (
+                    <div
+                      key={name}
+                      className="flex items-center gap-1 text-xs bg-primary/10 text-primary px-2 py-0.5 rounded"
+                      title={roleName}
+                    >
+                      <Icon className="w-3 h-3" />
+                      {roleName}
+                    </div>
+                  )
+                })}
+              </div>
+            )}
           </div>
         </div>
       </div>
 
-      {/* Webhook 配置卡片 */}
-      <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
-        <div className="flex items-center gap-2 mb-6">
-          <Settings className="w-5 h-5 text-primary" />
-          <h2 className="text-lg font-semibold">Webhook 配置</h2>
+      {canManageWebhook && (
+        <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
+          <div className="flex items-center gap-2 mb-6">
+            <Settings className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold">{tWebhook("title")}</h2>
+          </div>
+          <WebhookConfig />
         </div>
-        <WebhookConfig />
-      </div>
+      )}
+
+      {canManageConfig && <WebsiteConfigPanel />}
+      {canManageConfig && <EmailServiceConfig />}
+      {canPromote && <PromotePanel />}
+      {canManageWebhook && <ApiKeyPanel />}
 
-      {/* 操作按钮 */}
       <div className="flex flex-col sm:flex-row gap-4 px-1">
-        <Button 
-          onClick={() => router.push("/moe")}
+        <Button
+          onClick={() => router.push(`/${locale}/moe`)}
           className="gap-2 flex-1"
         >
           <Mail className="w-4 h-4" />
-          返回邮箱
+          {tNav("backToMailbox")}
         </Button>
-        <Button 
-          variant="outline" 
-          onClick={() => signOut({ callbackUrl: "/" })}
+        <Button
+          variant="outline"
+          onClick={() => signOut({ callbackUrl: `/${locale}` })}
           className="flex-1"
         >
-          退出登录
+          {tAuth("logout")}
         </Button>
       </div>
     </div>

app/components/profile/promote-panel.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import { useTranslations } from "next-intl"
+import { Button } from "@/components/ui/button"
+import { Gem, Sword, User2, Loader2 } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { useState } from "react"
+import { useToast } from "@/components/ui/use-toast"
+import { ROLES, Role } from "@/lib/permissions"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+const roleIcons = {
+  [ROLES.DUKE]: Gem,
+  [ROLES.KNIGHT]: Sword,
+  [ROLES.CIVILIAN]: User2,
+} as const
+
+type RoleWithoutEmperor = Exclude<Role, typeof ROLES.EMPEROR>
+
+export function PromotePanel() {
+  const t = useTranslations("profile.promote")
+  const tCard = useTranslations("profile.card")
+  const [searchText, setSearchText] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [targetRole, setTargetRole] = useState<RoleWithoutEmperor>(ROLES.KNIGHT)
+  const { toast } = useToast()
+  
+  const roleNames = {
+    [ROLES.DUKE]: tCard("roles.DUKE"),
+    [ROLES.KNIGHT]: tCard("roles.KNIGHT"),
+    [ROLES.CIVILIAN]: tCard("roles.CIVILIAN"),
+  } as const
+
+  const handleAction = async () => {
+    if (!searchText) return
+
+    setLoading(true)
+    try {
+      const res = await fetch("/api/roles/users", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ searchText })
+      })
+      const data = await res.json() as {
+        user?: {
+          id: string
+          name?: string
+          username?: string
+          email: string
+          role?: string
+        }
+        error?: string
+      }
+
+      if (!res.ok) throw new Error(data.error || "未知错误")
+
+      if (!data.user) {
+        toast({
+          title: t("noUsers"),
+          description: t("searchPlaceholder"),
+          variant: "destructive"
+        })
+        return
+      }
+
+      if (data.user.role === targetRole) {
+        toast({
+          title: t("updateSuccess"),
+          description: t("updateSuccess"),
+        })
+        return
+      }
+
+      const promoteRes = await fetch("/api/roles/promote", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          userId: data.user.id,
+          roleName: targetRole
+        })
+      })
+
+      if (!promoteRes.ok) {
+        const error = await promoteRes.json() as { error: string }
+        throw new Error(error.error || t("updateFailed"))
+      }
+
+      toast({
+        title: t("updateSuccess"),
+        description: `${data.user.username || data.user.email} - ${roleNames[targetRole]}`,
+      })
+      setSearchText("")
+    } catch (error) {
+      toast({
+        title: t("updateFailed"),
+        description: error instanceof Error ? error.message : t("updateFailed"),
+        variant: "destructive"
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const Icon = roleIcons[targetRole]
+
+  return (
+    <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <Icon className="w-5 h-5 text-primary" />
+        <h2 className="text-lg font-semibold">{t("title")}</h2>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex gap-4">
+          <div className="flex-1">
+            <Input
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              placeholder={t("searchPlaceholder")}
+            />
+          </div>
+          <Select value={targetRole} onValueChange={(value) => setTargetRole(value as RoleWithoutEmperor)}>
+            <SelectTrigger className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ROLES.DUKE}>
+                <div className="flex items-center gap-2">
+                  <Gem className="w-4 h-4" />
+                  {roleNames[ROLES.DUKE]}
+                </div>
+              </SelectItem>
+              <SelectItem value={ROLES.KNIGHT}>
+                <div className="flex items-center gap-2">
+                  <Sword className="w-4 h-4" />
+                  {roleNames[ROLES.KNIGHT]}
+                </div>
+              </SelectItem>
+              <SelectItem value={ROLES.CIVILIAN}>
+                <div className="flex items-center gap-2">
+                  <User2 className="w-4 h-4" />
+                  {roleNames[ROLES.CIVILIAN]}
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <Button
+          onClick={handleAction}
+          disabled={loading || !searchText.trim()}
+          className="w-full"
+        >
+          {loading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            `${t("promote")} ${roleNames[targetRole]}`
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+} 

app/components/profile/webhook-config.tsx

@@ -2,6 +2,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
+import { useTranslations } from "next-intl"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -16,6 +17,10 @@ import {
 } from "@/components/ui/tooltip"
 
 export function WebhookConfig() {
+  const t = useTranslations("profile.webhook")
+  const tCommon = useTranslations("common.actions")
+  const tMessages = useTranslations("emails.messages")
+  const tApiKey = useTranslations("profile.apiKey")
   const [enabled, setEnabled] = useState(false)
   const [url, setUrl] = useState("")
   const [loading, setLoading] = useState(false)
@@ -37,8 +42,13 @@ export function WebhookConfig() {
 
   if (initialLoading) {
     return (
-      <div className="flex justify-center py-8">
-        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+      <div className="text-center">
+        <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
+          <Loader2 className="w-6 h-6 text-primary animate-spin" />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground">{tMessages("loading")}</p>
+        </div>
       </div>
     )
   }
@@ -55,16 +65,16 @@ export function WebhookConfig() {
         body: JSON.stringify({ url, enabled })
       })
 
-      if (!res.ok) throw new Error("Failed to save")
+      if (!res.ok) throw new Error(t("saveFailed"))
 
       toast({
-        title: "保存成功",
-        description: "Webhook 配置已更新"
+        title: t("saveSuccess"),
+        description: t("saveSuccess")
       })
     } catch (_error) {
       toast({
-        title: "保存失败",
-        description: "请稍后重试",
+        title: t("saveFailed"),
+        description: t("saveFailed"),
         variant: "destructive"
       })
     } finally {
@@ -83,16 +93,16 @@ export function WebhookConfig() {
         body: JSON.stringify({ url })
       })
 
-      if (!res.ok) throw new Error("测试失败")
+      if (!res.ok) throw new Error(t("testFailed"))
 
       toast({
-        title: "测试成功",
-        description: "Webhook 调用成功,请检查目标服务器是否收到请求"
+        title: t("testSuccess"),
+        description: t("testSuccess")
       })
     } catch (_error) {
       toast({
-        title: "测试失败",
-        description: "请检查 URL 是否正确且可访问",
+        title: t("testFailed"),
+        description: t("testFailed"),
         variant: "destructive"
       })
     } finally {
@@ -104,9 +114,9 @@ export function WebhookConfig() {
     <form onSubmit={handleSubmit} className="space-y-4">
       <div className="flex items-center justify-between">
         <div className="space-y-0.5">
-          <Label>启用 Webhook</Label>
+          <Label>{t("enable")}</Label>
           <div className="text-sm text-muted-foreground">
-            当收到新邮件时通知指定的 URL
+            {t("description")}
           </div>
         </div>
         <Switch
@@ -118,28 +128,28 @@ export function WebhookConfig() {
       {enabled && (
         <div className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="webhook-url">Webhook URL</Label>
+            <Label htmlFor="webhook-url">{t("url")}</Label>
             <div className="flex gap-2">
               <Input
                 id="webhook-url"
-                placeholder="https://example.com/webhook"
+                placeholder={t("urlPlaceholder")}
                 value={url}
                 onChange={(e) => setUrl(e.target.value)}
                 type="url"
                 required
               />
-              <Button type="submit" disabled={loading} className="w-20">
+              <Button type="submit" disabled={loading} className="flex-shrink-0">
                 {loading ? (
                   <Loader2 className="w-4 h-4 animate-spin" />
                 ) : (
-                  "保存"
+                  tCommon("save")
                 )}
               </Button>
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <Button 
-                      type="button" 
+                    <Button
+                      type="button"
                       variant="outline"
                       onClick={handleTest}
                       disabled={testing || !url}
@@ -152,13 +162,13 @@ export function WebhookConfig() {
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p>发送测试消息到此 Webhook</p>
+                    <p>{t("test")}</p>
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
             </div>
             <p className="text-xs text-muted-foreground">
-              我们会向此 URL 发送 POST 请求,包含新邮件的相关信息
+              {t("description2")}
             </p>
           </div>
 
@@ -169,26 +179,26 @@ export function WebhookConfig() {
               onClick={() => setShowDocs(!showDocs)}
             >
               {showDocs ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
-              查看数据格式说明
+              {t("description3")}
             </button>
 
             {showDocs && (
               <div className="rounded-md bg-muted p-4 text-sm space-y-3">
-                <p>当收到新邮件时，我们会向配置的 URL 发送 POST 请求，请求头包含:</p>
+                <p>{t("docs.intro")}</p>
                 <pre className="bg-background p-2 rounded text-xs">
                   Content-Type: application/json{'\n'}
                   X-Webhook-Event: new_message
                 </pre>
-                
-                <p>请求体示例:</p>
+
+                <p>{t("docs.exampleBody")}</p>
                 <pre className="bg-background p-2 rounded text-xs overflow-auto">
-{`{
+                  {`{
   "emailId": "email-uuid",
   "messageId": "message-uuid",
   "fromAddress": "sender@example.com",
-  "subject": "邮件主题",
-  "content": "邮件文本内容",
-  "html": "邮件HTML内容",
+  "subject": "${t("docs.subject")}",
+  "content": "${t("docs.content")}",
+  "html": "${t("docs.html")}",
   "receivedAt": "2024-01-01T12:00:00.000Z",
   "toAddress": "your-email@${window.location.host}"
 }`}

app/components/profile/website-config-panel.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import { useTranslations } from "next-intl"
+import { Button } from "@/components/ui/button"
+import { Settings } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+import { useState, useEffect } from "react"
+import { Role, ROLES } from "@/lib/permissions"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Eye, EyeOff } from "lucide-react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { EMAIL_CONFIG } from "@/config"
+
+export function WebsiteConfigPanel() {
+  const t = useTranslations("profile.website")
+  const tCard = useTranslations("profile.card")
+  const [defaultRole, setDefaultRole] = useState<string>("")
+  const [emailDomains, setEmailDomains] = useState<string>("")
+  const [adminContact, setAdminContact] = useState<string>("")
+  const [maxEmails, setMaxEmails] = useState<string>(EMAIL_CONFIG.MAX_ACTIVE_EMAILS.toString())
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false)
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState("")
+  const [turnstileSecretKey, setTurnstileSecretKey] = useState("")
+  const [showSecretKey, setShowSecretKey] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const { toast } = useToast()
+
+
+  useEffect(() => {
+    fetchConfig()
+  }, [])
+
+  const fetchConfig = async () => {
+    const res = await fetch("/api/config")
+    if (res.ok) {
+      const data = await res.json() as { 
+        defaultRole: Exclude<Role, typeof ROLES.EMPEROR>,
+        emailDomains: string,
+        adminContact: string,
+        maxEmails: string,
+        turnstile?: {
+          enabled: boolean,
+          siteKey: string,
+          secretKey?: string
+        }
+      }
+      setDefaultRole(data.defaultRole)
+      setEmailDomains(data.emailDomains)
+      setAdminContact(data.adminContact)
+      setMaxEmails(data.maxEmails || EMAIL_CONFIG.MAX_ACTIVE_EMAILS.toString())
+      setTurnstileEnabled(Boolean(data.turnstile?.enabled))
+      setTurnstileSiteKey(data.turnstile?.siteKey ?? "")
+      setTurnstileSecretKey(data.turnstile?.secretKey ?? "")
+    }
+  }
+
+  const handleSave = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch("/api/config", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ 
+          defaultRole, 
+          emailDomains,
+          adminContact,
+          maxEmails: maxEmails || EMAIL_CONFIG.MAX_ACTIVE_EMAILS.toString(),
+          turnstile: {
+            enabled: turnstileEnabled,
+            siteKey: turnstileSiteKey,
+            secretKey: turnstileSecretKey
+          }
+        }),
+      })
+
+      if (!res.ok) throw new Error(t("saveFailed"))
+
+      toast({
+        title: t("saveSuccess"),
+        description: t("saveSuccess"),
+      })
+    } catch (error) {
+      toast({
+        title: t("saveFailed"),
+        description: error instanceof Error ? error.message : t("saveFailed"),
+        variant: "destructive",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-background rounded-lg border-2 border-primary/20 p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <Settings className="w-5 h-5 text-primary" />
+        <h2 className="text-lg font-semibold">{t("title")}</h2>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <span className="text-sm">{t("defaultRole")}:</span>
+          <Select value={defaultRole} onValueChange={setDefaultRole}>
+            <SelectTrigger className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ROLES.DUKE}>{tCard("roles.DUKE")}</SelectItem>
+              <SelectItem value={ROLES.KNIGHT}>{tCard("roles.KNIGHT")}</SelectItem>
+              <SelectItem value={ROLES.CIVILIAN}>{tCard("roles.CIVILIAN")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <span className="text-sm">{t("emailDomains")}:</span>
+          <div className="flex-1">
+            <Input 
+              value={emailDomains}
+              onChange={(e) => setEmailDomains(e.target.value)}
+              placeholder={t("emailDomainsPlaceholder")}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <span className="text-sm">{t("adminContact")}:</span>
+          <div className="flex-1">
+            <Input 
+              value={adminContact}
+              onChange={(e) => setAdminContact(e.target.value)}
+              placeholder={t("adminContactPlaceholder")}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <span className="text-sm">{t("maxEmails")}:</span>
+          <div className="flex-1">
+            <Input 
+              type="number"
+              min="1"
+              max="100"
+              value={maxEmails}
+              onChange={(e) => setMaxEmails(e.target.value)}
+              placeholder={`${EMAIL_CONFIG.MAX_ACTIVE_EMAILS}`}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-4 rounded-lg border border-dashed border-primary/40 p-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <Label htmlFor="turnstile-enabled" className="text-sm font-medium">
+                {t("turnstile.enable")}
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                {t("turnstile.enableDescription")}
+              </p>
+            </div>
+            <Switch
+              id="turnstile-enabled"
+              checked={turnstileEnabled}
+              onCheckedChange={setTurnstileEnabled}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="turnstile-site-key" className="text-sm font-medium">
+              {t("turnstile.siteKey")}
+            </Label>
+            <Input
+              id="turnstile-site-key"
+              value={turnstileSiteKey}
+              onChange={(e) => setTurnstileSiteKey(e.target.value)}
+              placeholder={t("turnstile.siteKeyPlaceholder")}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="turnstile-secret-key" className="text-sm font-medium">
+              {t("turnstile.secretKey")}
+            </Label>
+            <div className="relative">
+              <Input
+                id="turnstile-secret-key"
+                type={showSecretKey ? "text" : "password"}
+                value={turnstileSecretKey}
+                onChange={(e) => setTurnstileSecretKey(e.target.value)}
+                placeholder={t("turnstile.secretKeyPlaceholder")}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowSecretKey((prev) => !prev)}
+              >
+                {showSecretKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t("turnstile.secretKeyDescription")}
+            </p>
+          </div>
+        </div>
+
+        <Button 
+          onClick={handleSave}
+          disabled={loading}
+          className="w-full"
+        >
+          {t("save")}
+        </Button>
+      </div>
+    </div>
+  )
+} 

app/components/ui/alert-dialog.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} 

app/components/ui/brand-header.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import Link from "next/link"
+import { useTranslations } from "next-intl"
+import { Button } from "@/components/ui/button"
+import { ExternalLink, Mail } from "lucide-react"
+
+interface BrandHeaderProps {
+  title?: string
+  subtitle?: string
+  ctaText?: string
+}
+
+export function BrandHeader({
+  title,
+  subtitle,
+  ctaText,
+}: BrandHeaderProps) {
+  const t = useTranslations("emails.shared.brand")
+
+  const displayTitle = title || t("title")
+  const displaySubtitle = subtitle || t("subtitle")
+  const displayCtaText = ctaText || t("cta")
+  return (
+    <div className="text-center space-y-4 lg:pb-4">
+      <div className="flex justify-center pt-2">
+        <Link
+          href="https://moemail.app"
+          className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
+        >
+          <div className="relative w-12 h-12">
+            <div className="absolute inset-0 grid grid-cols-8 grid-rows-8 gap-px">
+              <svg
+                width="48"
+                height="48"
+                viewBox="0 0 32 32"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="text-primary group-hover:scale-105 transition-transform duration-200"
+              >
+                {/* 信封主体 */}
+                <path
+                  d="M4 8h24v16H4V8z"
+                  className="fill-primary/20"
+                />
+
+                {/* 信封边框 */}
+                <path
+                  d="M4 8h24v2H4V8zM4 22h24v2H4v-2z"
+                  className="fill-primary"
+                />
+
+                {/* @ 符号 */}
+                <path
+                  d="M14 12h4v4h-4v-4zM12 14h2v4h-2v-4zM18 14h2v4h-2v-4zM14 18h4v2h-4v-2z"
+                  className="fill-primary"
+                />
+
+                {/* 折线装饰 */}
+                <path
+                  d="M4 8l12 8 12-8"
+                  className="stroke-primary stroke-2"
+                  fill="none"
+                />
+
+                {/* 装饰点 */}
+                <path
+                  d="M8 18h2v2H8v-2zM22 18h2v2h-2v-2z"
+                  className="fill-primary/60"
+                />
+
+                {/* 底部装饰线 */}
+                <path
+                  d="M8 14h2v2H8v-2zM22 14h2v2h-2v-2z"
+                  className="fill-primary/40"
+                />
+              </svg>
+            </div>
+          </div>
+          <span className="text-3xl font-bold tracking-wider bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
+            MoeMail
+          </span>
+        </Link>
+      </div>
+
+      <div className="space-y-3">
+        <h1 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">
+          {displayTitle}
+        </h1>
+        <p className="text-gray-600 dark:text-gray-300 max-w-md mx-auto">
+          {displaySubtitle}
+        </p>
+      </div>
+
+      <div className="flex justify-center">
+        <Button
+          asChild
+          size="lg"
+          className="gap-2 bg-primary hover:bg-primary/90 text-white px-8 min-h-10 h-auto py-1"
+        >
+          <Link href="/" target="_blank" rel="noopener noreferrer">
+            <Mail className="w-5 h-5" />
+            {displayCtaText}
+            <ExternalLink className="w-4 h-4" />
+          </Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

app/components/ui/card.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 

app/components/ui/checkbox.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface CheckboxProps {
+  id?: string
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  className?: string
+  disabled?: boolean
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  checked = false,
+  onChange,
+  className,
+  disabled = false
+}) => {
+  const handleChange = () => {
+    if (!disabled && onChange) {
+      onChange(!checked)
+    }
+  }
+
+  return (
+    <div 
+      className={cn(
+        "relative inline-flex items-center justify-center w-5 h-5 rounded border-2 cursor-pointer transition-all duration-200",
+        checked 
+          ? "bg-primary border-primary text-primary-foreground" 
+          : "bg-background border-input hover:border-primary/50",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+      onClick={handleChange}
+    >
+      <input
+        type="checkbox"
+        id={id}
+        checked={checked}
+        onChange={() => {}} // Controlled by div onClick
+        className="sr-only"
+        disabled={disabled}
+      />
+      {checked && (
+        <Check 
+          className="w-3 h-3 text-current animate-in fade-in-0 scale-in-95 duration-200" 
+        />
+      )}
+    </div>
+  )
+} 

app/components/ui/dialog.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
 import { cn } from "@/lib/utils"
 
 const Dialog = DialogPrimitive.Root
@@ -39,6 +40,10 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">关闭</span>
+      </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
 ))
@@ -58,6 +63,20 @@ const DialogHeader = ({
 )
 DialogHeader.displayName = "DialogHeader"
 
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
@@ -73,11 +92,25 @@ const DialogTitle = React.forwardRef<
 ))
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
 export {
   Dialog,
   DialogTrigger,
   DialogContent,
   DialogHeader,
+  DialogFooter,
   DialogTitle,
   DialogClose,
+  DialogDescription,
 } 

app/components/ui/dropdown-menu.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} 

app/components/ui/select.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectValue = SelectPrimitive.Value
+
+export {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} 

app/components/ui/tabs.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+const SlidingTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, children, ...props }, ref) => {
+  const [activeIndex, setActiveIndex] = React.useState(0)
+  
+  const combinedRef = React.useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      const updateActiveIndex = () => {
+        const triggers = node.querySelectorAll('[data-state="active"]')
+        if (triggers.length > 0) {
+          const allTriggers = node.querySelectorAll('[role="tab"]')
+          const activeElement = triggers[0]
+          const index = Array.from(allTriggers).indexOf(activeElement)
+          if (index >= 0) {
+            setActiveIndex(index)
+          }
+        }
+      }
+
+      setTimeout(updateActiveIndex, 0)
+      
+      const observer = new MutationObserver(updateActiveIndex)
+      observer.observe(node, {
+        attributes: true,
+        attributeFilter: ['data-state'],
+        subtree: true
+      })
+      
+      return () => observer.disconnect()
+    }
+    
+    if (typeof ref === 'function') {
+      ref(node)
+    }
+  }, [ref])
+  
+  const childrenArray = React.Children.toArray(children)
+  const tabCount = childrenArray.length
+  const tabWidth = `calc(${100 / tabCount}% - ${2 * (tabCount - 1) / tabCount}px)`
+  const slidePosition = `calc(${(100 / tabCount) * activeIndex}% + ${activeIndex}px)`
+  
+  return (
+    <TabsPrimitive.List
+      ref={combinedRef}
+      className={cn(
+        "relative flex w-full bg-muted rounded-lg p-1 h-auto",
+        className
+      )}
+      {...props}
+    >
+      <div 
+        className="absolute top-1 bottom-1 bg-primary rounded-md shadow-sm transition-all duration-300 ease-in-out"
+        style={{
+          width: tabWidth,
+          left: slidePosition
+        }}
+      />
+      {children}
+    </TabsPrimitive.List>
+  )
+})
+SlidingTabsList.displayName = "SlidingTabsList"
+
+const SlidingTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "relative z-10 flex-1 h-8 gap-2 flex items-center justify-center text-sm font-medium transition-colors duration-200 rounded-md px-3 py-2 data-[state=active]:text-primary-foreground data-[state=active]:bg-transparent data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+SlidingTabsTrigger.displayName = "SlidingTabsTrigger"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, SlidingTabsList, SlidingTabsTrigger } 

app/components/ui/textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea } 

app/config/email.ts

@@ -0,0 +1,12 @@
+export const EMAIL_CONFIG = {
+  MAX_ACTIVE_EMAILS: 30, // Maximum number of active emails
+  POLL_INTERVAL: 10_000, // Polling interval in milliseconds
+  DEFAULT_DAILY_SEND_LIMITS: {
+    emperor: 0,   // 皇帝无限制
+    duke: 5,      // 公爵每日5封
+    knight: 2,    // 骑士每日2封
+    civilian: -1, // 平民禁止发件
+  },
+} as const
+
+export type EmailConfig = typeof EMAIL_CONFIG 

app/config/index.ts

@@ -1,14 +1,2 @@
-export const EMAIL_CONFIG = {
-  MAX_ACTIVE_EMAILS: 30, // Maximum number of active emails
-  POLL_INTERVAL: 10_000, // Polling interval in milliseconds
-  DOMAIN: 'moemail.app', // Email domain
-} as const
-
-export const WEBHOOK_CONFIG = {
-  MAX_RETRIES: 3, // Maximum retry count
-  TIMEOUT: 10_000, // Timeout time (milliseconds)
-  RETRY_DELAY: 1000, // Retry delay (milliseconds)
-  EVENTS: {
-    NEW_MESSAGE: 'new_message',
-  }
-} as const
+export * from './email'
+export * from './webhook'

app/config/webhook.ts

@@ -0,0 +1,10 @@
+export const WEBHOOK_CONFIG = {
+  MAX_RETRIES: 3, // Maximum retry count
+  TIMEOUT: 10_000, // Timeout time (milliseconds)
+  RETRY_DELAY: 1000, // Retry delay (milliseconds)
+  EVENTS: {
+    NEW_MESSAGE: 'new_message',
+  }
+} as const
+
+export type WebhookConfig = typeof WEBHOOK_CONFIG 

app/hooks/use-config.ts

@@ -0,0 +1,62 @@
+"use client"
+
+import { create } from "zustand"
+import { Role, ROLES } from "@/lib/permissions"
+import { EMAIL_CONFIG } from "@/config"
+import { useEffect } from "react"
+
+interface Config {
+  defaultRole: Exclude<Role, typeof ROLES.EMPEROR>
+  emailDomains: string
+  emailDomainsArray: string[]
+  adminContact: string
+  maxEmails: number
+}
+
+interface ConfigStore {
+  config: Config | null
+  loading: boolean
+  error: string | null
+  fetch: () => Promise<void>
+}
+
+const useConfigStore = create<ConfigStore>((set) => ({
+  config: null,
+  loading: false,
+  error: null,
+  fetch: async () => {
+    try {
+      set({ loading: true, error: null })
+      const res = await fetch("/api/config")
+      if (!res.ok) throw new Error("获取配置失败")
+      const data = await res.json() as Config
+      set({
+        config: {
+          defaultRole: data.defaultRole || ROLES.CIVILIAN,
+          emailDomains: data.emailDomains,
+          emailDomainsArray: data.emailDomains.split(','),
+          adminContact: data.adminContact || "",
+          maxEmails: Number(data.maxEmails) || EMAIL_CONFIG.MAX_ACTIVE_EMAILS
+        },
+        loading: false
+      })
+    } catch (error) {
+      set({ 
+        error: error instanceof Error ? error.message : "获取配置失败",
+        loading: false 
+      })
+    }
+  }
+}))
+
+export function useConfig() {
+  const store = useConfigStore()
+
+  useEffect(() => {
+    if (!store.config && !store.loading) {
+      store.fetch()
+    }
+  }, [store.config, store.loading])
+
+  return store
+} 

app/hooks/use-copy.ts

@@ -0,0 +1,39 @@
+"use client"
+
+import { useCallback } from "react"
+import { useToast } from "@/components/ui/use-toast"
+
+interface UseCopyOptions {
+  successMessage?: string
+  errorMessage?: string
+}
+
+export function useCopy(options: UseCopyOptions = {}) {
+  const { toast } = useToast()
+  const {
+    successMessage = "已复制到剪贴板",
+    errorMessage = "复制失败"
+  } = options
+
+  const copyToClipboard = useCallback(async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      toast({
+        title: "成功",
+        description: successMessage
+      })
+      return true
+    } catch {
+      toast({
+        title: "错误",
+        description: errorMessage,
+        variant: "destructive"
+      })
+      return false
+    }
+  }, [successMessage, errorMessage, toast])
+
+  return {
+    copyToClipboard
+  }
+}

app/hooks/use-locale-switcher.ts

@@ -0,0 +1,38 @@
+"use client"
+
+import { useCallback } from "react"
+import { useLocale } from "next-intl"
+import { usePathname, useRouter } from "next/navigation"
+import { i18n, type Locale } from "@/i18n/config"
+
+export function useLocaleSwitcher() {
+  const locale = useLocale()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const switchLocale = useCallback(
+    (newLocale: Locale) => {
+      if (newLocale === locale) return
+
+      document.cookie = `NEXT_LOCALE=${newLocale}; path=/; max-age=31536000`
+
+      const segments = pathname.split("/")
+      if (i18n.locales.includes(segments[1] as Locale)) {
+        segments[1] = newLocale
+      } else {
+        segments.splice(1, 0, newLocale)
+      }
+
+      router.push(segments.join("/"))
+      router.refresh()
+    },
+    [locale, pathname, router]
+  )
+
+  return {
+    locale,
+    switchLocale,
+    locales: i18n.locales,
+  }
+}
+

app/hooks/use-role-permission.ts

@@ -0,0 +1,25 @@
+"use client"
+
+import { useSession } from "next-auth/react"
+import { Permission, Role, hasPermission } from "@/lib/permissions"
+
+export function useRolePermission() {
+  const { data: session } = useSession()
+  const roles = session?.user?.roles
+
+  const checkPermission = (permission: Permission) => {
+    if (!roles) return false
+    return hasPermission(roles.map(r => r.name) as Role[], permission)
+  }
+
+  const hasRole = (role: Role) => {
+    if (!roles) return false
+    return roles.some(r => r.name === role)
+  }
+
+  return {
+    checkPermission,
+    hasRole,
+    roles,
+  }
+}

app/hooks/use-send-permission.ts

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+
+interface SendPermissionResponse {
+  canSend: boolean
+  error?: string
+  remainingEmails?: number
+}
+
+export function useSendPermission() {
+  const [canSend, setCanSend] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [remainingEmails, setRemainingEmails] = useState<number | undefined>()
+
+  const checkPermission = async () => {
+    setLoading(true)
+    setError(null)
+    
+    try {
+      const response = await fetch('/api/emails/send-permission')
+      
+      if (!response.ok) {
+        throw new Error('权限检查失败')
+      }
+
+      const data = await response.json() as SendPermissionResponse
+      setCanSend(data.canSend)
+      setRemainingEmails(data.remainingEmails)
+      
+      if (!data.canSend && data.error) {
+        setError(data.error)
+      }
+    } catch (err) {
+      setCanSend(false)
+      setError(err instanceof Error ? err.message : '权限检查失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    checkPermission()
+  }, [])
+
+  return {
+    canSend,
+    loading,
+    error,
+    remainingEmails,
+    checkPermission
+  }
+} 

app/hooks/use-user-role.ts

@@ -0,0 +1,21 @@
+"use client"
+
+import { useSession } from "next-auth/react"
+import { Role } from "@/lib/permissions"
+import { useEffect, useState } from "react"
+
+export function useUserRole() {
+  const { data: session } = useSession()
+  const [role, setRole] = useState<Role | null>(null)
+
+  useEffect(() => {
+    if (session?.user?.roles?.[0]?.name) {
+      setRole(session.user.roles[0].name as Role)
+    }
+  }, [session])
+
+  return {
+    role,
+    loading: !session
+  }
+} 

app/i18n/config.ts

@@ -0,0 +1,18 @@
+export const locales = ['en', 'zh-CN', 'zh-TW', 'ja', 'ko'] as const
+export type Locale = typeof locales[number]
+
+export const LOCALE_LABELS: Record<Locale, string> = {
+  en: "English",
+  "zh-CN": "简体中文",
+  "zh-TW": "繁體中文",
+  ja: "日本語",
+  ko: "한국어",
+}
+
+export const defaultLocale: Locale = 'en'
+
+export const i18n = {
+  locales,
+  defaultLocale,
+  localePrefix: 'as-needed',
+}

app/i18n/messages/en/auth.json

@@ -0,0 +1,47 @@
+{
+  "signButton": {
+    "login": "Login / Sign Up",
+    "logout": "Logout",
+    "userAvatar": "User Avatar",
+    "linked": "Linked"
+  },
+  "loginForm": {
+    "title": "Welcome to MoeMail",
+    "subtitle": "Cute Temporary Email Service (。・∀・)ノ",
+    "tabs": {
+      "login": "Login",
+      "register": "Sign Up"
+    },
+    "fields": {
+      "username": "Username",
+      "password": "Password",
+      "confirmPassword": "Confirm Password"
+    },
+    "actions": {
+      "login": "Login",
+      "register": "Sign Up",
+      "or": "OR",
+      "githubLogin": "Login with GitHub",
+      "googleLogin": "Login with Google"
+    },
+    "errors": {
+      "usernameRequired": "Please enter username",
+      "passwordRequired": "Please enter password",
+      "confirmPasswordRequired": "Please confirm password",
+      "usernameInvalid": "Username cannot contain @ symbol",
+      "passwordTooShort": "Password must be at least 8 characters",
+      "passwordMismatch": "Passwords do not match"
+    },
+    "toast": {
+      "loginFailed": "Login Failed",
+      "loginFailedDesc": "Incorrect username or password",
+      "registerFailed": "Registration Failed",
+      "registerFailedDesc": "Please try again later",
+      "autoLoginFailed": "Auto-login failed, please login manually",
+      "turnstileRequired": "Please complete the verification",
+      "turnstileRequiredDesc": "Solve the Turnstile challenge below before continuing",
+      "registerSuccess": "Registration Successful",
+      "registerSuccessDesc": "Switch to the login tab and complete verification to sign in"
+    }
+  }
+}

app/i18n/messages/en/common.json

@@ -0,0 +1,19 @@
+{
+  "app": {
+    "name": "MoeMail"
+  },
+  "actions": {
+    "ok": "OK",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete"
+  },
+  "nav": {
+    "home": "Home",
+    "login": "Login",
+    "profile": "Profile",
+    "logout": "Logout",
+    "backToMailbox": "Back to Mailbox"
+  },
+  "github": "Get Source Code"
+}

app/i18n/messages/en/emails.json

@@ -0,0 +1,169 @@
+{
+  "noPermission": {
+    "title": "Insufficient Permission",
+    "description": "You don't have permission to access this page. Please contact the website administrator.",
+    "adminContact": "Admin Contact",
+    "backToHome": "Back to Home",
+    "needPermission": "需要公爵或更高权限才能管理 API Key",
+    "contactAdmin": "请联系网站管理员升级您的角色"
+  },
+  "layout": {
+    "myEmails": "My Emails",
+    "selectEmail": "Select an email to view messages",
+    "messageContent": "Message Content",
+    "selectMessage": "Select a message to view details",
+    "backToEmailList": "← Back to Email List",
+    "backToMessageList": "← Back to Message List"
+  },
+  "list": {
+    "emailCount": "{count}/{max} emails",
+    "emailCountUnlimited": "{count}/∞ emails",
+    "loading": "Loading...",
+    "loadingMore": "Loading more...",
+    "noEmails": "No emails yet, create one!",
+    "expiresAt": "Expires",
+    "permanent": "Permanent",
+    "deleteConfirm": "Confirm Delete",
+    "deleteDescription": "Are you sure you want to delete {email}? This will also delete all messages in this mailbox and cannot be undone.",
+    "deleteSuccess": "Email deleted successfully",
+    "deleteFailed": "Failed to delete email",
+    "error": "Error",
+    "success": "Success"
+  },
+  "create": {
+    "title": "Create Email",
+    "name": "Email Prefix",
+    "namePlaceholder": "Leave empty for random generation",
+    "domain": "Domain",
+    "domainPlaceholder": "Select a domain",
+    "expiryTime": "Validity Period",
+    "oneHour": "1 Hour",
+    "oneDay": "1 Day",
+    "threeDays": "3 Days",
+    "permanent": "Permanent",
+    "create": "Create",
+    "creating": "Creating...",
+    "success": "Email created successfully",
+    "failed": "Failed to create email"
+  },
+  "messages": {
+    "received": "Received",
+    "sent": "Sent",
+    "noMessages": "No messages yet",
+    "messageCount": "messages",
+    "from": "From",
+    "to": "To",
+    "subject": "Subject",
+    "date": "Date",
+    "loading": "Loading...",
+    "loadingMore": "Loading more..."
+  },
+  "send": {
+    "title": "Send Email",
+    "from": "From",
+    "to": "To",
+    "toPlaceholder": "Recipient email address",
+    "subject": "Subject",
+    "subjectPlaceholder": "Email subject",
+    "content": "Content",
+    "contentPlaceholder": "Email content (supports HTML)",
+    "send": "Send",
+    "sending": "Sending...",
+    "success": "Email sent successfully",
+    "failed": "Failed to send email",
+    "dailyLimitReached": "Daily sending limit reached",
+    "dailyLimit": "Daily Limit: {count}/{max}",
+    "dailyLimitUnit": "emails/day"
+  },
+  "messageView": {
+    "loading": "Loading message details...",
+    "loadError": "Failed to load message details",
+    "networkError": "Network error, please try again later",
+    "retry": "Click to retry",
+    "from": "From",
+    "to": "To",
+    "time": "Time",
+    "htmlFormat": "HTML Format",
+    "textFormat": "Plain Text Format"
+  },
+  "share": {
+    "title": "Share Mailbox",
+    "description": "Create a share link to let others view emails in this mailbox",
+    "createLink": "Create Link",
+    "creating": "Creating...",
+    "loading": "Loading...",
+    "expiryTime": "Link Expiry",
+    "oneHour": "1 Hour",
+    "oneDay": "1 Day",
+    "threeDays": "3 Days",
+    "oneWeek": "1 Week",
+    "permanent": "Permanent",
+    "activeLinks": "Active Share Links",
+    "noLinks": "No share links yet",
+    "createdAt": "Created",
+    "expiresAt": "Expires",
+    "expired": "Expired",
+    "copy": "Copy Link",
+    "copied": "Copied",
+    "copyFailed": "Copy failed",
+    "delete": "Delete",
+    "deleteConfirm": "Confirm delete share link?",
+    "deleteDescription": "This action cannot be undone. The share link will be invalidated immediately.",
+    "cancel": "Cancel",
+    "deleteSuccess": "Deleted successfully",
+    "deleteFailed": "Failed to delete",
+    "createSuccess": "Share link created successfully",
+    "createFailed": "Failed to create share link",
+    "shareButton": "Share"
+  },
+  "shareMessage": {
+    "title": "Share Message",
+    "description": "Create a share link to let others view this message",
+    "createLink": "Create Link",
+    "creating": "Creating...",
+    "loading": "Loading...",
+    "expiryTime": "Link Expiry",
+    "oneHour": "1 Hour",
+    "oneDay": "1 Day",
+    "threeDays": "3 Days",
+    "oneWeek": "1 Week",
+    "permanent": "Permanent",
+    "activeLinks": "Active Share Links",
+    "noLinks": "No share links yet",
+    "createdAt": "Created",
+    "expiresAt": "Expires",
+    "expired": "Expired",
+    "copy": "Copy Link",
+    "copied": "Copied",
+    "copyFailed": "Copy failed",
+    "delete": "Delete",
+    "deleteConfirm": "Confirm delete share link?",
+    "deleteDescription": "This action cannot be undone. The share link will be invalidated immediately.",
+    "cancel": "Cancel",
+    "deleteSuccess": "Deleted successfully",
+    "deleteFailed": "Failed to delete",
+    "createSuccess": "Share link created successfully",
+    "createFailed": "Failed to create share link",
+    "shareButton": "Share Message"
+  },
+  "shared": {
+    "loading": "Loading...",
+    "emailNotFound": "Cannot access mailbox",
+    "messageNotFound": "Cannot access message",
+    "linkExpired": "Share link does not exist or has expired",
+    "linkInvalid": "Invalid Link",
+    "linkInvalidDescription": "This share link may have expired or does not exist",
+    "sharedMailbox": "Shared Mailbox",
+    "sharedMessage": "Shared Message",
+    "expiresAt": "Expires at",
+    "permanent": "Permanent",
+    "createOwnEmail": "Create your own temporary email",
+    "brand": {
+      "title": "MoeMail",
+      "subtitle": "Cute temporary email service",
+      "cta": "Try Now",
+      "officialSite": "Official Site",
+      "copyright": "© 2024 MoeMail. Cute temporary email service"
+    }
+  }
+}

app/i18n/messages/en/home.json

@@ -0,0 +1,27 @@
+{
+  "title": "MoeMail",
+  "subtitle": "Cute Temporary Email Service",
+  "features": {
+    "privacy": {
+      "title": "Privacy Protection",
+      "description": "Protect your real email address"
+    },
+    "instant": {
+      "title": "Email Sharing",
+      "description": "Share your mailbox with others"
+    },
+    "expiry": {
+      "title": "Auto Expiry",
+      "description": "Automatically expires when due"
+    },
+    "openapi": {
+      "title": "Open API",
+      "description": "Full OpenAPI interface available"
+    }
+  },
+  "actions": {
+    "enterMailbox": "Enter Mailbox",
+    "getStarted": "Get Started"
+  }
+}
+

app/i18n/messages/en/metadata.json

@@ -0,0 +1,6 @@
+{
+  "title": "MoeMail - Cute Temporary Email Service · Open API",
+  "description": "Secure, fast, and disposable temporary email addresses. Protect your privacy and stay away from spam. Email sharing, instant delivery with automatic expiration. Full OpenAPI interface for developers and automation testing.",
+  "keywords": "temporary email, disposable email, anonymous email, email sharing, privacy protection, spam filter, instant delivery, auto expiry, secure email, verification email, temporary account, no phone required, developer tools, automation testing, email API, OpenAPI, API interface, RESTful API, API Key, developer friendly, MoeMail"
+}
+

app/i18n/messages/en/profile.json

@@ -0,0 +1,139 @@
+{
+  "title": "Profile",
+  "card": {
+    "title": "User Information",
+    "name": "Name",
+    "role": "Role",
+    "roles": {
+      "EMPEROR": "Emperor",
+      "DUKE": "Duke",
+      "KNIGHT": "Knight",
+      "CIVILIAN": "Civilian"
+    }
+  },
+  "apiKey": {
+    "title": "API Key Management",
+    "description": "Create and manage API keys for accessing OpenAPI",
+    "create": "Create API Key",
+    "name": "Key Name",
+    "namePlaceholder": "Enter key name",
+    "key": "API Key",
+    "createdAt": "Created At",
+    "copy": "Copy",
+    "delete": "Delete",
+    "noKeys": "No API keys yet",
+    "createSuccess": "API key created successfully",
+    "createFailed": "Failed to create API key",
+    "deleteConfirm": "Confirm Delete",
+    "deleteDescription": "Are you sure you want to delete API key {name}? This action cannot be undone.",
+    "deleteSuccess": "API key deleted successfully",
+    "deleteFailed": "Failed to delete API key",
+    "viewDocs": "View Documentation",
+    "docs": {
+      "getConfig": "Get System Config",
+      "generateEmail": "Generate Temp Email",
+      "getEmails": "Get Email List",
+      "getMessages": "Get Message List",
+      "getMessage": "Get Single Message",
+      "createEmailShare": "Create Email Share Link",
+      "getEmailShares": "Get Email Share Links",
+      "deleteEmailShare": "Delete Email Share Link",
+      "createMessageShare": "Create Message Share Link",
+      "getMessageShares": "Get Message Share Links",
+      "deleteMessageShare": "Delete Message Share Link",
+      "notes": "Notes:",
+      "note1": "Replace YOUR_API_KEY with your actual API Key",
+      "note2": "/api/config endpoint provides system configuration including available email domains",
+      "note3": "emailId is the unique identifier for an email",
+      "note4": "messageId is the unique identifier for a message",
+      "note5": "expiryTime is the validity period in milliseconds: 3600000 (1 hour), 86400000 (1 day), 604800000 (7 days), 0 (permanent)",
+      "note6": "domain is the email domain, get available domains from /api/config endpoint",
+      "note7": "cursor is for pagination, get nextCursor from previous response",
+      "note8": "All requests require X-API-Key header",
+      "note9": "expiresIn is the share link validity period in milliseconds, 0 means permanent",
+      "note10": "shareId is the unique identifier for a share record"
+    }
+  },
+  "emailService": {
+    "title": "Resend Email Service Configuration",
+    "configRoleLabel": "Configurable Role Permissions",
+    "enable": "Enable Email Service",
+    "fixedRoleLimits": "Fixed Role Limits",
+    "emperorLimit": "Emperor can send unlimited emails without any restrictions",
+    "civilianLimit": "Cannot send emails",
+    "enableDescription": "When enabled, emails will be sent using Resend",
+    "apiKey": "Resend API Key",
+    "apiKeyPlaceholder": "Enter Resend API Key",
+    "dailyLimit": "Daily Limit",
+    "roleLimits": "Roles allowed to use sending feature",
+    "save": "Save Configuration",
+    "saving": "Saving...",
+    "saveSuccess": "Configuration saved successfully",
+    "saveFailed": "Failed to save configuration",
+    "unlimited": "Unlimited",
+    "disabled": "Sending permission not enabled",
+    "enabled": "Sending permission enabled"
+  },
+  "webhook": {
+    "title": "Webhook Configuration",
+    "description": "Notify specified URL when new emails arrive",
+    "description2": "We will send a POST request to this URL with information about the new email",
+    "description3": "View data format documentation",
+    "enable": "Enable Webhook",
+    "url": "Webhook URL",
+    "urlPlaceholder": "Enter webhook URL",
+    "test": "Test",
+    "testing": "Testing...",
+    "save": "Save Configuration",
+    "saving": "Saving...",
+    "saveSuccess": "Configuration saved successfully",
+    "saveFailed": "Failed to save configuration",
+    "testSuccess": "Webhook test successful",
+    "testFailed": "Webhook test failed",
+    "docs": {
+      "intro": "When a new email is received, we will send a POST request to the configured URL with the following headers:",
+      "exampleBody": "Request body example:",
+      "subject": "Email Subject",
+      "content": "Email text content",
+      "html": "Email HTML content"
+    }
+  },
+  "website": {
+    "title": "Website Configuration",
+    "description": "Configure website settings (Emperor only)",
+    "defaultRole": "Default Role for New Users",
+    "emailDomains": "Email Domains",
+    "emailDomainsPlaceholder": "Separate multiple domains with commas",
+    "adminContact": "Admin Contact",
+    "adminContactPlaceholder": "Email or other contact method",
+    "maxEmails": "Max Emails per User",
+    "turnstile": {
+      "enable": "Enable Cloudflare Turnstile",
+      "enableDescription": "When enabled, username/password login and registration require Turnstile verification",
+      "siteKey": "Site Key",
+      "siteKeyPlaceholder": "Enter Turnstile Site Key",
+      "secretKey": "Secret Key",
+      "secretKeyPlaceholder": "Enter Turnstile Secret Key",
+      "secretKeyDescription": "Set up a Turnstile application in Cloudflare and provide the required keys before enabling"
+    },
+    "save": "Save Configuration",
+    "saving": "Saving...",
+    "saveSuccess": "Configuration saved successfully",
+    "saveFailed": "Failed to save configuration"
+  },
+  "promote": {
+    "title": "Role Management",
+    "description": "Manage user roles (Emperor only)",
+    "search": "Search Users",
+    "searchPlaceholder": "Enter username or email",
+    "username": "Username",
+    "email": "Email",
+    "role": "Role",
+    "actions": "Actions",
+    "promote": "Set as",
+    "noUsers": "No users found",
+    "loading": "Loading...",
+    "updateSuccess": "User role updated successfully",
+    "updateFailed": "Failed to update user role"
+  }
+}

app/i18n/messages/ja/auth.json

@@ -0,0 +1,47 @@
+{
+  "signButton": {
+    "login": "ログイン/登録",
+    "logout": "ログアウト",
+    "userAvatar": "ユーザーアバター",
+    "linked": "連携済み"
+  },
+  "loginForm": {
+    "title": "MoeMailへようこそ",
+    "subtitle": "かわいい使い捨てメールサービス (。・∀・)ノ",
+    "tabs": {
+      "login": "ログイン",
+      "register": "登録"
+    },
+    "fields": {
+      "username": "ユーザー名",
+      "password": "パスワード",
+      "confirmPassword": "パスワードを確認"
+    },
+    "actions": {
+      "login": "ログイン",
+      "register": "登録",
+      "or": "または",
+      "githubLogin": "GitHub アカウントでログイン",
+      "googleLogin": "Google アカウントでログイン"
+    },
+    "errors": {
+      "usernameRequired": "ユーザー名を入力してください",
+      "passwordRequired": "パスワードを入力してください",
+      "confirmPasswordRequired": "パスワードを確認してください",
+      "usernameInvalid": "ユーザー名に @ を含めることはできません",
+      "passwordTooShort": "パスワードは8文字以上である必要があります",
+      "passwordMismatch": "パスワードが一致しません"
+    },
+    "toast": {
+      "loginFailed": "ログインに失敗しました",
+      "loginFailedDesc": "ユーザー名またはパスワードが正しくありません",
+      "registerFailed": "登録に失敗しました",
+      "registerFailedDesc": "しばらくしてからもう一度お試しください",
+      "autoLoginFailed": "自動ログインに失敗しました。手動でログインしてください",
+      "turnstileRequired": "まず認証を完了してください",
+      "turnstileRequiredDesc": "続行する前に下の Turnstile 認証を完了してください",
+      "registerSuccess": "登録が完了しました",
+      "registerSuccessDesc": "ログインタブに切り替え、認証を完了してログインしてください"
+    }
+  }
+}

app/i18n/messages/ja/common.json

@@ -0,0 +1,20 @@
+{
+  "app": {
+    "name": "MoeMail"
+  },
+  "actions": {
+    "ok": "OK",
+    "cancel": "キャンセル",
+    "save": "保存",
+    "delete": "削除"
+  },
+  "nav": {
+    "home": "ホーム",
+    "login": "ログイン",
+    "profile": "プロフィール",
+    "logout": "ログアウト",
+    "backToMailbox": "メールボックスに戻る"
+  },
+  "github": "ソースコードを入手"
+}
+

app/i18n/messages/ja/emails.json

@@ -0,0 +1,169 @@
+{
+  "noPermission": {
+    "title": "権限がありません",
+    "description": "このページにアクセスする権限がありません。サイト管理者に連絡してください",
+    "adminContact": "管理者の連絡先",
+    "backToHome": "ホームに戻る",
+    "needPermission": "需要公爵或更高权限才能管理 API Key",
+    "contactAdmin": "请联系网站管理员升级您的角色"
+  },
+  "layout": {
+    "myEmails": "マイメールボックス",
+    "selectEmail": "メールボックスを選択してメッセージを表示",
+    "messageContent": "メール内容",
+    "selectMessage": "メールを選択して詳細を表示",
+    "backToEmailList": "← メールボックス一覧に戻る",
+    "backToMessageList": "← メッセージ一覧に戻る"
+  },
+  "list": {
+    "emailCount": "{count}/{max} 個のメールボックス",
+    "emailCountUnlimited": "{count}/∞ 個のメールボックス",
+    "loading": "読み込み中...",
+    "loadingMore": "さらに読み込み中...",
+    "noEmails": "まだメールボックスがありません。作成しましょう！",
+    "expiresAt": "有効期限",
+    "permanent": "永久",
+    "deleteConfirm": "削除の確認",
+    "deleteDescription": "メールボックス {email} を削除しますか？この操作によってメールボックス内のすべてのメールが削除され、元に戻せません。",
+    "deleteSuccess": "メールボックスを削除しました",
+    "deleteFailed": "メールボックスの削除に失敗しました",
+    "error": "エラー",
+    "success": "成功"
+  },
+  "create": {
+    "title": "メールボックスを作成",
+    "name": "メールボックスのプレフィックス",
+    "namePlaceholder": "空白の場合はランダムに生成",
+    "domain": "ドメイン",
+    "domainPlaceholder": "ドメインを選択",
+    "expiryTime": "有効期間",
+    "oneHour": "1時間",
+    "oneDay": "1日",
+    "threeDays": "3日",
+    "permanent": "永久",
+    "create": "作成",
+    "creating": "作成中...",
+    "success": "メールボックスを作成しました",
+    "failed": "メールボックスの作成に失敗しました"
+  },
+  "messages": {
+    "received": "受信箱",
+    "sent": "送信済み",
+    "noMessages": "メールはまだありません",
+    "messageCount": "件のメール",
+    "from": "差出人",
+    "to": "宛先",
+    "subject": "件名",
+    "date": "日付",
+    "loading": "読み込み中...",
+    "loadingMore": "さらに読み込み中..."
+  },
+  "send": {
+    "title": "メールを送信",
+    "from": "差出人",
+    "to": "宛先",
+    "toPlaceholder": "宛先メールアドレス",
+    "subject": "件名",
+    "subjectPlaceholder": "メールの件名",
+    "content": "内容",
+    "contentPlaceholder": "メール内容（HTML 対応）",
+    "send": "送信",
+    "sending": "送信中...",
+    "success": "メールを送信しました",
+    "failed": "メールの送信に失敗しました",
+    "dailyLimitReached": "1日の送信上限に達しました",
+    "dailyLimit": "1日の上限: {count}/{max}",
+    "dailyLimitUnit": "通/日"
+  },
+  "messageView": {
+    "loading": "メール詳細を読み込み中...",
+    "loadError": "メール詳細の取得に失敗しました",
+    "networkError": "ネットワークエラーが発生しました。しばらくしてから再試行してください",
+    "retry": "クリックして再試行",
+    "from": "差出人",
+    "to": "宛先",
+    "time": "時間",
+    "htmlFormat": "HTML 表示",
+    "textFormat": "テキスト表示"
+  },
+  "share": {
+    "title": "メールボックスを共有",
+    "description": "共有リンクを作成して、このメールボックス内のメールを他の人に見せましょう",
+    "createLink": "リンクを作成",
+    "creating": "作成中...",
+    "loading": "読み込み中...",
+    "expiryTime": "リンクの有効期間",
+    "oneHour": "1時間",
+    "oneDay": "1日",
+    "threeDays": "3日",
+    "oneWeek": "1週間",
+    "permanent": "永久",
+    "activeLinks": "現在の共有リンク",
+    "noLinks": "共有リンクはまだありません",
+    "createdAt": "作成日時",
+    "expiresAt": "期限",
+    "expired": "期限切れ",
+    "copy": "リンクをコピー",
+    "copied": "コピーしました",
+    "copyFailed": "コピーに失敗しました",
+    "delete": "削除",
+    "deleteConfirm": "共有リンクを削除しますか？",
+    "deleteDescription": "この操作は取り消せません。共有リンクはすぐに無効になります。",
+    "cancel": "キャンセル",
+    "deleteSuccess": "削除しました",
+    "deleteFailed": "削除に失敗しました",
+    "createSuccess": "共有リンクを作成しました",
+    "createFailed": "共有リンクの作成に失敗しました",
+    "shareButton": "共有"
+  },
+  "shareMessage": {
+    "title": "メールを共有",
+    "description": "共有リンクを作成して、このメールを他の人に見せましょう",
+    "createLink": "リンクを作成",
+    "creating": "作成中...",
+    "loading": "読み込み中...",
+    "expiryTime": "リンクの有効期間",
+    "oneHour": "1時間",
+    "oneDay": "1日",
+    "threeDays": "3日",
+    "oneWeek": "1週間",
+    "permanent": "永久",
+    "activeLinks": "現在の共有リンク",
+    "noLinks": "共有リンクはまだありません",
+    "createdAt": "作成日時",
+    "expiresAt": "期限",
+    "expired": "期限切れ",
+    "copy": "リンクをコピー",
+    "copied": "コピーしました",
+    "copyFailed": "コピーに失敗しました",
+    "delete": "削除",
+    "deleteConfirm": "共有リンクを削除しますか？",
+    "deleteDescription": "この操作は取り消せません。共有リンクはすぐに無効になります。",
+    "cancel": "キャンセル",
+    "deleteSuccess": "削除しました",
+    "deleteFailed": "削除に失敗しました",
+    "createSuccess": "共有リンクを作成しました",
+    "createFailed": "共有リンクの作成に失敗しました",
+    "shareButton": "メールを共有"
+  },
+  "shared": {
+    "loading": "読み込み中...",
+    "emailNotFound": "メールボックスにアクセスできません",
+    "messageNotFound": "メールにアクセスできません",
+    "linkExpired": "共有リンクが存在しないか期限切れです",
+    "linkInvalid": "リンクが無効です",
+    "linkInvalidDescription": "この共有リンクは期限切れか存在しない可能性があります",
+    "sharedMailbox": "共有メールボックス",
+    "sharedMessage": "共有メール",
+    "expiresAt": "メールボックスの期限",
+    "permanent": "永久",
+    "createOwnEmail": "自分の使い捨てメールを作成する",
+    "brand": {
+      "title": "MoeMail",
+      "subtitle": "かわいい使い捨てメールサービス",
+      "cta": "今すぐ体験",
+      "officialSite": "公式サイト",
+      "copyright": "© 2024 MoeMail. かわいい使い捨てメールサービス"
+    }
+  }
+}

app/i18n/messages/ja/home.json

@@ -0,0 +1,27 @@
+{
+  "title": "MoeMail",
+  "subtitle": "かわいい使い捨てメールサービス",
+  "features": {
+    "privacy": {
+      "title": "プライバシー保護",
+      "description": "本物のメールアドレスを保護します"
+    },
+    "instant": {
+      "title": "メールボックス共有",
+      "description": "メールボックスを他の人と共有できます"
+    },
+    "expiry": {
+      "title": "自動期限切れ",
+      "description": "有効期限が切れると自動的に無効になります"
+    },
+    "openapi": {
+      "title": "オープンAPI",
+      "description": "完全な OpenAPI インターフェースを提供"
+    }
+  },
+  "actions": {
+    "enterMailbox": "メールボックスに入る",
+    "getStarted": "今すぐ始める"
+  }
+}
+

app/i18n/messages/ja/metadata.json

@@ -0,0 +1,6 @@
+{
+  "title": "MoeMail - かわいい使い捨てメールサービス · オープンAPI",
+  "description": "安全で高速な使い捨てメールアドレスでプライバシーを守り、スパムを遠ざけます。メールボックス共有、即時受信、期限到来での自動失効に対応。完全な OpenAPI を提供し、開発者の統合や自動テストに最適です。",
+  "keywords": "使い捨てメール, 一時メール, 匿名メール, メール共有, プライバシー保護, スパム対策, 即時受信, 自動失効, 安全なメール, 登録確認, テスト用メール, 電話番号不要, 開発テスト, 自動テスト, メールAPI, OpenAPI, APIインターフェース, RESTful API, APIキー, 開発者ツール, MoeMail"
+}
+

app/i18n/messages/ja/profile.json

@@ -0,0 +1,139 @@
+{
+  "title": "プロフィール",
+  "card": {
+    "title": "ユーザー情報",
+    "name": "ユーザー名",
+    "role": "ロール",
+    "roles": {
+      "EMPEROR": "皇帝",
+      "DUKE": "公爵",
+      "KNIGHT": "騎士",
+      "CIVILIAN": "市民"
+    }
+  },
+  "apiKey": {
+    "title": "API Key 管理",
+    "description": "OpenAPI にアクセスするための API キーを作成・管理します",
+    "create": "API Key を作成",
+    "name": "キー名",
+    "namePlaceholder": "キー名を入力",
+    "key": "API Key",
+    "createdAt": "作成日時",
+    "copy": "コピー",
+    "delete": "削除",
+    "noKeys": "API Key はまだありません",
+    "createSuccess": "API Key を作成しました",
+    "createFailed": "API Key の作成に失敗しました",
+    "deleteConfirm": "削除の確認",
+    "deleteDescription": "API Key {name} を削除しますか？この操作は元に戻せません。",
+    "deleteSuccess": "API Key を削除しました",
+    "deleteFailed": "API Key の削除に失敗しました",
+    "viewDocs": "ドキュメントを見る",
+    "docs": {
+      "getConfig": "システム設定を取得",
+      "generateEmail": "使い捨てメールを生成",
+      "getEmails": "メールボックス一覧を取得",
+      "getMessages": "メール一覧を取得",
+      "getMessage": "メールを1件取得",
+      "createEmailShare": "メールボックス共有リンクを作成",
+      "getEmailShares": "メールボックス共有リンク一覧を取得",
+      "deleteEmailShare": "メールボックス共有リンクを削除",
+      "createMessageShare": "メール共有リンクを作成",
+      "getMessageShares": "メール共有リンク一覧を取得",
+      "deleteMessageShare": "メール共有リンクを削除",
+      "notes": "注意:",
+      "note1": "YOUR_API_KEY を実際の API Key に置き換えてください",
+      "note2": "/api/config エンドポイントで利用可能なメールボックスドメインなどのシステム設定を取得できます",
+      "note3": "emailId はメールボックスの一意な識別子です",
+      "note4": "messageId はメールの一意な識別子です",
+      "note5": "expiryTime はメールボックスの有効期間（ミリ秒）です。利用可能な値: 3600000（1時間）、86400000（1日）、604800000（7日）、0（永久）",
+      "note6": "domain はメールボックスのドメインで、/api/config エンドポイントで利用可能な一覧を取得できます",
+      "note7": "cursor はページネーション用で、前回のレスポンスから nextCursor を取得してください",
+      "note8": "すべてのリクエストには X-API-Key ヘッダーが必要です",
+      "note9": "expiresIn は共有リンクの有効期間（ミリ秒）で、0 は永久を意味します",
+      "note10": "shareId は共有記録の一意な識別子です"
+    }
+  },
+  "emailService": {
+    "title": "Resend 送信サービス設定",
+    "configRoleLabel": "設定可能なロール権限",
+    "enable": "メール送信を有効にする",
+    "fixedRoleLimits": "固定権限ルール",
+    "emperorLimit": "皇帝は制限なく無制限に送信できます",
+    "civilianLimit": "市民は送信できません",
+    "enableDescription": "有効にすると Resend を利用してメールを送信します",
+    "apiKey": "Resend API Key",
+    "apiKeyPlaceholder": "Resend API Key を入力",
+    "dailyLimit": "1日の上限",
+    "roleLimits": "送信機能を許可するロール",
+    "save": "設定を保存",
+    "saving": "保存中...",
+    "saveSuccess": "設定を保存しました",
+    "saveFailed": "設定の保存に失敗しました",
+    "unlimited": "無制限",
+    "disabled": "送信権限は無効です",
+    "enabled": "送信権限が有効です"
+  },
+  "webhook": {
+    "title": "Webhook 設定",
+    "description": "新しいメールを受信した際に指定した URL に通知します",
+    "description2": "この URL に新しいメール情報を含む POST リクエストを送信します",
+    "description3": "データ形式を見る",
+    "enable": "Webhook を有効化",
+    "url": "Webhook URL",
+    "urlPlaceholder": "Webhook URL を入力",
+    "test": "テスト",
+    "testing": "テスト中...",
+    "save": "設定を保存",
+    "saving": "保存中...",
+    "saveSuccess": "設定を保存しました",
+    "saveFailed": "設定の保存に失敗しました",
+    "testSuccess": "Webhook テストに成功しました",
+    "testFailed": "Webhook テストに失敗しました",
+    "docs": {
+      "intro": "新しいメールを受信すると、設定した URL に POST リクエストを送信します。リクエストヘッダーには以下が含まれます:",
+      "exampleBody": "リクエストボディ例:",
+      "subject": "メール件名",
+      "content": "メールテキスト内容",
+      "html": "メール HTML 内容"
+    }
+  },
+  "website": {
+    "title": "サイト設定",
+    "description": "サイトの設定を管理（皇帝のみ利用可能）",
+    "defaultRole": "新規ユーザーのデフォルトロール",
+    "emailDomains": "メールボックスドメイン",
+    "emailDomainsPlaceholder": "複数のドメインはカンマで区切ります",
+    "adminContact": "管理者連絡先",
+    "adminContactPlaceholder": "メールまたはその他の連絡先",
+    "maxEmails": "ユーザーあたりの最大メールボックス数",
+    "turnstile": {
+      "enable": "Cloudflare Turnstile を有効化",
+      "enableDescription": "有効にすると、ユーザー名とパスワードでのログイン・登録に Turnstile 認証が必要になります",
+      "siteKey": "Site Key",
+      "siteKeyPlaceholder": "Turnstile Site Key を入力",
+      "secretKey": "Secret Key",
+      "secretKeyPlaceholder": "Turnstile Secret Key を入力",
+      "secretKeyDescription": "Cloudflare で Turnstile を作成し、必須のキーを入力してから有効化してください"
+    },
+    "save": "設定を保存",
+    "saving": "保存中...",
+    "saveSuccess": "設定を保存しました",
+    "saveFailed": "設定の保存に失敗しました"
+  },
+  "promote": {
+    "title": "ロール管理",
+    "description": "ユーザーロールを管理（皇帝のみ利用可能）",
+    "search": "ユーザーを検索",
+    "searchPlaceholder": "ユーザー名またはメールを入力",
+    "username": "ユーザー名",
+    "email": "メール",
+    "role": "ロール",
+    "actions": "操作",
+    "promote": "設定",
+    "noUsers": "ユーザーが見つかりません",
+    "loading": "読み込み中...",
+    "updateSuccess": "ユーザーロールを更新しました",
+    "updateFailed": "ユーザーロールの更新に失敗しました"
+  }
+}

app/i18n/messages/ko/auth.json

@@ -0,0 +1,47 @@
+{
+  "signButton": {
+    "login": "로그인 / 회원가입",
+    "logout": "로그아웃",
+    "userAvatar": "사용자 아바타",
+    "linked": "연결됨"
+  },
+  "loginForm": {
+    "title": "MoeMail에 오신 것을 환영합니다",
+    "subtitle": "귀여운 임시 이메일 서비스 (。・∀・)ノ",
+    "tabs": {
+      "login": "로그인",
+      "register": "회원가입"
+    },
+    "fields": {
+      "username": "사용자 이름",
+      "password": "비밀번호",
+      "confirmPassword": "비밀번호 확인"
+    },
+    "actions": {
+      "login": "로그인",
+      "register": "회원가입",
+      "or": "또는",
+      "githubLogin": "GitHub로 로그인",
+      "googleLogin": "Google로 로그인"
+    },
+    "errors": {
+      "usernameRequired": "사용자 이름을 입력해주세요",
+      "passwordRequired": "비밀번호를 입력해주세요",
+      "confirmPasswordRequired": "비밀번호를 확인해주세요",
+      "usernameInvalid": "사용자 이름에 @ 기호를 포함할 수 없습니다",
+      "passwordTooShort": "비밀번호는 최소 8자 이상이어야 합니다",
+      "passwordMismatch": "비밀번호가 일치하지 않습니다"
+    },
+    "toast": {
+      "loginFailed": "로그인 실패",
+      "loginFailedDesc": "사용자 이름 또는 비밀번호가 올바르지 않습니다",
+      "registerFailed": "회원가입 실패",
+      "registerFailedDesc": "나중에 다시 시도해주세요",
+      "autoLoginFailed": "자동 로그인 실패, 수동으로 로그인해주세요",
+      "turnstileRequired": "인증을 완료해주세요",
+      "turnstileRequiredDesc": "계속하기 전에 아래의 Turnstile 인증을 완료해주세요",
+      "registerSuccess": "회원가입 성공",
+      "registerSuccessDesc": "로그인 탭으로 이동하여 인증을 완료하고 로그인해주세요"
+    }
+  }
+}

app/i18n/messages/ko/common.json

@@ -0,0 +1,19 @@
+{
+  "app": {
+    "name": "MoeMail"
+  },
+  "actions": {
+    "ok": "확인",
+    "cancel": "취소",
+    "save": "저장",
+    "delete": "삭제"
+  },
+  "nav": {
+    "home": "홈",
+    "login": "로그인",
+    "profile": "프로필",
+    "logout": "로그아웃",
+    "backToMailbox": "메일함으로 돌아가기"
+  },
+  "github": "소스 코드 받기"
+}

app/i18n/messages/ko/emails.json

@@ -0,0 +1,169 @@
+{
+  "noPermission": {
+    "title": "권한 부족",
+    "description": "이 페이지에 접근할 권한이 없습니다. 웹사이트 관리자에게 문의하세요.",
+    "adminContact": "관리자 연락처",
+    "backToHome": "홈으로 돌아가기",
+    "needPermission": "API Key를 관리하려면 공작 이상의 권한이 필요합니다",
+    "contactAdmin": "역할 업그레이드를 위해 웹사이트 관리자에게 문의하세요"
+  },
+  "layout": {
+    "myEmails": "내 이메일",
+    "selectEmail": "메시지를 보려면 이메일을 선택하세요",
+    "messageContent": "메시지 내용",
+    "selectMessage": "세부 정보를 보려면 메시지를 선택하세요",
+    "backToEmailList": "← 이메일 목록으로 돌아가기",
+    "backToMessageList": "← 메시지 목록으로 돌아가기"
+  },
+  "list": {
+    "emailCount": "{count}/{max} 이메일",
+    "emailCountUnlimited": "{count}/∞ 이메일",
+    "loading": "로딩 중...",
+    "loadingMore": "더 불러오는 중...",
+    "noEmails": "아직 이메일이 없습니다. 하나 만들어보세요!",
+    "expiresAt": "만료",
+    "permanent": "영구",
+    "deleteConfirm": "삭제 확인",
+    "deleteDescription": "{email}을(를) 삭제하시겠습니까? 이 메일함의 모든 메시지도 함께 삭제되며 되돌릴 수 없습니다.",
+    "deleteSuccess": "이메일이 성공적으로 삭제되었습니다",
+    "deleteFailed": "이메일 삭제에 실패했습니다",
+    "error": "오류",
+    "success": "성공"
+  },
+  "create": {
+    "title": "이메일 생성",
+    "name": "이메일 접두사",
+    "namePlaceholder": "비워두면 무작위로 생성됩니다",
+    "domain": "도메인",
+    "domainPlaceholder": "도메인 선택",
+    "expiryTime": "유효 기간",
+    "oneHour": "1시간",
+    "oneDay": "1일",
+    "threeDays": "3일",
+    "permanent": "영구",
+    "create": "생성",
+    "creating": "생성 중...",
+    "success": "이메일이 성공적으로 생성되었습니다",
+    "failed": "이메일 생성에 실패했습니다"
+  },
+  "messages": {
+    "received": "받은 편지함",
+    "sent": "보낸 편지함",
+    "noMessages": "아직 메시지가 없습니다",
+    "messageCount": "메시지",
+    "from": "보낸 사람",
+    "to": "받는 사람",
+    "subject": "제목",
+    "date": "날짜",
+    "loading": "로딩 중...",
+    "loadingMore": "더 불러오는 중..."
+  },
+  "send": {
+    "title": "이메일 보내기",
+    "from": "보낸 사람",
+    "to": "받는 사람",
+    "toPlaceholder": "받는 사람 이메일 주소",
+    "subject": "제목",
+    "subjectPlaceholder": "이메일 제목",
+    "content": "내용",
+    "contentPlaceholder": "이메일 내용 (HTML 지원)",
+    "send": "보내기",
+    "sending": "보내는 중...",
+    "success": "이메일이 성공적으로 전송되었습니다",
+    "failed": "이메일 전송에 실패했습니다",
+    "dailyLimitReached": "일일 전송 제한에 도달했습니다",
+    "dailyLimit": "일일 제한: {count}/{max}",
+    "dailyLimitUnit": "이메일/일"
+  },
+  "messageView": {
+    "loading": "메시지 세부 정보 로딩 중...",
+    "loadError": "메시지 세부 정보 로드 실패",
+    "networkError": "네트워크 오류, 나중에 다시 시도해주세요",
+    "retry": "다시 시도하려면 클릭하세요",
+    "from": "보낸 사람",
+    "to": "받는 사람",
+    "time": "시간",
+    "htmlFormat": "HTML 형식",
+    "textFormat": "일반 텍스트 형식"
+  },
+  "share": {
+    "title": "메일함 공유",
+    "description": "다른 사람이 이 메일함의 이메일을 볼 수 있도록 공유 링크 생성",
+    "createLink": "링크 생성",
+    "creating": "생성 중...",
+    "loading": "로딩 중...",
+    "expiryTime": "링크 만료",
+    "oneHour": "1시간",
+    "oneDay": "1일",
+    "threeDays": "3일",
+    "oneWeek": "1주",
+    "permanent": "영구",
+    "activeLinks": "활성 공유 링크",
+    "noLinks": "아직 공유 링크가 없습니다",
+    "createdAt": "생성됨",
+    "expiresAt": "만료",
+    "expired": "만료됨",
+    "copy": "링크 복사",
+    "copied": "복사됨",
+    "copyFailed": "복사 실패",
+    "delete": "삭제",
+    "deleteConfirm": "공유 링크를 삭제하시겠습니까?",
+    "deleteDescription": "이 작업은 되돌릴 수 없습니다. 공유 링크가 즉시 무효화됩니다.",
+    "cancel": "취소",
+    "deleteSuccess": "성공적으로 삭제되었습니다",
+    "deleteFailed": "삭제에 실패했습니다",
+    "createSuccess": "공유 링크가 성공적으로 생성되었습니다",
+    "createFailed": "공유 링크 생성에 실패했습니다",
+    "shareButton": "공유"
+  },
+  "shareMessage": {
+    "title": "메시지 공유",
+    "description": "다른 사람이 이 메시지를 볼 수 있도록 공유 링크 생성",
+    "createLink": "링크 생성",
+    "creating": "생성 중...",
+    "loading": "로딩 중...",
+    "expiryTime": "링크 만료",
+    "oneHour": "1시간",
+    "oneDay": "1일",
+    "threeDays": "3일",
+    "oneWeek": "1주",
+    "permanent": "영구",
+    "activeLinks": "활성 공유 링크",
+    "noLinks": "아직 공유 링크가 없습니다",
+    "createdAt": "생성됨",
+    "expiresAt": "만료",
+    "expired": "만료됨",
+    "copy": "링크 복사",
+    "copied": "복사됨",
+    "copyFailed": "복사 실패",
+    "delete": "삭제",
+    "deleteConfirm": "공유 링크를 삭제하시겠습니까?",
+    "deleteDescription": "이 작업은 되돌릴 수 없습니다. 공유 링크가 즉시 무효화됩니다.",
+    "cancel": "취소",
+    "deleteSuccess": "성공적으로 삭제되었습니다",
+    "deleteFailed": "삭제에 실패했습니다",
+    "createSuccess": "공유 링크가 성공적으로 생성되었습니다",
+    "createFailed": "공유 링크 생성에 실패했습니다",
+    "shareButton": "메시지 공유"
+  },
+  "shared": {
+    "loading": "로딩 중...",
+    "emailNotFound": "메일함에 접근할 수 없습니다",
+    "messageNotFound": "메시지에 접근할 수 없습니다",
+    "linkExpired": "공유 링크가 존재하지 않거나 만료되었습니다",
+    "linkInvalid": "유효하지 않은 링크",
+    "linkInvalidDescription": "이 공유 링크가 만료되었거나 존재하지 않을 수 있습니다",
+    "sharedMailbox": "공유된 메일함",
+    "sharedMessage": "공유된 메시지",
+    "expiresAt": "만료 시간",
+    "permanent": "영구",
+    "createOwnEmail": "나만의 임시 이메일 만들기",
+    "brand": {
+      "title": "MoeMail",
+      "subtitle": "귀여운 임시 이메일 서비스",
+      "cta": "지금 사용해보기",
+      "officialSite": "공식 사이트",
+      "copyright": "© 2024 MoeMail. 귀여운 임시 이메일 서비스"
+    }
+  }
+}

app/i18n/messages/ko/home.json

@@ -0,0 +1,26 @@
+{
+  "title": "MoeMail",
+  "subtitle": "귀여운 임시 이메일 서비스",
+  "features": {
+    "privacy": {
+      "title": "개인정보 보호",
+      "description": "실제 이메일 주소 보호"
+    },
+    "instant": {
+      "title": "이메일 공유",
+      "description": "다른 사람과 메일함 공유"
+    },
+    "expiry": {
+      "title": "자동 만료",
+      "description": "기한이 되면 자동으로 만료"
+    },
+    "openapi": {
+      "title": "Open API",
+      "description": "전체 OpenAPI 인터페이스 제공"
+    }
+  },
+  "actions": {
+    "enterMailbox": "메일함 입장",
+    "getStarted": "시작하기"
+  }
+}

app/i18n/messages/ko/metadata.json

@@ -0,0 +1,5 @@
+{
+  "title": "MoeMail - 귀여운 임시 이메일 서비스 · Open API",
+  "description": "안전하고 빠르며 일회용 임시 이메일 주소. 개인정보를 보호하고 스팸으로부터 자유로워지세요. 이메일 공유, 자동 만료 기능을 갖춘 즉시 배송. 개발자와 자동화 테스트를 위한 완전한 OpenAPI 인터페이스.",
+  "keywords": "임시 이메일, 일회용 이메일, 익명 이메일, 이메일 공유, 개인정보 보호, 스팸 필터, 즉시 배송, 자동 만료, 안전한 이메일, 인증 이메일, 임시 계정, 전화번호 불필요, 개발자 도구, 자동화 테스트, 이메일 API, OpenAPI, API 인터페이스, RESTful API, API Key, 개발자 친화적, MoeMail"
+}