Merge pull request eee555#57 from putianyi889/patch-42

三个模块的深色模式兼容
putianyi889 · Jul 7, 2024 · 20b8a9c · 20b8a9c
2 parents 3129bfc + de9fe9f
commit 20b8a9c
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 30 deletions.
diff --git a/front_end/src/App.vue b/front_end/src/App.vue
@@ -49,11 +49,13 @@
                 </div>
             </div>
             <el-footer style="margin: auto">
-                Copyright @ 2023　<a href="http://fff666.top">元扫雷网 fff666.top</a>　版权所有　<a
-                    href="https://beian.miit.gov.cn/">苏ICP备2023056839号-1</a>
+                <el-text style="vertical-align: middle">Copyright @ 2023　</el-text>
+                <el-link href="http://fff666.top">元扫雷网 fff666.top</el-link>
+                <el-text style="vertical-align: middle">　版权所有　</el-text>
+                <el-link href="https://beian.miit.gov.cn/">苏ICP备2023056839号-1</el-link>
                 <span style="width: 12px; display: inline-block"></span>
-                <a href="https://beian.mps.gov.cn/#/query/webSearch?code=32020602001691" rel="noreferrer"
-                    target="_blank">苏公网安备32020602001691</a>
+                <el-link href="https://beian.mps.gov.cn/#/query/webSearch?code=32020602001691" rel="noreferrer"
+                    target="_blank">苏公网安备32020602001691</el-link>
             </el-footer>
         </el-container>
     </div>
@@ -247,18 +249,6 @@ body {
     margin-bottom: 0px;
 }
 
