diff --git a/web/src/App.vue b/web/src/App.vue
index 8dfdf0f..4f1a027 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Toasts from '@@/components/Toasts.vue'
+import Toasts from '@@/components/Toasts/index.vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import { useUserStore } from '@/pinia/stores/user'
 import { navigationError, router } from '@/router'
diff --git a/web/src/common/components/AppStatus.vue b/web/src/common/components/AppStatus/index.vue
similarity index 100%
rename from web/src/common/components/AppStatus.vue
rename to web/src/common/components/AppStatus/index.vue
diff --git a/web/src/common/components/FontPicker.vue b/web/src/common/components/FontPicker/index.vue
similarity index 96%
rename from web/src/common/components/FontPicker.vue
rename to web/src/common/components/FontPicker/index.vue
index 117937e..245d546 100644
--- a/web/src/common/components/FontPicker.vue
+++ b/web/src/common/components/FontPicker/index.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { Settings } from '../../pinia/stores/settings'
+import type { Settings } from '../../../pinia/stores/settings'
 import { preferencesApi } from '@@/apis/preferences'
 import { toast } from '@@/utils/notifications'
 import { isCancel } from 'axios'
 import { computed, ref } from 'vue'
 import { useUserStore } from '@/pinia/stores/user'
-import { loadSettings, settings, SettingsAppearanceError, updateSettings } from '../../pinia/stores/settings'
-import { customFonts, loadFonts } from '../appearance/fonts'
-import { FONT_PRESETS } from '../appearance/typography'
-import Icon from './Icon.vue'
+import { loadSettings, settings, SettingsAppearanceError, updateSettings } from '../../../pinia/stores/settings'
+import { customFonts, loadFonts } from '../../appearance/fonts'
+import { FONT_PRESETS } from '../../appearance/typography'
+import Icon from '../Icon/index.vue'
 
 const props = defineProps<{ id: string, setting: 'uiFont' | 'textFont' | 'codeFont' }>()
 const user = useUserStore()
diff --git a/web/src/common/components/Icon.vue b/web/src/common/components/Icon/index.vue
similarity index 73%
rename from web/src/common/components/Icon.vue
rename to web/src/common/components/Icon/index.vue
index 2f6f33f..6503bfe 100644
--- a/web/src/common/components/Icon.vue
+++ b/web/src/common/components/Icon/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconName } from '../utils/icons'
-import { iconPaths } from '../utils/icons'
+import type { IconName } from '../../utils/icons'
+import { iconPaths } from '../../utils/icons'
 
-export type { IconName } from '../utils/icons'
+export type { IconName } from '../../utils/icons'
 defineProps<{ name: IconName, size?: number }>()
 </script>
 
diff --git a/web/src/common/components/InlineAppearance.vue b/web/src/common/components/InlineAppearance/index.vue
similarity index 96%
rename from web/src/common/components/InlineAppearance.vue
rename to web/src/common/components/InlineAppearance/index.vue
index 5be4c73..46c0f35 100644
--- a/web/src/common/components/InlineAppearance.vue
+++ b/web/src/common/components/InlineAppearance/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { InlineStyles } from '../markdown/inline-styles'
+import type { InlineStyles } from '../../markdown/inline-styles'
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { settings } from '../../pinia/stores/settings'
-import { fixedThemeMode } from '../appearance/appearance'
-import { HOLLOW, INLINE_FONTS, SHADOW } from '../markdown/inline-styles'
+import { settings } from '../../../pinia/stores/settings'
+import { fixedThemeMode } from '../../appearance/appearance'
+import { HOLLOW, INLINE_FONTS, SHADOW } from '../../markdown/inline-styles'
 
 const props = defineProps<{ styles: InlineStyles, baseSize: number }>()
 const emit = defineEmits<{ change: [patch: InlineStyles], clear: [] }>()
