From f7afab9764bd3c156f1ebdf93cc3563c41c3982d Mon Sep 17 00:00:00 2001
From: Monine Melolaris <alpzmj9@icloud.com>
Date: Mon, 8 Apr 2024 22:59:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BD=95=E6=92=AD=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E5=8D=A1=E7=89=87=E9=87=8D=E5=8F=A0=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20(#851)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

删除原有样式，并替换组件为Card，以修复录播管理页卡片重叠问题。
---
 app/streamers/page.tsx | 74 +++++++++++++++++++++++-------------------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/app/streamers/page.tsx b/app/streamers/page.tsx
index a6af705..27d024e 100644
--- a/app/streamers/page.tsx
+++ b/app/streamers/page.tsx
@@ -4,7 +4,10 @@ import {
     Nav,
     Button,
     Tag,
-    Typography, Popconfirm, Notification
+    Typography,
+    Popconfirm, 
+    Notification,
+    Card
 } from '@douyinfe/semi-ui';
 import {
     IconHelpCircle,
@@ -140,39 +143,44 @@ export default function Home() {
                     }}
                     dataSource={data}
                     renderItem={item => (
-                        <List.Item style={{
-                            border: '1px solid var(--semi-color-border)',
-                            backgroundColor: 'var(--semi-color-bg-2)',
-                            borderRadius: '3px',
-                            paddingLeft: '20px',
-                            paddingRight: '20px',
-                            margin: '8px 2px',
-                            minWidth: 292,
-                            maxWidth: 310,
-                        }}>
-                            <div style={{ flexGrow: 1, maxWidth: 250 }}>
-                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                    <h3 style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>{item.remark}</h3>
-                                    {item.status}
+                        <List.Item>
+                            <Card
+                            shadows='hover'
+                            style={{
+                                maxWidth: 310,
+                                margin: '8px 2px',
+                                flexGrow: 1,
+                            }}
+                            bodyStyle={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between'
+                            }}>
+                                <div style={{ flexGrow: 1, maxWidth: 250 }}>
+                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                        <h3 style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>{item.remark}</h3>
+                                        {item.status}
+                                    </div>
+                                    <Text ellipsis={{ showTooltip: { opts: { style: { wordBreak: 'break-all' } } } }} type="tertiary">{item.url}</Text>
+                                    <div style={{ margin: '0', display: 'flex', justifyContent: 'flex-end' }}>
+                                        <ButtonGroup theme='borderless'>
+                                            <TemplateModal onOk={handleUpdate} entity={item}>
+                                                <Button theme='borderless' icon={<IconEdit2Stroked />}></Button>
+                                            </TemplateModal>
+                                            <span className="semi-button-group-line semi-button-group-line-borderless semi-button-group-line-primary"></span>
+                                            <Popconfirm
+                                                title="确定是否要删除？"
+                                                content="此操作将不可逆"
+                                                onConfirm={async () => await onConfirm(item.id)}
+                                                // onCancel={onCancel}
+                                            >
+                                                <Button theme='borderless' icon={<IconDeleteStroked />}></Button>
+                                            </Popconfirm>
+                                        </ButtonGroup>
+                                    </div>
                                 </div>
-                                <Text ellipsis={{ showTooltip: { opts: { style: { wordBreak: 'break-all' } } } }} type="tertiary">{item.url}</Text>
-                                <div style={{ margin: '10px 0', display: 'flex', justifyContent: 'flex-end' }}>
-                                    <ButtonGroup theme='borderless'>
-                                        <TemplateModal onOk={handleUpdate} entity={item}>
-                                            <Button theme='borderless' icon={<IconEdit2Stroked />}></Button>
-                                        </TemplateModal>
-                                        <span className="semi-button-group-line semi-button-group-line-borderless semi-button-group-line-primary"></span>
-                                        <Popconfirm
-                                            title="确定是否要删除？"
-                                            content="此操作将不可逆"
-                                            onConfirm={async () => await onConfirm(item.id)}
-                                            // onCancel={onCancel}
-                                        >
-                                            <Button theme='borderless' icon={<IconDeleteStroked />}></Button>
-                                        </Popconfirm>
-                                    </ButtonGroup>
-                                </div>
-                            </div>
+                            </Card>
+                            
                         </List.Item>
                     )}
                 />