<title>智能收纳助手 V4.5 - 终极高保真交互演示</title>
<style>
:root {
--primary: #2dd4bf;
--primary-dark: #0d9488;
--bg-dark: #0f172a;
--card-bg: #1e293b;
--premium: #facc15;
--text-main: #f8fafc;
--text-muted: #94a3b8;
--danger: #ef4444;
--success: #22c55e;
--share-blue: #3b82f6;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'PingFang SC', 'STHeiti', sans-serif; }
body { background-color: #020617; color: var(--text-main); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; flex-direction: row; gap: 40px; }
/* 手机外壳仿真 */
.phone-frame {
width: 375px;
height: 780px;
background: #000;
border-radius: 50px;
padding: 12px;
box-shadow: 0 0 0 4px #334155, 0 30px 60px rgba(0,0,0,0.8);
position: relative;
flex-shrink: 0;
}
.island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 100px; height: 28px; background: #000; border-radius: 20px; z-index: 100; }
.screen { width: 100%; height: 100%; background: var(--bg-dark); border-radius: 40px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
/* 顶部状态栏 */
.status-bar { padding: 14px 24px 0; display: flex; justify-content: space-between; font-size: 12px; font-weight: bold; z-index: 99; color: #fff; }
/* 页面基础包裹体 */
.page { display: none; height: 100%; flex-direction: column; padding: 20px; padding-top: 40px; overflow-y: auto; padding-bottom: 95px; }
.page.active { display: flex; }
.page::-webkit-scrollbar { display: none; }
/* 底部导航栏 */
.nav { position: absolute; bottom: 0; left: 0; right: 0; height: 75px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; z-index: 90; }
.nav-item { color: var(--text-muted); text-align: center; cursor: pointer; font-size: 10px; flex: 1; transition: 0.3s; }
.nav-item.active { color: var(--primary); }
.nav-item i { font-size: 20px; margin-bottom: 4px; display: block; }
.cam-btn { width: 56px; height: 56px; background: linear-gradient(135deg, var(--primary), #0ea5e9); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000; font-size: 24px; box-shadow: 0 4px 15px rgba(45, 212, 191, 0.4); margin-top: -40px; border: 4px solid var(--bg-dark); transition: 0.2s; }
.cam-btn:active { transform: scale(0.92); }
/* 头部样式 */
.header { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; }
.user-tag { background: rgba(250, 204, 21, 0.1); color: var(--premium); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; cursor: pointer; transition: 0.2s; border: 1px solid rgba(250, 204, 21, 0.2); }
.user-tag.pro { background: rgba(45, 212, 191, 0.2); color: var(--primary); border-color: var(--primary); }
/* 搜索框 */
.search-bar { background: var(--card-bg); border-radius: 15px; padding: 12px 16px; display: flex; gap: 12px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.05); }
.search-bar input { background: none; border: none; color: #fff; width: 100%; outline: none; font-size: 13px; }
/* 核心切换横卡（全部/家庭/自己） */
.filter-tabs { display: flex; background: rgba(0,0,0,0.25); padding: 4px; border-radius: 12px; margin-bottom: 20px; gap: 4px; border: 1px solid rgba(255,255,255,0.02); }
.filter-tab { flex: 1; text-align: center; font-size: 12px; padding: 9px 0; border-radius: 9px; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.filter-tab.active { background: var(--card-bg); color: #fff; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
/* 资产列表卡片 */
.item-card { background: var(--card-bg); border-radius: 18px; padding: 14px; display: flex; gap: 15px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.03); position: relative; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.item-img { width: 60px; height: 60px; border-radius: 12px; background: #334155; overflow: hidden; flex-shrink: 0; }
.item-img img { width: 100%; height: 100%; object-fit: cover; }
.item-info { flex: 1; padding-right: 65px; }
.item-info h5 { font-size: 15px; color: #fff; font-weight: 600; }
.item-info p { font-size: 11px; color: var(--text-muted); margin-top: 5px; display: flex; align-items: center; gap: 4px; }
/* 隐私状态药丸徽章 */
.share-badge { position: absolute; top: 14px; right: 14px; font-size: 10px; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-weight: bold; border: 1px solid transparent; transition: 0.2s; }
.share-badge.shared { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
.share-badge.private { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.25); }
.share-badge:hover { transform: scale(1.05); }
/* 相机界面 */
.camera-screen { height: 100%; background: #000; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
#cameraContainer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background: #090d16; }
.camera-ui { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
/* 虚拟激光扫描线 */
.scan-line { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent, var(--primary), transparent); box-shadow: 0 0 20px var(--primary); animation: scan 2s linear infinite; display: none; z-index: 15; }
@keyframes scan { 0% { top: 15%; } 50% { top: 70%; } 100% { top: 15%; } }
.shutter { width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 5px solid rgba(255,255,255,0.3); align-self: center; margin-bottom: 105px; cursor: pointer; transition: 0.2s; }
.shutter:active { transform: scale(0.88); background: #e2e8f0; }
/* “成员与我的”主页 */
.profile-hero { text-align: center; padding: 15px 0 25px; }
.avatar { width: 72px; height: 72px; border-radius: 50%; background: rgba(45, 212, 191, 0.1); border: 2px solid var(--primary); margin: 0 auto 12px; display: flex; justify-content: center; align-items: center; font-size: 32px; color: var(--primary); }
/* 家庭关系组件盒 */
.family-box { background: var(--card-bg); border-radius: 20px; padding: 16px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.02); }
.family-title { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.member-list { display: flex; gap: 12px; align-items: center; }
.member-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.04); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 11px; font-weight: 500; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; color: var(--text-muted); transition: 0.2s; }
.member-avatar.active { background: rgba(45, 212, 191, 0.12); border-color: var(--primary); color: var(--primary); }
.member-avatar.add-btn { border: 1px dashed rgba(255,255,255,0.3); color: var(--text-muted); }
.member-avatar:active { transform: scale(0.92); }
.list-menu { background: var(--card-bg); border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.02); }
.menu-item { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.03); display: flex; justify-content: space-between; align-items: center; font-size: 14px; cursor: pointer; transition: 0.2s; }
.menu-item:last-child { border: none; }
.menu-item:active { background: rgba(255,255,255,0.02); }
/* 收容弹出层（付费面板） */
.modal { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.92); z-index: 200; display: none; flex-direction: column; justify-content: center; padding: 24px; text-align: center; backdrop-filter: blur(8px); }
.premium-card { background: linear-gradient(145deg, #1e293b, #0f172a); border: 1px solid var(--premium); border-radius: 28px; padding: 28px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.btn-pay { background: var(--premium); color: #000; border: none; padding: 15px; border-radius: 14px; font-weight: bold; margin-top: 22px; width: 100%; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 15px; transition: 0.2s; }
.btn-pay:active { transform: scale(0.97); }
/* 支付旋转小菊花 */
.spinner { animation: rotate 1s linear infinite; display: none; font-size: 16px; }
@keyframes rotate { 100% { transform: rotate(360deg); } }
/* 外部右侧静态产品演说指引 */
.guide-panel { width: 340px; background: #1e293b; padding: 25px; border-radius: 24px; line-height: 1.7; font-size: 14px; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.guide-panel h3 { color: var(--primary); margin-bottom: 15px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.guide-panel li { margin-bottom: 12px; color: var(--text-muted); list-style-type: none; position: relative; padding-left: 18px; }
.guide-panel li::before { content: "•"; color: var(--primary); font-weight: bold; position: absolute; left: 0; top: 0; }
.guide-panel b { color: #fff; font-weight: 600; }
/* 移动端适配响应式 */
@media (max-width: 800px) {
body { flex-direction: column; padding: 20px 10px; }
.guide-panel { width: 100%; margin-top: 10px; }
}
</style>
<div class="phone-frame">
<div class="island"></div>
<div class="screen">
<div class="status-bar">
<span id="timeText">14:20</span>
<div style="display: flex; gap: 6px; align-items: center;">
<i class="fa-solid fa-signal"></i>
<i class="fa-solid fa-wifi"></i>
<i class="fa-solid fa-battery-full" style="color: var(--success);"></i>
</div>
</div>
<div class="page active" id="homePage">
<div class="header">
<div>
<h2 style="font-size: 21px; font-weight: 700;">你好，收纳家庭</h2>
<p style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">让屋子井井有条，全家共享记忆</p>
</div>
<div class="user-tag" id="homeProTag" onclick="openPremiumModal()">开通高级版</div>
</div>
<div class="search-bar">
<i class="fa-solid fa-magnifying-glass" style="color: var(--text-muted); margin-top: 2px;"></i>
<input type="text" placeholder="输入关键词，全家卡片闪电检索..." oninput="onSearchExecute(this.value)">
</div>
<div class="filter-tabs">
<div class="filter-tab active" id="tab-all" onclick="switchVisFilter('all')">全部</div>
<div class="filter-tab" id="tab-shared" onclick="switchVisFilter('shared')">👪 家庭共享</div>
<div class="filter-tab" id="tab-private" onclick="switchVisFilter('private')">🔒 仅自己</div>
</div>
<h4 style="margin-bottom: 12px; font-size: 15px; font-weight: 600; color: #cbd5e1;">仓储明细账目</h4>
<div id="dynamicCardContainer">
<div class="item-card" data-vis="shared" data-keywords="汽车钥匙 备用钥匙 锁">
<div class="item-img"><img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?w=120" alt="key"></div>
<div class="item-info">
<h5>车库B2备用汽车钥匙</h5>
<p><i class="fa-solid fa-location-dot" style="color: var(--primary);"></i> 玄关收纳柜左侧第一抽屉</p>
<p style="font-size:10px; color:#60a5fa;"><i class="fa-solid fa-circle-user"></i> 我创建的</p>
</div>
<div class="share-badge shared" onclick="changeSingleCardPrivacy(this, event)">👪 共享中</div>
</div>
<div class="item-card" data-vis="shared" data-keywords="感冒灵 药 医药箱 医疗">
<div class="item-img"><img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=120" alt="med"></div>
<div class="item-info">
<h5>999感冒灵与常规药箱</h5>
<p><i class="fa-solid fa-location-dot" style="color: var(--primary);"></i> 客厅电视柜右上方悬空木箱</p>
<p style="font-size:10px; color:#eab308;"><i class="fa-solid fa-circle-user"></i> 老婆归档</p>
</div>
<div class="share-badge shared" onclick="changeSingleCardPrivacy(this, event)">👪 共享中</div>
</div>
<div class="item-card" data-vis="private" data-keywords="房产证 契税证明 合同 重要证件">
<div class="item-img" style="background:#34d399; display:flex; justify-content:center; align-items:center;"><i class="fa-solid fa-file-shield" style="font-size:26px; color:#064e3b;"></i></div>
<div class="item-info">
<h5>不动产权属证明及购房合同</h5>
<p><i class="fa-solid fa-lock" style="color: var(--danger);"></i> 主卧大衣柜最底内层密码箱</p>
<p style="font-size:10px; color:var(--text-muted);"><i class="fa-solid fa-eye-slash"></i> 仅自己与配偶可见</p>
</div>
<div class="share-badge private" onclick="changeSingleCardPrivacy(this, event)">🔒 仅自己</div>
</div>
</div>
</div>
<div class="page" id="cameraPage" style="padding: 0;">
<div class="camera-screen">
<div class="scan-line" id="laserScanLine"></div>
<video id="hardwareVideoView" autoplay playsinline muted></video>
<div class="camera-ui">
<div style="padding: 40px 20px; text-align: center; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); font-size: 12px; color: #cbd5e1; letter-spacing: 0.5px;">
<i class="fa-solid fa-wand-magic-sparkles" style="color:var(--primary)"></i> 多模态 AI 空间立体识别中
</div>
<div style="background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); padding: 20px; width: 100%;">
<label style="font-size:11px; color:var(--text-muted); margin-bottom:6px; display:block;">🔒 设定本次归档物品查看权限：</label>
<select id="cameraSelectedPrivacy" style="width:100%; padding:10px; background:#1e293b; border:1px solid #475569; color:#fff; border-radius:10px; font-size:13px; margin-bottom:15px; outline:none;">
<option value="shared">👪 允许家人同步查看 (方便突发状况代取)</option>
<option value="private">🔒 仅限自己私人检索 (完全物理隔离保密)</option>
</select>
<div class="shutter" onclick="triggerCameraCaptureAndAI()"></div>
</div>
</div>
</div>
</div>
<div class="page" id="profilePage">
<div class="profile-hero">
<div class="avatar"><i class="fa-solid fa-house-chimney-user"></i></div>
<h3 style="color:#fff; font-size:18px;" id="myUserNameText">默认家庭主理人</h3>
<p style="font-size: 12px; color: var(--text-muted); margin-top:4px;" id="myUserPlanText">账户方案：免费基础版 (3人上限)</p>
</div>
<div class="family-box">
<div class="family-title">
<span style="font-weight:600; color:#e2e8f0;">👪 当前关联的家庭网络</span>
<span style="color:var(--primary); cursor:pointer; font-size:12px; font-weight:bold;" onclick="alert('🔗 邀请链接生成成功！\n已自动为您复制到剪贴板，发送给家人的微信，对方点击即可瞬间加入本收纳空间！')">+ 邀请成员</span>
</div>
<div class="member-list">
<div class="member-avatar active">主理人</div>
<div class="member-avatar active" onclick="alert('【成员足迹】\n老婆（核心共有权人）今天 08:14 帮您查阅了 [备用汽车钥匙] 的确切位置。')">老婆</div>
<div class="member-avatar active" onclick="alert('【成员权限】\n儿子（受限协同人）已被全局开启误删防护，且无法浏览标记为 [🔒仅自己] 的隔离物资。')">儿子</div>
<div class="member-avatar add-btn" onclick="alert('正在调起系统通讯录，支持添加父母、保洁阿姨，可定向对他们开放部分杂物空间。')">+ 权限</div>
</div>
</div>
<div class="list-menu">
<div class="menu-item" onclick="openPremiumModal()">
<span><i class="fa-solid fa-crown" style="color:var(--premium); margin-right:10px;"></i> 升级云端多口全家桶</span>
<i class="fa-solid fa-chevron-right" style="color:var(--text-muted); font-size:12px;"></i>
</div>
<div class="menu-item" onclick="alert('【智能反演机制已启动】\n系统已预设词库，凡是带有“日记、相册、金条、私房”等字眼的归档，均会自动询问或默认划归为独立绝对私密层。')">
<span><i class="fa-solid fa-shield-halved" style="color:var(--share-blue); margin-right:10px;"></i> 全自动化智能隐私洗牌</span>
<i class="fa-solid fa-chevron-right" style="color:var(--text-muted); font-size:12px;"></i>
</div>
</div>
</div>
<div class="modal" id="payFlowModal">
<div class="premium-card">
<i class="fa-solid fa-crown" style="font-size: 38px; color: var(--premium); margin-bottom: 12px; display:block;"></i>
<h3 style="font-size:18px;">解锁 Pro 联名家庭版</h3>
<p style="font-size: 13px; margin: 12px 0 18px; color: var(--text-muted); line-height:1.5;">终结“老婆，我那个东西放哪了”和“帮我找找看”的漫长家庭内耗。</p>
<div style="text-align: left; font-size: 12px; margin-bottom: 22px; color: #cbd5e1; line-height: 2;">
<p>✨ <b>无限网络集群</b> (打破30件基础存储壁垒)</p>
<p>✨ <b>绝对底层防谍隔离</b> (核心敏感卡片一键物理隐形)</p>
<p>✨ <b>多端状态原子化同步</b> (一人收纳，全家拥有记忆)</p>
</div>
<div style="font-size: 22px; font-weight: 800; margin-bottom: 5px; color: #fff;">¥9.9 <small style="font-size:12px; font-weight:normal; color:var(--text-muted);">/ 月</small></div>
<button class="btn-pay" id="mainPaymentTriggerBtn" onclick="runFakePaymentAnimationAndLogic()">
<i class="fa-solid fa-circle-notch spinner" id="loadingCircleSpinner"></i>
<span id="paymentBtnWordsText">立即激活 (首月免费体验)</span>
</button>
<p style="font-size: 11px; margin-top: 15px; cursor: pointer; color: var(--text-muted);" onclick="closePremiumModal()">暂不升级，体验基础版</p>
</div>
</div>
<div class="nav">
<div class="nav-item active" id="btn-nav-home" onclick="navigateToTargetPage('homePage')">
<i class="fa-solid fa-house"></i>首页
</div>
<div class="nav-item">
<div class="cam-btn" onclick="navigateToTargetPage('cameraPage')">
<i class="fa-solid fa-camera"></i>
</div>
</div>
<div class="nav-item" id="btn-nav-profile" onclick="navigateToTargetPage('profilePage')">
<i class="fa-solid fa-users"></i>成员
</div>
</div>
</div>
</div>
<div class="guide-panel">
<h3><i class="fa-solid fa-wand-magic-sparkles"></i> V4.5 原型演示脚本指南</h3>
<ul>
<li><b>第一步：测试可见性分流隔离</b><br>在模拟手机中点击 <b>👪 家庭共享</b> 或 <b>🔒 仅自己</b> 顶层页签，下方的资产卡片列表会瞬间完成毫秒级动态过滤。</li>
<li><b>第二步：绝妙的隐私动态对调（重磅）</b><br>回到“全部”列表，<b>直接点击</b>任意卡片右上角的蓝色“👪 共享中”或灰色“🔒 仅自己”药丸徽章。你会看到状态瞬间发生反转，并弹出数据底层隐私重组的中文警告提示！</li>
<li><b>第三步：测试AI录入并绑定可见性</b><br>点击中间<b>蓝色相机大按钮</b>，选择你想要的保护权限，再点击拍照。系统会触发扫描激光，并在2秒后在首页**无刷新插入**一条全新的AI识别卡片！</li>
<li><b>第四步：引爆商业内购闭环</b><br>点击首页右上角“开通高级版”，在弹窗中点击<b>“立即激活”</b>。你会看到高仿真调起支付的Loading动画，1.5秒后，**全App内所有的用户画像、文案、额度、甚至是已解锁状态都会全局实时改变**！</li>
</ul>
</div>
<script>
let hardwareStreamReference = null;
let isCurrentUserPremiumVipStatus = false; // 全局商业化控制状态
let activePrivacyFilteringMode = 'all'; // 选项卡状态追踪
// 顶置时钟永续同步
function synchronizeTopClock() {
const dateObj = new Date();
document.getElementById('timeText').innerText =
dateObj.getHours().toString().padStart(2, '0') + ":" +
dateObj.getMinutes().toString().padStart(2, '0');
}
setInterval(synchronizeTopClock, 1000);
synchronizeTopClock();
// 核心路由：路由切换控制中枢
function navigateToTargetPage(targetId) {
// 面板全隐
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
// 激活特定
document.getElementById(targetId).classList.add('active');
// 底部高亮洗牌
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
if(targetId === 'homePage') document.getElementById('btn-nav-home').classList.add('active');
if(targetId === 'profilePage') document.getElementById('btn-nav-profile').classList.add('active');
// 硬件资源级调用策略（安全沙盒降级）
if (targetId === 'cameraPage') {
bootHardwareCameraLens();
} else {
shutdownHardwareCameraLens();
}
}
// 启动摄像头
async function bootHardwareCameraLens() {
const videoContainer = document.getElementById('hardwareVideoView');
try {
hardwareStreamReference = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment' }, // 优先采用后置
audio: false
});
videoContainer.srcObject = hardwareStreamReference;
} catch (exception) {
console.log("沙盒提示：当前由于本地file://协议或无摄像头权限，系统已完美启用多模态UI动态仿真画布替代真实物理镜头。");
}
}
// 释放摄像头
function shutdownHardwareCameraLens() {
if (hardwareStreamReference) {
hardwareStreamReference.getTracks().forEach(track => track.stop());
hardwareStreamReference = null;
}
}
// 策略重控核心：一键转换单张卡片的隐私共有权
function changeSingleCardPrivacy(badgeElement, event) {
event.stopPropagation(); // 阻止向下冒泡
const parentCardElement = badgeElement.closest('.item-card');
const currentPrivacyState = parentCardElement.getAttribute('data-vis');
if (currentPrivacyState === 'shared') {
// 变私密
parentCardElement.setAttribute('data-vis', 'private');
badgeElement.innerText = "🔒 仅自己";
badgeElement.className = "share-badge private";
alert("🔒 隐私权限原子化调整成功！\n该物品的空间存放详情已从家庭共有云中撤回。现在其他家人的手机上，此条记录已被完全物理隐形。");
} else {
// 变共享
parentCardElement.setAttribute('data-vis', 'shared');
badgeElement.innerText = "👪 共享中";
badgeElement.className = "share-badge shared";
alert("👪 家庭协同共享开启！\n该物品的位置已并入全家互助网络。当您不方便拿取时，家人可直接通过他们自己的手机精准定位并代劳。");
}
// 维持现有过滤器刷新
switchVisFilter(activePrivacyFilteringMode);
}
// 顶层流式洗牌页签控制
function switchVisFilter(filterMode) {
activePrivacyFilteringMode = filterMode;
document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
document.getElementById('tab-' + filterMode).classList.add('active');
const allItems = document.querySelectorAll('.item-card');
allItems.forEach(card => {
const itemVisAttribute = card.getAttribute('data-vis');
if (filterMode === 'all' || itemVisAttribute === filterMode) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
}
// 流式模糊高频搜索检索
function onSearchExecute(keywordString) {
const allItems = document.querySelectorAll('.item-card');
allItems.forEach(card => {
const searchKeywords = card.getAttribute('data-keywords').toLowerCase();
const cardTitleText = card.querySelector('h5').innerText.toLowerCase();
const isMatchSearch = searchKeywords.includes(keywordString.toLowerCase()) || cardTitleText.includes(keywordString.toLowerCase());
const itemVisAttribute = card.getAttribute('data-vis');
const isMatchTab = (activePrivacyFilteringMode === 'all' || itemVisAttribute === activePrivacyFilteringMode);
if (isMatchSearch && isMatchTab) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
}
// 模拟快门AI深度运算及动态DOM无刷新注入
function triggerCameraCaptureAndAI() {
const laserLine = document.getElementById('laserScanLine');
const chosenDefaultVis = document.getElementById('cameraSelectedPrivacy').value;
laserLine.style.display = 'block'; // 激活扫描激光线
setTimeout(() => {
laserLine.style.display = 'none';
alert("✨ 多模态 AI 空间解算及类目视觉标记注入成功！\n已自动判定空间相对坐标并完成账目入库。");
navigateToTargetPage('homePage');
const domContainer = document.getElementById('dynamicCardContainer');
if(chosenDefaultVis === 'shared') {
domContainer.insertAdjacentHTML('afterbegin', `
<div class="item-card" data-vis="shared" data-keywords="智能相机 摄像机 数码 电子产品">
<div class="item-img" style="background:#0284c7; display:flex; justify-content:center; align-items:center;"><i class="fa-solid fa-video" style="font-size:24px; color:#fff;"></i></div>
<div class="item-info">
<h5>全景家用智能摄像机 (刚录入)</h5>
<p><i class="fa-solid fa-location-dot" style="color: var(--primary);"></i> 客厅电视柜最左侧深色备用盒</p>
<p style="font-size:10px; color:#60a5fa;"><i class="fa-solid fa-circle-user"></i> 我创建的</p>
</div>
<div class="share-badge shared" onclick="changeSingleCardPrivacy(this, event)">👪 共享中</div>
</div>
`);
} else {
domContainer.insertAdjacentHTML('afterbegin', `
<div class="item-card" data-vis="private" data-keywords="纪念币 私房钱 黄金 资产">
<div class="item-img" style="background:#db2777; display:flex; justify-content:center; align-items:center;"><i class="fa-solid fa-coins" style="font-size:24px; color:#fff;"></i></div>
<div class="item-info">
<h5>限量版周年生肖纪念币盒</h5>
<p><i class="fa-solid fa-lock" style="color: var(--danger);"></i> 书房第三排书架《大英百科》夹层</p>
<p style="font-size:10px; color:var(--text-muted);"><i class="fa-solid fa-eye-slash"></i> 仅自己可见</p>
</div>
<div class="share-badge private" onclick="changeSingleCardPrivacy(this, event)">🔒 仅自己</div>
</div>
`);
}
switchVisFilter(activePrivacyFilteringMode);
}, 1800);
}
// 高仿真商业化变现支付动效流
function runFakePaymentAnimationAndLogic() {
const spinnerCircle = document.getElementById('loadingCircleSpinner');
const wordsPrompt = document.getElementById('paymentBtnWordsText');
spinnerCircle.style.display = 'inline-block';
wordsPrompt.innerText = '正在调起微信/支付宝安全网关...';
setTimeout(() => {
spinnerCircle.style.display = 'none';
wordsPrompt.innerText = '立即激活 (首月免费体验)';
closePremiumModal();
// 核心全局变量篡改
isCurrentUserPremiumVipStatus = true;
alert("👑 恭喜！家庭联名 Pro 专业版授权全链条激活成功！\n无线云空间扩容完毕，跨端全家实时同步流水线已上线。");
// 刷新全App内的UI渲染形态，展现极致交互的高保真
document.getElementById('homeProTag').innerText = "👑 家庭 Pro 版";
document.getElementById('homeProTag').className = "user-tag pro";
document.getElementById('myUserNameText').innerText = "尊贵·全家共享高级主理人";
document.getElementById('myUserPlanText').innerText = "账户方案：家庭 Pro 会员 (多端无限设备连通)";
document.getElementById('myUserPlanText').style.color = "var(--primary)";
}, 1600);
}
function openPremiumModal() { document.getElementById('payFlowModal').style.display = 'flex'; }
function closePremiumModal() { document.getElementById('payFlowModal').style.display = 'none'; }
</script>
