|
|
@@ -0,0 +1,1377 @@
|
|
|
+import Awesome from '../background/awesome.js'
|
|
|
+import MSG_TYPE from '../static/js/common.js';
|
|
|
+import Settings from './settings.js';
|
|
|
+import Statistics from '../background/statistics.js';
|
|
|
+import toolMap from '../background/tools.js';
|
|
|
+
|
|
|
+// 工具分类定义
|
|
|
+const TOOL_CATEGORIES = [
|
|
|
+ { key: 'dev', name: '开发工具类', tools: ['json-format', 'json-diff', 'code-beautify', 'code-compress', 'postman', 'websocket', 'regexp','page-timing'] },
|
|
|
+ { key: 'encode', name: '编解码转换类', tools: ['en-decode', 'trans-radix', 'timestamp', 'trans-color'] },
|
|
|
+ { key: 'image', name: '图像处理类', tools: ['qr-code', 'image-base64', 'svg-converter', 'chart-maker', 'poster-maker' ,'screenshot', 'color-picker'] },
|
|
|
+ { key: 'productivity', name: '效率工具类', tools: ['aiagent', 'sticky-notes', 'html2markdown', 'page-monkey'] },
|
|
|
+ { key: 'calculator', name: '计算工具类', tools: ['crontab', 'loan-rate', 'password'] },
|
|
|
+ { key: 'other', name: '其他工具', tools: [] }
|
|
|
+];
|
|
|
+
|
|
|
+// Vue实例
|
|
|
+new Vue({
|
|
|
+ el: '#marketContainer',
|
|
|
+ data: {
|
|
|
+ manifest: { version: '0.0.0' },
|
|
|
+ searchKey: '',
|
|
|
+ currentCategory: '',
|
|
|
+ sortType: 'default',
|
|
|
+ viewMode: 'list', // 默认网格视图
|
|
|
+ categories: TOOL_CATEGORIES,
|
|
|
+ favorites: new Set(),
|
|
|
+ recentUsed: [],
|
|
|
+ loading: true,
|
|
|
+ originalTools: {}, // 保存原始工具数据
|
|
|
+ currentView: 'all', // 当前视图类型（all/installed/favorites/recent）
|
|
|
+ activeTools: {}, // 当前显示的工具列表
|
|
|
+ installedCount: 0, // 已安装工具数量
|
|
|
+
|
|
|
+ // 版本相关
|
|
|
+ latestVersion: '', // 最新版本号
|
|
|
+ needUpdate: false, // 是否需要更新
|
|
|
+
|
|
|
+ // 设置相关
|
|
|
+ showSettingsModal: false,
|
|
|
+ defaultKey: 'Alt+Shift+J', // 默认快捷键
|
|
|
+ countDown: 0, // 夜间模式倒计时
|
|
|
+ selectedOpts: [], // 选中的选项
|
|
|
+ menuDownloadCrx: false, // 菜单-插件下载
|
|
|
+ menuFeHelperSeting: false, // 菜单-FeHelper设置
|
|
|
+ isFirefox: false, // 是否Firefox浏览器
|
|
|
+
|
|
|
+ // 打赏相关
|
|
|
+ showDonateModal: false,
|
|
|
+ donate: {
|
|
|
+ text: '感谢你对FeHelper的认可和支持！',
|
|
|
+ image: './donate.jpeg'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确认对话框
|
|
|
+ confirmDialog: {
|
|
|
+ show: false,
|
|
|
+ title: '操作确认',
|
|
|
+ message: '',
|
|
|
+ callback: null,
|
|
|
+ data: null
|
|
|
+ },
|
|
|
+
|
|
|
+ recentCount: 0,
|
|
|
+ showDashboard: false, // 是否显示DashBoard
|
|
|
+ dashboardData: null, // DashBoard数据
|
|
|
+ },
|
|
|
+
|
|
|
+ async created() {
|
|
|
+ await this.initData();
|
|
|
+ this.recentCount = (await Statistics.getRecentUsedTools(10)).length;
|
|
|
+ // 初始化后更新已安装工具数量
|
|
|
+ this.updateInstalledCount();
|
|
|
+ // 恢复用户的视图模式设置
|
|
|
+ this.loadViewMode();
|
|
|
+ // 加载设置项
|
|
|
+ this.loadSettings();
|
|
|
+ // 检查浏览器类型
|
|
|
+ this.checkBrowserType();
|
|
|
+ // 检查版本更新
|
|
|
+ this.checkVersionUpdate();
|
|
|
+
|
|
|
+ // 检查URL中是否有donate_from参数
|
|
|
+ this.checkDonateParam();
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ filteredTools() {
|
|
|
+ if (this.loading) {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取当前工具列表
|
|
|
+ let result = Object.values(this.activeTools).map(tool => ({
|
|
|
+ ...tool,
|
|
|
+ favorite: this.favorites.has(tool.key)
|
|
|
+ }));
|
|
|
+
|
|
|
+ // 搜索过滤
|
|
|
+ if (this.searchKey) {
|
|
|
+ const key = this.searchKey.toLowerCase();
|
|
|
+ result = result.filter(tool =>
|
|
|
+ tool.name.toLowerCase().includes(key) ||
|
|
|
+ tool.tips.toLowerCase().includes(key)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分类过滤，在所有视图下生效
|
|
|
+ if (this.currentCategory) {
|
|
|
+ const category = TOOL_CATEGORIES.find(c => c.key === this.currentCategory);
|
|
|
+ const categoryTools = category ? category.tools : [];
|
|
|
+ result = result.filter(tool => categoryTools.includes(tool.key));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 排序
|
|
|
+ switch (this.sortType) {
|
|
|
+ case 'newest':
|
|
|
+ result.sort((a, b) => (b.updateTime || 0) - (a.updateTime || 0));
|
|
|
+ break;
|
|
|
+ case 'hot':
|
|
|
+ result.sort((a, b) => (b.updateTime || 0) - (a.updateTime || 0));
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ const allTools = TOOL_CATEGORIES.reduce((acc, category) => {
|
|
|
+ acc.push(...category.tools);
|
|
|
+ return acc;
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ result.sort((a, b) => {
|
|
|
+ const indexA = allTools.indexOf(a.key);
|
|
|
+ const indexB = allTools.indexOf(b.key);
|
|
|
+
|
|
|
+ // 如果工具不在任何类别中，放到最后
|
|
|
+ if (indexA === -1 && indexB === -1) {
|
|
|
+ return a.key.localeCompare(b.key); // 字母顺序排序
|
|
|
+ }
|
|
|
+ if (indexA === -1) return 1;
|
|
|
+ if (indexB === -1) return -1;
|
|
|
+
|
|
|
+ return indexA - indexB;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ async initData() {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
+ // 获取manifest信息
|
|
|
+ const manifest = await chrome.runtime.getManifest();
|
|
|
+ this.manifest = manifest;
|
|
|
+
|
|
|
+ // 从 Awesome.getAllTools 获取工具列表
|
|
|
+ const tools = await Awesome.getAllTools();
|
|
|
+
|
|
|
+ // 获取收藏数据
|
|
|
+ const favorites = await this.getFavoritesData();
|
|
|
+ this.favorites = new Set(favorites);
|
|
|
+
|
|
|
+ // 获取最近使用数据
|
|
|
+ const recentUsed = await this.getRecentUsedData();
|
|
|
+ this.recentUsed = recentUsed;
|
|
|
+ this.recentCount = recentUsed.length;
|
|
|
+
|
|
|
+ // 获取已安装工具列表
|
|
|
+ const installedTools = await Awesome.getInstalledTools();
|
|
|
+
|
|
|
+ // 处理工具数据
|
|
|
+ const processedTools = {};
|
|
|
+ Object.entries(tools).forEach(([key, tool]) => {
|
|
|
+ // 检查工具是否已安装
|
|
|
+ const isInstalled = installedTools.hasOwnProperty(key);
|
|
|
+ // 检查是否有右键菜单
|
|
|
+ const hasMenu = tool.menu || false;
|
|
|
+
|
|
|
+ processedTools[key] = {
|
|
|
+ ...tool,
|
|
|
+ key, // 添加key到工具对象中
|
|
|
+ updateTime: Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000,
|
|
|
+ installed: isInstalled, // 使用实时安装状态
|
|
|
+ inContextMenu: hasMenu, // 使用实时菜单状态
|
|
|
+ systemInstalled: tool.systemInstalled || false, // 是否系统预装
|
|
|
+ favorite: this.favorites.has(key)
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ this.originalTools = processedTools;
|
|
|
+
|
|
|
+ // 初始化activeTools为所有工具
|
|
|
+ this.activeTools = { ...processedTools };
|
|
|
+
|
|
|
+ // 更新"其他工具"类别
|
|
|
+ this.updateOtherCategory(Object.keys(processedTools));
|
|
|
+
|
|
|
+ // 默认选中"全部分类"
|
|
|
+ this.currentCategory = '';
|
|
|
+ } catch (error) {
|
|
|
+ console.error('初始化数据失败:', error);
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新"其他工具"类别，将未分类的工具添加到此类别
|
|
|
+ updateOtherCategory(allToolKeys) {
|
|
|
+ // 获取所有已分类的工具
|
|
|
+ const categorizedTools = new Set();
|
|
|
+ TOOL_CATEGORIES.forEach(category => {
|
|
|
+ if (category.key !== 'other') {
|
|
|
+ category.tools.forEach(tool => categorizedTools.add(tool));
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 找出未分类的工具
|
|
|
+ const uncategorizedTools = allToolKeys.filter(key => !categorizedTools.has(key));
|
|
|
+
|
|
|
+ // 更新"其他工具"类别
|
|
|
+ const otherCategory = TOOL_CATEGORIES.find(category => category.key === 'other');
|
|
|
+ if (otherCategory) {
|
|
|
+ otherCategory.tools = uncategorizedTools;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 检查版本更新
|
|
|
+ async checkVersionUpdate() {
|
|
|
+ try {
|
|
|
+ // 获取已安装的版本号
|
|
|
+ const currentVersion = this.manifest.version;
|
|
|
+
|
|
|
+ // 尝试从本地存储获取最新版本信息，避免频繁请求
|
|
|
+ const cachedData = await new Promise(resolve => {
|
|
|
+ chrome.storage.local.get('fehelper_latest_version_data', data => {
|
|
|
+ resolve(data.fehelper_latest_version_data || null);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 检查是否需要重新获取版本信息：
|
|
|
+ // 1. 缓存不存在
|
|
|
+ // 2. 缓存已过期（超过24小时）
|
|
|
+ // 3. 缓存的当前版本与实际版本不同（说明插件已更新）
|
|
|
+ const now = Date.now();
|
|
|
+ const cacheExpired = !cachedData || !cachedData.timestamp || (now - cachedData.timestamp > 24 * 60 * 60 * 1000);
|
|
|
+ const versionChanged = cachedData && cachedData.currentVersion !== currentVersion;
|
|
|
+
|
|
|
+ if (cacheExpired || versionChanged) {
|
|
|
+ try {
|
|
|
+ console.log('开始获取最新版本信息...');
|
|
|
+ // 使用shields.io的JSON API获取最新版本号
|
|
|
+ const response = await fetch('https://img.shields.io/chrome-web-store/v/pkgccpejnmalmdinmhkkfafefagiiiad.json');
|
|
|
+ if (!response.ok) {
|
|
|
+ throw new Error(`HTTP错误：${response.status}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ const data = await response.json();
|
|
|
+ // 提取版本号 - shields.io返回的数据中包含版本信息
|
|
|
+ let latestVersion = '';
|
|
|
+ if (data && data.value) {
|
|
|
+ // 去掉版本号前的'v'字符（如果有）
|
|
|
+ latestVersion = data.value.replace(/^v/, '');
|
|
|
+ console.log('获取到最新版本号:', latestVersion);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 比较版本号
|
|
|
+ const needUpdate = this.compareVersions(currentVersion, latestVersion) < 0;
|
|
|
+ console.log('当前版本:', currentVersion, '最新版本:', latestVersion, '需要更新:', needUpdate);
|
|
|
+
|
|
|
+ // 保存到本地存储中
|
|
|
+ await chrome.storage.local.set({
|
|
|
+ 'fehelper_latest_version_data': {
|
|
|
+ timestamp: now,
|
|
|
+ currentVersion, // 保存当前检查时的版本号
|
|
|
+ latestVersion,
|
|
|
+ needUpdate
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.latestVersion = latestVersion;
|
|
|
+ this.needUpdate = needUpdate;
|
|
|
+ } catch (fetchError) {
|
|
|
+ console.error('获取最新版本信息失败:', fetchError);
|
|
|
+ // 获取失败时不显示更新按钮
|
|
|
+ this.needUpdate = false;
|
|
|
+
|
|
|
+ // 如果是版本变更导致的重新检查，但获取失败，则使用缓存数据
|
|
|
+ if (versionChanged && cachedData) {
|
|
|
+ this.latestVersion = cachedData.latestVersion || '';
|
|
|
+ // 比较新的currentVersion和缓存的latestVersion
|
|
|
+ this.needUpdate = this.compareVersions(currentVersion, cachedData.latestVersion) < 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 使用缓存数据
|
|
|
+ console.log('使用缓存的版本信息');
|
|
|
+ this.latestVersion = cachedData.latestVersion || '';
|
|
|
+ this.needUpdate = cachedData.needUpdate || false;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('检查版本更新失败:', error);
|
|
|
+ this.needUpdate = false; // 出错时不显示更新提示
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 比较版本号：如果v1 < v2返回-1，v1 = v2返回0，v1 > v2返回1
|
|
|
+ compareVersions(v1, v2) {
|
|
|
+ // 将版本号拆分为数字数组
|
|
|
+ const v1Parts = v1.split('.').map(Number);
|
|
|
+ const v2Parts = v2.split('.').map(Number);
|
|
|
+
|
|
|
+ // 计算两个版本号中较长的长度
|
|
|
+ const maxLength = Math.max(v1Parts.length, v2Parts.length);
|
|
|
+
|
|
|
+ // 比较每一部分
|
|
|
+ for (let i = 0; i < maxLength; i++) {
|
|
|
+ // 获取当前部分，如果不存在则视为0
|
|
|
+ const part1 = v1Parts[i] || 0;
|
|
|
+ const part2 = v2Parts[i] || 0;
|
|
|
+
|
|
|
+ // 比较当前部分
|
|
|
+ if (part1 < part2) return -1;
|
|
|
+ if (part1 > part2) return 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 所有部分都相等
|
|
|
+ return 0;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 打开Chrome商店页面
|
|
|
+ openStorePage() {
|
|
|
+ try {
|
|
|
+ console.log('开始请求检查更新...');
|
|
|
+
|
|
|
+ // 使用Chrome Extension API请求检查更新
|
|
|
+ // Manifest V3中requestUpdateCheck返回Promise，结果是一个对象而不是数组
|
|
|
+ chrome.runtime.requestUpdateCheck().then(result => {
|
|
|
+ // 正确获取status和details，它们是result对象的属性
|
|
|
+ console.log('更新检查结果:', result);
|
|
|
+ const status = result.status;
|
|
|
+ const details = result.details;
|
|
|
+
|
|
|
+ console.log('更新检查状态:', status, '详情:', details);
|
|
|
+ this.handleUpdateStatus(status, details);
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('更新检查失败:', error);
|
|
|
+ this.handleUpdateError(error);
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('请求更新出错:', error);
|
|
|
+ this.handleUpdateError(error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理更新状态
|
|
|
+ handleUpdateStatus(status, details) {
|
|
|
+ console.log(`处理更新状态: ${status}`, details);
|
|
|
+
|
|
|
+ if (status === 'update_available') {
|
|
|
+ console.log('发现更新:', details);
|
|
|
+
|
|
|
+ // 显示更新通知
|
|
|
+ this.showNotification({
|
|
|
+ title: 'FeHelper 更新',
|
|
|
+ message: '已发现新版本，正在更新...'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 重新加载扩展以应用更新
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log('重新加载扩展...');
|
|
|
+ chrome.runtime.reload();
|
|
|
+ }, 1000);
|
|
|
+ } else if (status === 'no_update') {
|
|
|
+ // 如果没有可用更新，但用户点击了更新按钮
|
|
|
+ this.showNotification({
|
|
|
+ title: 'FeHelper 更新',
|
|
|
+ message: '您的FeHelper已经是最新版本。'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 其他情况，如更新检查失败等
|
|
|
+ console.log('其他更新状态:', status);
|
|
|
+
|
|
|
+ // 备选方案：跳转到官方网站
|
|
|
+ chrome.tabs.create({
|
|
|
+ url: 'https://baidufe.com/fehelper'
|
|
|
+ });
|
|
|
+
|
|
|
+ this.showNotification({
|
|
|
+ title: 'FeHelper 更新',
|
|
|
+ message: '自动更新失败，请访问FeHelper官网手动获取最新版本。'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理更新错误
|
|
|
+ handleUpdateError(error) {
|
|
|
+ console.error('更新过程中出错:', error);
|
|
|
+
|
|
|
+ // 出错时跳转到官方网站
|
|
|
+ chrome.tabs.create({
|
|
|
+ url: 'https://baidufe.com/fehelper'
|
|
|
+ });
|
|
|
+
|
|
|
+ this.showNotification({
|
|
|
+ title: 'FeHelper 更新错误',
|
|
|
+ message: '更新过程中出现错误，请手动检查更新。'
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示通知的统一方法
|
|
|
+ showNotification(options) {
|
|
|
+ try {
|
|
|
+ console.log('准备显示通知:', options);
|
|
|
+
|
|
|
+ // 定义通知ID，方便后续关闭
|
|
|
+ const notificationId = 'fehelper-update-notification';
|
|
|
+ const simpleNotificationId = 'fehelper-simple-notification';
|
|
|
+
|
|
|
+ // 直接尝试创建通知，不检查权限
|
|
|
+ // Chrome扩展在manifest中已声明notifications权限，应该可以直接使用
|
|
|
+ const notificationOptions = {
|
|
|
+ type: 'basic',
|
|
|
+ iconUrl: chrome.runtime.getURL('static/img/fe-48.png'),
|
|
|
+ title: options.title || 'FeHelper',
|
|
|
+ message: options.message || '',
|
|
|
+ priority: 2,
|
|
|
+ requireInteraction: false, // 改为false，因为我们会手动关闭
|
|
|
+ silent: false // 播放音效
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log('通知选项:', notificationOptions);
|
|
|
+
|
|
|
+ // 首先尝试直接创建通知
|
|
|
+ chrome.notifications.create(notificationId, notificationOptions, (createdId) => {
|
|
|
+ const error = chrome.runtime.lastError;
|
|
|
+ if (error) {
|
|
|
+ console.error('创建通知出错:', error);
|
|
|
+
|
|
|
+ // 通知创建失败，尝试使用alert作为备选方案
|
|
|
+ alert(`${options.title}: ${options.message}`);
|
|
|
+
|
|
|
+ // 再尝试使用不同的选项创建通知
|
|
|
+ const simpleOptions = {
|
|
|
+ type: 'basic',
|
|
|
+ iconUrl: chrome.runtime.getURL('static/img/fe-48.png'),
|
|
|
+ title: options.title || 'FeHelper',
|
|
|
+ message: options.message || ''
|
|
|
+ };
|
|
|
+
|
|
|
+ // 使用简化选项再次尝试
|
|
|
+ chrome.notifications.create(simpleNotificationId, simpleOptions, (simpleId) => {
|
|
|
+ if (chrome.runtime.lastError) {
|
|
|
+ console.error('简化通知创建也失败:', chrome.runtime.lastError);
|
|
|
+ } else {
|
|
|
+ console.log('简化通知已创建，ID:', simpleId);
|
|
|
+
|
|
|
+ // 3秒后自动关闭简化通知
|
|
|
+ setTimeout(() => {
|
|
|
+ chrome.notifications.clear(simpleId, (wasCleared) => {
|
|
|
+ console.log('简化通知已关闭:', wasCleared);
|
|
|
+ });
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('通知已成功创建，ID:', createdId);
|
|
|
+
|
|
|
+ // 3秒后自动关闭通知
|
|
|
+ setTimeout(() => {
|
|
|
+ chrome.notifications.clear(createdId, (wasCleared) => {
|
|
|
+ console.log('通知已关闭:', wasCleared);
|
|
|
+ });
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 同时使用内置UI显示消息
|
|
|
+ this.showInPageNotification(options);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('显示通知时出错:', error);
|
|
|
+ // 降级为alert
|
|
|
+ alert(`${options.title}: ${options.message}`);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 在页面内显示通知消息
|
|
|
+ showInPageNotification(options) {
|
|
|
+ try {
|
|
|
+ // 创建一个通知元素
|
|
|
+ const notificationEl = document.createElement('div');
|
|
|
+ notificationEl.className = 'in-page-notification';
|
|
|
+ notificationEl.innerHTML = `
|
|
|
+ <div class="notification-content">
|
|
|
+ <div class="notification-title">${options.title || 'FeHelper'}</div>
|
|
|
+ <div class="notification-message">${options.message || ''}</div>
|
|
|
+ </div>
|
|
|
+ <button class="notification-close">×</button>
|
|
|
+ `;
|
|
|
+
|
|
|
+ // 添加样式
|
|
|
+ const style = document.createElement('style');
|
|
|
+ style.textContent = `
|
|
|
+ .in-page-notification {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+ background-color: #4285f4;
|
|
|
+ color: white;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-width: 300px;
|
|
|
+ animation: slideIn 0.3s ease-out;
|
|
|
+ }
|
|
|
+ .notification-content {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .notification-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .notification-message {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .notification-close {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ @keyframes slideIn {
|
|
|
+ from { transform: translateX(100%); opacity: 0; }
|
|
|
+ to { transform: translateX(0); opacity: 1; }
|
|
|
+ }
|
|
|
+ @keyframes slideOut {
|
|
|
+ from { transform: translateX(0); opacity: 1; }
|
|
|
+ to { transform: translateX(100%); opacity: 0; }
|
|
|
+ }
|
|
|
+ `;
|
|
|
+
|
|
|
+ // 添加到页面
|
|
|
+ document.head.appendChild(style);
|
|
|
+ document.body.appendChild(notificationEl);
|
|
|
+
|
|
|
+ // 点击关闭按钮移除通知
|
|
|
+ const closeBtn = notificationEl.querySelector('.notification-close');
|
|
|
+ if (closeBtn) {
|
|
|
+ closeBtn.addEventListener('click', () => {
|
|
|
+ notificationEl.style.animation = 'slideOut 0.3s ease-out forwards';
|
|
|
+ notificationEl.addEventListener('animationend', () => {
|
|
|
+ notificationEl.remove();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 3秒后自动移除（从5秒改为3秒）
|
|
|
+ setTimeout(() => {
|
|
|
+ notificationEl.style.animation = 'slideOut 0.3s ease-out forwards';
|
|
|
+ notificationEl.addEventListener('animationend', () => {
|
|
|
+ notificationEl.remove();
|
|
|
+ });
|
|
|
+ }, 3000);
|
|
|
+
|
|
|
+ console.log('页内通知已显示，将在3秒后自动关闭');
|
|
|
+ } catch (error) {
|
|
|
+ console.error('创建页内通知出错:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async getFavoritesData() {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ chrome.storage.local.get('favorites', (result) => {
|
|
|
+ resolve(result.favorites || []);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ async getRecentUsedData() {
|
|
|
+ // 直接从Statistics模块获取最近使用的工具
|
|
|
+ return await Statistics.getRecentUsedTools(10);
|
|
|
+ },
|
|
|
+
|
|
|
+ async saveFavorites() {
|
|
|
+ try {
|
|
|
+ await chrome.storage.local.set({
|
|
|
+ favorites: Array.from(this.favorites)
|
|
|
+ });
|
|
|
+ // 更新工具的收藏状态
|
|
|
+ Object.keys(this.originalTools).forEach(key => {
|
|
|
+ this.originalTools[key].favorite = this.favorites.has(key);
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('保存收藏失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSearch() {
|
|
|
+ // 搜索时不重置视图类型，允许在已过滤的结果中搜索
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCategoryChange(category) {
|
|
|
+ // 切换到全部工具视图
|
|
|
+ if (this.currentView !== 'all') {
|
|
|
+ this.currentView = 'all';
|
|
|
+ this.updateActiveTools('all');
|
|
|
+ }
|
|
|
+ this.currentCategory = category;
|
|
|
+ this.searchKey = '';
|
|
|
+ // 确保工具显示正确
|
|
|
+ this.activeTools = { ...this.originalTools };
|
|
|
+ this.showDashboard = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSort() {
|
|
|
+ // 排序逻辑已在computed中实现
|
|
|
+ },
|
|
|
+
|
|
|
+ getCategoryCount(categoryKey) {
|
|
|
+ const category = TOOL_CATEGORIES.find(c => c.key === categoryKey);
|
|
|
+ const categoryTools = category ? category.tools : [];
|
|
|
+ return categoryTools.length;
|
|
|
+ },
|
|
|
+
|
|
|
+ async getInstalledCount() {
|
|
|
+ try {
|
|
|
+ // 使用Awesome.getInstalledTools实时获取已安装工具数量
|
|
|
+ const installedTools = await Awesome.getInstalledTools();
|
|
|
+ return Object.keys(installedTools).length;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取已安装工具数量失败:', error);
|
|
|
+ // 回退到本地数据
|
|
|
+ return Object.values(this.originalTools).filter(tool =>
|
|
|
+ tool.installed || tool.systemInstalled || false
|
|
|
+ ).length;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getFavoritesCount() {
|
|
|
+ return this.favorites.size;
|
|
|
+ },
|
|
|
+
|
|
|
+ getToolCategory(toolKey) {
|
|
|
+ for (const category of TOOL_CATEGORIES) {
|
|
|
+ if (category.tools.includes(toolKey)) {
|
|
|
+ return category.key;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return 'other';
|
|
|
+ },
|
|
|
+
|
|
|
+ async showMyInstalled() {
|
|
|
+ this.currentView = 'installed';
|
|
|
+ this.currentCategory = '';
|
|
|
+ this.searchKey = '';
|
|
|
+ await this.updateActiveTools('installed');
|
|
|
+ // 更新已安装工具数量
|
|
|
+ await this.updateInstalledCount();
|
|
|
+ this.showDashboard = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ showMyFavorites() {
|
|
|
+ this.currentView = 'favorites';
|
|
|
+ this.currentCategory = '';
|
|
|
+ this.searchKey = '';
|
|
|
+ this.updateActiveTools('favorites');
|
|
|
+ this.showDashboard = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ async showRecentUsed() {
|
|
|
+ this.currentView = 'recent';
|
|
|
+ this.currentCategory = '';
|
|
|
+ this.searchKey = '';
|
|
|
+ // 拉取DashBoard数据并显示
|
|
|
+ this.dashboardData = await Statistics.getDashboardData();
|
|
|
+ this.showDashboard = true;
|
|
|
+ // 不再更新工具列表
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭DashBoard，恢复工具列表
|
|
|
+ closeDashboard() {
|
|
|
+ this.showDashboard = false;
|
|
|
+ this.currentView = 'all';
|
|
|
+ this.updateActiveTools('all');
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置工具列表到原始状态
|
|
|
+ resetTools() {
|
|
|
+ this.currentView = 'all';
|
|
|
+ },
|
|
|
+
|
|
|
+ // 安装工具
|
|
|
+ async installTool(toolKey) {
|
|
|
+ try {
|
|
|
+ // 查找可能存在的按钮元素
|
|
|
+ const btnElement = document.querySelector(`button[data-tool="${toolKey}"]`);
|
|
|
+ let elProgress = null;
|
|
|
+
|
|
|
+ // 如果是通过按钮点击调用的，获取进度条元素
|
|
|
+ if (btnElement) {
|
|
|
+ if (btnElement.getAttribute('data-undergoing') === '1') {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ btnElement.setAttribute('data-undergoing', '1');
|
|
|
+ elProgress = btnElement.querySelector('span.x-progress');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示安装进度
|
|
|
+ let pt = 1;
|
|
|
+ await Awesome.install(toolKey);
|
|
|
+
|
|
|
+ // 只有当进度条元素存在时才更新文本内容
|
|
|
+ if (elProgress) {
|
|
|
+ elProgress.textContent = `(${pt}%)`;
|
|
|
+ let ptInterval = setInterval(() => {
|
|
|
+ elProgress.textContent = `(${pt}%)`;
|
|
|
+ pt += Math.floor(Math.random() * 20);
|
|
|
+ if(pt > 100) {
|
|
|
+ clearInterval(ptInterval);
|
|
|
+ elProgress.textContent = ``;
|
|
|
+
|
|
|
+ // 在进度条完成后显示安装成功的通知
|
|
|
+ this.showInPageNotification({
|
|
|
+ message: `${this.originalTools[toolKey].name} 安装成功！`,
|
|
|
+ type: 'success',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ } else {
|
|
|
+ // 如果没有进度条元素，直接显示通知
|
|
|
+ this.showInPageNotification({
|
|
|
+ message: `${this.originalTools[toolKey].name} 安装成功！`,
|
|
|
+ type: 'success',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新原始数据和当前活动数据
|
|
|
+ this.originalTools[toolKey].installed = true;
|
|
|
+ if (this.activeTools[toolKey]) {
|
|
|
+ this.activeTools[toolKey].installed = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新已安装工具数量
|
|
|
+ this.updateInstalledCount();
|
|
|
+
|
|
|
+ // 如果按钮存在，更新其状态
|
|
|
+ if (btnElement) {
|
|
|
+ btnElement.setAttribute('data-undergoing', '0');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 发送消息通知后台更新
|
|
|
+ chrome.runtime.sendMessage({
|
|
|
+ type: MSG_TYPE.DYNAMIC_TOOL_INSTALL_OR_OFFLOAD,
|
|
|
+ toolName: toolKey,
|
|
|
+ action: 'install',
|
|
|
+ showTips: true
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('安装工具失败:', error);
|
|
|
+
|
|
|
+ // 显示安装失败的通知
|
|
|
+ this.showInPageNotification({
|
|
|
+ message: `安装失败：${error.message || '未知错误'}`,
|
|
|
+ type: 'error',
|
|
|
+ duration: 5000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 卸载工具
|
|
|
+ async uninstallTool(toolKey) {
|
|
|
+ try {
|
|
|
+ // 使用自定义确认对话框而非浏览器原生的confirm
|
|
|
+ this.showConfirm({
|
|
|
+ title: '卸载确认',
|
|
|
+ message: `确定要卸载"${this.originalTools[toolKey].name}"工具吗？`,
|
|
|
+ callback: async (key) => {
|
|
|
+ try {
|
|
|
+ await chrome.runtime.sendMessage({
|
|
|
+ type: MSG_TYPE.DYNAMIC_TOOL_INSTALL_OR_OFFLOAD,
|
|
|
+ toolName: key,
|
|
|
+ action: 'offload',
|
|
|
+ showTips: true
|
|
|
+ });
|
|
|
+
|
|
|
+ // 调用Awesome.offLoad卸载工具
|
|
|
+ await Awesome.offLoad(key);
|
|
|
+
|
|
|
+ // 更新原始数据和当前活动数据
|
|
|
+ this.originalTools[key].installed = false;
|
|
|
+ this.originalTools[key].inContextMenu = false;
|
|
|
+
|
|
|
+ if (this.activeTools[key]) {
|
|
|
+ this.activeTools[key].installed = false;
|
|
|
+ this.activeTools[key].inContextMenu = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新已安装工具数量
|
|
|
+ this.updateInstalledCount();
|
|
|
+
|
|
|
+ // 显示卸载成功的通知
|
|
|
+ this.showInPageNotification({
|
|
|
+ message: `${this.originalTools[key].name} 已成功卸载！`,
|
|
|
+ type: 'success',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('卸载工具失败:', error);
|
|
|
+
|
|
|
+ // 显示卸载失败的通知
|
|
|
+ this.showInPageNotification({
|
|
|
+ message: `卸载失败：${error.message || '未知错误'}`,
|
|
|
+ type: 'error',
|
|
|
+ duration: 5000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: toolKey
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('准备卸载过程中出错:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换右键菜单
|
|
|
+ async toggleContextMenu(toolKey) {
|
|
|
+ try {
|
|
|
+ const tool = this.originalTools[toolKey];
|
|
|
+ const newState = !tool.inContextMenu;
|
|
|
+
|
|
|
+ // 更新菜单状态
|
|
|
+ await Awesome.menuMgr(toolKey, newState ? 'install' : 'offload');
|
|
|
+
|
|
|
+ // 更新原始数据和当前活动数据
|
|
|
+ tool.inContextMenu = newState;
|
|
|
+ if (this.activeTools[toolKey]) {
|
|
|
+ this.activeTools[toolKey].inContextMenu = newState;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 发送消息通知后台更新右键菜单
|
|
|
+ chrome.runtime.sendMessage({
|
|
|
+ type: MSG_TYPE.DYNAMIC_TOOL_INSTALL_OR_OFFLOAD,
|
|
|
+ action: `menu-${newState ? 'install' : 'offload'}`,
|
|
|
+ showTips: false,
|
|
|
+ menuOnly: true
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('切换右键菜单失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换收藏状态
|
|
|
+ async toggleFavorite(toolKey) {
|
|
|
+ try {
|
|
|
+ if (this.favorites.has(toolKey)) {
|
|
|
+ this.favorites.delete(toolKey);
|
|
|
+ // 更新原始数据和当前活动数据
|
|
|
+ this.originalTools[toolKey].favorite = false;
|
|
|
+ if (this.activeTools[toolKey]) {
|
|
|
+ this.activeTools[toolKey].favorite = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.favorites.add(toolKey);
|
|
|
+ // 更新原始数据和当前活动数据
|
|
|
+ this.originalTools[toolKey].favorite = true;
|
|
|
+ if (this.activeTools[toolKey]) {
|
|
|
+ this.activeTools[toolKey].favorite = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ await this.saveFavorites();
|
|
|
+
|
|
|
+ // 如果是在收藏视图，需要更新视图
|
|
|
+ if (this.currentView === 'favorites') {
|
|
|
+ this.updateActiveTools('favorites');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('切换收藏状态失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async updateActiveTools(view) {
|
|
|
+ if (this.loading || Object.keys(this.originalTools).length === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ switch (view) {
|
|
|
+ case 'installed':
|
|
|
+ // 使用Awesome.getInstalledTools实时获取已安装工具
|
|
|
+ try {
|
|
|
+ const installedTools = await Awesome.getInstalledTools();
|
|
|
+ // 合并installedTools与originalTools的数据
|
|
|
+ this.activeTools = Object.fromEntries(
|
|
|
+ Object.entries(this.originalTools).filter(([key]) =>
|
|
|
+ installedTools.hasOwnProperty(key)
|
|
|
+ )
|
|
|
+ );
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取已安装工具失败:', error);
|
|
|
+ // 回退到本地数据
|
|
|
+ this.activeTools = Object.fromEntries(
|
|
|
+ Object.entries(this.originalTools).filter(([_, tool]) =>
|
|
|
+ tool.installed || tool.systemInstalled || false
|
|
|
+ )
|
|
|
+ );
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'favorites':
|
|
|
+ this.activeTools = Object.fromEntries(
|
|
|
+ Object.entries(this.originalTools).filter(([key]) => this.favorites.has(key))
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case 'recent':
|
|
|
+ // 切换recent时，recentUsed已在showRecentUsed中实时拉取
|
|
|
+ this.activeTools = Object.fromEntries(
|
|
|
+ Object.entries(this.originalTools).filter(([key]) => this.recentUsed.includes(key))
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case 'all':
|
|
|
+ default:
|
|
|
+ this.activeTools = { ...this.originalTools };
|
|
|
+ // 分类过滤在computed属性中处理
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 新增更新已安装工具数量的方法
|
|
|
+ async updateInstalledCount() {
|
|
|
+ this.installedCount = await this.getInstalledCount();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载用户保存的视图模式
|
|
|
+ async loadViewMode() {
|
|
|
+ try {
|
|
|
+ const result = await new Promise(resolve => {
|
|
|
+ chrome.storage.local.get('fehelper_view_mode', result => {
|
|
|
+ resolve(result.fehelper_view_mode);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ if (result) {
|
|
|
+ this.viewMode = result;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载视图模式失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存用户的视图模式选择
|
|
|
+ async saveViewMode(mode) {
|
|
|
+ try {
|
|
|
+ this.viewMode = mode;
|
|
|
+ await chrome.storage.local.set({
|
|
|
+ 'fehelper_view_mode': mode
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('保存视图模式失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载设置项
|
|
|
+ async loadSettings() {
|
|
|
+ try {
|
|
|
+ Settings.getOptions(async (opts) => {
|
|
|
+ let selectedOpts = [];
|
|
|
+ Object.keys(opts).forEach(key => {
|
|
|
+ if(String(opts[key]) === 'true') {
|
|
|
+ selectedOpts.push(key);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.selectedOpts = selectedOpts;
|
|
|
+
|
|
|
+ // 加载右键菜单设置
|
|
|
+ this.menuDownloadCrx = await Awesome.menuMgr('download-crx', 'get') === '1';
|
|
|
+ this.menuFeHelperSeting = await Awesome.menuMgr('fehelper-setting', 'get') !== '0';
|
|
|
+
|
|
|
+ // 获取快捷键
|
|
|
+ chrome.commands.getAll((commands) => {
|
|
|
+ for (let command of commands) {
|
|
|
+ if (command.name === '_execute_action') {
|
|
|
+ this.defaultKey = command.shortcut || 'Alt+Shift+J';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载设置项失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 检查浏览器类型
|
|
|
+ checkBrowserType() {
|
|
|
+ try {
|
|
|
+ this.isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('检查浏览器类型失败:', error);
|
|
|
+ this.isFirefox = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示设置模态框
|
|
|
+ showSettings() {
|
|
|
+ this.showSettingsModal = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭设置模态框
|
|
|
+ closeSettings() {
|
|
|
+ this.showSettingsModal = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示打赏模态框
|
|
|
+ openDonateModal() {
|
|
|
+ this.showDonateModal = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭打赏模态框
|
|
|
+ closeDonateModal() {
|
|
|
+ this.showDonateModal = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示确认对话框
|
|
|
+ showConfirm(options) {
|
|
|
+ this.confirmDialog = {
|
|
|
+ show: true,
|
|
|
+ title: options.title || '操作确认',
|
|
|
+ message: options.message || '确定要执行此操作吗？',
|
|
|
+ callback: options.callback || null,
|
|
|
+ data: options.data || null
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确认操作
|
|
|
+ confirmAction() {
|
|
|
+ if (this.confirmDialog.callback) {
|
|
|
+ this.confirmDialog.callback(this.confirmDialog.data);
|
|
|
+ }
|
|
|
+ this.confirmDialog.show = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 取消确认
|
|
|
+ cancelConfirm() {
|
|
|
+ this.confirmDialog.show = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存设置
|
|
|
+ async saveSettings() {
|
|
|
+ try {
|
|
|
+ // 构建设置对象
|
|
|
+ let opts = {};
|
|
|
+ ['OPT_ITEM_CONTEXTMENUS', 'FORBID_OPEN_IN_NEW_TAB', 'CONTENT_SCRIPT_ALLOW_ALL_FRAMES',
|
|
|
+ 'JSON_PAGE_FORMAT', 'AUTO_DARK_MODE', 'ALWAYS_DARK_MODE'].forEach(key => {
|
|
|
+ opts[key] = this.selectedOpts.includes(key).toString();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 保存设置 - 直接传递对象，settings.js已增加对对象类型的支持
|
|
|
+ Settings.setOptions(opts, async () => {
|
|
|
+ try {
|
|
|
+ // 处理右键菜单
|
|
|
+ const crxAction = this.menuDownloadCrx ? 'install' : 'offload';
|
|
|
+ const settingAction = this.menuFeHelperSeting ? 'install' : 'offload';
|
|
|
+
|
|
|
+ await Promise.all([
|
|
|
+ Awesome.menuMgr('download-crx', crxAction),
|
|
|
+ Awesome.menuMgr('fehelper-setting', settingAction)
|
|
|
+ ]);
|
|
|
+
|
|
|
+ // 通知后台更新右键菜单
|
|
|
+ chrome.runtime.sendMessage({
|
|
|
+ type: MSG_TYPE.DYNAMIC_TOOL_INSTALL_OR_OFFLOAD,
|
|
|
+ action: 'menu-change',
|
|
|
+ menuOnly: true
|
|
|
+ });
|
|
|
+
|
|
|
+ // 关闭弹窗
|
|
|
+ this.closeSettings();
|
|
|
+
|
|
|
+ // 显示提示
|
|
|
+ this.showNotification({
|
|
|
+ title: 'FeHelper 设置',
|
|
|
+ message: '设置已保存！'
|
|
|
+ });
|
|
|
+ } catch (innerError) {
|
|
|
+ console.error('保存菜单设置失败:', innerError);
|
|
|
+ this.showNotification({
|
|
|
+ title: 'FeHelper 设置错误',
|
|
|
+ message: '保存菜单设置失败: ' + innerError.message
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('保存设置失败:', error);
|
|
|
+ this.showNotification({
|
|
|
+ title: 'FeHelper 设置错误',
|
|
|
+ message: '保存设置失败: ' + error.message
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 设置快捷键
|
|
|
+ setShortcuts() {
|
|
|
+ chrome.tabs.create({
|
|
|
+ url: 'chrome://extensions/shortcuts'
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 体验夜间模式
|
|
|
+ turnLight(event) {
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ // 获取body元素
|
|
|
+ const body = document.body;
|
|
|
+
|
|
|
+ // 切换夜间模式
|
|
|
+ if (body.classList.contains('dark-mode')) {
|
|
|
+ body.classList.remove('dark-mode');
|
|
|
+ } else {
|
|
|
+ body.classList.add('dark-mode');
|
|
|
+
|
|
|
+ // 设置倒计时
|
|
|
+ this.countDown = 10;
|
|
|
+
|
|
|
+ // 启动倒计时
|
|
|
+ const timer = setInterval(() => {
|
|
|
+ this.countDown--;
|
|
|
+ if (this.countDown <= 0) {
|
|
|
+ clearInterval(timer);
|
|
|
+ body.classList.remove('dark-mode');
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 检查URL中的donate_from参数并显示打赏弹窗
|
|
|
+ checkDonateParam() {
|
|
|
+ try {
|
|
|
+ const urlParams = new URLSearchParams(window.location.search);
|
|
|
+ const donateFrom = urlParams.get('donate_from');
|
|
|
+
|
|
|
+ if (donateFrom) {
|
|
|
+ console.log('检测到打赏来源参数:', donateFrom);
|
|
|
+
|
|
|
+ // 记录打赏来源
|
|
|
+ chrome.storage.local.set({
|
|
|
+ 'fehelper_donate_from': donateFrom,
|
|
|
+ 'fehelper_donate_time': Date.now()
|
|
|
+ });
|
|
|
+
|
|
|
+ // 等待工具数据加载完成
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 在所有工具中查找匹配项
|
|
|
+ let matchedTool = null;
|
|
|
+
|
|
|
+ // 首先尝试直接匹配工具key
|
|
|
+ if (this.originalTools && this.originalTools[donateFrom]) {
|
|
|
+ matchedTool = this.originalTools[donateFrom];
|
|
|
+ } else if (this.originalTools) {
|
|
|
+ // 如果没有直接匹配，尝试在所有工具中查找部分匹配
|
|
|
+ for (const [key, tool] of Object.entries(this.originalTools)) {
|
|
|
+ if (key.includes(donateFrom) || donateFrom.includes(key) ||
|
|
|
+ (tool.name && tool.name.includes(donateFrom)) ||
|
|
|
+ (donateFrom && donateFrom.includes(tool.name))) {
|
|
|
+ matchedTool = tool;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新打赏文案
|
|
|
+ if (matchedTool) {
|
|
|
+ this.donate.text = `看起来【${matchedTool.name}】工具帮助到了你，感谢你的认可！`;
|
|
|
+ } else {
|
|
|
+ // 没有匹配到特定工具，使用通用文案
|
|
|
+ this.donate.text = `感谢你对FeHelper的认可和支持！`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示打赏弹窗
|
|
|
+ this.showDonateModal = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('处理打赏参数时出错:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 补充 getRecentCount，保证模板调用不报错，且数据源唯一
|
|
|
+ async getRecentCount() {
|
|
|
+ const recent = await Statistics.getRecentUsedTools(10);
|
|
|
+ return recent.length;
|
|
|
+ },
|
|
|
+
|
|
|
+ renderDashboard() {
|
|
|
+ const dashboardContainerId = 'fh-dashboard-panel';
|
|
|
+ let container = document.getElementById(dashboardContainerId);
|
|
|
+ // 只在showDashboard且currentView为recent时隐藏工具列表
|
|
|
+ const grid = document.querySelector('.tools-grid');
|
|
|
+ if (!this.showDashboard || this.currentView !== 'recent') {
|
|
|
+ if (container) container.style.display = 'none';
|
|
|
+ if (grid) grid.style.display = '';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (grid) grid.style.display = 'none';
|
|
|
+ if (!container) {
|
|
|
+ container = document.createElement('div');
|
|
|
+ container.id = dashboardContainerId;
|
|
|
+ container.style = 'padding:32px; background:#fff; border-radius:8px; margin:24px; box-shadow:0 2px 12px #eee; min-width:700px;';
|
|
|
+ const main = document.querySelector('.market-main') || document.querySelector('.market-content');
|
|
|
+ if (main) main.prepend(container);
|
|
|
+ else document.body.appendChild(container);
|
|
|
+ }
|
|
|
+ container.style.display = 'block';
|
|
|
+ const data = this.dashboardData || {};
|
|
|
+ // 工具ID转中文名和icon
|
|
|
+ const toolName = (key) => (this.originalTools && this.originalTools[key] && this.originalTools[key].name) ? this.originalTools[key].name : key;
|
|
|
+ const toolIcon = (key) => {
|
|
|
+ if (toolMap[key] && toolMap[key].menuConfig && toolMap[key].menuConfig[0] && toolMap[key].menuConfig[0].icon) {
|
|
|
+ return toolMap[key].menuConfig[0].icon;
|
|
|
+ }
|
|
|
+ return toolName(key).slice(0,1);
|
|
|
+ };
|
|
|
+ // 插入美观样式
|
|
|
+ if (!document.getElementById('fh-dashboard-style')) {
|
|
|
+ const style = document.createElement('style');
|
|
|
+ style.id = 'fh-dashboard-style';
|
|
|
+ style.innerHTML = `
|
|
|
+ .fh-dashboard-cards { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 24px;}
|
|
|
+ .fh-card { background: linear-gradient(135deg,#f7f9fa 60%,#e3eafc 100%); border-radius: 12px; box-shadow:0 2px 8px #f0f0f0; padding:18px 24px; min-width:120px; flex:1; text-align:center; font-size:15px;}
|
|
|
+ .fh-card.main { background: linear-gradient(135deg,#e3fcec 60%,#e3eafc 100%);}
|
|
|
+ .fh-card-num { font-size:32px; font-weight:bold; margin-bottom:4px;}
|
|
|
+ .fh-calendar { display:inline-block; margin-left:12px; }
|
|
|
+ .fh-cal-cell { display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; border-radius:3px; margin:1px; background:#eee; color:#888; font-size:12px;}
|
|
|
+ .fh-cal-cell.used { background:#4285f4; color:#fff; font-weight:bold;}
|
|
|
+ .fh-dashboard-section { background:#fff; border-radius:12px; box-shadow:0 1px 4px #f0f0f0; padding:18px 24px; margin-bottom:24px;}
|
|
|
+ .fh-dashboard-header { margin-bottom:24px; }
|
|
|
+ .fh-dashboard-header h2 { font-size:22px; margin:0; }
|
|
|
+ .fh-tool-bar { display:inline-block; width:18px; height:18px; border-radius:3px; background:#e3eafc; margin-right:6px; vertical-align:middle; }
|
|
|
+ .fh-tool-bar-inner { display:inline-block; height:100%; border-radius:3px; background:#4285f4; }
|
|
|
+ .fh-tool-list { margin:0; padding:0; list-style:none; }
|
|
|
+ .fh-tool-list li { margin-bottom:10px; }
|
|
|
+ .fh-tool-icon { display:inline-block; width:18px; height:18px; border-radius:3px; background:#e3eafc; margin-right:6px; vertical-align:middle; text-align:center; font-size:14px; }
|
|
|
+ .fh-dashboard-sub { color:#888; font-size:13px; margin-bottom:8px; }
|
|
|
+ `;
|
|
|
+ document.head.appendChild(style);
|
|
|
+ }
|
|
|
+ // 30天活跃日历
|
|
|
+ const today = new Date();
|
|
|
+ let calendar = '<div class="fh-calendar">';
|
|
|
+ for(let i=29;i>=0;i--){
|
|
|
+ const d = new Date(today.getTime()-i*86400000);
|
|
|
+ const ds = d.toISOString().slice(0,10);
|
|
|
+ const used = data.allDates && data.allDates.includes(ds);
|
|
|
+ calendar += `<span class="fh-cal-cell${used?' used':''}" title="${ds}">${d.getDate()}</span>`;
|
|
|
+ }
|
|
|
+ calendar += '</div>';
|
|
|
+ // 主卡片区块
|
|
|
+ let html = `
|
|
|
+ <div class="fh-dashboard-header">
|
|
|
+ <h2>FeHelper 使用统计仪表盘 <span style="font-size:16px;color:#bbb;">(近30天)</span></h2>
|
|
|
+ </div>
|
|
|
+ <div class="fh-dashboard-cards">
|
|
|
+ <div class="fh-card main"><div class="fh-card-num">${data.totalCount||0}</div><div>总使用次数</div></div>
|
|
|
+ <div class="fh-card main"><div class="fh-card-num">${data.activeDays||0}</div><div>活跃天数</div></div>
|
|
|
+ <div class="fh-card"><div>${data.firstDate||'-'}<br>~<br>${data.lastDate||'-'}</div><div>统计区间</div></div>
|
|
|
+ <div class="fh-card"><div class="fh-card-num">${data.maxStreak||0}</div><div>最长连续活跃天数</div></div>
|
|
|
+ <div class="fh-card"><div class="fh-card-num">${data.monthCount||0}</div><div>本月使用次数</div></div>
|
|
|
+ <div class="fh-card"><div class="fh-card-num">${data.weekCount||0}</div><div>本周使用次数</div></div>
|
|
|
+ <div class="fh-card"><div class="fh-card-num">${data.avgPerDay||0}</div><div>平均每日使用</div></div>
|
|
|
+ <div class="fh-card"><div>${data.maxDay.date||'-'}<br><b>${data.maxDay.count||0}</b></div><div>最活跃日</div></div>
|
|
|
+ <div class="fh-card"><div class="fh-card-num">${data.daysSinceLast||0}</div><div>最近未使用天数</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="fh-dashboard-section">
|
|
|
+ <div class="fh-dashboard-sub">近30天活跃日历：</div>${calendar}
|
|
|
+ </div>
|
|
|
+ <div class="fh-dashboard-section" style="display:flex;gap:32px;flex-wrap:wrap;">
|
|
|
+ <div style="flex:2;min-width:320px;">
|
|
|
+ <div class="fh-dashboard-sub"><b>最近10天活跃趋势：</b></div>
|
|
|
+ <div style="display:flex;align-items:end;height:80px;margin-top:8px;">
|
|
|
+ ${
|
|
|
+ (data.dailyTrend||[]).map(d=>{
|
|
|
+ const max = Math.max(...(data.dailyTrend||[]).map(x=>x.count),1);
|
|
|
+ return `<div title='${d.date}: ${d.count}' style='width:20px;height:${d.count/max*60}px;background:#4285f4;margin-right:4px;border-radius:2px;'></div>`;
|
|
|
+ }).join('')
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div style="font-size:12px;color:#888;margin-top:4px;">
|
|
|
+ ${(data.dailyTrend||[]).map(d=>`<span style='display:inline-block;width:20px;text-align:center;'>${d.date.slice(5)}</span>`).join('')}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="flex:3;min-width:320px;">
|
|
|
+ <div class="fh-dashboard-sub"><b>使用最多的工具：</b></div>
|
|
|
+ <ul class="fh-tool-list">
|
|
|
+ ${(data.mostUsed||[]).map(t=>{
|
|
|
+ const percent = data.totalCount ? Math.round(t.count/data.totalCount*100) : 0;
|
|
|
+ return `<li style='margin-bottom:12px;display:flex;align-items:center;'>
|
|
|
+ <span class='fh-tool-icon'>${toolIcon(t.name)}</span>
|
|
|
+ <span style='display:inline-block;width:100px;'>${toolName(t.name)}</span>
|
|
|
+ <span style='display:inline-block;width:60px;color:#888;'>(x${t.count})</span>
|
|
|
+ <span class='fh-tool-bar' style='width:80px;height:10px;margin:0 8px;'>
|
|
|
+ <span class='fh-tool-bar-inner' style='width:${percent*0.8}px;'></span>
|
|
|
+ </span>
|
|
|
+ <span style='color:#888;'>${percent}%</span>
|
|
|
+ </li>`;
|
|
|
+ }).join('')}
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fh-dashboard-section">
|
|
|
+ <div class="fh-dashboard-sub"><b>最近10次使用的工具：</b></div>
|
|
|
+ <ul style="margin:8px 0 0 0;padding:0;list-style:none;">
|
|
|
+ ${(data.recentDetail||[]).map(t=>`<li style='display:inline-block;margin-right:24px;'>${toolName(t.tool)} <span style='color:#888;'>(${t.date})</span></li>`).join('')}
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ container.innerHTML = html;
|
|
|
+ window.__vue__ = this;
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ // 监听currentView变化
|
|
|
+ currentView: {
|
|
|
+ immediate: true,
|
|
|
+ handler(newView) {
|
|
|
+ this.updateActiveTools(newView);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 监听currentCategory变化
|
|
|
+ currentCategory: {
|
|
|
+ handler(newCategory) {
|
|
|
+ // 保证在视图模式之外的分类切换也能正确显示
|
|
|
+ if (this.currentView === 'all') {
|
|
|
+ this.activeTools = { ...this.originalTools };
|
|
|
+ }
|
|
|
+ // 重置搜索条件
|
|
|
+ if (this.searchKey) {
|
|
|
+ this.searchKey = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showDashboard(val) {
|
|
|
+ this.renderDashboard();
|
|
|
+ },
|
|
|
+ dashboardData(val) {
|
|
|
+ this.renderDashboard();
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.renderDashboard();
|
|
|
+ });
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+// 添加滚动事件监听
|
|
|
+window.addEventListener('scroll', () => {
|
|
|
+ const header = document.querySelector('.market-header');
|
|
|
+ const sidebar = document.querySelector('.market-sidebar');
|
|
|
+
|
|
|
+ if (window.scrollY > 10) {
|
|
|
+ header.classList.add('scrolled');
|
|
|
+ sidebar && sidebar.classList.add('scrolled');
|
|
|
+ } else {
|
|
|
+ header.classList.remove('scrolled');
|
|
|
+ sidebar && sidebar.classList.remove('scrolled');
|
|
|
+ }
|
|
|
+});
|
zxlie
