From 834c8cc7d5326297443e07a4188d53348124ad81 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 23 Dec 2021 14:55:29 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BB=BB=E5=8A=A1=E8=AF=A6=E7=BB=86?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E3=80=81=E6=B7=BB=E5=8A=A0=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/components/TEditor.vue    | 13 +++---
 .../pages/manage/components/ProjectList.vue   |  2 +-
 .../js/pages/manage/components/TaskAdd.vue    | 39 +++++++++--------
 .../js/pages/manage/components/TaskDetail.vue | 15 +++----
 .../assets/sass/components/t-editor.scss      |  6 +++
 .../sass/pages/components/project-list.scss   | 11 +++--
 .../sass/pages/components/task-add.scss       | 42 ++++++++++---------
 7 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/resources/assets/js/components/TEditor.vue b/resources/assets/js/components/TEditor.vue
index cbe40a8f..31006adf 100755
--- a/resources/assets/js/components/TEditor.vue
+++ b/resources/assets/js/components/TEditor.vue
@@ -85,10 +85,10 @@
                 type: Array,
                 default: () => {
                     return [
-                        'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
+                        'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                         'searchreplace visualblocks visualchars code',
-                        'insertdatetime media nonbreaking save table contextmenu directionality',
-                        'emoticons paste textcolor colorpicker imagetools codesample'
+                        'insertdatetime media nonbreaking save table directionality',
+                        'emoticons paste codesample'
                     ];
                 }
             },
@@ -120,6 +120,10 @@
                 type: String,
                 default: ''
             },
+            placeholderFull: {
+                type: String,
+                default: ''
+            },
         },
         data() {
             return {
@@ -216,7 +220,7 @@
                     language: "zh_CN",
                     toolbar: this.toolbar,
                     plugins: this.plugin(isFull),
-                    placeholder: this.placeholder,
+                    placeholder: isFull && this.placeholderFull ? this.placeholderFull : this.placeholder,
                     save_onsavecallback: (e) => {
                         this.$emit('editorSave', e);
                     },
@@ -247,7 +251,6 @@
                     resize: !isFull,
                     convert_urls:false,
                     toolbar_mode: 'sliding',
-                    toolbar_drawer: 'floating',
                     setup: (editor) => {
                         editor.ui.registry.addMenuButton('uploadImages', {
                             text: this.$L('图片'),
diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index d03bf5d0..2376b605 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -172,7 +172,7 @@
                                         </EDropdown>
                                     </div>
                                 </div>
-                                <div v-if="item.desc" class="task-desc" v-html="item.desc"></div>
+                                <div v-if="item.desc" class="task-desc"><pre v-html="item.desc"></pre></div>
                                 <div v-if="item.task_tag.length > 0" class="task-tags">
                                     <Tag v-for="(tag, keyt) in item.task_tag" :key="keyt" :color="tag.color">{{tag.name}}</Tag>
                                 </div>
diff --git a/resources/assets/js/pages/manage/components/TaskAdd.vue b/resources/assets/js/pages/manage/components/TaskAdd.vue
index 58421b27..255311d1 100644
--- a/resources/assets/js/pages/manage/components/TaskAdd.vue
+++ b/resources/assets/js/pages/manage/components/TaskAdd.vue
@@ -1,25 +1,27 @@
 <template>
     <div class="task-add">
-        <Form class="task-add-form" label-position="top" @submit.native.prevent>
-            <FormItem :label="$L('任务描述')">
+        <div class="task-add-form">
+            <div class="title">
                 <Input
                     v-model="addData.name"
                     ref="input"
                     type="textarea"
                     :rows="1"
-                    :autosize="{ minRows: 1, maxRows: 3 }"
+                    :autosize="{ minRows: 1, maxRows: 8 }"
                     :maxlength="255"
-                    :placeholder="$L('必填')"
+                    :placeholder="$L('任务描述')"
                     @on-keydown="onKeydown"/>
-            </FormItem>
-            <FormItem :label="$L('任务详情')">
+            </div>
+            <div class="desc">
                 <TEditor
                     v-model="addData.content"
                     :plugins="taskPlugins"
                     :options="taskOptions"
                     :option-full="taskOptionFull"
-                    :placeholder="$L('选填...')"/>
-            </FormItem>
+                    :placeholder="$L('详细描述，选填...（点击右键使用工具栏）')"
+                    :placeholderFull="$L('详细描述...')"
+                    inline/>
+            </div>
             <div class="advanced-option">
                 <Button :class="{advanced: advanced}" @click="advanced=!advanced">{{$L('高级选项')}}</Button>
                 <ul class="advanced-priority">
@@ -34,7 +36,7 @@
                     </li>
                 </ul>
             </div>
-        </Form>
+        </div>
         <Form v-if="advanced" class="task-add-advanced" label-width="auto" @submit.native.prevent>
             <FormItem :label="$L('任务列表')">
                 <Select
@@ -141,28 +143,25 @@ export default {
             columnAdd: [],
 
             taskPlugins: [
-                'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
+                'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                 'searchreplace visualblocks visualchars code',
                 'insertdatetime media nonbreaking save table directionality',
-                'emoticons paste imagetools codesample',
+                'emoticons paste codesample',
                 'autoresize'
             ],
             taskOptions: {
                 statusbar: false,
                 menubar: false,
-                forced_root_block : false,
-                remove_trailing_brs: false,
                 autoresize_bottom_margin: 2,
                 min_height: 200,
                 max_height: 380,
-                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img[src|alt|witdh|height],pre[class],code',
-                toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
+                contextmenu: 'bold italic underline forecolor backcolor | codesample | uploadImages uploadFiles | preview screenload',
+                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,p,img[src|alt|witdh|height],pre[class],code',
+                toolbar: false
             },
             taskOptionFull: {
                 menubar: 'file edit view',
-                forced_root_block : false,
-                remove_trailing_brs: false,
-                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img[src|alt|witdh|height],pre[class],code',
+                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,p,img[src|alt|witdh|height],pre[class],code',
                 toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
             },
 
@@ -171,6 +170,9 @@ export default {
             },
         }
     },
+    mounted() {
+        this.$refs.input.focus();
+    },
     computed: {
         ...mapState(['userId', 'projectId', 'columns', 'taskPriority']),
 
@@ -301,6 +303,7 @@ export default {
                         content: "",
                         subtasks: [],
                     });
+                    this.$refs.input.focus();
                 } else {
                     this.addData = {
                         name: "",
diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue
index a0823338..dd20382a 100644
--- a/resources/assets/js/pages/manage/components/TaskDetail.vue
+++ b/resources/assets/js/pages/manage/components/TaskDetail.vue
@@ -456,28 +456,25 @@ export default {
             sendLoad: false,
 
             taskPlugins: [
-                'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
+                'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                 'searchreplace visualblocks visualchars code',
                 'insertdatetime media nonbreaking save table directionality',
-                'emoticons paste imagetools codesample',
+                'emoticons paste codesample',
                 'autoresize'
             ],
             taskOptions: {
                 statusbar: false,
                 menubar: false,
-                forced_root_block : false,
-                remove_trailing_brs: false,
                 autoresize_bottom_margin: 2,
                 min_height: 200,
                 max_height: 380,
-                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img[src|alt|witdh|height],pre[class],code',
-                toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
+                contextmenu: 'bold italic underline forecolor backcolor | codesample | uploadImages uploadFiles | preview screenload',
+                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,p,img[src|alt|witdh|height],pre[class],code',
+                toolbar: false
             },
             taskOptionFull: {
                 menubar: 'file edit view',
-                forced_root_block : false,
-                remove_trailing_brs: false,
-                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img[src|alt|witdh|height],pre[class],code',
+                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,p,img[src|alt|witdh|height],pre[class],code',
                 toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
             },
         }
diff --git a/resources/assets/sass/components/t-editor.scss b/resources/assets/sass/components/t-editor.scss
index 350ce6aa..7c1dc5d5 100755
--- a/resources/assets/sass/components/t-editor.scss
+++ b/resources/assets/sass/components/t-editor.scss
@@ -46,6 +46,12 @@
                 }
             }
         }
+
+        .tox-tbtn--bespoke {
+            .tox-tbtn__select-label {
+                width: auto;
+            }
+        }
     }
 }
 
