feat: add switch with zh|en

frontend/src/views/Settings.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="settings-page">
+    <div class="settings-container">
+      <h2>{{ $t('howItWorks.title') }}</h2>
+      <ol>
+        <i18n-t keypath="howItWorks.step1" tag="li">
+          <template #domain>
+            <code>@{{ 'shenjianl.cn' }}</code>
+          </template>
+        </i18n-t>
+        <li>{{ $t('howItWorks.step2') }}</li>
+        <li>{{ $t('howItWorks.step3') }}</li>
+      </ol>
+
+      <div class="language-switcher">
+        <h3>{{ $t('language') }}</h3>
+        <button @click="setLanguage('zh')" :class="{ active: currentLocale === 'zh' }">中文</button>
+        <button @click="setLanguage('en')" :class="{ active: currentLocale === 'en' }">English</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useLanguageStore } from '@/stores/language';
+import { computed } from 'vue';
+
+export default {
+  name: 'Settings',
+  setup() {
+    const languageStore = useLanguageStore();
+
+    const setLanguage = (lang) => {
+      languageStore.setLocale(lang);
+    };
+
+    const currentLocale = computed(() => languageStore.locale);
+
+    return {
+      setLanguage,
+      currentLocale,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.settings-page {
+  padding: 2rem;
+  display: flex;
+  justify-content: center;
+}
+
+.settings-container {
+  width: 100%;
+  max-width: 800px;
+  background-color: var(--light-grey);
+  padding: 2rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--card-shadow);
+}
+
+h2 {
+  color: var(--primary-purple);
+  margin-top: 0;
+}
+
+ol {
+  padding-left: 1.5rem;
+  line-height: 1.8;
+  font-size: 1.05rem;
+  color: var(--dark-grey);
+}
+
+code {
+  background-color: var(--light-purple);
+  color: var(--text-light);
+  padding: 0.3em 0.6em;
+  border-radius: 6px;
+  font-family: monospace;
+  font-weight: 500;
+}
+
+.language-switcher {
+  margin-top: 2rem;
+  border-top: 1px solid var(--medium-grey);
+  padding-top: 1.5rem;
+}
+
+.language-switcher h3 {
+  margin-top: 0;
+  color: var(--dark-grey);
+}
+
+.language-switcher button {
+  margin-right: 1rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--medium-grey);
+  background-color: #ffffff;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.language-switcher button.active {
+  background-color: var(--primary-purple);
+  color: var(--text-light);
+  border-color: var(--primary-purple);
+}
+</style>