diff --git a/web/src/common/components/PluginMount.vue b/web/src/common/components/PluginMount/index.vue
similarity index 81%
rename from web/src/common/components/PluginMount.vue
rename to web/src/common/components/PluginMount/index.vue
index 9996842..fcc3e2e 100644
--- a/web/src/common/components/PluginMount.vue
+++ b/web/src/common/components/PluginMount/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { OwnedView } from '../plugins/registry'
+import type { OwnedView } from '../../plugins/registry'
 import { onBeforeUnmount, ref, watch } from 'vue'
-import { mountContent } from '../plugins/mount'
+import { mountContent } from '../../plugins/mount'
 
 const props = defineProps<{ view: OwnedView }>()
 const container = ref<HTMLElement>()
diff --git a/web/src/common/components/Toasts.vue b/web/src/common/components/Toasts/index.vue
similarity index 100%
rename from web/src/common/components/Toasts.vue
rename to web/src/common/components/Toasts/index.vue
diff --git a/web/src/pages/login/index.vue b/web/src/pages/login/index.vue
index 1977493..f2892a2 100644
--- a/web/src/pages/login/index.vue
+++ b/web/src/pages/login/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Captcha } from '@@/apis/auth'
 import { authApi } from '@@/apis/auth'
-import AppStatus from '@@/components/AppStatus.vue'
+import AppStatus from '@@/components/AppStatus/index.vue'
 import { isCancel } from 'axios'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
diff --git a/web/src/pages/settings/components/PluginsPanel.vue b/web/src/pages/settings/components/PluginsPanel.vue
index 2c40349..2a5ca40 100644
--- a/web/src/pages/settings/components/PluginsPanel.vue
+++ b/web/src/pages/settings/components/PluginsPanel.vue
@@ -3,7 +3,7 @@ import type { InstalledPlugin } from '@@/apis/plugins/type'
 import { pluginsApi } from '@@/apis/plugins'
 import { computed, ref } from 'vue'
 import { ApiError } from '@/http/axios'
-import PluginMount from '../../../common/components/PluginMount.vue'
+import PluginMount from '../../../common/components/PluginMount/index.vue'
 import { pluginState, refreshPlugins, retryPlugin } from '../../../common/plugins/host'
 import { pluginsPaused, settingTabs } from '../../../common/plugins/registry'
 
diff --git a/web/src/pages/settings/components/SettingRow.vue b/web/src/pages/settings/components/SettingRow.vue
index b8b8fd7..2f3443c 100644
--- a/web/src/pages/settings/components/SettingRow.vue
+++ b/web/src/pages/settings/components/SettingRow.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SettingId } from '../settings-catalog'
 import { computed } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { SETTING_ITEMS } from '../settings-catalog'
 
 const props = defineProps<{ id: SettingId, control?: string, resettable?: boolean }>()
diff --git a/web/src/pages/settings/components/ShortcutSettings.vue b/web/src/pages/settings/components/ShortcutSettings.vue
index 58555dd..252ccb7 100644
--- a/web/src/pages/settings/components/ShortcutSettings.vue
+++ b/web/src/pages/settings/components/ShortcutSettings.vue
@@ -2,7 +2,7 @@
 import type { Command } from '../../../common/utils/commands'
 import { toast } from '@@/utils/notifications'
 import { computed, nextTick, ref, watch } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { allCommands, commandKeys, formatKeys, shortcutConflict } from '../../../common/utils/commands'
 import { recordedKeys } from '../../../common/utils/keys'
 import { loadSettings, settings, SettingsAppearanceError, updateSettings } from '../../../pinia/stores/settings'
diff --git a/web/src/pages/settings/components/TokensPanel.vue b/web/src/pages/settings/components/TokensPanel.vue
index 202eefd..112a054 100644
--- a/web/src/pages/settings/components/TokensPanel.vue
+++ b/web/src/pages/settings/components/TokensPanel.vue
@@ -5,7 +5,7 @@ import { isCancel } from 'axios'
 import { onMounted, ref } from 'vue'
 import { ApiError } from '@/http/axios'
 import { settingsApi } from '@/pages/settings/apis'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { copyText } from '../../../common/utils/clipboard'
 
 const tokens = ref<ApiToken[] | null>(null)
