fred-admin 1.0.0__py3-none-any.whl

fred_admin/demo/modules/admin/frontend/src/hooks/useTheme.ts

@@ -0,0 +1,111 @@
+import { storeToRefs } from "pinia";
+import { Theme } from "./interface";
+import { ElMessage } from "element-plus";
+import { DEFAULT_PRIMARY } from "@/config";
+import { useGlobalStore } from "@/stores/modules/global";
+import { getLightColor, getDarkColor } from "@/utils/color";
+import { menuTheme } from "@/styles/theme/menu";
+import { asideTheme } from "@/styles/theme/aside";
+import { headerTheme } from "@/styles/theme/header";
+
+/**
+ * @description 全局主题 hooks
+ * */
+export const useTheme = () => {
+  const globalStore = useGlobalStore();
+  const { primary, isDark, isGrey, isWeak, layout, asideInverted, headerInverted } = storeToRefs(globalStore);
+
+  // 切换暗黑模式 ==> 同时修改主题颜色、侧边栏、头部颜色
+  const switchDark = () => {
+    const html = document.documentElement as HTMLElement;
+    if (isDark.value) html.setAttribute("class", "dark");
+    else html.setAttribute("class", "");
+    changePrimary(primary.value);
+    setAsideTheme();
+    setHeaderTheme();
+  };
+
+  // 修改主题颜色
+  const changePrimary = (val: string | null) => {
+    if (!val) {
+      val = DEFAULT_PRIMARY;
+      ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
+    }
+    // 计算主题颜色变化
+    document.documentElement.style.setProperty("--el-color-primary", val);
+    document.documentElement.style.setProperty(
+      "--el-color-primary-dark-2",
+      isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`
+    );
+    for (let i = 1; i <= 9; i++) {
+      const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`;
+      document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor);
+    }
+    globalStore.setGlobalState("primary", val);
+  };
+
+  // 灰色和弱色切换
+  const changeGreyOrWeak = (type: Theme.GreyOrWeakType, value: boolean) => {
+    const body = document.body as HTMLElement;
+    if (!value) return body.removeAttribute("style");
+    const styles: Record<Theme.GreyOrWeakType, string> = {
+      grey: "filter: grayscale(1)",
+      weak: "filter: invert(80%)"
+    };
+    body.setAttribute("style", styles[type]);
+    const propName = type === "grey" ? "isWeak" : "isGrey";
+    globalStore.setGlobalState(propName, false);
+  };
+
+  // 设置菜单样式
+  const setMenuTheme = () => {
+    let type: Theme.ThemeType = "light";
+    if (layout.value === "transverse" && headerInverted.value) type = "inverted";
+    if (layout.value !== "transverse" && asideInverted.value) type = "inverted";
+    if (isDark.value) type = "dark";
+    const theme = menuTheme[type!];
+    for (const [key, value] of Object.entries(theme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+  };
+
+  // 设置侧边栏样式
+  const setAsideTheme = () => {
+    let type: Theme.ThemeType = "light";
+    if (asideInverted.value) type = "inverted";
+    if (isDark.value) type = "dark";
+    const theme = asideTheme[type!];
+    for (const [key, value] of Object.entries(theme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+    setMenuTheme();
+  };
+
+  // 设置头部样式
+  const setHeaderTheme = () => {
+    let type: Theme.ThemeType = "light";
+    if (headerInverted.value) type = "inverted";
+    if (isDark.value) type = "dark";
+    const theme = headerTheme[type!];
+    for (const [key, value] of Object.entries(theme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+    setMenuTheme();
+  };
+
+  // init theme
+  const initTheme = () => {
+    switchDark();
+    if (isGrey.value) changeGreyOrWeak("grey", true);
+    if (isWeak.value) changeGreyOrWeak("weak", true);
+  };
+
+  return {
+    initTheme,
+    switchDark,
+    changePrimary,
+    changeGreyOrWeak,
+    setAsideTheme,
+    setHeaderTheme
+  };
+};

fred_admin/demo/modules/admin/frontend/src/hooks/useTime.ts

@@ -0,0 +1,38 @@
+import { ref } from "vue";
+
+/**
+ * @description 获取本地时间
+ */
+export const useTime = () => {
+  const year = ref(0); // 年份
+  const month = ref(0); // 月份
+  const week = ref(""); // 星期几
+  const day = ref(0); // 天数
+  const hour = ref<number | string>(0); // 小时
+  const minute = ref<number | string>(0); // 分钟
+  const second = ref<number | string>(0); // 秒
+  const nowTime = ref<string>(""); // 当前时间
+
+  // 更新时间
+  const updateTime = () => {
+    const date = new Date();
+    year.value = date.getFullYear();
+    month.value = date.getMonth() + 1;
+    week.value = "日一二三四五六".charAt(date.getDay());
+    day.value = date.getDate();
+    hour.value =
+      (date.getHours() + "")?.padStart(2, "0") ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours());
+    minute.value =
+      (date.getMinutes() + "")?.padStart(2, "0") ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes());
+    second.value =
+      (date.getSeconds() + "")?.padStart(2, "0") ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getSeconds());
+    nowTime.value = `${year.value}年${month.value}月${day.value} ${hour.value}:${minute.value}:${second.value}`;
+  };
+
+  updateTime();
+
+  return { year, month, day, hour, minute, second, week, nowTime };
+};

fred_admin/demo/modules/admin/frontend/src/languages/index.ts

@@ -0,0 +1,32 @@
+import { createI18n } from "vue-i18n";
+import { getBrowserLang } from "@/utils";
+import { watch } from "vue";
+import zh from "./modules/zh";
+import en from "./modules/en";
+
+const defaultLocale = localStorage.getItem("locale") || getBrowserLang();
+localStorage.setItem("locale", defaultLocale);
+
+const i18n = createI18n({
+  // Use Composition API, Set to false
+  allowComposition: true,
+  legacy: false,
+  locale: defaultLocale,
+  messages: {
+    zh,
+    en
+  },
+  fallbackLocale: "zh", // 兜底语言
+  silentTranslationWarn: true, // 在生产环境关闭警告
+  silentFallbackWarn: true
+});
+
+// 响应式监听 locale 切换，自动同步 localStorage
+watch(
+  () => i18n.global.locale.value,
+  val => {
+    localStorage.setItem("locale", val);
+  }
+);
+
+export default i18n;