Initial commit: Chrome extension project

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.history/.gitignore_20250814152111

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.history/.gitignore_20250814152726

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.history/assets/tailwind_20250812091430.css

@@ -0,0 +1 @@
+@import "tailwindcss";

.history/components/CustomMessage_20250814103039.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    color: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.background = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.background = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.background = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.background = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span>${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  setTimeout(() => {
+    if (messageContainer.parentNode) {
+      messageContainer.parentNode.removeChild(messageContainer);
+    }
+  }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814103046.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    color: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.background = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.background = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.background = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.background = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span>${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  setTimeout(() => {
+    if (messageContainer.parentNode) {
+      messageContainer.parentNode.removeChild(messageContainer);
+    }
+  }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814103818.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    color: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.background = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.background = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.background = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.background = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span>${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  // setTimeout(() => {
+  //   if (messageContainer.parentNode) {
+  //     messageContainer.parentNode.removeChild(messageContainer);
+  //   }
+  // }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814104143.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    background: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.color = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.color = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.color = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.color = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span>${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  // setTimeout(() => {
+  //   if (messageContainer.parentNode) {
+  //     messageContainer.parentNode.removeChild(messageContainer);
+  //   }
+  // }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814104211.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    background: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.color = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.color = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.color = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.color = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span>${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  // setTimeout(() => {
+  //   if (messageContainer.parentNode) {
+  //     messageContainer.parentNode.removeChild(messageContainer);
+  //   }
+  // }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814104327.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    background: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.color = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.color = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.color = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.color = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span style="color: 'white'">${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  // setTimeout(() => {
+  //   if (messageContainer.parentNode) {
+  //     messageContainer.parentNode.removeChild(messageContainer);
+  //   }
+  // }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814104348.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    background: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.color = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.color = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.color = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.color = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span style="color: '#2b2b2b'">${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  // setTimeout(() => {
+  //   if (messageContainer.parentNode) {
+  //     messageContainer.parentNode.removeChild(messageContainer);
+  //   }
+  // }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814104510.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    background: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.color = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.color = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.color = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.color = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span style="color: #181818;">${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  // setTimeout(() => {
+  //   if (messageContainer.parentNode) {
+  //     messageContainer.parentNode.removeChild(messageContainer);
+  //   }
+  // }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814104524.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 7px 10px;
+    border-radius: 4px;
+    background: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.color = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.color = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.color = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.color = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span style="color: #181818;">${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  // setTimeout(() => {
+  //   if (messageContainer.parentNode) {
+  //     messageContainer.parentNode.removeChild(messageContainer);
+  //   }
+  // }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814104635.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 7px 10px;
+    border-radius: 4px;
+    background: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.color = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.color = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.color = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.color = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span style="color: #181818;">${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  setTimeout(() => {
+    if (messageContainer.parentNode) {
+      messageContainer.parentNode.removeChild(messageContainer);
+    }
+  }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/CustomMessage_20250814104651.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 7px 10px;
+    border-radius: 4px;
+    background: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.color = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.color = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.color = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.color = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span style="color: #181818;">${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  setTimeout(() => {
+    if (messageContainer.parentNode) {
+      messageContainer.parentNode.removeChild(messageContainer);
+    }
+  }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/components/Message_20250814103040.tsx

@@ -0,0 +1,84 @@
+// 在 DesignPic.tsx 中添加自定义消息组件
+export const CustomMessage = {
+  success: (content: string) => {
+    showCustomMessage('success', content);
+  },
+  error: (content: string) => {
+    showCustomMessage('error', content);
+  },
+  warning: (content: string) => {
+    showCustomMessage('warning', content);
+  },
+  info: (content: string) => {
+    showCustomMessage('info', content);
+  }
+};
+
+// 自定义消息显示函数
+const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+  // 移除已存在的消息
+  const existingMessages = document.querySelectorAll('.custom-message');
+  existingMessages.forEach(msg => msg.remove());
+
+  const messageContainer = document.createElement('div');
+  messageContainer.className = 'custom-message';
+  messageContainer.style.cssText = `
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 20px;
+    border-radius: 4px;
+    color: white;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 200px;
+    text-align: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  `;
+  
+  let icon = '';
+  // 根据不同类型设置样式和图标
+  switch(type) {
+    case 'success':
+      messageContainer.style.background = '#52c41a';
+      icon = '✓';
+      break;
+    case 'error':
+      messageContainer.style.background = '#ff4d4f';
+      icon = '✗';
+      break;
+    case 'warning':
+      messageContainer.style.background = '#faad14';
+      icon = '⚠';
+      break;
+    default:
+      messageContainer.style.background = '#1890ff';
+      icon = 'ℹ';
+  }
+  
+  messageContainer.innerHTML = `
+    <span style="font-size: 16px;">${icon}</span>
+    <span>${message}</span>
+  `;
+  
+  document.body.appendChild(messageContainer);
+  
+  // 3秒后自动移除
+  setTimeout(() => {
+    if (messageContainer.parentNode) {
+      messageContainer.parentNode.removeChild(messageContainer);
+    }
+  }, 3000);
+};
+
+// 然后在你的代码中替换所有的 Message 调用
+// 原来的:
+// Message.success("图片上传结束")
+
+// 替换为:
+// CustomMessage.success("图片上传结束")

.history/entrypoints/content_20250803223944.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

.history/entrypoints/content_20250812162852.ts

@@ -0,0 +1,150 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      if (request.action === "getImages") {
+        // 获取页面上所有图片元素
+        const images = Array.from(document.querySelectorAll('img'))
+          .map(img => ({
+            src: img.src,
+            alt: img.alt,
+            width: img.width,
+            height: img.height
+          }))
+          .filter(img => img.src);
+        
+        sendResponse({ images });
+      }
+      
+      if (request.action === "getImageById") {
+        // 根据ID获取特定图片元素
+        const imageElement = document.getElementById(request.imageId);
+        
+        if (imageElement && imageElement.tagName.toLowerCase() === 'img') {
+          const image = {
+            src: (imageElement as HTMLImageElement).src,
+            alt: (imageElement as HTMLImageElement).alt,
+            width: (imageElement as HTMLImageElement).width,
+            height: (imageElement as HTMLImageElement).height
+          };
+          sendResponse({ image });
+        } else {
+          sendResponse({ image: null });
+        }
+      }
+      
+      if (request.action === "getTbodyData") {
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+      
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+        
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+          
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+              
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+        
+        sendResponse({ backgroundImages });
+      }
+    });
+  }
+});

.history/entrypoints/content_20250812163221.ts

@@ -0,0 +1,119 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {      
+      if (request.action === "getTbodyData") {
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+      
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+        
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+          
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+              
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+        
+        sendResponse({ backgroundImages });
+      }
+    });
+  }
+});

