From 31d7aea480dd6efd7e18645316d9262f53f7c0da Mon Sep 17 00:00:00 2001
From: Dawn1Ocean <1785590531@qq.com>
Date: Tue, 19 Mar 2024 00:14:13 +0800
Subject: [PATCH] beautify ui!

---
 .../DetailFramework/DetailFramework.tsx       | 87 +++++++++----------
 src/components/NoteCard/NoteCard.tsx          |  7 +-
 src/components/NoteList/NoteList.tsx          |  2 +-
 src/pages/TicketDetail/TicketDetail.tsx       |  4 +-
 src/pages/TicketDetail/TicketNote.ts          |  1 +
 src/pages/index/DutyInfo.tsx                  |  2 +-
 src/pages/index/index.tsx                     | 18 ++--
 src/pages/repair/repair.tsx                   | 11 ++-
 src/plain-text/TicketDetail.ts                | 15 +++-
 9 files changed, 79 insertions(+), 68 deletions(-)

diff --git a/src/components/DetailFramework/DetailFramework.tsx b/src/components/DetailFramework/DetailFramework.tsx
index dd1fb39..186bcda 100644
--- a/src/components/DetailFramework/DetailFramework.tsx
+++ b/src/components/DetailFramework/DetailFramework.tsx
@@ -103,56 +103,48 @@ export default class DetailFramework extends Component<
         <View></View>
       ),
       description: this.props.isInfoShow['description'] ? (
-        this.props.isInfoShow['info'] ? (
-          <View
-            className='at-row'
-            style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+        <View
+          style={{
+            paddingTop: 10,
+            paddingBottom: 10,
+            width: '94%',
+            marginLeft: '3%',
+          }}
+        >
+          <AtCard isFull title={pt.get().ticketDetail.descTitle}>
+            <View className='at-article__h3'>
+              {this.state.ticketInfo.description}
+            </View>
+          </AtCard>
+        </View>
+      ) : (
+        <View></View>
+      ),
+      info: this.props.isInfoShow['info'] ? (
+        <View
+          style={{
+            paddingTop: 10,
+            paddingBottom: 10,
+            width: '94%',
+            marginLeft: '3%',
+          }}
+        >
+          <AtCard
+            isFull
+            title={pt.get().ticketDetail.info.title}
+            extra={pt.get().ticketDetail.info.extra}
+            extraStyle={{ fontSize: '32rpx', marginRight: 20 }}
           >
-            <View
-              className='at-col'
-              style={{
-                marginLeft: 10,
-                paddingRight: 5,
-                marginTop: 10,
-                marginBottom: 10,
-                width: '50%',
-              }}
-            >
-              <AtCard title={pt.get().ticketDetail.descTitle}>
-                <View className='at-article__h3'>
-                  {this.state.ticketInfo.description}
-                </View>
-              </AtCard>
-            </View>
-            <View
-              className='at-col'
-              style={{
-                marginLeft: 5,
-                paddingRight: 10,
-                marginTop: 10,
-                marginBottom: 10,
-                width: '50%',
-              }}
-            >
-              <AtCard title={pt.get().ticketDetail.infoTitle}>
-                <View className='at-article__h3'>
-                  {this.state.ticketInfo.info.name}
-                </View>
-                <View className='at-article__h3'>
-                  {this.state.ticketInfo.info.phone}
-                </View>
-              </AtCard>
-            </View>
-          </View>
-        ) : (
-          <View style={{ marginTop: 10, marginBottom: 10 }}>
-            <AtCard title={pt.get().ticketDetail.descTitle}>
+            <View style={{ display: 'flex' }}>
               <View className='at-article__h3'>
-                {this.state.ticketInfo.description}
+                {this.state.ticketInfo.info.name}
               </View>
-            </AtCard>
-          </View>
-        )
+              <View style={{ marginLeft: 'auto' }} className='at-article__h3'>
+                {this.state.ticketInfo.info.phone}
+              </View>
+            </View>
+          </AtCard>
+        </View>
       ) : (
         <View></View>
       ),
@@ -189,6 +181,7 @@ export default class DetailFramework extends Component<
         {elements.device}
         {elements.createdTime}
         {elements.description}
+        {elements.info}
         {elements.current}
         {this.props.middleButton}
         {elements.notelist}
diff --git a/src/components/NoteCard/NoteCard.tsx b/src/components/NoteCard/NoteCard.tsx
index 773ccfb..9dadce0 100644
--- a/src/components/NoteCard/NoteCard.tsx
+++ b/src/components/NoteCard/NoteCard.tsx
@@ -36,13 +36,12 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
     }
 
     return (
-      <View>
-        <View className='at-article__h2'>{note.op}</View>
+      <View style={{ marginTop: 20, marginBottom: 20 }}>
+        <View className='at-article__p'>{note.op}</View>
         <View className='at-article__info'>
           {note.createdTime.format(timeFormat)}
         </View>
-        <View className='at-article__p'>{message}</View>
-        <AtDivider />
+        <View className='at-article__h3'>{message}</View>
       </View>
     );
   }
