index.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>网页油猴工具</title>
  6. <link rel="stylesheet" href="index.css"/>
  7. <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
  8. </head>
  9. <body>
  10. <div class="wrapper wp-modifiers" id="pageContainer">
  11. <div class="panel panel-default" style="margin-bottom: 0px;">
  12. <div class="panel-heading">
  13. <h3 class="panel-title">
  14. <a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
  15. <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>:网页再造精灵
  16. <span class="x-toolbox">
  17. <a href="#" id="import" @click="importModifier()" class="x-tooltip blue-tooltip">导入精灵</a><span class="x-line">|</span>
  18. <a href="#" id="export" @click="exportModifier()" class="x-tooltip blue-tooltip">导出精灵</a><span class="x-line">|</span>
  19. <a href="#" id="disable" @click="disableModifier()" class="x-tooltip blue-tooltip">全部停用</a><span class="x-line">|</span>
  20. <a href="#" id="remove" @click="removeModifier()" class="x-tooltip blue-tooltip">全部删除</a>
  21. </span>
  22. </h3>
  23. </div>
  24. <div class="x-wrapper">
  25. <div class="x-sidebar">
  26. <div class="x-tools">
  27. <a href="#" @click="createModifier">添加小精灵&gt;&gt;</a>
  28. </div>
  29. <ul id="modifiers">
  30. <li v-for="cm in cachedModifiers" :id="cm.id" :class="{'x-selected': editCM.id === cm.id}"
  31. @click="selectModifier(cm)">
  32. <i class="xm-icon" :class="cm.mDisabled === null ? 'xm-create' : (cm.mDisabled ? 'xm-disable' : 'xm-enable')"></i>
  33. <span v-html="cm.mName || '未命名'"></span>
  34. </li>
  35. </ul>
  36. </div>
  37. <div id="main">
  38. <form action="#" class="m-form x-masked" ref="mForm">
  39. <div class="row">
  40. <label for="mName">网页精灵名称:</label>
  41. <input type="text" id="mName" v-model="editCM.mName" class="form-control ui-d-ib" placeholder="比如:百度搜索结果过滤广告">
  42. </div>
  43. <div class="row ui-mt-10">
  44. <label for="mPattern">网址匹配规则:</label>
  45. <input type="text" id="mPattern" v-model="editCM.mPattern" class="form-control ui-d-ib" placeholder="如:/^https:\/\/www\.baidu\.com\/s/">
  46. </div>
  47. <div class="row ui-mt-10">
  48. <label for="mFilter">网页特效设定:</label>
  49. <select id="mFilter" v-model="editCM.mFilter" class="form-control ui-d-ib">
  50. <option value="0">无特效</option>
  51. <option value="1">特效模式一</option>
  52. <option value="2">特效模式二</option>
  53. <option value="3">特效模式三</option>
  54. <option value="4">特效模式四</option>
  55. <option value="5">特效模式五</option>
  56. </select>
  57. </div>
  58. <div class="row ui-mt-10">
  59. <label for="mRefresh">网页自动刷新:</label>
  60. <select id="mRefresh" v-model="editCM.mRefresh" class="form-control ui-d-ib">
  61. <option value="0">不自动刷新</option>
  62. <option value="1">每 1秒 一次</option>
  63. <option value="3">每 3秒 一次</option>
  64. <option value="5">每 5秒 一次</option>
  65. <option value="10">每 10秒 一次</option>
  66. <option value="15">每 15秒 一次</option>
  67. <option value="30">每 30秒 一次</option>
  68. <option value="60">每 1分(60秒) 一次</option>
  69. <option value="90">每 1分半(90秒) 一次</option>
  70. <option value="120">每 2分(120秒) 一次</option>
  71. <option value="180">每 3分(180秒) 一次</option>
  72. <option value="300">每 5分(300秒) 一次</option>
  73. <option value="600">每 10分(600秒) 一次</option>
  74. </select>
  75. </div>
  76. <div class="row ui-mt-10">
  77. <label for="mScript">精灵注入脚本:</label>
  78. <span class="x-tips">(Tips:可以注入任意JS代码,甚至编写一个智能机器人也是可以的,比如网页定制、自动抢票啥的!)</span>
  79. <textarea id="mScript" ref="mScript" v-model="editCM.mScript" cols="30" rows="10" class="form-control"></textarea>
  80. </div>
  81. <div class="row ui-mt-10">
  82. <input type="button" @click="saveModifier(true)" value="保存" class="btn btn-success ui-mr-20">
  83. <input type="button" @click="disableModifier(editCM)" :value="editCM.mDisabled ? '启用' : '停用'" class="btn btn-warning ui-mr-20">
  84. <input type="button" @click="removeModifier(editCM)" value="删除" class="btn btn-danger">
  85. </div>
  86. </form>
  87. <div class="m-mask"></div>
  88. </div>
  89. </div>
  90. <div class="clearfix"></div>
  91. </div>
  92. </div>
  93. <script src="../static/js/msg_type.js"></script>
  94. <script src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
  95. <script src="../static/vendor/codemirror/codemirror.js"></script>
  96. <script src="../static/vendor/codemirror/javascript.js"></script>
  97. <script src="../static/vendor/codemirror/active-line.js"></script>
  98. <script src="../static/vendor/codemirror/matchbrackets.js"></script>
  99. <script src="../static/vendor/codemirror/placeholder.js"></script>
  100. <script src="index.js"></script>
  101. </body>
  102. </html>