.history/entrypoints/content_20250812164221.ts

@@ -0,0 +1,120 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {      
+      if (request.action === "getTbodyData") {
+        console.log(document.querySelectorAll('table'),"dddddddds")
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+      
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+        
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+          
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+              
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+        
+        sendResponse({ backgroundImages });
+      }
+    });
+  }
+});

.history/entrypoints/content_20250812164305.ts

@@ -0,0 +1,121 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {  
+      console.log("rrrrrr")    
+      if (request.action === "getTbodyData") {
+        console.log(document.querySelectorAll('table'),"dddddddds")
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+      
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+        
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+          
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+              
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+        
+        sendResponse({ backgroundImages });
+      }
+    });
+  }
+});

.history/entrypoints/content_20250812164714.ts

@@ -0,0 +1,132 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main(ctx) {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    const handleMessage = (request: any, sender: any, sendResponse: any) => {
+      console.log("Received message:", request);
+      
+      if (request.action === "getTbodyData") {
+        console.log(document.querySelectorAll('table'), "tables found");
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+        return true; // 保持消息通道开放
+      }
+      
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+        
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+          
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+              
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+        
+        sendResponse({ backgroundImages });
+        return true; // 保持消息通道开放
+      }
+    };
+    
+    // 添加消息监听器
+    browser.runtime.onMessage.addListener(handleMessage);
+    
+    // 清理函数
+    ctx.onInvalidated(() => {
+      browser.runtime.onMessage.removeListener(handleMessage);
+    });
+  }
+});

.history/entrypoints/content_20250812164814.ts

@@ -0,0 +1,132 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+
+  main(ctx) {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+
+      return null;
+    };
+
+    // 监听来自popup的消息
+    const handleMessage = (request: any, sender: any, sendResponse: any) => {
+      console.log("Received message:", request);
+
+      if (request.action === "getTbodyData") {
+        console.log(document.querySelectorAll('table'), "tables found");
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+
+        sendResponse({ tables: nonEmptyTables });
+        return true; // 保持消息通道开放
+      }
+
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{ url: string, element: string, class: string, id: string }> = [];
+
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+
+        sendResponse({ backgroundImages });
+        return true; // 保持消息通道开放
+      }
+    };
+
+    // 添加消息监听器
+    browser.runtime.onMessage.addListener(handleMessage);
+
+    // 清理函数
+    ctx.onInvalidated(() => {
+      browser.runtime.onMessage.removeListener(handleMessage);
+    });
+  }
+});

.history/entrypoints/content_20250812165154.ts

