From ede298a1425d0bcd972764aa0300de9049aa44d0 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 14 Jan 2022 17:57:51 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=B7=A5=E4=BD=9C=E6=B1=87=E6=8A=A5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/Api/ReportController.php |   2 +-
 .../assets/js/components/DrawerOverlay.vue    |  37 ++--
 resources/assets/js/components/TEditor.vue    |  17 +-
 resources/assets/js/pages/manage.vue          |  15 +-
 .../js/pages/manage/components/Report.vue     |  29 +--
 .../pages/manage/components/ReportDetail.vue  |  71 +++----
 .../js/pages/manage/components/ReportEdit.vue |  49 +++--
 resources/assets/sass/components/report.scss  | 201 ++++++++++++------
 resources/assets/sass/pages/page-manage.scss  |   5 +
 9 files changed, 263 insertions(+), 163 deletions(-)

diff --git a/app/Http/Controllers/Api/ReportController.php b/app/Http/Controllers/Api/ReportController.php
index 472defcb..46fca857 100755
--- a/app/Http/Controllers/Api/ReportController.php
+++ b/app/Http/Controllers/Api/ReportController.php
@@ -189,7 +189,7 @@ class ReportController extends AbstractController
             }
 
         } );
-        return Base::retSuccess('success');
+        return Base::retSuccess('保存成功');
     }
 
     /**
diff --git a/resources/assets/js/components/DrawerOverlay.vue b/resources/assets/js/components/DrawerOverlay.vue
index f7281843..c393e798 100644
--- a/resources/assets/js/components/DrawerOverlay.vue
+++ b/resources/assets/js/components/DrawerOverlay.vue
@@ -1,25 +1,34 @@
 <template>
-    <div :class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']">
-        <div class="overlay-mask" @click="mask"></div>
-        <div class="overlay-body" :style="bodyStyle">
-            <div class="overlay-close">
-                <a href="javascript:void(0)" @click.stop="close">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
-                        <path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
-                    </svg>
-                </a>
+    <transition name="transition-drop">
+        <div
+            :data-transfer="transfer"
+            :transfer="transfer"
+            v-transfer-dom
+            :class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']">
+            <div class="overlay-mask" @click="mask"></div>
+            <div class="overlay-body" :style="bodyStyle">
+                <div class="overlay-close">
+                    <a href="javascript:void(0)" @click.stop="close">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
+                            <path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
+                        </svg>
+                    </a>
+                </div>
+                <ResizeLine v-if="resize" class="overlay-resize" v-model="width" :max-width="0"/>
+                <div class="overlay-content"><slot/></div>
             </div>
-            <ResizeLine v-if="resize" class="overlay-resize" v-model="width" :max-width="0"/>
-            <div class="overlay-content"><slot/></div>
         </div>
-    </div>
+    </transition>
 </template>
 
 <script>
     import ResizeLine from "./ResizeLine";
+    import TransferDom from '../directives/transfer-dom';
+
     export default {
         name: 'DrawerOverlay',
         components: {ResizeLine},
+        directives: { TransferDom },
         props: {
             value: {
                 type: Boolean,
@@ -47,6 +56,10 @@
                 type: Boolean,
                 default: true
             },
+            transfer: {
+                type: Boolean,
+                default: false
+            },
         },
 
         data() {
diff --git a/resources/assets/js/components/TEditor.vue b/resources/assets/js/components/TEditor.vue
index 0ed48b25..a427a6ef 100755
--- a/resources/assets/js/components/TEditor.vue
+++ b/resources/assets/js/components/TEditor.vue
@@ -76,6 +76,10 @@
             height: {
                 default: 360,
             },
+            minHeight: {
+                type: Number,
+                default: 0,
+            },
             htmlClass: {
                 default: '',
                 type: String
@@ -115,6 +119,10 @@
                 type: Boolean,
                 default: false
             },
+            autoSize: {
+                type: Boolean,
+                default: false
+            },
             placeholder: {
                 type: String,
                 default: ''
@@ -212,7 +220,7 @@
             },
 
             option(isFull) {
-                return {
+                let optionInfo = {
                     inline: isFull ? false : this.inline,
                     selector: (isFull ? '#T_' : '#') + this.id,
                     base_url: $A.originUrl('js/tinymce'),
@@ -374,6 +382,13 @@
                         }
                     },
                 };
+                if (this.autoSize) {
+                    optionInfo.plugins.push('autoresize')
+                }
+                if (this.minHeight > 0) {
+                    optionInfo.min_height = this.minHeight
+                }
+                return optionInfo;
             },
 
             closeFull() {
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index a54be022..0f09c253 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -23,7 +23,7 @@
                         :divided="!!item.divided"
                         :name="item.path">
                         {{$L(item.name)}}
-                        <Badge v-if="item.path === 'workReport'" :count="reportUnreadNumber"/>
+                        <Badge v-if="item.path === 'workReport'" class="manage-menu-report-badge" :count="reportUnreadNumber"/>
                     </DropdownItem>
                     <Dropdown placement="right-start" @on-click="setLanguage">
                         <DropdownItem divided>
@@ -167,7 +167,7 @@
         <DrawerOverlay
             v-model="workReportShow"
             placement="right"
-            :size="900">
+            :size="1100">
             <Report v-if="workReportShow" @read="reportUnread" />
         </DrawerOverlay>
 
@@ -263,6 +263,7 @@ export default {
             natificationHidden: false,
             natificationReady: false,
             notificationClass: null,
+
             reportUnreadNumber: 0,
         }
     },
@@ -278,6 +279,7 @@ export default {
         //
         this.notificationInit();
         this.onVisibilityChange();
+        this.reportUnread();    // 工作汇报未读标记
         //
         this.addTaskSubscribe = Store.subscribe('addTask', this.onAddTask);
         this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', this.addDialogMsg);
@@ -288,9 +290,6 @@ export default {
         if (this.$Electron) {
             this.$Electron.ipcRenderer.send('setDockBadge', 0);
         }
-
-        // 工作汇报未读标记
-        this.reportUnread();
     },
 
     beforeDestroy() {
@@ -712,11 +711,9 @@ export default {
             this.$store.dispatch("call", {
                 url: 'report/unread',
                 method: 'get',
-            }).then(({data, msg}) => {
-                // data 结果数据
+            }).then(({data}) => {
                 this.reportUnreadNumber = data.total ? data.total : 0;
-                // msg 结果描述
-            });
+            }).catch(() => {});
         }
     }
 }
diff --git a/resources/assets/js/pages/manage/components/Report.vue b/resources/assets/js/pages/manage/components/Report.vue
index b3e12e92..e4a69c0f 100644
--- a/resources/assets/js/pages/manage/components/Report.vue
+++ b/resources/assets/js/pages/manage/components/Report.vue
@@ -1,19 +1,23 @@
 <template>
     <div class="report">
         <Tabs v-model="reportTabs">
-            <TabPane label="填写" name="edit" icon="md-create">
-                <ReportEdit :id="reportId" @saveSuccess="saveSuccess">填写</ReportEdit>
+            <TabPane :label="$L('填写汇报')" name="edit">
+                <ReportEdit :id="reportId" @saveSuccess="saveSuccess"></ReportEdit>
             </TabPane>
-            <TabPane label="我的汇报" name="my" icon="ios-paper-plane-outline">
-                <ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport">我的汇报</ReportMy>
+            <TabPane :label="$L('我的汇报')" name="my">
+                <ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport"></ReportMy>
             </TabPane>
-            <TabPane label="收到的汇报" name="receive" icon="ios-paper-outline">
-                <ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail">收到的汇报</ReportReceive>
+            <TabPane :label="$L('收到的汇报')" name="receive">
+                <ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail"></ReportReceive>
             </TabPane>
         </Tabs>
-        <Drawer v-model="showDetailDrawer"  width="900px"  :closable="false">
-            <ReportDetail :data="detailData" @closeDrawer="closeDrawer"/>
-        </Drawer>
+        <DrawerOverlay
+            v-model="showDetailDrawer"
+            placement="right"
+            :size="950"
+            transfer>
+            <ReportDetail :data="detailData"/>
+        </DrawerOverlay>
     </div>
 </template>
 
@@ -22,11 +26,13 @@ import ReportEdit from "./ReportEdit"
 import ReportMy from "./ReportMy"
 import ReportReceive from "./ReportReceive"
 import ReportDetail from "./ReportDetail"
+import DrawerOverlay from "../../../components/DrawerOverlay";
 
 export default {
     name: "Report",
     components: {
-        ReportEdit, ReportMy, ReportReceive,ReportDetail
+        DrawerOverlay,
+        ReportEdit, ReportMy, ReportReceive, ReportDetail
     },
     data() {
         return {
@@ -37,9 +43,6 @@ export default {
         }
     },
     methods: {
-        closeDrawer(){
-            this.showDetailDrawer = false
-        },
         showDetail(row) {
             this.showDetailDrawer = true;
             this.detailData = row;
diff --git a/resources/assets/js/pages/manage/components/ReportDetail.vue b/resources/assets/js/pages/manage/components/ReportDetail.vue
index 3ac28cb5..96a3acb5 100644
--- a/resources/assets/js/pages/manage/components/ReportDetail.vue
+++ b/resources/assets/js/pages/manage/components/ReportDetail.vue
@@ -1,46 +1,46 @@
 <template>
 
     <div class="report-detail">
-
-        <p class="report-title"><Icon type="ios-arrow-back" class="report-title-icon" @click="closeDrawer"/>  {{ data.title }}</p>
-        <Divider />
-        <div class="report-profile">
-            <Row>
+        <div class="report-title">{{ data.title }}</div>
+        <div class="report-detail-context">
+            <div class="report-profile">
+                <Row>
+                    <Col span="2">
+                        <div class="report-submitter"><p>{{ $L('汇报人') }} </p></div>
+                    </Col>
+                    <Col span="6">
+                        <div class="report-submitter">
+                            <UserAvatar :userid="data.userid" :size="28"/>
+                        </div>
+                    </Col>
+                    <Col span="2">
+                        <div class="report-submitter"> <p>{{ $L('提交时间') }}</p></div>
+                    </Col>
+                    <Col span="6">
+                        <div class="report-submitter">
+                            <div>{{ data.created_at }}</div>
+                        </div>
+                    </Col>
+                    <Col span="2">
+                        <div class="report-submitter"><p>{{ $L('汇报对象') }}</p></div>
+                    </Col>
+                    <Col span="6">
+                        <div class="report-submitter">
+                            <UserAvatar v-for="item in data.receives" :key="item" :userid="item" :size="28"/>
+                        </div>
+                    </Col>
+                </Row>
+            </div>
+            <Row class="report-main">
                 <Col span="2">
-                    <div class="report-submitter"><p>{{ $L('汇报人') }} </p></div>
+                    <div class="report-submitter"><p>{{ $L('汇报内容') }}</p></div>
                 </Col>
-                <Col span="6">
-                    <div class="report-submitter">
-                        <UserAvatar :userid="data.userid" :size="28"/>
-                    </div>
-                </Col>
-                <Col span="2">
-                    <div class="report-submitter"> <p>{{ $L('提交时间') }}</p></div>
-                </Col>
-                <Col span="6">
-                    <div class="report-submitter">
-                        <div>{{ data.created_at }}</div>
-                    </div>
-                </Col>
-                <Col span="2">
-                    <div class="report-submitter"><p>{{ $L('汇报对象') }}</p></div>
-                </Col>
-                <Col span="6">
-                    <div class="report-submitter">
-                        <UserAvatar v-for="item in data.receives" :key="item" :userid="item" :size="28"/>
+                <Col span="22">
+                    <div class="report-content" v-html="data.content">
                     </div>
                 </Col>
             </Row>
         </div>
-        <Row class="report-main">
-            <Col span="2">
-                <div class="report-submitter"><p>{{ $L('汇报内容') }}</p></div>
-            </Col>
-            <Col span="22">
-                <div class="report-content" v-html="data.content">
-                </div>
-            </Col>
-        </Row>
 
     </div>
 </template>
@@ -75,9 +75,6 @@ export default {
                 // msg 错误原因
             });
         },
-        closeDrawer(){
-            this.$emit('closeDrawer')
-        },
     }
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/ReportEdit.vue b/resources/assets/js/pages/manage/components/ReportEdit.vue
index 94c125d8..11204402 100644
--- a/resources/assets/js/pages/manage/components/ReportEdit.vue
+++ b/resources/assets/js/pages/manage/components/ReportEdit.vue
@@ -2,13 +2,11 @@
     <Form class="report-box" label-position="top" @submit.native.prevent>
         <Row class="report-row report-row-header" >
             <Col span="2"><p class="report-titles">{{ $L("汇报类型") }}</p></Col>
-            <Col span="6">
+            <Col span="12">
                 <RadioGroup type="button" button-style="solid" v-model="reportData.type" @on-change="typeChange" class="report-radiogroup">
                     <Radio label="weekly">{{ $L("周报") }}</Radio>
                     <Radio label="daily">{{ $L("日报") }}</Radio>
                 </RadioGroup>
-            </Col>
-            <Col span="6">
                 <ButtonGroup class="report-buttongroup">
                     <Tooltip class="report-poptip" trigger="hover"  :content="prevCycleText" placement="bottom">
                         <Button  type="primary" @click="prevCycle">
@@ -16,7 +14,7 @@
                         </Button>
                     </Tooltip>
                     <div class="report-buttongroup-shu"></div>
-                    <Tooltip class="report-poptip" trigger="hover"  :content="nextCycleText" placement="bottom">
+                    <Tooltip class="report-poptip" trigger="hover" :disabled="reportData.offset >= 0" :content="nextCycleText" placement="bottom">
                         <Button  type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">
                             <Icon type="ios-arrow-forward" />
                         </Button>
@@ -24,37 +22,38 @@
                 </ButtonGroup>
             </Col>
         </Row>
-        <Row  class="report-row report-row-header">
+        <Row class="report-row report-row-header">
             <Col span="2"><p class="report-titles">{{ $L("汇报名称") }}</p></Col>
             <Col span="22">
                 <Input v-model="reportData.title" disabled placeholder=""></Input>
             </Col>
         </Row>
-        <Row  class="report-row report-row-header">
-            <Col  span="2"><p class="report-titles">{{ $L("汇报对象") }}</p></Col>
-            <Col  span="16">
-                <UserInput
-                    v-if="userInputShow"
-                    v-model="reportData.receive"
-                    :placeholder="$L('选择接收人')" />
-            </Col>
-            <Col  span="6"><a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter"><Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}</a></Col>
-        </Row>
-        <Row  class="report-row report-row-content">
-            <Col  span="2"><p class="report-titles">{{ $L("汇报内容") }}</p></Col>
+        <Row class="report-row report-row-header">
+            <Col span="2"><p class="report-titles">{{ $L("汇报对象") }}</p></Col>
             <Col span="22">
-                <FormItem>
-                    <TEditor v-model="reportData.content" height="550px"/>
+                <div class="report-users">
+                    <UserInput
+                        v-if="userInputShow"
+                        v-model="reportData.receive"
+                        :disabledChoice="[userId]"
+                        :placeholder="$L('选择接收人')" />
+                    <a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter"><Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}</a>
+                </div>
+            </Col>
+        </Row>
+        <Row class="report-row report-row-content">
+            <Col span="2"><p class="report-titles">{{ $L("汇报内容") }}</p></Col>
+            <Col span="22">
+                <FormItem class="report-row-content-editor">
+                    <TEditor v-model="reportData.content" height="100%"/>
                 </FormItem>
             </Col>
         </Row>
-        <Row  class="report-row report-row-foot">
-            <Col  span="2"></Col>
+        <Row class="report-row report-row-foot">
+            <Col span="2"></Col>
             <Col span="4">
                 <FormItem>
                     <Button type="primary" @click="handleSubmit" class="report-bottom">提交</Button>
-                    <!--            <Button type="primary" @click="prevCycle">{{ prevCycleText }}</Button>-->
-                    <!--            <Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">{{ nextCycleText }}</Button>-->
                 </FormItem>
             </Col>
         </Row>
@@ -63,6 +62,7 @@
 
 <script>
 import UserInput from "../../../components/UserInput"
+import {mapState} from "vuex";
 
 const TEditor = () => import('../../../components/TEditor');
 export default {
@@ -96,6 +96,9 @@ export default {
             if (this.id > 0) this.getDetail(val);
         },
     },
+    computed: {
+        ...mapState(["userId"])
+    },
     mounted() {
         this.getTemplate();
     },
diff --git a/resources/assets/sass/components/report.scss b/resources/assets/sass/components/report.scss
index 7566240b..00231c35 100644
--- a/resources/assets/sass/components/report.scss
+++ b/resources/assets/sass/components/report.scss
@@ -1,6 +1,7 @@
 .report {
     height: 100%;
     padding: 10px 20px;
+
     .report-list-wrap {
         width: 100%;
         height: 100%;
@@ -9,14 +10,17 @@
         padding-top: 53px;
         flex-direction: column;
         position: absolute;
-        .report-row-header,.report-row-foot{
+
+        .report-row-header, .report-row-foot {
             flex: 0 0 auto;
         }
-        .report-row-content{
-            flex:1 1 auto;
+
+        .report-row-content {
+            flex: 1 1 auto;
             overflow-y: auto;
-            .ivu-table{
-                .ivu-table-body{
+
+            .ivu-table {
+                .ivu-table-body {
                     height: 100%;
                     overflow-y: auto;
                     padding-bottom: 50px;
@@ -29,21 +33,25 @@
         text-align: center;
         margin-top: 15px;
     }
-    .ivu-tabs{
+
+    .ivu-tabs {
         height: 100%;
         position: relative;
-        .ivu-tabs-bar{
+
+        .ivu-tabs-bar {
             position: relative;
             z-index: 2;
             background: #fff;
         }
-        .ivu-tabs-content{
+
+        .ivu-tabs-content {
             height: 100%;
             width: 100%;
             margin-top: -53px;
             padding-top: 53px;
         }
-        .ivu-tabs-tabpane{
+
+        .ivu-tabs-tabpane {
 
         }
     }
@@ -54,12 +62,12 @@
         font-size: 16px;
         font-weight: bold;
         margin-bottom: 12px;
-        padding-top: 20px;
-        .report-title-icon{
-            font-size: 22px;
-            cursor: pointer;
-            margin-right: 20px;
-        }
+        padding: 20px 24px;
+        border-bottom: 1px solid #eeeeee;
+    }
+
+    .report-detail-context {
+        padding: 12px 24px;
     }
 
     .report-profile {
@@ -71,119 +79,170 @@
         flex-wrap: wrap;
         height: 28px;
         line-height: 28px;
-        p{
+
+        p {
             display: block;
             width: 100%;
             text-align: justify;
             padding-right: 12px;
-            &:after{
+
+            &:after {
                 content: '';
                 display: inline-block;
                 width: 100%;
             }
         }
+
         & > div {
             margin-right: 8px;
         }
     }
 
-    .ivu-col{
+    .ivu-col {
         margin-bottom: 12px;
     }
 
     .report-content {
         margin-top: 12px;
         width: 100%;
-        h2{
+
+        h2 {
             margin-bottom: 10px;
         }
-        ol{
+
+        ol {
             margin-bottom: 20px;
             padding-left: 18px;
-            li{
+
+            li {
                 font-size: 14px;
                 line-height: 24px;
             }
         }
     }
 }
-.report-box{
+
+.report-box {
     display: flex;
     flex-direction: column;
     height: 100%;
-    .report-row-header,.report-row-foot{
+
+    .report-row-header, .report-row-foot {
         flex: 0 0 auto;
     }
-    .report-row-content{
-        flex:1 1 auto;
-        overflow-y:auto;
+
+    .report-row-content {
+        flex: 1 1 auto;
+        overflow-y: auto;
+
+        .report-row-content-editor {
+            height: 100%;
+
+            .ivu-form-item-content {
+                height: 100%;
+                display: flex;
+                .teditor-wrapper {
+                    flex: 1;
+                    display: flex;
+                }
+            }
+        }
     }
-    .report-row-foot{
+
+    .report-row-foot {
         margin-bottom: 0;
     }
 }
-.report-row{
+
+.report-row {
     margin-bottom: 20px;
-    .report-row-a{
+
+    .report-row-a {
         float: right;
         line-height: 32px;
-        .report-row-a-icon{
+
+        .report-row-a-icon {
             transform: rotate(-90deg);
             font-size: 16px;
             margin-right: 2px;
         }
     }
-    .report-bottom{
-        width: 120px;
+
+    .report-bottom {
+        height: 36px;
+        line-height: 34px;
+        min-width: 110px;
     }
-    .report-bottom-save{
-        width: 120px;
-        background: #F4F5F7 ;
-        color: #515A6E;
-        border-color:  #F4F5F7 ;
+
+    .ivu-input[disabled] {
+        color: #666666;
     }
 }
-.report-titles{
+
+.report-titles {
     line-height: 32px;
 }
-.report-radiogroup{
+
+.report-users {
+    display: flex;
+    align-items: center;
+
+    .common-user {
+        flex: 1;
+        margin-right: 12px;
+    }
+
+    .report-row-a {
+        flex-shrink: 0;
+    }
+}
+
+.report-radiogroup {
     background: #F4F5F7 !important;
     padding: 2px !important;
-    border-radius: 4px!important;
-    .ivu-radio-wrapper{
+    border-radius: 4px !important;
+
+    .ivu-radio-wrapper {
         padding: 0 30px !important;
         background: #F4F5F7 !important;
         color: #515A6E !important;
         box-shadow: none !important;
-        border: none!important;
-        &:before{
-            width: 0!important;
+        border: none !important;
+
+        &:before {
+            width: 0 !important;
         }
-        &:after{
-            width: 0!important;
+
+        &:after {
+            width: 0 !important;
         }
     }
-    .ivu-radio-focus{
+
+    .ivu-radio-focus {
         box-shadow: none !important;
-        border: none!important;
-        &:after{
-            background: none!important;
+        border: none !important;
+
+        &:after {
+            background: none !important;
         }
     }
-    .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled){
+
+    .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
         background: #fff !important;
         color: #8BCF70 !important;
         box-shadow: none !important;
-        border: none!important;
-        border-radius: 4px!important;
+        border: none !important;
+        border-radius: 4px !important;
     }
 
 }
-.report-buttongroup{
-    margin-top: 2px;
-    background: #F4F5F7!important;
+
+.report-buttongroup {
+    margin-left: 20px;
+    background: #F4F5F7 !important;
     border-radius: 4px;
-    .report-buttongroup-shu{
+
+    .report-buttongroup-shu {
         position: absolute;
         left: 47px;
         width: 1px;
@@ -191,30 +250,38 @@
         background-color: #E5E5E5;
         top: 5px;
     }
-    .ivu-btn-primary{
-        background: #F4F5F7!important;
+
+    .ivu-btn-primary {
+        background: #F4F5F7 !important;
         box-shadow: none !important;
-        border: none!important;
+        border: none !important;
         color: #8BCF70 !important;
-        &[disabled]{
+        height: 36px;
+        line-height: 34px;
+
+        &[disabled] {
             color: #515A6E !important;
         }
     }
 }
-.report-poptip{
-    .ivu-tooltip-inner{
+
+.report-poptip {
+    .ivu-tooltip-inner {
         min-width: 60px !important;
         font-size: 12px !important;
     }
 }
-.reportmy-row{
+
+.reportmy-row {
     margin-bottom: 20px;
-    .reportmy-titles{
+
+    .reportmy-titles {
         line-height: 32px;
     }
 }
-.report-main{
-    .report-submitter{
+
+.report-main {
+    .report-submitter {
         padding-top: 13px;
     }
 }
diff --git a/resources/assets/sass/pages/page-manage.scss b/resources/assets/sass/pages/page-manage.scss
index a5be6562..f34e66d8 100644
--- a/resources/assets/sass/pages/page-manage.scss
+++ b/resources/assets/sass/pages/page-manage.scss
@@ -70,6 +70,11 @@
                     }
                 }
             }
+            .manage-menu-report-badge {
+                margin-left: 6px;
+                transform: scale(0.9);
+                vertical-align: top;
+            }
             .manage-menu-language {
                 display: flex;
                 align-items: center;