feat: ✨ 增加 ehentai 在缩略图列表页里展开标签列表功能

hymbz · hymbz · commit 5c048dcab2da · 2025-07-02T22:58:15.000+08:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -70,6 +70,7 @@
     "site.add_feature.quick_tag_define",
     "site.add_feature.remember_current_site",
     "site.add_feature.tag_lint",
+    "site.add_feature.expand_tag_list",
     "description",
     "img_status.error",
     "img_status.loading",
diff --git a/README.md b/README.md
@@ -168,7 +168,7 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 - [百合会新站](https://www.yamibo.com)
 - [动漫之家](https://manhua.idmzj.com)
   - 解锁隐藏漫画
-- [ehentai](https://e-hentai.org)
+- [E-Hentai](https://e-hentai.org)
   - [关联 nhentai](#关联-nhentai)
   - [快捷收藏](#快捷收藏)
   - [标签染色](#标签染色)
@@ -240,14 +240,15 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 明明在板块顶部有个“新窗”的选项来选择帖子的默认打开位置，但即使勾上了新窗，通过点击帖子后面的页数打开的页面还是会在当前页打开。开启这个功能可以补上这个缺漏。
 
-## ehentai
+## E-Hentai
 
 ![ehentai例图](/docs/public/ehentai例图.png)
 
 除悬浮按钮外，也会在右侧边栏会增加一个「Load comic」按钮，功能和悬浮按钮一样。
 
-> ehentai 图片链接会在一段时间后过期失效，因此建议开启「始终加载所有图片」，确保在过期前加载好所有图片，避免在过期后需要重新获取新链接增加耗时。
-> 如果还需要下载和翻译的话，建议开启「[图像识别](#图像识别)」功能，避免在下载和翻译时出错。
+> E-Hentai 的图片链接会在一段时间后过期失效，因此建议开启「始终加载所有图片」设置，在过期前就加载好所有图片。
+>
+> 如果需要经常下载和翻译的话，建议再开启「[图像识别](#图像识别)」功能，在加载阶段直接下载好图片文件，避免之后因图片链接过期而出错。
 
 ### 加载指定页码
 
@@ -257,13 +258,13 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 ### 关联外站
 
-关联其他站点的漫画源，使用外站源来加载图片，避免消耗 ehentai 的配额，同时或许也能用更快的速度加载图片。
+关联其他站点的漫画源，使用外站源来加载图片，避免消耗配额，同时或许（？）也能用更快的速度加载图片。
 
 结果会以标签的形式显示在标签列表中，鼠标悬停在标签上可以看到外站漫画的具体标题，点击标签后会出现跳至外站或直接加载的选项，也可以直接右键标签点击「在新标签页中打开」来跳至外站。
 
 目前支持 nhentai 和 hitomi。
 
-> nhentai 的反爬风控会定期调整，有时候会严格到即使已经在 nhentai 登录了也会出错，只能嗯等阶段性调整过去
+> nhentai 的反爬风控会不定期调整，有时会严格到即使已经在 nhentai 登录了也不行，这时候只能嗯等阶段性调整过去
 
 ### 快捷收藏
 
@@ -273,7 +274,9 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 ![eh快捷收藏-列表页](/docs/public/eh快捷收藏-列表页.webp)
 
-> 使用 `鼠标中键` 点击或按住 `ctrl`、`shift`、`alt` 等任意修饰键再点击可以调出原本的收藏弹窗
+> 因为没有空间放输入框，加上感觉收藏备注功能很少会使用，所以不支持收藏备注。
+>
+> 如有需要，可以使用 `鼠标中键` 点击或按住 `ctrl`、`shift`、`alt` 等任意修饰键再点击可以调出原本的收藏弹窗
 
 ### 标签染色
 
@@ -285,20 +288,26 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 > 标签颜色数据将在 `功能开启时`、`进入 My Tags 时` 和 `在 My Tags 中修改后` 更新
 
-同时顺便对 My Tags 和列表页显示的标签按照颜色、命名空间、权重等信息进行排序。
+> 同时顺便对 My Tags 和列表页上显示的标签，按照颜色、命名空间、权重等信息进行排序。
 
 ### 悬浮标签列表
 
 因为「[E绅士标签翻译辅助工具-标签编辑](https://github.com/EhTagTranslation/UserScripts/tree/master/TagEditor)」无法和本脚本适配所以就自己实现了这个功能。让标签列表可以随意拖动和被快捷键唤出。默认关闭，需手动开启。
 
 ![eh悬浮标签列表](/docs/public/eh悬浮标签列表.webp)
 
-相较原脚本增加了快捷键 `q` 以便在阅读模式下唤出（可在设置中修改），并能同时显示「[EhSyringe](https://github.com/EhTagTranslation/EhSyringe)」的标签描述，透明度改用 `Shift + 鼠标滚轮` 调节。
+相较原脚本增加了快捷键 `q` 以便在阅读模式下唤出（可在设置中修改），并能同时显示「[EhSyringe](https://github.com/EhTagTranslation/EhSyringe)」的标签描述，使用 `Shift + 鼠标滚轮` 调节透明度。
 
-在悬浮状态下：打完标签后输入框会自动失焦以便能快速用快捷键关掉、输入框只要用鼠标划过就会自动聚焦省去鼠标点击。
+在悬浮状态下，打完标签后输入框会自动失焦以便能立刻用快捷键关闭窗口，并且输入框只要用鼠标划过就会自动聚焦省去鼠标点击。
 
 标签可以直接拖拽进输入框。判定范围很广，不一定要拖到输入框上，只要在面板里就行。
 
+### 展开标签列表
+
+默认缩略图列表下只会显示关注的标签。开启此功能后，点击标签区域即可展开详细的标签列表，也可以通过将鼠标移至目标上后按快捷键 `q` 来展开（和「[悬浮标签列表](#悬浮标签列表)」功能共用一个快捷键）。
+
+![eh展开标签列表](/docs/public/eh展开标签列表.webp)
+
 ### 标签检查
 
 检查并提示下列情况：
@@ -353,9 +362,7 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 ### 彻底屏蔽漫画
 
-nhentai 的屏蔽机制是在被屏蔽漫画封面加上一层半透明遮罩，所以对于那些屏蔽范围比较大的人来说，在首页或搜索结果里连续翻上几页都是满屏的被屏蔽漫画完全是家常便饭。开启此功能后，被屏蔽漫画将被彻底屏蔽，不会再出现在首页或搜索结果里了。
-
-> 开启此功能后可能出现一整页的漫画都被屏蔽的情况，建议搭配无限滚动
+nhentai 只给被屏蔽漫画加上了一层半透明遮罩而没有隐藏，被屏蔽漫画还是会占用着页面空间。开启此功能后，被屏蔽漫画将被彻底屏蔽。
 
 ### 无限滚动
 
diff --git a/docs/index.md b/docs/index.md
@@ -168,7 +168,7 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 - [百合会新站](https://www.yamibo.com)
 - [动漫之家](https://manhua.idmzj.com)
   - 解锁隐藏漫画
-- [ehentai](https://e-hentai.org)
+- [E-Hentai](https://e-hentai.org)
   - [关联 nhentai](#关联-nhentai)
   - [快捷收藏](#快捷收藏)
   - [标签染色](#标签染色)
@@ -240,14 +240,15 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 明明在板块顶部有个“新窗”的选项来选择帖子的默认打开位置，但即使勾上了新窗，通过点击帖子后面的页数打开的页面还是会在当前页打开。开启这个功能可以补上这个缺漏。
 
-## ehentai
+## E-Hentai
 
 ![ehentai例图](https://comic-read-docs.pages.dev/ehentai例图.png)
 
 除悬浮按钮外，也会在右侧边栏会增加一个「Load comic」按钮，功能和悬浮按钮一样。
 
-> ehentai 图片链接会在一段时间后过期失效，因此建议开启「始终加载所有图片」，确保在过期前加载好所有图片，避免在过期后需要重新获取新链接增加耗时。
-> 如果还需要下载和翻译的话，建议开启「[图像识别](#图像识别)」功能，避免在下载和翻译时出错。
+> E-Hentai 的图片链接会在一段时间后过期失效，因此建议开启「始终加载所有图片」设置，在过期前就加载好所有图片。
+>
+> 如果需要经常下载和翻译的话，建议再开启「[图像识别](#图像识别)」功能，在加载阶段直接下载好图片文件，避免之后因图片链接过期而出错。
 
 ### 加载指定页码
 
@@ -257,13 +258,13 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 ### 关联外站
 
-关联其他站点的漫画源，使用外站源来加载图片，避免消耗 ehentai 的配额，同时或许也能用更快的速度加载图片。
+关联其他站点的漫画源，使用外站源来加载图片，避免消耗配额，同时或许（？）也能用更快的速度加载图片。
 
 结果会以标签的形式显示在标签列表中，鼠标悬停在标签上可以看到外站漫画的具体标题，点击标签后会出现跳至外站或直接加载的选项，也可以直接右键标签点击「在新标签页中打开」来跳至外站。
 
 目前支持 nhentai 和 hitomi。
 
-> nhentai 的反爬风控会定期调整，有时候会严格到即使已经在 nhentai 登录了也会出错，只能嗯等阶段性调整过去
+> nhentai 的反爬风控会不定期调整，有时会严格到即使已经在 nhentai 登录了也不行，这时候只能嗯等阶段性调整过去
 
 ### 快捷收藏
 
@@ -273,7 +274,9 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 ![eh快捷收藏-列表页](https://comic-read-docs.pages.dev/eh快捷收藏-列表页.webp)
 
-> 使用 `鼠标中键` 点击或按住 `ctrl`、`shift`、`alt` 等任意修饰键再点击可以调出原本的收藏弹窗
+> 因为没有空间放输入框，加上感觉收藏备注功能很少会使用，所以不支持收藏备注。
+>
+> 如有需要，可以使用 `鼠标中键` 点击或按住 `ctrl`、`shift`、`alt` 等任意修饰键再点击可以调出原本的收藏弹窗
 
 ### 标签染色
 
@@ -285,20 +288,26 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 > 标签颜色数据将在 `功能开启时`、`进入 My Tags 时` 和 `在 My Tags 中修改后` 更新
 
-同时顺便对 My Tags 和列表页显示的标签按照颜色、命名空间、权重等信息进行排序。
+> 同时顺便对 My Tags 和列表页上显示的标签，按照颜色、命名空间、权重等信息进行排序。
 
 ### 悬浮标签列表
 
 因为「[E绅士标签翻译辅助工具-标签编辑](https://github.com/EhTagTranslation/UserScripts/tree/master/TagEditor)」无法和本脚本适配所以就自己实现了这个功能。让标签列表可以随意拖动和被快捷键唤出。默认关闭，需手动开启。
 
 ![eh悬浮标签列表](https://comic-read-docs.pages.dev/eh悬浮标签列表.webp)
 
-相较原脚本增加了快捷键 `q` 以便在阅读模式下唤出（可在设置中修改），并能同时显示「[EhSyringe](https://github.com/EhTagTranslation/EhSyringe)」的标签描述，透明度改用 `Shift + 鼠标滚轮` 调节。
+相较原脚本增加了快捷键 `q` 以便在阅读模式下唤出（可在设置中修改），并能同时显示「[EhSyringe](https://github.com/EhTagTranslation/EhSyringe)」的标签描述，使用 `Shift + 鼠标滚轮` 调节透明度。
 
-在悬浮状态下：打完标签后输入框会自动失焦以便能快速用快捷键关掉、输入框只要用鼠标划过就会自动聚焦省去鼠标点击。
+在悬浮状态下，打完标签后输入框会自动失焦以便能立刻用快捷键关闭窗口，并且输入框只要用鼠标划过就会自动聚焦省去鼠标点击。
 
 标签可以直接拖拽进输入框。判定范围很广，不一定要拖到输入框上，只要在面板里就行。
 
+### 展开标签列表
+
+默认缩略图列表下只会显示关注的标签。开启此功能后，点击标签区域即可展开详细的标签列表，也可以通过将鼠标移至目标上后按快捷键 `q` 来展开（和「[悬浮标签列表](#悬浮标签列表)」功能共用一个快捷键）。
+
+![eh展开标签列表](https://comic-read-docs.pages.dev/eh展开标签列表.webp)
+
 ### 标签检查
 
 检查并提示下列情况：
@@ -353,9 +362,7 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 
 ### 彻底屏蔽漫画
 
-nhentai 的屏蔽机制是在被屏蔽漫画封面加上一层半透明遮罩，所以对于那些屏蔽范围比较大的人来说，在首页或搜索结果里连续翻上几页都是满屏的被屏蔽漫画完全是家常便饭。开启此功能后，被屏蔽漫画将被彻底屏蔽，不会再出现在首页或搜索结果里了。
-
-> 开启此功能后可能出现一整页的漫画都被屏蔽的情况，建议搭配无限滚动
+nhentai 只给被屏蔽漫画加上了一层半透明遮罩而没有隐藏，被屏蔽漫画还是会占用着页面空间。开启此功能后，被屏蔽漫画将被彻底屏蔽。
 
 ### 无限滚动
 
diff --git a/docs/public/eh展开标签列表.webp b/docs/public/eh展开标签列表.webp
diff --git a/locales/en.json b/locales/en.json
@@ -208,6 +208,7 @@
       "colorize_tag": "Colorize tags",
       "cross_site_link": "Cross-site Link",
       "detect_ad": "Detect advertise page",
+      "expand_tag_list": "Expand tag list",
       "float_tag_list": "Floating tag list",
       "load_original_image": "Load original image",
       "lock_option": "Lock site option",
diff --git a/locales/hu.json b/locales/hu.json
@@ -208,6 +208,7 @@
       "colorize_tag": "标签染色",
       "cross_site_link": "Helyközi link",
       "detect_ad": "识别广告页",
+      "expand_tag_list": "Címke lista kibontása",
       "float_tag_list": "悬浮标签列表",
       "load_original_image": "加载原图",
       "lock_option": "锁定站点配置",
diff --git a/locales/ru.json b/locales/ru.json
@@ -208,6 +208,7 @@
       "colorize_tag": "Раскрасить теги",
       "cross_site_link": "Кросс-сайтовая ссылка",
       "detect_ad": "Detect advertise page",
+      "expand_tag_list": "Развернуть список тегов",
       "float_tag_list": "Плавающий список тегов",
       "load_original_image": "Загружать оригинальное изображение",
       "lock_option": "Блокировка опции сайта",
diff --git a/locales/ta.json b/locales/ta.json
@@ -208,6 +208,7 @@
       "colorize_tag": "குறிச்சொல் கறை",
       "cross_site_link": "குறுக்கு-தள இணைப்பு",
       "detect_ad": "விளம்பர பக்கத்தை அடையாளம் காணவும்",
+      "expand_tag_list": "டேக் பட்டியலை விரிக்கவும்",
       "float_tag_list": "இடைநீக்க சிட்டை பட்டியல்",
       "load_original_image": "ஏற்றுகிறது",
       "lock_option": "பூட்டு தள உள்ளமைவு",
diff --git a/locales/zh.json b/locales/zh.json
@@ -208,6 +208,7 @@
       "colorize_tag": "标签染色",
       "cross_site_link": "关联外站",
       "detect_ad": "识别广告页",
+      "expand_tag_list": "展开标签列表",
       "float_tag_list": "悬浮标签列表",
       "load_original_image": "加载原图",
       "lock_option": "锁定站点配置",
diff --git a/src/site/ehentai/colorizeTag.ts b/src/site/ehentai/colorizeTag.ts
@@ -3,19 +3,6 @@ import { debounce, getGmValue, hijackFn } from 'helper';
 import { updateMyTags, handleMyTagsChange, type Tag } from './myTags';
 import { type EhContext } from './helper';
 
-// 为每个标签单独生成 css。用于方便调试时排查和修改样式时使用
-// const buildTagColorCss = (
-//   tag: string,
-//   color: string,
-//   border: string,
-//   background: string,
-// ) => `
-//   #td_${tag} { background: ${background}; }
-//   #td_${tag}.gt { border-color: ${border}; }
-//   #td_${tag}:not(.gt) { border-color: ${color}; }
-//   #taglist a#ta_${tag} { color: ${color} !important; position: relative; }
-// `;
-
 const buildTagList = (tagList: Set<string>, prefix: string) =>
   `\n${[...tagList].map((tag) => `${prefix}${CSS.escape(tag)}`).join(',\n')}\n`;
 
@@ -49,13 +36,13 @@ export const updateTagColor = async (tagList: Tag[]) => {
     css += `{ border-color: ${color}; }\n\n`;
 
     css += `#taglist a:is(${buildTagList(tags, '#ta_')})`;
-    css += `{ color: ${color} !important; position: relative; }\n\n`;
+    css += `{ color: ${color}; position: relative; }\n\n`;
   }
 
   css += `
     /* 禁用 eh 的变色效果 */
-    #taglist a[id] { color: var(--tag) !important; position: relative; }
-    #taglist a[id]:hover { color: var(--tag-hover) !important; }
+    #taglist a[id] { color: var(--tag); position: relative; }
+    #taglist a[id]:hover { color: var(--tag-hover); }
 
     #taglist a[id]::after {
       content: "";
diff --git a/src/site/ehentai/expandTagList.tsx b/src/site/ehentai/expandTagList.tsx
@@ -0,0 +1,110 @@
+import { hotkeysMap, setDefaultHotkeys } from 'components/Manga';
+import { request } from 'main';
+import {
+  domParse,
+  getKeyboardCode,
+  linstenKeydown,
+  querySelector,
+  querySelectorAll,
+  useStyle,
+} from 'helper';
+import { createSignal } from 'solid-js';
+
+import type { EhContext } from './helper/context';
+import { colorizeTag } from './colorizeTag';
+
+/** 展开标签列表 */
+export const expandTagList = (context: EhContext) => {
+  if (context.type !== 't') return;
+
+  useStyle(`
+    #taglist {
+      height: auto;
+      max-height: 230px;
+      padding: 0 3px;
+
+      --scrollbar-slider: ${getComputedStyle(querySelector('.ido')!).backgroundColor};
+      scrollbar-color: var(--scrollbar-slider) transparent;
+      scrollbar-width: thin;
+      &::-webkit-scrollbar { width: 5px; height: 10px; }
+      &::-webkit-scrollbar-track { background: transparent; }
+      &::-webkit-scrollbar-thumb { background: var(--scrollbar-slider); }
+    }
+    .gl1t[data-tag-list-loading], .gl1t[data-tag-list-loading] * { cursor: progress; }
+    .gl1t[data-show-tag-list] .gl6t { display: none; }
+    .gl1t:not([data-show-tag-list]) #taglist { display: none; }
+
+    /* 长标签换行 */
+    #taglist [id^=td_] a[id^=ta_] {
+      text-wrap: balance;
+      word-break: keep-all;
+      overflow-wrap: anywhere;
+    }
+  `);
+
+  const tagListMap = new Map<HTMLElement, HTMLElement>();
+
+  const handleShow = async (item: HTMLElement) => {
+    if (item.style.cursor === 'progress') return;
+    if (!tagListMap.has(item)) {
+      let html: Document | undefined;
+      let taglist: HTMLElement | null = null;
+      try {
+        item.dataset.tagListLoading = '';
+        const res = await request(item.querySelector('a')!.href, {
+          noTip: true,
+          errorText: 'Fetch tag list error',
+          noCheckCode: true,
+        });
+        html = domParse(res.responseText);
+        taglist = html.querySelector<HTMLElement>('#taglist');
+        if (!taglist) throw new Error('Fetch tag list error');
+        for (const a of taglist.querySelectorAll<HTMLAnchorElement>('a'))
+          a.target = '_blank';
+      } catch {
+        taglist = document.createElement('div');
+        taglist.id = 'taglist';
+        taglist.textContent =
+          html?.querySelector<HTMLElement>('.d p')?.textContent ||
+          'Fetch tag list error';
+      }
+      item.querySelector('.gl3t')!.after(taglist);
+      tagListMap.set(item, taglist);
+      Reflect.deleteProperty(item.dataset, 'tagListLoading');
+    }
+    if (Reflect.has(item.dataset, 'showTagList'))
+      Reflect.deleteProperty(item.dataset, 'showTagList');
+    else item.dataset.showTagList = '';
+  };
+
+  for (const item of querySelectorAll('.gl1t')) {
+    item.addEventListener(
+      'click',
+      async (e) =>
+        (e.target as HTMLElement).matches(
+          ':not(a):is(.gl1t, .gl6t, .gl6t *, #taglist, #taglist *)',
+        ) && handleShow(item),
+    );
+  }
+
+  // 使用悬浮标签栏的快捷键
+  setDefaultHotkeys((hotkeys) => ({ ...hotkeys, float_tag_list: ['q'] }));
+
+  const [mouseXY, setMouseXY] = createSignal<[number, number]>([0, 0]);
+  document.addEventListener('pointermove', (e) =>
+    setMouseXY([e.clientX, e.clientY]),
+  );
+
+  linstenKeydown((e) => {
+    const code = getKeyboardCode(e);
+    if (hotkeysMap()[code] !== 'float_tag_list') return;
+    e.stopPropagation();
+    e.preventDefault();
+    const elements = document.elementsFromPoint(...mouseXY());
+    for (const item of elements)
+      if (item.matches('.gl1t')) return handleShow(item as HTMLElement);
+  }, true);
+
+  // 为标签染色
+  colorizeTag('gallery');
+};
diff --git a/src/site/ehentai/index.tsx b/src/site/ehentai/index.tsx