@@ -0,0 +1,150 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      if (request.action === "getImages") {
+        // 获取页面上所有图片元素
+        const images = Array.from(document.querySelectorAll('img'))
+          .map(img => ({
+            src: img.src,
+            alt: img.alt,
+            width: img.width,
+            height: img.height
+          }))
+          .filter(img => img.src);
+        
+        sendResponse({ images });
+      }
+      
+      if (request.action === "getImageById") {
+        // 根据ID获取特定图片元素
+        const imageElement = document.getElementById(request.imageId);
+        
+        if (imageElement && imageElement.tagName.toLowerCase() === 'img') {
+          const image = {
+            src: (imageElement as HTMLImageElement).src,
+            alt: (imageElement as HTMLImageElement).alt,
+            width: (imageElement as HTMLImageElement).width,
+            height: (imageElement as HTMLImageElement).height
+          };
+          sendResponse({ image });
+        } else {
+          sendResponse({ image: null });
+        }
+      }
+      
+      if (request.action === "getTbodyData") {
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+      
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+        
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+          
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+              
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+        
+        sendResponse({ backgroundImages });
+      }
+    });
+  }
+});

.history/entrypoints/content_20250812165312.ts

@@ -0,0 +1,150 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      if (request.action === "getImages") {
+        // 获取页面上所有图片元素
+        const images = Array.from(document.querySelectorAll('img'))
+          .map(img => ({
+            src: img.src,
+            alt: img.alt,
+            width: img.width,
+            height: img.height
+          }))
+          .filter(img => img.src);
+        
+        sendResponse({ images });
+      }
+      
+      if (request.action === "getImageById") {
+        // 根据ID获取特定图片元素
+        const imageElement = document.getElementById(request.imageId);
+        
+        if (imageElement && imageElement.tagName.toLowerCase() === 'img') {
+          const image = {
+            src: (imageElement as HTMLImageElement).src,
+            alt: (imageElement as HTMLImageElement).alt,
+            width: (imageElement as HTMLImageElement).width,
+            height: (imageElement as HTMLImageElement).height
+          };
+          sendResponse({ image });
+        } else {
+          sendResponse({ image: null });
+        }
+      }
+      
+      if (request.action === "getTbodyData") {
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+      
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+        
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+          
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+              
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+        
+        sendResponse({ backgroundImages });
+      }
+    });
+  }
+});

.history/entrypoints/content_20250812170541.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

.history/entrypoints/content_20250812170753.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

.history/entrypoints/content_20250812170800.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

.history/entrypoints/content_20250812171131.ts

@@ -0,0 +1,85 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main(ctx) {
+    // 监听来自popup的消息
+    const handleMessage = (request: any, sender: any, sendResponse: any) => {
+      if (request.action === "getImages") {
+        try {
+          // 获取页面上所有图片元素
+          const imageElements = Array.from(document.querySelectorAll('img'));
+          
+          // 获取背景图片元素
+          const allElements = Array.from(document.querySelectorAll('*'));
+          const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+          
+          // 提取<img>标签的图片
+          const imgSources = imageElements
+            .map(img => {
+              let url = img.src;
+              // 处理相对路径
+              if (url && !url.startsWith('http') && !url.startsWith('data:')) {
+                try {
+                  url = new URL(url, window.location.origin).href;
+                } catch (e) {
+                  console.warn('Failed to resolve relative URL:', url);
+                }
+              }
+              return {
+                url,
+                element: 'img',
+                class: img.className || '',
+                id: img.id || '',
+                alt: img.alt || ''
+              };
+            })
+            .filter(img => img.url && (img.url.startsWith('http') || img.url.startsWith('data:')));
+          
+          // 提取背景图片
+          allElements.forEach(element => {
+            const computedStyle = window.getComputedStyle(element);
+            const backgroundImage = computedStyle.backgroundImage;
+            
+            // 检查是否有background-image
+            if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+              // 提取URL
+              const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+              if (urlMatch && urlMatch[1]) {
+                // 解码HTML实体
+                const textarea = document.createElement('textarea');
+                textarea.innerHTML = urlMatch[1];
+                const decodedUrl = textarea.value;
+                
+                backgroundImages.push({
+                  url: decodedUrl,
+                  element: element.tagName.toLowerCase(),
+                  class: element.className || '',
+                  id: element.id || ''
+                });
+              }
+            }
+          });
+          
+          // 合并所有图片
+          const allImages = [...imgSources, ...backgroundImages];
+          
+          sendResponse({ images: allImages });
+        } catch (error) {
+          console.error('Error extracting images:', error);
+          sendResponse({ images: [], error: error.message });
+        }
+        return true; // 保持消息通道开放
+      }
+    };
+    
+    // 添加消息监听器
+    browser.runtime.onMessage.addListener(handleMessage);
+    
+    // 清理函数
+    ctx.onInvalidated(() => {
+      browser.runtime.onMessage.removeListener(handleMessage);
+    });
+    
+    console.log('Content script loaded');
+  }
+});

.history/entrypoints/content_20250812172518.ts

