From 8cd4cf8314648d40a89b092b2d382761a35e4aba Mon Sep 17 00:00:00 2001
From: TiantianHu <hutiantian@niii.com>
Date: Tue, 19 Nov 2024 12:55:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=90=E8=97=8F=E9=A6=96=E9=A1=B5=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E5=A4=9A=E4=BD=99=E7=9A=84=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=EF=BC=9B=E8=B0=83=E6=95=B4=E8=AF=A6=E6=83=85=E9=A1=B5=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E6=96=B9=E6=A1=88=EF=BC=8C=E9=80=82=E5=BA=94=E8=B4=A6?=
 =?UTF-8?q?=E5=8D=95=E8=AF=A6=E6=83=85=E5=9C=BA=E6=99=AF=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E8=A6=81=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 myapp/frontend/src/pages/ADUGTemplate.tsx | 83 +++++++++++++++++------
 myapp/templates/home.html                 |  2 +-
 2 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/myapp/frontend/src/pages/ADUGTemplate.tsx b/myapp/frontend/src/pages/ADUGTemplate.tsx
index 7a4077740..be3f5b9bf 100644
--- a/myapp/frontend/src/pages/ADUGTemplate.tsx
+++ b/myapp/frontend/src/pages/ADUGTemplate.tsx
@@ -1010,27 +1010,72 @@ export default function TaskListManager(props?: IAppMenuItem) {
                 destroyOnClose
                 onCancel={() => { setVisableDetail(false) }}>
                 <Spin spinning={loadingDetail}>
-                    <div className="pb32" style={{ minHeight: 300 }}>
-                        {
-                            dataDetail.map((item, index) => {
-                                return <Row className="mb16" key={`dataDetail_${index}`}>
-                                    <Col span={6}><div className="ta-r"><strong>{item.label}：</strong></div></Col>
-                                    <Col span={18}><pre style={{ whiteSpace: 'break-spaces' }} dangerouslySetInnerHTML={{
-                                        __html: (() => {
-                                            let content = item.value
-                                            if (Object.prototype.toString.call(item.value) === '[object Object]' || Object.prototype.toString.call(item.value) === '[object Array]') {
-                                                try {
-                                                    content = JSON.stringify(item.value)
-                                                } catch (error) { }
-                                            }
-                                            return content
-                                        })()
-                                    }}></pre></Col>
-                                </Row>
-                            })
-                        }
+                    <div className="pb8"
+                        style={{
+                            paddingBottom: '8px',
+                            minHeight: '400px', // 最小高度
+                            maxWidth: '80vw',  // 最大宽度
+                            margin: '0 auto',  // 水平居中
+                            overflowX: 'auto', // 横向滚动条
+                        }}
+                    >
+                    {dataDetail.map((item, index) => (
+                        <div
+                        key={`dataDetail_${index}`}
+                        style={{
+                            display: 'flex',
+                            gap: '1rem',
+                            marginBottom: '1rem'
+                        }}
+                        >
+                        {/* Label列 */}
+                        <div
+                            style={{
+                            display: 'flex',
+                            justifyContent: 'flex-end', // 第一列内容靠右对齐
+                            paddingRight: '1rem',
+                            minWidth:'80px'
+                            }}
+                        >
+                            <strong>{item.label}：</strong>
+                        </div>
+
+                        {/* Value列 */}
+                        <div
+                            style={{
+                            flex: '1',
+                            display: 'flex',
+                            justifyContent: 'flex-start', // 第二列内容靠左对齐
+                            }}
+                        >
+                            <pre
+                            style={{
+                                whiteSpace: 'pre-wrap',
+                                wordBreak: 'break-word',
+                                overflowX: 'auto',
+                                margin: 0,
+                            }}
+                            dangerouslySetInnerHTML={{
+                                __html: (() => {
+                                let content = item.value;
+                                if (
+                                    Object.prototype.toString.call(item.value) === '[object Object]' ||
+                                    Object.prototype.toString.call(item.value) === '[object Array]'
+                                ) {
+                                    try {
+                                    content = JSON.stringify(item.value, null, 2); // 格式化输出
+                                    } catch (error) {}
+                                }
+                                return content;
+                                })(),
+                            }}
+                            ></pre>
+                        </div>
+                        </div>
+                    ))}
                     </div>
                 </Spin>
+
             </Modal>
 
             <TitleHeader title={<>
diff --git a/myapp/templates/home.html b/myapp/templates/home.html
index 45134c5ca..7f05658da 100644
--- a/myapp/templates/home.html
+++ b/myapp/templates/home.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="di-home" style="position: absolute;width: 100%;height: 100%;left: 0;top: 0px;padding-top:15px;background-color: #fff;">
+<div class="di-home" style="position: absolute;width: 100%;height: 100%;left: 0;top: 0px;padding-top:15px;background-color: #fff;overflow: hidden;">
     <iframe src="/static/appbuilder/vison/index.html#/home" style="width:100%;height:100%;border: none;"></iframe>
 </div>
 <script>