feat: 新增白天/黑夜主题 (#129)

添加左右组件和属性的抽屉效果,添加主题切换功能
woai3c · Nov 30, 2023 · be8dc5e · be8dc5e
1 parent 75bf7fe
commit be8dc5e
Show file tree

Hide file tree

Showing 16 changed files with 505 additions and 55 deletions.
diff --git a/src/components/CanvasAttr.vue b/src/components/CanvasAttr.vue
@@ -45,7 +45,7 @@ export default {
         border-bottom: 2px solid #e4e7ed;
         font-size: 14px;
         font-weight: 500;
-        color: #303133;
+        color: var(--text-color);
     }
 }
 </style>
diff --git a/src/components/ComponentList.vue b/src/components/ComponentList.vue
@@ -32,20 +32,22 @@ export default {
 
 <style lang="scss" scoped>
 .component-list {
+    opacity: 1;
     height: 65%;
-    padding: 10px;
+    padding: 8px;
     display: grid;
+    position: relative;
     grid-gap: 10px 19px;
     grid-template-columns: repeat(auto-fill, 80px);
     grid-template-rows: repeat(auto-fill, 40px);
+    transition: opacity .5s .5s;
 
     .list {
         width: 80px;
         height: 40px;
         border: 1px solid #ddd;
         cursor: grab;
         text-align: center;
-        color: #333;
         padding: 2px 5px;
         display: flex;
         align-items: center;

diff --git a/src/components/Editor/AceEditor.vue b/src/components/Editor/AceEditor.vue
@@ -126,6 +126,7 @@ export default {
 .editor {
     margin: 10px 5px;
 }
+
 .btn {
     margin-top: 5px;
 }

diff --git a/src/components/Editor/Grid.vue b/src/components/Editor/Grid.vue
@@ -15,7 +15,7 @@
                 <path 
                     d="M 7.236328125 0 L 0 0 0 7.236328125" 
                     fill="none" 
-                    stroke="rgba(207, 207, 207, 0.3)" 
+                    :stroke="isDarkMode ? 'rgba(207, 207, 207, 0.5)' : 'rgba(207, 207, 207, 0.3)'" 
                     stroke-width="1"
                 >
                 </path>
@@ -30,7 +30,7 @@
                 <path 
                     d="M 36.181640625 0 L 0 0 0 36.181640625" 
                     fill="none" 
-                    stroke="rgba(186, 186, 186, 0.5)" 
+                    :stroke="isDarkMode ? 'rgba(186, 186, 186)' : 'rgba(186, 186, 186, 0.5)'" 
                     stroke-width="1"
                 >
                 </path>
@@ -40,6 +40,14 @@
     </svg>
 </template>
 
+<script>
+export default {
+    props: {
+        isDarkMode: Boolean,
+    },
+}
+</script>
+
 <style lang="scss" scoped>
 .grid {
     position: absolute;

diff --git a/src/components/Editor/Shape.vue b/src/components/Editor/Shape.vue
@@ -79,6 +79,7 @@ export default {
     computed: mapState([
         'curComponent',
         'editor',
+        'showRight',
     ]),
     mounted() {
         // 用于 Group 组件
@@ -277,6 +278,10 @@ export default {
             e.stopPropagation()
             e.preventDefault()
             this.$store.commit('hideContextMenu')
+            // 打开右侧组件列表
+            if (!this.$store.state.rightList) {
+                this.$store.commit('isShowRightList')
+            }
         },
 
         handleMouseDownOnPoint(point, e) {
@@ -300,7 +305,7 @@ export default {
             const editorRectInfo = this.editor.getBoundingClientRect()
 
             // 获取 point 与实际拖动基准点的差值 @justJokee
-            // fix https://github.com/woai3c/visual-drag-demo/issues/26#issue-937686285
+            // fix https://github.com/woai3c/visual-drag-demo/issues/26#issue-937686285 
             const pointRect = e.target.getBoundingClientRect()
             // 当前点击圆点相对于画布的中心坐标
             const curPoint = {

diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
@@ -12,7 +12,7 @@
         @mousedown="handleMouseDown"
     >
         <!-- 网格线 -->
-        <Grid />
+        <Grid :is-dark-mode="isDarkMode" />
 
         <!--页面组件列表展示-->
         <Shape
@@ -112,6 +112,7 @@ export default {
         'curComponent',
         'canvasStyleData',
         'editor',
+        'isDarkMode',
     ]),
     mounted() {
         // 获取编辑器元素

diff --git a/src/components/EventList.vue b/src/components/EventList.vue
@@ -22,7 +22,7 @@
                     :key="item.key"
                     :label="item.label"
                     :name="item.key"
-                    style="padding: 0 20px;"
+                    style="padding: 40px 20px 0;"
                 >
                     <el-input
                         v-if="item.key == 'redirect'"

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -42,7 +42,7 @@ export default {
 
     .modal {
         width: 400px;
-        background: #fff;
+        background: var(--main-bg-color);
         height: 100%;
     }
 }

diff --git a/src/components/RealTimeComponentList.vue b/src/components/RealTimeComponentList.vue
@@ -37,6 +37,9 @@ export default {
         },
 
         onClick(index) {
+            if (!this.$store.state.rightList) {
+                this.$store.commit('isShowRightList')
+            }
             this.setCurComponent(index)
         },
 
@@ -83,6 +86,7 @@ export default {
         padding: 0 10px;
         position: relative;
         user-select: none;
+        opacity: 1;
 
         &:active {
             cursor: grabbing;

diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="toolbar">
+        <div :class="isDarkMode ? 'dark toolbar' : 'toolbar'">
             <el-button @click="handleAceEditorChange">JSON</el-button>
             <el-button @click="undo">撤消</el-button>
             <el-button @click="redo">重做</el-button>
@@ -19,6 +19,7 @@
             <el-button @click="clearCanvas">清空画布</el-button>
             <el-button :disabled="!areaData.components.length" @click="compose">组合</el-button>
             <el-button
+
                 :disabled="!curComponent || curComponent.isLock || curComponent.component != 'Group'"
                 @click="decompose"
             >
@@ -31,14 +32,23 @@
 
             <div class="canvas-config">
                 <span>画布大小</span>
-                <input v-model="canvasStyleData.width">
+                <input v-model="canvasStyleData.width" />
                 <span>*</span>
-                <input v-model="canvasStyleData.height">
+                <input v-model="canvasStyleData.height" />
             </div>
             <div class="canvas-config">
                 <span>画布比例</span>
-                <input v-model="scale" @input="handleScaleChange"> %
+                <input v-model="scale" @input="handleScaleChange" /> %
             </div>
+            <el-switch
+                v-model="switchValue"
+                class="dark-mode-switch"
+                active-icon-class="el-icon-sunny"
+                inactive-icon-class="el-icon-moon"
+                active-color="#000"
+                @change="handleToggleDarkMode"
+            >
+            </el-switch>
         </div>
 
         <!-- 预览 -->
@@ -67,37 +77,43 @@ export default {
             timer: null,
             isScreenshot: false,
             scale: 100,
+            switchValue: false,
         }
     },
-    computed: mapState([
-        'componentData',
-        'canvasStyleData',
-        'areaData',
-        'curComponent',
-        'curComponentIndex',
-    ]),
+    computed: mapState(['componentData', 'canvasStyleData', 'areaData', 'curComponent', 'curComponentIndex', 'isDarkMode']),
+
     created() {
         eventBus.$on('preview', this.preview)
         eventBus.$on('save', this.save)
         eventBus.$on('clearCanvas', this.clearCanvas)
 
         this.scale = this.canvasStyleData.scale
+        const savedMode = JSON.parse(localStorage.getItem('isDarkMode'))
+        if (savedMode) {
+            this.handleToggleDarkMode(savedMode)
+        }
     },
     methods: {
+        handleToggleDarkMode(value) {
+            if (value !== null) {
+                this.$store.commit('toggleDarkMode', value)
+                this.switchValue = value
+            }
+        },
         handleScaleChange() {
             clearTimeout(this.timer)
             this.timer = setTimeout(() => {
                 // 画布比例设一个最小值，不能为 0
                 // eslint-disable-next-line no-bitwise
-                this.scale = (~~this.scale) || 1
+                this.scale = ~~this.scale || 1
                 changeComponentsSizeWithScale(this.scale)
             }, 1000)
         },
 
         handleAceEditorChange() {
             this.isShowAceEditor = !this.isShowAceEditor
         },
-        
+
         closeEditor() {
             this.handleAceEditorChange()
         },
@@ -210,21 +226,22 @@ export default {
     padding: 15px 10px;
     white-space: nowrap;
     overflow-x: auto;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
+    background: var(--main-bg-color);
+    border-color: var(--ace-bg-color);
+    border-bottom: 1px solid var(--border-color);
 
     .canvas-config {
         display: inline-block;
         margin-left: 10px;
         font-size: 14px;
-        color: #606266;
+        color: var(--text-color);
 
         input {
             width: 50px;
             margin-left: 4px;
             outline: none;
             padding: 0 5px;
-            border: 1px solid #ddd;
+            border: 1px solid var(--border-color);
             color: #606266;
         }
 
@@ -233,14 +250,25 @@ export default {
         }
     }
 
+    .el-button--small {
+        background: var(--main-bg-color);
+        border: 1px solid var(--toolbar-border-color);
+        color: var(--button-text-color);
+    }
+
+    .el-button--small:hover {
+        background: var(--button-active-text-color);
+        border-color: var(--actived-bg-color);
+        color: var(--main-bg-color);
+    }
+
     .insert {
         display: inline-block;
         line-height: 1;
         white-space: nowrap;
         cursor: pointer;
-        background: #fff;
-        border: 1px solid #dcdfe6;
-        color: #606266;
+        border: 1px solid var(--toolbar-border-color);
+        color: var(--text-color);
         appearance: none;
         text-align: center;
         box-sizing: border-box;
@@ -252,16 +280,33 @@ export default {
         font-size: 12px;
         border-radius: 3px;
         margin-left: 10px;
+    }
+
+    .insert {
+        background: var(--main-bg-color);
+        border: 1px solid var(--toolbar-border-color);
+        color: var(--button-text-color);
 
         &:active {
-            color: #3a8ee6;
-            border-color: #3a8ee6;
-            outline: 0;
+            background: var(--button-active-text-color);
+            border-color: var(--actived-bg-color);
+            color: var(--main-bg-color);
         }
 
         &:hover {
-            background-color: #ecf5ff;
-            color: #3a8ee6;
+            background: var(--button-active-text-color);
+            border-color: var(--actived-bg-color);
+            color: var(--main-bg-color);
+        }
+    }
+
+    .el-button.is-disabled {
+        color: var(--disable-text-color);
+        border-color: var(--disable-border-color);
+        background: var(--main-bg-color);
+
+        &:hover {
+            background: var(--main-bg-color);
         }
     }
 }

diff --git a/src/custom-component/VButton/Component.vue b/src/custom-component/VButton/Component.vue
@@ -26,10 +26,10 @@ export default {
     line-height: 1;
     white-space: nowrap;
     cursor: pointer;
-    background: #fff;
+    background: var(--main-bg-color);
     border: 1px solid #dcdfe6;
-    color: #606266;
-    -webkit-appearance: none;
+    color: var(--text-color);
+    appearance: none;
     text-align: center;
     box-sizing: border-box;
     outline: 0;

diff --git a/src/main.js b/src/main.js
@@ -10,6 +10,7 @@ import '@/styles/animate.scss'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@/styles/reset.css'
 import '@/styles/global.scss'
+import '@/styles/dark.scss'
 
 Vue.use(ElementUI, { size: 'small' })
 Vue.config.productionTip = false
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,6 +126,7 @@ export default { @@
     .editor {
         margin: 10px 5px;
     }
     .btn {
         margin-top: 5px;
     }
@@ Expand Down @@