diff --git a/web/src/pages/settings/components/TrashPanel.vue b/web/src/pages/settings/components/TrashPanel.vue
index 0dc0940..c6d3723 100644
--- a/web/src/pages/settings/components/TrashPanel.vue
+++ b/web/src/pages/settings/components/TrashPanel.vue
@@ -5,7 +5,7 @@ import { toast } from '@@/utils/notifications'
 import { isCancel } from 'axios'
 import { onMounted, ref } from 'vue'
 import { useUserStore } from '@/pinia/stores/user'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { isImage } from '../../../common/utils/paths'
 import { DEFAULTS, loadSettings, settings, SettingsAppearanceError, updateSettings } from '../../../pinia/stores/settings'
 import SettingRow from './SettingRow.vue'
diff --git a/web/src/pages/settings/index.vue b/web/src/pages/settings/index.vue
index 62d7ca2..4d957d9 100644
--- a/web/src/pages/settings/index.vue
+++ b/web/src/pages/settings/index.vue
@@ -9,8 +9,8 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { ApiError } from '@/http/axios'
 import { settingsApi } from '@/pages/settings/apis'
 import { UI_FONT_SIZE } from '../../common/appearance/typography'
-import FontPicker from '../../common/components/FontPicker.vue'
-import Icon from '../../common/components/Icon.vue'
+import FontPicker from '../../common/components/FontPicker/index.vue'
+import Icon from '../../common/components/Icon/index.vue'
 import { runCommand } from '../../common/utils/commands'
 import { installApp, installPrompt } from '../../common/utils/pwa'
 import { CONTENT_WIDTHS, DEFAULTS, loadSettings, settings, SettingsAppearanceError, settingsSave, TAB_SIZES, updateSettings } from '../../pinia/stores/settings'
