临时修复CPA在较小屏幕上显示问题的油猴脚本

开发调优
, ,
1

CPA的认证文件管理对笔记本屏幕不太友好，临时用油猴修复了一下（仅针对简洁模式），现在简洁模式能看了 :distorted_face:

修复前

修复前
修复前1605×888 116 KB

修复后

修复后
修复后1580×848 116 KB

油猴脚本 
// ==UserScript==
// @name         CPA布局优化
// @namespace    https://CPA.YOUR_SITE.com/
// @version      1.0.0
// @description  调整文件网格、筛选区和侧边栏宽度，缓解元素挤在一起的问题
// @match        https://CPA.YOUR_SITE.com/*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const STYLE_ID = 'relay-layout-optimization-style';

  function injectStyle() {
    if (document.getElementById(STYLE_ID)) return;

    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = `
      /* 1) 文件网格：4列改为3列 */
      [class^="AuthFilesPage-module__fileGridCompact___"],
      [class*=" AuthFilesPage-module__fileGridCompact___"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      /* 2) 筛选区左侧宽度：248px 改为 200px */
      [class^="AuthFilesPage-module__filterSection___"],
      [class*=" AuthFilesPage-module__filterSection___"] {
        grid-template-columns: 200px minmax(0, 1fr) !important;
      }

      /* 3) 侧边栏宽度：240px 改为 180px */
      .sidebar {
        width: 180px !important;
      }
    `;

    (document.head || document.documentElement).appendChild(style);
  }

  injectStyle();

  // 兼容某些 SPA / 动态替换 head 的情况，确保样式还在
  const observer = new MutationObserver(() => {
    injectStyle();
  });

  observer.observe(document.documentElement, {
    childList: true,
    subtree: true
  });
})();
2 个赞
2

感谢大佬

1 个赞
3

上次的修改没有做足测试 目前页面已经二次优化了

1 个赞