diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 9fdd6e3..0c36b68 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -18,7 +18,7 @@ } h1 { - @apply text-[3em] tracking-[-2px] mb-[30px] text-center; + @apply text-[3em] tracking-[-2px] mb-8 mt-8 text-center; } h2 { diff --git a/app/javascript/application.js b/app/javascript/application.js index 3ef406c..f5f9dc9 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -8,5 +8,6 @@ import "@hotwired/turbo-rails" import "flowbite/dist/flowbite.turbo" -import "./controllers" +// import "./theme_switch" +import "./controllers" diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 9359a66..f5927be 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -3,4 +3,11 @@ // import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading" // eagerLoadControllersFrom("controllers", application) -import { application } from "./application" \ No newline at end of file +import { application } from "./application" +import ThemeController from "./theme_controller" +import ToastController from "./toast_controller" + +import HelloController from "./hello_controller" +application.register("hello", HelloController) +application.register("theme", ThemeController) +application.register("toast", ToastController) diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js new file mode 100644 index 0000000..e7cc67d --- /dev/null +++ b/app/javascript/controllers/theme_controller.js @@ -0,0 +1,24 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="theme" +export default class extends Controller { + static targets = ["toggle"] + + connect() { + this.initTheme() + } + + initTheme() { + const savedTheme = localStorage.getItem('theme') + if(savedTheme) { + document.documentElement.setAttribute('data-theme', savedTheme) + this.toggleTarget.checked = savedTheme === 'dark' + } + } + + toggle(event) { + const newTheme = event.target.checked ? 'dark' : 'light' + document.documentElement.setAttribute('data-theme', newTheme) + localStorage.setItem('theme', newTheme) + } +} diff --git a/app/javascript/controllers/toast_controller.js b/app/javascript/controllers/toast_controller.js new file mode 100644 index 0000000..360aeaa --- /dev/null +++ b/app/javascript/controllers/toast_controller.js @@ -0,0 +1,14 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="toast" +export default class extends Controller { + connect() { + // 3秒后自动隐藏 + setTimeout(() => { + this.element.classList.add('animate-fade-out') + setTimeout(() => { + this.element.remove() + }, 500) + }, 3000) + } +} diff --git a/app/javascript/theme_switch.js b/app/javascript/theme_switch.js new file mode 100644 index 0000000..7531921 --- /dev/null +++ b/app/javascript/theme_switch.js @@ -0,0 +1,22 @@ +// 获取切换按钮 +const themeToggle = document.querySelector('.theme-controller'); + +// 监听变化 +themeToggle.addEventListener('change', (e) => { + // 切换 HTML data-theme 属性 + if(e.target.checked) { + document.documentElement.setAttribute('data-theme', 'dark'); + } else { + document.documentElement.setAttribute('data-theme', 'light'); + } + + // 保存主题设置到 localStorage + localStorage.setItem('theme', e.target.checked ? 'dark' : 'light'); +}); + +// 页面加载时检查之前的主题设置 +const savedTheme = localStorage.getItem('theme'); +if(savedTheme) { + document.documentElement.setAttribute('data-theme', savedTheme); + themeToggle.checked = savedTheme === 'dark'; +} \ No newline at end of file diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb index bd3cc93..4bf79a3 100644 --- a/app/views/layouts/_footer.html.erb +++ b/app/views/layouts/_footer.html.erb @@ -1,4 +1,4 @@ -