Add icon size setter

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',

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>