使用 Bootstrap 5 暗色模式

app/Models/Host.php

@@ -237,7 +237,7 @@ public function cost(string $amount = null, $auto = true): bool
 
         $left = $user->reduce($real_price, $description, false, $data);
 
-        $this->addLog($this, $real_price);
+        $this->addLog($real_price);
 
         broadcast(new Users($this->user, 'balances.amount.reduced', $this->user));
 
@@ -250,7 +250,7 @@ public function cost(string $amount = null, $auto = true): bool
         return true;
     }
 
-    public function addLog(Host $host, string $amount = "0"): bool
+    public function addLog(string $amount = "0"): bool
     {
         if ($amount === "0") {
             return false;
@@ -295,7 +295,7 @@ public function addLog(Host $host, string $amount = "0"): bool
             $earnings = array_slice($earnings, -3, 3, true);
         }
 
-        $this->module->charge($should_balance, 'balance', null);
+        $this->module->charge($amount, 'balance', null);
 
         // 保存 1 年
         Cache::forever($cache_key, $earnings);

app/View/Components/ModuleEarning.php

@@ -17,8 +17,6 @@ class ModuleEarning extends Component
      */
     public function __construct(Module $module)
     {
-        //
-
         $this->module = $module;
     }
 

package.json

@@ -7,7 +7,7 @@
     "devDependencies": {
         "@popperjs/core": "^2.10.2",
         "axios": "^1.1.2",
-        "bootstrap": "^5.1.3",
+        "bootstrap": "5.3.0-alpha1",
         "laravel-vite-plugin": "^0.6.0",
         "lodash": "^4.17.19",
         "postcss": "^8.1.14",

public/build/manifest.json

@@ -8,24 +8,24 @@
     "src": "node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff"
   },
   "resources/js/app.js": {
-    "file": "assets/app.cca2681d.js",
+    "file": "assets/app.ac160459.js",
     "src": "resources/js/app.js",
     "isEntry": true,
     "css": [
-      "assets/app.58b5762f.css"
+      "assets/app.f920c8e4.css"
     ],
     "assets": [
       "assets/bootstrap-icons.966620f9.woff2",
       "assets/bootstrap-icons.c6569d46.woff"
     ]
   },
+  "resources/js/app.css": {
+    "file": "assets/app.f920c8e4.css",
+    "src": "resources/js/app.css"
+  },
   "resources/sass/app.scss": {
-    "file": "assets/app.51b5c4b1.css",
+    "file": "assets/app.dc12303a.css",
     "src": "resources/sass/app.scss",
     "isEntry": true
-  },
-  "resources/js/app.css": {
-    "file": "assets/app.58b5762f.css",
-    "src": "resources/js/app.css"
   }
 }

resources/js/app.js

@@ -1,5 +1,4 @@
 import './bootstrap';
 
-import 'bootstrap-icons/font/bootstrap-icons.css';
 
-import '../sass/bootstrap-dark.css';
+// import '../sass/bootstrap-dark.css';

resources/js/bootstrap.js

@@ -1,6 +1,8 @@
 import _ from 'lodash';
 import 'bootstrap';
 
+import './color-mode';
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
@@ -8,6 +10,10 @@ import 'bootstrap';
  */
 import axios from 'axios';
 
+import 'bootstrap/js/dist/popover';
+import 'bootstrap/js/dist/tooltip';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
 window._ = _;
 
 window.axios = axios;

resources/js/color-mode.js

