From 351b465d5bcaa865075b8cf96b154ab0bb106e59 Mon Sep 17 00:00:00 2001
From: zzh <1368735060@qq.com>
Date: Fri, 30 Oct 2026 17:07:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=A2=E6=88=B7=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E7=99=BB=E5=BD=95=E5=A3=B3=EF=BC=8C=E5=B9=B6?=
 =?UTF-8?q?=E6=8B=86=E5=88=86=E7=BD=91=E9=A1=B5/=E5=BE=AE=E4=BF=A1?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

登录仅保留账号与微信；注册先选渠道，代理码仅 URL 携带时自动绑定。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/locale/bootstrap-en-US.ts                 |    2 +
 src/locale/bootstrap-zh-CN.ts                 |    2 +
 src/locale/marketing/en-US.ts                 |   22 +-
 src/locale/marketing/zh-CN.ts                 |   21 +-
 .../login/components/pwd-login/index.vue      |   56 +-
 src/views/login/components/wechat-login.vue   |   24 +-
 src/views/login/locale/en-US.ts               |   11 +-
 src/views/login/locale/zh-CN.ts               |   11 +-
 src/views/register/index.vue                  | 1201 ++++++++++++++---
 src/views/register/locale/en-US.ts            |   53 +
 src/views/register/locale/zh-CN.ts            |   51 +
 11 files changed, 1229 insertions(+), 225 deletions(-)
 create mode 100644 src/views/register/locale/en-US.ts
 create mode 100644 src/views/register/locale/zh-CN.ts

diff --git a/src/locale/bootstrap-en-US.ts b/src/locale/bootstrap-en-US.ts
index 09e3981..17b920c 100644
--- a/src/locale/bootstrap-en-US.ts
+++ b/src/locale/bootstrap-en-US.ts
@@ -1,4 +1,5 @@
 import localeLogin from '@/views/login/locale/en-US';
+import localeRegister from '@/views/register/locale/en-US';
 import localeWechat from '@/views/wechat/locale/en-US';
 import localeH5Center from '@/views/h5/customer-center/locale/en-US';
 import localeH5AdminCenter from '@/views/h5/admin-center/locale/en-US';
