feat(database): 实现数据库功能并优化数据导出

- 新增数据库相关 API 和服务
- 实现数据导出功能，支持导出到 JSON 文件
- 优化数据导入流程，增加数据校验
- 新增数据库页面，展示解析数据和统计信息
- 更新捕获页面，支持导入数据到数据库

frontend/src/pages/CapturePage.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {Button, Card, Layout, message, Select, Spin, Table} from 'antd';
-import {DownloadOutlined, PlayCircleOutlined, SettingOutlined, StopOutlined, UploadOutlined} from '@ant-design/icons';
+import {DownloadOutlined, PlayCircleOutlined, StopOutlined, UploadOutlined} from '@ant-design/icons';
 import '../App.css';
 import {
     GetNetworkInterfaces,
@@ -355,26 +355,10 @@ function CapturePage() {
     ];
 
     return (
-        <Layout style={{ minHeight: '100vh' }}>
-            <Header style={{ background: '#fff', padding: '0 16px', height: 48, lineHeight: '48px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 48 }}>
-                    <h1 style={{ margin: 0, fontSize: 20 }}>装备数据导出工具</h1>
-                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                        <Button
-                            type="primary"
-                            icon={<SettingOutlined />}
-                            onClick={handleRefreshParsedData}
-                            loading={loading}
-                            style={{ flex: 1, height: 32 }}
-                        >刷新数据</Button>
-                    </div>
-                </div>
-            </Header>
-
         <Layout>
-                <Sider width={220} style={{ background: '#fff' }}>
+            <Sider width={220} style={{ background: '#f5f5f5' }}>
-                    <div style={{ padding: '12px' }}>
+                <div style={{ padding: '16px 0px 12px 12px' }}>
-                        <Card title="抓包控制" size="small">
+                    <Card title="抓包控制" size="small" style={{ marginBottom: 12, marginTop: 0 }}>
                         <div style={{ marginBottom: 12 }}>
                             <label>网络接口：</label>
                             <Select
@@ -481,7 +465,6 @@ function CapturePage() {
                 </Spin>
             </Content>
         </Layout>
-        </Layout>
     );
 }
 

frontend/src/pages/DatabasePage.tsx

@@ -1,10 +1,12 @@
 import React, {useEffect, useState} from 'react';
-import {Button, Card, Col, Row, Space, Statistic, Table, Tag,} from 'antd';
+import {Button, Card, Col, Layout, Row, Space, Statistic, Table, Tag} from 'antd';
 import {BarChartOutlined, DatabaseOutlined, ReloadOutlined, SettingOutlined,} from '@ant-design/icons';
 import * as App from '../../wailsjs/go/service/App';
 import {model} from '../../wailsjs/go/models';
 import {useMessage} from '../utils/useMessage';
 
+const { Content } = Layout;
+
 // 定义Equipment接口
 interface Equipment {
     id: string | number;
@@ -121,7 +123,8 @@ const DatabasePage: React.FC = () => {
   ];
 
   return (
-    <div style={{ padding: '24px' }}>
+    <Layout style={{ minHeight: '100vh' }}>
+      <Content style={{ padding: 16 }}>
         {/* 统计卡片 */}
         <Row gutter={16} style={{ marginBottom: '24px' }}>
           <Col span={8}>
@@ -196,7 +199,8 @@ const DatabasePage: React.FC = () => {
             </div>
           )}
         </Card>
-    </div>
+      </Content>
+    </Layout>
   );
 };
 

frontend/src/pages/OptimizerPage.tsx

@@ -1,12 +1,140 @@
 import React from 'react';
+import {Avatar, Button, Card, Col, Divider, Input, Layout, Pagination, Row, Select, Table, Tag} from 'antd';
+import {AppstoreOutlined, FilterOutlined, UserOutlined} from '@ant-design/icons';
 
-function OptimizerPage() {
+const { Content } = Layout;
+
+// 静态数据示例
+const heroList = [
+  { id: 1, name: '雅娜凯', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1' },
+  { id: 2, name: '艾莉丝', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2' },
+];
+const hero = heroList[0];
+const attributes = [
+  { label: '攻击', value: 1567 },
+  { label: '防御', value: 1654 },
+  { label: '生命', value: 24447 },
+  { label: '速度', value: 188 },
+  { label: '暴击', value: 49 },
+  { label: '爆伤', value: 166 },
+  { label: '命中', value: 46 },
+  { label: '抵抗', value: 52 },
+];
+const setOptions = [
+  { label: '任意套装', value: 'any' },
+  { label: '暴击套', value: 'crit' },
+  { label: '速度套', value: 'speed' },
+];
+const filterOptions = [
+  { label: '攻击', value: 'atk' },
+  { label: '防御', value: 'def' },
+  { label: '生命', value: 'hp' },
+  { label: '速度', value: 'spd' },
+  { label: '暴击', value: 'cr' },
+  { label: '爆伤', value: 'cd' },
+  { label: '命中', value: 'acc' },
+  { label: '抵抗', value: 'res' },
+];
+
+const resultColumns = [
+  { title: '套装', dataIndex: 'set', key: 'set', render: (v: string) => <Tag>{v}</Tag> },
+  { title: '攻击', dataIndex: 'atk', key: 'atk' },
+  { title: '防御', dataIndex: 'def', key: 'def' },
+  { title: '生命', dataIndex: 'hp', key: 'hp' },
+  { title: '速度', dataIndex: 'spd', key: 'spd' },
+  { title: '暴击', dataIndex: 'cr', key: 'cr' },
+  { title: '爆伤', dataIndex: 'cd', key: 'cd' },
+  { title: '命中', dataIndex: 'acc', key: 'acc' },
+  { title: '抵抗', dataIndex: 'res', key: 'res' },
+];
+const resultData = [
+  { key: 1, set: '暴击套', atk: 2000, def: 1500, hp: 20000, spd: 200, cr: 100, cd: 250, acc: 30, res: 20 },
+  { key: 2, set: '速度套', atk: 1800, def: 1400, hp: 21000, spd: 220, cr: 80, cd: 200, acc: 40, res: 30 },
+];
+
+export default function OptimizerPage() {
   return (
-    <div style={{ padding: 24 }}>
+    <Layout style={{ minHeight: '100vh' }}>
-      <h2>配装优化</h2>
+      <Content style={{ padding: 16 }}>
-      <p>请选择一个角色后点击开始配装。后续将在此页面实现配装计算与展示。</p>
+        {/* 顶部选项区 */}
+        <Card style={{ marginBottom: 16 }}>
+          <Row gutter={16}>
+            {/* 角色头像与选择 */}
+            <Col span={4} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+              <Avatar size={64} src={hero.avatar} icon={<UserOutlined />} />
+              <div style={{ marginTop: 8, fontWeight: 500 }}>{hero.name}</div>
+              <Select style={{ width: '100%', marginTop: 8 }} defaultValue={hero.id}>
+                {heroList.map(h => <Select.Option key={h.id} value={h.id}>{h.name}</Select.Option>)}
+              </Select>
+            </Col>
+            {/* 角色属性 */}
+            <Col span={6}>
+              <div style={{ fontWeight: 500, marginBottom: 8 }}>属性</div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                {attributes.map(attr => (
+                  <div key={attr.label} style={{ minWidth: 60 }}>{attr.label}: <b>{attr.value}</b></div>
+                ))}
               </div>
+            </Col>
+            {/* 属性过滤 */}
+            <Col span={7}>
+              <div style={{ fontWeight: 500, marginBottom: 8 }}>属性过滤</div>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                {filterOptions.map(opt => (
+                  <Input key={opt.value} addonBefore={opt.label} placeholder="最小值" style={{ width: 100 }} />
+                ))}
+              </div>
+            </Col>
+            {/* 套装选择与操作 */}
+            <Col span={7}>
+              <div style={{ fontWeight: 500, marginBottom: 8 }}>指定套装</div>
+              <Select style={{ width: '100%', marginBottom: 8 }} defaultValue={setOptions[0].value}>
+                {setOptions.map(opt => <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>)}
+              </Select>
+              <div style={{ display: 'flex', gap: 8 }}>
+                <Button type="primary" icon={<AppstoreOutlined />}>开始配装</Button>
+                <Button icon={<FilterOutlined />}>重置筛选</Button>
+              </div>
+            </Col>
+          </Row>
+        </Card>
+
+        {/* 配装结果列表区 */}
+        <Card title="配装结果" style={{ marginBottom: 16 }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+            <div>全部排列组合：<b>123,456</b> 条 | 筛选结果：<b>2</b> 条</div>
+            <Pagination size="small" total={2} pageSize={10} current={1} showSizeChanger={false} />
+          </div>
+          <Table
+            dataSource={resultData}
+            columns={resultColumns}
+            pagination={false}
+            scroll={{ x: true }}
+            rowKey="key"
+          />
+        </Card>
+
+        {/* 单个配装详情区 */}
+        <Card title="配装详情">
+          <div style={{ display: 'flex', gap: 24 }}>
+            <div>
+              <Avatar size={48} src={hero.avatar} />
+              <div style={{ marginTop: 8 }}>{hero.name}</div>
+            </div>
+            <Divider type="vertical" style={{ height: 80 }} />
+            <div>
+              <div>套装：<Tag color="blue">暴击套</Tag></div>
+              <div>攻击：2000，防御：1500，生命：20000，速度：200</div>
+              <div>暴击：100%，爆伤：250%，命中：30%，抵抗：20%</div>
+            </div>
+            <Divider type="vertical" style={{ height: 80 }} />
+            <div>
+              <Button type="primary">保存配置</Button>
+              <Button style={{ marginLeft: 8 }}>删除配置</Button>
+            </div>
+          </div>
+        </Card>
+      </Content>
+    </Layout>
   );
 } 
-
-export default OptimizerPage;