优化暗黑皮肤

resources/assets/js/functions/web.js

@@ -596,6 +596,7 @@
                     twitterwidget,
                     .sr-reader,
                     .no-dark-mode,
+                    .no-dark-mode-before:before,
                     .sr-backdrop {
                         ${this.utils.reverseFilter}
                     }

resources/assets/js/pages/manage/calendar.vue

@@ -88,7 +88,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userId', 'cacheTasks', 'taskCompleteTemps', 'wsOpenNum']),
+        ...mapState(['userId', 'cacheTasks', 'taskCompleteTemps', 'wsOpenNum', 'themeIsDark']),
 
         ...mapGetters(['transforTasks']),
 
@@ -134,7 +134,11 @@ export default {
                     _time: data._time,
                 };
                 if (data.p_name) {
-                    task.priority = '<span class="priority" style="background-color:' + data.p_color + '">' + data.p_name + '</span>';
+                    let priorityStyle = `background-color:${data.p_color}`;
+                    if (this.themeIsDark) {
+                        priorityStyle = `color:${data.p_color};border:1px solid ${data.p_color};padding:1px 3px;`;
+                    }
+                    task.priority = `<span class="priority" style="${priorityStyle}">${data.p_name}</span>`;
                 }
                 if (data.sub_my && data.sub_my.length > 0) {
                     task.title = `[+${data.sub_my.length}] ${task.title}`
@@ -153,7 +157,7 @@ export default {
                     task.title = `[${this.$L('超期')}] ${task.title}`
                     task.color = "#f56c6c"
                     task.bgColor = data.color || "#fef0f0"
-                    task.priority+= '<span class="overdue">' + this.$L('超期未完成') + '</span>';
+                    task.priority+= `<span class="overdue">${this.$L('超期未完成')}</span>`;
                 }
                 if (!task.borderColor) {
                     task.borderColor = task.bgColor;

resources/assets/js/pages/manage/file.vue

@@ -65,18 +65,18 @@
                     <ul class="clearfix">
                         <li
                             v-for="item in fileList"
-                            :class="[item.type, item.id && shearId == item.id ? 'shear' : '', !!item._highlight ? 'highlight' : '']"
+                            :class="[item.id && shearId == item.id ? 'shear' : '', !!item._highlight ? 'highlight' : '']"
                             @contextmenu.prevent.stop="handleRightClick($event, item)"
                             @click="openFile(item)">
                             <div class="file-menu" @click.stop="handleRightClick($event, item)">
                                 <Icon type="ios-more" />
                             </div>
-                            <div class="file-icon">
+                            <div :class="`no-dark-mode-before file-icon ${item.type}`">
                                 <template v-if="item.share">
                                     <UserAvatar v-if="item.userid != userId" :userid="item.userid" class="share-avatar" :size="20">
                                         <p>{{$L('共享权限')}}: {{$L(item.permission == 1 ? '读/写' : '只读')}}</p>
                                     </UserAvatar>
-                                    <div v-else class="share-icon">
+                                    <div v-else class="share-icon no-dark-mode">
                                         <i class="taskfont">&#xe757;</i>
                                     </div>
                                 </template>
@@ -119,7 +119,7 @@
                                         :key="key"
                                         :divided="!!type.divided"
                                         @click.native="addFile(type.value)">
-                                        <div :class="['file-item ' + type.value]">{{$L(type.label)}}</div>
+                                        <div :class="`no-dark-mode-before file-item file-icon ${type.value}`">{{$L(type.label)}}</div>
                                     </DropdownItem>
                                 </DropdownMenu>
                             </Dropdown>
@@ -142,7 +142,7 @@
                                 :key="key"
                                 :divided="!!type.divided"
                                 @click.native="addFile(type.value)">
-                                <div :class="['file-item ' + type.value]">{{$L(type.label)}}</div>
+                                <div :class="`no-dark-mode-before file-item file-icon ${type.value}`">{{$L(type.label)}}</div>
                             </DropdownItem>
                         </template>
                     </DropdownMenu>
@@ -577,7 +577,7 @@ export default {
                                 class: 'file-nbox'
                             }, [
                                 h('div', {
-                                    class: 'file-name ' + row.type,
+                                    class: `no-dark-mode-before file-name file-icon ${row.type}`,
                                 }, array),
                             ]);
                         } else {
@@ -645,7 +645,7 @@ export default {
                                 class: 'file-nbox'
                             }, [
                                 h('div', {
-                                    class: 'file-name ' + row.type,
+                                    class: `no-dark-mode-before file-name file-icon ${row.type}`,
                                 }, array),
                                 iconArray
                             ]);