@@ -13,6 +14,7 @@ export default {
   'app.language': 'Language',
   'navbar.action.locale': 'Switch to English',
   ...localeLogin,
+  ...localeRegister,
   ...localeWechat,
   ...localeH5Track,
   ...localeH5Center,
diff --git a/src/locale/bootstrap-zh-CN.ts b/src/locale/bootstrap-zh-CN.ts
index bdfad40..c12ba39 100644
--- a/src/locale/bootstrap-zh-CN.ts
+++ b/src/locale/bootstrap-zh-CN.ts
@@ -1,4 +1,5 @@
 import localeLogin from '@/views/login/locale/zh-CN';
+import localeRegister from '@/views/register/locale/zh-CN';
 import localeWechat from '@/views/wechat/locale/zh-CN';
 import localeH5Center from '@/views/h5/customer-center/locale/zh-CN';
 import localeH5AdminCenter from '@/views/h5/admin-center/locale/zh-CN';
@@ -13,6 +14,7 @@ export default {
   'app.language': '语言',
   'navbar.action.locale': '切换为中文',
   ...localeLogin,
+  ...localeRegister,
   ...localeWechat,
   ...localeH5Track,
   ...localeH5Center,
diff --git a/src/locale/marketing/en-US.ts b/src/locale/marketing/en-US.ts
index e3248e4..da7c374 100644
--- a/src/locale/marketing/en-US.ts
+++ b/src/locale/marketing/en-US.ts
@@ -463,25 +463,41 @@ export default {
 
   'marketing.register.title': 'Register',
   'marketing.register.subtitle': 'Member pricing and welcome benefits',
+  'marketing.register.brandHint': 'Welcome to IDE customer portal',
+  'marketing.register.brandHint.web': 'Register with email & phone',
+  'marketing.register.brandHint.wechat': 'Register with WeChat',
+  'marketing.register.choose.web': 'Web register',
+  'marketing.register.choose.webDesc': 'Fill in details and open your portal',
+  'marketing.register.choose.wechat': 'WeChat register',
+  'marketing.register.choose.wechatDesc': 'Scan to authorize and finish quickly',
+  'marketing.register.backToChoose': '← Back to options',
+
   'marketing.register.referrerHint': 'Invited by {name} ({code})',
   'marketing.register.invalidRef': 'Invalid invite code — you can still register',
   'marketing.register.referrerLoading': 'Validating invite code…',
   'marketing.register.referrerTimeout':
     'Invite validation timed out. Check your network and refresh; you can still register.',
-  'marketing.register.agentHint': 'Channel partner · {name} ({code})',
+  'marketing.register.referrerBadge': 'Friend invite',
+  'marketing.register.agentHint': '{name} · {code}',
+  'marketing.register.agentBadge': 'Channel partner',
+  'marketing.register.agentFallbackName': 'Partner',
   'marketing.register.agentField': 'Agent code (optional)',
   'marketing.register.agentPlaceholder': 'Enter agent code if you were referred by a partner',
-  'marketing.register.agentLockedHint':
-    'Locked by invite link; you will be bound to this agent after register',
+  'marketing.register.agentLockedHint': 'You will be linked to the partner above after register',
   'marketing.register.agentInvalid': 'Agent code is invalid or disabled',
   'marketing.register.agentValidating': 'Validating agent code…',
   'marketing.register.agentPriorityHint':
     'Agent code filled — channel agent binding takes priority over friend invite',
   'marketing.register.customerName': 'Name',
+  'marketing.register.customerNamePlaceholder': 'Your name',
   'marketing.register.phone': 'Phone',
+  'marketing.register.phonePlaceholder': 'Mobile number',
   'marketing.register.email': 'Email',
+  'marketing.register.emailPlaceholder': 'Email address',
   'marketing.register.password': 'Password',
+  'marketing.register.passwordPlaceholder': '6+ letters and digits',
   'marketing.register.confirmPassword': 'Confirm password',
+  'marketing.register.confirmPasswordPlaceholder': 'Re-enter password',
   'marketing.register.submit': 'Register',
   'marketing.register.submitting': 'Registering…',
   'marketing.register.success': 'Registered — please sign in',
diff --git a/src/locale/marketing/zh-CN.ts b/src/locale/marketing/zh-CN.ts
index 4282519..1736516 100644
--- a/src/locale/marketing/zh-CN.ts
+++ b/src/locale/marketing/zh-CN.ts
@@ -460,22 +460,39 @@ export default {
 
   'marketing.register.title': '客户注册',
   'marketing.register.subtitle': '注册即享会员价与新人福利',
+  'marketing.register.brandHint': '欢迎注册 IDE 客户门户',
+  'marketing.register.brandHint.web': '网页注册 IDE 客户账号',
+  'marketing.register.brandHint.wechat': '微信扫码注册 IDE 客户账号',
+  'marketing.register.choose.web': '网页注册',
+  'marketing.register.choose.webDesc': '填写资料，立即开通客户门户',
+  'marketing.register.choose.wechat': '微信注册',
+  'marketing.register.choose.wechatDesc': '扫码授权，快捷完成注册',
+  'marketing.register.backToChoose': '← 返回选择注册方式',
+
   'marketing.register.referrerHint': '您正通过 {name}（{code}）的邀请注册',
   'marketing.register.invalidRef': '邀请码无效或已失效，您仍可正常注册',
   'marketing.register.referrerLoading': '正在校验邀请码…',
   'marketing.register.referrerTimeout': '邀请码校验超时，请检查网络后刷新；您仍可继续注册',
-  'marketing.register.agentHint': '渠道推荐 · {name}（{code}）',
+  'marketing.register.referrerBadge': '好友邀请',
+  'marketing.register.agentHint': '{name} · {code}',
+  'marketing.register.agentBadge': '渠道推荐',
+  'marketing.register.agentFallbackName': '渠道代理',
   'marketing.register.agentField': '代理编号（选填）',
   'marketing.register.agentPlaceholder': '有渠道推荐人可填写其代理编号',
-  'marketing.register.agentLockedHint': '已由专属链接锁定，注册后自动绑定该代理',
+  'marketing.register.agentLockedHint': '注册完成后将关联上方推荐渠道',
   'marketing.register.agentInvalid': '代理编号无效或已停用',
   'marketing.register.agentValidating': '正在校验代理编号…',
   'marketing.register.agentPriorityHint': '已填写代理编号，将优先绑定渠道代理（不走好友邀请）',
   'marketing.register.customerName': '客户名称',
+  'marketing.register.customerNamePlaceholder': '请输入客户名称',
   'marketing.register.phone': '手机号',
+  'marketing.register.phonePlaceholder': '请输入手机号',
   'marketing.register.email': '邮箱',
+  'marketing.register.emailPlaceholder': '请输入邮箱',
   'marketing.register.password': '密码',
+  'marketing.register.passwordPlaceholder': '6 位以上字母数字组合',
   'marketing.register.confirmPassword': '确认密码',
+  'marketing.register.confirmPasswordPlaceholder': '请再次输入密码',
   'marketing.register.submit': '注册',
   'marketing.register.submitting': '注册中…',
   'marketing.register.success': '注册成功，请登录',
diff --git a/src/views/login/components/pwd-login/index.vue b/src/views/login/components/pwd-login/index.vue
index 3b8026d..3d5bdf1 100644
--- a/src/views/login/components/pwd-login/index.vue
+++ b/src/views/login/components/pwd-login/index.vue
@@ -64,7 +64,10 @@
       </div>
     </form>
 
-    <div v-if="props.loginType === OmsLoginType.Customer" class="wechat-login-entry">
+    <div v-if="props.loginType === OmsLoginType.Customer" class="login-alt-entry">
+      <div class="login-alt-entry__divider">
+        <span>{{ t('login.altEntry.or') }}</span>
+      </div>
       <a-tooltip :content="t('login.switchToWechat')">
         <button
           type="button"
@@ -77,6 +80,10 @@
           <icon-wechat :size="28" />
         </button>
       </a-tooltip>
+      <p class="login-alt-entry__hint">
+        {{ t('login.noAccount') }}
+        <a-link @click="goRegister">{{ t('login.goRegister') }}</a-link>
+      </p>
     </div>
 
     <a-modal
@@ -93,7 +100,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, computed, nextTick, inject, type ShallowRef } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { Message } from '@arco-design/web-vue';
 import { IconWechat } from '@arco-design/web-vue/es/icon';
@@ -123,9 +130,20 @@ const emit = defineEmits<{
   prefetchWechat: [];
 }>();
 
+const route = useRoute();
 const router = useRouter();
 const rbacUserStore = useRbacUserStore();
 
+function goRegister() {
+  const query: Record<string, string> = {};
+  for (const key of ['agent', 'agentCode', 'ref', 'invite', 'advisor', 'redirect'] as const) {
+    const raw = route.query[key];
+    const value = typeof raw === 'string' ? raw.trim() : '';
+    if (value) query[key] = value;
+  }
+  void router.push({ path: '/register', query });
+}
+
 const passwordInputRef = ref<{ focus?: () => void } | null>(null);
 const loading = ref(false);
 const showPassword = ref(false);
@@ -601,12 +619,31 @@ async function handleSubmit() {
   }
 }
 
-.wechat-login-entry {
+.login-alt-entry {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
   margin-top: 18px;
 }
 
+.login-alt-entry__divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  font-size: 12px;
+  color: rgba(100, 116, 139, 0.75);
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: rgba(148, 163, 184, 0.35);
+  }
+}
+
 .wechat-entry-btn {
   display: inline-flex;
   align-items: center;
@@ -638,6 +675,17 @@ async function handleSubmit() {
   }
 }
 
+.login-alt-entry__hint {
+  margin: 0;
+  font-size: 13px;
+  color: #86909c;
+
+  :deep(.arco-link) {
+    color: var(--app-primary-color);
+    font-weight: 600;
+  }
+}
+
 .agreement-content {
   max-height: 55vh;
   overflow-y: auto;
diff --git a/src/views/login/components/wechat-login.vue b/src/views/login/components/wechat-login.vue
index 139d89c..c6c2a30 100644
--- a/src/views/login/components/wechat-login.vue
+++ b/src/views/login/components/wechat-login.vue
@@ -51,7 +51,7 @@
         </div>
       </div>
       <div v-if="!scanned" class="tips" :class="{ 'tips--warn': expired }">
-        {{ expired ? t('login.wechat.expiredTip') : t('login.wechat.tips') }}
+        {{ expired ? t('login.wechat.expiredTip') : tipsText }}
       </div>
       <a-button
         v-if="!scanned"
@@ -64,11 +64,11 @@
         {{ expired ? t('login.wechat.refreshExpired') : t('login.wechat.refresh') }}
       </a-button>
       <div class="account-login-entry">
-        <a-tooltip :content="t('login.switchToAccount')">
+        <a-tooltip :content="backTooltip">
           <button
             type="button"
             class="account-entry-btn"
-            :aria-label="t('login.switchToAccount')"
+            :aria-label="backTooltip"
             @click="emit('switchPwd')"
           >
             <icon-user :size="24" />
@@ -98,6 +98,16 @@ const QR_EXPIRE_MS = 600_000;
 /** 首轮更快感知扫码，后续略放宽 */
 const POLL_INTERVAL_MS = 1800;
 
+const props = withDefaults(
+  defineProps<{
+    /** login：登录页扫码；register：注册页扫码 */
+    intent?: 'login' | 'register';
+  }>(),
+  {
+    intent: 'login',
+  },
+);
+
 const { t } = useI18n();
 const router = useRouter();
 const rbacUserStore = useRbacUserStore();
@@ -107,6 +117,14 @@ const emit = defineEmits<{
   switchPwd: [];
 }>();
 
+const isRegisterIntent = computed(() => props.intent === 'register');
+const tipsText = computed(() =>
+  isRegisterIntent.value ? t('login.wechat.tipsRegister') : t('login.wechat.tips'),
+);
+const backTooltip = computed(() =>
+  isRegisterIntent.value ? t('login.switchToRegisterChoose') : t('login.switchToAccount'),
+);
+
 const qrCodeUrl = ref('');
 const loginUuid = ref('');
 const loadingQr = ref(false);
diff --git a/src/views/login/locale/en-US.ts b/src/views/login/locale/en-US.ts
index 2da6188..d55caac 100644
--- a/src/views/login/locale/en-US.ts
+++ b/src/views/login/locale/en-US.ts
@@ -20,10 +20,17 @@
   'login.form.brandHint.admin': 'Welcome to IDE Operations Console',
   'login.form.brandHint.agent': 'Welcome to IDE Channel Agent Portal',
   'login.brand.suffix.agent': 'Channel Agent',
-  'login.switchToWechat': 'Sign in / register with WeChat',
+  'login.switchToWechat': 'Sign in with WeChat',
   'login.switchToAccount': 'Account and password',
-  'login.wechat.tips': 'Scan with WeChat to sign in / register. QR code valid for 10 minutes.',
+  'login.altEntry.or': 'More options',
+  'login.noAccount': "Don't have an account?",
+  'login.goRegister': 'Register',
+  'login.switchToRegisterChoose': 'Back to registration options',
+
+  'login.wechat.tips': 'Scan with WeChat to sign in. QR code valid for 10 minutes.',
+  'login.wechat.tipsRegister': 'Scan with WeChat to register. QR code valid for 10 minutes.',
   'login.wechat.scanned': 'Scanned. Signing you in…',
+
   'login.wechat.qrValid': 'QR code valid for 10 minutes',
   'login.wechat.scanPending': 'Waiting for scan…',
   'login.wechat.loading': 'Loading QR code…',
diff --git a/src/views/login/locale/zh-CN.ts b/src/views/login/locale/zh-CN.ts
index 816f4cf..4bdebec 100644
--- a/src/views/login/locale/zh-CN.ts
+++ b/src/views/login/locale/zh-CN.ts
@@ -20,10 +20,17 @@
   'login.form.brandHint.admin': '欢迎登录 IDE 运营管理后台',
   'login.form.brandHint.agent': '欢迎登录 IDE 渠道代理门户',
   'login.brand.suffix.agent': '渠道代理',
-  'login.switchToWechat': '微信扫码登录/注册',
+  'login.switchToWechat': '微信扫码登录',
   'login.switchToAccount': '账号密码登录',
-  'login.wechat.tips': '请使用微信扫一扫登录/注册，二维码 10 分钟内有效',
+  'login.altEntry.or': '其他方式',
+  'login.noAccount': '没有账号？',
+  'login.goRegister': '去注册',
+  'login.switchToRegisterChoose': '返回选择注册方式',
+
+  'login.wechat.tips': '请使用微信扫一扫登录，二维码 10 分钟内有效',
+  'login.wechat.tipsRegister': '请使用微信扫一扫完成注册，二维码 10 分钟内有效',
   'login.wechat.scanned': '扫码成功，正在登录…',
+
   'login.wechat.qrValid': '二维码十分钟有效',
   'login.wechat.scanPending': '等待扫码中…',
   'login.wechat.longPress': '微信内请长按二维码识别',
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
index 42b3d38..cdb4c0c 100644
--- a/src/views/register/index.vue
+++ b/src/views/register/index.vue
@@ -1,136 +1,273 @@
 <template>
-  <div class="register-page">
-    <div class="register-card">
-      <div class="register-header">
-        <h1>{{ t('marketing.register.title') }}</h1>
-        <p>{{ t('marketing.register.subtitle') }}</p>
+  <div
+    :class="[
+      'login-container',
+      {
+        'login-container--light': isLightMode,
+      },
+    ]"
+  >
+    <div class="login-split login-split--left" aria-hidden="true" />
+    <div class="login-split login-split--right" aria-hidden="true" />
+
+    <div class="login-pane login-pane--left">
+      <aside class="login-hero-panel">
+        <LoginHero :light="isLightMode" portal="customer" />
+      </aside>
+      <div class="login-characters-panel">
+        <LoginCharacters v-if="showCharacters" />
       </div>
+    </div>
 
-      <a-alert
-        v-if="agentLoading"
-        type="info"
-        :show-icon="true"
-        class="referrer-alert"
+    <div class="login-pane login-pane--right">
+      <div
+        :class="[
+          'login-form',
+          'login-form--ready',
+          { 'login-form--register': step === 'web' },
+        ]"
       >
