feat(frontend): 优化配装页面布局和功能

-调整顶部角色和选项区的布局，增加角色头像和神器信息
- 优化属性区、属性过滤区和指定套装区的样式，采用纵向布局
- 添加角色信息编辑弹窗，可编辑神器、阵型等信息
- 移除按钮区的固定宽度样式，使其自适应布局
- 调整配装结果列表和详情区的样式，优化间距和对齐

frontend/src/index.css

@@ -48,10 +48,6 @@ button {
 button:hover {
     border-color: #646cff;
 }
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
     :root {

frontend/src/pages/OptimizerPage.tsx

@@ -1,5 +1,20 @@
 import React from 'react';
-import {Avatar, Button, Card, Col, Divider, Input, Layout, Pagination, Row, Select, Table, Tag} from 'antd';
+import {
+    Avatar,
+    Button,
+    Card,
+    Col,
+    Divider,
+    Input,
+    InputNumber,
+    Layout,
+    Modal,
+    Pagination,
+    Row,
+    Select,
+    Table,
+    Tag
+} from 'antd';
 import {AppstoreOutlined, FilterOutlined, UserOutlined} from '@ant-design/icons';
 
 const {Content} = Layout;
@@ -53,49 +68,84 @@ const resultData = [
 ];
 
 export default function OptimizerPage() {
+    const [editVisible, setEditVisible] = React.useState(false);
+    const [editData, setEditData] = React.useState({
+        artifact: '',
+        artifactLevel: 0,
+        formation: '',
+        exclusive: '',
+        star: 5,
+    });
+
     return (
         <Layout style={{minHeight: '100vh'}}>
             <Content style={{padding: 16}}>
                 {/* 顶部角色和选项区 */}
-        <Card style={{ marginBottom: 16 }}>
+                <Card style={{marginBottom: 16, position: 'relative'}}>
-          <Row gutter={16}>
+                    <Row gutter={16} align="top">
-            {/* 角色头像与选择 */}
+                        {/* 角色头像与神器区 */}
-            <Col span={4} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                        <Col span={6} style={{display: 'flex', alignItems: 'flex-start'}}>
-              <Avatar size={64} src={hero.avatar} icon={<UserOutlined />} />
+                            <Avatar size={64} src={hero.avatar} icon={<UserOutlined/>} style={{marginRight: 16}}/>
-              <div style={{ marginTop: 8, fontWeight: 500 }}>{hero.name}</div>
+                            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
-              <Select style={{ width: '100%', marginTop: 8 }} defaultValue={hero.id}>
+                                <div style={{fontWeight: 500}}>{hero.name}</div>
-                {heroList.map(h => <Select.Option key={h.id} value={h.id}>{h.name}</Select.Option>)}
+                                <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
-              </Select>
+                                    <span>神器：</span>
+                                    <span style={{cursor: 'pointer', color: '#1677ff'}}
+                                          onClick={() => setEditVisible(true)}>
+                    {/* 假设有artifactUrl则显示图片，否则暂无 */}
+                                        {editData.artifact ? <img src={editData.artifact} alt="神器"
+                                                                  style={{width: 32, height: 32}}/> : '暂无'}
+                  </span>
+                                </div>
+                                <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+                                    <span>专属神器：</span>
+                                    <span style={{cursor: 'pointer', color: '#1677ff'}}
+                                          onClick={() => setEditVisible(true)}>
+                    {editData.exclusive ? editData.exclusive : '暂无'}
+                  </span>
+                                </div>
+                            </div>
                         </Col>
-            {/* 角色属性 */}
+                        {/* 属性区（纵向） */}
                         <Col span={6}>
                             <div style={{fontWeight: 500, marginBottom: 8}}>属性</div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
                                 {attributes.map(attr => (
-                  <div key={attr.label} style={{ minWidth: 60 }}>{attr.label}: <b>{attr.value}</b></div>
+                                    <div key={attr.label}>{attr.label}: <b>{attr.value}</b></div>
                                 ))}
                             </div>
                         </Col>
-            {/* 属性过滤 */}
+                        {/* 属性过滤区（纵向，最小最大值） */}
-            <Col span={7}>
+                        <Col span={6}>
                             <div style={{fontWeight: 500, marginBottom: 8}}>属性过滤</div>
-              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
                                 {filterOptions.map(opt => (
-                  <Input key={opt.value} addonBefore={opt.label} placeholder="最小值" style={{ width: 100 }} />
+                                    <div key={opt.value} style={{display: 'flex', alignItems: 'center', gap: 4}}>
+                                        <span style={{minWidth: 36}}>{opt.label}</span>
+                                        <InputNumber size="small" placeholder="最小值" style={{width: 70}}/>
+                                        <span>~</span>
+                                        <InputNumber size="small" placeholder="最大值" style={{width: 70}}/>
+                                    </div>
                                 ))}
                             </div>
                         </Col>
-            {/* 套装选择与操作 */}
+                        {/* 指定套装区（纵向，多选） */}
-            <Col span={7}>
+                        <Col span={6} style={{display: 'flex', flexDirection: 'column', justifyContent: 'flex-start'}}>
                             <div style={{fontWeight: 500, marginBottom: 8}}>指定套装</div>
-              <Select style={{ width: '100%', marginBottom: 8 }} defaultValue={setOptions[0].value}>
+                            <Select
-                {setOptions.map(opt => <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>)}
+                                mode="multiple"
+                                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 }}>
+                        </Col>
+                        {/* 按钮区，绝对定位到Card右下角 */}
+                        <div style={{position: 'absolute', right: 24, bottom: 16, display: 'flex', gap: 8}}>
                             <Button type="primary" icon={<AppstoreOutlined/>}>开始配装</Button>
                             <Button icon={<FilterOutlined/>}>重置筛选</Button>
                         </div>
-            </Col>
                     </Row>
                 </Card>
 
@@ -134,6 +184,59 @@ export default function OptimizerPage() {
                         </div>
                     </div>
                 </Card>
+
+                {/* 角色信息编辑弹窗 */}
+                <Modal
+                    title="角色信息编辑"
+                    open={editVisible}
+                    onCancel={() => setEditVisible(false)}
+                    onOk={() => setEditVisible(false)}
+                >
+                    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+                        <div>
+                            <span>神器：</span>
+                            <Input
+                                value={editData.artifact}
+                                onChange={e => setEditData({...editData, artifact: e.target.value})}
+                                placeholder="神器图片URL或名称"
+                            />
+                        </div>
+                        <div>
+                            <span>神器等级：</span>
+                            <InputNumber
+                                min={0}
+                                max={20}
+                                value={editData.artifactLevel}
+                                onChange={v => setEditData({...editData, artifactLevel: v || 0})}
+                            />
+                        </div>
+                        <div>
+                            <span>阵型：</span>
+                            <Input
+                                value={editData.formation}
+                                onChange={e => setEditData({...editData, formation: e.target.value})}
+                                placeholder="如：前排/后排"
+                            />
+                        </div>
+                        <div>
+                            <span>专属装备：</span>
+                            <Input
+                                value={editData.exclusive}
+                                onChange={e => setEditData({...editData, exclusive: e.target.value})}
+                                placeholder="如：+9速度"
+                            />
+                        </div>
+                        <div>
+                            <span>星数：</span>
+                            <InputNumber
+                                min={1}
+                                max={6}
+                                value={editData.star}
+                                onChange={v => setEditData({...editData, star: v || 1})}
+                            />
+                        </div>
+                    </div>
+                </Modal>
             </Content>
         </Layout>
     );