diff --git a/resources/assets/js/pages/manage/components/Calendar.vue b/resources/assets/js/pages/manage/components/Calendar.vue
index 274ff3f68..730f9ccf1 100644
--- a/resources/assets/js/pages/manage/components/Calendar.vue
+++ b/resources/assets/js/pages/manage/components/Calendar.vue
@@ -1,8 +1,9 @@
 <template>
-    <div id="calendar" ref="tuiCalendar" class="calendar-wrapper"></div>
+    <div ref="tuiCalendar" className="calendar-wrapper"></div>
 </template>
 <script>
 import Calendar from 'tui-calendar-hi';
+
 export default {
     name: 'Calendar',
     props: {
@@ -21,7 +22,7 @@ export default {
                 let notHave = false;
 
                 value.forEach(schedule => {
-                    notHave = [ 'start', 'category' ].some(prop => !schedule.hasOwnProperty(prop));
+                    notHave = ['start', 'category'].some(prop => !schedule.hasOwnProperty(prop));
                 });
 
                 return !notHave;
@@ -118,21 +119,21 @@ export default {
         },
         theme: {
             handler(newValue) {
-                this.calendarInstance.setTheme(this.cloneData(newValue));
+                this.calendarInstance.setTheme($A.cloneJSON(newValue));
             },
             deep: true
         },
         week: {
             handler(newValue) {
                 const silent = this.view !== 'week' && this.view !== 'day';
-                this.calendarInstance.setOptions({week: this.cloneData(newValue)}, silent);
+                this.calendarInstance.setOptions({week: $A.cloneJSON(newValue)}, silent);
             },
             deep: true
         },
         month: {
             handler(newValue) {
                 const silent = this.view !== 'month';
-                this.calendarInstance.setOptions({month: this.cloneData(newValue)}, silent);
+                this.calendarInstance.setOptions({month: $A.cloneJSON(newValue)}, silent);
             },
             deep: true
         },
@@ -150,37 +151,31 @@ export default {
         }
     },
     mounted() {
-        this.init();
+        this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
+            defaultView: this.view,
+            taskView: this.taskView,
+            scheduleView: this.scheduleView,
+            theme: this.theme,
+            template: this.template,
+            week: this.week,
+            month: this.month,
+            calendars: this.calendars,
+            useCreationPopup: this.useCreationPopup,
+            useDetailPopup: this.useDetailPopup,
+            timezones: this.timezones,
+            disableDblClick: this.disableDblClick,
+            disableClick: this.disableClick,
+            isReadOnly: this.isReadOnly,
+            usageStatistics: this.usageStatistics
+        });
+        this.addEventListeners();
+        this.reflectSchedules();
     },
     beforeDestroy() {
         this.calendarInstance.off();
         this.calendarInstance.destroy();
     },
     methods: {
-        init(){
-        this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
-                    defaultView: this.view,
-                    taskView: this.taskView,
-                    scheduleView: this.scheduleView,
-                    theme: this.theme,
-                    template: this.template,
-                    week: this.week,
-                    month: this.month,
-                    calendars: this.calendars,
-                    useCreationPopup: this.useCreationPopup,
-                    useDetailPopup: this.useDetailPopup,
-                    timezones: this.timezones,
-                    disableDblClick: this.disableDblClick,
-                    disableClick: this.disableClick,
-                    isReadOnly: this.isReadOnly,
-                    usageStatistics: this.usageStatistics,
-                });
-        this.addEventListeners();
-        this.reflectSchedules();
-        },
-        cloneData(data) {
-            return JSON.parse(JSON.stringify(data));
-        },
         addEventListeners() {
             for (const eventName of Object.keys(this.$listeners)) {
                 this.calendarInstance.on(eventName, (...args) => this.$emit(eventName, ...args));
diff --git a/resources/assets/js/skin/index.js b/resources/assets/js/skin/index.js
deleted file mode 100644
index 443af52f1..000000000
--- a/resources/assets/js/skin/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const skinOptionsList = [
-    {
-        lable: "默认",
-        key: "white",
-    },
-    {
-        lable: "暗黑主题",
-        key: "black",
-    },
-];
-
-const calendarColorList={
-    white:
-        {
-            'common.border': '1px solid #f4f5f5',
-            'common.holiday.color': '#333',
-            'common.saturday.color': '#333',
-            'common.dayname.color': '#333',
-            'common.backgroundColor':'#ffffff',
-         
-        },
-    
-    black: 
-        {
-            'common.border': '1px solid #ffffff',
-            'common.holiday.color': '#ffffff',
-            'common.saturday.color': '#ffffff',
-            'common.dayname.color': '#ffffff',
-            'common.backgroundColor':'#171717',
-            'common.creationGuide.color': '#ffffff',
-            'common.creationGuide.color': '#ffffff',
-            'common.today.color': '#ffffff',
-        },
-}
-
-
-export { skinOptionsList,calendarColorList };
diff --git a/resources/assets/js/store/mutations.js b/resources/assets/js/store/mutations.js
index 32cbdddd1..eca8c2784 100644
--- a/resources/assets/js/store/mutations.js
+++ b/resources/assets/js/store/mutations.js
@@ -1,9 +1,4 @@
 export default {
-    /**
-     * 修改当前皮肤类型
-     
-     */
-    setSkinType(state,val){
-        state.skinType=val
-    }
+
 }
+
diff --git a/resources/assets/sass/skin.scss b/resources/assets/sass/skin.scss
deleted file mode 100644
index 97f5ba864..000000000
--- a/resources/assets/sass/skin.scss
+++ /dev/null
@@ -1,133 +0,0 @@
-//暗黑皮肤
-.black {
-    background-color: #171717;
-    > .manage-box-menu {
-        background-color: #202020;
-        > ul {
-            > li {
-                &.menu-project {
-                    >ul{
-                        >li{
-                            &.active {
-                                .project-h1 {
-                                    background-color: #b4b3b3;
-                                }
-                            }
-                        }
-                    }
-                  
-                }
-                color: #ffffff;
-                
-                &.active {
-                        background-color: #b4b3b3 !important;
-                }
-            }
-        }
-
-        .title {
-            color: #ffffff !important;
-        }
-        .manage-box-title {
-            background-color: #b4b3b3 !important;
-            color: #ffffff;
-        }
-    }
-    .manage-box-main {
-        .messenger-select:after {
-            background-color: #ffffff;
-        }
-        .dashboard-wrapper {
-            color: #ffffff;
-        }
-        .dashboard-hello {
-            color: #ffffff;
-        }
-        .dashboard-desc {
-            color: #ffffff;
-        }
-        .dashboard-list {
-            li {
-                background-color: #202020;
-            }
-        }
-        .calendar-title {
-            h1 {
-                color: #ffffff !important;
-            }
-        }
-    }
-    .messenger-wrapper {
-        color: #ffffff;
-        .dialog {
-            .active {
-                background-color: #979595 !important;
-            }
-        }
-        .dialog-box {
-            span {
-                color: #ffffff !important;
-            }
-            .dialog-text {
-                color: #ffffff !important;
-            }
-        }
-        .dialog-wrapper {
-            background-color: #171717;
-        }
-        .messenger-nav > p {
-            color: #ffffff !important;
-        }
-    }
-    .file-wrapper {
-        .file-nav {
-            h1 {
-                color: #ffffff !important;
-            }
-        }
-        .file-navigator {
-            > ul {
-                > li {
-                    color: #ffffff !important;
-                }
-            }
-        }
-        .file-list {
-            > ul {
-                > li {
-                    .file-name {
-                        color: #ffffff;
-                    }
-                }
-            }
-        }
-    }
-    .page-project {
-        .project-list {
-            background-color: #171717;
-            color: #ffffff;
-            .project-title {
-                h1 {
-                    color: #ffffff;
-                }
-            }
-            .project-subtitle {
-                color: #ffffff;
-            }
-            .column-head {
-                background-color: #202020;
-            }
-            .add-column {
-                background-color: #202020;
-                color: #ffffff;
-            }
-            .task-item {
-                background-color: #202020 !important;
-                color: #ffffff !important;
-            }
-            .add-placeholder {
-                color: #ffffff;
-            }
-        }
-    }
-}