☰

Greasyfork Beautify

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

目前为 2022-07-22 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Greasyfork Beautify
  3. // @namespace    https://github.com/kiccer
  4. // @version      1.6.1
  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://greasyfork.org/*
  11. // @match        https://sleazyfork.org/*
  12. // @icon         https://greasyfork.org/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://greasyfork.org/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.             $.ajax({
  548.                 type: 'get',
  549.                 url: href,
  550.                 success: res => {
  551.                     const html = $(res)
  552.  
  553.                     if (settings.show_version_info_in_card) {
  554.                         // 删除占位元素
  555.                         card.find('.script-show-version').remove()
  556.  
  557.                         // 版本
  558.                         card.find('.inline-script-stats').append(
  559.                             html.find('.script-show-version')
  560.                         )
  561.                     }
  562.  
  563.                     if (settings.show_install_button_in_card) {
  564.                         // 删除占位元素
  565.                         card.find('.install-link.lum-lightbox-loader').remove()
  566.  
  567.                         // 下载按钮
  568.                         card.append(
  569.                             html.find('#install-area .install-link').eq(0).addClass('install-link-copy')
  570.                         )
  571.  
  572.                         // 下载按钮文案根据已安装的版本号调整
  573.                         setTimeout(() => {
  574.                             const btn = card.find('.install-link-copy')[0]
  575.                             if (btn) checkVersion.checkForUpdatesJS(btn, true)
  576.                         })
  577.                     }
  578.                 }
  579.             })
  580.         }
  581.     })
  582. }
  583.  
  584. // 页面获得焦点时
  585. window.addEventListener('focus', e => {
  586.     // 自动更新安装状态
  587.     $('.script-list li[data-script-id] a.install-link-copy').each((i, n) => {
  588.         checkVersion.checkForUpdatesJS(n, true)
  589.     })
  590. })
  591.  
  592. // 页面加载完成后执行
  593. $(() => {
  594.     // 导航
  595.     const navContainer = document.createElement('div')
  596.     navContainer.id = 'site-nav-vue'
  597.     document.querySelector('.width-constraint').appendChild(navContainer)
  598.  
  599.     // eslint-disable-next-line no-unused-vars
  600.     const navApp = new Vue({
  601.         el: '#site-nav-vue',
  602.  
  603.         template: `
  604.             <div id="site-nav-vue">
  605.                 <a
  606.                     class="nav-item"
  607.                     v-for="(nav, nav_i) in navList"
  608.                     :key="nav_i"
  609.                     :href="nav.url"
  610.                 >
  611.                     <span>{{ nav.label }}</span>
  612.  
  613.                     <div class="sub-nav" v-if="nav.list?.length">
  614.                         <a
  615.                             class="nav-item"
  616.                             v-for="(sub, sub_i) in nav.list"
  617.                             :key="sub_i"
  618.                             :href="sub.url"
  619.                         >
  620.                             <span>{{ sub.label }}</span>
  621.                         </a>
  622.                     </div>
  623.                 </a>
  624.             </div>
  625.         `,
  626.  
  627.         data () {
  628.             return {
  629.                 navList: [...$('#site-nav > nav > li')].map(n => {
  630.                     const a = $(n).find('> a')
  631.                     const subNav = [...$(n).find('> nav > li')]
  632.  
  633.                     return {
  634.                         label: a.text() || $(n).text(),
  635.                         url: a.attr('href'),
  636.                         list: subNav.map(m => {
  637.                             const subA = $(m).find('> a')
  638.  
  639.                             return {
  640.                                 label: subA.text(),
  641.                                 url: subA.attr('href')
  642.                             }
  643.                         })
  644.                     }
  645.                 })
  646.             }
  647.         }
  648.     })
  649.  
  650.     // 用户
  651.     const userContainer = document.createElement('div')
  652.     userContainer.id = 'user-container'
  653.     document.querySelector('#main-header').appendChild(userContainer)
  654.  
  655.     // eslint-disable-next-line no-unused-vars
  656.     const userApp = new Vue({
  657.         el: '#user-container',
  658.         template: `
  659.             <div id="user-container">
  660.                 <div class="user-main">
  661.                     <div class="script-version">
  662.                         Greasyfork Beautify v${VERSION}
  663.                         <a
  664.                             class="has-new-version"
  665.                             href="https://greasyfork.org/scripts/446849-greasyfork-beautify/code/Greasyfork%20Beautify.user.js"
  666.                             v-if="lastVersion !== '${VERSION}'"
  667.                         >Update to v{{ lastVersion }}</a>
  668.                     </div>
  669.  
  670.                     <div class="login-info">
  671.                         <a
  672.                             :href="dom.attr('href')"
  673.                         >{{ dom.text() }}</a>
  674.  
  675.                         <template v-if="isLogin">
  676.                             [<a :href="logoutDom.attr('href')">{{ logoutDom.text() }}</a>]
  677.                         </template>
  678.                     </div>
  679.                 </div>
  680.             </div>
  681.         `,
  682.  
  683.         data () {
  684.             return {
  685.                 lastVersion: VERSION,
  686.                 dom: $('#nav-user-info .user-profile-link a, #nav-user-info .sign-in-link a'),
  687.                 logoutDom: $('.sign-out-link a'),
  688.                 isLogin: $('.sign-out-link').length > 0 // 存在登出按钮则表示已登录
  689.             }
  690.         },
  691.  
  692.         created () {
  693.             this.versionCheck()
  694.         },
  695.  
  696.         methods: {
  697.             versionCheck () {
  698.                 $.ajax({
  699.                     url: 'https://greasyfork.org/zh-CN/scripts/446849-greasyfork-beautify',
  700.                     success: res => {
  701.                         const html = $(res)
  702.                         this.lastVersion = html.find('dd.script-show-version span').text()
  703.                     }
  704.                 })
  705.             }
  706.         }
  707.     })
  708.  
  709.     // 代码高亮
  710.     $('pre.lang-js').each((pre_i, pre) => {
  711.         // 调整代码，给一些压缩代码增加换行
  712.         $(pre).find('li').append('\n')
  713.         const code = $('<code class="language-javascript">').html(
  714.             pre.innerHTML
  715.         )
  716.  
  717.         // 清空原始代码容器，放置新容器
  718.         $(pre)
  719.             .removeClass()
  720.             .html('')
  721.             .append(code)
  722.  
  723.         // 高亮
  724.         hljs.highlightElement(pre.querySelector('code'))
  725.  
  726.         // 增加行号
  727.         const html = $(pre).find('code').html()
  728.         const htmlSplit = html.split('\n')
  729.         const totalLines = htmlSplit.length
  730.  
  731.         $(pre).find('code').html(
  732.             htmlSplit.map((n, i) => `<span class="marker" style="width: calc(${String(totalLines).length * 0.5}em + 20px);">${i + 1}</span>${n}`).join('\n')
  733.         )
  734.     })
  735.  
  736.     // 卡片数量记录
  737.     let cardCountRecord = 0
  738.     // 脚本列表页面，卡片
  739.     if (settings.show_install_button_in_card || settings.show_version_info_in_card) {
  740.         // 兼容翻页插件
  741.         $('.script-list ').resize(e => {
  742.             const cardCount = $('.script-list li[data-script-id]').length
  743.  
  744.             if (cardCountRecord !== cardCount) {
  745.                 cardCountRecord = cardCount
  746.                 scriptCardBeautify()
  747.             }
  748.         })
  749.     }
  750.  
  751.     // 列表右侧选项组
  752.     $('.list-option-groups > *:eq(0)').before(
  753.         // 设置语言
  754.         $('#language-selector')
  755.     )
  756.  
  757.     // 注册菜单
  758.     $('body').append($('<div id="greasyfork-beautify-settings">'))
  759.  
  760.     const settingsApp = new Vue({
  761.         el: '#greasyfork-beautify-settings',
  762.  
  763.         template: `
  764.             <el-dialog
  765.                 width="600px"
  766.                 title="Greasyfork Beautify v${VERSION}"
  767.                 :visible.sync="show"
  768.                 @closed="onClosed"
  769.             >
  770.                 <el-form
  771.                     size="mini"
  772.                     label-width="120px"
  773.                     :model="formData"
  774.                 >
  775.                     <el-form-item label="脚本列表列数">
  776.                         <el-input-number
  777.                             label="描述文字"
  778.                             v-model="formData.script_list_columns_num"
  779.                             :min="1"
  780.                             :max="2"
  781.                         />
  782.                     </el-form-item>
  783.  
  784.                     <el-form-item label="显示安装按钮">
  785.                         <el-switch
  786.                             v-model="formData.show_install_button_in_card"
  787.                         />
  788.                     </el-form-item>
  789.  
  790.                     <el-form-item label="显示版本信息">
  791.                         <el-switch
  792.                             v-model="formData.show_version_info_in_card"
  793.                         />
  794.                     </el-form-item>
  795.                 </el-form>
  796.  
  797.                 <span slot="footer" class="dialog-footer">
  798.                     <el-button @click="onReset">重 置</el-button>
  799.                     <el-button type="primary" @click="onSubmit">确 定</el-button>
  800.                 </span>
  801.             </el-dialog>
  802.         `,
  803.  
  804.         data () {
  805.             return {
  806.                 show: false,
  807.                 formData: getSettings()
  808.             }
  809.         },
  810.  
  811.         methods: {
  812.             onClosed () {
  813.                 Object.assign(this.formData, getSettings())
  814.             },
  815.  
  816.             onReset () {
  817.                 Object.assign(this.formData, defaultSettings)
  818.             },
  819.  
  820.             onSubmit () {
  821.                 GM_setValue('formData', JSON.stringify(this.formData))
  822.                 location.reload()
  823.             }
  824.         }
  825.     })
  826.  
  827.     GM_registerMenuCommand('美化设置', e => {
  828.         settingsApp.show = true
  829.     })
  830. })