AI鎬ф牸娴嬭瘯鍒嗘瀽路 MBTI浜烘牸娴嬭瘯路鎬ф牸娴嬭瘎路榫欐収浜?/title> <meta name="description" content="AI鎬ф牸娴嬭瘯宸ュ叿锛屽洖绛旈棶棰楢I鍒嗘瀽浣犵殑鎬ф牸绫诲瀷鍜岀壒寰併€侻BTI浜烘牸鍒嗘瀽锛屾€ф牸浼樺姡鍔胯В璇伙紝榫欐収浜戙€?> <meta name="keywords" content="AI鎬ф牸鍒嗘瀽,鎬ф牸娴嬭瘯,鎬ф牸绫诲瀷,浜烘牸娴嬭瘯,MBTI,鎬ф牸鐗瑰緛,鎬ф牸娴嬭瘎,鎬ф牸娴嬭瘯棰?鍦ㄧ嚎鎬ф牸娴嬭瘯,浜烘牸鍒嗘瀽,鎬ф牸浼樼己鐐?鎬ф牸鑹插僵,涔濆瀷浜烘牸,鍏嶈垂鎬ф牸娴嬭瘯,AI浜烘牸,榫欐収浜?> <meta name="author" content="榫欐収浜戠鎶€"> <meta name="robots" content="index, follow, max-image-preview:large"> <link rel="apple-touch-icon" href="/icon-192.png"> <link rel="manifest" href="/manifest.json"> <link rel="canonical" href="https://榫欐収浜?com/personality.html"> <meta name="baidu-site-verification" content="LHY-PENDING"> <meta name="google-site-verification" content="LHY-PENDING"> <meta name="theme-color" content="#2563EB"> <meta property="og:type" content="website"> <meta property="og:site_name" content="榫欐収浜?> <meta property="og:title" content="AI鎬ф牸鍒嗘瀽路鎬ф牸绫诲瀷娴嬭瘯路榫欐収浜?> <meta property="og:description" content="榫欐収浜慉I鎬ф牸鍒嗘瀽鈥斺€斿熀浜庣瀛﹂棶绛旂殑鎬ф牸绫诲瀷娴嬭瘯锛屾繁鍏ヤ簡瑙ｄ綘鐨勬€ф牸鐗瑰緛鍜岃涓哄€惧悜銆?> <meta property="og:image" content="https://榫欐収浜?com/og-cover.jpg"> <meta property="og:image:width" content="900"> <meta property="og:image:height" content="471"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:image:alt" content="榫欐収浜?AI璇佷欢鐓?鑰佺収鐗囦慨澶?AI娴嬭瘎"> <meta property="og:url" content="https://榫欐収浜?com/personality.html"> <meta property="og:locale" content="zh_CN"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="AI鎬ф牸鍒嗘瀽路鎬ф牸绫诲瀷娴嬭瘯路榫欐収浜?> <meta name="twitter:description" content="榫欐収浜慉I鎬ф牸鍒嗘瀽鈥斺€斿熀浜庣瀛﹂棶绛旂殑鎬ф牸绫诲瀷娴嬭瘯锛屾繁鍏ヤ簡瑙ｄ綘鐨勬€ф牸鐗瑰緛鍜岃涓哄€惧悜銆?> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> <style> html { height: 100%; } body { min-height: 100%; background: #F5F7FA; background-attachment: fixed; } body { font-family: 'PingFang SC', 'Microsoft YaHei', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', emoji, sans-serif; color: #1F2937; margin: 0; padding: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-tap-highlight-color: transparent; } :root { --c-primary: #2563EB; --c-primary-light: #93C5FD; --c-primary-dark: #1D4ED8; --c-gold: #2563EB; --c-gold-light: #DBEAFE; --c-gold-dark: #1D4ED8; --c-bg: #F5F7FA; --c-bg-warm: #F5F7FA; --c-card-bg: #FFFFFF; --c-card-border: #E5E7EB; --c-text-main: #1F2937; --c-text-sub: #6B7280; --c-text-muted: #9CA3AF; --c-btn-grad: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%); --c-btn-gold: #2563EB; --c-btn-pale: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%); --c-btn-pale-soft: #DBEAFE; --c-divider: #E5E7EB; --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --shadow-card: 0 2px 12px rgba(0,0,0,0.06); --shadow-btn: 0 4px 15px rgba(37,99,235,0.2); --max-width: 480px; } .container { position: relative; z-index: 1; padding: 0 20px; } /* Home */ .home-screen { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 60px; animation: fadeInUp 0.6s ease; } .logo-icon { width: 80px; height: 80px; background: var(--c-btn-grad); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 24px; box-shadow: var(--shadow-btn); } .home-title { font-size: 26px; font-weight: 700; color: var(--c-primary-dark); margin-bottom: 8px; letter-spacing: 1px; } .home-subtitle { font-size: 14px; color: var(--c-text-sub); margin-bottom: 36px; line-height: 1.6; } .btn-start { width: 100%; max-width: 320px; padding: 16px 32px; background: var(--c-btn-grad); color: #2563EB; border: none; border-radius: 50px; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-btn); transition: transform 0.2s; font-family: inherit; letter-spacing: 1px; } .btn-start:active { transform: scale(0.97); } .home-counter { margin-top: 24px; font-size: 13px; color: var(--c-text-muted); } .home-features { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .feature-tag { font-size: 12px; color: var(--c-gold-dark); background: #F5F7FA; padding: 6px 14px; border-radius: 20px; } /* Quiz */ .quiz-screen { padding: 40px 20px; animation: fadeInUp 0.4s ease; } .quiz-progress-bar { width: 100%; height: 4px; background: var(--c-divider); border-radius: 2px; margin-bottom: 8px; overflow: hidden; } .quiz-progress-fill { height: 100%; background: var(--c-btn-grad); border-radius: 2px; transition: width 0.4s ease; } .quiz-progress-text { font-size: 12px; color: var(--c-text-muted); margin-bottom: 30px; text-align: right; } .quiz-question { font-size: 20px; font-weight: 600; color: var(--c-text-main); margin-bottom: 28px; line-height: 1.5; } .quiz-option { display: block; width: 100%; padding: 18px 20px; margin-bottom: 12px; background: var(--c-card-bg); border: 2px solid var(--c-card-border); border-radius: var(--radius); font-size: 15px; color: var(--c-text-main); cursor: pointer; text-align: left; transition: all 0.2s; font-family: inherit; } .quiz-option:active { border-color: var(--c-primary); background: var(--c-bg-warm); transform: scale(0.98); } .quiz-option.selected { border-color: var(--c-primary); background: #F5F7FA; } /* Loading */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 20px; animation: fadeInUp 0.4s ease; } .loading-ring { width: 60px; height: 60px; border: 3px solid var(--c-divider); border-top-color: var(--c-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20px; } .loading-text { font-size: 16px; color: var(--c-text-sub); margin-bottom: 8px; } .loading-progress { font-size: 13px; color: var(--c-text-muted); } /* Result */ .result-screen { padding: 30px 20px 100px; animation: fadeInUp 0.5s ease; } .result-type-card { background: var(--c-card-bg); border: 1px solid var(--c-card-border); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; margin-bottom: 16px; box-shadow: var(--shadow-card); } .result-type-label { font-size: 13px; color: var(--c-text-sub); margin-bottom: 8px; } .result-type-code { font-size: 48px; font-weight: 800; background: var(--c-btn-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; } .result-type-name { font-size: 18px; font-weight: 600; color: var(--c-primary-dark); margin-top: 8px; } .result-type-tagline { font-size: 13px; color: var(--c-text-muted); margin-top: 6px; } .result-desc-card { background: var(--c-card-bg); border: 1px solid var(--c-card-border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; font-size: 14px; color: var(--c-text-main); line-height: 1.8; box-shadow: var(--shadow-card); } .result-section-title { font-size: 16px; font-weight: 700; color: var(--c-primary-dark); margin: 20px 0 12px; letter-spacing: 1px; } .trait-card { background: var(--c-card-bg); border: 1px solid var(--c-card-border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 10px; box-shadow: var(--shadow-card); } .blurred-card { filter: blur(3px) saturate(0.5); opacity: 0.6; pointer-events: none; user-select: none; } .trait-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; } .trait-card-name { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trait-card-name { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trait-card-bars { display: flex; gap: 3px; flex-shrink: 0; } .trait-bar { width: 7px; height: 16px; border-radius: 2px; background: #2563EB; } .trait-bar.active { background: var(--c-gold); } .trait-card-detail { font-size: 13px; color: var(--c-text-sub); line-height: 1.7; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--c-divider); } .trait-lock-overlay { text-align: center; padding: 16px 0 4px; background: #F5F7FA; border-radius: 8px; } .result-disclaimer { font-size: 12px; color: var(--c-text-muted); text-align: center; margin: 16px 0; } .unlock-section { text-align: center; margin: 20px 0; } .btn-unlock { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 36px; background: var(--c-btn-pale); color: #2563EB; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: rgba(244,122,139,0.4) 0 4px 15px; transition: transform 0.2s; font-family: inherit; justify-content: center;} .btn-unlock:active { transform: scale(0.97); } .unlock-hint { font-size: 12px; color: var(--c-text-muted); margin-top: 10px; } .result-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; padding-bottom: 20px; } .btn-action { flex: 1; padding: 14px 16px; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; transition: transform 0.2s; font-family: inherit; border: none; } .btn-action.share { background: #F5F7FA; color: var(--c-primary); border: 1.5px solid var(--c-primary); } .btn-action.retest { background: var(--c-btn-pale-soft); color: var(--c-primary-dark); border: 1.5px solid var(--c-btn-pale); } .btn-action:active { transform: scale(0.97); } /* Cross-promo */ .cross-promo { margin-top:24px; padding:16px; background: #F5F7FA; border-radius:12px; border:1px solid rgba(37,99,235,0.15); } .cross-promo-title { font-size: 14px; font-weight: 600; color: var(--c-text-sub); margin-bottom: 12px; text-align: center; } .cross-promo-links { display: flex; flex-direction: column; gap: 8px; } .cross-promo-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--c-bg-warm); border-radius: var(--radius-sm); text-decoration: none; color: var(--c-text-main); font-size: 14px; transition: transform 0.2s; } .cross-promo-link:active { transform: scale(0.97); } .cross-promo-icon { font-size: 20px; } /* Toast */ .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #F5F7FA; color: #2563EB; padding: 14px 24px; border-radius: 10px; font-size: 14px; z-index: 200; animation: fadeIn 0.2s ease; pointer-events: none; } /* Ad Modal */ .ad-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #F5F7FA; z-index: 150; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.25s ease; padding: 20px; } .ad-modal-content { background: #F5F7FA; border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; max-width: 340px; width: 100%; animation: slideUp 0.3s ease; } .ad-modal-icon { font-size: 48px; margin-bottom: 16px; } .ad-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .ad-modal-sub { font-size: 13px; color: var(--c-text-sub); margin-bottom: 20px; line-height: 1.6; } .btn-ad-watch { width: 100%; padding: 14px; background: var(--c-btn-pale); color: #2563EB; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 10px; font-family: inherit; justify-content: center;} .btn-ad-share { width: 100%; padding: 12px; background: none; border: 1.5px solid var(--c-gold); color: var(--c-gold-dark); border-radius: 50px; font-size: 14px; cursor: pointer; font-family: inherit; } .btn-ad-close { background: none; border: none; color: var(--c-text-muted); font-size: 13px; cursor: pointer; margin-top: 8px; font-family: inherit; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } .pulse { animation: pulse 1.5s ease-in-out infinite; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <link rel="stylesheet" href="/js/pricing.css"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "AI鎬ф牸娴嬭瘯鎬庝箞娴嬶紵", "acceptedAnswer": { "@type": "Answer", "text": "鍥炵瓟鍑犻亾鎯呮櫙闂锛孉I浼氭牴鎹綘鐨勫洖绛斿垎鏋愭€ф牸绫诲瀷銆佺壒寰併€佷紭鍔ｅ娍锛岀敓鎴愯缁嗘€ф牸鍒嗘瀽鎶ュ憡銆? } }, { "@type": "Question", "name": "AI鎬ф牸娴嬭瘯鍑嗗悧锛?, "acceptedAnswer": { "@type": "Answer", "text": "AI鎬ф牸娴嬭瘯鍩轰簬蹇冪悊瀛︽ā鍨嬪拰澶ф暟鎹垎鏋愶紝缁撴灉渚涘弬鑰冨拰鑷垜浜嗚В锛屼笉浣滀负涓撲笟蹇冪悊璇勪及銆? } } ] } </script> <meta property="article:tag" content="AI鎬ф牸鍒嗘瀽"> <meta property="article:tag" content="鎬ф牸娴嬭瘯"> <meta property="article:tag" content="鎬ф牸绫诲瀷"> <meta property="article:tag" content="浜烘牸娴嬭瘯"> <meta property="article:tag" content="MBTI"> <meta property="article:tag" content="鎬ф牸鐗瑰緛"> <meta property="article:tag" content="鎬ф牸娴嬭瘎"> <meta property="article:tag" content="鎬ф牸娴嬭瘯棰?> <meta property="article:tag" content="鍦ㄧ嚎鎬ф牸娴嬭瘯"> <meta property="article:tag" content="浜烘牸鍒嗘瀽"> <link rel="stylesheet" href="/css/tech-ui.css?v=20260721c"> <link rel="stylesheet" href="/css/lh-design.css?v=20260721c"> <link rel="stylesheet" href="/css/lh-clean-override.css?v=20260721c"> <link rel="stylesheet" href="/css/lh-mp-theme.css?v=20260722"> </head> <body> <div id="app" v-cloak> <div class="home-screen" v-if="step === 'home'"> <div class="logo-icon pulse">馃</div> <h1 class="home-title">AI鎬ф牸娴嬭瘯路鍙戠幇鐪熷疄鐨勪綘</h1> <p class="home-subtitle">10閬撹叮鍛虫祴璇曢锛岀簿鍑嗗垎鏋愪綘鐨勬€ф牸绫诲瀷<br>浜嗚В鑷繁鐨勪紭鍔夸笌娼滆兘</p> <button class="btn-start" @click="startQuiz">馃殌寮€濮嬫祴璇?/button> <div class="home-features"> <span class="feature-tag">鈿?10棰橀€熸祴</span> <span class="feature-tag">馃幆绮惧噯鍒嗘瀽</span> <span class="feature-tag">馃搳娣卞害瑙ｈ</span> </div> <p class="home-counter" v-if="serviceCount > 0">宸蹭负 {{ formatNumber(serviceCount) }} 浣嶇敤鎴锋祴杩囨€ф牸</p> </div> <div class="quiz-screen" v-if="step === 'quiz'"> <div class="quiz-progress-bar"> <div class="quiz-progress-fill" :style="{ width: ((currentQ + 1) / questions.length * 100) + '%' }"></div> </div> <div class="quiz-progress-text">{{ currentQ + 1 }} / {{ questions.length }}</div> <div class="quiz-question">{{ questions[currentQ].q }}</div> <button v-for="(opt, i) in questions[currentQ].options" :key="i" class="quiz-option" :class="{ selected: selectedAnswer === i }" @click="selectAnswer(i)"> {{ opt.text }} </button> </div> <div class="loading-screen" v-if="step === 'loading'"> <div class="loading-ring"></div> <p class="loading-text">AI姝ｅ湪鍒嗘瀽浣犵殑鎬ф牸...</p> <p class="loading-progress">{{ loadingStatus }}</p> </div> <div class="result-screen" v-if="step === 'result' && resultData"> <div class="result-type-card"> <div class="result-type-label">浣犵殑鎬ф牸绫诲瀷</div> <div class="result-type-code">{{ resultData.code }}</div> <div class="result-type-name">{{ resultData.name }}</div> <div class="result-type-tagline">{{ resultData.tagline }}</div> </div> <div class="result-desc-card">{{ resultData.description }}</div> <p class="result-disclaimer">鈿狅笍鏈唴瀹逛粎渚涘ū涔愬弬鑰冿紝骞堕潪涓撲笟蹇冪悊璇勪及</p> <div class="result-section-title">鎬?鏍?缁?搴?鍒?鏋?/div> <div v-for="(t, i) in traits" :key="t.id" v-if="i < 2" class="trait-card"> <div class="trait-card-header"> <span class="trait-card-name">{{ t.icon }} {{ t.name }}</span> <span class="trait-card-bars"> <span v-for="b in 5" :key="b" class="trait-bar" :class="{ active: b <= t.score }"></span> </span> </div> <div v-if="unlocked" class="trait-card-detail">{{ t.detail }}</div> <div v-else class="trait-lock-overlay"> </div> </div> <div class="unlock-section" v-if="!unlocked"> <button class="btn-assess-unlock" @click="showPayModal">馃敁瑙ｉ攣瀹屾暣鎬ф牸瑙ｈ</button> </div> <div v-for="(t, i) in traits" :key="t.id + '_blur'" v-if="i >= 2" class="trait-card blurred-card"> <div class="trait-card-header"> <span class="trait-card-name">{{ t.icon }} {{ t.name }}</span> <span class="trait-card-bars"> <span v-for="b in 5" :key="b" class="trait-bar" :class="{ active: b <= t.score }"></span> </span> </div> <div class="trait-lock-overlay"> </div> </div> <div v-if="aiContent || aiLoading" class="ai-content-card" style="background: #F5F7FA;border:1px solid rgba(37,99,235,0.2);border-radius:16px;padding:20px;margin:16px 0;color:#1F2937;"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;"> <span style="font-size:20px;">馃</span> <span style="font-size:15px;font-weight:700;letter-spacing:1px;">AI澶фā鍨嬫繁搴﹁В璇?/span> <span style="font-size:10px;background: #F5F7FA;padding:2px 8px;border-radius:10px;margin-left:auto;">Powered by GLM-4</span> </div> <div v-if="aiLoading && !aiContent" style="text-align:center;padding:20px 0;"> <div style="display:inline-block;width:40px;height:40px;border:3px solid #9CA3AF;border-top-color:#2563EB;border-radius:50%;animation:ai-spin 0.8s linear infinite;"></div> <div style="margin-top:12px;font-size:13px;opacity:0.9;">馃 AI姝ｅ湪鍒嗘瀽鎬ф牸...</div> <style> html { height: 100%; } body { min-height: 100%; background: #F5F7FA; background-attachment: fixed; } body { font-family: 'PingFang SC', 'Microsoft YaHei', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', emoji, sans-serif; color: #1F2937; margin: 0; padding: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-tap-highlight-color: transparent; } @keyframes ai-spin{to{transform:rotate(360deg)}}</style> </div> <div v-else style="font-size:14px;line-height:1.8;white-space:pre-wrap;opacity:0.95;"> {{ aiContent }}<span v-if="aiLoading" style="display:inline-block;width:2px;height:16px;background: #F5F7FA;animation:ai-blink 0.8s step-end infinite;vertical-align:middle;margin-left:2px;"></span> <style> html { height: 100%; } body { min-height: 100%; background: #F5F7FA; background-attachment: fixed; } body { font-family: 'PingFang SC', 'Microsoft YaHei', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', emoji, sans-serif; color: #1F2937; margin: 0; padding: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-tap-highlight-color: transparent; } @keyframes ai-blink{0%,100%{opacity:1}50%{opacity:0}}</style> </div> </div> <div class="result-actions"> <button class="btn-action retest" @click="handleRetest">馃攧閲嶆柊娴嬭瘯</button> </div> <div class="global-disclaimer" style="text-align:center;font-size:12px;color:var(--c-text-muted);padding:16px 0 8px;margin-top:10px;">鈿狅笍鍏ㄩ儴鍐呭浠呬綔涓鸿叮鍛冲ū涔愬弬鑰冿紝鏃犵瀛﹂娴嬩綔鐢紝涓嶅彲浣滀负浜虹敓鍐崇瓥渚濇嵁銆?br><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" style="color:var(--c-text-muted);text-decoration:none">婊嘔CP澶?024038048鍙?2</a></div> <div class="cross-promo"> <div class="cross-promo-title">杩樻兂娴嬩粈涔堬紵</div> <div class="cross-promo-links"> <a class="cross-promo-link" href="/face.html"><span class="cross-promo-icon">馃敭</span> AI闈㈤儴姘旇川鍒嗘瀽路鎺㈢浣犵殑鎬ф牸</a> <a class="cross-promo-link" href="/beauty.html"><span class="cross-promo-icon">鉁?/span> AI棰滃€煎垎鏋?路娴嬫祴浣犵殑棰滃€兼湁澶氶珮</a> <a class="cross-promo-link" href="/name-score.html"><span class="cross-promo-icon">馃摑</span> AI鍚嶅瓧鏂囧寲鎬ф牸娴嬭瘎路鍚嶅瓧鑳芥墦鍑犲垎</a> <a class="cross-promo-link" href="/daily-fortune.html"><span class="cross-promo-icon">馃彯</span> AI姣忔棩杩愬娍路浠婃棩杩愬娍棰勬祴</a> <a class="cross-promo-link" href="/tarot.html"><span class="cross-promo-icon">馃儚</span> AI濉旂綏鐗?路閫忚浣犵殑蹇冩剰</a> <a class="cross-promo-link" href="/past-life.html"><span class="cross-promo-icon">馃尭</span> AI鍓嶄笘浠婄敓路鎺㈠浣犵殑鍓嶄笘</a> </div> </div> <div class="cross-promo"> <div class="cross-promo-title">馃摳 AI璇佷欢鐓у伐鍏风</div> <div class="cross-promo-links"> <a class="cross-promo-link" href="/idphoto.html"><span class="cross-promo-icon">馃帹</span> AI鎹㈠簳鑹茶瘉浠剁収</a> <a class="cross-promo-link" href="/beautify.html"><span class="cross-promo-icon">鉁?/span> AI缇庨绮句慨</a> <a class="cross-promo-link" href="/crop.html"><span class="cross-promo-icon">鉁傦笍</span> AI鏅鸿兘瑁佸壀灏哄</a> <a class="cross-promo-link" href="/layout.html"><span class="cross-promo-icon">馃枿锔?/span> 鐩哥焊鎺掔増鎵撳嵃</a> <a class="cross-promo-link" href="/professional.html"><span class="cross-promo-icon">馃捈</span> 鑱屼笟褰㈣薄鐓?/a> </div> </div> </div> <div class="toast" v-if="toastMsg" v-text="toastMsg"></div> </div> <script> // 鈺愨晲鈺?娴嬭瘯棰樼洰鈺愨晲鈺? const QUESTIONS = [ { q: "鏈嬪弸鑱氫細鏃讹紝浣犻€氬父鏄紵", options: [ { text: "涓诲姩鍜屽ぇ瀹惰亰澶╋紝璁よ瘑鏂版湅鍙?, type: "E" }, { text: "鍜岀啛鎮夌殑浜哄緟鍦ㄤ竴璧峰氨濂?, type: "I" } ]}, { q: "鍋氬喅瀹氭椂锛屼綘鏇寸湅閲嶏紵", options: [ { text: "閫昏緫鍜屽瑙備簨瀹?, type: "T" }, { text: "鎰熷彈鍜屼汉闄呭叧绯?, type: "F" } ]}, { q: "浣犳洿鍠滄鍝鍛ㄦ湯锛?, options: [ { text: "瀹夋帓婊℃弧鐨勮绋嬶紝鍑洪棬娲诲姩", type: "E" }, { text: "鍦ㄥ瀹夐潤浼戞伅锛岀湅鐪嬩功杩借拷鍓?, type: "I" } ]}, { q: "闈㈠鏂伴」鐩紝浣犲€惧悜浜庯紵", options: [ { text: "鍏堝埗瀹氳缁嗚鍒掑啀鎵ц", type: "J" }, { text: "杈瑰仛杈硅皟鏁达紝鐏垫椿搴斿", type: "P" } ]}, { q: "浣犺涓烘洿閲嶈鐨勬槸锛?, options: [ { text: "鍏钩鍏锛屼竴瑙嗗悓浠?, type: "T" }, { text: "鍜岃皭鍏卞锛屼綋璋呬粬浜?, type: "F" } ]}, { q: "瀛︿範鏂颁笢瑗挎椂锛屼綘鏇村枩娆紵", options: [ { text: "浠庡叿浣撴渚嬪拰瀹炴搷鍏ユ墜", type: "S" }, { text: "鍏堢悊瑙ｅ簳灞傚師鐞嗗拰姒傚康", type: "N" } ]}, { q: "浣犵殑涔︽/妗岄潰閫氬父鏄紵", options: [ { text: "鏁存磥鏈夊簭锛岀墿鍝佸綊浣?, type: "J" }, { text: "姣旇緝闅忔剰锛岀敤鏃跺啀鎵?, type: "P" } ]}, { q: "鑱婂ぉ鏃朵綘鏇存搮闀匡紵", options: [ { text: "鑱婄溂鍓嶅彂鐢熺殑浜嬪拰缁嗚妭", type: "S" }, { text: "鑱婃湭鏉ョ殑鍙兘鍜屽垱鎰?, type: "N" } ]}, { q: "閬囧埌鍐茬獊鏃讹紝浣犱細锛?, options: [ { text: "灏变簨璁轰簨锛屽垎鏋愬閿?, type: "T" }, { text: "鍏堢収椤惧鏂规儏缁啀璇?, type: "F" } ]}, { q: "鏃呰鏃朵綘鏇村枩娆紵", options: [ { text: "鎻愬墠瑙勫垝濂借绋嬪拰浣忓", type: "J" }, { text: "璇磋蛋灏辫蛋锛岄殢鎬ц€屼负", type: "P" } ]} ]; // 鈺愨晲鈺?16鍨嬩汉鏍肩粨鏋?鈺愨晲鈺? const PERSONALITY_TYPES = { 'INTJ': { name: '寤虹瓚甯?, tagline: '鐙珛鎬濊€冪殑鎴樼暐瀹?, description: '浣犳槸涓€涓瀬鍏锋垬鐣ョ溂鍏夌殑浜猴紝鍠勪簬灏嗙悊璁鸿浆鍖栦负瀹為檯琛屽姩銆備綘鐙珛銆佹灉鏂紝瀵硅嚜宸卞拰浠栦汉閮芥湁寰堥珮鐨勬爣鍑嗐€傞潰瀵规寫鎴樻椂锛屼綘鎬昏兘鎵惧埌鍒涙柊鐨勮В鍐虫柟妗堛€備綘鐨勫唴蹇冧笘鐣屼赴瀵岃€屾繁閭冿紝铏界劧涓嶅杽浜庤〃杈炬儏鎰燂紝浣嗗璁ゅ彲鐨勪汉闈炲父蹇犺瘹銆? }, 'INTP': { name: '閫昏緫瀛﹀', tagline: '鐞嗘€у垎鏋愮殑鎬濊€冭€?, description: '浣犲ぉ鐢熺儹鐖辨€濊€冿紝瀵圭煡璇嗘湁寮虹儓鐨勬复鏈涖€備綘鍠勪簬鍙戠幇浜嬬墿涔嬮棿鐨勮仈绯伙紝鍠滄浠庝笉鍚岃搴﹀垎鏋愰棶棰樸€備綘鐙珛銆佺伒娲伙紝涓嶅枩娆㈣鏉℃潯妗嗘鏉熺細銆傝櫧鐒?sometimes 鏄惧緱鐤忕锛屼絾浣犵殑娲炲療鍔涘父甯歌浜哄埉鐩浉鐪嬨€? }, 'ENTJ': { name: '鎸囨尌瀹?, tagline: '澶╃敓鐨勯瀵艰€?, description: '浣犲ぉ鐢熷叿鏈夐瀵煎姏锛屾灉鏂€佽嚜淇°€佺洰鏍囨槑纭€備綘鍠勪簬鍒跺畾闀胯繙璁″垝骞舵帹鍔ㄦ墽琛岋紝涓嶆€曢潰瀵瑰洶闅惧拰鎸戞垬銆備綘鐨勬剰蹇楀姏鍧氬己锛屼絾涔熼渶瑕佹敞鎰忓€惧惉浠栦汉鐨勫０闊炽€傚湪鍥㈤槦涓紝浣犳槸閭ｄ釜璁╀簨鎯呭彂鐢熺殑浜恒€? }, 'ENTP': { name: '杈╄瀹?, tagline: '鑱槑濂藉鐨勫垱鏂拌€?, description: '浣犳€濈淮鏁忔嵎锛屽枩娆㈣京璁哄拰澶磋剳椋庢毚銆備綘鎬昏兘鐪嬪埌浜嬬墿鐨勫绉嶅彲鑳芥€э紝鍠勪簬鐢ㄥ垱鎰忚В鍐抽棶棰樸€備綘涓嶅枩娆㈠ⅷ瀹堟垚瑙勶紝浜彈鏅哄姏涓婄殑鎸戞垬銆備綘鐨勫菇榛樻劅鍜屾満鏅鸿浣犳垚涓烘湁瓒ｇ殑浼欎即銆? }, 'INFJ': { name: '鎻愬€¤€?, tagline: '瀹夐潤鑰屾湁鐞嗘兂鐨勫紩瀵艰€?, description: '浣犳槸涓€涓繁鍒昏€屾湁鍚岀悊蹇冪殑浜猴紝瀵逛汉鐢熸湁鐫€鐙壒鐨勭悊瑙ｃ€備綘瀹夐潤浣嗗潥瀹氾紝鍠勪簬娲炲療浠栦汉鐨勬儏鎰熷拰闇€姹傘€備綘杩芥眰鎰忎箟鍜岀洰鏍囷紝甯屾湜璁╀笘鐣屽彉寰楁洿濂姐€備綘鐨勭洿瑙夐€氬父寰堝噯锛屾槸鏈嬪弸浠殑绮剧鏀煴銆? }, 'INFP': { name: '璋冨仠鑰?, tagline: '璇楁剰鍠勮壇鐨勭悊鎯充富涔夎€?, description: '浣犲唴蹇冩煍杞€屼赴瀵岋紝瀵圭編鍜屽杽鏈夊ぉ鐒剁殑鎰熺煡鍔涖€備綘杩芥眰鐪熷疄鍜屾剰涔夛紝涓嶆効闅忔尝閫愭祦銆備綘鍠勮В浜烘剰锛屾€绘槸璁捐韩澶勫湴涓轰粬浜虹潃鎯炽€傝櫧鐒跺琛ㄥ畨闈欙紝鍐呭績鍗存湁涓€鍥㈢伀鍦ㄧ噧鐑с€? }, 'ENFJ': { name: '涓讳汉鍏?, tagline: '瀵屾湁榄呭姏鐨勬劅鍙€?, description: '浣犲ぉ鐢熷杽浜庢劅鏌撳拰婵€鍔变粬浜猴紝鏄汉缇や腑鐨勭劍鐐广€備綘鐑儏銆佹湁鍚岀悊蹇冿紝鎬昏兘璁╄韩杈圭殑浜烘劅鍒拌閲嶈銆備綘鎿呴暱鍗忚皟鍏崇郴锛屾帹鍔ㄥ洟闃熷悎浣溿€備綘鐨勫瓨鍦ㄨ鍛ㄥ洿鐨勪汉鍙樺緱鏇村ソ銆? }, 'ENFP': { name: '绔為€夎€?, tagline: '鐑儏娲嬫孩鐨勫垱鎰忓', description: '浣犲厖婊℃椿鍔涘拰鍒涙剰锛屽鐢熸椿鏈夋棤闄愮殑濂藉蹇冦€備綘鍠勪簬鍙戠幇鏈轰細锛屼韩鍙椾笌浜轰氦娴佺殑涔愯叮銆備綘鐨勭儹鎯呮湁鎰熸煋鍔涳紝鎬昏兘甯﹀姩韬竟鐨勬皵姘涖€備綘闇€瑕佽嚜鐢卞拰鍙樺寲锛岃鍘屼竴鎴愪笉鍙樼殑鐢熸椿銆? }, 'ISTJ': { name: '鐗╂祦甯?, tagline: '韪忓疄鍙潬鐨勬墽琛岃€?, description: '浣犲姟瀹炪€佷弗璋ㄣ€佸€煎緱淇¤禆銆備綘鍋氫簨鏈夋潯涓嶇磰锛岄噸瑙嗚鍒欏拰浼犵粺銆備綘瀵规壙璇鸿鐪熻礋璐ｏ紝鏄洟闃熶腑涓嶅彲鎴栫己鐨勭ǔ瀹氬姏閲忋€傝櫧鐒朵笉鍠勮█杈烇紝浣嗕綘鐨勮鍔ㄥ姏鍜屽彲闈犳€ц耽寰椾簡澶у鐨勫皧閲嶃€? }, 'ISFJ': { name: '瀹堝崼鑰?, tagline: '娓╂殩缁嗚嚧鐨勫畧鎶よ€?, description: '浣犳俯鍜屻€佸杽鑹€佺粏蹇冿紝鎬绘槸榛橀粯鍏冲績韬竟鐨勪汉銆備綘璁板繂鍔涘ソ锛屽杽浜庤浣忎粬浜虹殑闇€姹傚拰鍠滃ソ銆備綘鍋氫簨璁ょ湡璐熻矗锛屾槸鍊煎緱淇¤禆鐨勪紮浼淬€備綘鐨勪粯鍑鸿櫧鐒朵笉寮犳壃锛屼絾姣忎釜浜洪兘鎰熷彈寰楀埌銆? }, 'ESTJ': { name: '鎬荤粡鐞?, tagline: '楂樻晥鍔″疄鐨勭鐞嗚€?, description: '浣犵粍缁囪兘鍔涘己锛屽仛浜嬮珮鏁堬紝閲嶈绉╁簭鍜岃鍒欍€備綘鐩存潵鐩村幓锛岃涓€涓嶄簩锛屽杽浜庢妸浜嬫儏瀹夋帓寰椾簳浜曟湁鏉°€備綘灏婇噸浼犵粺鍜屾潈濞侊紝鏄ぉ鐒剁殑鎵ц鑰呭拰绠＄悊鑰呫€備綘鐨勫潶璇氬拰楂樻晥璁╀汉淇¤禆銆? }, 'ESFJ': { name: '鎵ф斂瀹?, tagline: '鐑績鑲犵殑绀句氦杈句汉', description: '浣犵儹鎯呫€佸弸鍠勩€佷箰浜庡姪浜猴紝鏄汉缇や腑鐨勬俯鏆栧瓨鍦ㄣ€備綘鍠勪簬鐓ч【浠栦汉锛岃浣忔瘡涓汉鐨勯渶姹傘€備綘閲嶈鍜岃皭鐨勪汉闄呭叧绯伙紝鍠滄缁勭粐娲诲姩鍜岃仛浼氥€備綘鐨勫瓨鍦ㄨ鍥㈤槦鏇存湁鍑濊仛鍔涖€? }, 'ISTP': { name: '閴磋祻瀹?, tagline: '鍐烽潤鐏垫椿鐨勫疄璺佃€?, description: '浣犲喎闈欍€佺悊鎬с€佸姩鎵嬭兘鍔涘己銆備綘鍠勪簬鍒嗘瀽鍜岃В鍐冲疄闄呴棶棰橈紝瀵规満姊板拰宸ュ叿鏈夊ぉ鐒剁殑鍏磋叮銆備綘鐙珛銆佺伒娲伙紝涓嶅枩娆㈣绾︽潫銆備綘璇濅笉澶氾紝浣嗗叧閿椂鍒绘€昏兘闈犲緱浣忋€? }, 'ISFP': { name: '鎺㈤櫓瀹?, tagline: '娓╂煍鏁忔劅鐨勮壓鏈', description: '浣犲畨闈欍€佹晱鎰熴€佹湁瀹＄編澶╄祴銆備綘娲诲湪褰撲笅锛屼韩鍙楃敓娲讳腑鐨勭編濂界灛闂淬€備綘涓嶅枩娆㈠啿绐侊紝杩芥眰鍜岃皭鑷湪鐨勭敓娲汇€備綘铏界劧鍐呭悜锛屼絾瀵逛翰杩戠殑浜烘湁鐫€娣辨矇鐨勭埍銆備綘鐨勫垱閫犲姏甯稿父鍦ㄤ笉缁忔剰闂寸唤鏀俱€? }, 'ESTP': { name: '浼佷笟瀹?, tagline: '澶ц儐绮炬槑鐨勮鍔ㄦ淳', description: '浣犵簿鍔涘厖娌涳紝琛屽姩鍔涘己锛屽枩娆㈠啋闄╁拰鎸戞垬銆備綘鍠勪簬鎶婃彙褰撲笅锛屽揩閫熷仛鍑哄弽搴斻€備綘鐩寸巼銆佸菇榛橈紝鏄ぉ鐢熺殑绀句氦杈句汉銆備綘涓嶅枩娆㈢殑鐞嗚绌鸿皥锛屾洿鐩镐俊瀹為檯琛屽姩銆? }, 'ESFP': { name: '琛ㄦ紨鑰?, tagline: '鐑儏娲嬫孩鐨勪韩涔愬', description: '浣犳椿娉笺€佸紑鏈椼€佸瘜鏈夋劅鏌撳姏锛屾槸娲惧鐨勭伒榄備汉鐗┿€備綘浜彈褰撲笅锛屽杽浜庡彂鐜扮敓娲讳腑鐨勪箰瓒ｃ€備綘鍠勮В浜烘剰锛屾€昏兘璁╄韩杈圭殑浜哄紑蹇冭捣鏉ャ€備綘鐨勪笘鐣屾槸鑹插僵鏂戞枔鐨勶紝鍏呮弧娆㈠０绗戣銆? } }; // 鈺愨晲鈺?缁村害璇︾粏瑙ｈ妯℃澘鈺愨晲鈺? const TRAIT_DETAILS = { energy: [ '浣犵殑澶栧悜鐗硅川浣夸綘鍦ㄧぞ浜ゅ満鍚堝楸煎緱姘淬€備綘浠庝笌浜轰氦娴佷腑鑾峰緱鑳介噺锛屽杽浜庡缓绔嬪箍娉涚殑浜洪檯缃戠粶銆傚湪鑱屽満涓紝浣犻€傚悎闇€瑕侀绻佹矡閫氬拰鍗忎綔鐨勫矖浣嶏紝濡傞攢鍞€佸競鍦恒€佸叕鍏崇瓑銆傚缓璁€傚綋鐣欏嚭鐙鏃堕棿锛屼繚鎸佸唴蹇冨钩琛°€?, '浣犵殑鍐呭悜鐗硅川璧嬩簣浣犳繁搴︽€濊€冪殑鑳藉姏銆備綘浜彈鐙锛屽湪瀹夐潤鐨勭幆澧冧腑鏇磋兘鍙戞尌鍒涢€犲姏銆備綘铏界劧鏈嬪弸涓嶅锛屼絾姣忔鍏崇郴閮藉緢娣卞帤銆傚湪鑱屽満涓紝浣犻€傚悎闇€瑕佷笓娉ㄥ拰娣卞害鐨勫伐浣滐紝濡傜爺鍙戙€佸啓浣溿€佽璁＄瓑銆?, '浣犲湪绀句氦涓婃瘮杈冪伒娲伙紝鑳芥牴鎹満鍚堣皟鏁磋嚜宸辩殑鐘舵€併€傛棦鑳戒韩鍙楃儹闂圭殑鑱氫細锛屼篃鑳藉畨浜庣嫭澶勭殑鏃跺厜銆傝繖绉嶅钩琛¤浣犲湪鍚勭鐜涓兘鑳介€傚簲鑹ソ銆傚缓璁壘鍒拌嚜宸辩殑鑳介噺鎭㈠鏂瑰紡锛屼繚鎸佹渶浣崇姸鎬併€? ], info: [ '浣犳敞閲嶇粏鑺傚拰浜嬪疄锛岃剼韪忓疄鍦帮紝鍋氫簨闈犺氨銆備綘鍠勪簬浠庤繃鍘荤殑缁忛獙涓€荤粨瑙勫緥锛屽鍏蜂綋淇℃伅璁板繂绮惧噯銆備綘閫傚悎闇€瑕佷弗璋ㄥ拰绮剧‘鐨勫伐浣滐紝濡傝储鍔°€佸伐绋嬨€佸尰鐤楃瓑銆傚缓璁伓灏旇烦鍑虹粏鑺傦紝鍏虫敞澶у眬銆?, '浣犲瘜鏈夋兂璞″姏鍜屽垱閫犲姏锛屽杽浜庣湅鍒颁簨鐗╄儗鍚庣殑妯″紡鍜屽彲鑳芥€с€備綘鍠滄鎺㈢储鏂版蹇碉紝瀵规湭鏉ョ殑瓒嬪娍鏈夋晱閿愮殑鐩磋銆備綘閫傚悎鍒涙剰绫诲拰鎴樼暐绫诲伐浣滐紝濡傝璁°€佺瓥鍒掋€佺爺绌剁瓑銆傚缓璁€傚綋鍏虫敞鎵ц缁嗚妭銆?, '浣犺兘澶熷湪缁嗚妭鍜屽畯瑙備箣闂寸伒娲诲垏鎹€傛棦鑳藉叧娉ㄧ溂鍓嶇殑鍏蜂綋闂锛屼篃鑳芥€濊€冮暱杩滅殑鍙戝睍鏂瑰悜銆傝繖绉嶅钩琛¤浣犳棦鏈夋墽琛屽姏鍙堟湁杩滆锛屾槸闅惧緱鐨勫鍚堝瀷浜烘墠銆? ], decision: [ '浣犲仛鍐冲畾鏃剁悊鎬у瑙傦紝鍠勪簬鍒嗘瀽鍒╁紛銆備綘閲嶈鍏钩鍜屾晥鐜囷紝涓嶄細璁╂儏缁奖鍝嶅垽鏂€備綘鍦ㄥ洟闃熶腑鏄偅涓?鍐烽潤鐨勫ぇ鑴?锛屽叧閿椂鍒昏兘鍋氬嚭鏄庢櫤鍐崇瓥銆傚缓璁湪鐞嗘€т箣澶栵紝涔熷叧娉ㄤ粬浜虹殑鎰熷彈銆?, '浣犲仛鍐冲畾鏃堕噸瑙嗘劅鍙楀拰浜洪檯鍏崇郴锛屽杽浜庢崲浣嶆€濊€冦€備綘娓╁拰銆佸杽瑙ｄ汉鎰忥紝鎬绘槸鑰冭檻鍒版瘡涓汉鐨勯渶姹傘€備綘鏄洟闃熶腑鐨勬鼎婊戝墏锛岀淮绯荤潃鍜岃皭鐨勬皼鍥淬€傚缓璁湪鐓ч【浠栦汉鐨勫悓鏃讹紝涔熷埆蹇樹簡鑷繁鐨勯渶姹傘€?, '浣犲湪鐞嗘€у拰鎰熸€т箣闂村彇寰楄壇濂藉钩琛°€傛棦鑳界敤閫昏緫鍒嗘瀽闂锛屼篃鑳介【鍙婁粬浜虹殑鎰熷彈銆備綘鐨勫喅绛栨棦鏄庢櫤鍙堟湁浜烘儏鍛筹紝杩欒浣犵殑棰嗗鍔涙洿鍔犲叏闈€傚缓璁湪閲嶅ぇ鍐崇瓥鏃讹紝澶氱粰鑷繁涓€浜涙€濊€冩椂闂淬€? ], lifestyle: [ '浣犲枩娆㈡湁璁″垝銆佹湁鏉＄悊鐨勭敓娲汇€備綘鍋氫簨鏈夊鏈夌粓锛屾椂闂磋蹇靛己锛屾槸闈犺氨鐨勬墽琛岃€呫€備綘鍦ㄥ洟闃熶腑璐熻矗鎺ㄥ姩椤圭洰钀藉湴锛岀‘淇濈洰鏍囨寜鏃惰揪鎴愩€傚缓璁伓灏旀斁鏉句竴涓嬭鍒掞紝缁欒嚜宸变竴浜涘脊鎬х┖闂淬€?, '浣犲枩娆㈢伒娲汇€侀殢鎬х殑鐢熸椿鏂瑰紡銆備綘閫傚簲鍔涘己锛屽杽浜庡簲瀵圭獊鍙戝彉鍖栥€備綘涓嶅枩娆㈣鏉℃潯妗嗘鏉熺細锛屽湪鍔ㄦ€佺幆澧冧腑鏇存湁鍒涢€犲姏銆傚缓璁湪鍏抽敭浜嬪姟涓婇€傚綋澧炲姞瑙勫垝锛屾彁楂樻墽琛屽姏銆?, '浣犲湪瑙勫垝鍜岀伒娲讳箣闂存壘鍒颁簡涓嶉敊鐨勫钩琛°€備綘鏈夎鍒掍絾涓嶆鏉匡紝鑳介殢鏈哄簲鍙樹絾涓嶅け鏂瑰悜銆傝繖绉嶅脊鎬ц浣犲湪鍚勭鐜涓兘鑳芥父鍒冩湁浣欍€傚缓璁湪閲嶈椤圭洰涓€傚綋澧炲姞璁″垝鎬с€? ] }; const { createApp } = Vue; createApp({ data() { return { step: 'home', currentQ: 0, selectedAnswer: null, answers: [], resultData: null, traits: [], unlocked: false, aiContent: null, aiLoading: false, showAdModal: false, loadingStatus: '', serviceCount: 18932, toastMsg: null, toastTimer: null, questions: QUESTIONS } }, mounted() { this.checkSavedState(); this.fetchServiceCount(); this.setupWxShare(); setInterval(() => { this.serviceCount += Math.floor(Math.random() * 3) + 1; }, 5000); }, methods: { checkSavedState() { try { const saved = localStorage.getItem('personality_test_state'); if (saved) { const data = JSON.parse(saved); if (data.resultData) { this.step = 'result'; this.resultData = data.resultData; this.traits = data.traits || []; } } } catch(e) {} }, async fetchServiceCount() { try { const r = await fetch('/api/service-count'); const d = await r.json(); if (d.code === 0 && d.count > 0) this.serviceCount = d.count + 6586; } catch(e) {} }, async setupWxShare() { try { const r = await fetch('/api/wx-jsconfig?url=' + encodeURIComponent(window.location.href)); const d = await r.json(); if (d.code === 0 && d.config && window.wx) { window.wx.config({ debug: false, appId: d.config.appId, timestamp: d.config.timestamp, nonceStr: d.config.nonceStr, signature: d.config.signature, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] }); window.wx.ready(() => { const shareData = { title: 'AI鎬ф牸娴嬭瘯路鍙戠幇鐪熷疄鐨勪綘', desc: '10閬撹叮鍛虫祴璇曢锛岀簿鍑嗗垎鏋愪綘鐨勬€ф牸绫诲瀷锛?, link: window.location.href, imgUrl: 'https://榫欐収浜?com/og-cover.jpg' }; window.wx.updateAppMessageShareData(shareData); window.wx.updateTimelineShareData(shareData); }); } } catch(e) {} }, formatNumber(n) { return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }, showToast(msg, duration = 2000) { this.toastMsg = msg; clearTimeout(this.toastTimer); this.toastTimer = setTimeout(() => { this.toastMsg = null; }, duration); }, startQuiz() { this.step = 'quiz'; this.currentQ = 0; this.answers = []; this.selectedAnswer = null; }, selectAnswer(i) { this.selectedAnswer = i; this.answers.push(this.questions[this.currentQ].options[i].type); setTimeout(() => { if (this.currentQ < this.questions.length - 1) { this.currentQ++; this.selectedAnswer = null; } else { this.calculateResult(); } }, 250); }, async calculateResult() { this.step = 'loading'; this.loadingStatus = '姝ｅ湪缁熻浣犵殑鍥炵瓟...'; const steps = ['姝ｅ湪缁熻浣犵殑鍥炵瓟...', '姝ｅ湪鍒嗘瀽鎬ф牸缁村害...', '姝ｅ湪鍖归厤浜烘牸绫诲瀷...', '姝ｅ湪鐢熸垚涓撳睘鎶ュ憡...']; let idx = 0; const interval = setInterval(() => { idx++; if (idx < steps.length) this.loadingStatus = steps[idx]; }, 800); await new Promise(r => setTimeout(r, 3200)); clearInterval(interval); // Count type preferences const counts = { E:0, I:0, S:0, N:0, T:0, F:0, J:0, P:0 }; this.answers.forEach(a => { counts[a] = (counts[a] || 0) + 1; }); const code = (counts.E >= counts.I ? 'E' : 'I') + (counts.S >= counts.N ? 'S' : 'N') + (counts.T >= counts.F ? 'T' : 'F') + (counts.J >= counts.P ? 'J' : 'P'); const typeData = PERSONALITY_TYPES[code] || PERSONALITY_TYPES['INFP']; this.resultData = { code, ...typeData }; // Generate traits const pick = arr => arr[Math.floor(Math.random() * arr.length)]; this.traits = [ { id: 'energy', icon: '鈿?, name: '鑳介噺鏂瑰悜', score: Math.round((counts.E / (counts.E + counts.I || 1)) * 5) || 3, detail: pick(TRAIT_DETAILS.energy) }, { id: 'info', icon: '馃攳', name: '淇℃伅鑾峰彇', score: Math.round((counts.S / (counts.S + counts.N || 1)) * 5) || 3, detail: pick(TRAIT_DETAILS.info) }, { id: 'decision', icon: '鈿栵笍', name: '鍐崇瓥鏂瑰紡', score: Math.round((counts.T / (counts.T + counts.F || 1)) * 5) || 3, detail: pick(TRAIT_DETAILS.decision) }, { id: 'lifestyle', icon: '馃搮', name: '鐢熸椿鎬佸害', score: Math.round((counts.J / (counts.J + counts.P || 1)) * 5) || 3, detail: pick(TRAIT_DETAILS.lifestyle) } ]; this.step = 'result'; this.saveState(); }, saveState() { try { localStorage.setItem('personality_test_state', JSON.stringify({ resultData: this.resultData, traits: this.traits, timestamp: Date.now() })); } catch(e) {} }, showPayModal() { const self = this; showAssessUnlockModal('personality', { onAdUnlock() { self.unlocked = true; self.saveState(); self.showToast('已解锁，请查看完整性格解读'); }, onShareUnlock() { self.unlocked = true; self.saveState(); self.showToast('已解锁，请查看完整性格解读'); }, onPayUnlock() { startPayment('personality', function() { self.unlocked = true; self.saveState(); self.showToast('已解锁，请查看完整性格解读'); }); }, }); }, // AI澶фā鍨嬪寮猴細娴佸紡鐢熸垚鎬ф牸鍒嗘瀽锛岄€愬瓧鏄剧ず async enhanceWithAI() { this.aiLoading = true; this.aiContent = ''; const answers = this.questions.map((q,i) => ({question:q.title, choice:q.options[this.answers[i]].text})); AIStream.stream('personality', {answers:answers, personalityType:this.resultType||'INTJ'}, (content) => { this.aiContent = content; }, (full) => { this.aiContent = full; this.aiLoading = false; console.log('[AI] 鎬ф牸鍒嗘瀽AI澧炲己鎴愬姛'); }, (err) => { console.log('[AI] 鎬ф牸鍒嗘瀽闄嶇骇:', err); this.aiLoading = false; } ); }, handleShare() { if (window.wx && window.wx.ready) { this.showToast('璇风偣鍑诲彸涓婅銆屸€︺€嶅垎浜粰鏈嬪弸鎴栨湅鍙嬪湀'); } else { const link = window.location.href; if (navigator.clipboard) navigator.clipboard.writeText(link).then(() => this.showToast('閾炬帴宸插鍒讹紒鍒嗕韩缁欐湅鍙嬩滑鍚?)); else this.showToast('璇锋墜鍔ㄥ鍒堕摼鎺ュ垎浜?); } }, triggerUnlock() { const self = this; showAssessUnlockModal('personality', { onAdUnlock() { self.unlocked = true; self.saveState(); self.showToast('已解锁，请查看完整性格解读'); }, onShareUnlock() { self.unlocked = true; self.saveState(); self.showToast('已解锁，请查看完整性格解读'); }, onPayUnlock() { startPayment('personality', function() { self.unlocked = true; self.saveState(); self.showToast('已解锁，请查看完整性格解读'); }); }, }); }, generateAI() { if(!this.aiContent) this._loadAI(); },handleRetest() { localStorage.removeItem('personality_test_state'); this.step = 'home'; this.currentQ = 0; this.answers = []; this.selectedAnswer = null; this.resultData = null; this.traits = []; this.unlocked = false; } } }).mount('#app'); </script> <script src="/js/ai-stream.js"></script> <script src="/js/pricing.js?v=20260721d"></script> <script src="https://qzs.gdtimg.com/union/res/union_sdk/page/unjs/un.js"></script> <script> (function() { var params = new URLSearchParams(window.location.search); var ref = params.get('ref'); if (ref && ref.startsWith('sh_')) { fetch('https://lhy-h5.pages.dev/api/share-verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: ref, toolKey: 'personality' }) }).catch(function() {}); } var STORED_NICK = localStorage.getItem('lh_nickname'); if (!STORED_NICK) { document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { var overlay = document.createElement('div'); overlay.id = 'lh-login-overlay'; overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:999998;display:flex;align-items:center;justify-content:center;padding:20px;'; overlay.innerHTML = '<div style="background:#fff;border-radius:20px;padding:32px 24px;max-width:320px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);">' + '<div style="font-size:56px;margin-bottom:12px;">👤</div>' + '<div style="font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:6px;">欢迎进入龙慧云</div>' + '<div style="font-size:13px;color:#888;margin-bottom:24px;line-height:1.6;">请输入你的昵称，开始AI测评之旅</div>' + '<input id="lh-login-nick" type="text" placeholder="输入昵称" maxlength="12" style="width:100%;padding:12px 14px;border:1.5px solid #e0e0e0;border-radius:12px;font-size:15px;box-sizing:border-box;margin-bottom:14px;outline:none;" />' + '<button id="lh-login-btn" style="width:100%;padding:14px;background:linear-gradient(135deg,#165DFF,#2979FF);color:#fff;border:none;border-radius:50px;font-size:15px;font-weight:700;cursor:pointer;">确定进入</button>' + '<div id="lh-login-err" style="font-size:12px;color:#ff4d4f;margin-top:8px;display:none;"></div>' + '</div>'; document.body.appendChild(overlay); var btn = document.getElementById('lh-login-btn'); var input = document.getElementById('lh-login-nick'); var errEl = document.getElementById('lh-login-err'); input.focus(); input.addEventListener('keyup', function(e) { if (e.key === 'Enter') btn.click(); }); btn.addEventListener('click', function() { var nick = input.value.trim(); if (!nick) { errEl.textContent = '璇疯緭鍏ユ樀绉?; errEl.style.display = 'block'; return; } localStorage.setItem('lh_nickname', nick); overlay.remove(); if (window.__vueApp) window.__vueApp.config.globalProperties.$lhSetNickname && window.__vueApp.config.globalProperties.$lhSetNickname(nick); }); }, 100); }); } })(); </script> </body>  </html>