diff --git a/web/src/pages/settings/settings-catalog.ts b/web/src/pages/settings/settings-catalog.ts
index 0a1095e..44a70d5 100644
--- a/web/src/pages/settings/settings-catalog.ts
+++ b/web/src/pages/settings/settings-catalog.ts
@@ -1,4 +1,4 @@
-import type { IconName } from '../../common/components/Icon.vue'
+import type { IconName } from '../../common/components/Icon/index.vue'
 import type { SettingsSection } from '@/pinia/stores/settings'
 
 export const SETTINGS_SECTIONS: { id: SettingsSection, title: string, icon: IconName, description: string }[] = [
diff --git a/web/src/pages/workspace/components/EditorChrome.vue b/web/src/pages/workspace/components/EditorChrome.vue
index c180f55..8ef0f81 100644
--- a/web/src/pages/workspace/components/EditorChrome.vue
+++ b/web/src/pages/workspace/components/EditorChrome.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { runCommand } from '../../../common/utils/commands'
 import { toggleSourceMode, ws } from '../workspace'
 </script>
diff --git a/web/src/pages/workspace/components/ImageDialog.vue b/web/src/pages/workspace/components/ImageDialog.vue
index 0f4a9f0..54bc3b5 100644
--- a/web/src/pages/workspace/components/ImageDialog.vue
+++ b/web/src/pages/workspace/components/ImageDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import { ApiError } from '@/http/axios'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { basename, dirname, isImage, joinPath } from '../../../common/utils/paths'
 import { imageUrl, move, remove, replaceImage, ws } from '../workspace'
 
diff --git a/web/src/pages/workspace/components/ImageGallery.vue b/web/src/pages/workspace/components/ImageGallery.vue
index 6f871a0..0fbcb59 100644
--- a/web/src/pages/workspace/components/ImageGallery.vue
+++ b/web/src/pages/workspace/components/ImageGallery.vue
@@ -2,7 +2,7 @@
 import type { Entry } from '@@/apis/vault/type'
 import { toast } from '@@/utils/notifications'
 import { computed, onMounted, ref } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { basename, hiddenAssetPath, imageInFolder, isImage } from '../../../common/utils/paths'
 import { metadata, refreshMetadata } from '../metadata'
 import { cleanupImages, imageUrl, openReference, uploadFolderImages, ws } from '../workspace'
diff --git a/web/src/pages/workspace/components/ImportDialog.vue b/web/src/pages/workspace/components/ImportDialog.vue
index ad7e9ac..1d6c840 100644
--- a/web/src/pages/workspace/components/ImportDialog.vue
+++ b/web/src/pages/workspace/components/ImportDialog.vue
@@ -2,7 +2,7 @@
 import type { ImportResult } from '@/pages/workspace/apis/type'
 import { computed, onMounted, ref } from 'vue'
 import { ApiError } from '@/http/axios'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { dirname } from '../../../common/utils/paths'
 import { expanded } from '../tree'
 import { importNotes } from '../workspace'
diff --git a/web/src/pages/workspace/components/KnowledgePanel.vue b/web/src/pages/workspace/components/KnowledgePanel.vue
index b01170a..8d1e038 100644
--- a/web/src/pages/workspace/components/KnowledgePanel.vue
+++ b/web/src/pages/workspace/components/KnowledgePanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { metadata, refreshMetadata } from '../metadata'
 import { openNote, openReference, ws } from '../workspace'
 
diff --git a/web/src/pages/workspace/components/MoveDialog.vue b/web/src/pages/workspace/components/MoveDialog.vue
index 7334162..d694ba2 100644
--- a/web/src/pages/workspace/components/MoveDialog.vue
+++ b/web/src/pages/workspace/components/MoveDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { basename, dirname, inAssetDir, joinPath, noteTitle } from '../../../common/utils/paths'
 import { batchFiles } from '../batch'
 import { fuzzyMatch, segments } from '../fuzzy'
diff --git a/web/src/pages/workspace/components/OutlinePanel.vue b/web/src/pages/workspace/components/OutlinePanel.vue
index 2cc4748..054ff94 100644
--- a/web/src/pages/workspace/components/OutlinePanel.vue
+++ b/web/src/pages/workspace/components/OutlinePanel.vue
@@ -3,7 +3,7 @@ import type { EditorState } from '@codemirror/state'
 import { ensureSyntaxTree, syntaxTree } from '@codemirror/language'
 import { EditorView } from '@codemirror/view'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { activeTab, editorView, onEditorUpdate, ws } from '../workspace'
 
 // 大纲：当前笔记的标题列表，点击跳转；高亮光标所在的章节
diff --git a/web/src/pages/workspace/components/QuickSwitcher.vue b/web/src/pages/workspace/components/QuickSwitcher.vue
index 4b2b256..cdd6a41 100644
--- a/web/src/pages/workspace/components/QuickSwitcher.vue
+++ b/web/src/pages/workspace/components/QuickSwitcher.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { availableCommands, commandKeys, formatKeys } from '../../../common/utils/commands'
 import { dirname, NOTE_EXT, noteTitle } from '../../../common/utils/paths'
 import { fuzzyMatch, segments } from '../fuzzy'
diff --git a/web/src/pages/workspace/components/SearchPanel.vue b/web/src/pages/workspace/components/SearchPanel.vue
index 7fab153..a2d012b 100644
--- a/web/src/pages/workspace/components/SearchPanel.vue
+++ b/web/src/pages/workspace/components/SearchPanel.vue
@@ -3,7 +3,7 @@ import type { SearchResult } from '@/pages/workspace/apis/type'
 import { toast } from '@@/utils/notifications'
 import { computed, onMounted, ref, watch } from 'vue'
 import { workspaceApi } from '@/pages/workspace/apis'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { dirname, noteTitle } from '../../../common/utils/paths'
 import { openAt, ws } from '../workspace'
 
diff --git a/web/src/pages/workspace/components/SelectionToolbar.vue b/web/src/pages/workspace/components/SelectionToolbar.vue
index 49ff960..1e5f6b2 100644
--- a/web/src/pages/workspace/components/SelectionToolbar.vue
+++ b/web/src/pages/workspace/components/SelectionToolbar.vue
@@ -3,8 +3,8 @@ import type { EditorSelection } from '@codemirror/state'
 import type { InlineStyles } from '../../../common/markdown/inline-styles'
 import type { FormatCommand } from '../editor/format'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
-import InlineAppearance from '../../../common/components/InlineAppearance.vue'
+import Icon from '../../../common/components/Icon/index.vue'
+import InlineAppearance from '../../../common/components/InlineAppearance/index.vue'
 import { settings } from '../../../pinia/stores/settings'
 import { insertLink } from '../editor/format'
 import { applyInlineStyles, canFormatSelection, clearInlineStyles, selectionAppearance, toggleSelectionMark, toggleUnderline } from '../editor/inline-styles'
diff --git a/web/src/pages/workspace/components/Sidebar.vue b/web/src/pages/workspace/components/Sidebar.vue
index 20e59be..bb6ee40 100644
--- a/web/src/pages/workspace/components/Sidebar.vue
+++ b/web/src/pages/workspace/components/Sidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
-import PluginMount from '../../../common/components/PluginMount.vue'
+import Icon from '../../../common/components/Icon/index.vue'
+import PluginMount from '../../../common/components/PluginMount/index.vue'
 import { sidebarViews } from '../../../common/plugins/registry'
 import { commandTitle } from '../../../common/utils/commands'
 import { basename } from '../../../common/utils/paths'
diff --git a/web/src/pages/workspace/components/TabBar.vue b/web/src/pages/workspace/components/TabBar.vue
index 9da357d..99ac564 100644
--- a/web/src/pages/workspace/components/TabBar.vue
+++ b/web/src/pages/workspace/components/TabBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Tab } from '../workspace'
 import { nextTick, ref } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { commandTitle } from '../../../common/utils/commands'
 import { noteTitle } from '../../../common/utils/paths'
 import { closeTab, createNote, ws } from '../workspace'
