ini

src/SimubusLanding.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import lottie from 'lottie-web'
 import { clearSession, loadSession, saveSession } from './services/auth'
@@ -12,6 +12,7 @@ const currentLocale = ref('en')
 const languageMenuOpen = ref(false)
 const languageMenuRef = ref(null)
 const profileMenuOpen = ref(false)
+const profileLanguageMenuOpen = ref(false)
 const loginModalOpen = ref(false)
 const logoutModalOpen = ref(false)
 const session = ref(loadSession())
@@ -146,9 +147,14 @@ function toggleLanguageMenu() {
   languageMenuOpen.value = !languageMenuOpen.value
 }
 
+function toggleProfileLanguageMenu() {
+  profileLanguageMenuOpen.value = !profileLanguageMenuOpen.value
+}
+
 function setLocale(locale) {
   currentLocale.value = locale
   languageMenuOpen.value = false
+  profileLanguageMenuOpen.value = false
 }
 
 function openLoginModal() {
@@ -177,6 +183,7 @@ function openProfileMenu() {
 
 function closeProfileMenu() {
   profileMenuOpen.value = false
+  profileLanguageMenuOpen.value = false
 }
 
 function handleDocumentClick(event) {
@@ -222,10 +229,6 @@ function confirmLogout() {
   closeLogoutModal()
 }
 
-function useProfileLanguage() {
-  setLocale('en')
-}
-
 onMounted(() => {
   mountAllAnimations()
   document.addEventListener('click', handleDocumentClick)
@@ -321,8 +324,8 @@ const copy = {
   },
   zh: {
     login: '登录',
-    heroTitle: 'Simubus - 电气接线仿真软件',
-    heroSubtitle: '你的虚拟电气实验室。',
+    heroTitle: 'Simubus - 电路接线仿真软件',
+    heroSubtitle: '你的虚拟电路实验室。',
     iosDownload: 'iOS 下载',
     androidDownload: 'Android 下载',
     featureOneTitle: '交互式电路设计体验',
@@ -347,7 +350,7 @@ const copy = {
       crossPlatform: { title: '跨平台', body: '在桌面、平板和移动设备上无缝运行。你的模拟会跟随你走到哪里。' },
       cloud: { title: '基于云平台', body: '无需安装。随时随地，直接从浏览器访问强大的模拟工具。' },
     },
-    footerSlogan: '你的虚拟电气实验室。',
+    footerSlogan: '你的虚拟电路实验室。',
     quickLinksTitle: '快速链接',
     quickLinks: ['首页', '隐私政策', '使用条款', '订阅条款', '下载 APP'],
     contactTitle: '联系我们',
@@ -412,10 +415,24 @@ const messages = computed(() => copy[currentLocale.value])
                     <p class="login-modal__profile-email">{{ session?.email || messages.profileEmail }}</p>
 
                     <button class="login-modal__ghost-button" type="button" @click="handleProfileLogoutClick">{{ messages.logoutAction }}</button>
-                    <button class="login-modal__ghost-button login-modal__ghost-button--language" type="button" @click="useProfileLanguage">
-                      <span>{{ messages.language }}</span>
-                      <img class="login-modal__chevron" src="https://www.figma.com/api/mcp/asset/3bc941af-ef23-4f72-85ce-604343b147f1" alt="Open language menu" />
-                    </button>
+                    <div class="profile-language-menu">
+                      <button class="login-modal__ghost-button login-modal__ghost-button--language" type="button" @click="toggleProfileLanguageMenu">
+                        <span>{{ messages.language }}</span>
+                        <img class="login-modal__chevron" src="https://www.figma.com/api/mcp/asset/3bc941af-ef23-4f72-85ce-604343b147f1" alt="Open language menu" />
+                      </button>
+                      <div v-if="profileLanguageMenuOpen" class="profile-language-dropdown">
+                        <button
+                          v-for="option in languageOptions"
+                          :key="option.value"
+                          class="profile-language-option"
+                          :class="{ active: currentLocale === option.value }"
+                          type="button"
+                          @click="setLocale(option.value)"
+                        >
+                          {{ option.label }}
+                        </button>
+                      </div>
+                    </div>
 
                     <p class="login-modal__footer-links">
                       <a href="/">{{ messages.footerTerms }}</a>

src/style.css

@@ -1138,3 +1138,73 @@ img {
     padding: 32px 20px 28px;
   }
 }
+
+.profile-language-menu {
+  position: relative;
+}
+
+.profile-language-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  padding: 8px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+.profile-language-option {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: 10px;
+  color: #2b2b2b;
+  text-align: left;
+}
+
+.profile-language-option.active {
+  background: rgba(7, 197, 133, 0.12);
+  color: #097b57;
+  font-weight: 700;
+}
+
+/* Interactive states */
+.login-modal__ghost-button,
+.login-modal__signin-option {
+  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
+}
+
+.login-modal__ghost-button:hover,
+.login-modal__signin-option:hover {
+  background: #f6fbf9;
+  border-color: rgba(7, 197, 133, 0.24);
+  box-shadow: 0 8px 20px rgba(7, 197, 133, 0.12);
+}
+
+.login-modal__ghost-button:active,
+.login-modal__signin-option:active {
+  transform: translateY(1px);
+  background: #eef8f4;
+}
+
+.login-modal__ghost-button:focus-visible,
+.login-modal__signin-option:focus-visible {
+  outline: none;
+  border-color: #07c585;
+  box-shadow: 0 0 0 3px rgba(7, 197, 133, 0.18);
+}
+
+.login-modal__ghost-button--language:hover .login-modal__chevron {
+  transform: translateY(1px);
+}
+
+.login-modal__ghost-button--language .login-modal__chevron {
+  transition: transform 0.18s ease;
+}
+
+.login-modal__ghost-button:disabled,
+.login-modal__signin-option:disabled {
+  box-shadow: none;
+  transform: none;
+}