@@ -0,0 +1,89 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  runAt: "document_idle", // 确保在页面加载完成后运行
+  
+  main(ctx) {
+    console.log('Content script loaded on:', window.location.href);
+    
+    // 监听来自popup的消息
+    const handleMessage = (request: any, sender: any, sendResponse: any) => {
+      console.log('Received message:', request);
+      
+      if (request.action === "getImages") {
+        try {
+          // 获取页面上所有图片元素
+          const imageElements = Array.from(document.querySelectorAll('img'));
+          
+          // 获取背景图片元素
+          const allElements = Array.from(document.querySelectorAll('*'));
+          const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+          
+          // 提取<img>标签的图片
+          const imgSources = imageElements
+            .map(img => {
+              let url = img.src;
+              // 处理相对路径
+              if (url && !url.startsWith('http') && !url.startsWith('data:')) {
+                try {
+                  url = new URL(url, window.location.origin).href;
+                } catch (e) {
+                  console.warn('Failed to resolve relative URL:', url);
+                }
+              }
+              return {
+                url,
+                element: 'img',
+                class: img.className || '',
+                id: img.id || '',
+                alt: img.alt || ''
+              };
+            })
+            .filter(img => img.url && (img.url.startsWith('http') || img.url.startsWith('data:')));
+          
+          // 提取背景图片
+          allElements.forEach(element => {
+            const computedStyle = window.getComputedStyle(element);
+            const backgroundImage = computedStyle.backgroundImage;
+            
+            // 检查是否有background-image
+            if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+              // 提取URL
+              const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+              if (urlMatch && urlMatch[1]) {
+                // 解码HTML实体
+                const textarea = document.createElement('textarea');
+                textarea.innerHTML = urlMatch[1];
+                const decodedUrl = textarea.value;
+                
+                backgroundImages.push({
+                  url: decodedUrl,
+                  element: element.tagName.toLowerCase(),
+                  class: element.className || '',
+                  id: element.id || ''
+                });
+              }
+            }
+          });
+          
+          // 合并所有图片
+          const allImages = [...imgSources, ...backgroundImages];
+          
+          console.log('Found images:', allImages);
+          sendResponse({ images: allImages });
+        } catch (error: any) {
+          console.error('Error extracting images:', error);
+          sendResponse({ images: [], error: error.message });
+        }
+        return true; // 保持消息通道开放
+      }
+    };
+    
+    // 添加消息监听器
+    browser.runtime.onMessage.addListener(handleMessage);
+    
+    // 清理函数
+    ctx.onInvalidated(() => {
+      browser.runtime.onMessage.removeListener(handleMessage);
+    });
+  }
+});

.history/entrypoints/content_20250812172948.ts

@@ -0,0 +1,95 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  runAt: "document_idle", // 确保在页面加载完成后运行
+  
+  main(ctx) {
+    console.log('Content script loaded on:', window.location.href);
+    
+    // 监听来自popup的消息
+    const handleMessage = (request: any, sender: any, sendResponse: any) => {
+      console.log('Received message:', request);
+      
+      // 处理测试消息
+      if (request.action === "test") {
+        sendResponse({ status: "success", message: "Content script is running" });
+        return true;
+      }
+      
+      if (request.action === "getImages") {
+        try {
+          // 获取页面上所有图片元素
+          const imageElements = Array.from(document.querySelectorAll('img'));
+          
+          // 获取背景图片元素
+          const allElements = Array.from(document.querySelectorAll('*'));
+          const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+          
+          // 提取<img>标签的图片
+          const imgSources = imageElements
+            .map(img => {
+              let url = img.src;
+              // 处理相对路径
+              if (url && !url.startsWith('http') && !url.startsWith('data:')) {
+                try {
+                  url = new URL(url, window.location.origin).href;
+                } catch (e) {
+                  console.warn('Failed to resolve relative URL:', url);
+                }
+              }
+              return {
+                url,
+                element: 'img',
+                class: img.className || '',
+                id: img.id || '',
+                alt: img.alt || ''
+              };
+            })
+            .filter(img => img.url && (img.url.startsWith('http') || img.url.startsWith('data:')));
+          
+          // 提取背景图片
+          allElements.forEach(element => {
+            const computedStyle = window.getComputedStyle(element);
+            const backgroundImage = computedStyle.backgroundImage;
+            
+            // 检查是否有background-image
+            if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+              // 提取URL
+              const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+              if (urlMatch && urlMatch[1]) {
+                // 解码HTML实体
+                const textarea = document.createElement('textarea');
+                textarea.innerHTML = urlMatch[1];
+                const decodedUrl = textarea.value;
+                
+                backgroundImages.push({
+                  url: decodedUrl,
+                  element: element.tagName.toLowerCase(),
+                  class: element.className || '',
+                  id: element.id || ''
+                });
+              }
+            }
+          });
+          
+          // 合并所有图片
+          const allImages = [...imgSources, ...backgroundImages];
+          
+          console.log('Found images:', allImages);
+          sendResponse({ images: allImages });
+        } catch (error: any) {
+          console.error('Error extracting images:', error);
+          sendResponse({ images: [], error: error.message });
+        }
+        return true; // 保持消息通道开放
+      }
+    };
+    
+    // 添加消息监听器
+    browser.runtime.onMessage.addListener(handleMessage);
+    
+    // 清理函数
+    ctx.onInvalidated(() => {
+      browser.runtime.onMessage.removeListener(handleMessage);
+    });
+  }
+});