diff --git a/web/src/pages/workspace/components/TreeIconPicker.vue b/web/src/pages/workspace/components/TreeIconPicker.vue
index 50ee193..2eba4ef 100644
--- a/web/src/pages/workspace/components/TreeIconPicker.vue
+++ b/web/src/pages/workspace/components/TreeIconPicker.vue
@@ -3,7 +3,7 @@ import type { TreeIcon } from '@@/apis/vault/type'
 import type { Gemoji } from 'gemoji'
 import type { IconName } from '../../../common/utils/icons'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { iconPaths } from '../../../common/utils/icons'
 import { basename } from '../../../common/utils/paths'
 import { treeIconTarget } from '../tree'
diff --git a/web/src/pages/workspace/components/TreeNode.vue b/web/src/pages/workspace/components/TreeNode.vue
index e0376ff..5841d30 100644
--- a/web/src/pages/workspace/components/TreeNode.vue
+++ b/web/src/pages/workspace/components/TreeNode.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TreeNode } from '../tree'
 import { computed, nextTick, ref, watch } from 'vue'
-import Icon from '../../../common/components/Icon.vue'
+import Icon from '../../../common/components/Icon/index.vue'
 import { basename, dirname, inAssetDir, isImage, joinPath } from '../../../common/utils/paths'
 import { batchFiles, exportFiles } from '../batch'
 import { contextSelection, dropDirectory, expanded, selectedPaths, selectPath, treeIconTarget } from '../tree'
diff --git a/web/src/pages/workspace/index.vue b/web/src/pages/workspace/index.vue
index 7fa8252..578589f 100644
--- a/web/src/pages/workspace/index.vue
+++ b/web/src/pages/workspace/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import AppStatus from '@@/components/AppStatus.vue'
+import AppStatus from '@@/components/AppStatus/index.vue'
 import { toast } from '@@/utils/notifications'
 import { isCancel } from 'axios'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ApiError } from '@/http/axios'
 import { useUserStore } from '@/pinia/stores/user'
-import Icon from '../../common/components/Icon.vue'
+import Icon from '../../common/components/Icon/index.vue'
 import { registerCommand } from '../../common/utils/commands'
 import { noteTitle } from '../../common/utils/paths'
 import { settings, SettingsAppearanceError, SIDEBAR_WIDTH, updateSettings } from '../../pinia/stores/settings'