-        {{ t('marketing.register.agentValidating') }}
-      </a-alert>
-      <a-alert
-        v-else-if="agentValidated === true && effectiveAgentCode"
-        type="success"
-        :show-icon="true"
-        class="referrer-alert"
-      >
-        {{
-          t('marketing.register.agentHint', {
-            name: agentNameMasked || '渠道代理',
-            code: effectiveAgentCode,
-          })
-        }}
-        <template v-if="agentLocked">
-          <div class="agent-lock-tip">{{ t('marketing.register.agentLockedHint') }}</div>
-        </template>
-      </a-alert>
-      <a-alert
-        v-else-if="agentValidated === false && formState.agentCodeInput.trim()"
-        type="warning"
-        :show-icon="true"
-        class="referrer-alert"
-      >
-        {{ t('marketing.register.agentInvalid') }}
-      </a-alert>
+        <div class="login-form-toolbar">
+          <LoginLangToggle />
+          <a-tooltip :content="isLightMode ? t('login.theme.toNight') : t('login.theme.toDay')">
+            <a-button
+              shape="circle"
+              type="text"
+              class="theme-toggle-btn"
+              :aria-label="isLightMode ? t('login.theme.toNight') : t('login.theme.toDay')"
+              @click="toggleAppearance"
+            >
+              <template #icon>
+                <icon-sun-fill v-if="!isLightMode" />
+                <icon-moon-fill v-else />
+              </template>
+            </a-button>
+          </a-tooltip>
+        </div>
 
-      <a-alert
-        v-if="!effectiveAgentCode && referrerLoading"
-        type="info"
-        :show-icon="true"
-        class="referrer-alert"
-      >
-        {{ t('marketing.register.referrerLoading') }}
-      </a-alert>
-      <a-alert
-        v-else-if="!effectiveAgentCode && referrerInfo"
-        type="success"
-        :show-icon="true"
-        class="referrer-alert"
-      >
-        {{
-          t('marketing.register.referrerHint', {
-            name: referrerInfo.referrerName ?? referrerInfo.ReferrerName ?? referrerInfo.customerName,
-            code: referrerInfo.inviteCode ?? referrerInfo.InviteCode ?? inviteCode,
-          })
-        }}
-      </a-alert>
-      <a-alert
-        v-else-if="!effectiveAgentCode && referrerTimedOut"
-        type="warning"
-        :show-icon="true"
-        class="referrer-alert"
-      >
-        {{ t('marketing.register.referrerTimeout') }}
-      </a-alert>
-      <a-alert
-        v-else-if="!effectiveAgentCode && inviteCode && referrerValidated === false"
-        type="warning"
-        :show-icon="true"
-        class="referrer-alert"
-      >
-        {{ t('marketing.register.invalidRef') }}
-      </a-alert>
-      <a-alert
-        v-if="effectiveAgentCode && inviteCode"
-        type="info"
-        :show-icon="true"
-        class="referrer-alert"
-      >
-        {{ t('marketing.register.agentPriorityHint') }}
-      </a-alert>
+        <div class="login-content">
+          <div class="nova-register">
+            <a
+              class="nova-register__header"
+              href="/"
+              :title="t('marketing.register.brandHint')"
+              @click.prevent="goOfficialSite"
+            >
+              <LoginLockLogo />
+              <p class="nova-register__brand-hint">{{ brandHintText }}</p>
+            </a>
 
-      <a-form ref="formRef" :model="formState" :rules="formRules" layout="vertical">
-        <a-form-item field="customerName" :label="t('marketing.register.customerName')">
-          <a-input v-model="formState.customerName" allow-clear />
-        </a-form-item>
-        <a-form-item field="phone" :label="t('marketing.register.phone')">
-          <a-input v-model="formState.phone" allow-clear />
-        </a-form-item>
-        <a-form-item field="email" :label="t('marketing.register.email')">
-          <a-input v-model="formState.email" allow-clear />
-        </a-form-item>
-        <a-form-item field="password" :label="t('marketing.register.password')">
-          <a-input-password v-model="formState.password" allow-clear />
-        </a-form-item>
-        <a-form-item field="confirmPassword" :label="t('marketing.register.confirmPassword')">
-          <a-input-password v-model="formState.confirmPassword" allow-clear />
-        </a-form-item>
-        <a-form-item field="agentCodeInput" :label="t('marketing.register.agentField')">
-          <a-input
-            v-model="formState.agentCodeInput"
-            allow-clear
-            :disabled="agentLocked"
-            :placeholder="t('marketing.register.agentPlaceholder')"
-            @blur="onAgentInputBlur"
-            @clear="onAgentInputClear"
-          />
-        </a-form-item>
+            <!-- 步骤 1：选择注册方式 -->
+            <template v-if="step === 'choose'">
+              <div class="nova-register__choose">
+                <button type="button" class="nova-register__choose-card" @click="selectWebRegister">
+                  <span class="nova-register__choose-icon nova-register__choose-icon--web">
+                    <icon-computer :size="22" />
+                  </span>
+                  <span class="nova-register__choose-title">{{ t('marketing.register.choose.web') }}</span>
+                  <span class="nova-register__choose-desc">{{ t('marketing.register.choose.webDesc') }}</span>
+                </button>
+                <button type="button" class="nova-register__choose-card" @click="selectWechatRegister">
+                  <span class="nova-register__choose-icon nova-register__choose-icon--wechat">
+                    <icon-wechat :size="22" />
+                  </span>
+                  <span class="nova-register__choose-title">{{ t('marketing.register.choose.wechat') }}</span>
+                  <span class="nova-register__choose-desc">{{ t('marketing.register.choose.wechatDesc') }}</span>
+                </button>
+              </div>
+              <p class="nova-register__footer">
+                {{ t('marketing.register.hasAccount') }}
+                <a-link @click="goLogin">{{ t('marketing.register.goLogin') }}</a-link>
+              </p>
+            </template>
 
-        <a-button type="primary" long :loading="submitting" @click="handleSubmit">
-          {{ submitting ? t('marketing.register.submitting') : t('marketing.register.submit') }}
-        </a-button>
-      </a-form>
+            <!-- 步骤 2a：网页注册 -->
+            <template v-else-if="step === 'web'">
+              <button type="button" class="nova-register__back" @click="backToChoose">
+                {{ t('marketing.register.backToChoose') }}
+              </button>
 
-      <p class="register-footer">
-        {{ t('marketing.register.hasAccount') }}
-        <a-link @click="goLogin">{{ t('marketing.register.goLogin') }}</a-link>
-      </p>
+              <a-alert
+                v-if="agentValidated === false && formState.agentCodeInput.trim()"
+                type="warning"
+                :show-icon="true"
+                class="nova-register__alert"
+              >
+                {{ t('marketing.register.agentInvalid') }}
+              </a-alert>
+              <a-alert
+                v-if="effectiveAgentCode && inviteCode"
+                type="info"
+                :show-icon="true"
+                class="nova-register__alert"
+              >
+                {{ t('marketing.register.agentPriorityHint') }}
+              </a-alert>
+
+              <form class="nova-register__form" autocomplete="off" @submit.prevent="handleSubmit">
+                <div class="nova-register__row">
+                  <div class="nova-register__input-group">
+                    <div class="nova-register__field-label">{{ t('marketing.register.customerName') }}</div>
+                    <a-input
+                      v-model="formState.customerName"
+                      size="large"
+                      allow-clear
+                      class="nova-register__arco-input"
+                      :placeholder="t('marketing.register.customerNamePlaceholder')"
+                      @press-enter="focusNext('phone')"
+                    />
+                    <div v-if="fieldErrors.customerName" class="nova-register__field-error">
+                      {{ fieldErrors.customerName }}
+                    </div>
+                  </div>
+                  <div class="nova-register__input-group">
+                    <div class="nova-register__field-label">{{ t('marketing.register.phone') }}</div>
+                    <a-input
+                      ref="phoneInputRef"
+                      v-model="formState.phone"
+                      size="large"
+                      allow-clear
+                      class="nova-register__arco-input"
+                      :placeholder="t('marketing.register.phonePlaceholder')"
+                      autocomplete="tel"
+                      @press-enter="focusNext('email')"
+                    />
+                    <div v-if="fieldErrors.phone" class="nova-register__field-error">
+                      {{ fieldErrors.phone }}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="nova-register__input-group">
+                  <div class="nova-register__field-label">{{ t('marketing.register.email') }}</div>
+                  <a-input
+                    ref="emailInputRef"
+                    v-model="formState.email"
+                    size="large"
+                    allow-clear
+                    class="nova-register__arco-input"
+                    :placeholder="t('marketing.register.emailPlaceholder')"
+                    autocomplete="email"
+                    @press-enter="focusNext('password')"
+                  />
+                  <div v-if="fieldErrors.email" class="nova-register__field-error">
+                    {{ fieldErrors.email }}
+                  </div>
+                </div>
+
+                <div class="nova-register__row">
+                  <div class="nova-register__input-group">
+                    <div class="nova-register__field-label">{{ t('marketing.register.password') }}</div>
+                    <a-input-password
+                      ref="passwordInputRef"
+                      v-model="formState.password"
+                      size="large"
+                      allow-clear
+                      class="nova-register__arco-input"
+                      :placeholder="t('marketing.register.passwordPlaceholder')"
+                      autocomplete="new-password"
+                      @press-enter="focusNext('confirmPassword')"
+                    />
+                    <div v-if="fieldErrors.password" class="nova-register__field-error">
+                      {{ fieldErrors.password }}
+                    </div>
+                  </div>
+                  <div class="nova-register__input-group">
+                    <div class="nova-register__field-label">{{ t('marketing.register.confirmPassword') }}</div>
+                    <a-input-password
+                      ref="confirmPasswordInputRef"
+                      v-model="formState.confirmPassword"
+                      size="large"
+                      allow-clear
+                      class="nova-register__arco-input"
+                      :placeholder="t('marketing.register.confirmPasswordPlaceholder')"
+                      autocomplete="new-password"
+                      @press-enter="handleSubmit"
+                    />
+                    <div v-if="fieldErrors.confirmPassword" class="nova-register__field-error">
+                      {{ fieldErrors.confirmPassword }}
+                    </div>
+                  </div>
+                </div>
+
+                <div v-if="!agentLocked" class="nova-register__input-group">
+                  <div class="nova-register__field-label">{{ t('marketing.register.agentField') }}</div>
+                  <a-input
+                    v-model="formState.agentCodeInput"
+                    size="large"
+                    allow-clear
+                    class="nova-register__arco-input"
+                    :placeholder="t('marketing.register.agentPlaceholder')"
+                    @blur="onAgentInputBlur"
+                    @clear="onAgentInputClear"
+                  />
+                </div>
+
+                <div v-if="submitError" class="nova-register__error-box">{{ submitError }}</div>
+
+                <div
+                  v-if="agentLoading || agentBanner || referrerBanner"
+                  class="nova-register__invite"
+                  :class="inviteBannerClass"
+                >
+                  <template v-if="agentLoading">
+                    <span class="nova-register__invite-dot" />
+                    {{ t('marketing.register.agentValidating') }}
+                  </template>
+                  <template v-else-if="agentBanner">
+                    <span class="nova-register__invite-label">{{ t('marketing.register.agentBadge') }}</span>
+                    <span class="nova-register__invite-text">
+                      {{
+                        t('marketing.register.agentHint', {
+                          name: agentNameMasked || t('marketing.register.agentFallbackName'),
+                          code: effectiveAgentCode,
+                        })
+                      }}
+                    </span>
+                  </template>
+                  <template v-else-if="referrerBanner">
+                    <span class="nova-register__invite-label">{{ t('marketing.register.referrerBadge') }}</span>
+                    <span class="nova-register__invite-text">{{ referrerBanner.text }}</span>
+                  </template>
+                </div>
+
+                <button type="submit" class="nova-register__submit" :disabled="submitting">
+                  {{ submitting ? t('marketing.register.submitting') : t('marketing.register.submit') }}
+                </button>
+              </form>
+
+              <p class="nova-register__footer">
+                {{ t('marketing.register.hasAccount') }}
+                <a-link @click="goLogin">{{ t('marketing.register.goLogin') }}</a-link>
+              </p>
+            </template>
+
+            <!-- 步骤 2b：微信注册 -->
+            <template v-else-if="step === 'wechat'">
+              <WechatLogin intent="register" @switch-pwd="backToChoose" />
+              <p class="nova-register__footer">
+                {{ t('marketing.register.hasAccount') }}
+                <a-link @click="goLogin">{{ t('marketing.register.goLogin') }}</a-link>
+              </p>
+            </template>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Message } from '@arco-design/web-vue'
-import type { FieldRule, FormInstance } from '@arco-design/web-vue'
+import {
+  IconComputer,
+  IconMoonFill,
+  IconSunFill,
+  IconWechat,
+} from '@arco-design/web-vue/es/icon'
 import { CustomerService } from '@/api/customer'
 import { validateInviteCode } from '@/api/marketing/portal'
 import { validateAgentCode } from '@/api/agent'
@@ -142,49 +279,94 @@ import {
 } from '@/utils/advisorInviteStorage'
 import {
   clearStashedAgentInvite,
-  resolveAgentInvite,
   stashAgentInvite,
 } from '@/utils/agentInviteStorage'
 import { stashInviteRef } from '@/utils/inviteRefStorage'
 import { isTimeoutError, withTimeout } from '@/utils/withTimeout'
-import { preferH5Portal } from '@/utils/device'
+import { isWeChatBrowser, preferH5Portal } from '@/utils/device'
 import { isAdminH5Path } from '@/utils/login-portal'
+import LoginHero from '@/views/login/components/LoginHero.vue'
+import LoginLangToggle from '@/views/login/components/LoginLangToggle.vue'
+import LoginLockLogo from '@/views/login/components/LoginLockLogo.vue'
+
+const LoginCharacters = defineAsyncComponent(
+  () => import('@/views/login/components/LoginCharacters.vue'),
+)
+const WechatLogin = defineAsyncComponent(
+  () => import('@/views/login/components/wechat-login.vue'),
+)
+
+type RegisterStep = 'choose' | 'web' | 'wechat'
 
 defineOptions({ name: 'CustomerRegister' })
 
 const REFERRER_TIMEOUT_MS = 15000
 const AGENT_TIMEOUT_MS = 15000
+const LOGIN_APPEARANCE_KEY = 'login-appearance'
+const LOGIN_PAGE_SCROLL_LOCK_CLASS = 'login-page-no-scroll'
 
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 
-function resolvePostRegisterLogin() {
-  const redirect = typeof route.query.redirect === 'string' ? route.query.redirect.trim() : ''
-  const wantH5 =
-    preferH5Portal() ||
-    (redirect.startsWith('/h5') && !isAdminH5Path(redirect))
-  if (wantH5) {
-    return {
-      path: '/h5/login',
-      query: redirect ? { redirect } : undefined,
-    }
-  }
-  return {
-    name: 'login' as const,
-    query: redirect
-      ? { redirect }
-      : inviteCode.value
-        ? {}
-        : undefined,
-  }
-}
-
-const formRef = ref<FormInstance>()
+const showCharacters = ref(false)
+const step = ref<RegisterStep>(parseStepFromQuery(route.query.mode))
 const submitting = ref(false)
+const submitError = ref('')
 const inviteCode = ref('')
 const advisorCode = ref('')
 const agentLocked = ref(false)
+
+function parseStepFromQuery(mode: unknown): RegisterStep {
+  const value = typeof mode === 'string' ? mode.trim().toLowerCase() : ''
+  if (value === 'web' || value === 'form') return 'web'
+  if (value === 'wechat' || value === 'wx') return 'wechat'
+  return 'choose'
+}
+
+const brandHintText = computed(() => {
+  if (step.value === 'web') return t('marketing.register.brandHint.web')
+  if (step.value === 'wechat') return t('marketing.register.brandHint.wechat')
+  return t('marketing.register.brandHint')
+})
+
+function attributionQuery(): Record<string, string> {
+  const query: Record<string, string> = {}
+  for (const key of ['agent', 'agentCode', 'ref', 'invite', 'advisor', 'redirect'] as const) {
+    const raw = route.query[key]
+    const value = typeof raw === 'string' ? raw.trim() : ''
+    if (value) query[key] = value
+  }
+  return query
+}
+
+function syncStepQuery(next: RegisterStep) {
+  const query = attributionQuery()
+  if (next === 'web' || next === 'wechat') {
+    query.mode = next
+  }
+  void router.replace({ path: '/register', query })
+}
+
+function backToChoose() {
+  step.value = 'choose'
+  syncStepQuery('choose')
+}
+
+function selectWebRegister() {
+  step.value = 'web'
+  syncStepQuery('web')
+}
+
+function selectWechatRegister() {
+  // 手机 / 微信内走 H5 微信注册，PC 同壳扫码
+  if (preferH5Portal() || isWeChatBrowser()) {
+    void router.push({ path: '/wechat/register', query: attributionQuery() })
+    return
+  }
+  step.value = 'wechat'
+  syncStepQuery('wechat')
+}
 const agentValidated = ref<boolean | null>(null)
 const agentNameMasked = ref('')
 const agentLoading = ref(false)
@@ -193,6 +375,11 @@ const referrerValidated = ref<boolean | null>(null)
 const referrerLoading = ref(false)
 const referrerTimedOut = ref(false)
 
