优化backend前端布局

backend/src/utils/theme.js

@@ -0,0 +1,64 @@
+/**
+ * 全站主题模式：跟随系统 / 亮色 / 暗色。
+ *
+ * 顶栏个人中心菜单与门户页共用这一份状态，避免出现两处各自维护
+ * 「是否暗色」而互相覆盖的情况。
+ */
+
+const MODE_KEY = "yz-theme-mode";
+// 兼容旧版本：此前只保存最终的亮/暗结果
+const LEGACY_KEY = "element-plus-theme";
+
+export const THEME_OPTIONS = [
+  { value: "system", label: "跟随系统" },
+  { value: "light", label: "亮色" },
+  { value: "dark", label: "暗色" },
+];
+
+export function getThemeMode() {
+  try {
+    const mode = localStorage.getItem(MODE_KEY);
+    if (["system", "light", "dark"].includes(mode)) return mode;
+    const legacy = localStorage.getItem(LEGACY_KEY);
+    if (legacy === "dark" || legacy === "light") return legacy;
+  } catch (e) {
+    // localStorage 不可用时退化为跟随系统
+  }
+  return "system";
+}
+
+export function isDarkByMode(mode) {
+  if (mode === "dark") return true;
+  if (mode === "light") return false;
+  return (
+    typeof window !== "undefined" &&
+    !!window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+}
+
+/** 应用主题并返回当前是否为暗色 */
+export function applyThemeMode(mode) {
+  const dark = isDarkByMode(mode);
+  document.documentElement.classList.toggle("dark", dark);
+  try {
+    localStorage.setItem(MODE_KEY, mode);
+    localStorage.setItem(LEGACY_KEY, dark ? "dark" : "light");
+  } catch (e) {
+    // 存储失败不影响本次主题生效
+  }
+  return dark;
+}
+
+/** 监听系统配色变化，返回取消监听函数 */
+export function onSystemThemeChange(handler) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {};
+  const query = window.matchMedia("(prefers-color-scheme: dark)");
+  const listener = () => handler(query.matches);
+  if (query.addEventListener) {
+    query.addEventListener("change", listener);
+    return () => query.removeEventListener("change", listener);
+  }
+  query.addListener(listener);
+  return () => query.removeListener(listener);
+}