From 31940c98607a657d6f648b4162c3cba3dc8951e2 Mon Sep 17 00:00:00 2001
From: XiNGRZ <hi@xingrz.me>
Date: Sun, 24 Mar 2024 15:12:49 +0800
Subject: [PATCH] Add icon size setter

---
 src/components/AppMenu.vue            | 12 +++++++++++-
 src/components/AppMenu/SizeSetter.vue | 27 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AppMenu/SizeSetter.vue

diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue
index 7617da6..fcecec3 100644
--- a/src/components/AppMenu.vue
+++ b/src/components/AppMenu.vue
@@ -11,13 +11,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, type ComponentPublicInstance } from 'vue';
+import { h, ref, type ComponentPublicInstance } from 'vue';
 import {
   type MenuOption,
   NButton,
   NDropdown,
 } from 'naive-ui';
 
+import SizeSetter from './AppMenu/SizeSetter.vue';
+
 const menuItems: MenuOption[] = [
   {
     label: '文件',
@@ -53,6 +55,14 @@ const menuItems: MenuOption[] = [
     label: '视图',
     key: 'view',
     children: [
+      {
+        key: 'icon-size',
+        type: 'render',
+        render: () => h(SizeSetter),
+      },
+      {
+        type: 'divider',
+      },
       {
         label: '放大',
         key: 'zoom-in',
diff --git a/src/components/AppMenu/SizeSetter.vue b/src/components/AppMenu/SizeSetter.vue
new file mode 100644
index 0000000..b598e78
--- /dev/null
+++ b/src/components/AppMenu/SizeSetter.vue
@@ -0,0 +1,27 @@
+<template>
+  <div :class="$style.setter">
+    <span>图标大小</span>
+    <n-slider v-model:value="editorStore.size" :min="20" :max="60" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  NSlider,
+} from 'naive-ui';
+
+import { useEditorStore } from '@/stores/editor';
+
+const editorStore = useEditorStore();
+</script>
+
+<style lang="scss" module>
+.setter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 200px;
+  padding: 8px var(--n-option-prefix-width);
+  font-size: var(--n-font-size);
+}
+</style>