.history/entrypoints/content_20250812173322.ts

@@ -0,0 +1,150 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      if (request.action === "getImages") {
+        // 获取页面上所有图片元素
+        const images = Array.from(document.querySelectorAll('img'))
+          .map(img => ({
+            src: img.src,
+            alt: img.alt,
+            width: img.width,
+            height: img.height
+          }))
+          .filter(img => img.src);
+        
+        sendResponse({ images });
+      }
+      
+      if (request.action === "getImageById") {
+        // 根据ID获取特定图片元素
+        const imageElement = document.getElementById(request.imageId);
+        
+        if (imageElement && imageElement.tagName.toLowerCase() === 'img') {
+          const image = {
+            src: (imageElement as HTMLImageElement).src,
+            alt: (imageElement as HTMLImageElement).alt,
+            width: (imageElement as HTMLImageElement).width,
+            height: (imageElement as HTMLImageElement).height
+          };
+          sendResponse({ image });
+        } else {
+          sendResponse({ image: null });
+        }
+      }
+      
+      if (request.action === "getTbodyData") {
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+      
+      if (request.action === "getBackgroundImages") {
+        // 获取所有带有background-image的元素
+        const allElements = Array.from(document.querySelectorAll('*'));
+        const backgroundImages: Array<{url: string, element: string, class: string, id: string}> = [];
+        
+        allElements.forEach(element => {
+          const computedStyle = window.getComputedStyle(element);
+          const backgroundImage = computedStyle.backgroundImage;
+          
+          // 检查是否有background-image
+          if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+            // 提取URL
+            const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+            if (urlMatch && urlMatch[1]) {
+              // 解码HTML实体
+              const textarea = document.createElement('textarea');
+              textarea.innerHTML = urlMatch[1];
+              const decodedUrl = textarea.value;
+              
+              backgroundImages.push({
+                url: decodedUrl,
+                element: element.tagName.toLowerCase(),
+                class: element.className || '',
+                id: element.id || ''
+              });
+            }
+          }
+        });
+        
+        sendResponse({ backgroundImages });
+      }
+    });
+  }
+});

.history/entrypoints/content_20250812173637.ts

@@ -0,0 +1,87 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      if (request.action === "getTbodyData") {
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+    });
+  }
+});

.history/entrypoints/content_20250812173708.ts

@@ -0,0 +1,87 @@
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  
+  main() {
+    // 辅助函数：提取背景图片URL
+    const extractBackgroundUrl = (element: Element): string | null => {
+      const computedStyle = window.getComputedStyle(element);
+      const backgroundImage = computedStyle.backgroundImage;
+      
+      if (backgroundImage && backgroundImage !== 'none' && backgroundImage.includes('url')) {
+        // 处理包含转义字符的URL
+        const urlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch && urlMatch[1]) {
+          // 解码HTML实体
+          let url = urlMatch[1];
+          const textarea = document.createElement('textarea');
+          textarea.innerHTML = url;
+          return textarea.value;
+        }
+      }
+      
+      return null;
+    };
+    
+    // 监听来自popup的消息
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      if (request.action === "getTbodyData") {
+        // 获取所有tbody中的数据，包括背景图片
+        const tables = Array.from(document.querySelectorAll('table')).map((table, tableIndex) => {
+          const tbodies = Array.from(table.querySelectorAll('tbody'));
+          
+          return tbodies.map(tbody => {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            
+            return rows.map((row, rowIndex) => {
+              const cells = Array.from(row.querySelectorAll('td, th'));
+              return cells.map((cell, cellIndex) => {
+                // 获取单元格文本内容
+                const textContent = cell.textContent?.trim() || '';
+                
+                // 查找单元格内所有带有背景图片的div元素
+                const divsWithBackground = Array.from(cell.querySelectorAll('div[style*="background-image"]'))
+                  .map((div, divIndex) => {
+                    const backgroundUrl = extractBackgroundUrl(div);
+                    if (backgroundUrl) {
+                      return {
+                        url: backgroundUrl,
+                        className: div.className || '',
+                        style: div.getAttribute('style') || ''
+                      };
+                    }
+                    return null;
+                  })
+                  .filter(item => item !== null);
+                
+                // 如果找到带背景图片的div，返回包含这些信息的对象
+                if (divsWithBackground.length > 0) {
+                  return {
+                    text: textContent,
+                    backgroundImages: divsWithBackground
+                  };
+                }
+                
+                // 检查单元格本身是否有背景图片
+                const cellBackgroundUrl = extractBackgroundUrl(cell);
+                if (cellBackgroundUrl) {
+                  return {
+                    text: textContent,
+                    cellBackgroundUrl: cellBackgroundUrl
+                  };
+                }
+                
+                // 否则返回文本内容
+                return textContent;
+              });
+            });
+          }).flat();
+        }).flat();
+        
+        // 过滤掉空表格
+        const nonEmptyTables = tables.filter(table => table.length > 0);
+        
+        sendResponse({ tables: nonEmptyTables });
+      }
+    });
+  }
+});

