优化暗黑模式

resources/assets/js/components/Flow.vue

@@ -79,6 +79,7 @@
 </style>
 <script>
     import JSPDF from "jspdf";
+    import {mapState} from "vuex";
 
     export default {
         name: "Flow",
@@ -115,7 +116,7 @@
                     break;
             }
             let route = this.readOnly ? 'viewer' : 'index';
-            let theme = $A.dark.isDarkEnabled() ? 'dark' : 'light'
+            let theme = this.themeIsDark ? 'dark' : 'light'
             this.url = $A.originUrl('js/grapheditor/' + route + '.html?lang=' + language + '&theme=' + theme);
         },
         mounted() {
@@ -144,6 +145,9 @@
                 }, '*')
             }
         },
+        computed: {
+            ...mapState(['themeIsDark'])
+        },
         methods: {
             formatZoom(val) {
                 return val + '%';

resources/assets/js/components/OnlyOffice.vue

@@ -82,7 +82,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userToken', 'userInfo']),
+        ...mapState(['userToken', 'userInfo', 'themeIsDark']),
 
         fileType() {
             return this.getType(this.value.type);
@@ -159,7 +159,7 @@ export default {
                         "name": this.userInfo.nickname
                     },
                     "customization": {
-                        "uiTheme": $A.dark.isDarkEnabled() ? "theme-dark" : "theme-classic-light",
+                        "uiTheme": this.themeIsDark ? "theme-dark" : "theme-classic-light",
                     },
                     "callbackUrl": 'http://nginx/api/file/content/office?id=' + fileKey + '&token=' + this.userToken,
                 }

resources/assets/js/components/TEditor.vue

@@ -158,7 +158,7 @@
             $A(this.$refs.myTextarea).show();
         },
         computed: {
-            ...mapState(['userToken']),
+            ...mapState(['userToken', 'themeIsDark']),
 
             headers() {
                 return {
@@ -250,7 +250,7 @@
                     resize: !isFull,
                     convert_urls:false,
                     toolbar_mode: 'sliding',
-                    content_css: $A.dark.isDarkEnabled() ? 'dark' : 'default',
+                    content_css: this.themeIsDark ? 'dark' : 'default',
                     setup: (editor) => {
                         editor.ui.registry.addMenuButton('uploadImages', {
                             text: this.$L('图片'),

resources/assets/js/pages/manage.vue

@@ -218,6 +218,7 @@ import DrawerOverlay from "../components/DrawerOverlay";
 import DragBallComponent from "../components/DragBallComponent";
 import TaskAdd from "./manage/components/TaskAdd";
 import {Store} from "le5le-store";
+import state from "../store/state";
 
 export default {
     components: {
@@ -481,6 +482,7 @@ export default {
                     break;
             }
             this.$store.state.themeMode = mode;
+            this.$store.state.themeIsDark = $A.dark.isDarkEnabled();
             $A.setStorage("cacheThemeMode", mode);
         },
 

resources/assets/js/pages/manage/components/TaskPriority.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
     name: "TaskPriority",
     props: {
@@ -22,10 +24,20 @@ export default {
         }
     },
     computed: {
+        ...mapState(['themeIsDark']),
+
         myStyle() {
-            const {color, background, backgroundColor} = this;
+            const {color, background, backgroundColor, themeIsDark} = this;
+            if (themeIsDark) {
+                return {
+                    color: backgroundColor || background,
+                    borderColor: backgroundColor || background,
+                    backgroundColor: 'transparent',
+                }
+            }
             return {
                 color: color,
+                borderColor: backgroundColor || background,
                 backgroundColor: backgroundColor || background,
             }
         }

resources/assets/js/store/state.js

@@ -125,5 +125,6 @@ switch (state.themeMode) {
         $A.dark.autoDarkMode()
         break;
 }
+state.themeIsDark = $A.dark.isDarkEnabled();
 
 export default state

resources/assets/sass/dark.scss

@@ -17,6 +17,11 @@ body.dark-mode-reverse {
         box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
     }
 
+    .ivu-message-notice-content {
+        box-shadow: 0 1px 6px rgba(255, 255, 255, 0.2);
+        border: 1px solid #e3e8ed;
+    }
+
     .ivu-tooltip-inner,
     .ivu-poptip-inner {
         border: 1px solid #e3e8ed;
@@ -83,6 +88,48 @@ body.dark-mode-reverse {
                 }
             }
         }
+        .project-column {
+            > ul {
+                > li {
+                    .column-task {
+                        .task-item {
+                            .task-progress {
+                                .task-time {
+                                    &.overdue {
+                                        color: #ed4014;
+                                        background-color: transparent;
+                                    }
+                                    &.today {
+                                        color: #ff9900;
+                                        background-color: transparent;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .project-table {
+            .project-table-body {
+                .task-row {
+                    > div {
+                        &.row-time {
+                            .task-time {
+                                &.overdue {
+                                    color: #ed4014;
+                                    background-color: transparent;
+                                }
+                                &.today {
+                                    color: #ff9900;
+                                    background-color: transparent;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
 
     .dialog-wrapper {
@@ -109,6 +156,14 @@ body.dark-mode-reverse {
         }
     }
 
+    .page-login {
+        .login-body {
+            .login-box {
+                box-shadow: none;
+            }
+        }
+    }
+
     .page-manage {
         .manage-box-menu {
             .manage-box-dropdown {

resources/assets/sass/pages/components/project-list.scss

@@ -489,21 +489,26 @@
                                 flex-shrink: 0;
                                 color: #777777;
                                 background-color: #EAEDF2;
-                                padding: 1px 4px;
+                                border: 1px solid #EAEDF2;
+                                padding: 0 3px;
                                 margin-left: 18px;
                                 font-size: 12px;
                                 border-radius: 3px;
                                 display: flex;
                                 align-items: center;
+                                &.overdue,
+                                &.today {
+                                    color: #ffffff;
+                                }
                                 &.overdue {
                                     font-weight: 600;
-                                    color: #ffffff;
                                     background-color: #ed4014;
+                                    border-color: #ed4014;
                                 }
                                 &.today {
                                     font-weight: 500;
-                                    color: #ffffff;
                                     background-color: #ff9900;
+                                    border-color: #ff9900;
                                 }
                                 .taskfont {
                                     margin-right: 3px;
@@ -813,17 +818,20 @@
                             &.overdue,
                             &.today {
                                 color: #ffffff;
-                                padding: 1px 5px;
+                                padding: 0 4px;
+                                border: 1px solid transparent;
                                 font-size: 13px;
                                 border-radius: 3px;
                             }
                             &.overdue {
                                 font-weight: 600;
                                 background-color: #ed4014;
+                                border-color: #ed4014;
                             }
                             &.today {
                                 font-weight: 500;
                                 background-color: #ff9900;
+                                border-color: #ff9900;
                             }
                         }
                     }

resources/assets/sass/pages/components/task-priority.scss

@@ -1,10 +1,12 @@
 .task-priority {
     font-size: 13px;
     display: inline-block;
-    padding: 2px 6px;
+    padding: 2px 5px;
     border-radius: 3px;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    background: transparent;
+    border: 1px solid transparent;
 }