Browse Source

refactor(编辑器): 优化视图模式处理和工具栏功能

添加视图模式计算逻辑,根据URL或本地存储确定初始模式
隐藏内容列表侧边栏项并重构工具栏相关方法
将窗口方法绑定移至组件内部,提高代码可维护性
lsc 2 days ago
parent
commit
e54bfeabe8
2 changed files with 28 additions and 5 deletions
  1. 11 3
      src/components/CollapsibleToolbar/index.vue
  2. 17 2
      src/views/Editor/CanvasTool/index.vue

+ 11 - 3
src/components/CollapsibleToolbar/index.vue

@@ -41,7 +41,7 @@
           </svg>
           <span class="item-label">创作空间</span>
         </div>
-        <div class="sidebar-item" :class="{ active: activeSubmenu === 'contentlist' }" @click="toggleSubmenu('contentlist')">
+        <div class="sidebar-item" :class="{ active: activeSubmenu === 'contentlist' }" @click="toggleSubmenu('contentlist')" v-show="false">
           <svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
             <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
@@ -127,6 +127,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import useCreateElement from '@/hooks/useCreateElement'
+import useSlideHandler from '@/hooks/useSlideHandler'
 
 interface ContentItem {
   tool?: number
@@ -150,6 +151,7 @@ const activeSubmenu = ref<string | null>(null)
 const contentList = ref<ContentItem[]>([])
 
 const { createFrameElement } = useCreateElement()
+const { createSlide } = useSlideHandler()
 
 const toggleCollapse = () => {
   isCollapsed.value = !isCollapsed.value
@@ -210,13 +212,19 @@ const loadContentList = () => {
   }
 }
 
-(window as any).loadContentList = loadContentList
-
 const insertContent = (item: ContentItem) => {
   if (!item.tool || !item.url) return
   createFrameElement(item.url, item.tool)
 }
 
+const addContent = (data: ContentItem) => {
+  contentList.value.push(data)
+  createSlide()
+  insertContent(data)
+}
+
+Object.assign(window, { addContent, loadContentList })
+
 const previewVideo = (item: ContentItem) => {
   interface ParentWindowWithToolList extends Window {
     previewVideo?: (item: ContentItem) => void;

+ 17 - 2
src/views/Editor/CanvasTool/index.vue

@@ -71,7 +71,7 @@
         <IconInsertTable class="handler-item" v-tooltip="'插入表格'" />
       </Popover>
       <IconFormula class="handler-item" v-tooltip="'插入公式'" @click="latexEditorVisible = true" />
-      <Popover trigger="manual" v-model:value="webpageInputVisible" :offset="10">
+      <Popover v-if="viewMode !== 'editor2'" trigger="manual" v-model:value="webpageInputVisible" :offset="10">
         <template #content>
           <WebpageInput 
             :webpageList="webpageList"
@@ -124,7 +124,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSnapshotStore } from '@/store'
 import { getImageDataURL } from '@/utils/image'
@@ -151,6 +151,21 @@ const mainStore = useMainStore()
 const { creatingElement, creatingCustomShape, showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)
 const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
 
+const getInitialViewMode = () => {
+  const urlParams = new URLSearchParams(window.location.search)
+  const modeFromUrl = urlParams.get('mode')
+  if (modeFromUrl === 'editor2') {
+    return 'editor2'
+  }
+  const modeFromStorage = localStorage.getItem('viewMode')
+  if (modeFromStorage) {
+    return modeFromStorage
+  }
+  return 'editor'
+}
+
+const viewMode = computed(() => getInitialViewMode())
+
 const { redo, undo } = useHistorySnapshot()
 
 const {