@@ -0,0 +1,72 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+    'use strict'
+
+    const storedTheme = localStorage.getItem('theme')
+
+    const getPreferredTheme = () => {
+        if (storedTheme) {
+            return storedTheme
+        }
+
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    const setTheme = function (theme) {
+        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.setAttribute('data-bs-theme', 'dark')
+        } else {
+            document.documentElement.setAttribute('data-bs-theme', theme)
+        }
+    }
+
+    setTheme(getPreferredTheme())
+
+    const showActiveTheme = (theme, focus = false) => {
+        const themeSwitcher = document.querySelector('#bd-theme')
+        const themeSwitcherText = document.querySelector('#bd-theme-text')
+        const activeThemeIcon = document.querySelector('.theme-icon-active use')
+        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+            element.classList.remove('active')
+            element.setAttribute('aria-pressed', 'false')
+        })
+
+        btnToActive.classList.add('active')
+        btnToActive.setAttribute('aria-pressed', 'true')
+        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+        if (focus) {
+            themeSwitcher.focus()
+        }
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (storedTheme !== 'light' || storedTheme !== 'dark') {
+            setTheme(getPreferredTheme())
+        }
+    })
+
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(getPreferredTheme())
+
+        document.querySelectorAll('[data-bs-theme-value]')
+            .forEach(toggle => {
+                toggle.addEventListener('click', () => {
+                    const theme = toggle.getAttribute('data-bs-theme-value')
+                    localStorage.setItem('theme', theme)
+                    setTheme(theme)
+                    showActiveTheme(theme, true)
+                })
+            })
+    })
+})()

resources/sass/app.scss

@@ -7,11 +7,6 @@
 // Bootstrap
 @import "bootstrap/scss/bootstrap";
 
-.nav-link {
-    color: #000 !important;
-}
-
-
 .h1,
 .h2,
 .h3,
@@ -26,164 +21,3 @@ h5,
 h6 {
     font-weight: 400;
 }
-
-.text-auto {
-    color: #333;
-}
-
-.text-reverse {
-    color: #fff;
-}
-
-.text-reverse:hover {
-    color: #fff;
-}
-
-.text-reverse:visited {
-    color: #fff;
-}
-
-
-.bg-reverse {
-    background-color: #333;
-}
-
-.lae-logo {
-    background-image: url('/assets/lae-dark.png');
-    background-size: 40px;
-    background-repeat: no-repeat;
-    width: 40px;
-    height: 25px;
-    /* position: relative;
-    top: -3px; */
-}
-
-.background-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-position: center;
-    z-index: -1;
-}
-
-td {
-    white-space: nowrap;
-    overflow: hidden;
-    word-break: keep-all;
-}
-
-.cursor-pointer {
-    cursor: pointer;
-}
-
-/*
-.table-flash {
-    animation: flash 1s linear;
-}
-
-@keyframes flash {
-    from {
-        background-color: #f8f9fa20;
-    }
-    to {
-        background-color: none;
-    }
-} */
-
-#lottie {
-    background-color: transparent;
-    width: 100%;
-    height: 100%;
-    display: block;
-    overflow: hidden;
-    transform: translate3d(0, 0, 0);
-    text-align: center;
-    opacity: 1;
-}
-
-.img-revert {
-    filter: invert(0);
-}
-
-@media (prefers-color-scheme: dark) {
-    /* .background-container {
-      background: url('/assets/images/bg-dark.jpg');
-      filter: brightness(0.6);
-    } */
-
-    .nav-link {
-        color: unset !important;
-    }
-
-    .lae-logo {
-        background-image: url('/assets/lae-white.png');
-    }
-
-    .text-auto {
-        color: #fff;
-    }
-
-    .text-reverse {
-        color: #333;
-    }
-
-    .text-reverse:hover {
-        color: rgb(255, 255, 255);
-    }
-
-    .text-reverse:visited {
-        color: #333;
-    }
-
-    .bg-reverse {
-        background-color: #fff;
-    }
-
-    .text-auto:hover {
-        color: #fff !important;
-    }
-
-    /*.active {*/
-    /*  color: #fff !important;*/
-    /*}*/
-
-    .v-md-editor {
-        background-color: #3b3b3b !important;
-    }
-    .v-md-editor__toolbar-item--active,
-    .v-md-editor__toolbar-item--active:hover {
-        background: #323232 !important;
-    }
-
-    .v-md-editor__toolbar {
-        border-bottom: 1px solid #606060 !important;
-    }
-
-    .v-md-editor__toolbar-divider::before {
-        border-left: 1px solid #606060 !important;
-    }
-
-    .v-md-editor--editable .v-md-editor__editor-wrapper {
-        border-right: 1px solid #606060 !important;
-    }
-
-    .v-md-textarea-editor pre,
-    .v-md-textarea-editor textarea {
-        color: #cacaca !important;
-    }
-
-    .img-revert {
-        filter: invert(1);
-    }
-}
-
-.placeholder {
-    /* --smooth-corners: 100.00;
-    mask-image: paint(smooth-corners);
-    -webkit-mask-image: paint(smooth-corners); */
-
-    border-radius: 8px;
-}

