Initial commit

2026-02-06 14:06:49 +08:00
commit 5fc7b33b3b
28 changed files with 5004 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,46 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Production builds
+dist/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Test coverage
+coverage
+*.lcov
+
+# OS files
+Thumbs.db
+
+# Temporary files
+tmp/
+temp/
+*.tmp
+*.temp
--- a/README.md
+++ b/README.md
@@ -0,0 +1,107 @@
+# 授权管理系统 - 前端应用
+
+浙江贝凡企业授权管理系统的前端应用，基于 React + TypeScript + Ant Design。
+
+## 技术栈
+
+- **React 19**: UI 框
+- **TypeScript**: 类型系统
+- **Ant Design 6**: UI 组件库
+- **Vite 7**: 构建工具
+- **React Router v7**: 路由管理
+- **Axios**: HTTP 客户端
+- **QRCode**: 二维码生成
+
+## 项目结构
+
+```
+frontend/
+├── src/
+│   ├── components/    # 通用组件
+│   │   └── AdminLayout.tsx
+│   ├── pages/         # 页面组件
+│   │   ├── Login.tsx
+│   │   ├── PublicQuery.tsx
+│   │   ├── Dashboard.tsx
+│   │   ├── Generate.tsx
+│   │   ├── Manage.tsx
+│   │   ├── AdminQuery.tsx
+│   │   └── Profile.tsx
+│   ├── services/      # API 服务层
+│   │   └── api.ts
+│   ├── types/         # TypeScript 类型定义
+│   │   └── index.ts
+│   ├── assets/        # 静态资源
+│   ├── styles/        # 样式文件
+│   ├── App.tsx        # 主应用组件
+│   └── main.tsx       # 应用入口
+├── package.json       # 项目配置
+├── tsconfig.json     # TypeScript 配置
+├── vite.config.ts    # Vite 配置
+└── index.html        # HTML 入口
+```
+
+## 安装
+
+```bash
+pnpm install
+```
+
+## 开发
+
+启动开发服务器：
+
+```bash
+pnpm dev
+```
+
+开发服务器将在 http://localhost:5173 运行
+
+## 构建
+
+构建生产版本：
+
+```bash
+pnpm build
+```
+
+## 预览
+
+预览生产构建：
+
+```bash
+pnpm preview
+```
+
+## 环境变量
+
+可以在 `.env` 文件中配置：
+
+```env
+VITE_API_BASE_URL=/api
+```
+
+## 功能特性
+
+### 公开页面
+
+- 用户登录
+- 公开查询序列号（支持二维码扫描）
+
+### 管理后台
+
+- 控制台（数据统计）
+- 生成二维码和序列号
+  - 支持自动生成和自定义前缀
+  - 支持自定义二维码颜色
+- 企业管理
+  - 查看企业详情
+  - 查看序列号列表
+  - 吊销企业/序列号
+  - 查看序列号二维码
+- 序列号查询
+- 用户资料管理
+
+## License
+
+MIT
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>溯源管理系统</title>
+  <link rel="icon" type="image/x-icon" href="/src/assets/img/favicon.ico">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "trace-frontend",
+  "version": "1.0.0",
+  "description": "浙江贝凡企业授权管理系统 - 前端",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "antd": "^6.2.3",
+    "axios": "^1.13.4",
+    "qrcode": "^1.5.4",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.0"
+  },
+  "devDependencies": {
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.2.11",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "author": "",
+  "license": "MIT"
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,51 @@
+import { BrowserRouter, Routes, Route, Navigate, Outlet } from 'react-router-dom';
+import { authApi } from './services/api';
+import LoginPage from './pages/Login';
+import AdminLayout from './components/AdminLayout';
+import PublicQueryPage from './pages/PublicQuery';
+import DashboardPage from './pages/Dashboard';
+import GeneratePage from './pages/Generate';
+import ManagePage from './pages/Manage';
+import AdminQueryPage from './pages/AdminQuery';
+import ProfilePage from './pages/Profile';
+
+const PrivateRoute = () => {
+  const user = authApi.getCurrentUser();
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+  return <Outlet />;
+};
+
+const AdminRoutes = () => {
+  return (
+    <AdminLayout>
+      <Outlet />
+    </AdminLayout>
+  );
+};
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Navigate to="/login" replace />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/query" element={<PublicQueryPage />} />
+        
+        <Route element={<PrivateRoute />}>
+          <Route element={<AdminRoutes />}>
+            <Route path="/admin" element={<Navigate to="dashboard" replace />} />
+            <Route path="/admin/dashboard" element={<DashboardPage />} />
+            <Route path="/admin/generate" element={<GeneratePage />} />
+            <Route path="/admin/manage" element={<ManagePage />} />
+            <Route path="/admin/query" element={<AdminQueryPage />} />
+            <Route path="/admin/profile" element={<ProfilePage />} />
+          </Route>
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
--- a/src/assets/img/beian.png
+++ b/src/assets/img/beian.png
--- a/src/assets/img/favicon.ico
+++ b/src/assets/img/favicon.ico
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/components/AdminLayout.tsx
+++ b/src/components/AdminLayout.tsx
@@ -0,0 +1,148 @@
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import { Layout, Menu, Dropdown, Avatar, message, Modal } from 'antd';
+import {
+  DashboardOutlined,
+  QrcodeOutlined,
+  TeamOutlined,
+  SearchOutlined,
+  UserOutlined,
+  LogoutOutlined,
+  LockOutlined,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
+import { authApi } from '@/services/api';
+import './styles/AdminLayout.css';
+import logo from '@/assets/img/logo.png?url';
+
+const { Header, Sider, Content } = Layout;
+
+function AdminLayout() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const user = authApi.getCurrentUser();
+
+  const menuItems = [
+    {
+      key: 'dashboard',
+      icon: <DashboardOutlined />,
+      label: '控制台',
+      onClick: () => navigate('/admin/dashboard'),
+    },
+    {
+      key: 'generate',
+      icon: <QrcodeOutlined />,
+      label: '生成二维码',
+      onClick: () => navigate('/admin/generate'),
+    },
+    {
+      key: 'manage',
+      icon: <TeamOutlined />,
+      label: '企业管理',
+      onClick: () => navigate('/admin/manage'),
+    },
+    {
+      key: 'query',
+      icon: <SearchOutlined />,
+      label: '序列号查询',
+      onClick: () => navigate('/admin/query'),
+    },
+  ];
+
+  const handleLogout = () => {
+    Modal.confirm({
+      title: '确认退出',
+      icon: <ExclamationCircleOutlined />,
+      content: '您确定要退出登录吗？',
+      okText: '确定',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await authApi.logout();
+          message.success('已退出登录');
+          navigate('/login');
+        } catch (error) {
+          message.error('退出失败');
+        }
+      },
+    });
+  };
+
+  const userMenuItems = [
+    {
+      key: 'profile',
+      icon: <UserOutlined />,
+      label: '用户资料',
+      onClick: () => navigate('/admin/profile'),
+    },
+    {
+      key: 'changePassword',
+      icon: <LockOutlined />,
+      label: '修改密码',
+      onClick: () => {
+        message.info('修改密码功能即将上线');
+      },
+    },
+    {
+      type: 'divider' as const,
+    },
+    {
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: '退出登录',
+      onClick: handleLogout,
+      danger: true,
+    },
+  ];
+
+  const getSelectedKey = () => {
+    const path = location.pathname;
+    if (path.includes('/dashboard')) return 'dashboard';
+    if (path.includes('/generate')) return 'generate';
+    if (path.includes('/manage')) return 'manage';
+    if (path.includes('/query')) return 'query';
+    if (path.includes('/profile')) return 'profile';
+    return 'dashboard';
+  };
+
+  return (
+    <Layout className="admin-layout">
+      <Sider
+        className="admin-sider"
+        width={256}
+      >
+        <div className="logo">
+          <img src={logo} alt="Logo" style={{ height: '40px' }} />
+        </div>
+        <Menu
+          theme="light"
+          mode="inline"
+          selectedKeys={[getSelectedKey()]}
+          items={menuItems}
+          className="admin-menu"
+        />
+      </Sider>
+      
+      <Layout>
+        <Header className="admin-header">
+          <div className="header-title">
+            {menuItems.find((item) => item.key === getSelectedKey())?.label}
+          </div>
+          <div className="header-right">
+            <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
+              <div className="user-info">
+                <Avatar icon={<UserOutlined />} />
+                <span className="username">{user?.name || user?.username}</span>
+              </div>
+            </Dropdown>
+          </div>
+        </Header>
+        
+        <Content className="admin-content">
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  );
+}
+
+export default AdminLayout;
--- a/src/components/styles/AdminLayout.css
+++ b/src/components/styles/AdminLayout.css
@@ -0,0 +1,85 @@
+.admin-layout {
+  min-height: 100vh;
+}
+
+.admin-sider {
+  position: fixed;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  background: #f5f7fa;
+}
+
+.logo {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  padding: 0 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.logo-text {
+  color: #165dff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.admin-menu {
+  border-right: 0;
+  background: #f5f7fa;
+}
+
+.admin-header {
+  background: white;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  margin-left: 256px;
+  width: calc(100% - 256px);
+}
+
+.header-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #000000;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: background 0.3s;
+}
+
+.user-info:hover {
+  background: #f5f5f5;
+}
+
+.username {
+  color: #000000;
+  font-size: 14px;
+}
+
+.admin-content {
+  margin: 24px;
+  padding: 24px;
+  background: #f0f2f5;
+  min-height: calc(100vh - 112px);
+  margin-left: 280px;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import App from './App';
+import './styles/global.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ConfigProvider locale={zhCN}>
+      <App />
+    </ConfigProvider>
+  </React.StrictMode>,
+);
--- a/src/pages/AdminQuery.tsx
+++ b/src/pages/AdminQuery.tsx
@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { Form, Input, Button, Card, message, Result, Alert } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { serialApi } from '@/services/api';
+import type { Serial } from '@/types';
+
+function AdminQueryPage() {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<Serial | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleQuery = async (values: { serialNumber: string }) => {
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    
+    try {
+      const data = await serialApi.query(values.serialNumber.trim());
+      setResult(data);
+      message.success('查询成功！');
+    } catch (err: any) {
+      setError(err.message || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <Card title="序列号查询" bordered={false}>
+        <Form
+          form={form}
+          onFinish={handleQuery}
+          layout="vertical"
+        >
+          <Form.Item
+            label="授权序列号"
+            name="serialNumber"
+            rules={[{ required: true, message: '请输入授权序列号' }]}
+          >
+            <Input
+              placeholder="请输入授权序列号（如：BF20260001）"
+              size="large"
+            />
+          </Form.Item>
+
+          <Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              loading={loading}
+              size="large"
+              block
+              icon={<SearchOutlined />}
+            >
+              立即查询
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      {result && (
+        <Card style={{ marginTop: '24px' }}>
+          <Result
+            status="success"
+            title="授权有效"
+            subTitle="您的序列号已验证通过"
+          />
+          
+          <Alert
+            message={
+              <div>
+                <p><strong>序列号:</strong> {result.serialNumber}</p>
+                <p><strong>企业名称:</strong> {result.companyName}</p>
+                <p><strong>授权状态:</strong> <span style={{ color: '#52c41a', fontWeight: 'bold' }}>有效</span></p>
+                <p><strong>有效期至:</strong> {new Date(result.validUntil).toLocaleString('zh-CN')}</p>
+                <p><strong>创建时间:</strong> {new Date(result.createdAt).toLocaleString('zh-CN')}</p>
+              </div>
+            }
+            type="success"
+            showIcon
+          />
+        </Card>
+      )}
+
+      {error && (
+        <Card style={{ marginTop: '24px' }}>
+          <Result
+            status="error"
+            title="无效序列号"
+            subTitle={error}
+          />
+        </Card>
+      )}
+    </div>
+  );
+}
+
+export default AdminQueryPage;
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react';
+import { Card, Row, Col, Statistic, Table, Spin, message } from 'antd';
+import { TeamOutlined, KeyOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { dashboardApi } from '@/services/api';
+import type { DashboardStats } from '@/types';
+
+function DashboardPage() {
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  const loadStats = async () => {
+    setLoading(true);
+    try {
+      const data = await dashboardApi.getStats();
+      setStats(data);
+    } catch (error: any) {
+      message.error(error.message || '加载数据失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '400px' }}>
+        <Spin size="large" />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: '0' }}>
+      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+        <Col xs={24} sm={12} lg={6}>
+          <Card>
+            <Statistic
+              title="总企业数"
+              value={stats?.totalCompanies || 0}
+              prefix={<TeamOutlined />}
+              valueStyle={{ color: '#1890ff' }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <Card>
+            <Statistic
+              title="总序列号"
+              value={stats?.totalSerials || 0}
+              prefix={<KeyOutlined />}
+              valueStyle={{ color: '#52c41a' }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <Card>
+            <Statistic
+              title="有效序列号"
+              value={stats?.activeSerials || 0}
+              prefix={<CheckCircleOutlined />}
+              valueStyle={{ color: '#52c41a' }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <Card>
+            <Statistic
+              title="无效序列号"
+              value={stats?.inactiveSerials || 0}
+              prefix={<CloseCircleOutlined />}
+              valueStyle={{ color: '#ff4d4f' }}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      <Card title="最近生成的序列号" style={{ marginBottom: '24px' }}>
+        <Table
+          columns={[
+            { title: '序列号', dataIndex: 'serialNumber', key: 'serialNumber' },
+            { title: '企业名称', dataIndex: 'companyName', key: 'companyName' },
+            {
+              title: '状态',
+              dataIndex: 'status',
+              key: 'status',
+              render: (status: string) => (
+                <span style={{ color: status === 'active' ? '#52c41a' : '#ff4d4f' }}>
+                  {status === 'active' ? '有效' : '无效'}
+                </span>
+              ),
+            },
+            {
+              title: '创建时间',
+              dataIndex: 'createdAt',
+              key: 'createdAt',
+              render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+            },
+          ]}
+          dataSource={stats?.recentSerials || []}
+          rowKey="id"
+          pagination={false}
+        />
+      </Card>
+    </div>
+  );
+}
+
+export default DashboardPage;
--- a/src/pages/Generate.tsx
+++ b/src/pages/Generate.tsx
@@ -0,0 +1,274 @@
+import { useState } from 'react';
+import { Form, Input, Button, Card, Radio, InputNumber, DatePicker, message, Modal, Space, ColorPicker, Divider } from 'antd';
+import { QrcodeOutlined } from '@ant-design/icons';
+import QRCode from 'qrcode';
+import type { Color } from 'antd/es/color-picker';
+import { useNavigate } from 'react-router-dom';
+
+function GeneratePage() {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [generatedData, setGeneratedData] = useState<any>(null);
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string>('');
+  const [modalVisible, setModalVisible] = useState(false);
+  const [qrColor, setQrColor] = useState<string>('#000000');
+  const navigate = useNavigate();
+
+  const colorPresets = [
+    '#000000',
+    '#165DFF',
+    '#52C41A',
+    '#FAAD14',
+    '#FF4D4F',
+    '#722ED1',
+    '#EB2F96',
+  ];
+
+  const handleGenerate = async (values: any) => {
+    setLoading(true);
+    try {
+      const token = localStorage.getItem('authToken');
+      const headers: any = {
+        'Content-Type': 'application/json',
+      };
+      if (token) {
+        headers.Authorization = `Bearer ${token}`;
+      }
+
+      const payload = {
+        companyName: values.companyName,
+        quantity: values.quantity,
+        validDays: values.validOption === 'days' ? values.validDays : undefined,
+        serialPrefix: values.serialOption === 'custom' ? values.serialPrefix : undefined,
+      };
+
+      const response = await fetch('/api/serials/generate', {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload),
+      });
+
+      const data = await response.json();
+
+      if (data.serials) {
+        setGeneratedData(data);
+
+        if (data.serials && data.serials.length > 0) {
+          const baseUrl = window.location.origin;
+          const queryUrl = `${baseUrl}/query?serial=${data.serials[0].serialNumber}`;
+          const qrCode = await QRCode.toDataURL(queryUrl, {
+            color: {
+              dark: qrColor,
+              light: '#ffffff',
+            },
+          });
+          setQrCodeDataUrl(qrCode);
+        }
+
+        setModalVisible(true);
+        message.success('生成成功！');
+      } else {
+        throw new Error(data.error || '生成失败');
+      }
+    } catch (error: any) {
+      message.error(error.message || '生成失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDownloadQR = () => {
+    const link = document.createElement('a');
+    link.download = `qrcode-${generatedData?.serials?.[0]?.serialNumber}.png`;
+    link.href = qrCodeDataUrl;
+    link.click();
+  };
+
+  const handleViewQuery = () => {
+    if (generatedData?.serials?.[0]?.serialNumber) {
+      navigate(`/query?serial=${generatedData.serials[0].serialNumber}`);
+      setModalVisible(false);
+      form.resetFields();
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <Card title="生成二维码" bordered={false}>
+        <Form
+          form={form}
+          onFinish={handleGenerate}
+          layout="vertical"
+          initialValues={{
+            serialOption: 'auto',
+            quantity: 1,
+            validOption: 'days',
+            validDays: 365,
+          }}
+        >
+          <Form.Item
+            label="企业名称"
+            name="companyName"
+            rules={[{ required: true, message: '请输入企业名称' }]}
+          >
+            <Input placeholder="输入企业名称（如：浙江贝凡）" />
+          </Form.Item>
+
+          <Form.Item label="序列号设置" name="serialOption">
+            <Radio.Group>
+              <Radio value="auto">自动生成</Radio>
+              <Radio value="custom">自定义前缀</Radio>
+            </Radio.Group>
+          </Form.Item>
+
+          <Form.Item
+            noStyle
+            shouldUpdate={(prevValues, currentValues) => prevValues.serialOption !== currentValues.serialOption}
+          >
+            {({ getFieldValue }) =>
+              getFieldValue('serialOption') === 'custom' ? (
+                <Form.Item
+                  label="自定义前缀"
+                  name="serialPrefix"
+                  rules={[{ max: 10, message: '前缀不能超过10个字符' }]}
+                >
+                  <Input placeholder="输入自定义前缀（如：MYCOMPANY）" maxLength={10} />
+                </Form.Item>
+              ) : null
+            }
+          </Form.Item>
+
+          <Form.Item
+            label="序列号数量"
+            name="quantity"
+            rules={[{ required: true, message: '请输入序列号数量' }]}
+          >
+            <InputNumber min={1} max={100} style={{ width: '100%' }} />
+          </Form.Item>
+
+          <Form.Item label="有效期设置" name="validOption">
+            <Radio.Group>
+              <Radio value="days">按天数</Radio>
+              <Radio value="date">按日期</Radio>
+            </Radio.Group>
+          </Form.Item>
+
+          <Form.Item
+            noStyle
+            shouldUpdate={(prevValues, currentValues) => prevValues.validOption !== currentValues.validOption}
+          >
+            {({ getFieldValue }) =>
+              getFieldValue('validOption') === 'days' ? (
+                <Form.Item
+                  label="有效天数"
+                  name="validDays"
+                  rules={[{ required: true, message: '请输入有效天数' }]}
+                >
+                  <InputNumber min={1} max={3650} style={{ width: '100%' }} />
+                </Form.Item>
+              ) : (
+                <Form.Item
+                  label="有效期至"
+                  name="validUntil"
+                  rules={[{ required: true, message: '请选择有效期' }]}
+                >
+                  <DatePicker showTime style={{ width: '100%' }} />
+                </Form.Item>
+              )
+            }
+          </Form.Item>
+
+          <Form.Item
+            label="二维码颜色"
+            name="qrColor"
+            initialValue="#000000"
+          >
+            <div>
+              <div style={{ marginBottom: '12px', display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+                {colorPresets.map((color) => (
+                  <div
+                    key={color}
+                    onClick={() => setQrColor(color)}
+                    style={{
+                      width: '32px',
+                      height: '32px',
+                      backgroundColor: color,
+                      border: qrColor === color ? '2px solid #165DFF' : '2px solid #d9d9d9',
+                      borderRadius: '4px',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s',
+                    }}
+                  />
+                ))}
+              </div>
+              <Divider style={{ margin: '12px 0' }} />
+              <ColorPicker
+                value={qrColor}
+                onChange={(color: Color) => {
+                  const hexColor = color.toHexString();
+                  setQrColor(hexColor);
+                }}
+                showText
+              />
+            </div>
+          </Form.Item>
+
+          <Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              loading={loading}
+              size="large"
+              block
+              icon={<QrcodeOutlined />}
+            >
+              生成序列号和二维码
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Modal
+        title="生成成功"
+        open={modalVisible}
+        onCancel={() => setModalVisible(false)}
+        footer={null}
+        width={600}
+      >
+        {generatedData && (
+          <div>
+            <Space direction="vertical" style={{ width: '100%' }} size="middle">
+              <div>
+                <p><strong>企业名称:</strong> {generatedData.companyName || generatedData.serials?.[0]?.companyName}</p>
+                <p><strong>生成数量:</strong> {generatedData.serials?.length || 0}</p>
+                {generatedData.serials && generatedData.serials.length > 0 && (
+                  <p><strong>有效期至:</strong> {new Date(generatedData.serials[0].validUntil).toLocaleString('zh-CN')}</p>
+                )}
+              </div>
+
+              {qrCodeDataUrl && (
+                <div style={{ textAlign: 'center' }}>
+                  <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px' }} />
+                  {generatedData.serials && generatedData.serials.length > 0 && (
+                    <p style={{ marginTop: '8px', fontFamily: 'monospace' }}>{generatedData.serials[0].serialNumber}</p>
+                  )}
+                </div>
+              )}
+
+              <Space>
+                <Button type="primary" onClick={handleViewQuery}>查询序列号</Button>
+                <Button onClick={handleDownloadQR}>下载二维码</Button>
+                <Button onClick={() => {
+                  setModalVisible(false);
+                  form.resetFields();
+                }}>生成新的二维码</Button>
+              </Space>
+            </Space>
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+}
+
+export default GeneratePage;
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { Form, Input, Button, Card, message, Checkbox } from 'antd';
+import { UserOutlined, LockOutlined, LoginOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { authApi } from '@/services/api';
+import './styles/Login.css';
+import logo from '@/assets/img/logo.png?url';
+import beian from '@/assets/img/beian.png?url';
+
+function LoginPage() {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLogin = async (values: { username: string; password: string; remember?: boolean }) => {
+    setLoading(true);
+    try {
+      await authApi.login(values.username, values.password);
+      
+      if (values.remember) {
+        localStorage.setItem('rememberedUsername', values.username);
+      } else {
+        localStorage.removeItem('rememberedUsername');
+      }
+      
+      message.success('登录成功！');
+      setTimeout(() => {
+        navigate('/admin/dashboard');
+      }, 500);
+    } catch (error: any) {
+      message.error(error.message || '登录失败，请重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <Card className="login-card" bordered={false}>
+        <div className="login-header">
+          <div className="login-logo">
+            <img src={logo} alt="Logo" style={{ height: '24px' }} />
+          </div>
+          <h1 className="login-title">
+            <LoginOutlined /> 用户登录
+          </h1>
+          <p className="login-subtitle">请输入您的账户信息</p>
+        </div>
+
+        <Form
+          form={form}
+          name="login"
+          onFinish={handleLogin}
+          autoComplete="off"
+          layout="vertical"
+          initialValues={{
+            remember: !!localStorage.getItem('rememberedUsername'),
+            username: localStorage.getItem('rememberedUsername') || '',
+          }}
+        >
+          <Form.Item
+            label="用户名"
+            name="username"
+            rules={[{ required: true, message: '请输入您的用户名' }]}
+          >
+            <Input
+              prefix={<UserOutlined />}
+              placeholder="请输入您的用户名"
+              size="large"
+            />
+          </Form.Item>
+
+          <Form.Item
+            label="密码"
+            name="password"
+            rules={[{ required: true, message: '请输入您的密码' }]}
+          >
+            <Input.Password
+              prefix={<LockOutlined />}
+              placeholder="请输入您的密码"
+              size="large"
+            />
+          </Form.Item>
+
+          <Form.Item name="remember" valuePropName="checked">
+            <Checkbox>记住我</Checkbox>
+          </Form.Item>
+
+          <Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              loading={loading}
+              size="large"
+              block
+              icon={<LoginOutlined />}
+            >
+              登录系统
+            </Button>
+          </Form.Item>
+        </Form>
+
+        <div className="login-footer">
+          浙江贝凡网络科技提供云和AI服务
+        </div>
+      </Card>
+
+      <div className="copyright">
+        <p>
+          Copyright © 2026 浙江贝凡网络科技有限公司. All Rights Reserved. | 
+          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
+            浙ICP备2025170226号-4
+          </a>
+        </p>
+        <p>
+          <a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" target="_blank" rel="noopener noreferrer">
+              <img src={beian} alt="备案图标" style={{ height: '20px', marginRight: '5px', verticalAlign: 'middle' }} />
+            浙公网安备33011002018371号
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;
--- a/src/pages/Manage.tsx
+++ b/src/pages/Manage.tsx
@@ -0,0 +1,427 @@
+import { useEffect, useState } from 'react';
+import { Card, Table, Input, Select, Button, Space, message, Modal, Tag, Spin } from 'antd';
+import { TeamOutlined, DeleteOutlined, EyeOutlined, StopOutlined } from '@ant-design/icons';
+import type { Company } from '@/types';
+import QRCode from 'qrcode';
+import { useNavigate } from 'react-router-dom';
+
+interface CompanyData {
+  companyName: string;
+  serialCount: number;
+  firstCreated: string;
+  lastCreated: string;
+  activeCount: number;
+  status: 'active' | 'disabled';
+}
+
+function ManagePage() {
+  const [companies, setCompanies] = useState<CompanyData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCompany, setSelectedCompany] = useState<any>(null);
+  const [detailModalVisible, setDetailModalVisible] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [companyDetail, setCompanyDetail] = useState<any>(null);
+  const [qrCodeModalVisible, setQrCodeModalVisible] = useState(false);
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string>('');
+  const [selectedSerial, setSelectedSerial] = useState<string>('');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    loadCompanies();
+  }, [searchTerm]);
+
+  const loadCompanies = async () => {
+    setLoading(true);
+    try {
+      // 直接使用 apiClient 来调用后端接口
+      const token = localStorage.getItem('authToken');
+      const headers: any = {
+        'Content-Type': 'application/json',
+      };
+      if (token) {
+        headers.Authorization = `Bearer ${token}`;
+      }
+
+      let url = '/api/companies';
+      if (searchTerm) {
+        url += `?search=${encodeURIComponent(searchTerm)}`;
+      }
+
+      const response = await fetch(url, { headers });
+      const data = await response.json();
+
+      if (data.data) {
+        setCompanies(data.data);
+      } else if (data.message) {
+        setCompanies([]);
+      } else {
+        throw new Error(data.error || '获取企业列表失败');
+      }
+    } catch (error: any) {
+      console.error('Load companies error:', error);
+      message.error(error.message || '加载企业列表失败');
+      setCompanies([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleViewDetail = async (company: CompanyData) => {
+    setSelectedCompany(company);
+    setDetailModalVisible(true);
+    setDetailLoading(true);
+    
+    try {
+      const token = localStorage.getItem('authToken');
+      const headers: any = {
+        'Content-Type': 'application/json',
+      };
+      if (token) {
+        headers.Authorization = `Bearer ${token}`;
+      }
+
+      const response = await fetch(`/api/companies/${encodeURIComponent(company.companyName)}`, { headers });
+      const data = await response.json();
+
+      if (data.data) {
+        setCompanyDetail(data.data);
+      } else {
+        throw new Error(data.error || '获取企业详情失败');
+      }
+    } catch (error: any) {
+      message.error(error.message || '获取企业详情失败');
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  const handleDelete = async (company: CompanyData) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除企业 "${company.companyName}" 吗？这将删除该企业的所有序列号！`,
+      okText: '确定',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          const token = localStorage.getItem('authToken');
+          const headers: any = {
+            'Content-Type': 'application/json',
+          };
+          if (token) {
+            headers.Authorization = `Bearer ${token}`;
+          }
+
+          const response = await fetch(`/api/companies/${encodeURIComponent(company.companyName)}`, {
+            method: 'DELETE',
+            headers,
+          });
+          const data = await response.json();
+
+          if (data.message) {
+            message.success('删除成功');
+            loadCompanies();
+          } else {
+            throw new Error(data.error || '删除失败');
+          }
+        } catch (error: any) {
+          message.error(error.message || '删除失败');
+        }
+      },
+    });
+  };
+
+  const handleRevoke = async (company: CompanyData) => {
+    Modal.confirm({
+      title: '确认吊销',
+      content: `确定要吊销企业 "${company.companyName}" 吗？这将使该企业的所有序列号失效！`,
+      okText: '确定',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          const token = localStorage.getItem('authToken');
+          const headers: any = {
+            'Content-Type': 'application/json',
+          };
+          if (token) {
+            headers.Authorization = `Bearer ${token}`;
+          }
+
+          const response = await fetch(`/api/companies/${encodeURIComponent(company.companyName)}/revoke`, {
+            method: 'POST',
+            headers,
+          });
+          const data = await response.json();
+
+          if (data.message) {
+            message.success('吊销成功');
+            loadCompanies();
+          } else {
+            throw new Error(data.error || '吊销失败');
+          }
+        } catch (error: any) {
+          message.error(error.message || '吊销失败');
+        }
+      },
+    });
+  };
+
+  const handleViewQRCode = async (serialNumber: string) => {
+    try {
+      const baseUrl = window.location.origin;
+      const queryUrl = `${baseUrl}/query?serial=${serialNumber}`;
+      const qrCode = await QRCode.toDataURL(queryUrl);
+      setQrCodeDataUrl(qrCode);
+      setSelectedSerial(serialNumber);
+      setQrCodeModalVisible(true);
+    } catch (error) {
+      message.error('生成二维码失败');
+    }
+  };
+
+  const handleQuerySerial = (serialNumber: string) => {
+    setQrCodeModalVisible(false);
+    navigate(`/query?serial=${serialNumber}`);
+  };
+
+  const handleRevokeSerial = async (serialNumber: string) => {
+    Modal.confirm({
+      title: '确认吊销',
+      content: `确定要吊销序列号 "${serialNumber}" 吗？`,
+      okText: '确定',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          const token = localStorage.getItem('authToken');
+          const headers: any = {
+            'Content-Type': 'application/json',
+          };
+          if (token) {
+            headers.Authorization = `Bearer ${token}`;
+          }
+
+          const response = await fetch(`/api/serials/${encodeURIComponent(serialNumber)}/revoke`, {
+            method: 'POST',
+            headers,
+          });
+          const data = await response.json();
+
+          if (data.message) {
+            message.success('吊销成功');
+            if (selectedCompany) {
+              handleViewDetail(selectedCompany);
+            }
+          } else {
+            throw new Error(data.error || '吊销失败');
+          }
+        } catch (error: any) {
+          message.error(error.message || '吊销失败');
+        }
+      },
+    });
+  };
+
+  const columns = [
+    {
+      title: '企业名称',
+      dataIndex: 'companyName',
+      key: 'companyName',
+    },
+    {
+      title: '序列号数量',
+      dataIndex: 'serialCount',
+      key: 'serialCount',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: string) => (
+        <Tag color={status === 'active' ? 'green' : 'red'}>
+          {status === 'active' ? '正常' : '已吊销'}
+        </Tag>
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'firstCreated',
+      key: 'firstCreated',
+      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+    },
+    {
+      title: '最后更新',
+      dataIndex: 'lastCreated',
+      key: 'lastCreated',
+      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      render: (_: any, record: CompanyData) => (
+        <Space>
+          <Button
+            type="link"
+            icon={<EyeOutlined />}
+            onClick={() => handleViewDetail(record)}
+          >
+            查看
+          </Button>
+          <Button
+            type="link"
+            danger
+            icon={<StopOutlined />}
+            onClick={() => handleRevoke(record)}
+          >
+            吊销
+          </Button>
+          <Button
+            type="link"
+            danger
+            icon={<DeleteOutlined />}
+            onClick={() => handleDelete(record)}
+          >
+            删除
+          </Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <Card
+        title={
+          <Space>
+            <TeamOutlined />
+            <span>企业管理</span>
+          </Space>
+        }
+        extra={
+          <Input.Search
+            placeholder="搜索企业"
+            allowClear
+            style={{ width: 200 }}
+            onSearch={setSearchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            value={searchTerm}
+          />
+        }
+      >
+        <Table
+          columns={columns}
+          dataSource={companies}
+          rowKey="companyName"
+          loading={loading}
+          pagination={{
+            pageSize: 10,
+            showSizeChanger: true,
+            showTotal: (total) => `共 ${total} 家企业`,
+          }}
+        />
+      </Card>
+
+      <Modal
+        title="企业详情"
+        open={detailModalVisible}
+        onCancel={() => setDetailModalVisible(false)}
+        footer={null}
+        width={800}
+      >
+        {detailLoading ? (
+          <div style={{ textAlign: 'center', padding: '40px' }}>
+            <Spin size="large" />
+          </div>
+        ) : companyDetail ? (
+          <div>
+            <p><strong>企业名称:</strong> {companyDetail.companyName}</p>
+            <p><strong>序列号总数:</strong> {companyDetail.serialCount}</p>
+            <p><strong>活跃序列号:</strong> {companyDetail.activeCount}</p>
+            <p><strong>已吊销序列号:</strong> {companyDetail.disabledCount || 0}</p>
+            <p><strong>已过期序列号:</strong> {companyDetail.expiredCount || 0}</p>
+            
+            {companyDetail.serials && companyDetail.serials.length > 0 && (
+              <div style={{ marginTop: '16px' }}>
+                <h4>序列号列表</h4>
+                <Table
+                  columns={[
+                    { title: '序列号', dataIndex: 'serialNumber', key: 'serialNumber' },
+                    {
+                      title: '状态',
+                      dataIndex: 'isActive',
+                      key: 'isActive',
+                      render: (isActive: boolean) => (
+                        <Tag color={isActive ? 'green' : 'red'}>
+                          {isActive ? '有效' : '已吊销'}
+                        </Tag>
+                                           ),
+                    },
+                    {
+                      title: '有效期至',
+                      dataIndex: 'validUntil',
+                      key: 'validUntil',
+                      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+                    },
+                    {
+                      title: '操作',
+                      key: 'actions',
+                      render: (_: any, record: any) => (
+                        <Space>
+                          <Button
+                            type="link"
+                            size="small"
+                            icon={<EyeOutlined />}
+                            onClick={() => handleViewQRCode(record.serialNumber)}
+                          >
+                            查看二维码
+                          </Button>
+                          {record.isActive && (
+                            <Button
+                              type="link"
+                              size="small"
+                              danger
+                              icon={<StopOutlined />}
+                              onClick={() => handleRevokeSerial(record.serialNumber)}
+                            >
+                              吊销
+                            </Button>
+                          )}
+                        </Space>
+                      ),
+                    },
+                  ]}
+                  dataSource={companyDetail.serials}
+                  rowKey="serialNumber"
+                  pagination={false}
+                  size="small"
+                />
+              </div>
+            )}
+          </div>
+        ) : null}
+      </Modal>
+
+      <Modal
+        title="序列号二维码"
+        open={qrCodeModalVisible}
+        onCancel={() => setQrCodeModalVisible(false)}
+        footer={null}
+        width={400}
+      >
+        <div style={{ textAlign: 'center' }}>
+          {qrCodeDataUrl && (
+            <>
+              <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px', cursor: 'pointer' }} onClick={() => handleQuerySerial(selectedSerial)} />
+              <p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>{selectedSerial}</p>
+              <p style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>点击二维码可查询序列号</p>
+            </>
+          )}
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+export default ManagePage;
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -0,0 +1,202 @@
+import { useState, useEffect } from 'react';
+import { Form, Input, Button, Card, message, Avatar, Descriptions, Space, Modal } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { authApi } from '@/services/api';
+import type { User } from '@/types';
+
+function ProfilePage() {
+  const [profileForm] = Form.useForm();
+  const [passwordForm] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    loadUserProfile();
+  }, []);
+
+  const loadUserProfile = () => {
+    const currentUser = authApi.getCurrentUser();
+    if (currentUser) {
+      setUser(currentUser);
+      profileForm.setFieldsValue({
+        username: currentUser.username,
+        name: currentUser.name,
+        email: currentUser.email,
+        role: currentUser.role,
+        createdAt: new Date(currentUser.createdAt).toLocaleString('zh-CN'),
+      });
+    }
+  };
+
+  const handleUpdateProfile = async (values: any) => {
+    setLoading(true);
+    try {
+      const updatedUser = await authApi.updateProfile({
+        name: values.name,
+        email: values.email,
+      });
+      setUser(updatedUser);
+      message.success('更新资料成功！');
+    } catch (error: any) {
+      message.error(error.message || '更新资料失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChangePassword = async (values: any) => {
+    setLoading(true);
+    try {
+      await authApi.changePassword(values.currentPassword, values.newPassword);
+      message.success('修改密码成功！');
+      setPasswordModalVisible(false);
+      passwordForm.resetFields();
+    } catch (error: any) {
+      message.error(error.message || '修改密码失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <Card
+        title={
+          <span>
+            <UserOutlined /> 用户资料
+          </span>
+        }
+        style={{ marginBottom: '24px' }}
+      >
+        {user && (
+          <Descriptions column={1} bordered style={{ marginBottom: '24px' }}>
+            <Descriptions.Item label="头像">
+              <Avatar icon={<UserOutlined />} size={64} />
+            </Descriptions.Item>
+            <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
+            <Descriptions.Item label="姓名">{user.name}</Descriptions.Item>
+            <Descriptions.Item label="邮箱">{user.email || '-'}</Descriptions.Item>
+            <Descriptions.Item label="角色">{user.role}</Descriptions.Item>
+            <Descriptions.Item label="创建时间">
+              {new Date(user.createdAt).toLocaleString('zh-CN')}
+            </Descriptions.Item>
+          </Descriptions>
+        )}
+
+        <Form
+          form={profileForm}
+          onFinish={handleUpdateProfile}
+          layout="vertical"
+        >
+          <Form.Item
+            label="姓名"
+            name="name"
+            rules={[{ required: true, message: '请输入姓名' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="邮箱"
+            name="email"
+            rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item>
+            <Space>
+              <Button type="primary" htmlType="submit" loading={loading}>
+                保存资料
+              </Button>
+              <Button onClick={loadUserProfile}>
+                重置
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Card
+        title={
+          <span>
+            <LockOutlined /> 修改密码
+          </span>
+        }
+        extra={
+          <Button type="primary" onClick={() => setPasswordModalVisible(true)}>
+            修改密码
+          </Button>
+        }
+      />
+
+      <Modal
+        title="修改密码"
+        open={passwordModalVisible}
+        onCancel={() => setPasswordModalVisible(false)}
+        footer={null}
+      >
+        <Form
+          form={passwordForm}
+          onFinish={handleChangePassword}
+          layout="vertical"
+        >
+          <Form.Item
+            label="当前密码"
+            name="currentPassword"
+            rules={[{ required: true, message: '请输入当前密码' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            label="新密码"
+            name="newPassword"
+            rules={[
+              { required: true, message: '请输入新密码' },
+              { min: 6, message: '密码至少6位' },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            label="确认新密码"
+            name="confirmPassword"
+            dependencies={['newPassword']}
+            rules={[
+              { required: true, message: '请确认新密码' },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  if (!value || getFieldValue('newPassword') === value) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error('两次输入的密码不一致'));
+                },
+              }),
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item>
+            <Space>
+              <Button type="primary" htmlType="submit" loading={loading}>
+                保存
+              </Button>
+              <Button onClick={() => {
+                setPasswordModalVisible(false);
+                passwordForm.resetFields();
+              }}>
+                取消
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+}
+
+export default ProfilePage;
--- a/src/pages/PublicQuery.tsx
+++ b/src/pages/PublicQuery.tsx
@@ -0,0 +1,181 @@
+import { useState, useEffect } from 'react';
+import { Input, Button, Card, message, Spin, Result } from 'antd';
+import { QrcodeOutlined, SearchOutlined, ArrowLeftOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { serialApi } from '@/services/api';
+import type { Serial } from '@/types';
+import './styles/PublicQuery.css';
+import logo from '@/assets/img/logo.png?url';
+import beian from '@/assets/img/beian.png?url';
+
+function PublicQueryPage() {
+  const [serialNumber, setSerialNumber] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<Serial | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [showResult, setShowResult] = useState(false);
+
+  const performQuery = async (serialToQuery: string) => {
+    setLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const data = await serialApi.query(serialToQuery);
+      setResult(data);
+    } catch (err: any) {
+      setError(err.message || '查询失败');
+      setResult(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const serialFromUrl = urlParams.get('serial');
+    if (serialFromUrl) {
+      setSerialNumber(serialFromUrl);
+      setShowResult(true);
+      performQuery(serialFromUrl);
+    }
+  }, []);
+
+  const handleQuery = async () => {
+    if (!serialNumber.trim()) {
+      message.error('请输入授权序列号');
+      return;
+    }
+    setShowResult(true);
+    performQuery(serialNumber.trim());
+  };
+
+  const handleReset = () => {
+    setShowResult(false);
+    setSerialNumber('');
+    setResult(null);
+    setError(null);
+  };
+
+  return (
+    <div className="public-query-container">
+      {!showResult ? (
+        <Card className="query-card" bordered={false}>
+          <div className="query-header">
+            <div className="query-logo">
+              <img src={logo} alt="Logo" style={{ height: '24px' }} />
+            </div>
+            <h1 className="query-title">
+              <QrcodeOutlined /> 授权查询
+            </h1>
+            <p className="query-subtitle">请输入您的授权序列号进行查询</p>
+          </div>
+
+          <div className="query-form">
+            <Input
+              size="large"
+              placeholder="请输入或扫描您的授权序列号"
+              value={serialNumber}
+              onChange={(e) => setSerialNumber(e.target.value)}
+              onPressEnter={handleQuery}
+              prefix={<SearchOutlined />}
+            />
+            <Button
+              type="primary"
+              size="large"
+              block
+              icon={<SearchOutlined />}
+              onClick={handleQuery}
+            >
+              立即查询
+            </Button>
+          </div>
+        </Card>
+      ) : (
+        <Card className={`result-card show`} bordered={false}>
+          <div className="result-header">
+            <div className="query-logo">
+              <img src={logo} alt="Logo" style={{ height: '24px' }} />
+            </div>
+          </div>
+          {loading ? (
+            <div className="loading-container">
+              <Spin size="large" />
+              <p>正在查询授权信息...</p>
+            </div>
+          ) : result ? (
+            <div className="success-container">
+              {result.status !== 'active' ? (
+                <Result
+                  icon={<CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: '72px' }} />}
+                  title="授权已吊销"
+                  subTitle={`序列号验证通过，但已被吊销。企业：${result.companyName}`}
+                />
+              ) : (
+                <Result
+                  icon={<CheckCircleOutlined style={{ color: '#52c41a', fontSize: '72px' }} />}
+                  title="授权有效"
+                  subTitle="您的序列号已验证通过"
+                />
+              )}
+              
+              <div className="result-details">
+                <div className="detail-item">
+                  <span className="label">序列号</span>
+                  <span className="value serial">{result.serialNumber}</span>
+                </div>
+                <div className="detail-item">
+                  <span className="label">企业名称</span>
+                  <span className="value">{result.companyName}</span>
+                </div>
+                <div className="detail-item">
+                  <span className="label">有效期至</span>
+                  <span className="value">{new Date(result.validUntil).toLocaleString('zh-CN')}</span>
+                </div>
+                <div className="detail-item">
+                  <span className="label">授权状态</span>
+                  <span className="value status">
+                    {result.status === 'active' ? '有效' : '已吊销'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="error-container">
+              <Result
+                icon={<CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: '72px' }} />}
+                title="无效序列号"
+                subTitle={error}
+              />
+            </div>
+          )}
+
+          <Button
+            size="large"
+            block
+            icon={<ArrowLeftOutlined />}
+            onClick={handleReset}
+          >
+            重新查询
+          </Button>
+        </Card>
+      )}
+
+      <div className="copyright">
+        <p>
+          Copyright © 2026 浙江贝凡网络科技有限公司. All Rights Reserved. | 
+          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
+            浙ICP备2025170226号-4
+          </a>
+        </p>
+        <p>
+          <a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" target="_blank" rel="noopener noreferrer">
+              <img src={beian} alt="备案图标" style={{ height: '20px', marginRight: '5px', verticalAlign: 'middle' }} />
+            浙公网安备33011002018371号
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default PublicQueryPage;
--- a/src/pages/styles/Login.css
+++ b/src/pages/styles/Login.css
@@ -0,0 +1,88 @@
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
+}
+
+.login-card {
+  width: 100%;
+  max-width: 480px;
+  padding: 24px;
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border-radius: 24px;
+  animation: slideIn 0.5s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.login-header {
+  margin-bottom: 32px;
+}
+
+.login-logo {
+  text-align: left;
+  margin-bottom: 16px;
+}
+
+.login-title {
+  font-size: clamp(1.5rem, 4vw, 2rem);
+  font-weight: bold;
+  color: #165DFF;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.login-subtitle {
+  color: #6B7280;
+  font-size: 14px;
+  text-align: center;
+}
+
+.login-footer {
+  text-align: center;
+  margin-top: 16px;
+  color: #6B7280;
+  font-size: 14px;
+}
+
+.copyright {
+  margin-top: 32px;
+  text-align: center;
+  color: #6B7280;
+  font-size: 14px;
+}
+
+.copyright p {
+  margin: 8px 0;
+}
+
+.copyright a {
+  color: #6B7280;
+  text-decoration: none;
+}
+
+.copyright a:hover {
+  color: #165DFF;
+}
+
+.copyright img {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  margin-right: 4px;
+}
--- a/src/pages/styles/PublicQuery.css
+++ b/src/pages/styles/PublicQuery.css
@@ -0,0 +1,149 @@
+.public-query-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 32px 20px;
+  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
+}
+
+.query-card {
+  width: 100%;
+  max-width: 480px;
+  padding: 24px;
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border-radius: 24px;
+}
+
+.query-header {
+  margin-bottom: 32px;
+}
+
+.query-logo {
+  text-align: left;
+  margin-bottom: 16px;
+}
+
+.query-title {
+  font-size: clamp(1.5rem, 4vw, 2rem);
+  font-weight: bold;
+  color: #165DFF;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.query-subtitle {
+  color: #6B7280;
+  font-size: 14px;
+  text-align: center;
+}
+
+.query-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.result-card {
+  width: 100%;
+  max-width: 480px;
+  padding: 16px;
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border-radius: 24px;
+  margin-top: 16px;
+  transform: scale(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+.result-card.show {
+  transform: scale(1);
+}
+
+.result-header {
+  margin-bottom: 16px;
+}
+
+.loading-container,
+.success-container,
+.error-container {
+  text-align: center;
+}
+
+.loading-container p {
+  margin-top: 16px;
+  color: #6B7280;
+}
+
+.result-details {
+  margin-top: 16px;
+  padding: 12px;
+  background: #F8FAFC;
+  border-radius: 12px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: white;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.detail-item:last-child {
+  margin-bottom: 0;
+}
+
+.detail-item .label {
+  color: #374151;
+  font-weight: 500;
+}
+
+.detail-item .value {
+  color: #111827;
+}
+
+.detail-item .value.serial {
+  color: #165DFF;
+  font-family: 'Courier New', monospace;
+}
+
+.detail-item .value.status {
+  color: #52c41a;
+  font-weight: bold;
+}
+
+.copyright {
+  margin-top: 32px;
+  text-align: center;
+  color: #6B7280;
+  font-size: 14px;
+}
+
+.copyright p {
+  margin: 8px 0;
+}
+
+.copyright a {
+  color: #6B7280;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.copyright a:hover {
+  color: #165DFF;
+}
+
+.copyright img {
+  width: 16px;
+  height: 16px;
+}
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -0,0 +1,207 @@
+import axios from 'axios';
+import type { ApiResponse, AuthResponse, User } from '@/types';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
+
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+apiClient.interceptors.request.use((config) => {
+  const token = localStorage.getItem('authToken');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('authToken');
+      localStorage.removeItem('currentUser');
+      window.location.href = '/login';
+    }
+    if (error.response?.status === 404) {
+      const url = error.config?.url || '';
+      if (url.includes('/query')) {
+        const customError = new Error('未找到该序列号，请检查输入是否正确');
+        customError.name = 'NotFoundError';
+        return Promise.reject(customError);
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export const authApi = {
+  login: async (username: string, password: string) => {
+    const response = await apiClient.post('/auth/login', { username, password });
+    // 后端返回的是 accessToken，前端期望的是 token
+    const token = response.data.accessToken || response.data.token;
+    const user = response.data.user;
+    
+    if (token && user) {
+      localStorage.setItem('authToken', token);
+      localStorage.setItem('currentUser', JSON.stringify(user));
+      return user;
+    }
+    throw new Error('登录失败');
+  },
+
+  logout: async () => {
+    try {
+      await apiClient.post('/auth/logout');
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('currentUser');
+  },
+
+  getCurrentUser: (): User | null => {
+    const user = localStorage.getItem('currentUser');
+    return user ? JSON.parse(user) : null;
+  },
+
+  updateProfile: async (data: { name?: string; email?: string }) => {
+    const response = await apiClient.put('/auth/profile', data);
+    const user = response.data;
+    if (user) {
+      localStorage.setItem('currentUser', JSON.stringify(user));
+      return user;
+    }
+    throw new Error('更新资料失败');
+  },
+
+  changePassword: async (currentPassword: string, newPassword: string) => {
+    const response = await apiClient.post('/auth/change-password', { currentPassword, newPassword });
+    if (response.data.message) {
+      return true;
+    }
+    throw new Error(response.data.error || '修改密码失败');
+  },
+};
+
+export const serialApi = {
+  generate: async (data: {
+    companyName: string;
+    serialOption: 'auto' | 'custom';
+    serialPrefix?: string;
+    quantity: number;
+    validOption: 'days' | 'date';
+    validDays?: number;
+    validUntil?: string;
+  }) => {
+    // 根据后端接口调整参数
+    const payload = {
+      companyName: data.companyName,
+      quantity: data.quantity,
+      validDays: data.validOption === 'days' ? data.validDays : undefined,
+      serialPrefix: data.serialOption === 'custom' ? data.serialPrefix : undefined,
+    };
+
+    const response = await apiClient.post('/serials/generate', payload);
+    if (response.data.serials) {
+      return response.data;
+    }
+    throw new Error(response.data.error || '生成序列号失败');
+  },
+
+  query: async (serialNumber: string) => {
+    // 后端路径是正确的: /api/serials/:serialNumber/query
+    const response = await apiClient.get(`/serials/${encodeURIComponent(serialNumber)}/query`);
+    if (response.data.serial) {
+      return response.data.serial;
+    }
+    throw new Error(response.data.error || '查询序列号失败');
+  },
+
+  list: async (companyId?: number) => {
+    let url = '/serials';
+    if (companyId) url += `?companyId=${companyId}`;
+    const response = await apiClient.get(url);
+    if (response.data.data) {
+      return response.data.data;
+    }
+    throw new Error('获取序列号列表失败');
+  },
+
+  delete: async (id: number) => {
+    // 后端没有单个删除接口，需要使用企业接口下的删除
+    const response = await apiClient.delete(`/serials/${id}`);
+    if (response.data) {
+      return true;
+    }
+    throw new Error(response.data.error || '删除序列号失败');
+  },
+};
+
+export const companyApi = {
+  list: async (filter?: { search?: string; status?: 'all' | 'active' | 'expired' }) => {
+    let url = '/companies';
+    if (filter?.search || filter?.status) {
+      const params = new URLSearchParams();
+      if (filter.search) params.append('search', filter.search);
+      if (filter.status && filter.status !== 'all') params.append('status', filter.status);
+      url += `?${params.toString()}`;
+    }
+    const response = await apiClient.get(url);
+    if (response.data.data) {
+      return response.data.data;
+    }
+    throw new Error('获取企业列表失败');
+  },
+
+  get: async (companyName: string) => {
+    const response = await apiClient.get(`/companies/${encodeURIComponent(companyName)}`);
+    if (response.data.data) {
+      return response.data.data;
+    }
+    throw new Error('获取企业详情失败');
+  },
+
+  delete: async (companyName: string) => {
+    const response = await apiClient.delete(`/companies/${encodeURIComponent(companyName)}`);
+    if (response.data) {
+      return true;
+    }
+    throw new Error(response.data.error || '删除企业失败');
+  },
+};
+
+export const dashboardApi = {
+  getStats: async () => {
+    // 后端路径是 /api/companies/stats/overview
+    const response = await apiClient.get('/companies/stats/overview');
+    if (response.data.data) {
+      const data = response.data.data;
+      // 转换数据格式以匹配前端期望
+      return {
+        totalCompanies: data.overview?.totalCompanies || 0,
+        totalSerials: data.overview?.totalSerials || 0,
+        activeSerials: data.overview?.activeSerials || 0,
+        inactiveSerials: data.overview?.inactiveSerials || 0,
+        monthlyData: data.monthlyStats || [],
+        recentCompanies: data.recentCompanies?.map((c: any) => ({
+          id: c.companyName,
+          name: c.companyName,
+          status: 'active' as const,
+          createdAt: c.lastCreated,
+        })) || [],
+        recentSerials: data.recentSerials?.map((s: any) => ({
+          id: s.serialNumber,
+          serialNumber: s.serialNumber,
+          companyName: s.companyName,
+          status: s.isActive ? 'active' : 'inactive',
+          createdAt: s.createdAt,
+        })) || [],
+      };
+    }
+    throw new Error('获取统计数据失败');
+  },
+};
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,25 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+html, body, #root {
+  height: 100%;
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -0,0 +1,91 @@
+export interface User {
+  id: number;
+  username: string;
+  name: string;
+  email?: string;
+  role: string;
+  createdAt: string;
+}
+
+export interface Company {
+  id: number;
+  name: string;
+  status: 'active' | 'disabled';
+  createdAt: string;
+  serials?: Serial[];
+}
+
+export interface Serial {
+  id: number;
+  serialNumber: string;
+  companyId: number;
+  companyName: string;
+  status: 'active' | 'disabled';
+  validUntil: string;
+  createdAt: string;
+}
+
+export interface GenerateSerialRequest {
+  companyName: string;
+  serialOption: 'auto' | 'custom';
+  serialPrefix?: string;
+  quantity: number;
+  validOption: 'days' | 'date';
+  validDays?: number;
+  validUntil?: string;
+}
+
+export interface GenerateSerialResponse {
+  companyName: string;
+  serials: Array<{
+    serialNumber: string;
+    validUntil: string;
+  }>;
+  qrCode: string;
+}
+
+export interface AuthResponse {
+  token: string;
+  user: User;
+}
+
+export interface LoginRequest {
+  username: string;
+  password: string;
+  remember?: boolean;
+}
+
+export interface UpdateProfileRequest {
+  name?: string;
+  email?: string;
+}
+
+export interface ChangePasswordRequest {
+  currentPassword: string;
+  newPassword: string;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+export interface DashboardStats {
+  totalCompanies: number;
+  totalSerials: number;
+  activeSerials: number;
+  inactiveSerials: number;
+  monthlyData: Array<{
+    month: string;
+    companies: number;
+    serials: number;
+  }>;
+  recentCompanies: Company[];
+  recentSerials: Serial[];
+}
+
+export interface CompanyFilter {
+  search?: string;
+  status?: 'all' | 'active' | 'expired';
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,26 @@
+/// <reference types="vite/client" />
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.gif' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+})