Migrate to n-split

xingrz · Mar 27, 2024 · 5f95409 · 5f95409
1 parent 6955d03
commit 5f95409
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 89 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,45 +1,38 @@
 <template>
   <n-config-provider>
-    <resizable v-model:width="width">
-      <template v-slot:default>
+    <n-split direction="horizontal" :resize-trigger-size="8" v-model:size="editorStore.split">
+      <template #1>
         <editor v-model:content="editorStore.content" v-model:selection="editorStore.selection"
           v-model:scroll="editorStore.scroll" :icons="iconStore.icons" :size="editorStore.size" />
       </template>
-      <template v-slot:fixed>
+      <template #2>
         <scroller v-model:scroll="editorStore.scroll">
           <BSMap :content="editorStore.content" :size="editorStore.size" />
         </scroller>
       </template>
-    </resizable>
+      <template #resize-trigger>
+        <div :class="$style.resizer">
+        </div>
+      </template>
+    </n-split>
   </n-config-provider>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { NConfigProvider } from 'naive-ui';
+import {
+  NConfigProvider,
+  NSplit,
+} from 'naive-ui';
 
 import { useEditorStore } from '@/stores/editor';
 import { useIconStore } from '@/stores/icon';
 
-import Resizable from './components/Resizable.vue';
 import Scroller from './components/Scroller.vue';
 import BSMap from './components/BSMap.vue';
 import Editor from './components/Editor.vue';
 
 const editorStore = useEditorStore();
 const iconStore = useIconStore();
-
-const width = computed({
-  get(): number {
-    const max = window.innerWidth - 200;
-    const min = 200;
-    const width = editorStore.width;
-    return Math.max(Math.min(width, max), min);
-  },
-  set(v: number) {
-    editorStore.width = v;
-  }
-});
 </script>
 
 <style lang="scss" module>
@@ -49,4 +42,19 @@ const width = computed({
   padding: 0;
   overscroll-behavior: none;
 }
+
+.resizer {
+  height: 100%;
+  background: #cccccc;
+
+  transition: background-color 200ms;
+
+  &:hover {
+    background: #d5d5d5;
+  }
+
+  &:active {
+    background: #c0c0c0;
+  }
+}
 </style>
diff --git a/src/components/Resizable.vue b/src/components/Resizable.vue
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
@@ -8,7 +8,7 @@ const debouncedSetItem = debounce({ delay: 200 }, localStorage.setItem.bind(loca
 
 export const useEditorStore = defineStore('editor', () => {
   const size = ref(parseInt(localStorage.getItem('size') || '') || 20);
-  const width = ref(parseInt(localStorage.getItem('width') || '') || 200);
+  const split = ref(parseFloat(localStorage.getItem('split') || '') || 0.75);
   const content = ref(localStorage.getItem('content') || '');
   const scroll = ref(0);
   const selection = ref<ISelection>();
@@ -17,8 +17,8 @@ export const useEditorStore = defineStore('editor', () => {
     debouncedSetItem('size', String(value));
   });
 
-  watch(width, (value) => {
-    debouncedSetItem('width', String(value));
+  watch(split, (value) => {
+    debouncedSetItem('split', String(value));
   });
 
   watch(content, (value) => {
@@ -27,7 +27,7 @@ export const useEditorStore = defineStore('editor', () => {
 
   return {
     size,
-    width,
+    split,
     content,
     scroll,
     selection,