.history/entrypoints/popup/App_20250803223944.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #54bc4ae0);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

.history/entrypoints/popup/App_20250803223944.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import reactLogo from '@/assets/react.svg';
+import wxtLogo from '/wxt.svg';
+import './App.css';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://wxt.dev" target="_blank">
+          <img src={wxtLogo} className="logo" alt="WXT logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>WXT + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the WXT and React logos to learn more
+      </p>
+    </>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812091849.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import reactLogo from '@/assets/react.svg';
+import wxtLogo from '/wxt.svg';
+import './App.css';
+import '../../assets/tailwind.css'
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://wxt.dev" target="_blank">
+          <img src={wxtLogo} className="logo" alt="WXT logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1 className='text-3xl font-bold text-yellow-800'>WXT + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the WXT and React logos to learn more
+      </p>
+    </>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812092750.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import reactLogo from '@/assets/react.svg';
+import wxtLogo from '/wxt.svg';
+import './App.css';
+import '../../assets/tailwind.css'
+import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812092757.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import reactLogo from '@/assets/react.svg';
+import wxtLogo from '/wxt.svg';
+import './App.css';
+import '../../assets/tailwind.css'
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812092806.tsx

@@ -0,0 +1,87 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812094324.tsx

@@ -0,0 +1,88 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812100131.css

@@ -0,0 +1,43 @@
+#root {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 2rem;
+  /* text-align: center; */
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #54bc4ae0);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

.history/entrypoints/popup/App_20250812100309.css

@@ -0,0 +1,43 @@
+#root {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 1rem;
+  /* text-align: center; */
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #54bc4ae0);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

.history/entrypoints/popup/App_20250812112358.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812112456.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812134440.tsx

@@ -0,0 +1,86 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import '@alifd/next/dist/next.css'; // 将 Fusion Design 样式放在最前面
+import './App.css';
+import '../../assets/tailwind.css'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812134555.tsx

@@ -0,0 +1,86 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import '@alifd/next/dist/next.css'; // 将 Fusion Design 样式放在最前面
+import './App.css';
+import '../../assets/tailwind.css'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812135029.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812135312.tsx

@@ -0,0 +1,88 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812135344.tsx

@@ -0,0 +1,88 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812135439.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+// import '@alifd/next/dist/next.css';
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812144313.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812144340.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import '@alifd/next/dist/next.css';
+import './App.css';
+import '../../assets/tailwind.css'
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812144635.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+// import BtnTest from './src/Components/BtnTest.jsx'
+// import Home from './pages/Home'
+// import About from './pages/About'
+import Login from './pages/Login'
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <div>
+              <button className='text-red-300'>按钮</button>
+            </div>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812150749.css

@@ -0,0 +1,43 @@
+#root {
+  width: 300px;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 1rem;
+  /* text-align: center; */
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #54bc4ae0);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

.history/entrypoints/popup/App_20250812151632.tsx

@@ -0,0 +1,85 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      <Link to="/" className="text-blue-500 hover:underline">首页</Link>
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic/>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250812153551.css

@@ -0,0 +1,42 @@
+#root {
+  min-width: 300px;
+  margin: 0 auto;
+  padding: 1rem;
+  /* text-align: center; */
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #54bc4ae0);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

.history/entrypoints/popup/App_20250812153615.css

@@ -0,0 +1,44 @@
+#root {
+  width: 100%;
+  height: 100%;
+  min-width: 300px;
+  margin: 0 auto;
+  padding: 1rem;
+  /* text-align: center; */
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #54bc4ae0);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

.history/entrypoints/popup/App_20250812162149.tsx

@@ -0,0 +1,85 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <button 
+        onClick={handleLogout}
+        className="ml-auto text-red-500 hover:underline"
+      >
+        退出登录
+      </button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+      
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic/>
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250813114442.tsx

@@ -0,0 +1,87 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250813114701.tsx

@@ -0,0 +1,87 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 p-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250813114847.tsx

@@ -0,0 +1,87 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250813114933.tsx

@@ -0,0 +1,87 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav style={{ display: 'flex !important' }} className="flex gap-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250813115002.tsx

@@ -0,0 +1,87 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250813115033.css

@@ -0,0 +1,48 @@
+#root {
+  width: 100%;
+  height: 100%;
+  min-width: 300px;
+  margin: 0 auto;
+  padding: 1rem;
+  /* text-align: center; */
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #54bc4ae0);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+article, aside, footer, header, nav, section {
+    display: flex;
+}

.history/entrypoints/popup/App_20250813115037.tsx