resources/views/components/module-earning.blade.php

@@ -13,7 +13,7 @@
             <td>{{ $year }}</td>
             @for ($i = 1; $i < 13; $i++)
 
-                <td @if (($months[$i]['should_balance'] ?? 0) > 0) class="text-danger" @endif>{{ round(($months[$i]['should_balance'] ?? 0), 2) ?? 0 }}
+                <td @if (($months[$i]['balance'] ?? 0) > 0) class="text-danger" @endif>{{ round(($months[$i]['balance'] ?? 0), 2) ?? 0 }}
                     元
                 </td>
 

resources/views/layouts/admin.blade.php

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-bs-theme="auto">
 
 <head>
     <meta charset="utf-8">
@@ -22,13 +22,13 @@
 <div id="app">
     <nav class="navbar navbar-expand-md shadow-sm bg-body">
         <div class="container">
-            <a class="navbar-brand text-auto" href="{{ route('admin.index') }}">
+            <a class="navbar-brand" href="{{ route('admin.index') }}">
                 管理员
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                     aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
-                <span class="bi bi-list text-auto fs-1"></span>
+                <span class="bi bi-list fs-1"></span>
             </button>
 
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -83,13 +83,13 @@
 
 
                     <li class="nav-item">
-                        <a class="nav-link text-auto" href="{{ route('admin.transactions') }}">交易记录</a>
+                        <a class="nav-link" href="{{ route('admin.transactions') }}">交易记录</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-auto" href="{{ route('admin.admins.index') }}">管理员</a>
+                        <a class="nav-link" href="{{ route('admin.admins.index') }}">管理员</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-auto" href="{{ route('admin.commands') }}">速查表</a>
+                        <a class="nav-link" href="{{ route('admin.commands') }}">速查表</a>
                     </li>
                 </ul>
 
@@ -98,14 +98,14 @@
                     <!-- Authentication Links -->
                     @if (!Auth::guard('admin')->check())
                         @if (Route::has('admin.login'))
-                            <li class="nav-item text-auto">
+                            <li class="nav-item">
                                 <a class="nav-link" href="{{ route('admin.login') }}">{{ __('Login') }}</a>
                             </li>
                         @endif
                     @else
                         @if (Auth::guard('web')->check())
                             <li class="nav-item">
-                                <a class="nav-link text-auto" href="{{ route('index') }}">切换到
+                                <a class="nav-link" href="{{ route('index') }}">切换到
                                     {{ Auth::guard('web')->user()->name }}</a>
                             </li>
                         @endif
@@ -113,7 +113,7 @@
 
                             @php($admin = \Illuminate\Support\Facades\Auth::guard('admin')->user())
 
-                            <a id="navbarDropdown" class="nav-link dropdown-toggle text-auto" href="#" role="button"
+                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 {{ $admin->name ?? '管理员' }}
                             </a>
@@ -124,8 +124,7 @@
                                 </a>
 
                                 <a class="dropdown-item" href="{{ route('admin.logout') }}"
-                                   onclick="event.preventDefault();
-                                                     document.getElementById('logout-form').submit();">
+                                   onclick="document.getElementById('logout-form').submit();return false;">
                                     {{ __('Logout') }}
                                 </a>
 

resources/views/layouts/app.blade.php

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh_CN">
+<html lang="zh_CN" data-bs-theme="auto">
 
 <head>
     <meta charset="utf-8">