diff --git a/src/components/NoteList/NoteList.tsx b/src/components/NoteList/NoteList.tsx
index 488a6fe..28863ff 100644
--- a/src/components/NoteList/NoteList.tsx
+++ b/src/components/NoteList/NoteList.tsx
@@ -15,7 +15,7 @@ export default class NoteList extends Component<NoteListProps, {}> {
   render(): ReactNode {
     return (
       <View>
-        <AtDivider />
+        <AtDivider height={40} />
         {this.props.noteList.map((note, idx) => (
           <View key={idx}>
             <NoteCard note={note} />
diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx
index 260712f..0b7191f 100644
--- a/src/pages/TicketDetail/TicketDetail.tsx
+++ b/src/pages/TicketDetail/TicketDetail.tsx
@@ -269,10 +269,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
             <AtButton
               loading={this.state.isStatusLoading}
               disabled={this.state.isStatusDisable}
-              type='secondary'
+              type='primary'
               onClick={this.onChangeStatus.bind(this)}
             >
-              {pt.get().ticketDetail.addNote}
+              {pt.get().ticketDetail.status.button}
             </AtButton>
           </View>
           <View
diff --git a/src/pages/TicketDetail/TicketNote.ts b/src/pages/TicketDetail/TicketNote.ts
index 995f6c4..85dae8e 100644
--- a/src/pages/TicketDetail/TicketNote.ts
+++ b/src/pages/TicketDetail/TicketNote.ts
@@ -23,6 +23,7 @@ export class ShowElements {
   device: JSX.Element;
   createdTime: JSX.Element;
   description: JSX.Element;
+  info: JSX.Element;
   current: JSX.Element;
   notelist: JSX.Element;
 }
diff --git a/src/pages/index/DutyInfo.tsx b/src/pages/index/DutyInfo.tsx
index e80253d..d17814c 100644
--- a/src/pages/index/DutyInfo.tsx
+++ b/src/pages/index/DutyInfo.tsx
@@ -49,7 +49,7 @@ class Card extends Component {
           <View
             style={{
               marginLeft: 10,
-              fontSize: 30,
+              fontSize: '60rpx',
               fontWeight: 'bold',
             }}
           >
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 4b1a78d..639f405 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -105,15 +105,17 @@ export default class MainPage extends Component<{}, MainPageState> {
     return (
       <View>
         <TitleCard />
-        <View style={{ marginTop: 30 }}>
-          {mainPageCard(this.state.dutyInfoCard)}
-          {mainPageCard(this.state.tipsInfoCard)}
-          <ExpandItem
-            title={mainPage.expandTitle.stepInfo}
-            content={mainPageCard(this.state.stepInfoCard)}
-          />
+        <View style={{ width: '94%', marginLeft: '3%' }}>
+          <View style={{ marginTop: 30 }}>
+            {mainPageCard(this.state.dutyInfoCard)}
+            {mainPageCard(this.state.tipsInfoCard)}
+            <ExpandItem
+              title={mainPage.expandTitle.stepInfo}
+              content={mainPageCard(this.state.stepInfoCard)}
+            />
+          </View>
+          <PageFooter />
         </View>
-        <PageFooter />
       </View>
     );
   }
diff --git a/src/pages/repair/repair.tsx b/src/pages/repair/repair.tsx
index 23b17fd..b3b4697 100644
--- a/src/pages/repair/repair.tsx
+++ b/src/pages/repair/repair.tsx
@@ -207,9 +207,16 @@ export default class RepairPage extends Component<{}, RepairPageState> {
       </AtCard>
     ));
     return (
-      <View>
+      <View style={{ width: '94%', marginLeft: '3%' }}>
         <AtMessage />
-        {ticketsRenderer}
+        <View
+          style={{
+            marginTop: 10,
+            marginBottom: 20,
+          }}
+        >
+          {ticketsRenderer}
+        </View>
         <AtCard
           note={pt.get().repairPage.cardText.note}
           title={pt.get().repairPage.cardText.title}
diff --git a/src/plain-text/TicketDetail.ts b/src/plain-text/TicketDetail.ts
index bcecbfa..f38b14a 100644
--- a/src/plain-text/TicketDetail.ts
+++ b/src/plain-text/TicketDetail.ts
@@ -10,7 +10,10 @@ export interface TicketDetailText {
   statusModifyPrefix: string;
   statusModifyMessage: Map<StatusStr, string>;
   descTitle: string;
-  infoTitle: string;
+  info: {
+    title: string;
+    extra: string;
+  };
   tookAway: string;
   addToOreo: string;
   addNote: string;
@@ -54,7 +57,10 @@ export const ticketDetailZhCn: TicketDetailText = {
     ['7', '维修翻车已取回'],
   ]),
   descTitle: '问题描述',
-  infoTitle: '机主信息',
+  info: {
+    title: '机主姓名',
+    extra: '联系方式',
+  },
   tookAway: '我已取回',
   addToOreo: '加入 Oreo',
   addNote: '添加评论',
@@ -98,7 +104,10 @@ export const ticketDetailEnUs: TicketDetailText = {
     ['7', 'Retrieved (Failed)'],
   ]),
   descTitle: 'Description',
-  infoTitle: 'Contact',
+  info: {
+    title: 'Name',
+    extra: 'Contact',
+  },
   tookAway: 'Already retrieved',
   addToOreo: 'Add to Oreo',
   addNote: 'Comment',