From 164f3275f457523450ca4df940cafbb65d2369bb Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 21 Jan 2022 11:44:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=9A=97=E9=BB=91=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/functions/web.js          |   1 +
 resources/assets/js/pages/manage/calendar.vue |  10 +-
 resources/assets/js/pages/manage/file.vue     |  14 +-
 resources/assets/js/store/state.js            | 219 +++++++++---------
 resources/assets/sass/app.scss                |   1 +
 .../sass/components/drawer-overlay.scss       |  12 +-
 resources/assets/sass/dark.scss               |  95 ++++++--
 resources/assets/sass/fileicon.scss           |  68 ++++++
 .../sass/pages/components/project-list.scss   |   2 +-
 resources/assets/sass/pages/page-file.scss    | 196 +---------------
 resources/assets/sass/pages/page-setting.scss |   2 +-
 11 files changed, 285 insertions(+), 335 deletions(-)
 create mode 100644 resources/assets/sass/fileicon.scss

diff --git a/resources/assets/js/functions/web.js b/resources/assets/js/functions/web.js
index 437b7a7c..9bb74b1b 100755
--- a/resources/assets/js/functions/web.js
+++ b/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}
                     }
diff --git a/resources/assets/js/pages/manage/calendar.vue b/resources/assets/js/pages/manage/calendar.vue
index 1b802b45..9c427fd7 100644
--- a/resources/assets/js/pages/manage/calendar.vue
+++ b/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;
diff --git a/resources/assets/js/pages/manage/file.vue b/resources/assets/js/pages/manage/file.vue
index 60c1a855..fb091790 100644
--- a/resources/assets/js/pages/manage/file.vue
+++ b/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
                             ]);
diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
index 78294b6f..e3c78848 100644
--- a/resources/assets/js/store/state.js
+++ b/resources/assets/js/store/state.js
@@ -1,120 +1,125 @@
-const state = {};
+const stateData = {
+    // 浏览器宽度
+    windowWidth: window.innerWidth,
 
-// 浏览器宽度
-state.windowWidth = window.innerWidth;
+    // 浏览器宽度≤768返回true
+    windowMax768: window.innerWidth <= 768,
 
-// 浏览器宽度≤768返回true
-state.windowMax768 = window.innerWidth <= 768;
+    // 数据缓存
+    cacheLoading: {},
 
-// 数据缓存
-state.cacheLoading = {};
+    // DrawerOverlay
+    cacheDrawerIndex: 0,
+    cacheDrawerOverlay: [],
 
-// DrawerOverlay
-state.cacheDrawerIndex = 0;
-state.cacheDrawerOverlay = [];
+    // User
+    cacheUserActive: {},
+    cacheUserWait: [],
+    cacheUserBasic: $A.getStorageArray("cacheUserBasic"),
 
-// User
-state.cacheUserActive = {};
-state.cacheUserWait = [];
-state.cacheUserBasic = $A.getStorageArray("cacheUserBasic");
+    // Dialog
+    cacheDialogs: $A.getStorageArray("cacheDialogs"),
 
-// Dialog
-state.cacheDialogs = $A.getStorageArray("cacheDialogs");
+    // Project
+    cacheProjects: $A.getStorageArray("cacheProjects"),
+    cacheColumns: $A.getStorageArray("cacheColumns"),
+    cacheTasks: $A.getStorageArray("cacheTasks"),
+    cacheProjectParameter: $A.getStorageArray("cacheProjectParameter"),
 
-// Project
-state.cacheProjects = $A.getStorageArray("cacheProjects");
-state.cacheColumns = $A.getStorageArray("cacheColumns");
-state.cacheTasks = $A.getStorageArray("cacheTasks");
-state.cacheProjectParameter = $A.getStorageArray("cacheProjectParameter");
+    // ServerUrl
+    cacheServerUrl: $A.getStorageString("cacheServerUrl"),
+
+    // Ajax
+    ajaxWsReady: false,
+    ajaxWsListener: [],
+
+    // Websocket
+    ws: null,
+    wsMsg: {},
+    wsCall: {},
+    wsTimeout: null,
+    wsOpenNum: 0,
+    wsListener: {},
+    wsReadTimeout: null,
+    wsReadWaitList: [],
+
+    // 会员信息
+    userInfo: $A.getStorageJson("userInfo"),
+    userId: state.userInfo.userid = $A.runNum(state.userInfo.userid),
+    userToken: state.userInfo.token,
+    userIsAdmin: $A.inArray("admin", state.userInfo.identity),
+    userOnline: {},
+
+    // 会话聊天
+    dialogMsgs: [],
+    dialogOpenId: 0,
+
+    // 文件
+    files: [],
+    fileContent: {},
+
+    // 项目任务
+    projectId: 0,
+    projectTotal: 0,
+    projectLoad: 0,
+    taskId: 0,
+    taskCompleteTemps: [],
+    taskContents: [],
+    taskFiles: [],
+    taskLogs: [],
+
+    // 任务等待状态
+    taskLoading: [],
+
+    // 任务流程信息
+    taskFlows: [],
+    taskFlowItems: [],
+
+    // 任务优先级
+    taskPriority: [],
+
+    // 列表背景色
+    columnColorList: [
+        {name: '默认', color: ''},
+        {name: '灰色', color: '#444444'},
+        {name: '棕色', color: '#947364'},
+        {name: '橘色', color: '#faaa6c'},
+        {name: '黄色', color: '#f2d86d'},
+        {name: '绿色', color: '#73b45c'},
+        {name: '蓝色', color: '#51abea'},
+        {name: '紫色', color: '#b583e3'},
+        {name: '粉色', color: '#ff819c'},
+        {name: '红色', color: '#ff7070'},
+    ],
+
+    // 任务背景色
+    taskColorList: [
+        {name: '默认', color: ''},
+        {name: '黄色', color: '#fffae6'},
+        {name: '蓝色', color: '#e5f5ff'},
+        {name: '绿色', color: '#ecffe5'},
+        {name: '粉色', color: '#ffeaee'},
+        {name: '紫色', color: '#f6ecff'},
+        {name: '灰色', color: '#f3f3f3'},
+    ],
+
+    // 主题皮肤
+    themeMode: $A.getStorageString("cacheThemeMode", "auto"),
+    themeList: [
+        {name: '跟随系统', value: 'auto'},
+        {name: '明亮', value: 'light'},
+        {name: '暗黑', value: 'dark'},
+    ],
+    themeIsDark: false,
+};
 
 // ServerUrl
