perf: 优化菜单颜色选择

kuaifan · Aug 13, 2023 · 6af0922 · 6af0922
1 parent 1bb400b
commit 6af0922
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 19 deletions.
diff --git a/resources/assets/js/pages/manage/components/ProjectPanel.vue b/resources/assets/js/pages/manage/components/ProjectPanel.vue
@@ -131,7 +131,7 @@
                                     </EDropdownItem>
                                     <EDropdownItem v-for="(c, k) in $store.state.columnColorList" :key="k" :divided="k==0" :command="c">
                                         <div class="item">
-                                            <i class="taskfont" :style="{color:c.color}" v-html="c.color == column.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
+                                            <i class="taskfont" :style="{color:c.color||'#ddd'}" v-html="c.color == column.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
                                         </div>
                                     </EDropdownItem>
                                 </EDropdownMenu>

diff --git a/resources/assets/js/pages/manage/components/TaskOperation.vue b/resources/assets/js/pages/manage/components/TaskOperation.vue
@@ -54,7 +54,7 @@
                         <template v-if="colorShow">
                             <EDropdownItem v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0" :command="c">
                                 <div class="item">
-                                    <i class="taskfont" :style="{color:c.color||'#f9f9f9'}" v-html="c.color == task.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
+                                    <i class="taskfont" :style="{color:c.primary||'#ddd'}" v-html="c.color == (task.color||'') ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
                                 </div>
                             </EDropdownItem>
                         </template>

diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
@@ -150,17 +150,28 @@
                             <div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div>
                             <DropdownMenu slot="list" class="messenger-dialog-operation">
                                 <DropdownItem @click.native="handleTopClick">
-                                    {{ $L(operateItem.top_at ? '取消置顶' : '置顶') }}
+                                    <div class="item">
+                                        {{ $L(operateItem.top_at ? '取消置顶' : '置顶') }}
+                                        <i class="taskfont" v-html="operateItem.top_at ? '&#xe7e3;' : '&#xe7e6;'"></i>
+                                    </div>
                                 </DropdownItem>
                                 <DropdownItem @click.native="handleReadClick">
-                                    {{ $L($A.getDialogUnread(operateItem, true) > 0 ? '标记已读' : '标记未读') }}
+                                    <div class="item">
+                                        {{ $L($A.getDialogUnread(operateItem, true) > 0 ? '标记已读' : '标记未读') }}
+                                        <i class="taskfont" v-html="$A.getDialogUnread(operateItem, true) > 0 ? '&#xe7e8;' : '&#xe7e9;'"></i>
+                                    </div>
+
                                 </DropdownItem>
                                 <DropdownItem @click.native="handleSilenceClick" :disabled="silenceDisabled(operateItem)">
-                                    {{ $L(operateItem.silence ? '允许消息通知' : '消息免打扰') }}
+                                    <div class="item">
+                                        {{ $L(operateItem.silence ? '允许消息通知' : '消息免打扰') }}
+                                        <i class="taskfont" v-html="operateItem.silence ? '&#xe7eb;' : '&#xe7d7;'"></i>
+                                    </div>
                                 </DropdownItem>
                                 <DropdownItem @click.native="handleColorClick(c.color)" v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0"  v-if="k<6" >
                                     <div class="item">
-                                        <i class="taskfont" :style="{color:c.color||'#f9f9f9'}" v-html="c.color == operateItem.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
+                                        {{$L(c.name)}}
+                                        <i class="taskfont color" :style="{color:c.primary||'#ddd'}" v-html="c.color == (operateItem.color||'') ? '&#xe61d;' : '&#xe61c;'"></i>
                                     </div>
                                 </DropdownItem>
                             </DropdownMenu>

diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
@@ -147,7 +147,7 @@ export default {
     // 列表背景色
     columnColorList: [
         {name: '默认', color: ''},
-        {name: '灰色', color: '#444444'},
+        {name: '灰色', color: '#999999'},
         {name: '棕色', color: '#947364'},
         {name: '橘色', color: '#faaa6c'},
         {name: '黄色', color: '#f2d86d'},
@@ -160,13 +160,13 @@ export default {
 
     // 任务背景色
     taskColorList: [
-        {name: '默认', color: ''},
-        {name: '黄色', color: '#fffae6'},
-        {name: '蓝色', color: '#e5f5ff'},
-        {name: '绿色', color: '#ecffe5'},
-        {name: '粉色', color: '#ffeaee'},
-        {name: '紫色', color: '#f6ecff'},
-        {name: '灰色', color: '#f3f3f3'},
+        {name: '默认', color: '', primary: ''},
+        {name: '黄色', color: '#fffae6', primary: '#f2d86d'},
+        {name: '蓝色', color: '#e5f5ff', primary: '#51abea'},
+        {name: '绿色', color: '#ecffe5', primary: '#73b45c'},
+        {name: '粉色', color: '#ffeaee', primary: '#ff819c'},
+        {name: '紫色', color: '#f6ecff', primary: '#b583e3'},
+        {name: '灰色', color: '#f3f3f3', primary: '#999999'},
     ],
 
     // 主题皮肤

diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
@@ -592,22 +592,28 @@
 }
 
 .messenger-dialog-operation {
+    .ivu-dropdown-item-divided {
+        &:before {
+            transform: scaleY(0.5);
+        }
+    }
+
     .item {
         display: flex;
         align-items: center;
+        justify-content: space-between;
 
         > i {
             flex-shrink: 0;
             width: 18px;
             height: 18px;
             line-height: 18px;
             font-size: 18px;
-            margin-right: 8px;
-            padding: 0;
-            color: #bbbbbb;
+            margin-left: 16px;
+            opacity: 0.7;
 
-            &.ivu-icon {
-                font-size: 16px;
+            &.color {
+                opacity: 1;
             }
         }
     }

diff --git a/resources/assets/statics/public/css/fonts/taskfont/iconfont.ttf b/resources/assets/statics/public/css/fonts/taskfont/iconfont.ttf
diff --git a/resources/assets/statics/public/css/fonts/taskfont/iconfont.woff b/resources/assets/statics/public/css/fonts/taskfont/iconfont.woff
diff --git a/resources/assets/statics/public/css/fonts/taskfont/iconfont.woff2 b/resources/assets/statics/public/css/fonts/taskfont/iconfont.woff2