☰

Greasyfork Beautify

优化导航栏样式 / 脚本列表改为卡片布局 / 代码高亮(atom-one-dark + vscode 风格) 等……融入式美化，自然、优雅，没有突兀感，仿佛页面原本就是如此……（更多优化逐步完善中！）

  1. // ==UserScript==
  2. // @name         Greasyfork Beautify
  3. // @namespace    https://github.com/kiccer
  4. // @version      1.6.4
  5. // @description  优化导航栏样式 / 脚本列表改为卡片布局 / 代码高亮(atom-one-dark + vscode 风格) 等……融入式美化，自然、优雅，没有突兀感，仿佛页面原本就是如此……（更多优化逐步完善中！）
  6. // @description:en  Optimize the navigation bar style / script list to card layout / code highlighting (atom-one-dark + vscode style), etc. Into the style of beautification, more natural, more elegant, no sense of abruptness, as if the page is originally so. (more optimization in progress!)
  7. // @author       kiccer<1072907338@qq.com>
  8. // @supportURL   https://github.com/kiccer/TampermonkeyScripts/issues
  9. // @license      MIT
  10. // @match        https://gf.qytechs.cn/*
  11. // @match        https://sleazyfork.org/*
  12. // @icon         https://gf.qytechs.cn/packs/media/images/blacklogo96-b2384000fca45aa17e45eb417cbcbb59.png
  13. // @require      https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js
  14. // @require      https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js
  15. // @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
  16. // @require      https://cdn.bootcdn.net/ajax/libs/javascript-detect-element-resize/0.5.3/jquery.resize.min.js
  17. // @require      https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.min.js
  18. // @require      https://cdn.bootcdn.net/ajax/libs/highlight.js/11.5.1/highlight.min.js
  19. // @require      https://cdn.bootcdn.net/ajax/libs/highlight.js/11.5.1/languages/javascript.min.js
  20. // @require      https://gf.qytechs.cn/scripts/447149-checkversion/code/checkVersion.js?version=1065242
  21. // @resource normalize.css https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css
  22. // @resource element-ui.css https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.min.css
  23. // @resource element-icons https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/fonts/element-icons.ttf
  24. // @resource atom-one-dark.css https://cdn.bootcdn.net/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css
  25. // @run-at       document-start
  26. // @grant        GM_info
  27. // @grant        GM_setValue
  28. // @grant        GM_getValue
  29. // @grant        GM_addStyle
  30. // @grant        GM_getResourceURL
  31. // @grant        GM_getResourceText
  32. // @grant        GM_registerMenuCommand
  33. // ==/UserScript==
  34.  
  35. /* globals $ less Vue hljs checkVersion ELEMENT */
  36.  
  37. Vue.use(ELEMENT)
  38.  
  39. if (/\(Development\)$/i.test(GM_info.script.name)) {
  40.     Vue.config.devtools = true
  41. }
  42.  
  43. // 默认设置
  44. const defaultSettings = {
  45.     script_list_columns_num: 2,
  46.     show_install_button_in_card: true,
  47.     show_version_info_in_card: true
  48. }
  49.  
  50. // 获取设置
  51. const getSettings = () => {
  52.     return Object.assign(
  53.         {},
  54.         defaultSettings,
  55.         JSON.parse(GM_getValue('formData') || '{}')
  56.     )
  57. }
  58.  
  59. const VERSION = GM_info.script.version
  60. const settings = getSettings()
  61.  
  62. // 样式注入
  63. GM_addStyle(GM_getResourceText('normalize.css'))
  64. GM_addStyle(GM_getResourceText('element-ui.css'))
  65. GM_addStyle(GM_getResourceText('atom-one-dark.css'))
  66.  
  67. const lessOptions = {}
  68.  
  69. const lessInput = `
  70.     // --------------------------------------------- 变量
  71.  
  72.     @nav_height: 60px;
  73.     @user_container_height: 24px;
  74.  
  75.     // --------------------------------------------- 混合宏
  76.  
  77.     .ellipsis (@lines) {
  78.         display: -webkit-box;
  79.         -webkit-box-orient: vertical;
  80.         overflow: hidden;
  81.         line-height: 1.5;
  82.         -webkit-line-clamp: @lines;
  83.     }
  84.  
  85.     // --------------------------------------------- 通用样式
  86.  
  87.     * {
  88.         box-sizing: border-box;
  89.         outline: none;
  90.     }
  91.  
  92.     body {
  93.         line-height: 1.5;
  94.         min-height: 100vh;
  95.         background-color: #f7f7f7;
  96.  
  97.         > .width-constraint {
  98.             min-height: 100vh;
  99.             background-color: #fff;
  100.             padding: 20px;
  101.             padding-top: calc(@nav_height + @user_container_height + 20px);
  102.             
  103.             .text-content {
  104.                 border: 0;
  105.                 box-shadow: none;
  106.                 padding: 0;
  107.             }
  108.         }
  109.     }
  110.  
  111.     a {
  112.         color: rgb(38, 38, 38);
  113.         text-decoration: none;
  114.  
  115.         &:hover {
  116.             text-decoration: underline;
  117.         }
  118.  
  119.         &:visited {
  120.             color: rgb(38, 38, 38);
  121.         }
  122.     }
  123.  
  124.     // --------------------------------------------- element-ui
  125.  
  126.     // 解决 element-icons 图标引用不到问题
  127.     @font-face {
  128.         font-family: element-icons;
  129.         src: url(${GM_getResourceURL('element-icons')}),
  130.     }
  131.  
  132.     // --------------------------------------------- 代码高亮
  133.  
  134.     .code-container {
  135.         background-color: #282c34;
  136.         border-radius: 8px;
  137.         max-height: 100%;
  138.         overflow: visible;
  139.  
  140.         // 定义滚动条
  141.         ::-webkit-scrollbar {
  142.             width: 14px;
  143.             height: 14px;
  144.             background-color: transparent;
  145.         }
  146.  
  147.         // 定义滚动条轨道
  148.         ::-webkit-scrollbar-track {
  149.             background-color: transparent;
  150.         }
  151.  
  152.         // 定义滑块
  153.         ::-webkit-scrollbar-thumb {
  154.             background-color: rgba(78, 86, 102, 0);
  155.         }
  156.  
  157.         // 定义边角
  158.         ::-webkit-scrollbar-corner {
  159.             background-color: transparent;
  160.         }
  161.  
  162.         &:hover {
  163.             ::-webkit-scrollbar-thumb {
  164.                 background-color: rgba(78, 86, 102, .5);
  165.             }
  166.         }
  167.  
  168.         ::selection {
  169.             background-color: rgb(51, 56, 66);
  170.         }
  171.  
  172.         pre {
  173.             code {
  174.                 padding: 0;
  175.                 font-family: Consolas;
  176.                 cursor: text;
  177.                 overflow: auto;
  178.  
  179.                 .marker {
  180.                     display: inline-block;
  181.                     color: #636d83;
  182.                     text-align: right;
  183.                     padding-right: 20px;
  184.                     user-select: none;
  185.                     cursor: auto;
  186.                 }
  187.             }
  188.         }
  189.     }
  190.  
  191.     // --------------------------------------------- 页码
  192.  
  193.     .pagination {
  194.         margin-top: 20px !important;
  195.         user-select: none;
  196.  
  197.         > * {
  198.             padding: 0 .5em !important;
  199.             min-width: 2em;
  200.             height: 2em;
  201.             line-height: 2;
  202.             text-align: center;
  203.             text-decoration: none !important;
  204.         }
  205.  
  206.         > a {
  207.             background-color: #f7f7f7 !important;
  208.  
  209.             &:hover {
  210.                 background-color: #e1e1e1 !important;
  211.             }
  212.         }
  213.     }
  214.  
  215.     // --------------------------------------------- 输入框
  216.  
  217.     input[type=search] {
  218.         padding: 3px 6px;
  219.         padding-right: 2.4em !important;
  220.         border: 1px solid #bfbfbf;
  221.         border-radius: 4px;
  222.     }
  223.  
  224.     form {
  225.         input.search-submit {
  226.             top: 50% !important;
  227.             transform: translateY(-50%);
  228.             cursor: pointer;
  229.         }
  230.     }
  231.  
  232.     .home-search {
  233.         margin-bottom: 20px;
  234.     }
  235.  
  236.     .sidebar-search {
  237.         margin-bottom: 20px;
  238.  
  239.         input[type="search"] {
  240.             margin: 0;
  241.         }
  242.     }
  243.  
  244.     // --------------------------------------------- header
  245.  
  246.     #main-header {
  247.         background-color: #000;
  248.         background-image: none;
  249.         width: 100%;
  250.         padding: 0;
  251.         position: fixed;
  252.         top: 0;
  253.         z-index: 1;
  254.         user-select: none;
  255.         box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
  256.  
  257.         .width-constraint {
  258.             display: flex;
  259.             justify-content: space-between;
  260.             height: 100%;
  261.             padding: 0;
  262.  
  263.             #site-name {
  264.                 display: flex;
  265.                 align-items: center;
  266.                 
  267.                 a {
  268.                     display: block;
  269.                 }
  270.  
  271.                 img {
  272.                     width: auto;
  273.                     height: 50px;
  274.                 }
  275.  
  276.                 #site-name-text {
  277.                     margin-left: 10px;
  278.  
  279.                     h1 {
  280.                         font-size: 36px;
  281.                     }
  282.                 }
  283.             }
  284.         }
  285.  
  286.         #user-container {
  287.             width: 100%;
  288.             height: @user_container_height;
  289.             background-color: #343434;
  290.  
  291.             .user-main {
  292.                 display: flex;
  293.                 justify-content: space-between;
  294.                 align-items: center;
  295.                 margin: auto;
  296.                 max-width: 1200px;
  297.                 height: @user_container_height;
  298.                 padding-right: 10px;
  299.  
  300.                 @media screen and (max-width: 1228px) {
  301.                     margin: auto 1.2vw;
  302.                 }
  303.  
  304.                 .script-version {
  305.                     font-size: 12px;
  306.                     letter-spacing: 1px;
  307.                     font-family: "微软雅黑";
  308.                     font-weight: 200;
  309.                     color: rgba(255, 255, 255, .3);
  310.  
  311.                     .has-new-version {
  312.                         color: lime;
  313.                         margin-left: 5px;
  314.                     }
  315.                 }
  316.  
  317.                 .login-info {
  318.                     font-size: 14px;
  319.                 }
  320.             }
  321.         }
  322.     }
  323.  
  324.     #site-nav {
  325.         width: 0;
  326.         height: 0;
  327.         border: 0;
  328.         padding: 0;
  329.         overflow: hidden;
  330.         position: relative;
  331.     }
  332.  
  333.     #site-nav-vue {
  334.         display: flex;
  335.         
  336.         .nav-item {
  337.             line-height: @nav_height;
  338.             padding: 0 10px;
  339.             transition: all .2s ease;
  340.             text-decoration: none;
  341.             position: relative;
  342.             white-space: nowrap;
  343.  
  344.             &:hover {
  345.                 background-color: rgba(255, 255, 255, .2);
  346.  
  347.                 .sub-nav {
  348.                     display: flex;
  349.                 }
  350.             }
  351.  
  352.             .sub-nav {
  353.                 display: none;
  354.                 flex-direction: column;
  355.                 position: absolute;
  356.                 top: 100%;
  357.                 right: 0;
  358.                 background-color: rgba(0, 0, 0, .8);
  359.  
  360.                 .nav-item {
  361.                     line-height: 40px;
  362.                 }
  363.             }
  364.         }
  365.     }
  366.  
  367.     // --------------------------------------------- 脚本列表
  368.  
  369.     #user-library-script-list,
  370.     #user-script-list,
  371.     #user-deleted-script-list,
  372.     #browse-script-list {
  373.         display: grid;
  374.         grid-template-columns: repeat(${settings.script_list_columns_num}, 1fr);
  375.         grid-gap: 20px;
  376.         border: 0;
  377.         box-shadow: none;
  378.  
  379.         @media screen and (max-width: 1228px) {
  380.             grid-template-columns: repeat(1, 1fr);
  381.         }
  382.  
  383.         li {
  384.             border: 1px solid #bbb;
  385.             box-shadow: 0 0 5px #ddd;
  386.             border-radius: 5px;
  387.             padding: 10px;
  388.             position: relative;
  389.             word-break: break-all;
  390.  
  391.             a.script-link {
  392.                 .ellipsis(2);
  393.                 height: calc(3em  + 8px);
  394.                 font-size: 16px;
  395.                 margin: 4px -10px 4px -14px;
  396.                 padding: 4px 10px;
  397.                 background: linear-gradient(#fff, #eee);
  398.                 border-left: 7px solid #800;
  399.                 box-shadow: inset 0 1px rgb(0 0 0 / 10%), inset 0 -1px rgb(0 0 0 / 10%);
  400.             }
  401.  
  402.             & > article {
  403.                 & > h2 {
  404.                     & > .badge,
  405.                     & > .name-description-separator,
  406.                     & > strong {
  407.                         display: none; // 兼容 “大人的Greasyfork”
  408.                     }
  409.  
  410.                     .script-description {
  411.                         .ellipsis(3);
  412.                         text-indent: 2em;
  413.                         margin: 10px 0 10px;
  414.                         height: 4.5em;
  415.                         font-size: 14px;
  416.         
  417.                         strong,
  418.                         #install-area {
  419.                             display: none; // 兼容 “大人的Greasyfork”
  420.                         }
  421.                     }
  422.                 }
  423.             }
  424.  
  425.             .inline-script-stats {
  426.                 padding: 10px 0;
  427.                 // margin-bottom: 10px;
  428.                 border-top: 1px solid #ebebeb;
  429.                 // border-bottom: 1px solid #ebebeb;
  430.  
  431.                 dt {
  432.                     // width: 40%;
  433.                 }
  434.  
  435.                 dd {
  436.                     width: 60%;
  437.                 }
  438.             }
  439.  
  440.             .install-link {
  441.                 float: right;
  442.                 font-size: 12px;
  443.  
  444.                 &:hover {
  445.                     transition: box-shadow .2s;
  446.                     box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  447.                 }
  448.  
  449.                 &.lum-lightbox-loader {
  450.                     border-left: 10px solid #005200;
  451.                     border-right: 10px solid #005200;
  452.                     position: relative;
  453.                     min-height: 30px;
  454.                     min-width: 70px;
  455.  
  456.                     &::before,
  457.                     &::after {
  458.                         width: 1em;
  459.                         height: 1em;
  460.                         margin-top: -0.5em;
  461.                         border-radius: 1em;
  462.                         background: hsla(0, 0%, 100%, .5);
  463.                     }
  464.                 }
  465.             }
  466.         }
  467.     }
  468.  
  469.     // --------------------------------------------- 列表右侧选项组
  470.  
  471.     .list-option-groups {
  472.         #language-selector {
  473.             + * {
  474.                 margin-top: 10px;
  475.             }
  476.             
  477.             #language-selector-locale {
  478.                 width: 100%;
  479.                 border: 1px solid #bfbfbf;
  480.                 border-radius: 4px;
  481.             }
  482.         }
  483.     }
  484. `
  485.  
  486. less.render(lessInput, lessOptions).then(output => {
  487.     // output.css = string of css
  488.     // output.map = string of sourcemap
  489.     // output.imports = array of string filenames of the imports referenced
  490.  
  491.     GM_addStyle(output.css)
  492. }, err => {
  493.     console.error(err)
  494. })
  495.  
  496. // 查看代码页面简化，隐藏信息
  497. if (/https:\/\/greasyfork\.org\/[a-zA-Z-]+\/scripts\/\d+-.+\/code/.test(location.href)) {
  498.     GM_addStyle(`
  499.         #script-info header,
  500.         #install-area,
  501.         #script-feedback-suggestion {
  502.             display: none;
  503.         }
  504.  
  505.         #script-content {
  506.             margin-top: 16px;
  507.         }
  508.  
  509.         .code-container pre code {
  510.             max-height: calc(100vh - 267px);
  511.         }
  512.     `)
  513. }
  514.  
  515. // 脚本卡片美化
  516. function scriptCardBeautify () {
  517.     $(`
  518.         #user-script-list li[data-script-id],
  519.         #user-deleted-script-list li[data-script-id],
  520.         #browse-script-list li[data-script-id]
  521.     `).each((i, n) => {
  522.         const card = $(n)
  523.         const href = card.find('> article a.script-link').attr('href')
  524.  
  525.         // TODO 显示脚本图标 (看情况，如果加了图标不好布局就算了)
  526.  
  527.         // 判断这个卡片是否已经美化过了
  528.         const hasVersionTag = card.find('.script-show-version').length > 0
  529.         const hasDownloadBtn = card.find('.install-link-copy').length > 0
  530.  
  531.         if (!(hasVersionTag && hasDownloadBtn)) {
  532.             // 信息占位
  533.             if (settings.show_version_info_in_card) {
  534.                 card.find('.inline-script-stats').append(`
  535.                     <dt class="script-show-version"><span>...</span></dt>
  536.                     <dd class="script-show-version"><span></span></dd>
  537.                 `)
  538.             }
  539.  
  540.             // 下载按钮占位
  541.             if (settings.show_install_button_in_card) {
  542.                 card.append(`
  543.                     <a class="install-link lum-lightbox-loader"></a>
  544.                 `)
  545.             }
  546.  
  547.             // 增加延时，避免请求过多导致 503 错误 （每秒最多 10 个请求）
  548.             setTimeout(() => {
  549.                 $.ajax({
  550.                     type: 'get',
  551.                     url: href,
  552.                     success: res => {
  553.                         const html = $(res)
  554.  
  555.                         if (settings.show_version_info_in_card) {
  556.                             // 删除占位元素
  557.                             card.find('.script-show-version').remove()
  558.  
  559.                             // 版本
  560.                             card.find('.inline-script-stats').append(
  561.                                 html.find('.script-show-version')
  562.                             )
  563.                         }
  564.  
  565.                         if (settings.show_install_button_in_card) {
  566.                             // 删除占位元素
  567.                             card.find('.install-link.lum-lightbox-loader').remove()
  568.  
  569.                             // 下载按钮
  570.                             card.append(
  571.                                 html.find('#install-area .install-link').eq(0).addClass('install-link-copy')
  572.                             )
  573.  
  574.                             // 下载按钮文案根据已安装的版本号调整
  575.                             setTimeout(() => {
  576.                                 const btn = card.find('.install-link-copy')[0]
  577.                                 if (btn) checkVersion.checkForUpdatesJS(btn, true)
  578.                             })
  579.                         }
  580.                     }
  581.                 })
  582.             }, (i % 5) * 2e3)
  583.         }
  584.     })
  585. }
  586.  
  587. // 页面获得焦点时
  588. window.addEventListener('focus', e => {
  589.     // 自动更新安装状态
  590.     $('.script-list li[data-script-id] a.install-link-copy').each((i, n) => {
  591.         checkVersion.checkForUpdatesJS(n, true)
  592.     })
  593. })
  594.  
  595. // 卡片数量记录
  596. let cardCountRecord = 0
  597.  
  598. // 兼容无限翻页插件
  599. function compatibleWithInfiniteScroll () {
  600.     const cardCount = $('.script-list li[data-script-id]').length
  601.  
  602.     if (cardCountRecord !== cardCount) {
  603.         cardCountRecord = cardCount
  604.         scriptCardBeautify()
  605.     }
  606. }
  607.  
  608. // 页面加载完成后执行
  609. $(() => {
  610.     // 导航
  611.     const navContainer = document.createElement('div')
  612.     navContainer.id = 'site-nav-vue'
  613.     document.querySelector('.width-constraint').appendChild(navContainer)
  614.  
  615.     // eslint-disable-next-line no-unused-vars
  616.     const navApp = new Vue({
  617.         el: '#site-nav-vue',
  618.  
  619.         template: `
  620.             <div id="site-nav-vue">
  621.                 <a
  622.                     class="nav-item"
  623.                     v-for="(nav, nav_i) in navList"
  624.                     :key="nav_i"
  625.                     :href="nav.url"
  626.                 >
  627.                     <span>{{ nav.label }}</span>
  628.  
  629.                     <div class="sub-nav" v-if="nav.list?.length">
  630.                         <a
  631.                             class="nav-item"
  632.                             v-for="(sub, sub_i) in nav.list"
  633.                             :key="sub_i"
  634.                             :href="sub.url"
  635.                         >
  636.                             <span>{{ sub.label }}</span>
  637.                         </a>
  638.                     </div>
  639.                 </a>
  640.             </div>
  641.         `,
  642.  
  643.         data () {
  644.             return {
  645.                 navList: [...$('#site-nav > nav > li')].map(n => {
  646.                     const a = $(n).find('> a')
  647.                     const subNav = [...$(n).find('> nav > li')]
  648.  
  649.                     return {
  650.                         label: a.text() || $(n).text(),
  651.                         url: a.attr('href'),
  652.                         list: subNav.map(m => {
  653.                             const subA = $(m).find('> a')
  654.  
  655.                             return {
  656.                                 label: subA.text(),
  657.                                 url: subA.attr('href')
  658.                             }
  659.                         })
  660.                     }
  661.                 })
  662.             }
  663.         }
  664.     })
  665.  
  666.     // 用户
  667.     const userContainer = document.createElement('div')
  668.     userContainer.id = 'user-container'
  669.     document.querySelector('#main-header').appendChild(userContainer)
  670.  
  671.     // eslint-disable-next-line no-unused-vars
  672.     const userApp = new Vue({
  673.         el: '#user-container',
  674.         template: `
  675.             <div id="user-container">
  676.                 <div class="user-main">
  677.                     <div class="script-version">
  678.                         Greasyfork Beautify v${VERSION}
  679.                         <a
  680.                             class="has-new-version"
  681.                             href="https://gf.qytechs.cn/scripts/446849-greasyfork-beautify/code/Greasyfork%20Beautify.user.js"
  682.                             v-if="lastVersion !== '${VERSION}'"
  683.                         >Update to v{{ lastVersion }}</a>
  684.                     </div>
  685.  
  686.                     <div class="login-info">
  687.                         <a
  688.                             :href="dom.attr('href')"
  689.                         >{{ dom.text() }}</a>
  690.  
  691.                         <template v-if="isLogin">
  692.                             [<a :href="logoutDom.attr('href')">{{ logoutDom.text() }}</a>]
  693.                         </template>
  694.                     </div>
  695.                 </div>
  696.             </div>
  697.         `,
  698.  
  699.         data () {
  700.             return {
  701.                 lastVersion: VERSION,
  702.                 dom: $('#nav-user-info .user-profile-link a, #nav-user-info .sign-in-link a'),
  703.                 logoutDom: $('.sign-out-link a'),
  704.                 isLogin: $('.sign-out-link').length > 0 // 存在登出按钮则表示已登录(不可用)
  705.             }
  706.         },
  707.  
  708.         created () {
  709.             this.versionCheck()
  710.         },
  711.  
  712.         methods: {
  713.             versionCheck () {
  714.                 $.ajax({
  715.                     url: 'https://gf.qytechs.cn/zh-CN/scripts/446849-greasyfork-beautify',
  716.                     success: res => {
  717.                         const html = $(res)
  718.                         this.lastVersion = html.find('dd.script-show-version span').text()
  719.                     }
  720.                 })
  721.             }
  722.         }
  723.     })
  724.  
  725.     // 代码高亮
  726.     $('pre.lang-js').each((pre_i, pre) => {
  727.         // 调整代码，给一些压缩代码增加换行
  728.         $(pre).find('li').append('\n')
  729.         const code = $('<code class="language-javascript">').html(
  730.             pre.innerHTML
  731.         )
  732.  
  733.         // 清空原始代码容器，放置新容器
  734.         $(pre)
  735.             .removeClass()
  736.             .html('')
  737.             .append(code)
  738.  
  739.         // 高亮
  740.         hljs.highlightElement(pre.querySelector('code'))
  741.  
  742.         // 增加行号
  743.         const html = $(pre).find('code').html()
  744.         const htmlSplit = html.split('\n')
  745.         const totalLines = htmlSplit.length
  746.  
  747.         $(pre).find('code').html(
  748.             htmlSplit.map((n, i) => `<span class="marker" style="width: calc(${String(totalLines).length * 0.5}em + 20px);">${i + 1}</span>${n}`).join('\n')
  749.         )
  750.     })
  751.  
  752.     // 脚本列表页面，卡片
  753.     if (settings.show_install_button_in_card || settings.show_version_info_in_card) {
  754.         compatibleWithInfiniteScroll()
  755.         $('.script-list ').resize(compatibleWithInfiniteScroll)
  756.     }
  757.  
  758.     // 列表右侧选项组
  759.     $('.list-option-groups > *:eq(0)').before(
  760.         // 设置语言
  761.         $('#language-selector')
  762.     )
  763.  
  764.     // 注册(不可用)菜单
  765.     $('body').append($('<div id="greasyfork-beautify-settings">'))
  766.  
  767.     const settingsApp = new Vue({
  768.         el: '#greasyfork-beautify-settings',
  769.  
  770.         template: `
  771.             <el-dialog
  772.                 width="600px"
  773.                 title="Greasyfork Beautify v${VERSION}"
  774.                 :visible.sync="show"
  775.                 @closed="onClosed"
  776.             >
  777.                 <el-form
  778.                     size="mini"
  779.                     label-width="120px"
  780.                     :model="formData"
  781.                 >
  782.                     <el-form-item label="脚本列表列数">
  783.                         <el-input-number
  784.                             label="描述文字"
  785.                             v-model="formData.script_list_columns_num"
  786.                             :min="1"
  787.                             :max="2"
  788.                         />
  789.                     </el-form-item>
  790.  
  791.                     <el-form-item label="显示安装按钮">
  792.                         <el-switch
  793.                             v-model="formData.show_install_button_in_card"
  794.                         />
  795.                     </el-form-item>
  796.  
  797.                     <el-form-item label="显示版本信息">
  798.                         <el-switch
  799.                             v-model="formData.show_version_info_in_card"
  800.                         />
  801.                     </el-form-item>
  802.                 </el-form>
  803.  
  804.                 <span slot="footer" class="dialog-footer">
  805.                     <el-button @click="onReset">重 置</el-button>
  806.                     <el-button type="primary" @click="onSubmit">确 定</el-button>
  807.                 </span>
  808.             </el-dialog>
  809.         `,
  810.  
  811.         data () {
  812.             return {
  813.                 show: false,
  814.                 formData: getSettings()
  815.             }
  816.         },
  817.  
  818.         methods: {
  819.             onClosed () {
  820.                 Object.assign(this.formData, getSettings())
  821.             },
  822.  
  823.             onReset () {
  824.                 Object.assign(this.formData, defaultSettings)
  825.             },
  826.  
  827.             onSubmit () {
  828.                 GM_setValue('formData', JSON.stringify(this.formData))
  829.                 location.reload()
  830.             }
  831.         }
  832.     })
  833.  
  834.     GM_registerMenuCommand('美化设置', e => {
  835.         settingsApp.show = true
  836.     })
  837. })

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址