-state.cacheServerUrl = $A.getStorageString("cacheServerUrl")
-if (state.cacheServerUrl) {
-    window.systemInfo.apiUrl = state.cacheServerUrl;
+if (stateData.cacheServerUrl) {
+    window.systemInfo.apiUrl = stateData.cacheServerUrl;
 }
 
-// Ajax
-state.ajaxWsReady = false;
-state.ajaxWsListener = [];
-
-// Websocket
-state.ws = null;
-state.wsMsg = {};
-state.wsCall = {};
-state.wsTimeout = null;
-state.wsOpenNum = 0;
-state.wsListener = {};
-state.wsReadTimeout = null;
-state.wsReadWaitList = [];
-
-// 会员信息
-state.userInfo = $A.getStorageJson("userInfo");
-state.userId = state.userInfo.userid = $A.runNum(state.userInfo.userid);
-state.userToken = state.userInfo.token;
-state.userIsAdmin = $A.inArray("admin", state.userInfo.identity);
-state.userOnline = {};
-
-// 会话聊天
-state.dialogMsgs = [];
-state.dialogOpenId = 0;
-
-// 文件
-state.files = [];
-state.fileContent = {};
-
-// 项目任务
-state.projectId = 0;
-state.projectTotal = 0;
-state.projectLoad = 0;
-state.taskId = 0;
-state.taskCompleteTemps = [];
-state.taskContents = [];
-state.taskFiles = [];
-state.taskLogs = [];
-
-// 任务等待状态
-state.taskLoading = [];
-
-// 任务流程信息
-state.taskFlows = [];
-state.taskFlowItems = [];
-
-// 任务优先级
-state.taskPriority = [];
-
-// 列表背景色
-state.columnColorList = [
-    {name: '默认', color: ''},
-    {name: '灰色', color: '#444444'},
-    {name: '棕色', color: '#947364'},
-    {name: '橘色', color: '#faaa6c'},
-    {name: '黄色', color: '#f2d86d'},
-    {name: '绿色', color: '#73b45c'},
-    {name: '蓝色', color: '#51abea'},
-    {name: '紫色', color: '#b583e3'},
-    {name: '粉色', color: '#ff819c'},
-    {name: '红色', color: '#ff7070'},
-];
-
-// 任务背景色
-state.taskColorList = [
-    {name: '默认', color: ''},
-    {name: '黄色', color: '#fffae6'},
-    {name: '蓝色', color: '#e5f5ff'},
-    {name: '绿色', color: '#ecffe5'},
-    {name: '粉色', color: '#ffeaee'},
-    {name: '紫色', color: '#f6ecff'},
-    {name: '灰色', color: '#f3f3f3'},
-];
-
 // 主题皮肤
-state.themeMode = $A.getStorageString("cacheThemeMode", "auto");
-state.themeList = [
-    {name: '跟随系统', value: 'auto'},
-    {name: '明亮', value: 'light'},
-    {name: '暗黑', value: 'dark'},
-];
-switch (state.themeMode) {
+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
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 63b8ed40..ffc42f0d 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -1,4 +1,5 @@
 @import "var";
+@import "fileicon";
 @import "element";
 @import "fonts-ft";
 @import "taskfont";
diff --git a/resources/assets/sass/components/drawer-overlay.scss b/resources/assets/sass/components/drawer-overlay.scss
index 6cd82e22..9241d9c5 100644
--- a/resources/assets/sass/components/drawer-overlay.scss
+++ b/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);
+                    }
+                }
             }
         }
 
diff --git a/resources/assets/sass/dark.scss b/resources/assets/sass/dark.scss
index 78eaedaa..37cacdbf 100644
--- a/resources/assets/sass/dark.scss
+++ b/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;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
 }
diff --git a/resources/assets/sass/fileicon.scss b/resources/assets/sass/fileicon.scss
new file mode 100644
index 00000000..0369477a
--- /dev/null
+++ b/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");
+    }
+}
diff --git a/resources/assets/sass/pages/components/project-list.scss b/resources/assets/sass/pages/components/project-list.scss
index 57ca10c9..07773e93 100644
--- a/resources/assets/sass/pages/components/project-list.scss
+++ b/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,
diff --git a/resources/assets/sass/pages/page-file.scss b/resources/assets/sass/pages/page-file.scss
index f5b7f19d..b016bdb2 100644
--- a/resources/assets/sass/pages/page-file.scss
+++ b/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");
         }
     }
 }
diff --git a/resources/assets/sass/pages/page-setting.scss b/resources/assets/sass/pages/page-setting.scss
index a809fea0..725c1abd 100755
--- a/resources/assets/sass/pages/page-setting.scss
+++ b/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;