Skip to content

Comments

fix & style: 修复侧边栏图标移除问题及重构搜索栏 UI#57

Open
liutf wants to merge 4 commits intotaoAIGC:mainfrom
liutf:master
Open

fix & style: 修复侧边栏图标移除问题及重构搜索栏 UI#57
liutf wants to merge 4 commits intotaoAIGC:mainfrom
liutf:master

Conversation

@liutf
Copy link

@liutf liutf commented Jan 12, 2026

PR 描述
本次提交主要解决了侧边栏导航图标同步问题,并对顶部搜索栏进行了全新的视觉升级。

  1. 🐛 Bug 修复
    修复侧边栏图标无法移除的问题:
    之前移除站点时依赖 textContent 比对,因图标 HTML 结构变化导致比对失效。
    修复方案:在动态创建导航项时添加 data-site-name 属性,删除逻辑改为通过该属性精准定位 DOM 元素,确保设置中取消勾选站点时,侧边栏图标能正确同步消失。
  2. 💄 UI/UX 改进 (顶部搜索栏)
    对顶部搜索区域进行了 Google 风格的卡片式重构:

整体容器:弃用旧版布局,改为统一的大圆角(24px)白色卡片容器,提升视觉聚焦度。
交互按钮优化:
启动PK按钮:设计为醒目的蓝色胶囊按钮,置于输入框内部右侧。
附件按钮:改为白色胶囊样式,增加“附件”文字标签,风格与主按钮呼应。
收藏按钮:改为圆形白色按钮(Icon-only),与附件按钮风格统一。
布局调整:优化了按钮组的排列顺序([收藏] -> [附件] -> [启动PK]),并精细调整了间距和阴影效果,使其在视觉上更加协调、现代。

@liutf
Copy link
Author

liutf commented Jan 12, 2026

5460f816d01fc9a40ab225e81c9fb702

@liutf
Copy link
Author

liutf commented Jan 13, 2026

本次提交主要聚焦于视觉升级与用户体验优化,重点改进了插件的品牌识别度和顶部搜索交互体验。

  1. 🎨 品牌与图标升级
    Logo 重制:替换了更高清、高对比度的 Logo 文件,增强视觉冲击力。
    格式修复:修复了 icon16/48/128.png 实际上是 JPEG 格式导致 Chrome 扩展管理页无法显示图标的问题,现已重新生成为标准的 PNG 格式。
    侧边栏优化:主页面侧边栏 Logo 默认透明度调整为 100%,取消淡入淡出效果,使其始终清晰可见。
    Favicon 支持:为
    iframe.html
    添加了 favicon,确保浏览器标签页显示正确图标。
  2. 💄 搜索栏 UI 重构
    布局与尺寸:
    搜索栏最大宽度(max-width)提升至 1200px,并改为自适应布局(width: calc(100% - 77px)),大幅提升宽屏利用率。
    优化了响应式支持,适配中小屏幕显示。
    交互按钮优化:
    紧凑排列:缩减了“启动PK”、“附件”、“收藏”三个按钮之间的间距,布局更紧凑高效。
    样式精简:“附件”和“收藏”按钮去除了背景色、边框和阴影,改为极简风格。
    防遮挡处理:精确计算了输入框右侧内边距(Padding-right),防止长文本与右侧工具按钮重叠。
    输入体验改进:
    为输入框添加了垂直滚动条(overflow-y: auto)。
    调整触发策略:只有当内容超过约 10 行(max-height: 280px)时才显示滚动条,避免单行输入时出现不必要的滚动提示。

PixPin_2026-01-14_00-12-39

@taoAIGC
Copy link
Owner

taoAIGC commented Jan 14, 2026

感谢提交!!我研究一下如何合并 哈哈

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants