ini

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

@@ -4,6 +4,7 @@ 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
@@ -399,7 +404,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">unlock</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" />

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,7 @@
-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,11 @@ 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;
+  transform: skewX(-12deg);
 }
 
 .login-btn {
@@ -200,8 +202,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 +422,7 @@ img {
 }
 
 .component-row::-webkit-scrollbar-thumb {
-  border-radius: 999px;
+  border-radius: 44px;
   background: rgba(7, 197, 133, 0.22);
 }
 
@@ -599,7 +601,7 @@ img {
 
 .footer-slogan {
   margin: 0;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.35;
 }
 
@@ -616,7 +618,7 @@ img {
   display: block;
   margin: 0;
   color: #d6d6d6;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.5;
 }
 
@@ -641,7 +643,7 @@ img {
   margin: 28px 0 0;
   text-align: center;
   color: #d6d6d6;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.5;
 }
 
@@ -993,18 +995,33 @@ 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;
+  transform: skewX(-12deg);
 }
-
 .header-avatar-button {
   width: 56px;
   height: 56px;
@@ -1013,20 +1030,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 +1053,6 @@ img {
     height: 44px;
   }
 }
-
 /* Header override */
 .figma-header {
   position: relative !important;
@@ -1064,16 +1082,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 +1127,6 @@ img {
   height: 100% !important;
   object-fit: cover !important;
 }
-
 @media (max-width: 768px) {
   .figma-header {
     min-height: 64px !important;
@@ -1156,8 +1191,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;