chore: added dark mode optimization

dlzmoe · Aug 6, 2024 · 07c8b5d · 07c8b5d
1 parent 4820426
commit 07c8b5d
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,7 @@ linux.do 增强插件，话题列表显示创建时间，显示楼层数，新
 - [x] 只看楼主切换功能
 - [x] 自动滚动阅读
 - [x] 脚本版本更新检测
+- [x] 黑夜模式
 
 ## 3. 开发说明
 
@@ -56,14 +57,19 @@ npm run build # 打包构建
 
 ## 2. 版本日志
 
-## 0.1.2
+## 0.1.3
 
-1. 修复浏览量显示时间的 bug
-2. 新增只看楼主功能（可设置）
+1. 新增黑夜模式适配
+2. 优化 UI 显示，设置按钮融合进网站。
 
 <details>
 <summary>历史版本日志</summary>
 
+## 0.1.2
+
+1. 修复浏览量显示时间的 bug
+2. 新增只看楼主功能（可设置）
+
 ## 0.1.1
 
 使用 vue 重构插件，优化了代码，方便开发。

diff --git a/dist/app.bundle.js b/dist/app.bundle.js
diff --git a/dist/app.bundle.js.map b/dist/app.bundle.js.map
diff --git a/linuxdo-scripts.js b/linuxdo-scripts.js
diff --git a/src/app.vue b/src/app.vue
@@ -1,20 +1,20 @@
 <template>
   <div id="linuxdoscripts">
-    <div class="linuxdoscripts-opacity" v-if="opacity"></div>
+    <div class="linuxdoscripts-opacity"></div>
     <div class="setting-btn">
       <AutoRead v-show="showautoread" /><!-- 自动阅读按钮 -->
       <LookOP v-show="showlookop" /><!-- 只看楼主 -->
-      <el-button @click="setting" type="primary" title="设置">
+      <!-- <el-button @click="setting" type="primary" title="设置">
         <svg
           class="fa d-icon d-icon-cog svg-icon svg-string"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use href="#cog"></use>
         </svg>
-      </el-button>
+      </el-button> -->
     </div>
 
-    <dialog open v-show="open" id="menu_suspendedball">
+    <dialog open id="menu_suspendedball">
       <div class="title">linxudo 增强插件设置</div>
       <div class="close" @click="closedialog">+</div>
       <div class="menu-body">
@@ -44,7 +44,6 @@
         <MenuLookOP v-model="settingData.checked9" />
         <!-- 检测更新 -->
         <Updates />
-
       </div>
 
       <div class="menu-footer">
@@ -80,6 +79,8 @@
         </el-alert>
       </div>
     </dialog>
+
+    <LevelDiglog />
   </div>
 </template>
 
@@ -99,6 +100,7 @@ import AutoRead from "./components/AutoRead.vue";
 import Updates from "./components/Updates.vue";
 import MenuLookOP from "./components/MenuLookOP.vue";
 import LookOP from "./components/LookOP.vue";
