feat: ✨ 将 ehentai 部分增强功能的开关，从网页悬浮按钮移至阅读模式的设置里

Author: hymbz

README.md

@@ -250,6 +250,8 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 >
 > 如果需要经常下载和翻译的话，建议再开启「[图像识别](#图像识别)」功能，在加载阶段直接下载好图片文件，避免之后因图片链接过期而出错。
 
+> 因为站点增强功能过多，为了避免屏幕放不下，部分功能的开关不显示在悬浮按钮上，而是放到了进入阅读模式后的设置面板里。
+
 ### 加载指定页码
 
 在按住 `Shift` 的情况下点击侧边栏的「Load comic」按钮将会弹出一个输入框，可以通过输入 `1, 3-5, 9-` 格式的页码范围来只加载对应页码的图片。

docs/index.md

@@ -250,6 +250,8 @@ Cotrans 也有自己的油猴脚本 —— 「[Cotrans 漫画/图片翻译器](h
 >
 > 如果需要经常下载和翻译的话，建议再开启「[图像识别](#图像识别)」功能，在加载阶段直接下载好图片文件，避免之后因图片链接过期而出错。
 
+> 因为站点增强功能过多，为了避免屏幕放不下，部分功能的开关不显示在悬浮按钮上，而是放到了进入阅读模式后的设置面板里。
+
 ### 加载指定页码
 
 在按住 `Shift` 的情况下点击侧边栏的「Load comic」按钮将会弹出一个输入框，可以通过输入 `1, 3-5, 9-` 格式的页码范围来只加载对应页码的图片。

src/components/Manga/components/Setting.module.css

@@ -32,9 +32,13 @@
     rgb(0 0 0 / 12%) 0 1px 5px 0;
 
   & hr {
-    margin: 0;
+    margin: 0.5em 0;
     color: white;
   }
+
+  & > hr {
+    margin: 0;
+  }
 }
 
 .SettingBlock {
@@ -87,6 +91,12 @@
   background-color: var(--page-bg);
 }
 
+.SettingBlockBody .SettingBlockSubtitle {
+  position: unset;
+  height: 1em;
+  line-height: 1em;
+}
+
 .SettingsItem {
   display: flex;
   align-items: center;

src/components/Manga/components/SettingHotkeys.tsx

@@ -89,7 +89,7 @@ const KeyItem: Component<{
   );
 };
 
-const ShowHotkeys: Component<{ keys: string[] }> = (props) => (
+export const SettingHotkeys: Component<{ keys: string[] }> = (props) => (
   <For each={props.keys}>
     {(name) => (
       <div class={classes.hotkeys}>
@@ -150,7 +150,7 @@ const OtherHotkeys: Component<{ keys: string[] }> = (props) => {
   );
 };
 
-export const SettingHotkeys: Component = () => {
+export const SettingHotkeysBlock: Component = () => {
   const hotkeys = createRootMemo(() => {
     const show: string[] = [];
     const other: string[] = [];
@@ -161,7 +161,7 @@ export const SettingHotkeys: Component = () => {
 
   return (
     <>
-      <ShowHotkeys keys={hotkeys().show} />
+      <SettingHotkeys keys={hotkeys().show} />
       <Show when={hotkeys().other.length}>
         <OtherHotkeys keys={hotkeys().other} />
       </Show>

src/components/Manga/components/SettingPanel.tsx

@@ -1,4 +1,9 @@
-import { type Component, For, createSignal } from 'solid-js';
+import {
+  type Component,
+  type ParentComponent,
+  For,
+  createSignal,
+} from 'solid-js';
 import { lang, createEffectOn } from 'helper';
 
 import { defaultSettingList } from '../defaultSettingList';
@@ -7,6 +12,16 @@ import { stopPropagation } from '../helper';
 import { bindRef } from '../actions';
 import classes from '../index.module.css';
 
+export const SettingBlockSubtitle: ParentComponent<{
+  onClick?: () => void;
+}> = (props) => (
+  <div
+    class={classes.SettingBlockSubtitle}
+    on:click={props.onClick}
+    children={props.children}
+  />
+);
+
 /** 菜单面板 */
 export const SettingPanel: Component = () => (
   <div
@@ -31,13 +46,10 @@ export const SettingPanel: Component = () => (
           <>
             {i() ? <hr /> : null}
             <div class={classes.SettingBlock} data-show={show()}>
-              <div
-                class={classes.SettingBlockSubtitle}
-                on:click={() => setShwo((prev) => !prev)}
-              >
+              <SettingBlockSubtitle onClick={() => setShwo((prev) => !prev)}>
                 {name}
-                {show() ? null : ' …'}
-              </div>
+                {show() ? null : '…'}
+              </SettingBlockSubtitle>
               <div class={classes.SettingBlockBody}>
                 <SettingItem />
               </div>

src/components/Manga/defaultSettingList.tsx

@@ -5,7 +5,7 @@ import { lang, setLang, t, clamp, throttle, needDarkMode } from 'helper';
 
 import { SettingsItem } from './components/SettingsItem';
 import { SettingsItemSwitch } from './components/SettingsItemSwitch';
-import { SettingHotkeys } from './components/SettingHotkeys';
+import { SettingHotkeysBlock } from './components/SettingHotkeys';
 import { SettingTranslation } from './components/SettingTranslation';
 import { SettingsShowItem } from './components/SettingsShowItem';
 import { SettingsItemSelect } from './components/SettingsItemSelect';
@@ -388,7 +388,7 @@ export const defaultSettingList: () => SettingList = () => [
     SettingTranslation,
     () => store.option.translation.server !== 'disable',
   ],
-  [t('other.hotkeys'), SettingHotkeys],
+  [t('other.hotkeys'), SettingHotkeysBlock],
   [
     t('other.other'),
     () => (

src/components/Manga/index.tsx

@@ -95,6 +95,11 @@ export const Manga: Component<MangaProps> = (props) => {
   );
 };
 
-export { store, setState, _setState, refs } from './store/index';
-export { downloadImg } from './helper';
 export * from './actions';
+export { downloadImg } from './helper';
+export { store, setState, _setState, refs } from './store/index';
+export { SettingsItem } from './components/SettingsItem';
+export { SettingsItemSwitch } from './components/SettingsItemSwitch';
+export { SettingsItemNumber } from './components/SettingsItemNumber';
+export { SettingHotkeys } from './components/SettingHotkeys';
+export { SettingBlockSubtitle } from './components/SettingPanel';

src/site/ehentai/index.tsx

@@ -1,7 +1,13 @@
-import { createSignal } from 'solid-js';
+import { createSignal, type Component, For, Show } from 'solid-js';
 import { render } from 'solid-js/web';
-import { request, toast, type LoadImgFn } from 'main';
-import { type MangaProps, imgList as MangaImgList } from 'components/Manga';
+import { request, toast, useSpeedDial, type LoadImgFn } from 'main';
+import {
+  type MangaProps,
+  imgList as MangaImgList,
+  SettingsItemSwitch,
+  SettingHotkeys,
+  SettingBlockSubtitle,
+} from 'components/Manga';
 import {
   t,
   querySelector,
@@ -74,8 +80,56 @@ import { expandTagList } from './expandTagList';
     setImgList,
     setFab,
     setManga,
+    setOptions,
   } = context;
 
+  const SiteSettings: Component = () => (
+    <>
+      <For
+        each={[
+          'float_tag_list', // 悬浮标签列表
+          'expand_tag_list', // 展开标签列表
+          'tag_lint', // 标签检查
+          'colorize_tag', // 标签染色
+          '',
+          'quick_favorite', // 快捷收藏
+          'quick_rating', // 快捷评分
+          'quick_tag_define', // 快捷查看标签定义
+          '',
+          'cross_site_link', // 关联外站
+          'detect_ad', // 识别广告页
+          'auto_adjust_option', // 自动调整配置
+        ]}
+      >
+        {(name) => (
+          <Show when={name} fallback={<hr />}>
+            <SettingsItemSwitch
+              name={t(`site.add_feature.${name}`)}
+              value={options[name]}
+              onChange={(v) => setOptions({ [name]: v })}
+            />
+          </Show>
+        )}
+      </For>
+      <hr />
+      <SettingBlockSubtitle>{t('other.hotkeys')}</SettingBlockSubtitle>
+      <SettingHotkeys keys={['float_tag_list']} />
+    </>
+  );
+  setManga({
+    editSettingList: (list) => [...list, ['E-Hentai', SiteSettings]],
+  });
+  setFab({
+    speedDial: [
+      ...useSpeedDial(options, setOptions, context.placement, [
+        'tag_lint',
+        'colorize_tag',
+        'cross_site_link',
+        'detect_ad',
+      ]),
+    ],
+  });
+
   if (context.type === 'mpv') {
     return setComicLoad(() => {
       const imgEleList = querySelectorAll('.mimg[id]');

src/userscript/main/useInit.tsx

@@ -242,6 +242,7 @@ export const useInit = async <T extends Record<string, any>>(
     fabProps,
     needAutoShow,
     isStored,
+    placement,
 
     comicMap,
     setComicMap,

src/userscript/main/useSpeedDial.tsx

@@ -17,6 +17,7 @@ export const useSpeedDial = <
   options: SaveOptions,
   setOptions: (newOptions: Partial<SaveOptions>) => Promise<void>,
   placement: () => 'left' | 'right',
+  showOtherList?: string[],
 ) => {
   const DefaultButton: Component<{
     optionName: keyof SaveOptions & string;
@@ -44,36 +45,43 @@ export const useSpeedDial = <
     />
   );
 
-  const list = Object.keys(options)
-    .map((optionName) => {
-      switch (optionName) {
-        case 'hiddenFAB':
-        case 'option':
-          return null;
+  const list: Component[] = [];
 
-        case 'autoShow':
-          return () => (
-            <DefaultButton
-              optionName="autoShow"
-              showName={t('site.add_feature.auto_show')}
-              children={options.autoShow ? <MdFlashOn /> : <MdFlashOff />}
-            />
-          );
-        case 'lockOption':
-          return () => (
-            <DefaultButton
-              optionName="lockOption"
-              showName={t('site.add_feature.lock_option')}
-              children={options.lockOption ? <MdLock /> : <MdLockOpen />}
-            />
-          );
+  for (const optionName of Object.keys(options)) {
+    switch (optionName) {
+      case 'hiddenFAB':
+      case 'option':
+        continue;
 
-        default:
-          if (typeof options[optionName] !== 'boolean') return null;
-          return () => <DefaultButton optionName={optionName} />;
-      }
-    })
-    .filter(Boolean) as Component[];
+      case 'autoShow':
+        list.push(() => (
+          <DefaultButton
+            optionName="autoShow"
+            showName={t('site.add_feature.auto_show')}
+            children={options.autoShow ? <MdFlashOn /> : <MdFlashOff />}
+          />
+        ));
+        break;
+
+      case 'lockOption':
+        list.push(() => (
+          <DefaultButton
+            optionName="lockOption"
+            showName={t('site.add_feature.lock_option')}
+            children={options.lockOption ? <MdLock /> : <MdLockOpen />}
+          />
+        ));
+        break;
+
+      default:
+        if (!showOtherList && typeof options[optionName] === 'boolean')
+          list.push(() => <DefaultButton optionName={optionName} />);
+    }
+  }
+
+  if (showOtherList)
+    for (const optionName of showOtherList)
+      list.push(() => <DefaultButton optionName={optionName} />);
 
   return list;
 };