feat: 登录提示语根据语言设置&&主题颜色保存

Former-commit-id: d31b3c6adc4e620b4509e46119c43e64b53e48ad

src/components/LangSelect/index.vue

@@ -9,7 +9,7 @@ const { locale } = useI18n();
 function handleLanguageChange(lang: string) {
   locale.value = lang;
   appStore.changeLanguage(lang);
-  if (lang == "en") {
+  if (lang === "en") {
     ElMessage.success("Switch Language Successful!");
   } else {
     ElMessage.success("切换语言成功！");

src/layout/components/Settings/index.vue

@@ -76,14 +76,21 @@ const themeColors = ref<string[]>([
  */
 function changeThemeColor(color: string) {
   document.documentElement.style.setProperty("--el-color-primary", color);
-  // settingsStore.changeSetting({ key: "layout", value: color });
+  settingsStore.changeSetting({ key: "themeColor", value: color });
 }
 
+const currentThemeColor = computed(() => {
+  return settingsStore.themeColor;
+});
 onMounted(() => {
   window.document.body.setAttribute("layout", settingsStore.layout);
   const theme =
     localStorage.getItem("vueuse-color-scheme") || defaultSettings.theme;
   localStorage.setItem("vueuse-color-scheme", theme);
+  document.documentElement.style.setProperty(
+    "--el-color-primary",
+    settingsStore.themeColor
+  );
 });
 </script>
 
@@ -126,10 +133,12 @@ onMounted(() => {
       <li
         v-for="(color, index) in themeColors"
         :key="index"
-        class="inline-block w-[30px] h-[30px] cursor-pointer"
+        class="inline-block w-[30px] h-[30px] cursor-pointer theme-wrap"
         :style="{ background: color }"
         @click="changeThemeColor(color)"
-      ></li>
+      >
+        <i-ep-check v-show="color === currentThemeColor" />
+      </li>
     </ul>
 
     <el-divider>导航设置</el-divider>
@@ -240,5 +249,12 @@ onMounted(() => {
       box-shadow: 0 0 1px #888;
     }
   }
+
+  .theme-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
 }
 </style>

src/layout/components/TagsView/index.vue

@@ -121,7 +121,8 @@ function isFirstView() {
   try {
     return (
       (selectedTag.value as TagView).fullPath === "/dashboard" ||
-      (selectedTag.value as TagView).fullPath === tagsViewStore.visitedViews[1].fullPath
+      (selectedTag.value as TagView).fullPath ===
+        tagsViewStore.visitedViews[1].fullPath
     );
   } catch (err) {
     return false;

src/settings.ts

@@ -40,6 +40,11 @@ interface DefaultSettings {
    * 语言( zh-cn| en)
    */
   language: string;
+
+  /**
+   * 主题颜色
+   */
+  themeColor: string;
 }
 
 const defaultSettings: DefaultSettings = {
@@ -52,6 +57,7 @@ const defaultSettings: DefaultSettings = {
   theme: "light", // 默认暗黑模式
   size: "default",
   language: "zh-cn",
+  themeColor: "#409EFF",
 };
 
 export default defaultSettings;

src/store/modules/settings.ts

@@ -14,7 +14,10 @@ export const useSettingsStore = defineStore("setting", () => {
   );
 
   const layout = useStorage<string>("layout", defaultSettings.layout);
-
+  const themeColor = useStorage<string>(
+    "themeColor",
+    defaultSettings.themeColor
+  );
   // actions
   function changeSetting(param: { key: string; value: any }) {
     const { key, value } = param;
@@ -34,6 +37,9 @@ export const useSettingsStore = defineStore("setting", () => {
       case "layout":
         layout.value = value;
         break;
+      case "themeColor":
+        themeColor.value = value;
+        break;
     }
   }
 
@@ -43,6 +49,7 @@ export const useSettingsStore = defineStore("setting", () => {
     fixedHeader,
     sidebarLogo,
     layout,
+    themeColor,
     changeSetting,
   };
 });

src/views/login/index.vue

@@ -39,7 +39,7 @@
           <el-input
             v-model="loginData.password"
             class="flex-1"
-            placeholder="密码"
+            :placeholder="$t('login.password')"
             :type="passwordVisible === false ? 'password' : 'input'"
             size="large"
             name="password"
@@ -92,18 +92,21 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import router from "@/router";
 import LangSelect from "@/components/LangSelect/index.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 
 // 状态管理依赖
 import { useUserStore } from "@/store/modules/user";
+import { useAppStore } from "@/store/modules/app";
 
 // API依赖
 import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
 import { getCaptchaApi } from "@/api/auth";
 import { LoginData } from "@/api/auth/types";
 
+const appStore = useAppStore();
 const userStore = useUserStore();
 const route = useRoute();
 
@@ -134,11 +137,59 @@ const loginData = ref<LoginData>({
   password: "123456",
 });
 
-const loginRules = {
-  username: [{ required: true, trigger: "blur" }],
-  password: [{ required: true, trigger: "blur", validator: passwordValidator }],
-  verifyCode: [{ required: true, trigger: "blur" }],
-};
+const { t } = useI18n();
+
+const loginRules = computed(() => {
+  const prefix = appStore.language === "en" ? "Please enter " : "请输入";
+  return {
+    username: [
+      {
+        required: true,
+        trigger: "blur",
+        message: `${prefix}${t("login.username")}`,
+      },
+    ],
+    password: [
+      {
+        required: true,
+        trigger: "blur",
+        validator: passwordValidator,
+        message: `${prefix}${t("login.password")}`,
+      },
+    ],
+    verifyCode: [
+      {
+        required: true,
+        trigger: "blur",
+        message: `${prefix}${t("login.verifyCode")}`,
+      },
+    ],
+  };
+});
+// const loginRules = reactive({
+//   username: [
+//     {
+//       required: true,
+//       trigger: "blur",
+//       message: `请输入${t("login.username")}`,
+//     },
+//   ],
+//   password: [
+//     {
+//       required: true,
+//       trigger: "blur",
+//       validator: passwordValidator,
+//       message: `请输入${t("login.password")}`,
+//     },
+//   ],
+//   verifyCode: [
+//     {
+//       required: true,
+//       trigger: "blur",
+//       message: `请输入${t("login.verifyCode")}`,
+//     },
+//   ],
+// });
 
 /**
  * 密码校验器