From 69c3546ac0aaf6432bba1490aa4f46de9db602e6 Mon Sep 17 00:00:00 2001 From: hu xiaotong <416314413@163.com> Date: Fri, 4 Jul 2025 15:20:14 +0800 Subject: [PATCH] =?UTF-8?q?feat(database):=20=E5=AE=9E=E7=8E=B0=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=BA=93=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=AF=BC=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增数据库相关 API 和服务 - 实现数据导出功能，支持导出到 JSON 文件 - 优化数据导入流程，增加数据校验 - 新增数据库页面，展示解析数据和统计信息 - 更新捕获页面，支持导入数据到数据库 --- frontend/src/pages/CapturePage.tsx | 223 +++++++++++++-------------- frontend/src/pages/DatabasePage.tsx | 154 +++++++++--------- frontend/src/pages/OptimizerPage.tsx | 144 ++++++++++++++++- 3 files changed, 318 insertions(+), 203 deletions(-) diff --git a/frontend/src/pages/CapturePage.tsx b/frontend/src/pages/CapturePage.tsx index 4139140..086fd48 100644 --- a/frontend/src/pages/CapturePage.tsx +++ b/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,132 +355,115 @@ function CapturePage() { ]; return ( - -
-
-

装备数据导出工具

-
- -
-
-
+ + +
+ +
+ + +
- - -
- -
- - -
- -
-
- - -
- - - {uploadedFileName && ( - - {uploadedFileName} - - )} +
+ + + + {uploadedFileName && ( + + {uploadedFileName} + + )} +
+ + + +
+

状态: {isCapturing ? '正在抓包...' : '准备就绪'}

+ {/*

捕获数据: {capturedData.length} 条

*/} +

英雄数目: {Array.isArray(parsedData?.heroes) ? parsedData.heroes.length : 0} 个

+ {parsedData && ( +

解析装备: {Array.isArray(parsedData?.items) ? parsedData.items.length : 0} 件

+ )} +
+ +
+ + + + + {Array.isArray(parsedData?.items) && parsedData.items.length > 0 ? ( + + + + ) : ( + +
+

暂无数据

+

+ {parsedData ? '数据为空，请检查数据源或上传文件' : '请开始抓包或上传JSON文件'} +

- - -
-

状态: {isCapturing ? '正在抓包...' : '准备就绪'}

- {/*

捕获数据: {capturedData.length} 条

*/} -

英雄数目: {Array.isArray(parsedData?.heroes) ? parsedData.heroes.length : 0} 个

- {parsedData && ( -

解析装备: {Array.isArray(parsedData?.items) ? parsedData.items.length : 0} 件

- )} -
- - - - - - - {Array.isArray(parsedData?.items) && parsedData.items.length > 0 ? ( - -
- - ) : ( - -
-

暂无数据

-

- {parsedData ? '数据为空，请检查数据源或上传文件' : '请开始抓包或上传JSON文件'} -

-
- - )} - - - + )} + + ); } diff --git a/frontend/src/pages/DatabasePage.tsx b/frontend/src/pages/DatabasePage.tsx index ce82a92..6db373d 100644 --- a/frontend/src/pages/DatabasePage.tsx +++ b/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,82 +123,84 @@ const DatabasePage: React.FC = () => { ]; return ( -
- {/* 统计卡片 */} - -
- - } - suffix="已连接" - /> - - - - - } - /> - - - - - } - /> - - - + + + {/* 统计卡片 */} + + + + } + suffix="已连接" + /> + + + + + } + /> + + + + + } + /> + + + - {/* 操作栏 */} - - - - - 显示最新一次抓包解析的数据 - - - + {/* 操作栏 */} + + + + + 显示最新一次抓包解析的数据 + + + - {/* 装备表格 */} - - {latestData?.items && latestData.items.length > 0 ? ( -
- `第 ${range[0]}-${range[1]} 条，共 ${total} 条`, - }} - scroll={{ x: 800 }} - /> - ) : ( -
-

暂无解析数据

-

- 请先进行抓包操作，解析后的数据会自动保存到数据库 -

-
- )} - - + {/* 装备表格 */} + + {latestData?.items && latestData.items.length > 0 ? ( +
+ `第 ${range[0]}-${range[1]} 条，共 ${total} 条`, + }} + scroll={{ x: 800 }} + /> + ) : ( +
+

暂无解析数据

+

+ 请先进行抓包操作，解析后的数据会自动保存到数据库 +

+
+ )} + + + ); }; diff --git a/frontend/src/pages/OptimizerPage.tsx b/frontend/src/pages/OptimizerPage.tsx index 4440432..408f7a5 100644 --- a/frontend/src/pages/OptimizerPage.tsx +++ b/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) => {v} }, + { 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 ( -
-

配装优化

-

请选择一个角色后点击开始配装。后续将在此页面实现配装计算与展示。

-
- ); -} + + + {/* 顶部选项区 */} + + + {/* 角色头像与选择 */} + + } /> +
{hero.name}
+ + + {/* 角色属性 */} + +
属性
+
+ {attributes.map(attr => ( +
{attr.label}: {attr.value}
+ ))} +
+ + {/* 属性过滤 */} + +
属性过滤
+
+ {filterOptions.map(opt => ( + + ))} +
+ + {/* 套装选择与操作 */} + +
指定套装
+ +
+ + +
+ + + -export default OptimizerPage; \ No newline at end of file + {/* 配装结果列表区 */} + +
+
全部排列组合：123,456 条 | 筛选结果：2 条
+ +
+
+ + + {/* 单个配装详情区 */} + +
+
+ +
{hero.name}
+
+ +
+
套装：暴击套
+
攻击：2000，防御：1500，生命：20000，速度：200
+
暴击：100%，爆伤：250%，命中：30%，抵抗：20%
+
+ +
+ + +
+
+ + + + ); +} \ No newline at end of file