+const phoneInputRef = ref<{ focus?: () => void } | null>(null)
+const emailInputRef = ref<{ focus?: () => void } | null>(null)
+const passwordInputRef = ref<{ focus?: () => void } | null>(null)
+const confirmPasswordInputRef = ref<{ focus?: () => void } | null>(null)
+
 const formState = reactive({
   customerName: '',
   phone: '',
@@ -202,35 +389,140 @@ const formState = reactive({
   agentCodeInput: '',
 })
 
+const fieldErrors = reactive({
+  customerName: '',
+  phone: '',
+  email: '',
+  password: '',
+  confirmPassword: '',
+})
+
 const effectiveAgentCode = computed(() =>
   agentValidated.value === true ? formState.agentCodeInput.trim() : '',
 )
 
-const formRules: Record<string, FieldRule[]> = {
-  customerName: [{ required: true, message: t('marketing.register.customerNameRequired') }],
-  phone: [{ required: true, message: t('marketing.register.phoneRequired') }],
-  email: [
-    { required: true, message: t('marketing.register.emailRequired') },
-    { type: 'email', message: t('marketing.register.emailInvalid') },
-  ],
-  password: [
-    { required: true, message: t('marketing.register.passwordRequired') },
-    {
-      validator: (_r, v, cb) => {
-        if (!isLetterAndDigitPassword(v)) cb(t('marketing.register.passwordInvalid'))
-        else cb()
-      },
-    },
-  ],
-  confirmPassword: [
-    { required: true, message: t('marketing.register.confirmPasswordRequired') },
-    {
-      validator: (_r, v, cb) => {
-        if (v !== formState.password) cb(t('profile.passwordMismatch'))
-        else cb()
-      },
-    },
-  ],
+const agentBanner = computed(
+  () => agentValidated.value === true && !!effectiveAgentCode.value,
+)
+
+const referrerBanner = computed(() => {
+  if (effectiveAgentCode.value) return null
+  if (referrerLoading.value) {
+    return { kind: 'loading' as const, text: t('marketing.register.referrerLoading') }
+  }
+  if (referrerInfo.value) {
+    const name =
+      (referrerInfo.value.referrerName as string | undefined) ??
+      (referrerInfo.value.ReferrerName as string | undefined) ??
+      (referrerInfo.value.customerName as string | undefined) ??
+      ''
+    const code =
+      (referrerInfo.value.inviteCode as string | undefined) ??
+      (referrerInfo.value.InviteCode as string | undefined) ??
+      inviteCode.value
+    return {
+      kind: 'ok' as const,
+      text: t('marketing.register.referrerHint', { name, code }),
+    }
+  }
+  if (referrerTimedOut.value) {
+    return { kind: 'warn' as const, text: t('marketing.register.referrerTimeout') }
+  }
+  if (inviteCode.value && referrerValidated.value === false) {
+    return { kind: 'warn' as const, text: t('marketing.register.invalidRef') }
+  }
+  return null
+})
+
+const inviteBannerClass = computed(() => {
+  if (agentLoading.value || referrerBanner.value?.kind === 'loading') {
+    return 'nova-register__invite--info'
+  }
+  if (agentBanner.value || referrerBanner.value?.kind === 'ok') {
+    return 'nova-register__invite--ok'
+  }
+  if (referrerBanner.value?.kind === 'warn') {
+    return 'nova-register__invite--warn'
+  }
+  return ''
+})
+
+function readStoredAppearance(): boolean {
+  try {
+    return localStorage.getItem(LOGIN_APPEARANCE_KEY) === 'light'
+  } catch {
+    return false
+  }
+}
+
+const isLightMode = ref(readStoredAppearance())
+
+function toggleAppearance() {
+  isLightMode.value = !isLightMode.value
+  try {
+    localStorage.setItem(LOGIN_APPEARANCE_KEY, isLightMode.value ? 'light' : 'dark')
+  } catch {
+    /* ignore */
+  }
+}
+
+function goOfficialSite() {
+  window.location.href = '/'
+}
+
+function resolvePostRegisterLogin() {
+  const redirect = typeof route.query.redirect === 'string' ? route.query.redirect.trim() : ''
+  const wantH5 =
+    preferH5Portal() || (redirect.startsWith('/h5') && !isAdminH5Path(redirect))
+  if (wantH5) {
+    return {
+      path: '/h5/login',
+      query: redirect ? { redirect } : undefined,
+    }
+  }
+  return {
+    name: 'login' as const,
+    query: redirect ? { redirect } : inviteCode.value ? {} : undefined,
+  }
+}
+
+function focusNext(field: 'phone' | 'email' | 'password' | 'confirmPassword') {
+  const map = {
+    phone: phoneInputRef,
+    email: emailInputRef,
+    password: passwordInputRef,
+    confirmPassword: confirmPasswordInputRef,
+  }
+  map[field].value?.focus?.()
+}
+
+function validateForm(): boolean {
+  fieldErrors.customerName = formState.customerName.trim()
+    ? ''
+    : t('marketing.register.customerNameRequired')
+  fieldErrors.phone = formState.phone.trim() ? '' : t('marketing.register.phoneRequired')
+  if (!formState.email.trim()) {
+    fieldErrors.email = t('marketing.register.emailRequired')
+  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formState.email.trim())) {
+    fieldErrors.email = t('marketing.register.emailInvalid')
+  } else {
+    fieldErrors.email = ''
+  }
+  if (!formState.password) {
+    fieldErrors.password = t('marketing.register.passwordRequired')
+  } else if (!isLetterAndDigitPassword(formState.password)) {
+    fieldErrors.password = t('marketing.register.passwordInvalid')
+  } else {
+    fieldErrors.password = ''
+  }
+  if (!formState.confirmPassword) {
+    fieldErrors.confirmPassword = t('marketing.register.confirmPasswordRequired')
+  } else if (formState.confirmPassword !== formState.password) {
+    fieldErrors.confirmPassword = t('profile.passwordMismatch')
+  } else {
+    fieldErrors.confirmPassword = ''
+  }
+  return !Object.values(fieldErrors).some(Boolean)
 }
 
 async function validateAgent(code: string, locked: boolean) {
@@ -304,7 +596,10 @@ async function loadReferrer(code: string) {
     referrerInfo.value = {
       ...data,
       referrerName:
-        data.inviterNameMasked ?? data.InviterNameMasked ?? data.inviterCustomerCode ?? data.InviterCustomerCode,
+        data.inviterNameMasked ??
+        data.InviterNameMasked ??
+        data.inviterCustomerCode ??
+        data.InviterCustomerCode,
       InviteCode: data.inviterCustomerCode ?? data.InviterCustomerCode ?? code,
       inviteCode: data.inviterCustomerCode ?? data.InviterCustomerCode ?? code,
     }
@@ -323,11 +618,8 @@ async function loadReferrer(code: string) {
 }
 
 async function handleSubmit() {
-  try {
-    await formRef.value?.validate()
-  } catch {
-    return
-  }
+  submitError.value = ''
+  if (!validateForm()) return
 
   const typedAgent = formState.agentCodeInput.trim()
   if (typedAgent && agentValidated.value !== true) {
@@ -359,7 +651,7 @@ async function handleSubmit() {
     Message.success(t('marketing.register.success'))
     router.replace(resolvePostRegisterLogin())
   } catch (e: any) {
-    Message.error(e?.message || t('marketing.register.failed'))
+    submitError.value = e?.message || t('marketing.register.failed')
   } finally {
     submitting.value = false
   }
@@ -370,74 +662,565 @@ function goLogin() {
 }
 
 onMounted(() => {
-  const agent = resolveAgentInvite(route.query as Record<string, unknown>)
-  if (agent.code) {
-    formState.agentCodeInput = agent.code
-    agentLocked.value = agent.locked
-    void validateAgent(agent.code, agent.locked)
+  document.documentElement.classList.add(LOGIN_PAGE_SCROLL_LOCK_CLASS)
+
+  // 深链 mode=wechat 且在手机/微信内：转 H5 微信注册
+  if (step.value === 'wechat' && (preferH5Portal() || isWeChatBrowser())) {
+    void router.replace({ path: '/wechat/register', query: attributionQuery() })
+    return
   }
 
-  const ref = String(route.query.ref ?? route.query.invite ?? '').trim()
-  // 有代理码时不校验 C2C（与后端互斥一致）；手填校验成功后也会优先 agent
-  if (ref && !agent.code) void loadReferrer(ref)
+  // 仅 URL 带 agent 才自动绑定；裸 /register 不读本地暂存，避免误绑
+  const agentFromQuery = String(
+    route.query.agent ?? route.query.agentCode ?? '',
+  ).trim()
+  if (agentFromQuery) {
+    formState.agentCodeInput = agentFromQuery
+    agentLocked.value = true
+    stashAgentInvite(agentFromQuery, true)
+    void validateAgent(agentFromQuery, true)
+  }
+
+  const refCode = String(route.query.ref ?? route.query.invite ?? '').trim()
+  if (refCode && !agentFromQuery) void loadReferrer(refCode)
 
   const advisor = resolveAdvisorInvite(route.query as Record<string, unknown>)
   if (advisor) {
     advisorCode.value = advisor
     stashAdvisorInvite(advisor)
   }
+
+  const idle = window.requestIdleCallback
+    ? (cb: () => void, timeout = 1200) => window.requestIdleCallback(cb, { timeout })
+    : (cb: () => void, timeout = 1200) => window.setTimeout(cb, Math.min(timeout, 400))
+  idle(() => {
+    showCharacters.value = true
+  }, 1600)
+})
+
+onBeforeUnmount(() => {
+  document.documentElement.classList.remove(LOGIN_PAGE_SCROLL_LOCK_CLASS)
 })
 </script>
 
-<style scoped lang="less">
-.register-page {
-  min-height: 100vh;
+<style lang="less" scoped>
+.login-container {
+  --login-split-top: 62%;
+  --login-split-bottom: 38%;
+  --login-left-bg: #142637;
+  --login-right-bg: var(--app-page-bg, #f0f3f4);
+
+  box-sizing: border-box;
+  height: 100dvh;
+  max-height: 100dvh;
+  min-height: 100dvh;
+  position: relative;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+.login-container--light {
+  --login-left-bg: #e8eef5;
+  --login-right-bg: var(--app-page-bg, #f0f3f4);
+}
+
+.login-split {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.login-split--left {
+  background: var(--login-left-bg);
+  clip-path: polygon(0 0, var(--login-split-top) 0, var(--login-split-bottom) 100%, 0 100%);
+}
+
+.login-split--right {
+  background: var(--login-right-bg);
+  clip-path: polygon(
+    var(--login-split-top) 0,
+    100% 0,
+    100% 100%,
+    var(--login-split-bottom) 100%
+  );
+}
+
+.login-pane {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+
+.login-pane--left {
+  clip-path: polygon(0 0, var(--login-split-top) 0, var(--login-split-bottom) 100%, 0 100%);
+  pointer-events: none;
+}
+
+.login-pane--right {
+  clip-path: polygon(
+    var(--login-split-top) 0,
+    100% 0,
+    100% 100%,
+    var(--login-split-bottom) 100%
+  );
+  pointer-events: none;
+}
+
+.login-pane--right .login-form {
+  position: absolute;
+  top: 50%;
+  left: calc((var(--login-split-top) + var(--login-split-bottom) + 100% + 100%) / 4);
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+}
+
+.login-hero-panel {
+  position: absolute;
+  top: 50%;
+  left: calc((var(--login-split-top) + var(--login-split-bottom)) / 4);
+  transform: translate(-50%, -50%);
+  width: min(920px, calc((var(--login-split-top) + var(--login-split-bottom)) / 2 - 24px));
+  max-width: calc(100% - 32px);
+  pointer-events: auto;
+}
+
+.login-characters-panel {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: auto;
+  z-index: 6;
+  pointer-events: auto;
+  padding: 0 0 16px 8px;
+}
+
+.login-form-toolbar {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  z-index: 2;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background: var(--app-page-bg);
+  gap: 4px;
 }
 
-.register-card {
+.login-form-toolbar :deep(.theme-toggle-btn.arco-btn),
+.login-form-toolbar :deep(.login-lang-toggle) {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  color: rgba(26, 45, 74, 0.72) !important;
+}
+
+.login-form-toolbar :deep(.theme-toggle-btn.arco-btn:hover),
+.login-form-toolbar :deep(.login-lang-toggle:hover) {
+  border: none !important;
+  box-shadow: none !important;
+  background: var(--app-acrylic-hover-bg) !important;
+  color: var(--app-primary-color) !important;
+}
+
+.theme-toggle-btn {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.login-form {
+  --login-card-bg: #ffffff;
+  --login-card-shadow:
+    inset 0 2px 8px rgba(15, 23, 42, 0.07),
+    inset 0 1px 1px rgba(15, 23, 42, 0.04);
+
+  position: relative;
+  z-index: 10;
   width: 100%;
-  max-width: 440px;
-  background: #fff;
-  border-radius: 8px;
-  padding: 32px 28px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+  max-width: 460px;
+  padding: 44px 30px 32px;
+  background: var(--login-card-bg);
+  border: none;
+  border-radius: 20px;
+  box-shadow: var(--login-card-shadow);
+  display: flex;
+  flex-direction: column;
 }
 
-.register-header {
-  margin-bottom: 20px;
+.login-form--register {
+  max-height: min(94dvh, 780px);
+}
+
+.login-content {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  padding-right: 2px;
+}
+
+.nova-register {
+  width: 100%;
+  min-width: 0;
+}
+
+.nova-register__header {
+  display: block;
   text-align: center;
+  margin-bottom: 18px;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
 
-  h1 {
-    margin: 0 0 8px;
-    font-size: 22px;
-  }
+.nova-register__brand-hint {
+  margin: 8px 0 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: rgba(15, 39, 68, 0.55);
+}
 
-  p {
-    margin: 0;
-    font-size: 13px;
-    color: #86909c;
+.nova-register__back {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 0 14px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #86909c;
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: var(--app-primary-color);
   }
 }
 
-.referrer-alert {
-  margin-bottom: 16px;
+.nova-register__choose {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 4px;
 }
 
-.agent-lock-tip {
+.nova-register__choose-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+  padding: 16px 18px;
+  border: none;
+  border-radius: 14px;
+  background: #f0f3f4;
+  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.06);
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    background: color-mix(in srgb, var(--app-primary-color) 8%, #f0f3f4);
+    box-shadow:
+      inset 0 2px 8px rgba(15, 23, 42, 0.06),
+      0 0 0 2px color-mix(in srgb, var(--app-primary-color) 18%, transparent);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.nova-register__choose-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 6px;
+  border-radius: 12px;
+}
+
+.nova-register__choose-icon--web {
+  background: color-mix(in srgb, var(--app-primary-color) 14%, #fff);
+  color: var(--app-primary-color);
+}
+
+.nova-register__choose-icon--wechat {
+  background: color-mix(in srgb, #07c160 16%, #fff);
+  color: #07c160;
+}
+
+.nova-register__choose-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f2744;
+}
+
+.nova-register__choose-desc {
+  font-size: 12px;
+  line-height: 1.4;
+  color: #86909c;
+}
+
+.nova-register__invite {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 4px 0 12px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.45;
+  background: #f0f3f4;
+  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.06);
+}
+
+.nova-register__invite--ok {
+  background: color-mix(in srgb, var(--app-primary-color) 7%, #f0f3f4);
+  border: none;
+  color: #0f2744;
+}
+
+.nova-register__invite--info {
+  background: #f0f3f4;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  color: #64748b;
+}
+
+.nova-register__invite--warn {
+  background: #fff7ed;
+  border: 1px solid #fed7aa;
+  color: #9a3412;
+}
+
+.nova-register__invite-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--app-primary-color);
+}
+
+.nova-register__invite--warn .nova-register__invite-label {
+  color: #c2410c;
+}
+
+.nova-register__invite-text {
+  font-weight: 600;
+}
+
+.nova-register__invite-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: var(--app-primary-color);
+  vertical-align: middle;
+  animation: invite-pulse 1s ease-in-out infinite;
+}
+
+@keyframes invite-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.nova-register__alert {
+  margin-bottom: 12px;
+}
+
+.nova-register__form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+.nova-register__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.nova-register__input-group {
+  margin-bottom: 14px;
+  width: 100%;
+  min-width: 0;
+}
+
+.nova-register__field-label {
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+}
+
+.nova-register__form :deep(.arco-input-wrapper),
+.nova-register__form :deep(.arco-input-password) {
+  border-radius: 12px;
+  background: #f0f3f4;
+  border: none;
+  min-height: 44px;
+  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.08);
+  transition: box-shadow 0.2s ease, background 0.2s ease;
+
+  &:hover {
+    background: #f0f3f4;
+    box-shadow: inset 0 3px 10px rgba(15, 23, 42, 0.1);
+  }
+
+  &.arco-input-wrapper-focus,
+  &.arco-input-focus {
+    background: #f0f3f4;
+    border: none;
+    box-shadow:
+      inset 0 3px 10px rgba(15, 23, 42, 0.1),
+      0 0 0 3px color-mix(in srgb, var(--app-primary-color) 12%, transparent);
+  }
+}
+
+.nova-register__form :deep(input.arco-input):-webkit-autofill,
+.nova-register__form :deep(input.arco-input):-webkit-autofill:hover,
+.nova-register__form :deep(input.arco-input):-webkit-autofill:focus,
+.nova-register__form :deep(input.arco-input):-webkit-autofill:active {
+  -webkit-text-fill-color: #1e293b;
+  caret-color: #1e293b;
+  border: none;
+  -webkit-box-shadow: 0 0 0 1000px #f0f3f4 inset !important;
+  box-shadow: 0 0 0 1000px #f0f3f4 inset !important;
+  transition: background-color 99999s ease-out 0s;
+}
+
+.nova-register__arco-input {
+  width: 100%;
+}
+
+.nova-register__field-error {
   margin-top: 4px;
   font-size: 12px;
-  opacity: 0.85;
+  color: #b91c1c;
 }
 
-.register-footer {
-  margin: 20px 0 0;
+.nova-register__error-box {
+  padding: 11px 14px;
+  font-size: 13px;
+  color: #b91c1c;
+  background: color-mix(in srgb, #fff1f2 72%, var(--app-acrylic-bg));
+  border: 1px solid color-mix(in srgb, #fecdd3 80%, var(--app-acrylic-border));
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+
+.nova-register__submit {
+  width: 100%;
+  height: 48px;
+  margin-top: 2px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 14px;
+  background: var(--app-primary-color);
+  border: 1px solid color-mix(in srgb, var(--app-primary-color) 80%, transparent);
+  color: #fff;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: transform 0.2s, background 0.2s, opacity 0.2s;
+  font-family: inherit;
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    background: var(--app-primary-color-hover);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+    opacity: 0.85;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+  }
+}
+
+.nova-register__footer {
+  margin: 16px 0 0;
   text-align: center;
   font-size: 13px;
   color: #86909c;
+
+  :deep(.arco-link) {
+    color: var(--app-primary-color);
+    font-weight: 600;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .login-characters-panel {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1250px) {
+  .login-container {
+    --login-split-top: 0%;
+    --login-split-bottom: 0%;
+  }
+
+  .login-split--left,
+  .login-pane--left {
+    display: none;
+  }
+
+  .login-pane--right .login-form {
+    position: relative;
+    top: auto;
+    left: auto;
+    transform: none;
+    margin: auto;
+  }
+
+  .login-split--right,
+  .login-pane--right {
+    clip-path: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    overflow-y: auto;
+  }
+
+  .login-form--register {
+    max-height: none;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .login-form {
+    max-width: 97% !important;
+    padding: 36px 18px 24px;
+  }
+
+  .nova-register__row {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
 }
 </style>
diff --git a/src/views/register/locale/en-US.ts b/src/views/register/locale/en-US.ts
new file mode 100644
index 0000000..c0962b4
--- /dev/null
+++ b/src/views/register/locale/en-US.ts
@@ -0,0 +1,53 @@
+export default {
+  'marketing.register.title': 'Register',
+  'marketing.register.subtitle': 'Member pricing and welcome benefits',
+  'marketing.register.brandHint': 'Welcome to IDE customer portal',
+  'marketing.register.brandHint.web': 'Register with email & phone',
+  'marketing.register.brandHint.wechat': 'Register with WeChat',
+  'marketing.register.choose.web': 'Web register',
+  'marketing.register.choose.webDesc': 'Fill in details and open your portal',
+  'marketing.register.choose.wechat': 'WeChat register',
+  'marketing.register.choose.wechatDesc': 'Scan to authorize and finish quickly',
+  'marketing.register.backToChoose': '← Back to options',
+
+  'marketing.register.referrerHint': 'Invited by {name} ({code})',
+  'marketing.register.invalidRef': 'Invalid invite code — you can still register',
+  'marketing.register.referrerLoading': 'Validating invite code…',
+  'marketing.register.referrerTimeout':
+    'Invite validation timed out. Check your network and refresh; you can still register.',
+  'marketing.register.referrerBadge': 'Friend invite',
+  'marketing.register.agentHint': '{name} · {code}',
+  'marketing.register.agentBadge': 'Channel partner',
+  'marketing.register.agentFallbackName': 'Partner',
+  'marketing.register.agentField': 'Agent code (optional)',
+  'marketing.register.agentPlaceholder': 'Enter agent code if you were referred by a partner',
+  'marketing.register.agentLockedHint': 'You will be linked to the partner above after register',
+  'marketing.register.agentInvalid': 'Agent code is invalid or disabled',
+  'marketing.register.agentValidating': 'Validating agent code…',
+  'marketing.register.agentPriorityHint':
+    'Agent code filled — channel agent binding takes priority over friend invite',
+  'marketing.register.customerName': 'Name',
+  'marketing.register.customerNamePlaceholder': 'Your name',
+  'marketing.register.phone': 'Phone',
+  'marketing.register.phonePlaceholder': 'Mobile number',
+  'marketing.register.email': 'Email',
+  'marketing.register.emailPlaceholder': 'Email address',
+  'marketing.register.password': 'Password',
+  'marketing.register.passwordPlaceholder': '6+ letters and digits',
+  'marketing.register.confirmPassword': 'Confirm password',
+  'marketing.register.confirmPasswordPlaceholder': 'Re-enter password',
+  'marketing.register.submit': 'Register',
+  'marketing.register.submitting': 'Registering…',
+  'marketing.register.success': 'Registered — please sign in',
+  'marketing.register.failed': 'Registration failed',
+  'marketing.register.hasAccount': 'Already have an account?',
+  'marketing.register.goLogin': 'Sign in',
+  'marketing.register.customerNameRequired': 'Name is required',
+  'marketing.register.phoneRequired': 'Phone is required',
+  'marketing.register.emailRequired': 'Email is required',
+  'marketing.register.emailInvalid': 'Invalid email',
+  'marketing.register.passwordRequired': 'Password is required',
+  'marketing.register.passwordInvalid': 'Password must be 6+ letters and digits',
+  'marketing.register.confirmPasswordRequired': 'Confirm password',
+  'profile.passwordMismatch': 'Passwords do not match',
+};
diff --git a/src/views/register/locale/zh-CN.ts b/src/views/register/locale/zh-CN.ts
new file mode 100644
index 0000000..f0fe9df
--- /dev/null
+++ b/src/views/register/locale/zh-CN.ts
@@ -0,0 +1,51 @@
+export default {
+  'marketing.register.title': '客户注册',
+  'marketing.register.subtitle': '注册即享会员价与新人福利',
+  'marketing.register.brandHint': '欢迎注册 IDE 客户门户',
+  'marketing.register.brandHint.web': '网页注册 IDE 客户账号',
+  'marketing.register.brandHint.wechat': '微信扫码注册 IDE 客户账号',
+  'marketing.register.choose.web': '网页注册',
+  'marketing.register.choose.webDesc': '填写资料，立即开通客户门户',
+  'marketing.register.choose.wechat': '微信注册',
+  'marketing.register.choose.wechatDesc': '扫码授权，快捷完成注册',
+  'marketing.register.backToChoose': '← 返回选择注册方式',
+
+  'marketing.register.referrerHint': '您正通过 {name}（{code}）的邀请注册',
+  'marketing.register.invalidRef': '邀请码无效或已失效，您仍可正常注册',
+  'marketing.register.referrerLoading': '正在校验邀请码…',
+  'marketing.register.referrerTimeout': '邀请码校验超时，请检查网络后刷新；您仍可继续注册',
+  'marketing.register.referrerBadge': '好友邀请',
+  'marketing.register.agentHint': '{name} · {code}',
+  'marketing.register.agentBadge': '渠道推荐',
+  'marketing.register.agentFallbackName': '渠道代理',
+  'marketing.register.agentField': '代理编号（选填）',
+  'marketing.register.agentPlaceholder': '有渠道推荐人可填写其代理编号',
+  'marketing.register.agentLockedHint': '注册完成后将关联上方推荐渠道',
+  'marketing.register.agentInvalid': '代理编号无效或已停用',
+  'marketing.register.agentValidating': '正在校验代理编号…',
+  'marketing.register.agentPriorityHint': '已填写代理编号，将优先绑定渠道代理（不走好友邀请）',
+  'marketing.register.customerName': '客户名称',
+  'marketing.register.customerNamePlaceholder': '请输入客户名称',
+  'marketing.register.phone': '手机号',
+  'marketing.register.phonePlaceholder': '请输入手机号',
+  'marketing.register.email': '邮箱',
+  'marketing.register.emailPlaceholder': '请输入邮箱',
+  'marketing.register.password': '密码',
+  'marketing.register.passwordPlaceholder': '6 位以上字母数字组合',
+  'marketing.register.confirmPassword': '确认密码',
+  'marketing.register.confirmPasswordPlaceholder': '请再次输入密码',
+  'marketing.register.submit': '注册',
+  'marketing.register.submitting': '注册中…',
+  'marketing.register.success': '注册成功，请登录',
+  'marketing.register.failed': '注册失败',
+  'marketing.register.hasAccount': '已有账号？',
+  'marketing.register.goLogin': '去登录',
+  'marketing.register.customerNameRequired': '请输入客户名称',
+  'marketing.register.phoneRequired': '请输入手机号',
+  'marketing.register.emailRequired': '请输入邮箱',
+  'marketing.register.emailInvalid': '邮箱格式不正确',
+  'marketing.register.passwordRequired': '请输入密码',
+  'marketing.register.passwordInvalid': '密码须为 6 位以上字母数字组合',
+  'marketing.register.confirmPasswordRequired': '请确认密码',
+  'profile.passwordMismatch': '两次密码不一致',
+};