diff --git a/resources/assets/sass/pages/components/project-list.scss b/resources/assets/sass/pages/components/project-list.scss
index 3d18198c..1f64f264 100644
--- a/resources/assets/sass/pages/components/project-list.scss
+++ b/resources/assets/sass/pages/components/project-list.scss
@@ -359,10 +359,13 @@
                             }
                         }
                         .task-desc {
-                            color: #999999;
-                            margin-top: 10px;
-                            line-height: 20px;
-                            word-break: break-all;
+                            > pre {
+                                color: #999999;
+                                padding: 0;
+                                margin: 10px 0 0 0;
+                                line-height: 20px;
+                                word-break: break-all;
+                            }
                         }
                         .task-tags {
                             margin-top: 10px;
diff --git a/resources/assets/sass/pages/components/task-add.scss b/resources/assets/sass/pages/components/task-add.scss
index b30c5581..99333a1d 100644
--- a/resources/assets/sass/pages/components/task-add.scss
+++ b/resources/assets/sass/pages/components/task-add.scss
@@ -1,36 +1,38 @@
 .task-add {
+    margin-bottom: 6px;
     .task-add-form,
     .task-add-advanced {
-        margin: 0 0 -18px;
-        .ivu-form-item-label {
-            font-weight: 600;
+        .title {
+            .ivu-input {
+                font-weight: 500;
+                font-size: 24px;
+                padding: 4px 0;
+                line-height: 1.4;
+                resize: none;
+                border-color: transparent;
+                &:focus {
+                    box-shadow: none
+                }
+            }
         }
-        .teditor-box {
-            .tox-tinymce {
-                border-color: #e8e8e8;
+        .desc {
+            margin-top: 24px;
+            div[contenteditable="true"] {
+                outline: none
             }
-            .tox .tox-statusbar,
-            .tox .tox-menubar+.tox-toolbar,
-            .tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary,
-            .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
-                border-color: #e8e8e8;
-            }
-            .tox .tox-toolbar,
-            .tox .tox-toolbar__overflow,
-            .tox .tox-toolbar__primary {
-                background-image: none;
-                border-bottom: 1px solid #e8e8e8;
+            .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+                color: #bbbbbb;
             }
         }
         .advanced-option {
-            margin-top: -6px;
+            margin-top: 24px;
             z-index: 1;
             display: flex;
             align-items: center;
             > button {
                 transition: margin 0.2s;
                 &.advanced {
-                    margin-left: 22px;
+                    margin-left: 24px;
                 }
                 &:focus {
                     box-shadow: none;
@@ -53,7 +55,7 @@
         }
     }
     .task-add-advanced {
-        margin: 1px 0 0;
+        margin: -16px 0 0;
         padding: 34px 32px 6px;
         border-radius: 8px;
         border: 1px solid #e8e8e8;