resources/assets/js/store/state.js

@@ -1,89 +1,85 @@
-const state = {};
+const stateData = {
-
     // 浏览器宽度
-state.windowWidth = window.innerWidth;
+    windowWidth: window.innerWidth,
 
     // 浏览器宽度≤768返回true
-state.windowMax768 = window.innerWidth <= 768;
+    windowMax768: window.innerWidth <= 768,
 
     // 数据缓存
-state.cacheLoading = {};
+    cacheLoading: {},
 
     // DrawerOverlay
-state.cacheDrawerIndex = 0;
+    cacheDrawerIndex: 0,
-state.cacheDrawerOverlay = [];
+    cacheDrawerOverlay: [],
 
     // User
-state.cacheUserActive = {};
+    cacheUserActive: {},
-state.cacheUserWait = [];
+    cacheUserWait: [],
-state.cacheUserBasic = $A.getStorageArray("cacheUserBasic");
+    cacheUserBasic: $A.getStorageArray("cacheUserBasic"),
 
     // Dialog
-state.cacheDialogs = $A.getStorageArray("cacheDialogs");
+    cacheDialogs: $A.getStorageArray("cacheDialogs"),
 
     // Project
-state.cacheProjects = $A.getStorageArray("cacheProjects");
+    cacheProjects: $A.getStorageArray("cacheProjects"),
-state.cacheColumns = $A.getStorageArray("cacheColumns");
+    cacheColumns: $A.getStorageArray("cacheColumns"),
-state.cacheTasks = $A.getStorageArray("cacheTasks");
+    cacheTasks: $A.getStorageArray("cacheTasks"),
-state.cacheProjectParameter = $A.getStorageArray("cacheProjectParameter");
+    cacheProjectParameter: $A.getStorageArray("cacheProjectParameter"),
 
     // ServerUrl
-state.cacheServerUrl = $A.getStorageString("cacheServerUrl")
+    cacheServerUrl: $A.getStorageString("cacheServerUrl"),
-if (state.cacheServerUrl) {
-    window.systemInfo.apiUrl = state.cacheServerUrl;
-}
 
     // Ajax
-state.ajaxWsReady = false;
+    ajaxWsReady: false,
-state.ajaxWsListener = [];
+    ajaxWsListener: [],
 
     // Websocket
-state.ws = null;
+    ws: null,
-state.wsMsg = {};
+    wsMsg: {},
-state.wsCall = {};
+    wsCall: {},
-state.wsTimeout = null;
+    wsTimeout: null,
-state.wsOpenNum = 0;
+    wsOpenNum: 0,
-state.wsListener = {};
+    wsListener: {},
-state.wsReadTimeout = null;
+    wsReadTimeout: null,
-state.wsReadWaitList = [];
+    wsReadWaitList: [],
 
     // 会员信息
-state.userInfo = $A.getStorageJson("userInfo");
+    userInfo: $A.getStorageJson("userInfo"),
-state.userId = state.userInfo.userid = $A.runNum(state.userInfo.userid);
+    userId: state.userInfo.userid = $A.runNum(state.userInfo.userid),
-state.userToken = state.userInfo.token;
+    userToken: state.userInfo.token,
-state.userIsAdmin = $A.inArray("admin", state.userInfo.identity);
+    userIsAdmin: $A.inArray("admin", state.userInfo.identity),
-state.userOnline = {};
+    userOnline: {},
 
     // 会话聊天
-state.dialogMsgs = [];
+    dialogMsgs: [],
-state.dialogOpenId = 0;
+    dialogOpenId: 0,
 
     // 文件
-state.files = [];
+    files: [],
-state.fileContent = {};
+    fileContent: {},
 
     // 项目任务
-state.projectId = 0;
+    projectId: 0,
-state.projectTotal = 0;
+    projectTotal: 0,
-state.projectLoad = 0;
+    projectLoad: 0,
-state.taskId = 0;
+    taskId: 0,
-state.taskCompleteTemps = [];
+    taskCompleteTemps: [],
-state.taskContents = [];
+    taskContents: [],
-state.taskFiles = [];
+    taskFiles: [],
-state.taskLogs = [];
+    taskLogs: [],
 
     // 任务等待状态
-state.taskLoading = [];
+    taskLoading: [],
 
     // 任务流程信息
-state.taskFlows = [];
+    taskFlows: [],
-state.taskFlowItems = [];
+    taskFlowItems: [],
 
     // 任务优先级
-state.taskPriority = [];
+    taskPriority: [],
 
     // 列表背景色
-state.columnColorList = [
+    columnColorList: [
         {name: '默认', color: ''},
         {name: '灰色', color: '#444444'},
         {name: '棕色', color: '#947364'},
@@ -94,10 +90,10 @@ state.columnColorList = [
         {name: '紫色', color: '#b583e3'},
         {name: '粉色', color: '#ff819c'},
         {name: '红色', color: '#ff7070'},
-];
+    ],
 
     // 任务背景色
-state.taskColorList = [
+    taskColorList: [
         {name: '默认', color: ''},
         {name: '黄色', color: '#fffae6'},
         {name: '蓝色', color: '#e5f5ff'},
@@ -105,16 +101,25 @@ state.taskColorList = [
         {name: '粉色', color: '#ffeaee'},
         {name: '紫色', color: '#f6ecff'},
         {name: '灰色', color: '#f3f3f3'},
-];
+    ],
 
     // 主题皮肤
-state.themeMode = $A.getStorageString("cacheThemeMode", "auto");
+    themeMode: $A.getStorageString("cacheThemeMode", "auto"),
-state.themeList = [
+    themeList: [
         {name: '跟随系统', value: 'auto'},
         {name: '明亮', value: 'light'},
         {name: '暗黑', value: 'dark'},
-];
+    ],
-switch (state.themeMode) {
+    themeIsDark: false,
+};
+
+// ServerUrl
+if (stateData.cacheServerUrl) {
+    window.systemInfo.apiUrl = stateData.cacheServerUrl;
+}
+
+// 主题皮肤
+switch (stateData.themeMode) {
     case 'dark':
         $A.dark.enableDarkMode()
         break;
@@ -125,6 +130,6 @@ switch (state.themeMode) {
         $A.dark.autoDarkMode()
         break;
 }
-state.themeIsDark = $A.dark.isDarkEnabled();
+stateData.themeIsDark = $A.dark.isDarkEnabled();
 
-export default state
+export default stateData

resources/assets/sass/app.scss

@@ -1,4 +1,5 @@
 @import "var";
+@import "fileicon";
 @import "element";
 @import "fonts-ft";
 @import "taskfont";

resources/assets/sass/components/drawer-overlay.scss

@@ -44,13 +44,19 @@
                 width: 40px;
                 height: 40px;
                 color: #dbdbde;
-                &:hover {
-                    color: #fff
-                }
                 .icon {
                     width: 24px;
                     height: 24px
                 }
+                > svg {
+                    transition: all 0.3s;
+                }
+                &:hover {
+                    color: #fff;
+                    > svg {
+                        transform: rotate(-90deg);
+                    }
+                }
             }
         }
 

resources/assets/sass/dark.scss

@@ -5,10 +5,6 @@ body.dark-mode-reverse {
         color: #000;
     }
 
-    .ivu-select-dropdown {
-        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 6px;
-    }
-
     .ivu-modal-mask {
         background-color: rgba(230, 230, 230, 0.6);
     }
@@ -22,6 +18,7 @@ body.dark-mode-reverse {
         border: 1px solid #e3e8ed;
     }
 
+    .ivu-select-dropdown,
     .ivu-tooltip-inner,
     .ivu-poptip-inner {
         border: 1px solid #e3e8ed;
@@ -41,11 +38,14 @@ body.dark-mode-reverse {
     }
 
     .drawer-overlay {
-        background: rgba(240, 240, 240, 0.76);
+        background: rgba(230, 230, 230, 0.6);
         .overlay-body {
             .overlay-close {
                 > a {
                     color: #323232;
+                    &:hover {
+                        color: #000;
+                    }
                 }
             }
         }
@@ -156,6 +156,72 @@ body.dark-mode-reverse {
         }
     }
 
+    .file-icon {
+        &:before {
+            background-image: url("../images/file/dark/other.svg");
+        }
+        &.archive:before {
+            background-image: url("../images/file/dark/archive.svg");
+        }
+        &.cad:before {
+            background-image: url("../images/file/dark/cad.svg");
+        }
+        &.code:before {
+            background-image: url("../images/file/dark/code.svg");
+        }
+        &.document:before {
+            background-image: url("../images/file/dark/document.svg");
+        }
+        &.excel:before {
+            background-image: url("../images/file/dark/excel.svg");
+        }
+        &.flow:before {
+            background-image: url("../images/file/dark/flow.svg");
+        }
+        &.folder:before {
+            background-image: url("../images/file/dark/folder.svg");
+        }
+        &.media:before {
+            background-image: url("../images/file/dark/media.svg");
+        }
+        &.mind:before {
+            background-image: url("../images/file/dark/mind.svg");
+        }
+        &.ofd:before {
+            background-image: url("../images/file/dark/ofd.svg");
+        }
+        &.pdf:before {
+            background-image: url("../images/file/dark/pdf.svg");
+        }
+        &.picture:before {
+            background-image: url("../images/file/dark/picture.svg");
+        }
+        &.ppt:before {
+            background-image: url("../images/file/dark/ppt.svg");
+        }
+        &.sheet:before {
+            background-image: url("../images/file/dark/sheet.svg");
+        }
+        &.tif:before {
+            background-image: url("../images/file/dark/tif.svg");
+        }
+        &.txt:before {
+            background-image: url("../images/file/dark/txt.svg");
+        }
+        &.updir:before {
+            background-image: url("../images/file/dark/updir.svg");
+        }
+        &.upload:before {
+            background-image: url("../images/file/dark/upload.svg");
+        }
+        &.word:before {
+            background-image: url("../images/file/dark/word.svg");
+        }
+        &.wps:before {
+            background-image: url("../images/file/dark/wps.svg");
+        }
+    }
+
     .page-login {
         .login-body {
             .login-box {
@@ -219,23 +285,4 @@ body.dark-mode-reverse {
             }
         }
     }
-
-    .page-file {
-        .file-wrapper {
-            .file-list {
-                > ul {
-                    > li {
-                        .file-icon {
-                            .share-icon,
-                            .share-avatar {
-                                .taskfont {
-                                    color: #3a3a3a;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
 }

resources/assets/sass/fileicon.scss

@@ -0,0 +1,68 @@
+.file-icon {
+    &:before {
+        content: "";
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-image: url("../images/file/other.svg");
+    }
+    &.archive:before {
+        background-image: url("../images/file/archive.svg");
+    }
+    &.cad:before {
+        background-image: url("../images/file/cad.svg");
+    }
+    &.code:before {
+        background-image: url("../images/file/code.svg");
+    }
+    &.document:before {
+        background-image: url("../images/file/document.svg");
+    }
+    &.excel:before {
+        background-image: url("../images/file/excel.svg");
+    }
+    &.flow:before {
+        background-image: url("../images/file/flow.svg");
+    }
+    &.folder:before {
+        background-image: url("../images/file/folder.svg");
+    }
+    &.media:before {
+        background-image: url("../images/file/media.svg");
+    }
+    &.mind:before {
+        background-image: url("../images/file/mind.svg");
+    }
+    &.ofd:before {
+        background-image: url("../images/file/ofd.svg");
+    }
+    &.pdf:before {
+        background-image: url("../images/file/pdf.svg");
+    }
+    &.picture:before {
+        background-image: url("../images/file/picture.svg");
+    }
+    &.ppt:before {
+        background-image: url("../images/file/ppt.svg");
+    }
+    &.sheet:before {
+        background-image: url("../images/file/sheet.svg");
+    }
+    &.tif:before {
+        background-image: url("../images/file/tif.svg");
+    }
+    &.txt:before {
+        background-image: url("../images/file/txt.svg");
+    }
+    &.updir:before {
+        background-image: url("../images/file/updir.svg");
+    }
+    &.upload:before {
+        background-image: url("../images/file/upload.svg");
+    }
+    &.word:before {
+        background-image: url("../images/file/word.svg");
+    }
+    &.wps:before {
+        background-image: url("../images/file/wps.svg");
+    }
+}

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

@@ -859,7 +859,7 @@
                             &.row-name {
                                 padding-left: 56px;
                                 .item-title {
-                                    color: #6C7D8C;
+                                    color: #6b6e72;
                                 }
                             }
                             &.row-column,

resources/assets/sass/pages/page-file.scss

@@ -296,70 +296,7 @@
                         content: "";
                         width: 22px;
                         height: 22px;
-                        background-repeat: no-repeat;
-                        background-size: contain;
                         margin-right: 8px;
-                        background-image: url("../images/file/other.svg");
-                    }
-                    &.archive:before {
-                        background-image: url("../images/file/archive.svg");
-                    }
-                    &.cad:before {
-                        background-image: url("../images/file/cad.svg");
-                    }
-                    &.code:before {
-                        background-image: url("../images/file/code.svg");
-                    }
-                    &.document:before {
-                        background-image: url("../images/file/document.svg");
-                    }
-                    &.excel:before {
-                        background-image: url("../images/file/excel.svg");
-                    }
-                    &.flow:before {
-                        background-image: url("../images/file/flow.svg");
-                    }
-                    &.folder:before {
-                        background-image: url("../images/file/folder.svg");
-                    }
-                    &.media:before {
-                        background-image: url("../images/file/media.svg");
-                    }
-                    &.mind:before {
-                        background-image: url("../images/file/mind.svg");
-                    }
-                    &.ofd:before {
-                        background-image: url("../images/file/ofd.svg");
-                    }
-                    &.pdf:before {
-                        background-image: url("../images/file/pdf.svg");
-                    }
-                    &.picture:before {
-                        background-image: url("../images/file/picture.svg");
-                    }
-                    &.ppt:before {
-                        background-image: url("../images/file/ppt.svg");
-                    }
-                    &.sheet:before {
-                        background-image: url("../images/file/sheet.svg");
-                    }
-                    &.tif:before {
-                        background-image: url("../images/file/tif.svg");
-                    }
-                    &.txt:before {
-                        background-image: url("../images/file/txt.svg");
-                    }
-                    &.updir:before {
-                        background-image: url("../images/file/updir.svg");
-                    }
-                    &.upload:before {
-                        background-image: url("../images/file/upload.svg");
-                    }
-                    &.word:before {
-                        background-image: url("../images/file/word.svg");
-                    }
-                    &.wps:before {
-                        background-image: url("../images/file/wps.svg");
                     }
                 }
                 .permission {
@@ -448,11 +385,15 @@
                         display: inline-block;
                         width: 64px;
                         height: 64px;
-                        background-repeat: no-repeat;
-                        background-size: contain;
                         margin-top: 12px;
                         position: relative;
-                        background-image: url("../images/file/other.svg");
+                        &:before {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            right: 0;
+                            bottom: 0;
+                        }
                         .share-icon,
                         .share-avatar {
                             position: absolute;
@@ -476,66 +417,6 @@
                     &.shear {
                         opacity: 0.38;
                     }
-                    &.archive .file-icon {
-                        background-image: url("../images/file/archive.svg");
-                    }
-                    &.cad .file-icon {
-                        background-image: url("../images/file/cad.svg");
-                    }
-                    &.code .file-icon {
-                        background-image: url("../images/file/code.svg");
-                    }
-                    &.document .file-icon {
-                        background-image: url("../images/file/document.svg");
-                    }
-                    &.excel .file-icon {
-                        background-image: url("../images/file/excel.svg");
-                    }
-                    &.flow .file-icon {
-                        background-image: url("../images/file/flow.svg");
-                    }
-                    &.folder .file-icon {
-                        background-image: url("../images/file/folder.svg");
-                    }
-                    &.media .file-icon {
-                        background-image: url("../images/file/media.svg");
-                    }
-                    &.mind .file-icon {
-                        background-image: url("../images/file/mind.svg");
-                    }
-                    &.ofd .file-icon {
-                        background-image: url("../images/file/ofd.svg");
-                    }
-                    &.pdf .file-icon {
-                        background-image: url("../images/file/pdf.svg");
-                    }
-                    &.picture .file-icon {
-                        background-image: url("../images/file/picture.svg");
-                    }
-                    &.ppt .file-icon {
-                        background-image: url("../images/file/ppt.svg");
-                    }
-                    &.sheet .file-icon {
-                        background-image: url("../images/file/sheet.svg");
-                    }
-                    &.tif .file-icon {
-                        background-image: url("../images/file/tif.svg");
-                    }
-                    &.txt .file-icon {
-                        background-image: url("../images/file/txt.svg");
-                    }
-                    &.updir .file-icon {
-                        background-image: url("../images/file/updir.svg");
-                    }
-                    &.upload .file-icon {
-                        background-image: url("../images/file/upload.svg");
-                    }
-                    &.word .file-icon {
-                        background-image: url("../images/file/word.svg");
-                    }
-                    &.wps .file-icon {
-                        background-image: url("../images/file/wps.svg");
-                    }
                     &.highlight {
                         background-color: #f4f5f7;
                     }
@@ -650,70 +531,7 @@
             content: "";
             width: 20px;
             height: 20px;
-            background-repeat: no-repeat;
-            background-size: contain;
             margin-right: 8px;
-            background-image: url("../images/file/other.svg");
-        }
-        &.archive:before {
-            background-image: url("../images/file/archive.svg");
-        }
-        &.cad:before {
-            background-image: url("../images/file/cad.svg");
-        }
-        &.code:before {
-            background-image: url("../images/file/code.svg");
-        }
-        &.document:before {
-            background-image: url("../images/file/document.svg");
-        }
-        &.excel:before {
-            background-image: url("../images/file/excel.svg");
-        }
-        &.flow:before {
-            background-image: url("../images/file/flow.svg");
-        }
-        &.folder:before {
-            background-image: url("../images/file/folder.svg");
-        }
-        &.media:before {
-            background-image: url("../images/file/media.svg");
-        }
-        &.mind:before {
-            background-image: url("../images/file/mind.svg");
-        }
-        &.ofd:before {
-            background-image: url("../images/file/ofd.svg");
-        }
-        &.pdf:before {
-            background-image: url("../images/file/pdf.svg");
-        }
-        &.picture:before {
-            background-image: url("../images/file/picture.svg");
-        }
-        &.ppt:before {
-            background-image: url("../images/file/ppt.svg");
-        }
-        &.sheet:before {
-            background-image: url("../images/file/sheet.svg");
-        }
-        &.tif:before {
-            background-image: url("../images/file/tif.svg");
-        }
-        &.txt:before {
-            background-image: url("../images/file/txt.svg");
-        }
-        &.updir:before {
-            background-image: url("../images/file/updir.svg");
-        }
-        &.upload:before {
-            background-image: url("../images/file/upload.svg");
-        }
-        &.word:before {
-            background-image: url("../images/file/word.svg");
-        }
-        &.wps:before {
-            background-image: url("../images/file/wps.svg");
         }
     }
 }

resources/assets/sass/pages/page-setting.scss

@@ -38,7 +38,7 @@
                 padding: 12px 0 0 32px;
                 > li {
                     cursor: pointer;
-                    color: #6C7D8C;
+                    color: #6b6e72;
                     list-style: none;
                     line-height: 42px;
                     padding: 0 20px;