@@ -26,42 +26,42 @@
 <div id="app">
     <nav class="navbar navbar-expand-md shadow-sm bg-body">
         <div class="container">
-            <a class="navbar-brand text-auto" href="{{ route('index') }}">
+            <a class="navbar-brand" href="{{ route('index') }}">
                 {{ config('app.display_name') }}
             </a>
-            <button class="navbar-toggler text-auto" type="button" data-bs-toggle="collapse"
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                     aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
-                <span class="bi bi-list text-auto fs-1"></span>
+                <span class="bi bi-list fs-1"></span>
             </button>
 
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <!-- Left Side Of Navbar -->
                 <ul class="navbar-nav me-auto">
                     <li class="nav-item">
-                        <a class="nav-link text-auto" href="{{ route('index') }}">密钥管理</a>
+                        <a class="nav-link" href="{{ route('index') }}">密钥管理</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-auto" href="{{ route('balances.index') }}">余额与充值</a>
+                        <a class="nav-link" href="{{ route('balances.index') }}">余额与充值</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-auto" href="{{ route('transfer') }}">转账</a>
+                        <a class="nav-link" href="{{ route('transfer') }}">转账</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-auto" href="{{ route('transactions') }}">交易记录</a>
+                        <a class="nav-link" href="{{ route('transactions') }}">交易记录</a>
                     </li>
 
                 </ul>
 
                 <!-- Right Side Of Navbar -->
                 <ul class="navbar-nav ms-auto">
-                    <a class="nav-link text-auto" target="_blank"
+                    <a class="nav-link" target="_blank"
                        href="{{ config('settings.dashboard.base_url') }}">仪表盘</a>
 
-                    <a class="nav-link text-auto" target="_blank"
+                    <a class="nav-link" target="_blank"
                        href="{{ config('settings.forum.base_url') }}">社区</a>
 
-                    <a class="nav-link text-auto"
+                    <a class="nav-link"
                        href="{{ route('contact') }}">联系我们</a>
 
                     @if (Auth::guard('admin')->check())
@@ -69,10 +69,10 @@
                         <li class="nav-item">
 
                             @if(Auth::guard('web')->check())
-                                <a class="nav-link text-auto"
+                                <a class="nav-link"
                                    href="{{ route('admin.users.edit', Auth::guard('web')->id()) }}">回到 {{ Auth::guard('admin')->user()->name }}</a>
                             @else
-                                <a class="nav-link text-auto"
+                                <a class="nav-link"
                                    href="{{ route('admin.index') }}">切换到后台</a>
                             @endif
                         </li>
@@ -81,21 +81,20 @@
 
                     <!-- Authentication Links -->
                     @guest
-                        <li class="nav-item text-auto">
+                        <li class="nav-item">
                             <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                         </li>
 
                     @else
                         <li class="nav-item dropdown">
-                            <a id="navbarDropdown" class="nav-link text-auto dropdown-toggle" href="#" role="button"
+                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 {{ Auth::user()->name }}
                             </a>
 
                             <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                 <a class="dropdown-item" href="{{ route('logout') }}"
-                                   onclick="event.preventDefault();
-                                                     document.getElementById('logout-form').submit();">
+                                   onclick="document.getElementById('logout-form').submit();return false;">
                                     {{ __('Logout') }}
                                 </a>
 

yarn.lock

@@ -49,10 +49,10 @@ bootstrap-icons@^1.10.2:
   resolved "https://registry.npmmirror.com/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz#c587b078ca6743bef4653fe90434b4aebfba53b2"
   integrity sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw==
 
-bootstrap@^5.1.3:
-  version "5.2.3"
-  resolved "https://registry.npmmirror.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
-  integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
+bootstrap@5.3.0-alpha1:
+  version "5.3.0-alpha1"
+  resolved "https://registry.npmmirror.com/bootstrap/-/bootstrap-5.3.0-alpha1.tgz#380629c4367893f02f7879a01ea3ae0f94e2e70e"
+  integrity sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==
 
 braces@~3.0.2:
   version "3.0.2"