!2382 看图王板件显示备注ui修改

src/Add-on/ShareView/components/BoardMessageWidget.tsx

@@ -31,8 +31,10 @@ const BoardMessageWidget = (() =>
                                     {
                                         e.stopPropagation();
                                     }}
-                                    style={{ pointerEvents: 'auto', cursor: 'default' }}
-                                >备注：<BoardRemarksWidget
+                                    style={{ pointerEvents: 'auto', cursor: 'default', display: 'flex', alignItems: 'center' }}
+                                >
+                                    <span>备注：</span>
+                                    <BoardRemarksWidget
                                         name={shareViewStore.SelectedBoard.Name}
                                         remarks={shareViewStore.SelectedBoard.BoardProcessOption.remarks}
                                         isPhone

src/Add-on/ShareView/components/BoardRemarksWidget.tsx

@@ -12,21 +12,6 @@ const BoardRemarksWidget: FC<IProps> = (props) =>
 {
     const [open, setOpen] = useState(false);
 
-    function remarksToString(): string
-    {
-        let str = '{';
-        props.remarks.forEach((item, i) =>
-        {
-            str += `"${item[0]}": "${item[1]}"`;
-            if (i != props.remarks.length - 1)
-            {
-                str += ', ';
-            }
-        });
-        str += '}';
-        return str;
-    };
-
     return (
         <>
             {Array.isArray(props.remarks) && props.remarks.length ? (
@@ -34,23 +19,21 @@ const BoardRemarksWidget: FC<IProps> = (props) =>
                     style={{ cursor: 'pointer' }}
                     onClick={(e) =>
                     {
-                        if (props.isPhone)
-                        {
-                            e.stopPropagation();
-                        }
+                        e.stopPropagation();
                     }}
                 >
-                    <span style={{ wordBreak: "break-all" }}
+                    <span style={{
+                        wordBreak: "break-all", display: 'inline-flex', width: 24, height: 24,
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    }}
                         onClick={(e) =>
                         {
-                            if (props.isPhone && props.remarks.length)
-                            {
-                                setOpen(true);
-                                e.stopPropagation();
-                            }
+                            setOpen(true);
+                            e.stopPropagation();
                         }}
                     >
-                        {props.isPhone ? <Icon icon='comment' color='#1890ff' /> : remarksToString()}
+                        <Icon icon='comment' color='#1890ff' />
                     </span>
                     <Dialog
                         isOpen={open} onClose={() =>
@@ -58,10 +41,28 @@ const BoardRemarksWidget: FC<IProps> = (props) =>
                             setOpen(false);
                         }}
                         title={`${props.name || "板件"} 备注`}
-                        style={{ width: window.innerWidth <= 768 ? '80vw' : '600px', background: '#fff', paddingBottom: 16 }}
+                        style={{ width: window.innerWidth <= 768 ? '90vw' : '600px', background: '#fff', paddingBottom: 16 }}
                     >
-                        <div style={{ padding: 16, paddingBottom: 0, background: '#fff', wordBreak: 'break-all', fontSize: 14 }}>
-                            {remarksToString()}
+                        <div style={{
+                            padding: 16, paddingBottom: 2, background: '#fff', fontSize: 14,
+                            maxHeight: '80vh', overflow: 'auto'
+                        }}>
+                            <table className='sp-table'>
+                                <thead>
+                                    <tr>
+                                        <th style={{ width: '30%' }}>备注名</th>
+                                        <th>备注信息</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {props.remarks.map((remark) => (
+                                        <tr>
+                                            <td>{remark[0]}</td>
+                                            <td>{remark[1]}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
                         </div>
                     </Dialog>
                 </span>

src/Add-on/ShareView/components/MaterialBottomSheet.tsx

@@ -202,11 +202,11 @@ const MaterialBottomSheet: React.FC<IProps> = forwardRef((props, ref) =>
                                             <tr>
                                                 <th style={{ width: 44 }}></th>
                                                 <th>名称</th>
-                                                <th className="st-td-number" style={{ width: isPhone ? 'auto' : 120 }}>高度</th>
-                                                <th className="st-td-number" style={{ width: isPhone ? 'auto' : 120 }}>宽度</th>
+                                                <th className="st-td-number" >高度</th>
+                                                <th className="st-td-number" >宽度</th>
                                                 <th style={{ width: 50 }} className="st-td-number">厚度</th>
-                                                <th style={{ width: isPhone ? 'auto' : 120 }}>颜色</th>
-                                                <th style={{ width: isPhone ? 44 : 'auto' }}>备注</th>
+                                                <th>颜色</th>
+                                                <th style={{ width: 44 }}>备注</th>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -238,7 +238,7 @@ const MaterialBottomSheet: React.FC<IProps> = forwardRef((props, ref) =>
                                                         <td className="st-td-number">{size.width}</td>
                                                         <td className="st-td-number">{size.thickness}</td>
                                                         <td>{item.BoardProcessOption.color}</td>
-                                                        <td style={{ textAlign: isPhone ? "center" : 'left' }}>
+                                                        <td style={{ textAlign: "center", padding: 0 }}>
                                                             <BoardRemarksWidget
                                                                 remarks={item.BoardProcessOption.remarks}
                                                                 name={item.Name}