refactor(web): group shared components by directory

Move each shared component into a named directory with an index.vue entry. Update consumers and relative imports while preserving component behavior.

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'

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()

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>
 

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: [] }>()

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>()

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'

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'
 

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 }>()

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'

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)

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'

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'

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 }[] = [

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>

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'
 

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'

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'

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'
 

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'

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'
 
 // 大纲：当前笔记的标题列表，点击跳转；高亮光标所在的章节

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'

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'
 

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'

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'

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'

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'

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'

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'