Caveduck Modifier

修改Caveduck網站的樣式。

  1. // ==UserScript==
  2. // @name Caveduck Modifier
  3. // @namespace https://labs.muyi.tw/caveduck_modifier/
  4. // @version 0.29.8
  5. // @description 修改Caveduck網站的樣式。
  6. // @license AGPL-3.0-or-later
  7. // @author 慕儀
  8. // @match *://caveduck.io/*
  9. // @grant GM_addStyle
  10. // @icon data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZjJiNDEyOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjguNy4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMS4yLjAgQnVpbGQgMTQyKSAgLS0+CiAgPGc+CiAgICA8ZyBpZD0iQ2F2ZWR1Y2siPgogICAgICA8ZyBpZD0iQ2F2ZWR1Y2stMiIgZGF0YS1uYW1lPSJDYXZlZHVjayI+CiAgICAgICAgPHBhdGggZD0iTTEwOTYuMSw0NTMuNWMzMDUuMiw0OTcuMywxNTIuNiw3NDYtNDU3LjgsNzQ2Uy0xMjQuNiw5NTAuOCwxODAuNiw0NTMuNWMzMDUuMi00OTcuMyw2MTAuMy00OTcuMyw5MTUuNSwwWiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTExNDcuNiw0NTMuNWMyMDguOCwzNjEuNywxMDQuNCw1NDIuNS0zMTMuMiw1NDIuNXMtNTIyLTE4MC44LTMxMy4yLTU0Mi41YzIwOC44LTM2MS43LDQxNy42LTM2MS43LDYyNi41LDBaIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNjg0LDcyMS4yYzEwMC4yLDE3My42LDUwLjEsMjYwLjQtMTUwLjMsMjYwLjRzLTI1MC42LTg2LjgtMTUwLjMtMjYwLjRjMTAwLjItMTczLjYsMjAwLjUtMTczLjYsMzAwLjcsMFoiLz4KICAgICAgICA8cGF0aCBkPSJNODcxLjksNjEyLjdjMjUuMSw0My40LDEyLjUsNjUuMS0zNy42LDY1LjFzLTYyLjYtMjEuNy0zNy42LTY1LjFjMjUuMS00My40LDUwLjEtNDMuNCw3NS4yLDBaIi8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 'use strict';
  15.  
  16. let inLanguage;
  17. let debouncedAutoHeight;
  18. const $ = (selector) => document.querySelectorAll(selector);
  19. const $$ = (selector) => document.querySelector(selector);
  20. const tarAutoHeight = `prompt-input`;
  21. const tarAutoScrollHeight = `lorebook-data-input textarea, #charDesc`;
  22. const textReplaceSelector = `#chatMessages b:not([data-text-replaced]), #chatMessages p:not([data-text-replaced])`;
  23. const cURL = window.location.href;
  24. const muyiStyles = 'https://labs.muyi.tw/caveduck_modifier/style2.css?v=11403290552';
  25. const fontStyles = `
  26. user-input-form div[ng-repeat] textarea,
  27. #chatMessages b,
  28. #chatMessages p,
  29. form[ng-if~="!!chat.editMode"] textarea {
  30. font: normal clamp(16px, .95vw, 32px) / 1.75em var(--m_ff1);
  31. }
  32. #chatMessages b {
  33. font-family: var(--m_ff2);
  34. font-weight: 400;
  35. }
  36. form[ng-if~="!!chat.editMode"] textarea {
  37. font-size: var(--m_font-size);
  38. }
  39. user-input-form div[ng-repeat] textarea {
  40. font-size: var(--m_font-size);
  41. }
  42. `;
  43. const charMap = {
  44. '\\.{2,}': '⋯⋯',
  45. '⋯': '⋯⋯',
  46. '⋯{3,}': '⋯⋯',
  47. '!': '!',
  48. '\\?': '?',
  49. '~': '~',
  50. ';': ';',
  51. ':': ':',
  52. ',': ',',
  53. '\\.': '。',
  54. '\\(': '(',
  55. '\\)': ')'
  56. };
  57. const locale = {
  58. 'zh-hant': {
  59. cb_fontOverride: ['覆蓋字型', '作用頁:Talk<br>用慕儀喜歡的自訂字型取代預設字型。'],
  60. cb_shortButtons: ['快捷按鈕', '作用頁:Talk<br>將「我的資訊」與「使用者筆記」按鈕移到右側。'],
  61. cb_replaceText: ['取代符號', '作用頁:Talk<br>Claude 3 Haiku會使用錯誤的中文標點符號,這個功能可以修正它。'],
  62. cb_deskFix: ['桌面顯示修正', '作用頁:Talk<br>修正高解析度下的顯示體驗,讓對話畫面佔用全版,且圖片顯示區域更大。'],
  63. cb_mdFix: ['行動顯示修正', '作用頁:Talk<br>修正行動裝置的顯示問題。'],
  64. cb_autoHeight: ['編輯框自動高度', '作用頁:Edit Character、Lorebook、Custom prompt<br>每個項目使用卷軸十分愚蠢,勾選此項可以將其設為自動高度。'],
  65. toggleButton: '慕儀\n神器',
  66. reloadButton: '套用並重載',
  67. },
  68. 'en': {
  69. cb_fontOverride: ['Override Font', 'Active on: Talk<br>Replace default font with MuYi\'s preferred custom font.'],
  70. cb_shortButtons: ['Shortcut buttons', 'Active on: Talk<br>Move the "My Information" and "User Notes" buttons to the right side.'],
  71. cb_replaceText: ['Replace Symbols', 'Active on: Talk<br>Claude 3 Haiku uses incorrect Chinese punctuation. This feature fixes it.'],
  72. cb_deskFix: ['Desktop Display Fix', 'Active on: Talk<br>Fix display experience on high resolution, making the chat screen occupy the full screen and enlarging the image display area.'],
  73. cb_mdFix: ['Mobile Display Fix', 'Active on: Talk<br>Fix the display issues of mobile devices.'],
  74. cb_autoHeight: ['Auto Height for Edit Box', 'Active on: Edit Character、Lorebook、Custom prompt<br>Using scrollbars for each item is stupid. Enable this to auto-height.'],
  75. toggleButton: 'MuYi\'s\nToolbox',
  76. reloadButton: 'Apply and reload',
  77. },
  78. };
  79.  
  80. const settings = Object.keys(locale['en'])
  81. .filter(key => key.startsWith('cb_'))
  82. .map(localeName => ({
  83. localeName: localeName,
  84. key: `sw_${localeName.slice(3)}`
  85. }));
  86.  
  87. const switches = {};
  88. settings.forEach(setting => {
  89. switches[setting.key] = JSON.parse(localStorage.getItem(`enable${setting.key.slice(3)}`) || 'false');
  90. });
  91.  
  92. const domElements = {
  93. o_editMyInfoButton: 'button[ng-click="uiState.settingModalMode = \'edit_my_info\'"]',
  94. o_editUserNoteButton: 'button[ng-click="uiState.settingModalMode = \'edit_user_note\'"]',
  95. o_optionButton: 'button#optionButton',
  96. o_imgButton: '.hidden[ng-show~="backgroundImage"]'
  97. };
  98.  
  99.  
  100. function getAncestor(selector, level) {
  101. if (typeof selector !== 'string' || typeof level !== 'number' || level < 0) {
  102. throw new Error('Invalid parameters');
  103. }
  104. const element = document.querySelector(selector);
  105. if (!element) {
  106. return null;
  107. }
  108. if (level === 0) {
  109. return element;
  110. }
  111. let current = element;
  112. for (let i = 0; i < level; i++) {
  113. current = current.parentElement;
  114. if (!current) {
  115. return null;
  116. }
  117. }
  118. return current;
  119. }
  120.  
  121. // 添加自訂樣式
  122. function addCustomStyles() {
  123. GM_addStyle(fontStyles);
  124. console.log("Custom styles added.");
  125. }
  126.  
  127. // 自動調整高度的核心函式
  128. function autoHeight(el) {
  129. el.style.height = 'auto';
  130. el.style.overflow = 'auto';
  131. }
  132.  
  133. function autoScrollHeight(el) {
  134. autoHeight(el);
  135. el.style.height = `${el.scrollHeight}px`;
  136. }
  137.  
  138. // 初始化符合條件的元素
  139. function initializeAutoHeight() {
  140. if (!debouncedAutoHeight) {
  141. debouncedAutoHeight = debounce(() => {
  142. $(tarAutoHeight).forEach(autoHeight);
  143. $(tarAutoScrollHeight).forEach(autoScrollHeight);
  144. }, 666, 2);
  145. debouncedAutoHeight();
  146. window.addEventListener('keydown', debouncedAutoHeight);
  147. window.addEventListener('click', debouncedAutoHeight);
  148. }
  149. }
  150.  
  151.  
  152. // 替換指定選擇符的內容
  153. function replaceTextContent() {
  154. const processedAttribute = "data-text-replaced"; // 標記屬性名稱
  155. const el = $(`${textReplaceSelector}:not([${processedAttribute}])`);
  156. el.forEach((el) => {
  157. let originalText = el.textContent;
  158. for (const [pattern, replacement] of Object.entries(charMap)) {
  159. originalText = originalText.replace(new RegExp(pattern, 'g'), replacement);
  160. }
  161. el.textContent = originalText;
  162. el.setAttribute(processedAttribute, ""); // 添加標記屬性
  163. });
  164. }
  165.  
  166. // 延遲觸發的去抖函式
  167. function debounce(func, delay, repeat) {
  168. let timer = null;
  169. let count = 1;
  170. return () => {
  171. func();
  172. if (timer) clearInterval(timer);
  173. timer = setInterval(() => {
  174. func();
  175. count += 1;
  176. if (count >= repeat) {
  177. clearInterval(timer);
  178. }
  179. }, delay);
  180. };
  181. }
  182.  
  183. // 啟動 MutationObserver
  184. function initializeObserver() {
  185. const observer = new MutationObserver(() => {
  186. mainAction();
  187. });
  188. observer.observe(document.body, { childList: true, subtree: true });
  189. console.log("MutationObserver initialized.");
  190. }
  191.  
  192. // 檢查 inLanguage 並啟動必要功能
  193. function checkInLanguage() {
  194. const script = $$('script[type="application/ld+json"]');
  195. if (script) {
  196. try {
  197. const jsonData = JSON.parse(script.textContent);
  198. inLanguage = jsonData[0]?.inLanguage || '';
  199. } catch (error) {
  200. console.error("Failed to parse JSON:", error);
  201. }
  202. }
  203. }
  204.  
  205. function createSettingsUI() {
  206. const lang = ['zh-hant', 'zh-hans'].includes(inLanguage) ? 'zh-hant' : 'en';
  207. const texts = locale[lang];
  208.  
  209. // 創建核取方塊
  210. const createCheckbox = (setting) => {
  211. const container = document.createElement('div');
  212. const checkbox = document.createElement('input');
  213. const label = document.createElement('label');
  214. const desc = document.createElement('div');
  215. desc.className = 'desc';
  216.  
  217. checkbox.type = 'checkbox';
  218. const storageKey = `enable${setting.key.slice(3)}`;
  219. checkbox.id = storageKey;
  220.  
  221. const isChecked = JSON.parse(localStorage.getItem(storageKey) || 'false');
  222. checkbox.checked = isChecked;
  223. label.setAttribute('for', storageKey);
  224. label.textContent = texts[setting.localeName][0];
  225. desc.innerHTML = texts[setting.localeName][1];
  226. label.appendChild(desc);
  227. checkbox.addEventListener('change', () => {
  228. localStorage.setItem(storageKey, checkbox.checked);
  229. });
  230. container.appendChild(checkbox);
  231. container.appendChild(label);
  232. return container;
  233. };
  234.  
  235. // 創建按鈕和設定視窗
  236. const mt = document.createElement('div');
  237. mt.id = 'mt';
  238.  
  239. const toggleButton = document.createElement('button');
  240. toggleButton.className = 'button--red mt_toggleButton';
  241. toggleButton.textContent = texts.toggleButton;
  242. if (lang === 'zh-hant') toggleButton.style.fontSize = '.8rem';
  243.  
  244. const settingsPanel = document.createElement('div');
  245. settingsPanel.className = 'mt_fixed mt_settingsPanel';
  246. settingsPanel.style.display = 'none';
  247.  
  248. // 添加核取方塊
  249. settings.forEach((setting) => {
  250. settingsPanel.appendChild(createCheckbox(setting));
  251. });
  252.  
  253. // 重整按鈕
  254. const reloadButton = document.createElement('button');
  255. reloadButton.textContent = texts.reloadButton;
  256. reloadButton.className = 'button--red';
  257. reloadButton.addEventListener('click', () => location.reload());
  258. settingsPanel.appendChild(reloadButton);
  259.  
  260. // 切換視窗顯示
  261. toggleButton.addEventListener('click', (event) => {
  262. event.stopPropagation(); // 避免點擊 toggleButton 時也觸發關閉
  263. const isVisible = settingsPanel.style.display === 'block';
  264.  
  265. if (!isVisible) {
  266. settingsPanel.style.display = 'block';
  267.  
  268. // 加入全頁點擊監聽器,只會執行一次
  269. const outsideClickListener = (e) => {
  270. if (!settingsPanel.contains(e.target) && e.target !== toggleButton) {
  271. settingsPanel.style.display = 'none';
  272. document.removeEventListener('click', outsideClickListener);
  273. }
  274. };
  275. document.addEventListener('click', outsideClickListener);
  276. } else {
  277. settingsPanel.style.display = 'none';
  278. }
  279. });
  280.  
  281. // 添加到頁面
  282. document.body.appendChild(mt);
  283. mt.appendChild(toggleButton);
  284. document.body.appendChild(settingsPanel);
  285.  
  286. // 快捷按鈕
  287. if (switches.sw_shortButtons && mURL('*/talk/*')) {
  288. ['👤', '📝'].forEach((text, index) => {
  289. const button = document.createElement('button');
  290. button.textContent = text;
  291. button.addEventListener('click', () => {
  292. const optionButton = $$(domElements.o_optionButton);
  293. if (!optionButton) return console.warn('找不到 option 按鈕');
  294. optionButton.click();
  295.  
  296. setTimeout(() => {
  297. const targetSelector = index === 0
  298. ? domElements.o_editMyInfoButton
  299. : domElements.o_editUserNoteButton;
  300. const targetButton = $$(targetSelector);
  301. if (targetButton) {
  302. targetButton.click();
  303. } else {
  304. console.warn('找不到指定按鈕');
  305. }
  306. }, 100);
  307. });
  308. mt.appendChild(button);
  309. });
  310. }
  311.  
  312. }
  313.  
  314. function checkSettings() {
  315. checkInLanguage();
  316. settings.forEach(setting => {
  317. switches[setting.switchVar] = JSON.parse(localStorage.getItem(setting.storageKey) || 'false');
  318. });
  319.  
  320. if (switches.sw_fontOverride) addCustomStyles();
  321. mainAction();
  322. }
  323.  
  324. function mURL(pattern) {
  325. const patternParts = pattern.split('*');
  326. let lastIndex = 0;
  327. for (let part of patternParts) {
  328. if (part === "") continue;
  329. const index = cURL.indexOf(part, lastIndex);
  330. if (index === -1) return false;
  331. lastIndex = index + part.length;
  332. }
  333. return true;
  334. }
  335.  
  336. function setStylesheet() {
  337. const link = document.createElement("link");
  338. link.rel = 'stylesheet';
  339. link.href = muyiStyles;
  340. document.head.appendChild(link);
  341. }
  342.  
  343. function mainAction() {
  344. if (switches.sw_autoHeight && (mURL('*/created-characters/*') || mURL('*/prompt-build-script/*') || mURL('*/lorebook-editor/*'))) initializeAutoHeight();
  345. if (['zh-hant', 'zh-hans', 'ja', 'ko'].includes(inLanguage) && (switches.sw_replaceText)) replaceTextContent();
  346. if (mURL('*/public')) {
  347. if (switches.sw_mdFix) {
  348. $$('section.flex-col.py-60 > h3.text-2xl').classList.remove('px-16');
  349. }
  350. }
  351. if (mURL('*/talk/*')) {
  352. if (switches.sw_mdFix) {
  353. const imgButton = $$(domElements.o_imgButton);
  354. if (imgButton) {
  355. imgButton.classList.add('mt_fix');
  356. } else {
  357. console.warn('找不到圖片按鈕元素(o_imgButton)');
  358. }
  359. }
  360. if (switches.sw_deskFix) {
  361. $('.container, .items-center.text-lg.relative, div.flex.overflow-hidden.flex-grow>div.relative[class*="md:w-[40%]"], div.flex.overflow-hidden.flex-grow>div.flex[class*="md:w-[60%]"]').forEach(el => {
  362. el.classList.add('mt_fix');
  363. });
  364. }
  365. }
  366. }
  367.  
  368. window.addEventListener('load', () => {
  369. setStylesheet();
  370. checkSettings();
  371. createSettingsUI();
  372. setTimeout(initializeObserver, 100);
  373. });
  374. })();