@@ -0,0 +1,87 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250813115109.css

@@ -0,0 +1,48 @@
+#root {
+  width: 100%;
+  height: 100%;
+  min-width: 300px;
+  margin: 0 auto;
+  padding: 1rem;
+  /* text-align: center; */
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #54bc4ae0);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+article, aside, footer, header, nav, section {
+    display: flex !important;
+}

.history/entrypoints/popup/App_20250814095017.tsx

@@ -0,0 +1,88 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814095121.tsx

@@ -0,0 +1,88 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814102425.tsx

@@ -0,0 +1,89 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import '@alifd/next/dist/next-icon.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814102443.tsx

@@ -0,0 +1,88 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="flex gap-4 items-center justify-end">
+      {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+      {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+      <Button
+        type="normal" warning
+        onClick={handleLogout}
+      // className="ml-auto text-red-500 cursor-pointer"
+      >
+        退出登录
+      </Button>
+    </nav>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814114751.tsx

@@ -0,0 +1,91 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-end">
+      <div>userinfo</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814115231.tsx

@@ -0,0 +1,106 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-end">
+      <div>userinfo</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ name: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814115511.tsx

@@ -0,0 +1,106 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children, userinfo }: { children: React.ReactNode, userinfo: any }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout }: { onLogout: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-end">
+      <div>{userinfo ? <>111</>: <>22</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ name: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814115951.tsx

@@ -0,0 +1,109 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, , userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-end">
+      <div>{userinfo && userinfo.nickname ? <div>
+        等级: {userinfo.version_custom_name}
+        账户: {userinfo.nickname}
+      </div>:<>556</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814133355.tsx

@@ -0,0 +1,109 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-end">
+      <div>{userinfo && userinfo.nickname ? <div>
+        等级: {userinfo.version_custom_name}
+        账户: {userinfo.nickname}
+      </div>:<>556</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814133737.tsx

@@ -0,0 +1,110 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-end">
+      <div>{userinfo && userinfo.nickname ? <div>
+        等级: {userinfo.version_custom_name}
+        账户: {userinfo.nickname}
+      </div>:<>556</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        console.log(userinfoStr,"userinfoStr")
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814133902.tsx

@@ -0,0 +1,110 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div>{userinfo && userinfo.nickname ? <div>
+        等级: {userinfo.version_custom_name}
+        账户: {userinfo.nickname}
+      </div>:<>556</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        console.log(userinfoStr,"userinfoStr")
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814134036.tsx

@@ -0,0 +1,110 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div>{userinfo && userinfo.nickname ? <div>
+        <span className='mr-2'>等级: {userinfo.version_custom_name}</span>
+        <span>账户: {userinfo.nickname}</span>
+      </div>:<>未获取到用户信息</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        console.log(userinfoStr,"userinfoStr")
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814134122.tsx

@@ -0,0 +1,110 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div className='font-bold'>{userinfo && userinfo.nickname ? <div>
+        <span className='mr-4'>等级: {userinfo.version_custom_name}</span>
+        <span>账户: {userinfo.nickname}</span>
+      </div>:<>未获取到用户信息</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        // className="ml-auto text-red-500 cursor-pointer"
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        console.log(userinfoStr,"userinfoStr")
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814134451.tsx

@@ -0,0 +1,109 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div className='font-bold'>{userinfo && userinfo.nickname ? <div>
+        <span className='mr-4'>等级: {userinfo.version_custom_name}</span>
+        <span>账户: {userinfo.nickname}</span>
+      </div> : <>未获取到用户信息</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        {/* <Link to="/about" className="text-blue-500 hover:underline">关于</Link>
+      <Link to="/home" className="text-blue-500 hover:underline">主页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        console.log(userinfoStr, "userinfoStr")
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814134716.tsx

@@ -0,0 +1,108 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div className='font-bold'>{userinfo && userinfo.nickname ? <div>
+        <span className='mr-4'>等级: {userinfo.version_custom_name}</span>
+        <span>账户: {userinfo.nickname}</span>
+      </div> : <>未获取到用户信息</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        console.log(userinfoStr, "userinfoStr")
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('userinfo');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814143002.tsx

@@ -0,0 +1,110 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div className='font-bold'>{userinfo && userinfo.nickname ? <div>
+        <span className='mr-4'>等级: {userinfo.version_custom_name}</span>
+        <span>账户: {userinfo.nickname}</span>
+      </div> : <>未获取到用户信息</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    setTimeout(() => {
+      // 获取用户信息
+      if (loggedIn) {
+        if (localStorage.getItem('userinfo')) {
+          let userinfoStr = localStorage.getItem('userinfo');
+          console.log(userinfoStr, "userinfoStr")
+          try {
+            // 尝试解析用户信息
+            const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+            setUserinfo(parsedUserinfo);
+          } catch (e) {
+            // 如果解析失败，可能是字符串格式
+            setUserinfo({ nickname: userinfoStr });
+          }
+        }
+      }
+    }, 500)
+  }, []);
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('userinfo');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814143941.tsx

@@ -0,0 +1,112 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div className='font-bold'>{userinfo && userinfo.nickname ? <div>
+        <span className='mr-4'>等级: {userinfo.version_custom_name}</span>
+        <span>账户: {userinfo.nickname}</span>
+      </div> : <>未获取到用户信息</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    // 获取用户信息
+    if (loggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        console.log(userinfoStr, "userinfoStr")
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, []);
+
+    useEffect(() => {
+    console.log("ddddddd")
+  }, [isLoggedIn])
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('userinfo');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814144034.tsx

@@ -0,0 +1,111 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div className='font-bold'>{userinfo && userinfo.nickname ? <div>
+        <span className='mr-4'>等级: {userinfo.version_custom_name}</span>
+        <span>账户: {userinfo.nickname}</span>
+      </div> : <>未获取到用户信息</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  useEffect(() => {
+    // 获取用户信息
+    if (isLoggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        console.log(userinfoStr, "userinfoStr")
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, [isLoggedIn])
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('userinfo');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/App_20250814144118.tsx

@@ -0,0 +1,110 @@
+// entrypoints/popup/App.tsx
+import { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@alifd/next';
+import './App.css';
+import '../../assets/tailwind.css'
+import '@alifd/next/dist/next.css';
+import '@alifd/next/dist/next.min.css';
+import Login from './pages/Login'
+import DesignPic from './pages/DesignPic';
+
+// 创建一个保护路由组件
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const isLoggedIn = localStorage.getItem('isLoggedIn');
+  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+// 创建带登出功能的导航组件
+function Navigation({ onLogout, userinfo }: { onLogout: () => void, userinfo: any }) {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    onLogout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="flex gap-4 items-center justify-between">
+      <div className='font-bold'>{userinfo && userinfo.nickname ? <div>
+        <span className='mr-4'>等级: {userinfo.version_custom_name}</span>
+        <span>账户: {userinfo.nickname}</span>
+      </div> : <>未获取到用户信息</>}</div>
+      <nav className="flex gap-4 items-center">
+        {/* <Link to="/" className="text-blue-500 hover:underline">首页</Link> */}
+        <Button
+          type="normal" warning
+          onClick={handleLogout}
+        >
+          退出登录
+        </Button>
+      </nav>
+    </div>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userinfo, setUserinfo] = useState<any>(null);
+
+  // 检查登录状态
+  useEffect(() => {
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  useEffect(() => {
+    // 获取用户信息
+    if (isLoggedIn) {
+      if (localStorage.getItem('userinfo')) {
+        let userinfoStr = localStorage.getItem('userinfo');
+        try {
+          // 尝试解析用户信息
+          const parsedUserinfo = userinfoStr ? JSON.parse(userinfoStr) : null;
+          setUserinfo(parsedUserinfo);
+        } catch (e) {
+          // 如果解析失败，可能是字符串格式
+          setUserinfo({ nickname: userinfoStr });
+        }
+      }
+    }
+  }, [isLoggedIn])
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('userinfo');
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <Router>
+      {/* 只在登录后显示导航栏 */}
+      {isLoggedIn && <Navigation onLogout={handleLogout} userinfo={userinfo} />}
+
+      <Routes>
+        <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <DesignPic />
+          </ProtectedRoute>
+        } />
+        {/* <Route path="/about" element={
+          <ProtectedRoute>
+            <About />
+          </ProtectedRoute>
+        } />
+        <Route path="/home" element={
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
+        } /> */}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

.history/entrypoints/popup/index_20250803223944.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

.history/entrypoints/popup/index_20250812100215.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root" class="bg-gray-50"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

.history/entrypoints/popup/main_20250803223944.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

.history/entrypoints/popup/main_20250812115717.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  // <React.StrictMode>
+    <App />
+  // </React.StrictMode>,
+);

.history/entrypoints/popup/main_20250812115833.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

.history/entrypoints/popup/main_20250812135144.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

.history/entrypoints/popup/main_20250812142436.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  // <React.StrictMode>
+    <App />
+  // </React.StrictMode>,
+);

.history/entrypoints/popup/main_20250812142624.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

.history/entrypoints/popup/main_20250812150610.tsx

@@ -0,0 +1,14 @@
+// main.tsx 或 index.tsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}

.history/entrypoints/popup/main_20250814100936.tsx

@@ -0,0 +1,14 @@
+// main.tsx 或 index.tsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    // <React.StrictMode>
+      <App />
+    // </React.StrictMode>
+  );
+}

.history/entrypoints/popup/main_20250814101013.tsx

@@ -0,0 +1,14 @@
+// main.tsx 或 index.tsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}

.history/entrypoints/popup/pages/DesignPic_20250812142042.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function DesignPic() {
+  return (
+    <div>DesignPic</div>
+  )
+}