-/*设置点击前的样式 */
-a {
-    text-decoration: none;
-    color: #000;
-}
-
-/*设置点击后的样式 */
-.router-link-active {
-    text-decoration: none;
-    color: #000;
-}
-
 .header_all {
     margin: auto;
     width: 80vw;

diff --git a/front_end/src/components/DarkMode.vue b/front_end/src/components/DarkMode.vue
@@ -0,0 +1,17 @@
+<template>
+    <el-radio-group v-model="store" size="small" style="vertical-align: middle;">
+        <el-radio-button :label="t.t('setting.colorscheme.light')" value="light" />
+        <el-radio-button :label="t.t('setting.colorscheme.auto')" value="auto" />
+        <el-radio-button :label="t.t('setting.colorscheme.dark')" value="dark" />
+    </el-radio-group>
+</template>
+
+<script lang="ts" setup name="DarkMode">
+
+import { useI18n } from 'vue-i18n';
+import { useColorMode } from '@vueuse/core';
+
+const t = useI18n()
+const { system, store } = useColorMode()
+
+</script>
diff --git a/front_end/src/components/VideoList.vue b/front_end/src/components/VideoList.vue
@@ -1,14 +1,14 @@
 <template>
     <Teleport to=".common-layout">
         <el-dialog v-model="preview_visible"
-            style="background-color: rgba(240, 240, 240, 0.48); backdrop-filter: blur(1px);" draggable align-center
+            style="backdrop-filter: blur(1px);" draggable align-center
             destroy-on-close :modal="false" :lock-scroll="false">
             <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
                 src="/flop/index.html" ref="video_iframe"></iframe>
         </el-dialog>
     </Teleport>
     <el-table :data="videos_trans" :show-header="false" @row-click="preview" table-layout="auto"
-        style="width: 100%; color: black;font-size: 16px;user-select: none;">
+        style="width: 100%;font-size: 16px;user-select: none;">
         <el-table-column prop="time" min-width="200" :formatter="simple_formatter(utc_to_local_format)"/>
         <el-table-column v-if="need_player_name" min-width="80">
             <template #default="player">

diff --git a/front_end/src/i18n/locales/en.ts b/front_end/src/i18n/locales/en.ts
@@ -163,7 +163,12 @@ export const en = {
     },
     setting: {
         appearance: 'Appearance',
-        darkMode: 'Dark Mode',
+        colorscheme: {
+            auto: 'auto',
+            dark: 'dark',
+            light: 'light',
+            title: 'Color scheme',
+        },
         languageSwitch: 'Language Switch',
         menuFontSize: 'Menu Font Size',
         menuHeight: 'Menu Height',

diff --git a/front_end/src/i18n/locales/zh-cn.ts b/front_end/src/i18n/locales/zh-cn.ts
@@ -164,7 +164,12 @@ export const zhCn = {
     },
     setting: {
         appearance: '外观设置',
-        darkMode: '深色模式',
+        colorscheme: {
+            auto: '自动',
+            dark: '深色',
+            light: '浅色',
+            title: '颜色主题',
+        },
         languageSwitch: '语言切换',
         menuFontSize: '菜单字号',
         menuHeight: '菜单高度',

diff --git a/front_end/src/views/HomeView.vue b/front_end/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <el-container>
-            <el-main style="background-color: white;padding: 1%;">
+            <el-main style="padding: 1%;">
                 <el-tabs type="border-card" style=" min-height: 300px;">
                     <el-tab-pane label="雷界快讯" style="max-height: 300px; overflow: auto;user-select: none;">
                         <div v-for="news in news_queue">
@@ -24,7 +24,7 @@
                     </el-tab-pane>
                 </el-tabs>
             </el-main>
-            <el-aside width="30%" style="background-color: white;padding: 1%;">
+            <el-aside width="30%" style="padding: 1%;">
                 <el-tabs type="border-card" style="min-height: 300px;">
                     <el-tab-pane label="每日一星">每日一星</el-tab-pane>
                     <el-tab-pane label="站长统计">站长统计</el-tab-pane>
@@ -34,7 +34,7 @@
                     <div class="aside-tip-title">
                         <el-icon><Download/></el-icon>下载中心
                     </div>
-                    <div style="font-size: 14px;color: #888;padding: 2% 5%;">
+                    <div style="font-size: 14px;padding: 2% 5%;">
                         <Downloads></Downloads>
                         <span style="width:12px; display:inline-block"></span>
                         <FriendlyLink></FriendlyLink>
@@ -43,14 +43,14 @@
                     <div class="aside-tip-title">
                         <el-icon><QuestionFilled/></el-icon>帮助中心
                     </div>
-                    <div style="font-size: 14px;color: #888;padding: 2% 5%;">
+                    <div style="font-size: 14px;padding: 2% 5%;">
                         <Groups></Groups>
                     </div>
 
                     <div class="aside-tip-title">
                         <el-icon ><InfoFilled/></el-icon>关于我们
                     </div>
-                    <div style="font-size: 14px;color: #888;padding: 2% 5%;">
+                    <div style="font-size: 14px;padding: 2% 5%;">
                         <Thanks></Thanks>
                         <span style="width:12px; display:inline-block"></span>
                         赞助
@@ -139,7 +139,6 @@ const update_review_queue = async () => {
 
 .aside-tip-title{
     font-size: 14px;
-    color: #555;
     display:flex;
     align-items: center;
     margin-top: 5%;

diff --git a/front_end/src/views/SettingView.vue b/front_end/src/views/SettingView.vue
@@ -1,9 +1,7 @@
 <template>
     <el-descriptions :title="t.t('setting.appearance')" :column="3">
-        <el-descriptions-item :label="t.t('setting.darkMode')">
-            <UseDark v-slot="{ isDark, toggleDark }">
-                <el-checkbox @click="toggleDark()" :model-value="isDark" />
-            </UseDark>
+        <el-descriptions-item :label="t.t('setting.colorscheme.title')" style="vertical-align: middle;">
+            <DarkMode />
         </el-descriptions-item>
         <el-descriptions-item :label="t.t('setting.languageSwitch')"><el-switch v-model="local.language_show"
                 :active-text="$t('common.show')" :inactive-text="$t('common.hide')"></el-switch></el-descriptions-item>
@@ -50,5 +48,6 @@ const local = useLocalStore()
 const t = useI18n()
 
 import { UseDark } from '@vueuse/components';
+import DarkMode from '@/components/DarkMode.vue'
 
 </script>