src/LoginPage.vue

@@ -2,6 +2,11 @@
 import { ref } from 'vue'
 
 const locale = ref('en')
+const PRO_DESTINATION_URL = '#/pro'
+
+function openProDestination() {
+  window.location.hash = PRO_DESTINATION_URL
+}
 
 const copy = {
   en: {
@@ -56,7 +61,7 @@ const messages = () => copy[locale.value]
       </div>
 
       <div class="login-topbar__actions">
-        <div class="login-topbar__pro">PRO</div>
+        <button class="login-topbar__pro" type="button" @click="openProDestination"><span class="login-topbar__pro-prefix">unlock</span><span class="login-topbar__pro-brand">Simubus PRO</span></button>
         <div class="login-topbar__avatar-wrap">
           <img class="login-topbar__avatar" src="https://www.figma.com/api/mcp/asset/c3351559-af65-4269-917c-810527a4d241" alt="User avatar" />
         </div>

src/SimubusLanding.vue

@@ -1,9 +1,10 @@
-<script setup>
+<script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import lottie from 'lottie-web'
 import { clearSession, loadSession, saveSession } from './services/auth'
 
 const AUTH_MOCK_ENABLED = import.meta.env.VITE_AUTH_MOCK !== 'false'
+const PRO_DESTINATION_URL = '#/pro'
 
 const activeQr = ref(null)
 const previewRefs = ref({})
@@ -99,6 +100,10 @@ const interactiveScenes = computed(() => scenes.filter((scene) => scene.id === '
 const simulationScenes = computed(() => scenes.filter((scene) => scene.id === '工业自锁'))
 const isAuthenticated = computed(() => Boolean(session.value?.token))
 
+function openProDestination() {
+  window.location.hash = PRO_DESTINATION_URL
+}
+
 function setPreviewRef(id, el) {
   if (el) {
     previewRefs.value[id] = el
@@ -315,6 +320,7 @@ const copy = {
     logoutTitle: 'Are you sure you want to log out?',
     logoutBody: 'Do you want to log out of Simubus as 3180349346@qq.com?',
     logoutAction: 'Log Out Of The Account',
+    topbarUnlock: 'unlock',
     cancel: 'Cancel',
     profileName: 'Andy',
     profileEmail: '56998882589@gmail.com',
@@ -324,8 +330,8 @@ const copy = {
   },
   zh: {
     login: '登录',
-    heroTitle: 'Simubus - 电路接线仿真软件',
-    heroSubtitle: '你的虚拟电路实验室。',
+    heroTitle: 'Simubus - 电气接线仿真软件',
+    heroSubtitle: '你的虚拟电气实验室。',
     iosDownload: 'iOS 下载',
     androidDownload: 'Android 下载',
     featureOneTitle: '交互式电路设计体验',
@@ -371,6 +377,7 @@ const copy = {
     logoutTitle: '确定要退出登录吗？',
     logoutBody: '你要退出 3180349346@qq.com 的 Simubus 账号吗？',
     logoutAction: '退出当前账号',
+    topbarUnlock: '解锁',
     cancel: '取消',
     profileName: 'Andy',
     profileEmail: '56998882589@gmail.com',
@@ -399,7 +406,7 @@ const messages = computed(() => copy[currentLocale.value])
 
           <div class="header-actions">
             <template v-if="isAuthenticated">
-              <div class="header-pro-badge">PRO</div>
+              <button class="header-pro-badge" type="button" @click="openProDestination"><span class="header-pro-badge__prefix">{{ messages.topbarUnlock }}</span><span class="header-pro-badge__brand">Simubus PRO</span></button>
               <div class="header-profile-menu" @mouseenter="openProfileMenu" @mouseleave="closeProfileMenu">
                 <button class="header-avatar-button" type="button" @click="openProfileMenu">
                   <img class="header-avatar-image" :src="session?.avatarUrl || 'https://www.figma.com/api/mcp/asset/ad158d05-a000-4d0d-b32d-5e1881f01559'" alt="User avatar" />
@@ -588,7 +595,7 @@ const messages = computed(() => copy[currentLocale.value])
           <h2>{{ messages.quickLinksTitle }}</h2>
           <a>{{ messages.quickLinks[0] }}</a>
           <a>{{ messages.quickLinks[1] }}</a>
-          <a class="active">{{ messages.quickLinks[2] }}</a>
+          <a>{{ messages.quickLinks[2] }}</a>
           <a>{{ messages.quickLinks[3] }}</a>
           <a>{{ messages.quickLinks[4] }}</a>
         </section>
@@ -645,3 +652,5 @@ const messages = computed(() => copy[currentLocale.value])
     </div>
   </div>
 </template>
+
+

src/login-page.css

@@ -39,31 +39,45 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 87px;
+  gap: 4px;
+  min-width: 172px;
   height: 46px;
-  padding: 0 16px;
+  padding: 0 12px;
   border-radius: 44px;
   background: linear-gradient(90deg, #fdeb9f 4.524%, #ffd16b 100%);
   color: #7c5200;
-  font-size: 27px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.login-topbar__pro-prefix {
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-block;
+}
+
+.login-topbar__pro-brand {
+  font-family: 'Momo Trust Sans', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 15px;
   font-style: italic;
   font-weight: 790;
   line-height: 1;
+  display: inline-block;
+  transform: skewX(-12deg);
 }
-
 .login-topbar__avatar-wrap {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   overflow: hidden;
 }
-
 .login-topbar__avatar {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-
 .login-dialog-stage {
   display: flex;
   justify-content: center;
@@ -106,6 +120,8 @@
   color: #222;
   font-size: 24px;
   line-height: 1;
+  display: inline-block;
+  transform: skewX(-12deg);
 }
 
 .login-dialog__brand-block {
@@ -183,7 +199,7 @@
 .login-dialog__panel-copy {
   margin: 8px 0 0;
   color: #85908c;
-  font-size: 18px;
+  font-size: 20px;
   line-height: 1.33;
 }
 
@@ -268,6 +284,23 @@
     gap: 16px;
   }
 
+  .login-topbar__actions {
+    width: 100%;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .login-topbar__pro {
+    min-width: 0;
+    flex: 1 1 auto;
+    gap: 4px;
+  }
+
+  .login-topbar__pro-prefix,
+  .login-topbar__pro-brand {
+    font-size: 13px;
+  }
+
   .login-dialog-stage {
     padding: 24px 16px 48px;
   }
@@ -289,120 +322,6 @@
   .signin-option,
   .login-dialog__ghost-button,
   .login-dialog__profile-email {
-    font-size: 18px;
-  }
-}
-.login-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 119px 20px 40px;
-  background: rgba(245, 245, 245, 0.82);
-}
-
-.login-modal {
-  position: relative;
-  width: min(100%, 502px);
-  min-height: 561px;
-  padding: 97px 40px 40px;
-  overflow: hidden;
-  border-radius: 20px;
-  background: #fff;
-  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
-}
-
-.login-modal__close {
-  position: absolute;
-  top: 20px;
-  right: 40px;
-  width: 28px;
-  height: 28px;
-  color: #222;
-  font-size: 24px;
-  line-height: 1;
-}
-
-.login-modal__brand-block {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 77px;
-  margin-bottom: 8px;
-}
-
-.login-modal__brand-image {
-  width: 71px;
-  height: 70px;
-  object-fit: cover;
-}
-
-.login-modal__brand-group {
-  width: 196px;
-  height: auto;
-  margin-left: -20px;
-}
-
-.login-modal__title {
-  margin: 0;
-  color: #333;
-  text-align: center;
-  font-size: 33px;
-  font-weight: 600;
-  line-height: 1.33;
-}
-
-.login-modal__signin-option {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 17px;
-  width: 100%;
-  height: 66px;
-  margin-top: 20px;
-  border: 1px solid #eff1f3;
-  border-radius: 12px;
-  background: #fff;
-  color: #333;
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.login-modal__signin-icon {
-  width: 35px;
-  height: 35px;
-  object-fit: contain;
-}
-
-.login-modal__legal {
-  margin: 54px 0 0;
-  color: #85908c;
-  text-align: center;
-  font-size: 15px;
-  line-height: 1.33;
-}
-
-.login-modal__legal a {
-  color: #07c585;
-}
-
-@media (max-width: 768px) {
-  .login-modal-backdrop {
-    padding: 64px 16px 24px;
-  }
-
-  .login-modal {
-    min-height: 0;
-    padding: 88px 20px 32px;
-  }
-
-  .login-modal__title {
-    font-size: 28px;
-  }
-
-  .login-modal__signin-option {
-    font-size: 18px;
+    font-size: 20px;
   }
 }

src/main.js

@@ -1,6 +1,8 @@
-import { createApp } from 'vue'
-import App from './SimubusLanding.vue'
+import { createApp } from 'vue'
+import App from './RootApp.vue'
 import './style.css'
 import './login-page.css'
+import './pro-page.css'
 
 createApp(App).mount('#app')
+

src/services/auth.js

@@ -131,6 +131,7 @@ export async function socialLogin(
     userId: loginData.user_id,
     isNewUser: Boolean(loginData.is_new_user),
     provider,
+    if_vip: Boolean(loginData.if_vip ?? loginData.is_vip),
     nickname,
     avatarUrl,
     email,

src/style.css

@@ -1,4 +1,4 @@
-:root {
+:root {
   --green: #07c585;
   --green-soft: #eef8f8;
   --dark: #02150d;
@@ -136,8 +136,8 @@ img {
   align-items: center;
   max-width: 220px;
   min-height: 42px;
-  padding: 0 16px;
-  border-radius: 999px;
+  padding: 0 12px;
+  border-radius: 44px;
   background: #f6f6f6;
   color: #3b3b3b;
   font-size: 14px;
@@ -155,9 +155,10 @@ img {
   min-width: 100px;
   min-height: 42px;
   padding: 0 18px;
-  border-radius: 999px;
+  border-radius: 44px;
   font-size: 16px;
   line-height: 1;
+  display: inline-block;
 }
 
 .login-btn {
@@ -200,8 +201,8 @@ img {
 
 .language-option {
   width: 100%;
-  min-height: 40px;
-  padding: 0 14px;
+  min-height: 36px;
+  padding: 0 12px;
   border-radius: 10px;
   color: #2b2b2b;
   text-align: left;
@@ -420,7 +421,7 @@ img {
 }
 
 .component-row::-webkit-scrollbar-thumb {
-  border-radius: 999px;
+  border-radius: 44px;
   background: rgba(7, 197, 133, 0.22);
 }
 
@@ -599,7 +600,7 @@ img {
 
 .footer-slogan {
   margin: 0;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.35;
 }
 
@@ -616,10 +617,14 @@ img {
   display: block;
   margin: 0;
   color: #d6d6d6;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.5;
 }
 
+.figma-footer a {
+  cursor: pointer;
+}
+
 .quick-links a {
   padding: 7px 0;
 }
@@ -633,7 +638,8 @@ img {
   padding: 2px 0;
 }
 
-.figma-footer .active {
+.figma-footer a:hover,
+.figma-footer a:focus-visible {
   color: var(--green);
 }
 
@@ -641,7 +647,7 @@ img {
   margin: 28px 0 0;
   text-align: center;
   color: #d6d6d6;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.5;
 }
 
@@ -890,7 +896,105 @@ img {
   }
 }
 
-.login-modal--logout {
+.login-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(2, 21, 13, 0.38);
+  backdrop-filter: blur(6px);
+}
+
+.login-modal {
+  position: relative;
+  width: min(100%, 502px);
+  max-height: min(100vh - 48px, 760px);
+  overflow: auto;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
+}
+
+.login-modal__close {
+  position: absolute;
+  top: 20px;
+  right: 40px;
+  width: 28px;
+  height: 28px;
+  color: #222;
+  font-size: 24px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-modal__brand-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 77px;
+  margin-bottom: 8px;
+}
+
+.login-modal__brand-image {
+  width: 71px;
+  height: 70px;
+  object-fit: cover;
+}
+
+.login-modal__brand-group {
+  width: 196px;
+  height: auto;
+  margin-left: -20px;
+}
+
+.login-modal__title {
+  margin: 0;
+  color: #333;
+  text-align: center;
+  font-size: 33px;
+  font-weight: 600;
+  line-height: 1.33;
+}
+
+.login-modal__signin-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 17px;
+  width: 100%;
+  height: 66px;
+  margin-top: 20px;
+  border: 1px solid #eff1f3;
+  border-radius: 12px;
+  background: #fff;
+  color: #333;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.login-modal__signin-icon {
+  width: 35px;
+  height: 35px;
+  object-fit: contain;
+}
+
+.login-modal__legal {
+  margin: 54px 0 0;
+  color: #85908c;
+  text-align: center;
+  font-size: 15px;
+  line-height: 1.33;
+}
+
+.login-modal__legal a,
+.login-modal__footer-links a {
+  color: #07c585;
+}.login-modal--logout {
   width: min(100%, 440px);
   min-height: 414px;
   padding: 80px 40px 40px;
@@ -993,18 +1097,32 @@ img {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 64px;
-  height: 34px;
-  padding: 0 14px;
-  border-radius: 999px;
+  gap: 4px;
+  min-width: 164px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 44px;
   background: linear-gradient(90deg, #fdeb9f 4.524%, #ffd16b 100%);
   color: #7c5200;
-  font-size: 13px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.header-pro-badge__prefix {
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-block;
+}
+.header-pro-badge__brand {
+  font-family: 'Momo Trust Sans', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 15px;
   font-style: italic;
   font-weight: 790;
   line-height: 1;
+  display: inline-block;
 }
-
 .header-avatar-button {
   width: 56px;
   height: 56px;
@@ -1013,20 +1131,22 @@ img {
   overflow: hidden;
   flex: 0 0 auto;
 }
-
 .header-avatar-image {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-
 @media (max-width: 768px) {
   .header-pro-badge {
     min-width: 0;
     height: 32px;
     padding: 0 12px;
-    font-size: 12px;
+  }
+
+  .header-pro-badge__prefix,
+  .header-pro-badge__brand {
+    font-size: 13px;
   }
 
   .header-avatar-button {
@@ -1034,7 +1154,6 @@ img {
     height: 44px;
   }
 }
-
 /* Header override */
 .figma-header {
   position: relative !important;
@@ -1064,16 +1183,34 @@ img {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  min-width: 44px !important;
-  height: 28px !important;
-  padding: 0 10px !important;
-  border-radius: 999px !important;
+  gap: 4px !important;
+  min-width: 164px !important;
+  height: 36px !important;
+  padding: 0 12px !important;
+  border-radius: 44px !important;
   background: linear-gradient(90deg, #fdeb9f 4.524%, #ffd16b 100%) !important;
   color: #7c5200 !important;
-  font-size: 12px !important;
+  line-height: 1 !important;
+  white-space: nowrap !important;
+}
+
+.header-pro-badge__prefix {
+  font-family: 'Microsoft YaHei', Arial, sans-serif !important;
+  font-size: 15px !important;
+  font-style: normal !important;
+  font-weight: 700 !important;
+  line-height: 1 !important;
+  display: inline-block !important;
+}
+
+.header-pro-badge__brand {
+  font-family: 'Momo Trust Sans', 'Microsoft YaHei', Arial, sans-serif !important;
+  font-size: 15px !important;
   font-style: italic !important;
   font-weight: 790 !important;
   line-height: 1 !important;
+  display: inline-block !important;
+  transform: skewX(-12deg) !important;
 }
 
 .header-avatar-button {
@@ -1091,7 +1228,6 @@ img {
   height: 100% !important;
   object-fit: cover !important;
 }
-
 @media (max-width: 768px) {
   .figma-header {
     min-height: 64px !important;
@@ -1113,9 +1249,10 @@ img {
 
 .header-profile-dropdown {
   position: absolute;
-  top: calc(100% + 2px);
+  top: 100%;
   right: 0;
   z-index: 20;
+  padding-top: 8px;
 }
 
 .header-profile-dropdown__card {
@@ -1156,8 +1293,8 @@ img {
 
 .profile-language-option {
   width: 100%;
-  min-height: 40px;
-  padding: 0 14px;
+  min-height: 36px;
+  padding: 0 12px;
   border-radius: 10px;
   color: #2b2b2b;
   text-align: left;
@@ -1208,3 +1345,13 @@ img {
   box-shadow: none;
   transform: none;
 }
+
+
+
+
+
+
+
+
+
+