feat: optional edit area location (#267)

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -26,6 +26,13 @@
             ></i>
             暗黑模式
           </el-dropdown-item>
+          <el-dropdown-item divided @click.native="isEditOnLeftChanged">
+            <i
+              class="el-icon-check"
+              :style="{ opacity: isEditOnLeft ? 1 : 0 }"
+            ></i>
+            左侧编辑
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-dropdown>
@@ -188,6 +195,7 @@ export default {
       config,
       citeStatus: false,
       isMacCodeBlock: true,
+      isEditOnLeft: true,
       showResetConfirm: false,
       selectFont: ``,
       selectSize: ``,
@@ -249,6 +257,7 @@ export default {
       nightMode: (state) => state.nightMode,
       currentCiteStatus: (state) => state.citeStatus,
       currentIsMacCodeBlock: (state) => state.isMacCodeBlock,
+      currentIsEditOnLeft: (state) => state.isEditOnLeft,
     }),
   },
   methods: {
@@ -333,6 +342,10 @@ export default {
       this.setIsMacCodeBlock(this.isMacCodeBlock)
       this.$emit(`refresh`)
     },
+    isEditOnLeftChanged() {
+      this.isEditOnLeft = !this.isEditOnLeft
+      this.setIsEditOnLeft(this.isEditOnLeft)
+    },
     // 复制到微信公众号
     copy() {
       this.$emit(`startCopy`)
@@ -430,6 +443,7 @@ export default {
       `setCurrentCodeTheme`,
       `setWxRendererOptions`,
       `setIsMacCodeBlock`,
+      `setIsEditOnLeft`,
     ]),
   },
   mounted() {
@@ -439,6 +453,7 @@ export default {
     this.selectCodeTheme = this.codeTheme
     this.citeStatus = this.currentCiteStatus
     this.isMacCodeBlock = this.currentIsMacCodeBlock
+    this.isEditOnLeft = this.currentIsEditOnLeft
 
     const fileInput = this.$refs.fileInput
     fileInput.onchange = () => {

src/stores/index.js

@@ -26,6 +26,7 @@ export const useStore = defineStore(`store`, {
     nightMode: false,
     codeTheme: config.codeThemeOption[2].value,
     isMacCodeBlock: true,
+    isEditOnLeft: true,
   }),
   actions: {
     setEditorValue(data) {
@@ -61,6 +62,10 @@ export const useStore = defineStore(`store`, {
       this.isMacCodeBlock = data
       localStorage.setItem(`isMacCodeBlock`, data)
     },
+    setIsEditOnLeft(data) {
+      this.isEditOnLeft = data
+      localStorage.setItem(`isEditOnLeft`, data)
+    },
     themeChanged() {
       this.nightMode = !this.nightMode
       localStorage.setItem(`nightMode`, this.nightMode)
@@ -79,6 +84,7 @@ export const useStore = defineStore(`store`, {
       this.isMacCodeBlock = !(
         localStorage.getItem(`isMacCodeBlock`) === `false`
       )
+      this.isEditOnLeft = !(localStorage.getItem(`isEditOnLeft`) === `false`)
       this.wxRenderer = new WxRenderer({
         theme: setColor(this.currentColor),
         fonts: this.currentFont,

src/views/CodemirrorEditor.vue

@@ -22,6 +22,7 @@
       <el-main class="main-body">
         <el-row class="main-section">
           <el-col
+            :style="{ order: store.isEditOnLeft ? 0 : 1 }"
             :span="12"
             class="codeMirror-wrapper"
             ref="codeMirrorWrapper"
@@ -609,6 +610,13 @@ export default {
       window.PR.prettyPrint()
     }, 300)
   },
+  setup() {
+    const store = useStore()
+
+    return {
+      store,
+    }
+  },
 }
 </script>