+import LevelDiglog from "./components/LevelDiglog.vue";
 
 export default {
   components: {
@@ -117,6 +119,7 @@ export default {
     Updates,
     MenuLookOP,
     LookOP,
+    LevelDiglog,
   },
   data() {
     return {
@@ -151,24 +154,19 @@ export default {
     };
   },
   methods: {
-    // 打开设置弹窗
-    setting() {
-      this.opacity = true;
-      this.open = true;
-    },
     // 关闭弹窗
     closedialog() {
-      this.opacity = false;
-      this.open = false;
+      $(".linuxdoscripts-opacity").hide();
+      $("#menu_suspendedball").hide();
     },
     // 保存设置
     save() {
       console.log(this.settingData);
       localStorage.setItem("linxudoscriptssetting", JSON.stringify(this.settingData));
 
       this.$message.success("保存成功！");
-      this.opacity = false;
-      this.open = false;
+      $(".linuxdoscripts-opacity").hide();
+      $("#menu_suspendedball").hide();
     },
     saveload() {
       this.save();
@@ -224,7 +222,7 @@ export default {
     },
     // 打开抽奖弹窗
     openFloorlottery() {
-      this.open = false;
+      $("#menu_suspendedball").hide();
       this.floorlotteryDialog = true;
     },
     // 开始抽奖
@@ -265,10 +263,24 @@ export default {
     },
     closelotter() {
       this.floorlotteryDialog = false;
-      this.opacity = false;
+      $(".linuxdoscripts-opacity").hide();
     },
     // 默认运行脚本
     runscripts() {
+      $(".linuxdoscripts-setting").click(function () {
+        $(".linuxdoscripts-opacity").show();
+        $("#menu_suspendedball").show();
+      });
+
+      const discourse_color_scheme_override = localStorage.getItem(
+        "discourse_color_scheme_override"
+      );
+      if (discourse_color_scheme_override) {
+        $("body").addClass("dark-theme");
+      } else {
+        $("body").removeClass("dark-theme");
+      }
+
       $(".signature-img").each(function () {
         var self = $(this);
         if (self.siblings(".signature-p").length < 1) {
@@ -303,6 +315,15 @@ export default {
     },
   },
   created() {
+    $(".sidebar-footer-actions")
+      .prepend(`<button class="btn no-text btn-icon color-scheme-toggler btn-flat linuxdoscripts-setting" title="设置" type="button">
+        <svg
+          class="fa d-icon d-icon-cog svg-icon svg-string"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <use href="#cog"></use>
+        </svg>
+    </button>`);
     const linxudoscriptssetting = localStorage.getItem("linxudoscriptssetting");
     if (linxudoscriptssetting) {
       this.settingData = JSON.parse(linxudoscriptssetting);

diff --git a/src/components/LevelDiglog.vue b/src/components/LevelDiglog.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="leveldiglog">
+    <!-- <div id="linuxDoLevelPopupContent" style="display: block">
+      <strong>信任等级：</strong>成员<br /><strong>升级进度：</strong><br />访问天数:
+      <span style="color: red">30 / 50</span><br />给出的赞:
+      <span style="color: green">134 / 30</span><br />收到的赞:
+      <span style="color: green">468 / 20</span><br />帖子数量:
+      <span style="color: green">480 / 10</span><br />进入的主题数:
+      <span style="color: green">1393 / 500</span><br />阅读的帖子数:
+      <span style="color: red">16321 / 20000</span><br />
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    init() {
+      if ($(".leveldiglogsearch").length < 1) {
+        $(".user-card .first-row .usercard-controls").append(`
+      <li class="compose-pm leveldiglogsearch">
+        <button class="btn btn-icon-text btn-primary" type="button">查询等级</button>
+      </li>`);
+      }
+
+      $(".leveldiglogsearch").click(function () {
+        var username = $(this).parents("#user-card").find(".names .username").html();
+
+        fetch(`https://linux.do/u/${username}/summary.json`)
+          .then((response) => response.json())
+          .then((data) => {
+            console.log(data);
+          });
+
+        $(".leveldiglog").show();
+      });
+    },
+  },
+  created() {
+    // if ($(".leveldiglogsearch").length < 1) {
+    //   setInterval(() => {
+    //     this.init();
+    //   }, 1000);
+    // }
+   
+  },
+};
+</script>
+
+<style>
+.leveldiglog {
+  /* position: fixed;
+  bottom: 20px;
+  right: 100px;
+  width: 250px;
+  height: auto;
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+  padding: 15px;
+  z-index: 10000;
+  font-size: 14px;
+  border-radius: 5px; */
+}
+</style>
diff --git a/src/components/Updates.vue b/src/components/Updates.vue
@@ -29,7 +29,7 @@ export default {
       show1: false,
       btn: true,
       version: "",
-      devversion: "v0.1.2",
+      devversion: "v0.1.3",
     };
   },
   methods: {

diff --git a/src/style/app.less b/src/style/app.less
@@ -10,6 +10,10 @@
 #linuxdoscripts {
   font-size: 15px;
 
+  #menu_suspendedball {
+    display: none;
+  }
+
   img {
     vertical-align: bottom;
     max-width: 100%;
@@ -41,12 +45,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--category-1-color);
+      background: #919191;
       color: #fff;
-      box-shadow: 1px 2px 5px rgba(0, 0, 0, .05);
-      font-size: 22px;
+      font-size: 16px;
       cursor: pointer;
       transition: all 0.1s linear;
+      border: none;
 
       svg {
         margin: 0
@@ -204,6 +208,7 @@
 }
 
 .linuxdoscripts-opacity {
+  display: none;
   position: fixed;
   left: 0;
   top: 0;
@@ -328,4 +333,14 @@ body.body-preview #main-outlet-wrapper {
   display: inline-block;
   width: 100%;
   text-align: left;
+}
+
+// 黑夜模式
+.dark-theme {
+  #linuxdoscripts dialog {
+    background: #333;
+    color: #eee;
+    box-shadow: 1px 2px 5px rgb(0 0 0);
+    border-color: #737373;
+  }
 }
diff --git a/tampermonkey.js b/tampermonkey.js
@@ -1,10 +1,10 @@
 // ==UserScript==
 // @name         linuxdo 增强插件
 // @namespace    https://github.com/dlzmoe/linuxdo-scripts
-// @version      0.1.2
+// @version      0.1.3
 // @description  linux.do 增强插件，话题列表显示创建时间，显示楼层数，新标签页打开话题，强制 block（拉黑屏蔽）某人的话题，话题快捷回复（支持自定义），优化签名图显示防止图裂，功能设置面板导入导出，楼层抽奖等，功能持续更新，欢迎提出。
 // @author       dlzmoe
-// @match        *://*.linux.do/*
+// @match        *://linux.do/*
 // @icon         https://cdn.linux.do/uploads/default/optimized/3X/9/d/9dd49731091ce8656e94433a26a3ef36062b3994_2_32x32.png
 // @license      Apache-2.0 license
 // ==/UserScript==