From f434b9fe4ed024f8c559b932d36c761d9f1292bb Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 27 Dec 2025 22:40:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E8=8F=9C=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/layouts/AppHeader.vue      |    1 -
 frontend/src/app/router/index.ts            |    5 -
 frontend/src/shared/components/UserMenu.vue |    7 -
 frontend/src/views/HomePage.vue             | 3062 +++++++++++++++++++
 frontend/src/views/settings/MenuManager.vue |  701 -----
 5 files changed, 3062 insertions(+), 714 deletions(-)
 create mode 100644 frontend/src/views/HomePage.vue
 delete mode 100644 frontend/src/views/settings/MenuManager.vue

diff --git a/frontend/src/app/layouts/AppHeader.vue b/frontend/src/app/layouts/AppHeader.vue
index be3ad5d..c60c939 100644
--- a/frontend/src/app/layouts/AppHeader.vue
+++ b/frontend/src/app/layouts/AppHeader.vue
@@ -180,7 +180,6 @@ const breadcrumbItems = computed(() => {
       NodeList: t('Node Management'),
       NodeDetail: t('Node Detail'),
       FlowBuilder: t('Flow Builder'),
-      MenuManager: t('Menu Manager'),
       Settings: t('Settings'),
       SearchResults: t('Search Results')
     }
diff --git a/frontend/src/app/router/index.ts b/frontend/src/app/router/index.ts
index feecfff..36c03c2 100644
--- a/frontend/src/app/router/index.ts
+++ b/frontend/src/app/router/index.ts
@@ -60,11 +60,6 @@ const router = createRouter({
           name: 'PageTypeDetailLegacy',
           component: () => import('./detailPage')
         },
-        {
-          path: 'settings/menu',
-          name: 'MenuManager',
-          component: () => import('../../views/settings/MenuManager.vue')
-        },
         {
           path: 'settings',
           name: 'Settings',
diff --git a/frontend/src/shared/components/UserMenu.vue b/frontend/src/shared/components/UserMenu.vue
index 930d732..aada904 100644
--- a/frontend/src/shared/components/UserMenu.vue
+++ b/frontend/src/shared/components/UserMenu.vue
@@ -34,11 +34,6 @@ const user = computed(() => authStore.user)
 
 const userMenuOptions = computed(() => {
   const options: any[] = [
-    {
-      label: t('Menu Management'),
-      key: 'menu-manager',
-      icon: () => h(Icon, { icon: 'tabler:menu-2' })
-    },
     {
       label: t('Settings'),
       key: 'settings',
@@ -61,8 +56,6 @@ const handleUserMenuSelect = async (key: string) => {
   if (key === 'logout') {
     await authStore.logout()
     // logout 函数内部已经处理了跳转，不需要再次跳转
-  } else if (key === 'menu-manager') {
-    router.push({ name: 'MenuManager' })
   } else if (key === 'settings') {
     router.push({ name: 'Settings' })
   }
diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
new file mode 100644
index 0000000..b6f2db4
--- /dev/null
+++ b/frontend/src/views/HomePage.vue
@@ -0,0 +1,3062 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted, nextTick, reactive } from 'vue'
+import { NButton, NSpace, useMessage, NModal, NForm, NFormItem, NInput, NText, NLayout, NLayoutSider, NLayoutHeader, NLayoutContent } from 'naive-ui'
+import { Icon } from '@iconify/vue'
+import { useSEO } from '@/shared/composables/useSEO'
+import { t, getCurrentLocale } from '@/shared/i18n'
+import { useAuthStore } from '@/shared/stores/auth'
+import { signupApi } from '@/shared/api/auth'
+import AppHeader from '@/app/layouts/AppHeader.vue'
+import AppSidebar from '@/app/layouts/AppSidebar.vue'
+import { compressImageFile } from '@/shared/utils/imageResize'
+import axios from 'axios'
+
+const message = useMessage()
+const authStore = useAuthStore()
+const appName = computed(() => localStorage.getItem('appName') || 'Jingrow')
+const currentYear = computed(() => new Date().getFullYear())
+const logoUrl = computed(() => '/logo.svg')
+
+// 登录/注册弹窗状态
+const showLoginModal = ref(false)
+const showSignupModal = ref(false)
+const loginFormRef = ref()
+const signupFormRef = ref()
+const loginLoading = ref(false)
+const signupLoading = ref(false)
+const showSignupLink = ref(false)
+
+// 登录表单
+const loginFormData = reactive({
+  username: '',
+  password: ''
+})
+
+const loginRules = {
+  username: [
+    { required: true, message: t('Please enter username'), trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: t('Please enter password'), trigger: 'blur' },
+    { min: 6, message: t('Password must be at least 6 characters'), trigger: 'blur' }
+  ]
+}
+
+// 注册表单
+const signupFormData = reactive({
+  username: '',
+  password: '',
+  confirmPassword: '',
+  email: '',
+  phoneNumber: ''
+})
+
+const validatePasswordMatch = (_rule: any, value: string) => {
+  if (value !== signupFormData.password) {
+    return new Error(t('Passwords do not match'))
+  }
+  return true
+}
+
+const isEnglish = computed(() => getCurrentLocale() === 'en-US')
+
+const signupRules = computed(() => {
+  const rules: any = {
+    username: [
+      { required: true, message: t('Please enter username'), trigger: 'blur' },
+      { min: 3, message: t('Username must be at least 3 characters'), trigger: 'blur' }
+    ],
+    password: [
+      { required: true, message: t('Please enter password'), trigger: 'blur' },
+      { min: 6, message: t('Password must be at least 6 characters'), trigger: 'blur' }
+    ],
+    confirmPassword: [
+      { required: true, message: t('Please confirm password'), trigger: 'blur' },
+      { validator: validatePasswordMatch, trigger: 'blur' }
+    ]
+  }
+
+  // 英文版：email必填，手机号可选
+  if (isEnglish.value) {
+    rules.email = [
+      { required: true, message: t('Please enter email'), trigger: 'blur' },
+      {
+        validator: (_rule: any, value: string) => {
+          // required规则已处理空值，这里只验证格式
+          if (!value) return true
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+          if (!emailRegex.test(value)) {
+            return new Error(t('Please enter a valid email address'))
+          }
+          return true
+        },
+        trigger: 'blur'
+      }
+    ]
+    rules.phoneNumber = [
+      {
+        validator: (_rule: any, value: string) => {
+          if (!value) return true
+          const phoneRegex = /^1[3-9]\d{9}$/
+          if (!phoneRegex.test(value)) {
+            return new Error(t('Please enter a valid phone number'))
+          }
+          return true
+        },
+        trigger: 'blur'
+      }
+    ]
+  } else {
+    // 中文版：email可选，手机号必填
+    rules.email = [
+      {
+        validator: (_rule: any, value: string) => {
+          if (!value) return true
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+          if (!emailRegex.test(value)) {
+            return new Error(t('Please enter a valid email address'))
+          }
+          return true
+        },
+        trigger: 'blur'
+      }
+    ]
+    rules.phoneNumber = [
+      { required: true, message: t('Please enter phone number'), trigger: 'blur' },
+      {
+        pattern: /^1[3-9]\d{9}$/,
+        message: t('Please enter a valid phone number'),
+        trigger: 'blur'
+      }
+    ]
+  }
+
+  return rules
+})
+
+const handleLogin = () => {
+  showLoginModal.value = true
+}
+
+const handleSignup = () => {
+  showSignupModal.value = true
+}
+
+const handleLoginSubmit = async () => {
+  try {
+    await loginFormRef.value?.validate()
+    loginLoading.value = true
+
+    const result = await authStore.login(loginFormData.username, loginFormData.password)
+    
+    if (result.success) {
+      message.success(t('Login successful'))
+      showLoginModal.value = false
+      loginFormData.username = ''
+      loginFormData.password = ''
+    } else {
+      message.error(result.error || t('Login failed'))
+    }
+  } catch (error) {
+    console.error('Login error:', error)
+    message.error(t('Login failed, please check username and password'))
+  } finally {
+    loginLoading.value = false
+  }
+}
+
+const handleSignupSubmit = async () => {
+  try {
+    await signupFormRef.value?.validate()
+    signupLoading.value = true
+
+    const result = await signupApi({
+      username: signupFormData.username,
+      password: signupFormData.password,
+      email: signupFormData.email || undefined,
+      phone_number: isEnglish.value ? (signupFormData.phoneNumber || undefined) : signupFormData.phoneNumber
+    })
+    
+    if (result.success) {
+      message.success(t('Sign up successful'))
+      if (result.user) {
+        authStore.user = result.user
+        authStore.isAuthenticated = true
+        localStorage.setItem('jingrow_user', JSON.stringify(result.user))
+        localStorage.setItem('jingrow_authenticated', 'true')
+        showSignupModal.value = false
+        signupFormData.username = ''
+        signupFormData.password = ''
+        signupFormData.confirmPassword = ''
+        signupFormData.email = ''
+        signupFormData.phoneNumber = ''
+      } else {
+        const loginResult = await authStore.login(signupFormData.username, signupFormData.password)
+        if (loginResult.success) {
+          showSignupModal.value = false
+          signupFormData.username = ''
+          signupFormData.password = ''
+          signupFormData.confirmPassword = ''
+          signupFormData.email = ''
+          signupFormData.phoneNumber = ''
+        } else {
+          message.warning(loginResult.error || t('Sign up successful, but auto login failed. Please login manually'))
+          showSignupModal.value = false
+          showLoginModal.value = true
+        }
+      }
+    } else {
+      const errorMsg = result.error || t('Sign up failed')
+      console.error('注册失败:', errorMsg, result)
+      message.error(errorMsg)
+    }
+  } catch (error: any) {
+    console.error('注册异常:', error)
+    message.error(error.message || t('Sign up failed, please try again'))
+  } finally {
+    signupLoading.value = false
+  }
+}
+
+const switchToSignup = () => {
+  showLoginModal.value = false
+  showSignupModal.value = true
+}
+
+const switchToLogin = () => {
+  showSignupModal.value = false
+  showLoginModal.value = true
+}
+
+// 登录状态
+const isLoggedIn = computed(() => authStore.isLoggedIn)
+
+// Sidebar 折叠状态
+const SIDEBAR_COLLAPSE_KEY = 'app.sidebar.collapsed'
+const collapsed = ref(localStorage.getItem(SIDEBAR_COLLAPSE_KEY) === 'true')
+const isMobile = ref(false)
+
+// 检测屏幕尺寸
+const checkIsMobile = () => {
+  isMobile.value = window.innerWidth < 768
+  if (isMobile.value) {
+    collapsed.value = true
+  }
+}
+
+// 切换侧边栏
+const toggleSidebar = () => {
+  collapsed.value = !collapsed.value
+}
+
+// 侧边栏折叠事件
+const onSidebarCollapse = () => {
+  collapsed.value = true
+}
+
+// 侧边栏展开事件
+const onSidebarExpand = () => {
+  collapsed.value = false
+}
+
+// 菜单选择事件 - 移动端自动关闭
+const onMenuSelect = () => {
+  if (isMobile.value) {
+    collapsed.value = true
+  }
+}
+
+// 监听窗口大小变化
+const handleWindowResize = () => {
+  checkIsMobile()
+  adjustContainerSize()
+}
+
+watch(collapsed, (val) => {
+  localStorage.setItem(SIDEBAR_COLLAPSE_KEY, String(val))
+})
+
+useSEO({
+  title: t('Remove Background - Free AI Background Removal Tool'),
+  description: t('Remove background from images using AI technology. Free online tool to remove image backgrounds instantly. Supports JPG, PNG, WebP formats.'),
+  keywords: t('remove background, AI background removal, online background remover, image processing, background removal tool, transparent background, free tool')
+})
+
+interface HistoryItem {
+  id: string
+  originalImageUrl: string
+  originalImageFile: File | null
+  resultImage: string
+  timestamp: number
+}
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+// urlInputRef 在模板中使用，lint 警告是误报
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const urlInputRef = ref<HTMLInputElement | null>(null)
+const uploadedImage = ref<File | null>(null)
+const uploadedImageUrl = ref<string>('')
+const resultImage = ref<string>('')
+const resultImageBlobUrl = ref<string>('') // 缓存的 blob URL，用于下载
+const imageUrl = ref<string>('')
+const resultImageUrl = computed(() => {
+  if (!resultImage.value) return ''
+  return resultImage.value
+})
+
+const historyList = ref<HistoryItem[]>([])
+const currentHistoryIndex = ref<number>(-1)
+const isDragging = ref(false)
+const dragCounter = ref(0)
+const processing = ref(false)
+const splitPosition = ref(0)
+
+// 示例图片用于快速体验 - 使用适合抠图的图片
+const sampleImages = [
+  {
+    id: 'sample-1',
+    url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1024&h=1024&fit=crop&q=80',
+    name: '人物示例'
+  },
+  {
+    id: 'sample-2',
+    url: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=1024&h=1024&fit=crop&q=80',
+    name: '人物示例'
+  },
+  {
+    id: 'sample-3',
+    url: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1024&h=1024&fit=crop&q=80',
+    name: '产品示例'
+  },
+  {
+    id: 'sample-4',
+    url: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=1024&h=1024&fit=crop&q=80',
+    name: '产品示例'
+  },
+  {
+    id: 'sample-5',
+    url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1024&h=1024&fit=crop&q=80',
+    name: '动物示例'
+  },
+  {
+    id: 'sample-6',
+    url: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?w=1024&h=1024&fit=crop&q=80',
+    name: '物品示例'
+  },
+  {
+    id: 'sample-7',
+    url: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=1024&h=1024&fit=crop&q=80',
+    name: '人物示例'
+  },
+  {
+    id: 'sample-8',
+    url: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=1024&h=1024&fit=crop&q=80',
+    name: '人物示例'
+  },
+  {
+    id: 'sample-9',
+    url: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=1024&h=1024&fit=crop&q=80',
+    name: '人物示例'
+  },
+  {
+    id: 'sample-10',
+    url: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=1024&h=1024&fit=crop&q=80',
+    name: '人物示例'
+  }
+]
+const comparisonContainerRef = ref<HTMLElement | null>(null)
+const originalImageRef = ref<HTMLImageElement | null>(null)
+const resultImageRef = ref<HTMLImageElement | null>(null)
+const singleImageWrapperRef = ref<HTMLElement | null>(null)
+const singleImageRef = ref<HTMLImageElement | null>(null)
+const isDraggingSplitLine = ref(false)
+
+const hasFiles = (event: DragEvent) => {
+  const types = event.dataTransfer?.types
+  if (!types) return false
+  return Array.from(types).includes('Files')
+}
+
+const handleDragEnter = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  dragCounter.value += 1
+  isDragging.value = true
+}
+
+const handleDragOver = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  event.dataTransfer!.dropEffect = 'copy'
+  isDragging.value = true
+}
+
+const handleDragLeave = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  dragCounter.value = Math.max(0, dragCounter.value - 1)
+  if (dragCounter.value === 0) {
+    isDragging.value = false
+  }
+}
+
+const handleDrop = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  event.preventDefault()
+  dragCounter.value = 0
+  isDragging.value = false
+  const file = event.dataTransfer?.files[0]
+  if (file && file.type.startsWith('image/')) {
+    processFile(file)
+  } else {
+    message.warning(t('Please upload an image file'))
+  }
+}
+
+const triggerFileInput = () => {
+  fileInputRef.value?.click()
+}
+
+const handleFileSelect = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    processFile(file)
+  }
+}
+
+const processFile = async (file: File) => {
+  const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+  if (!validTypes.includes(file.type)) {
+    message.warning(t('Unsupported image format. Please use JPG, PNG, or WebP'))
+    return
+  }
+
+  const maxSize = 10 * 1024 * 1024
+  if (file.size > maxSize) {
+    message.warning(t('Image size exceeds 10MB limit'))
+    return
+  }
+
+  try {
+    const compressedFile = await compressImageFile(file, {
+      maxWidth: 1024,
+      maxHeight: 1024,
+      quality: 0.92,
+      mode: 'contain'
+    })
+    
+    uploadedImage.value = compressedFile
+    resultImage.value = ''
+    splitPosition.value = 0
+    currentHistoryIndex.value = -1
+    
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      uploadedImageUrl.value = e.target?.result as string
+      handleRemoveBackground()
+    }
+    reader.readAsDataURL(compressedFile)
+  } catch (error) {
+    console.error('图片压缩失败:', error)
+      message.error(t('Image processing failed, please try again'))
+  }
+}
+
+// 处理示例图片点击
+const handleSampleImageClick = async (imageUrl: string) => {
+  if (processing.value) return
+  
+  processing.value = true
+  
+  try {
+    const response = await fetch(imageUrl, { mode: 'cors' })
+    if (!response.ok) {
+      throw new Error(`Failed to load image: ${response.status}`)
+    }
+
+    const blob = await response.blob()
+    
+    // 验证文件类型
+    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+    if (!validTypes.includes(blob.type)) {
+      message.warning(t('Unsupported image format. Please use JPG, PNG, or WebP'))
+      processing.value = false
+      return
+    }
+
+    // 验证文件大小
+    const maxSize = 10 * 1024 * 1024
+    if (blob.size > maxSize) {
+      message.warning(t('Image size exceeds 10MB limit'))
+      processing.value = false
+      return
+    }
+
+    // 转换为File对象
+    const file = new File([blob], 'sample-image.jpg', { type: blob.type })
+    await processFile(file)
+  } catch (error: any) {
+    console.error('加载示例图片失败:', error)
+    let errorMessage = t('Failed to load sample image')
+    
+    if (error.message?.includes('CORS')) {
+      errorMessage = t('CORS error. The image server does not allow cross-origin access.')
+    } else if (error.message?.includes('Failed to load')) {
+      errorMessage = t('Failed to load image. Please check the URL and try again.')
+    }
+    
+    message.error(errorMessage)
+    processing.value = false
+  }
+}
+
+const handleRemoveBackground = async () => {
+  if (!uploadedImage.value) {
+    message.warning(t('Please upload an image first'))
+    return
+  }
+
+  processing.value = true
+  resultImage.value = ''
+
+  try {
+    const formData = new FormData()
+    formData.append('file', uploadedImage.value)
+
+    // 使用 file/free API，无需认证
+    // 注意：不要手动设置 Content-Type，让浏览器自动设置（包含 boundary）
+    const response = await axios.post(
+      '/jingrow.tools.remove_background.remove_background.remove_background_from_file_free',
+      formData,
+      {
+        timeout: 180000
+      }
+    )
+
+    if (response.data?.success && response.data?.data) {
+      const result = response.data.data
+      
+      // 处理返回格式（与 remove_background_from_file 一致）
+      // result 是函数返回的字典，包含 success、data 数组等字段
+      if (result.success && result.data && Array.isArray(result.data) && result.data.length > 0) {
+        const firstResult = result.data[0]
+        if (firstResult.success && firstResult.image_url) {
+          resultImage.value = firstResult.image_url
+          
+          // 缓存图片 blob URL 用于下载
+          await cacheResultImage(firstResult.image_url)
+          
+          // 添加到历史记录
+          if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) {
+            const historyItem: HistoryItem = {
+              id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+              originalImageUrl: uploadedImageUrl.value,
+              originalImageFile: uploadedImage.value,
+              resultImage: firstResult.image_url,
+              timestamp: Date.now()
+            }
+            historyList.value.unshift(historyItem)
+            currentHistoryIndex.value = 0
+          } else if (currentHistoryIndex.value >= 0) {
+            historyList.value[currentHistoryIndex.value].resultImage = firstResult.image_url
+          }
+        } else {
+          message.error(firstResult.error || t('Failed to remove background'))
+        }
+      } else {
+        message.error(result.error || t('Failed to remove background'))
+      }
+    } else {
+      message.error(response.data?.error || response.data?.message || t('Failed to remove background'))
+    }
+  } catch (error: any) {
+    let errorMessage = t('Failed to remove background')
+    if (error.response?.data?.error) {
+      errorMessage = error.response.data.error
+    } else if (error.message) {
+      errorMessage = error.message
+    }
+    message.error(errorMessage)
+  } finally {
+    processing.value = false
+  }
+}
+
+/**
+ * 缓存结果图片为 blob URL，用于下载
+ */
+const cacheResultImage = async (imageUrl: string) => {
+  try {
+    // 清理旧的 blob URL
+    if (resultImageBlobUrl.value) {
+      URL.revokeObjectURL(resultImageBlobUrl.value)
+      resultImageBlobUrl.value = ''
+    }
+    
+    // 获取图片并转换为 blob URL
+    const response = await fetch(imageUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch image: ${response.status}`)
+    }
+    const blob = await response.blob()
+    resultImageBlobUrl.value = URL.createObjectURL(blob)
+  } catch (error) {
+    console.error('缓存图片失败:', error)
+    // 缓存失败不影响显示，只是下载时需要重新获取
+  }
+}
+
+const handleDownload = async () => {
+  if (!resultImage.value) return
+
+  // 检查登录状态
+  if (!isLoggedIn.value) {
+    message.warning(t('Please login to download'))
+    showLoginModal.value = true
+    return
+  }
+
+  try {
+    // 优先使用缓存的 blob URL
+    let blobUrl = resultImageBlobUrl.value
+    
+    // 如果没有缓存，则获取并缓存
+    if (!blobUrl) {
+      const response = await fetch(resultImage.value)
+      if (!response.ok) {
+        throw new Error(`Failed to fetch image: ${response.status}`)
+      }
+      const blob = await response.blob()
+      blobUrl = URL.createObjectURL(blob)
+      resultImageBlobUrl.value = blobUrl
+    }
+    
+    const link = document.createElement('a')
+    link.href = blobUrl
+    link.download = `removed-background-${Date.now()}.png`
+    link.click()
+    // 不立即清理 blob URL，保留缓存供后续下载使用
+  } catch (error) {
+    console.error('下载失败:', error)
+    message.error(t('Failed to download image'))
+  }
+}
+
+const resetUpload = () => {
+  if (uploadedImageUrl.value && uploadedImageUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(uploadedImageUrl.value)
+  }
+  // 清理结果图片的 blob URL 缓存
+  if (resultImageBlobUrl.value) {
+    URL.revokeObjectURL(resultImageBlobUrl.value)
+    resultImageBlobUrl.value = ''
+  }
+  uploadedImage.value = null
+  uploadedImageUrl.value = ''
+  resultImage.value = ''
+  imageUrl.value = ''
+  splitPosition.value = 0
+  currentHistoryIndex.value = -1
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+  if (comparisonContainerRef.value) {
+    comparisonContainerRef.value.style.width = ''
+    comparisonContainerRef.value.style.height = ''
+  }
+  if (singleImageWrapperRef.value) {
+    singleImageWrapperRef.value.style.width = ''
+    singleImageWrapperRef.value.style.height = ''
+  }
+}
+
+const adjustContainerSize = async () => {
+  await nextTick()
+  // 等待多个渲染周期确保 DOM 完全更新
+  await new Promise(resolve => setTimeout(resolve, 0))
+  
+  // 处理对比视图容器
+  const container = comparisonContainerRef.value
+  if (container) {
+    const img = originalImageRef.value || resultImageRef.value
+    if (img) {
+      const previewSection = container.closest('.preview-section') as HTMLElement
+      if (previewSection) {
+        const previewRect = previewSection.getBoundingClientRect()
+        const padding = 24
+        const maxAvailableWidth = Math.max(0, previewRect.width - padding)
+        const maxAvailableHeight = Math.max(0, previewRect.height - padding)
+        
+        if (maxAvailableWidth > 0 && maxAvailableHeight > 0 && maxAvailableHeight >= 100) {
+          if (img.complete) {
+            const { naturalWidth, naturalHeight } = img
+            if (naturalWidth > 0 && naturalHeight > 0) {
+              const scale = Math.min(
+                maxAvailableWidth / naturalWidth,
+                maxAvailableHeight / naturalHeight,
+                1
+              )
+              container.style.width = `${naturalWidth * scale}px`
+              container.style.height = `${naturalHeight * scale}px`
+            }
+          } else {
+            img.addEventListener('load', adjustContainerSize, { once: true })
+          }
+        } else {
+          setTimeout(adjustContainerSize, 100)
+        }
+      }
+    }
+  }
+  
+  // 处理单图视图容器
+  const singleWrapper = singleImageWrapperRef.value
+  if (singleWrapper) {
+    const img = singleImageRef.value
+    if (img) {
+      const previewSection = singleWrapper.closest('.preview-section') as HTMLElement
+      if (previewSection) {
+        const previewRect = previewSection.getBoundingClientRect()
+        const padding = 24
+        const maxAvailableWidth = Math.max(0, previewRect.width - padding)
+        const maxAvailableHeight = Math.max(0, previewRect.height - padding)
+        
+        if (maxAvailableWidth > 0 && maxAvailableHeight > 0 && maxAvailableHeight >= 100) {
+          if (img.complete) {
+            const { naturalWidth, naturalHeight } = img
+            if (naturalWidth > 0 && naturalHeight > 0) {
+              const scale = Math.min(
+                maxAvailableWidth / naturalWidth,
+                maxAvailableHeight / naturalHeight,
+                1
+              )
+              singleWrapper.style.width = `${naturalWidth * scale}px`
+              singleWrapper.style.height = `${naturalHeight * scale}px`
+            }
+          } else {
+            img.addEventListener('load', adjustContainerSize, { once: true })
+          }
+        } else {
+          setTimeout(adjustContainerSize, 100)
+        }
+      } else {
+        setTimeout(adjustContainerSize, 100)
+      }
+    } else {
+      setTimeout(adjustContainerSize, 100)
+    }
+  }
+}
+
+watch([uploadedImageUrl, resultImageUrl], adjustContainerSize, { immediate: true })
+
+const handleSplitLineMouseDown = (e: MouseEvent) => {
+  e.preventDefault()
+  isDraggingSplitLine.value = true
+  
+  const handleMouseMove = (moveEvent: MouseEvent) => {
+    if (!comparisonContainerRef.value || !isDraggingSplitLine.value) return
+    
+    const rect = comparisonContainerRef.value.getBoundingClientRect()
+    const x = moveEvent.clientX - rect.left
+    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100))
+    splitPosition.value = percentage
+  }
+  
+  const handleMouseUp = () => {
+    isDraggingSplitLine.value = false
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+  }
+  
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+}
+
+const handlePaste = async (event: ClipboardEvent) => {
+  const items = event.clipboardData?.items
+  if (!items) return
+
+  // 检查是否有图片数据
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (item.type.indexOf('image') !== -1) {
+      event.preventDefault()
+      const file = item.getAsFile()
+      if (file) {
+        processFile(file)
+      }
+      return
+    }
+  }
+
+  // 检查是否有文本URL
+  const text = event.clipboardData?.getData('text')
+  if (text && isValidImageUrl(text)) {
+    event.preventDefault()
+    imageUrl.value = text.trim()
+    await handleUrlSubmit()
+  }
+}
+
+const isValidImageUrl = (url: string): boolean => {
+  if (!url || typeof url !== 'string') return false
+  try {
+    const urlObj = new URL(url)
+    if (!['http:', 'https:'].includes(urlObj.protocol)) {
+      return false
+    }
+    
+    const pathname = urlObj.pathname.toLowerCase()
+    const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.bmp']
+    
+    const hasImageExtension = imageExtensions.some(ext => pathname.endsWith(ext)) || 
+                              urlObj.pathname.match(/\.(jpg|jpeg|png|webp|gif|bmp)(\?|$)/i) !== null
+    
+    return hasImageExtension || pathname.length > 0
+  } catch {
+    return false
+  }
+}
+
+const handleUrlPaste = async (event: ClipboardEvent) => {
+  const text = event.clipboardData?.getData('text')
+  if (text && isValidImageUrl(text)) {
+    event.preventDefault()
+    imageUrl.value = text.trim()
+    await handleUrlSubmit()
+  }
+}
+
+const handleUrlSubmit = async () => {
+  const url = imageUrl.value.trim()
+  if (!url) {
+    message.warning(t('Please enter an image URL'))
+    return
+  }
+
+  if (!isValidImageUrl(url)) {
+    message.warning(t('Please enter a valid image URL'))
+    return
+  }
+
+  processing.value = true
+  resultImage.value = ''
+  splitPosition.value = 0
+  currentHistoryIndex.value = -1
+
+  try {
+    const response = await fetch(url, { mode: 'cors' })
+    if (!response.ok) {
+      throw new Error(`Failed to load image: ${response.status}`)
+    }
+
+    const blob = await response.blob()
+    
+    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+    if (!validTypes.includes(blob.type)) {
+      message.warning(t('Unsupported image format. Please use JPG, PNG, or WebP'))
+      processing.value = false
+      return
+    }
+
+    const maxSize = 10 * 1024 * 1024
+    if (blob.size > maxSize) {
+      message.warning(t('Image size exceeds 10MB limit'))
+      processing.value = false
+      return
+    }
+
+    const originalFile = new File([blob], 'image-from-url', { type: blob.type })
+    
+    // 压缩图片到 1024x1024
+    try {
+      const compressedFile = await compressImageFile(originalFile, {
+        maxWidth: 1024,
+        maxHeight: 1024,
+        quality: 0.92,
+        mode: 'contain' // 等比缩放
+      })
+      
+      uploadedImage.value = compressedFile
+      uploadedImageUrl.value = URL.createObjectURL(compressedFile)
+      
+      await handleRemoveBackground()
+    } catch (error) {
+      console.error('图片压缩失败:', error)
+      message.error(t('Image processing failed, please try again'))
+      processing.value = false
+    }
+  } catch (error: any) {
+    console.error('加载图片URL失败:', error)
+    let errorMessage = t('Failed to load image from URL')
+    
+    if (error.message?.includes('CORS')) {
+      errorMessage = t('CORS error. The image server does not allow cross-origin access.')
+    } else if (error.message?.includes('Failed to load')) {
+      errorMessage = t('Failed to load image. Please check the URL and try again.')
+    }
+    
+    message.error(errorMessage)
+    processing.value = false
+  }
+}
+
+const selectHistoryItem = async (index: number) => {
+  if (index < 0 || index >= historyList.value.length) return
+  
+  const item = historyList.value[index]
+  currentHistoryIndex.value = index
+  uploadedImageUrl.value = item.originalImageUrl
+  resultImage.value = item.resultImage
+  splitPosition.value = 0
+  uploadedImage.value = item.originalImageFile
+  
+  // 缓存历史记录的结果图片
+  if (item.resultImage) {
+    await cacheResultImage(item.resultImage)
+  }
+}
+
+const getHistoryThumbnailUrl = (item: HistoryItem): string => {
+  if (item.resultImage) {
+    return item.resultImage
+  }
+  return item.originalImageUrl
+}
+
+const removeHistoryItem = (index: number) => {
+  if (index < 0 || index >= historyList.value.length) return
+
+  const removingCurrent = currentHistoryIndex.value === index
+  historyList.value.splice(index, 1)
+
+  if (historyList.value.length === 0) {
+    currentHistoryIndex.value = -1
+    resetUpload()
+    return
+  }
+
+  if (removingCurrent) {
+    const nextIndex = Math.min(index, historyList.value.length - 1)
+    selectHistoryItem(nextIndex)
+  } else if (currentHistoryIndex.value > index) {
+    currentHistoryIndex.value -= 1
+  }
+}
+
+onMounted(async () => {
+  window.addEventListener('resize', handleWindowResize)
+  window.addEventListener('paste', handlePaste)
+  
+  // 初始化认证状态
+  await authStore.initAuth()
+  
+  // 检查服务器配置，判断是否显示注册链接
+  try {
+    const response = await fetch('/jingrow/server-config')
+    if (response.ok) {
+      // 检查 Content-Type 是否为 JSON
+      const contentType = response.headers.get('content-type')
+      if (contentType && contentType.includes('application/json')) {
+        const data = await response.json()
+        if (data.success && data.jingrow_server_url === 'https://cloud.jingrow.com') {
+          showSignupLink.value = true
+        }
+      }
+    }
+  } catch (error) {
+    // 静默处理错误，不影响页面流程
+    // console.error('Failed to get server config:', error)
+  }
+  
+  // 检测移动端
+  checkIsMobile()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize)
+  window.removeEventListener('paste', handlePaste)
+  if (uploadedImageUrl.value && uploadedImageUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(uploadedImageUrl.value)
+  }
+  // 清理结果图片的 blob URL 缓存
+  if (resultImageBlobUrl.value) {
+    URL.revokeObjectURL(resultImageBlobUrl.value)
+  }
+})
+</script>
+
+<template>
+  <div class="home-page" @dragenter.prevent="handleDragEnter" @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
+    <!-- 未登录状态：显示营销页面布局 -->
+    <template v-if="!isLoggedIn">
+      <!-- Header -->
+      <header class="marketing-header">
+        <div class="header-container">
+          <div class="header-left">
+            <router-link to="/" class="logo-link">
+              <img v-if="logoUrl" :src="logoUrl" :alt="appName" class="logo-img" />
+              <span class="logo-text">{{ appName }}</span>
+            </router-link>
+          </div>
+          <div class="header-right">
+            <n-space :size="12">
+              <n-button quaternary @click="handleSignup">{{ t('Sign up') }}</n-button>
+              <n-button type="primary" @click="handleLogin" class="login-btn">{{ t('Login') }}</n-button>
+            </n-space>
+          </div>
+        </div>
+      </header>
+
+      <!-- Main Content -->
+      <main class="main-content">
+      <div v-if="isDragging" class="global-drag-overlay">
+        <div class="overlay-content">
+          <p>{{ t('Drop image anywhere to remove background') }}</p>
+        </div>
+      </div>
+      
+      <input ref="fileInputRef" type="file" accept="image/*" style="display: none" @change="handleFileSelect" />
+      
+      <div class="tool-page">
+        <div class="page-header">
+          <h2>{{ t('Remove Background') }}</h2>
+          <div v-if="uploadedImage" class="toolbar-actions">
+            <button v-if="resultImage" class="toolbar-btn" @click="handleDownload" :title="t('Download')">
+              <i class="fa fa-download"></i>
+            </button>
+            <button class="toolbar-btn" @click="resetUpload" :title="t('Change Image')">
+              <i class="fa fa-refresh"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="page-content">
+          <div class="tool-container">
+            <div class="upload-section">
+              <div v-if="!uploadedImage" class="upload-area" :class="{ dragging: isDragging }">
+                <div class="upload-content">
+                  <button type="button" class="upload-btn" @click="triggerFileInput" :disabled="processing">
+                    <i class="fa fa-upload"></i>
+                    <span>{{ t('Upload Image') }}</span>
+                  </button>
+                  
+                  <div class="divider">
+                    <span>{{ t('or') }}</span>
+                  </div>
+                  
+                  <div class="url-input-wrapper" @click.stop>
+                    <input
+                      ref="urlInputRef"
+                      v-model="imageUrl"
+                      type="text"
+                      class="url-input"
+                      :placeholder="t('Paste image URL here')"
+                      @keyup.enter="handleUrlSubmit"
+                      @paste="handleUrlPaste"
+                      :disabled="processing"
+                    />
+                  </div>
+                  
+                  <p class="upload-hint">{{ t('Drag and drop your image anywhere, or paste image directly') }}</p>
+                  <p class="upload-format-hint">{{ t('Supports JPG, PNG, WebP formats') }}</p>
+                </div>
+                <div v-if="processing" class="upload-processing-overlay">
+                  <div class="spinner"></div>
+                  <p>{{ t('Loading image from URL...') }}</p>
+                </div>
+              </div>
+
+              <div v-else class="preview-section">
+                <div class="comparison-view" v-if="resultImage">
+                  <div class="comparison-container" ref="comparisonContainerRef">
+                    <div class="comparison-image original-image" :style="{ clipPath: `inset(0 ${100 - splitPosition}% 0 0)` }">
+                      <img ref="originalImageRef" :src="uploadedImageUrl" :alt="t('Original')" @load="adjustContainerSize" />
+                    </div>
+                    <div class="comparison-image result-image" :style="{ clipPath: `inset(0 0 0 ${splitPosition}%)` }">
+                      <img ref="resultImageRef" :src="resultImageUrl" :alt="t('Background Removed')" @load="adjustContainerSize" />
+                    </div>
+                    <div class="split-line" :class="{ dragging: isDraggingSplitLine }" :style="{ left: `${splitPosition}%` }" @mousedown.prevent.stop="handleSplitLineMouseDown">
+                      <div class="split-line-handle">
+                        <i class="fa fa-arrows-h"></i>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="single-image-view">
+                  <div class="image-wrapper" ref="singleImageWrapperRef">
+                    <div class="single-image-container">
+                      <img ref="singleImageRef" :src="uploadedImageUrl" :alt="t('Original')" @load="adjustContainerSize" />
+                    </div>
+                    <div v-if="processing" class="processing-overlay">
+                      <div class="spinner"></div>
+                      <p>{{ t('Processing...') }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="historyList.length > 0 || uploadedImage" class="history-bar">
+              <div class="history-scroll-container">
+                <button 
+                  type="button"
+                  class="history-item add-button"
+                  @click.stop="triggerFileInput"
+                  :title="t('Add new image')"
+                >
+                  <i class="fa fa-plus"></i>
+                </button>
+
+                <div
+                  v-for="(item, index) in historyList"
+                  :key="item.id"
+                  class="history-item"
+                  :class="{ 'active': currentHistoryIndex === index }"
+                  @click="selectHistoryItem(index)"
+                >
+                  <div class="history-thumbnail">
+                    <img :src="getHistoryThumbnailUrl(item)" alt="History" />
+                    <button
+                      type="button"
+                      class="history-delete-btn"
+                      @click.stop="removeHistoryItem(index)"
+                      :title="t('Delete')"
+                      :aria-label="t('Delete')"
+                    ></button>
+                  </div>
+                </div>
+
+                <div
+                  v-if="uploadedImage && resultImage && currentHistoryIndex === -1"
+                  class="history-item active"
+                >
+                  <div class="history-thumbnail">
+                    <img :src="resultImageUrl" alt="Current" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 示例图片区块 -->
+            <div v-if="!uploadedImage" class="sample-images-section">
+              <p class="sample-images-title">{{ t('Click image to try') }}</p>
+              <div class="sample-images-container">
+                <div
+                  v-for="sample in sampleImages"
+                  :key="sample.id"
+                  class="sample-image-item"
+                  @click="handleSampleImageClick(sample.url)"
+                  :class="{ loading: processing }"
+                >
+                  <div class="sample-image-wrapper">
+                    <img :src="sample.url" :alt="sample.name" loading="lazy" />
+                    <div class="sample-image-overlay">
+                      <Icon icon="tabler:wand" class="overlay-icon" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      </main>
+
+      <!-- Footer -->
+      <footer class="marketing-footer">
+        <div class="footer-container">
+          <div class="footer-content">
+            <!-- 左侧：Logo 和社交媒体 -->
+            <div class="footer-left">
+              <div class="footer-logo">
+                <router-link to="/" class="logo-link">
+                  <img v-if="logoUrl" :src="logoUrl" :alt="appName" class="logo-img" />
+                  <span class="logo-text">{{ appName }}</span>
+                </router-link>
+              </div>
+              <div class="footer-social">
+                <a href="#" class="social-icon" :title="t('WeChat')">
+                  <Icon icon="tabler:brand-wechat" />
+                </a>
+                <a href="#" class="social-icon" :title="t('Weibo')">
+                  <Icon icon="ant-design:weibo-outlined" />
+                </a>
+                <a href="#" class="social-icon" :title="t('TikTok')">
+                  <Icon icon="tabler:brand-tiktok" />
+                </a>
+                <a href="#" class="social-icon" :title="t('Zhihu')">
+                  <Icon icon="ant-design:zhihu-square-filled" />
+                </a>
+              </div>
+              <div class="footer-copyright">
+                <p class="copyright-text">© {{ currentYear }} {{ t('Guangzhou Sunflower Network Information Technology Co., Ltd.') }} {{ t('All Rights Reserved') }}</p>
+                <p class="icp-text">
+                  <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer">粤ICP备20016818号</a>
+                </p>
+              </div>
+            </div>
+            
+            <!-- 右侧：三列链接 -->
+            <div class="footer-right">
+              <div class="footer-column">
+                <h3 class="footer-title">{{ t('Products & Services') }}</h3>
+                <ul class="footer-links">
+                  <li><a href="https://jingrow.com" target="_blank">Jingrow</a></li>
+                  <li><a href="https://jingrowtools.com" target="_blank">{{ t('Jingrow Tools') }}</a></li>
+                </ul>
+              </div>
+              <div class="footer-column">
+                <h3 class="footer-title">{{ t('Resources') }}</h3>
+                <ul class="footer-links">
+                  <li><a href="#">{{ t('Use Cases') }}</a></li>
+                  <li><a href="#">{{ t('API & Pricing') }}</a></li>
+                  <li><a href="#">{{ t('Developer Documentation') }}</a></li>
+                  <li><a href="#">{{ t('Research & Exploration') }}</a></li>
+                </ul>
+              </div>
+              <div class="footer-column">
+                <h3 class="footer-title">{{ t('Support & Help') }}</h3>
+                <ul class="footer-links">
+                  <li><a href="#">{{ t('Tutorials') }}</a></li>
+                  <li><a href="#">{{ t('FAQ') }}</a></li>
+                  <li><a href="#">{{ t('Online Support') }}</a></li>
+                  <li><a href="#">{{ t('Feedback & Suggestions') }}</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </template>
+
+    <!-- 已登录状态：显示应用布局（带 sidebar 和 header） -->
+    <template v-else>
+      <n-layout has-sider class="app-layout">
+        <!-- 侧边栏 -->
+        <n-layout-sider
+          bordered
+          collapse-mode="width"
+          :collapsed-width="64"
+          :width="240"
+          v-model:collapsed="collapsed"
+          :show-trigger="!isMobile"
+          :responsive="true"
+          :breakpoint="768"
+          @collapse="onSidebarCollapse"
+          @expand="onSidebarExpand"
+        >
+          <AppSidebar :collapsed="collapsed" @menu-select="onMenuSelect" />
+        </n-layout-sider>
+
+        <!-- 主内容区 -->
+        <n-layout>
+          <!-- 顶部导航 -->
+          <n-layout-header bordered>
+            <AppHeader @toggle-sidebar="toggleSidebar" />
+          </n-layout-header>
+
+          <!-- 内容区域 -->
+          <n-layout-content>
+            <div class="content-wrapper">
+              <div v-if="isDragging" class="global-drag-overlay">
+                <div class="overlay-content">
+                  <p>{{ t('Drop image anywhere to remove background') }}</p>
+                </div>
+              </div>
+              
+              <input ref="fileInputRef" type="file" accept="image/*" style="display: none" @change="handleFileSelect" />
+              
+              <div class="tool-page">
+                  <div class="page-header">
+                    <h2>{{ t('Remove Background') }}</h2>
+                    <div v-if="uploadedImage" class="toolbar-actions">
+                      <button v-if="resultImage" class="toolbar-btn" @click="handleDownload" :title="t('Download')">
+                        <i class="fa fa-download"></i>
+                      </button>
+                      <button class="toolbar-btn" @click="resetUpload" :title="t('Change Image')">
+                        <i class="fa fa-refresh"></i>
+                      </button>
+                    </div>
+                  </div>
+
+                  <div class="page-content">
+                    <div class="tool-container">
+                      <div class="upload-section">
+                        <div v-if="!uploadedImage" class="upload-area" :class="{ dragging: isDragging }">
+                          <div class="upload-content">
+                            <button type="button" class="upload-btn" @click="triggerFileInput" :disabled="processing">
+                              <i class="fa fa-upload"></i>
+                              <span>{{ t('Upload Image') }}</span>
+                            </button>
+                            
+                            <div class="divider">
+                              <span>{{ t('or') }}</span>
+                            </div>
+                            
+                            <div class="url-input-wrapper" @click.stop>
+                              <input
+                                ref="urlInputRef"
+                                v-model="imageUrl"
+                                type="text"
+                                class="url-input"
+                                :placeholder="t('Paste image URL here')"
+                                @keyup.enter="handleUrlSubmit"
+                                @paste="handleUrlPaste"
+                                :disabled="processing"
+                              />
+                            </div>
+                            
+                            <p class="upload-hint">{{ t('Drag and drop your image anywhere, or paste image directly') }}</p>
+                            <p class="upload-format-hint">{{ t('Supports JPG, PNG, WebP formats') }}</p>
+                          </div>
+                          <div v-if="processing" class="upload-processing-overlay">
+                            <div class="spinner"></div>
+                            <p>{{ t('Loading image from URL...') }}</p>
+                          </div>
+                        </div>
+
+                        <div v-else class="preview-section">
+                          <div class="comparison-view" v-if="resultImage">
+                            <div class="comparison-container" ref="comparisonContainerRef">
+                              <div class="comparison-image original-image" :style="{ clipPath: `inset(0 ${100 - splitPosition}% 0 0)` }">
+                                <img ref="originalImageRef" :src="uploadedImageUrl" :alt="t('Original')" @load="adjustContainerSize" />
+                              </div>
+                              <div class="comparison-image result-image" :style="{ clipPath: `inset(0 0 0 ${splitPosition}%)` }">
+                                <img ref="resultImageRef" :src="resultImageUrl" :alt="t('Background Removed')" @load="adjustContainerSize" />
+                              </div>
+                              <div class="split-line" :class="{ dragging: isDraggingSplitLine }" :style="{ left: `${splitPosition}%` }" @mousedown.prevent.stop="handleSplitLineMouseDown">
+                                <div class="split-line-handle">
+                                  <i class="fa fa-arrows-h"></i>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div v-else class="single-image-view">
+                            <div class="image-wrapper" ref="singleImageWrapperRef">
+                              <div class="single-image-container">
+                                <img ref="singleImageRef" :src="uploadedImageUrl" :alt="t('Original')" @load="adjustContainerSize" />
+                              </div>
+                              <div v-if="processing" class="processing-overlay">
+                                <div class="spinner"></div>
+                                <p>{{ t('Processing...') }}</p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div v-if="historyList.length > 0 || uploadedImage" class="history-bar">
+                        <div class="history-scroll-container">
+                          <button 
+                            type="button"
+                            class="history-item add-button"
+                            @click.stop="triggerFileInput"
+                            :title="t('Add new image')"
+                          >
+                            <i class="fa fa-plus"></i>
+                          </button>
+
+                          <div
+                            v-for="(item, index) in historyList"
+                            :key="item.id"
+                            class="history-item"
+                            :class="{ 'active': currentHistoryIndex === index }"
+                            @click="selectHistoryItem(index)"
+                          >
+                            <div class="history-thumbnail">
+                              <img :src="getHistoryThumbnailUrl(item)" alt="History" />
+                              <button
+                                type="button"
+                                class="history-delete-btn"
+                                @click.stop="removeHistoryItem(index)"
+                                :title="t('Delete')"
+                                :aria-label="t('Delete')"
+                              ></button>
+                            </div>
+                          </div>
+
+                          <div
+                            v-if="uploadedImage && resultImage && currentHistoryIndex === -1"
+                            class="history-item active"
+                          >
+                            <div class="history-thumbnail">
+                              <img :src="resultImageUrl" alt="Current" />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <!-- 示例图片区块 -->
+                      <div v-if="!uploadedImage" class="sample-images-section">
+                        <p class="sample-images-title">{{ t('Click image to try') }}</p>
+                        <div class="sample-images-container">
+                          <div
+                            v-for="sample in sampleImages"
+                            :key="sample.id"
+                            class="sample-image-item"
+                            @click="handleSampleImageClick(sample.url)"
+                            :class="{ loading: processing }"
+                          >
+                            <div class="sample-image-wrapper">
+                              <img :src="sample.url" :alt="sample.name" loading="lazy" />
+                              <div class="sample-image-overlay">
+                                <Icon icon="tabler:wand" class="overlay-icon" />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+            </div>
+          </n-layout-content>
+        </n-layout>
+
+        <!-- 移动端遮罩层 -->
+        <div 
+          v-if="isMobile && !collapsed" 
+          class="mobile-overlay"
+          @click="toggleSidebar"
+        ></div>
+      </n-layout>
+    </template>
+
+    <!-- 登录弹窗 -->
+    <n-modal
+      v-model:show="showLoginModal"
+      preset="card"
+      :title="appName"
+      size="large"
+      :bordered="false"
+      :mask-closable="true"
+      style="max-width: 500px;"
+      class="auth-modal"
+    >
+      <n-form
+        ref="loginFormRef"
+        :model="loginFormData"
+        :rules="loginRules"
+        size="medium"
+        :show-label="false"
+        @keyup.enter="handleLoginSubmit"
+      >
+        <n-form-item path="username">
+          <n-input
+            v-model:value="loginFormData.username"
+            :placeholder="t('Username')"
+            :input-props="{ autocomplete: 'username' }"
+          >
+            <template #prefix>
+              <Icon icon="tabler:user" />
+            </template>
+          </n-input>
+        </n-form-item>
+
+        <n-form-item path="password">
+          <n-input
+            v-model:value="loginFormData.password"
+            type="password"
+            :placeholder="t('Password')"
+            :input-props="{ autocomplete: 'current-password' }"
+            show-password-on="click"
+          >
+            <template #prefix>
+              <Icon icon="tabler:lock" />
+            </template>
+          </n-input>
+        </n-form-item>
+
+        <n-form-item>
+          <n-button
+            type="primary"
+            size="large"
+            block
+            :loading="loginLoading"
+            @click="handleLoginSubmit"
+            class="brand-button"
+          >
+            {{ t('Login') }}
+          </n-button>
+        </n-form-item>
+      </n-form>
+
+      <div class="auth-footer" v-if="showSignupLink">
+        <n-text depth="3">
+          {{ t("Don't have an account?") }}
+          <a href="javascript:void(0)" class="auth-link" @click="switchToSignup">
+            {{ t('Sign up') }}
+          </a>
+        </n-text>
+      </div>
+    </n-modal>
+
+    <!-- 注册弹窗 -->
+    <n-modal
+      v-model:show="showSignupModal"
+      preset="card"
+      :title="appName"
+      size="large"
+      :bordered="false"
+      :mask-closable="true"
+      style="max-width: 500px;"
+      class="auth-modal"
+    >
+      <n-form
+        ref="signupFormRef"
+        :model="signupFormData"
+        :rules="signupRules"
+        size="medium"
+        :show-label="false"
+        @keyup.enter="handleSignupSubmit"
+      >
+        <n-form-item path="username">
+          <n-input
+            v-model:value="signupFormData.username"
+            :placeholder="t('Username')"
+            :input-props="{ autocomplete: 'username' }"
+          >
+            <template #prefix>
+              <Icon icon="tabler:user" />
+            </template>
+          </n-input>
+        </n-form-item>
+
+        <n-form-item path="password">
+          <n-input
+            v-model:value="signupFormData.password"
+            type="password"
+            :placeholder="t('Password')"
+            :input-props="{ autocomplete: 'new-password' }"
+            show-password-on="click"
+          >
+            <template #prefix>
+              <Icon icon="tabler:lock" />
+            </template>
+          </n-input>
+        </n-form-item>
+
+        <n-form-item path="confirmPassword">
+          <n-input
+            v-model:value="signupFormData.confirmPassword"
+            type="password"
+            :placeholder="t('Confirm Password')"
+            :input-props="{ autocomplete: 'new-password' }"
+            show-password-on="click"
+          >
+            <template #prefix>
+              <Icon icon="tabler:lock" />
+            </template>
+          </n-input>
+        </n-form-item>
+
+        <n-form-item path="email">
+          <n-input
+            v-model:value="signupFormData.email"
+            :placeholder="isEnglish ? t('Email') : t('Email (Optional)')"
+            :input-props="{ autocomplete: 'email', type: 'email' }"
+          >
+            <template #prefix>
+              <Icon icon="tabler:mail" />
+            </template>
+          </n-input>
+        </n-form-item>
+
+        <n-form-item v-if="!isEnglish" path="phoneNumber">
+          <n-input
+            v-model:value="signupFormData.phoneNumber"
+            :placeholder="t('Mobile')"
+            :input-props="{ autocomplete: 'tel' }"
+          >
+            <template #prefix>
+              <Icon icon="tabler:phone" />
+            </template>
+          </n-input>
+        </n-form-item>
+
+        <n-form-item>
+          <n-button
+            type="primary"
+            size="medium"
+            block
+            :loading="signupLoading"
+            @click="handleSignupSubmit"
+            class="brand-button"
+          >
+            {{ t('Sign up') }}
+          </n-button>
+        </n-form-item>
+      </n-form>
+
+      <div class="auth-footer">
+        <n-text depth="3">
+          {{ t('Already have an account?') }}
+          <a href="javascript:void(0)" class="auth-link" @click="switchToLogin">
+            {{ t('Login') }}
+          </a>
+        </n-text>
+      </div>
+    </n-modal>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home-page {
+  min-height: 100vh; /* 使用 min-height 而不是固定 height */
+  display: flex;
+  flex-direction: column;
+  background: white;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 应用布局样式（登录后） */
+.app-layout {
+  height: 100vh;
+}
+
+.content-wrapper {
+  padding: 20px;
+  min-height: calc(100vh - 64px);
+  overflow-y: auto;
+}
+
+/* 使用Naive UI内置的sticky功能 */
+:deep(.n-layout-header) {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+/* 移动端遮罩层 */
+.mobile-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+/* 移动端样式 */
+@media (max-width: 767px) {
+  /* 移动端时完全隐藏侧边栏 */
+  :deep(.n-layout-sider) {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 1000;
+    width: 280px !important;
+    max-width: 80vw;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+  
+  /* 移动端侧边栏打开时的样式 */
+  :deep(.n-layout-sider:not(.n-layout-sider--collapsed)) {
+    transform: translateX(0) !important;
+  }
+  
+  /* 移动端主内容区域占满全宽 */
+  :deep(.n-layout) {
+    margin-left: 0 !important;
+  }
+}
+
+/* 桌面端保持原有样式 */
+@media (min-width: 768px) {
+  :deep(.n-layout-sider) {
+    position: relative !important;
+    transform: none !important;
+  }
+}
+
+/* Header */
+.marketing-header {
+  flex-shrink: 0;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background: white;
+  border-bottom: 1px solid var(--n-border-color, #efeff5);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.header-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  color: #1f2937;
+  font-size: 16px;
+  font-weight: 700;
+  transition: opacity 0.2s;
+  
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.logo-img {
+  height: 32px;
+  width: auto;
+}
+
+.logo-text {
+  font-size: 16px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.login-btn) {
+  background: #e6f8f0 !important;
+  color: #0d684b !important;
+  
+  &:hover {
+    background: #dcfce7 !important;
+    color: #166534 !important;
+  }
+  
+  &:active {
+    background: #1fc76f !important;
+    color: white !important;
+  }
+}
+
+/* Main Content */
+.main-content {
+  flex: 1;
+  width: 100%;
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  height: 0;
+}
+
+.content-wrapper .main-content {
+  height: auto;
+  min-height: auto;
+  overflow: hidden;
+}
+
+.global-drag-overlay {
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(circle at center, rgba(248, 250, 252, 0.92), rgba(248, 250, 252, 0.82));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  pointer-events: none;
+  animation: fade-in 0.15s ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 55vmax;
+    height: 55vmax;
+    border-radius: 35%;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    animation: rotate 12s linear infinite;
+    pointer-events: none;
+  }
+}
+
+.overlay-content {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 18px 30px;
+  color: #0f172a;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  letter-spacing: 0.04em;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -10px;
+    border-radius: 999px;
+    border: 1px solid rgba(79, 70, 229, 0.35);
+    opacity: 0.7;
+    animation: pulse-line 1.8s ease-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -28px 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, rgba(59, 130, 246, 0), rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0));
+    filter: blur(10px);
+    opacity: 0.65;
+    animation: shimmer 2.4s linear infinite;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse-line {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.tool-page {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 600px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-header {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 12px 36px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.toolbar-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: white;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    border-color: #1fc76f;
+    color: #1fc76f;
+    background: #f0fdf4;
+  }
+}
+
+.page-content {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 600px; /* 设置最小高度确保容器足够大 */
+  padding: 12px 16px;
+}
+
+.tool-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 600px; /* 设置最小高度确保容器足够大 */
+}
+
+/* 示例图片区块 */
+.sample-images-section {
+  margin-top: 24px;
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e5e7eb;
+}
+
+.sample-images-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #64748b;
+  margin: 0 0 16px 0;
+  letter-spacing: 0.05em;
+}
+
+.sample-images-container {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0;
+  padding-bottom: 8px;
+  justify-content: center;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+  -webkit-overflow-scrolling: touch;
+  
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+    
+    &:hover {
+      background: #94a3b8;
+    }
+  }
+}
+
+.sample-image-item {
+  flex-shrink: 0;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  position: relative;
+  padding: 4px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-4px);
+    
+    .sample-image-overlay {
+      opacity: 1;
+    }
+  }
+  
+  &.loading {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+  
+}
+
+.sample-image-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f1f5f9;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  
+  .sample-image-item:hover & {
+    border-color: #1fc76f;
+    box-shadow: 0 8px 16px rgba(31, 199, 111, 0.2);
+  }
+}
+
+.sample-image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(31, 199, 111, 0.9), rgba(13, 104, 75, 0.9));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  
+  .overlay-icon {
+    font-size: 32px;
+    color: white;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+  }
+}
+
+.upload-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 600px; /* 设置最小高度 */
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e5e7eb;
+}
+
+.upload-section:has(.preview-section) {
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  min-height: 600px; /* 确保预览区域有足够高度 */
+  height: auto;
+}
+
+.upload-area {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #cbd5e1;
+  border-radius: 12px;
+  padding: 48px 32px;
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: #fafbfc;
+  min-height: 0;
+  position: relative;
+
+  &:hover {
+    border-color: #1fc76f;
+    background: #f0fdf4;
+  }
+
+  &.dragging {
+    border-color: #1fc76f;
+    background: #ecfdf5;
+    border-style: solid;
+  }
+}
+
+.upload-processing-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.95);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  border-radius: 12px;
+  backdrop-filter: blur(4px);
+  z-index: 10;
+
+  p {
+    font-size: 14px;
+    color: #64748b;
+    margin: 0;
+    font-weight: 500;
+  }
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  max-width: 500px;
+}
+
+.upload-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 40px;
+  background: #e6f8f0;
+  color: #0d684b;
+  border: 1px solid #1fc76f;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+
+  i {
+    font-size: 16px;
+  }
+
+  &:hover:not(:disabled) {
+    background: #dcfce7;
+    border-color: #1fc76f;
+    color: #166534;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
+  }
+
+  &:active:not(:disabled) {
+    background: #1fc76f;
+    border-color: #1fc76f;
+    color: white;
+    transform: translateY(0);
+    box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+    color: #94a3b8;
+  }
+
+  &:disabled:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  color: #94a3b8;
+  font-size: 13px;
+  width: 100%;
+  max-width: 300px;
+  
+  &::before, &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #e5e7eb;
+  }
+  
+  span {
+    padding: 0 12px;
+  }
+}
+
+.upload-hint {
+  font-size: 13px;
+  color: #64748b;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.upload-format-hint {
+  font-size: 12px;
+  color: #94a3b8;
+  margin: 0;
+}
+
+.url-input-wrapper {
+  width: 100%;
+  max-width: 500px;
+}
+
+.url-input {
+  width: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: #1f2937;
+  background: white;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &::placeholder {
+    color: #94a3b8;
+  }
+
+  &:focus {
+    border-color: #1fc76f;
+    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: #f8fafc;
+  }
+}
+
+.preview-section {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  min-height: 0;
+  padding: 12px;
+}
+
+.comparison-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.comparison-container {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  background: 
+    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
+    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.comparison-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  img {
+    display: block;
+    min-width: 620px;
+    min-height: 620px;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+  }
+}
+
+.original-image {
+  z-index: 1;
+}
+
+.result-image {
+  z-index: 2;
+}
+
+.split-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: transparent;
+  cursor: col-resize;
+  z-index: 10;
+  transform: translateX(-50%);
+  transition: left 0s;
+  user-select: none;
+  pointer-events: auto;
+  
+  &:hover {
+    width: 2px;
+  }
+  
+  &.dragging {
+    transition: none;
+    cursor: col-resize;
+  }
+}
+
+.split-line-handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 2px solid #1fc76f;
+  
+  i {
+    color: #1fc76f;
+    font-size: 16px;
+  }
+}
+
+.single-image-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  background: 
+    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
+    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.single-image-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+  }
+}
+
+.processing-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  backdrop-filter: blur(4px);
+
+  p {
+    font-size: 14px;
+    color: #64748b;
+    margin: 0;
+  }
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #e5e7eb;
+  border-top-color: #1fc76f;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.history-bar {
+  flex-shrink: 0;
+  width: 100%;
+  padding: 12px 0;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+}
+
+.history-scroll-container {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+
+    &:hover {
+      background: #94a3b8;
+    }
+  }
+}
+
+.history-item {
+  flex-shrink: 0;
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+
+  &.add-button {
+    background: white;
+    border: 2px dashed #cbd5e1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
+    transition: all 0.2s ease;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    i {
+      font-size: 24px;
+      pointer-events: none;
+    }
+
+    &:hover {
+      border-color: #1fc76f;
+      color: #1fc76f;
+      background: #f0fdf4;
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: #1fc76f;
+    }
+  }
+
+  &.active {
+    .history-thumbnail {
+      border-color: #1fc76f;
+      box-shadow: 0 0 10px rgba(31, 199, 111, 0.35);
+    }
+  }
+}
+
+.history-thumbnail {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  border: 2px solid #e5e7eb;
+  overflow: hidden;
+  position: relative;
+  background: 
+    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
+    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+  transition: all 0.2s ease;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+
+  &:hover {
+    border-color: #1fc76f;
+  }
+
+  .history-delete-btn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    border: none;
+    background: rgba(15, 23, 42, 0.6);
+    color: white;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: scale(0.9);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    font-size: 0;
+    line-height: 1;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 10px;
+      height: 2px;
+      background: white;
+      border-radius: 999px;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+
+    &:hover {
+      background: rgba(239, 68, 68, 0.85);
+    }
+  }
+
+  &:hover .history-delete-btn {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Footer */
+.marketing-footer {
+  background: white;
+  margin-top: auto;
+  padding: 64px 0;
+}
+
+.footer-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 64px;
+}
+
+/* 左侧区域 */
+.footer-left {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  flex-shrink: 0;
+}
+
+.footer-logo {
+  .logo-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    text-decoration: none;
+    color: #1f2937;
+    font-size: 18px;
+    font-weight: 700;
+    transition: opacity 0.2s;
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  
+  .logo-img {
+    height: 32px;
+    width: auto;
+  }
+  
+  .logo-text {
+    font-size: 18px;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+}
+
+.footer-social {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.social-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: #94a3b8;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  
+  :deep(svg) {
+    width: 32px;
+    height: 32px;
+  }
+  
+  &:hover {
+    color: #1fc76f;
+    transform: translateY(-2px);
+  }
+}
+
+.footer-copyright {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.copyright-text {
+  margin: 0;
+  color: #6b7280;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.icp-text {
+  margin: 0;
+  color: #9ca3af;
+  font-size: 12px;
+  line-height: 1.5;
+  
+  a {
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.2s ease;
+    
+    &:hover {
+      color: #1fc76f;
+    }
+  }
+}
+
+/* 右侧区域 */
+.footer-right {
+  display: flex;
+  gap: 64px;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.footer-column {
+  display: flex;
+  flex-direction: column;
+  min-width: 140px;
+}
+
+.footer-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0 0 16px 0;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.footer-links li {
+  margin: 0;
+}
+
+.footer-links a {
+  color: #6b7280;
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 1.5;
+  transition: all 0.2s ease;
+  display: inline-block;
+  
+  &:hover {
+    color: #1fc76f;
+    transform: translateX(2px);
+  }
+}
+
+@media (max-width: 1024px) {
+  .footer-content {
+    gap: 48px;
+  }
+  
+  .footer-right {
+    gap: 48px;
+  }
+}
+
+@media (max-width: 768px) {
+  .marketing-header {
+    padding: 0 12px;
+    height: 56px;
+  }
+  
+  .logo-text {
+    font-size: 20px;
+  }
+  
+  .main-content {
+    padding: 12px;
+  }
+  
+  .page-header {
+    padding: 10px 12px;
+  }
+
+  .page-header h2 {
+    font-size: 18px;
+  }
+
+  .page-content {
+    padding: 8px 12px;
+  }
+
+  .sample-images-section {
+    padding: 16px;
+    margin-top: 16px;
+  }
+
+  .sample-images-title {
+    font-size: 12px;
+    margin-bottom: 12px;
+  }
+
+  .sample-image-item {
+    width: 100px;
+    height: 100px;
+  }
+
+  .sample-image-overlay .overlay-icon {
+    font-size: 24px;
+  }
+
+  .upload-section {
+    padding: 16px;
+  }
+
+  .upload-area {
+    padding: 32px 16px;
+  }
+
+  .upload-content {
+    gap: 14px;
+    max-width: 100%;
+  }
+
+  .upload-btn {
+    width: 100%;
+    justify-content: center;
+    padding: 18px 32px;
+    font-size: 15px;
+
+    i {
+      font-size: 15px;
+    }
+  }
+
+  .divider {
+    max-width: 100%;
+  }
+
+  .url-input-wrapper {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .url-input {
+    font-size: 12px;
+    padding: 6px 10px;
+  }
+
+  .preview-section {
+    padding: 8px;
+  }
+
+  .history-bar {
+    padding: 10px 0;
+  }
+
+  .history-item {
+    width: 48px;
+    height: 48px;
+  }
+
+  .history-scroll-container {
+    gap: 8px;
+    padding: 0 8px;
+  }
+
+  .toolbar-btn {
+    width: 32px;
+    height: 32px;
+
+    i {
+      font-size: 12px;
+    }
+  }
+  
+  .marketing-footer {
+    padding: 40px 0 24px;
+  }
+  
+  .footer-container {
+    padding: 0 16px;
+  }
+  
+  .footer-content {
+    flex-direction: column;
+    gap: 32px;
+  }
+  
+  .footer-right {
+    flex-direction: column;
+    gap: 32px;
+    width: 100%;
+  }
+  
+  .footer-column {
+    min-width: auto;
+  }
+  
+  .footer-social {
+    gap: 12px;
+  }
+  
+  .social-icon {
+    width: 28px;
+    height: 28px;
+    
+    :deep(svg) {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .marketing-footer {
+    padding: 32px 0 20px;
+  }
+  
+  .footer-content {
+    gap: 24px;
+  }
+  
+  .footer-right {
+    gap: 24px;
+  }
+  
+  .footer-title {
+    font-size: 12px;
+    margin-bottom: 12px;
+  }
+  
+  .footer-links {
+    gap: 10px;
+  }
+  
+  .footer-links a {
+    font-size: 13px;
+  }
+  
+  .copyright-text {
+    font-size: 12px;
+  }
+  
+  .icp-text {
+    font-size: 11px;
+  }
+}
+
+/* 登录/注册弹窗样式 */
+:deep(.auth-modal) {
+  .n-card {
+    border-radius: 16px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  }
+
+  .n-card-header {
+    text-align: center;
+    padding: 24px 24px 16px;
+    border-bottom: none;
+  }
+
+  .n-card__content {
+    padding: 0 24px 24px;
+  }
+
+  .n-form-item {
+    margin-bottom: 6px !important;
+  }
+
+  .n-form-item:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  .n-form-item:not(.n-form-item--error) .n-form-item__feedback-wrapper {
+    min-height: 0 !important;
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  .n-form-item--error .n-form-item__feedback-wrapper {
+    margin-top: 4px !important;
+    min-height: auto !important;
+  }
+}
+
+.auth-footer {
+  text-align: center;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.auth-link {
+  color: #1fc76f;
+  text-decoration: none;
+  font-weight: 500;
+  margin-left: 4px;
+  transition: color 0.2s;
+  cursor: pointer;
+
+  &:hover {
+    color: #1fc76f;
+    text-decoration: underline;
+  }
+}
+
+:deep(.brand-button) {
+  background: #e6f8f0 !important;
+  border: 1px solid #1fc76f !important;
+  color: #0d684b !important;
+}
+
+:deep(.brand-button .n-button__border),
+:deep(.brand-button .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+:deep(.brand-button:hover) {
+  background: #dcfce7 !important;
+  border-color: #1fc76f !important;
+  color: #166534 !important;
+  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important;
+}
+
+:deep(.brand-button:hover .n-button__border),
+:deep(.brand-button:hover .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+:deep(.brand-button:active) {
+  background: #1fc76f !important;
+  border-color: #1fc76f !important;
+  color: white !important;
+  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important;
+}
+
+:deep(.brand-button:active .n-button__border),
+:deep(.brand-button:active .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+</style>
diff --git a/frontend/src/views/settings/MenuManager.vue b/frontend/src/views/settings/MenuManager.vue
deleted file mode 100644
index cfdfe51..0000000
--- a/frontend/src/views/settings/MenuManager.vue
+++ /dev/null
@@ -1,701 +0,0 @@
-<template>
-  <div class="page-menu-manager">
-    <div class="page-header">
-      <div class="header-left">
-        <h2>{{ t('Menu Management') }}</h2>
-        <p class="page-description">{{ t('Manage navigation menu items') }}</p>
-      </div>
-      <div class="header-right">
-        <button class="reset-btn" @click="handleResetDefault">
-          <i class="fa fa-undo"></i>
-          {{ t('Reset to Default') }}
-        </button>
-        <button class="create-btn" @click="openCreate">
-          <i class="fa fa-plus"></i>
-          {{ t('Add Menu') }}
-        </button>
-      </div>
-    </div>
-    
-    <div class="page-content">
-      <n-space vertical :size="16">
-
-        <n-data-table 
-          :columns="columns" 
-          :data="tableData" 
-          :bordered="false"
-          :row-key="(row: AppMenuItem) => row.id"
-          :row-props="(row: AppMenuItem, index: number) => getRowProps(row, index)"
-          @update:checked-row-keys="handleCheckedRowKeysChange"
-        />
-      </n-space>
-    </div>
-
-    <n-modal v-model:show="showModal" preset="dialog" :title="editing ? t('Edit Menu') : t('Add Menu')">
-      <n-form :model="form" :rules="rules" label-width="100" ref="formRef">
-        <n-form-item :label="t('Display Name')"><n-input v-model:value="form.label" /></n-form-item>
-        
-        <n-form-item :label="t('Menu Type')">
-          <n-select 
-            v-model:value="form.type" 
-            :options="typeOptions" 
-            :placeholder="t('Select Menu Type')"
-            @update:value="onTypeChange"
-          />
-        </n-form-item>
-
-        
-
-        <!-- 上级菜单选择（所有类型都可选，默认为空） -->
-        <n-form-item :label="t('Parent Menu')" path="parentId">
-          <n-select
-            v-model:value="(form as any).parentId"
-            :options="parentMenuOptions"
-            :placeholder="t('No parent (top-level)')"
-            clearable
-          />
-        </n-form-item>
-        
-        <!-- 页面类型 -->
-        <n-form-item v-if="form.type === 'pagetype'" :label="t('PageType Name')">
-          <n-input 
-            v-model:value="form.pagetype" 
-            :placeholder="t('Enter PageType name, e.g.: Knowledge Base')"
-            @input="onPageTypeChange"
-          />
-          <template #feedback>
-            <n-text depth="3" style="font-size: 12px;">
-              {{ t('Enter PageType name, system will auto-generate friendly URL') }}：{{ previewUrl }}
-            </n-text>
-          </template>
-        </n-form-item>
-        
-        <!-- 路由名 -->
-        <n-form-item v-if="form.type === 'route'" :label="t('Route Name')">
-          <n-input 
-            v-model:value="form.routeName" 
-            :placeholder="t('Enter route name, e.g.: Dashboard')"
-          />
-        </n-form-item>
-        
-        <!-- URL路径 -->
-        <n-form-item v-if="form.type === 'url'" :label="t('URL Path')">
-          <n-input 
-            v-model:value="form.url" 
-            :placeholder="t('Enter complete URL path')"
-          />
-          <template #feedback>
-            <n-text depth="3" style="font-size: 12px;">
-              {{ t('Internal path: /app/knowledge-base') }} <br>
-              {{ t('External link: starts with http:// or https://') }}
-            </n-text>
-          </template>
-        </n-form-item>
-        
-        <n-form-item :label="t('Icon')">
-          <IconPicker v-model="form.icon" />
-        </n-form-item>
-        <n-form-item :label="t('Order')"><n-input-number v-model:value="form.order" :min="0" /></n-form-item>
-        <n-form-item :label="t('Hidden')"><n-switch v-model:value="form.hidden" /></n-form-item>
-      </n-form>
-      <template #action>
-        <n-space>
-          <n-button @click="showModal = false">{{ t('Cancel') }}</n-button>
-          <n-button type="primary" @click="save">{{ t('Save') }}</n-button>
-        </n-space>
-      </template>
-    </n-modal>
-  </div>
-  
-</template>
-
-<script setup lang="ts">
-import { ref, h, computed } from 'vue'
-import { NButton, NSpace, NDataTable, NModal, NForm, NFormItem, NInput, NSelect, NInputNumber, NSwitch, NText, useDialog, type FormInst, type FormRules } from 'naive-ui'
-import { useMenuStore, type AppMenuItem } from '../../shared/stores/menu'
-import { useAuthStore } from '../../shared/stores/auth'
-import { pageTypeToSlug } from '../../shared/utils/slug'
-import IconPicker from '../../core/components/IconPicker.vue'
-import { t } from '../../shared/i18n'
-
-const menuStore = useMenuStore()
-const authStore = useAuthStore()
-// 将扁平 items 构造成树形（不修改原数据）
-function buildTree(items: AppMenuItem[]) {
-  const byId: Record<string, AppMenuItem & { children?: AppMenuItem[] }> = {}
-  items.forEach((i) => (byId[i.id] = { ...i, children: [] }))
-  const roots: (AppMenuItem & { children?: AppMenuItem[] })[] = []
-  items.forEach((i) => {
-    const pid = (i as any).parentId as string | null | undefined
-    if (pid && byId[pid]) {
-      byId[pid].children!.push(byId[i.id])
-    } else {
-      roots.push(byId[i.id])
-    }
-  })
-  
-  // 清理空 children，Naive UI 会根据 children 是否存在渲染树
-  const prune = (nodes: (AppMenuItem & { children?: AppMenuItem[] })[]) => {
-    nodes.forEach((n) => {
-      if (n.children && n.children.length) prune(n.children)
-      else delete n.children
-    })
-  }
-  prune(roots)
-  return roots
-}
-
-// 根据用户类型过滤菜单项
-const filteredItems = computed(() => {
-  const userType = authStore.user?.user_type
-  const isSystemUser = userType === 'System User'
-  
-  return menuStore.items.filter(m => {
-    // 过滤隐藏的菜单项
-    if (m.hidden) return false
-    
-    // 非 System User 的过滤逻辑
-    if (!isSystemUser) {
-      // 过滤掉 pagetype 类型
-      if (m.type === 'pagetype') {
-        return false
-      }
-      
-      // 只允许显示的根菜单：工具、开发
-      const allowedRootMenus = ['tools', 'dev-group']
-      if (!m.parentId && !allowedRootMenus.includes(m.id)) {
-        return false
-      }
-      
-      // 开发分组下只允许显示：工具市场（非 System User 不显示应用市场、节点市场、智能体市场）
-      if (m.parentId === 'dev-group') {
-        const allowedDevMenus = ['tool-marketplace']
-        if (!allowedDevMenus.includes(m.id)) {
-          return false
-        }
-      }
-    }
-    
-    return true
-  })
-})
-
-const displayItems = computed(() => (draggedItem.value ? previewItems.value : filteredItems.value))
-const tableData = computed(() => buildTree(displayItems.value))
-const dialog = useDialog()
-
-const columns = [
-  { title: t('Display Name'), key: 'label' },
-  { title: t('Type'), key: 'type', render: (row: AppMenuItem) => {
-    const typeMap = { 'pagetype': t('PageType'), 'route': t('Route'), 'url': t('URL'), 'group': t('Group') }
-    return typeMap[row.type] || row.type
-  }},
-  
-  { title: t('Parent Menu'), key: 'parentId', render: (row: AppMenuItem) => {
-    if (!(row as any).parentId) return t('None')
-    const p = menuStore.items.find(m => m.id === (row as any).parentId)
-    return p ? p.label : t('None')
-  }},
-  { title: t('PageType'), key: 'pagetype' },
-  { title: t('Route Name'), key: 'routeName' },
-  { title: t('URL Path'), key: 'url' },
-  { title: t('Icon'), key: 'icon' },
-  { title: t('Order'), key: 'order' },
-  { title: t('Hidden'), key: 'hidden', render: (row: AppMenuItem) => row.hidden ? t('Yes') : t('No') },
-  { title: t('Actions'), key: 'actions', render: (row: AppMenuItem) => h(NSpace, {}, {
-    default: () => [
-      h(NButton, { size: 'small', onClick: () => openEdit(row) }, { default: () => t('Edit') }),
-      h(NButton, { size: 'small', type: 'error', onClick: () => onRemove(row) }, { default: () => t('Delete') })
-    ]
-  }) }
-]
-
-const showModal = ref(false)
-const editing = ref<AppMenuItem | null>(null)
-const form = ref<AppMenuItem>({ 
-  id: '', 
-  key: '', 
-  label: '', 
-  icon: 'MenuOutlined', 
-  type: 'pagetype',  // 默认选择页面类型
-  pagetype: '',
-  routeName: '', 
-  url: '', 
-  order: 0, 
-  hidden: false 
-})
-
-const formRef = ref<FormInst | null>(null)
-
-const rules: FormRules = {
-  label: [{ required: true, message: t('Please enter display name') }],
-  type: [{ required: true, message: t('Please select menu type') }],
-}
-
-const typeOptions = computed(() => {
-  const userType = authStore.user?.user_type
-  const isSystemUser = userType === 'System User'
-  
-  const allOptions = [
-    { label: t('PageType'), value: 'pagetype' },
-    { label: t('Route'), value: 'route' },
-    { label: t('URL'), value: 'url' },
-    { label: t('Group'), value: 'group' }
-  ]
-  
-  // 非 System User 过滤掉 pagetype 选项
-  if (!isSystemUser) {
-    return allOptions.filter(opt => opt.value !== 'pagetype')
-  }
-  
-  return allOptions
-})
-
- 
-
-const parentMenuOptions = computed(() => {
-  // 使用过滤后的菜单项作为父菜单选项
-  const opts = filteredItems.value.map(m => ({ label: m.label, value: m.id }))
-  return [{ label: t('None'), value: null as any }].concat(opts)
-})
-
-// 预览URL
-const previewUrl = computed(() => {
-  if (form.value.type === 'pagetype' && form.value.pagetype) {
-    const slug = pageTypeToSlug(form.value.pagetype)
-    return `/app/${slug}`
-  }
-  return ''
-})
-
-function openCreate() {
-  editing.value = null
-  const userType = authStore.user?.user_type
-  const isSystemUser = userType === 'System User'
-  
-  form.value = { 
-    id: '', 
-    key: '', 
-    label: '', 
-    icon: '', 
-    type: isSystemUser ? 'pagetype' : 'route',  // 根据用户类型设置默认类型
-    pagetype: '',
-    routeName: '', 
-    url: '', 
-    order: 0, 
-    hidden: false,
-    parentId: null
-  }
-  showModal.value = true
-}
-
-function openEdit(row: AppMenuItem) {
-  editing.value = row
-  form.value = { ...row }
-  showModal.value = true
-}
-
-// 类型变化处理
-function onTypeChange() {
-  // 清空其他字段
-  form.value.pagetype = ''
-  form.value.routeName = ''
-  form.value.url = ''
-  
-}
-
-// PageType变化处理
-function onPageTypeChange() {
-  if (form.value.type === 'pagetype' && form.value.pagetype) {
-    const slug = pageTypeToSlug(form.value.pagetype)
-    form.value.url = `/app/${slug}`
-  }
-}
-
-function save() {
-  const data = { ...form.value }
-  
-  // 验证：非 System User 不允许保存 pagetype 类型
-  const userType = authStore.user?.user_type
-  const isSystemUser = userType === 'System User'
-  if (!isSystemUser && data.type === 'pagetype') {
-    dialog.error({
-      title: t('Permission Denied'),
-      content: t('Non-System User cannot create or edit pagetype menu items'),
-      positiveText: t('OK')
-    })
-    return
-  }
-  
-  // 根据类型设置key
-  if (data.type === 'pagetype' && data.pagetype) {
-    data.key = pageTypeToSlug(data.pagetype)
-    data.url = `/app/${data.key}`
-  } else if (data.type === 'route' && data.routeName) {
-    data.key = data.routeName
-  } else if (data.type === 'url' && data.url) {
-    data.key = data.url
-  } else if (data.type === 'group') {
-    data.key = data.key || `group_${Date.now()}`
-  }
-  
-  formRef.value?.validate((errors) => {
-    if (errors) return
-    if (editing.value) {
-      menuStore.updateMenu(editing.value.id, data)
-    } else {
-      data.id = ''
-      menuStore.addMenu(data)
-    }
-    showModal.value = false
-  })
-}
-
-function onRemove(row: AppMenuItem) {
-  dialog.warning({
-    title: t('Confirm Delete'),
-    content: `${t('Are you sure you want to delete menu')}"${row.label}"？`,
-    positiveText: t('Delete'),
-    negativeText: t('Cancel'),
-    onPositiveClick: () => menuStore.removeMenu(row.id)
-  })
-}
-
-function handleResetDefault() {
-  dialog.warning({
-    title: t('Reset to Default'),
-    content: t('Are you sure to reset menus to default? This will overwrite current settings.'),
-    positiveText: t('Confirm'),
-    negativeText: t('Cancel'),
-    onPositiveClick: () => menuStore.resetDefault()
-  })
-}
-
-// 拖拽排序 - 实时预览
-const draggedItem = ref<AppMenuItem | null>(null)
-const dropIndex = ref<number>(-1)
-const previewItems = ref<AppMenuItem[]>([])
-
-function getRowProps(row: AppMenuItem, _index: number) {
-  // 计算在扁平数组中的真实索引
-  const flatIndex = menuStore.items.findIndex(item => item.id === row.id)
-  
-  return {
-    draggable: true,
-    class: {
-      'draggable-row': true,
-      'drag-over': dropIndex.value === flatIndex,
-      'dragging': draggedItem.value?.id === row.id
-    },
-    onDragstart: (e: DragEvent) => {
-      draggedItem.value = row
-      previewItems.value = [...menuStore.items]
-      e.dataTransfer!.effectAllowed = 'move'
-    },
-    onDragover: (e: DragEvent) => {
-      e.preventDefault()
-      if (draggedItem.value && dropIndex.value !== flatIndex) {
-        dropIndex.value = flatIndex
-        updatePreview()
-      }
-    },
-    onDragleave: () => {
-      // 延迟清除，避免快速移动时闪烁
-      setTimeout(() => {
-        if (!draggedItem.value) {
-          dropIndex.value = -1
-          previewItems.value = [...menuStore.items]
-        }
-      }, 50)
-    },
-    onDrop: (e: DragEvent) => {
-      e.preventDefault()
-      if (draggedItem.value && dropIndex.value !== -1) {
-        applyReorder()
-      }
-      resetDragState()
-    },
-    onDragend: resetDragState
-  }
-}
-
-function updatePreview() {
-  if (!draggedItem.value || dropIndex.value === -1) return
-  
-  const items = [...menuStore.items]
-  const currentIndex = items.findIndex(i => i.id === draggedItem.value!.id)
-  
-  if (currentIndex === -1 || currentIndex === dropIndex.value) return
-  
-  // 移除并重新插入
-  items.splice(currentIndex, 1)
-  // 如果目标位置在当前位置之后，需要调整插入位置
-  const insertIndex = dropIndex.value > currentIndex ? dropIndex.value - 1 : dropIndex.value
-  items.splice(insertIndex, 0, draggedItem.value)
-  
-  previewItems.value = items
-}
-
-function applyReorder() {
-  if (!draggedItem.value || dropIndex.value === -1) return
-  
-  const items = [...previewItems.value]
-  
-  // 分层重新计算order值
-  const rootMenus = items.filter(item => !item.parentId)
-  const childMenus = items.filter(item => item.parentId)
-  
-  // 重新分配根菜单的order
-  rootMenus.forEach((item, index) => {
-    item.order = index + 1
-  })
-  
-  // 重新分配子菜单的order（按父菜单分组）
-  const groupedChildren = childMenus.reduce((acc, child) => {
-    const parentId = child.parentId!
-    if (!acc[parentId]) acc[parentId] = []
-    acc[parentId].push(child)
-    return acc
-  }, {} as Record<string, AppMenuItem[]>)
-  
-  Object.values(groupedChildren).forEach(children => {
-    children.forEach((child, index) => {
-      child.order = index + 1
-    })
-  })
-  
-  menuStore.items = items
-  menuStore.persist()
-}
-
-function resetDragState() {
-  draggedItem.value = null
-  dropIndex.value = -1
-  previewItems.value = [...menuStore.items]
-}
-
-function handleCheckedRowKeysChange(keys: (string | number)[]) {
-  // 处理选中行变化（如果需要的话）
-  console.log('Selected rows:', keys)
-}
-</script>
-
-<style scoped>
-.page-menu-manager {
-  width: 100%;
-  padding: 16px;
-}
-
-/* 页面头部样式 */
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.header-left h2 {
-  font-size: 24px;
-  font-weight: 700;
-  color: #1f2937;
-  margin: 0 0 4px 0;
-}
-
-.page-description {
-  font-size: 14px;
-  color: #6b7280;
-  margin: 0;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-/* 恢复默认按钮 */
-.reset-btn {
-  height: 36px;
-  padding: 0 16px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #6b7280;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.reset-btn:hover {
-  background: #f9fafb;
-  color: #374151;
-  border-color: #9ca3af;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.reset-btn:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-.reset-btn i {
-  font-size: 12px;
-}
-
-/* 新增菜单按钮 - 使用柔和的品牌色系，与pagetype列表页创建按钮一致 */
-.create-btn {
-  height: 36px; 
-  padding: 0 16px; 
-  border: 1px solid #1fc76f; 
-  border-radius: 8px; 
-  background: #e6f8f0;
-  color: #0d684b; 
-  cursor: pointer; 
-  display: flex; 
-  align-items: center; 
-  gap: 6px;
-  font-size: 14px; 
-  font-weight: 500; 
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative; 
-  overflow: hidden;
-}
-
-.create-btn:hover { 
-  background: #dcfce7; 
-  border-color: #1fc76f;
-  color: #166534; 
-  transform: translateY(-1px); 
-  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15); 
-}
-
-.create-btn:active { 
-  background: #1fc76f; 
-  border-color: #1fc76f;
-  color: white;
-  transform: translateY(0); 
-  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2); 
-}
-
-.create-btn:disabled { 
-  background: #f1f5f9; 
-  border-color: #e2e8f0;
-  color: #94a3b8; 
-  opacity: 0.6; 
-  cursor: not-allowed; 
-  transform: none; 
-  box-shadow: none; 
-}
-
-.create-btn:disabled:hover { 
-  background: #f1f5f9; 
-  border-color: #e2e8f0;
-  color: #94a3b8; 
-  transform: none; 
-  box-shadow: none; 
-}
-
-.create-btn i { 
-  font-size: 12px; 
-}
-
-/* 页面内容区域 */
-.page-content {
-  margin-top: 16px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .page-menu-manager {
-    padding: 12px;
-  }
-  
-  .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-  }
-  
-  .header-right {
-    width: 100%;
-    justify-content: flex-end;
-  }
-  
-  .header-left h2 {
-    font-size: 20px;
-  }
-}
-
-@media (max-width: 480px) {
-  .page-menu-manager {
-    padding: 8px;
-  }
-  
-  .header-right {
-    flex-direction: column;
-    width: 100%;
-    gap: 8px;
-  }
-  
-  .reset-btn,
-  .create-btn {
-    width: 100%;
-    justify-content: center;
-  }
-  
-  .header-left h2 {
-    font-size: 18px;
-  }
-}
-
-/* 拖拽行 - 实时预览设计 */
-:deep(.draggable-row) {
-  cursor: grab;
-  transition: opacity 0.2s ease;
-}
-
-:deep(.draggable-row:hover) {
-  background-color: #f8fafc;
-}
-
-:deep(.draggable-row:active) {
-  cursor: grabbing;
-}
-
-/* 拖拽中 - 实时预览效果 */
-:deep(.draggable-row.dragging) {
-  opacity: 0.7;
-  background-color: #f0f9ff;
-  border: 1px dashed #3b82f6;
-}
-
-/* 拖拽目标 - 清晰指示 */
-:deep(.draggable-row.drag-over) {
-  border-top: 2px solid #3b82f6;
-}
-
-/* 表格样式 */
-:deep(.n-data-table) {
-  border-radius: 8px;
-}
-
-/* 禁用文本选择 */
-:deep(.draggable-row *) {
-  user-select: none;
-}
-
-/* 拖拽时的平滑过渡 */
-:deep(.n-data-table-tbody tr) {
-  transition: all 0.2s ease;
-}
-</style>
-
-
-