1673 行
40 KiB
Plaintext
1673 行
40 KiB
Plaintext
<template>
|
||
<view class="profile-page" :class="pageRtlClass">
|
||
<!-- Ambient Aurora Glow Behind Header -->
|
||
<view class="profile-aurora-glow"></view>
|
||
|
||
<scroll-view class="profile-scroll" :scroll-y="true">
|
||
<view class="profile-content">
|
||
<!-- 1. Executive Page Header -->
|
||
<view class="profile-header">
|
||
<view class="header-text-group">
|
||
<text class="profile-title">{{ t('title') }}</text>
|
||
<text class="profile-subtitle">{{ t('subtitle') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 2. Executive Hero Bento Card: Avatar, Identity, PRO Badge & Quota -->
|
||
<view class="bento-card hero-identity-card">
|
||
<view class="hero-identity-top" @click="onEditProfileClick">
|
||
<!-- Double Ring Luxury Avatar -->
|
||
<view class="avatar-ring-container">
|
||
<view class="avatar-wrap">
|
||
<image
|
||
v-if="state.account.avatar !== ''"
|
||
class="avatar-img"
|
||
:src="state.account.avatar"
|
||
mode="aspectFill"
|
||
@click.stop="onAvatarClick"
|
||
/>
|
||
<view
|
||
v-else
|
||
class="avatar-empty"
|
||
@click.stop="onAvatarChoose"
|
||
>
|
||
<text class="avatar-add-icon">+</text>
|
||
</view>
|
||
<view
|
||
v-if="state.account.avatar !== ''"
|
||
class="avatar-remove-badge"
|
||
@click.stop="onAvatarDelete"
|
||
>
|
||
<text class="avatar-remove-icon">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Identity Info Column -->
|
||
<view class="identity-info">
|
||
<view class="identity-name-row">
|
||
<text class="identity-name">{{ state.account.name }}</text>
|
||
<view class="tier-pill">
|
||
<text class="tier-pill-text">{{ t('tierBadge') }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="identity-company">{{ state.account.company }}</text>
|
||
<text class="identity-dept">{{ state.account.department }}</text>
|
||
</view>
|
||
|
||
<!-- Quick Edit Pill CTA -->
|
||
<view class="identity-edit-btn">
|
||
<text class="identity-edit-text">{{ t('editProfile') }} ↗</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bento-inner-divider"></view>
|
||
|
||
<!-- Card Quota Progress Bento Bar -->
|
||
<view class="quota-bento-section" @click="onQuotaClick">
|
||
<view class="quota-meta-row">
|
||
<view class="quota-label-group">
|
||
<text class="quota-section-title">{{ t('quotaCards') }}</text>
|
||
<view class="quota-status-dot"></view>
|
||
<text class="quota-status-text">{{ t('planActive') }}</text>
|
||
</view>
|
||
<text class="quota-numbers">{{ quotaLine }} ↗</text>
|
||
</view>
|
||
|
||
<view class="quota-track">
|
||
<view
|
||
class="quota-fill"
|
||
:class="{ 'quota-fill-danger': quotaExceeded }"
|
||
:style="{ width: quotaPercent + '%' }"
|
||
></view>
|
||
</view>
|
||
|
||
<view v-if="quotaExceeded" class="quota-alert-row">
|
||
<text class="quota-alert-text">{{ t('quotaUpgrade') }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 3. Executive Metrics Bento Row (Active Cards, Radar Visitors, Captured Leads) -->
|
||
<view class="metrics-bento-row">
|
||
<view class="metrics-bento-item" @click="openPage('/pages/owner/card/index')">
|
||
<view class="metrics-top-meta">
|
||
<text class="metrics-title">{{ t('metricsCards') }}</text>
|
||
<text class="metrics-arrow">›</text>
|
||
</view>
|
||
<view class="metrics-value-row">
|
||
<text class="metrics-number">{{ metricsData.cards }}</text>
|
||
<text class="metrics-unit">CARDS</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="metrics-bento-item" @click="openPage('/pages/owner/radar')">
|
||
<view class="metrics-top-meta">
|
||
<text class="metrics-title">{{ t('metricsVisitors') }}</text>
|
||
<text class="metrics-arrow">›</text>
|
||
</view>
|
||
<view class="metrics-value-row">
|
||
<text class="metrics-number">{{ metricsData.visitors }}</text>
|
||
<text class="metrics-unit">VIEWS</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="metrics-bento-item" @click="openPage('/pages/owner/leads')">
|
||
<view class="metrics-top-meta">
|
||
<text class="metrics-title">{{ t('metricsLeads') }}</text>
|
||
<text class="metrics-arrow">›</text>
|
||
</view>
|
||
<view class="metrics-value-row">
|
||
<text class="metrics-number">{{ metricsData.leads }}</text>
|
||
<text class="metrics-unit">LEADS</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 4. Digital Card Studio Bento (2x3 Grid with 1.5px Micro Vector Icons) -->
|
||
<view class="section-header">
|
||
<text class="section-title">{{ t('cardStudioSection') }}</text>
|
||
</view>
|
||
<view class="workspace-grid">
|
||
<!-- 4.1 Digital Cards -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/index')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-cards">
|
||
<view class="vector-cards-icon">
|
||
<view class="vec-card-front"></view>
|
||
<view class="vec-card-back"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('myCards') }}</text>
|
||
<text class="grid-item-sub">{{ myCardsSubText }}</text>
|
||
</view>
|
||
|
||
<!-- 4.2 Card Edit -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/edit')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-edit">
|
||
<view class="vector-edit-icon">
|
||
<view class="vec-edit-pen"></view>
|
||
<view class="vec-edit-line"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('cardEdit') }}</text>
|
||
<text class="grid-item-sub">{{ cardEditSubText }}</text>
|
||
</view>
|
||
|
||
<!-- 4.3 Cases -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/cases')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-cases">
|
||
<view class="vector-cases-icon">
|
||
<view class="vec-cases-frame"></view>
|
||
<view class="vec-cases-sun"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('productCases') }}</text>
|
||
<text class="grid-item-sub">{{ productCasesSubText }}</text>
|
||
</view>
|
||
|
||
<!-- 4.4 Articles -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/articles')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-articles">
|
||
<view class="vector-articles-icon">
|
||
<view class="vec-doc-page"></view>
|
||
<view class="vec-doc-line1"></view>
|
||
<view class="vec-doc-line2"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('articleDynamics') }}</text>
|
||
<text class="grid-item-sub">{{ articleDynamicsSubText }}</text>
|
||
</view>
|
||
|
||
<!-- 4.5 Share Poster -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/qrcode')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-poster">
|
||
<view class="vector-qr-icon">
|
||
<view class="vec-qr-dot dot1"></view>
|
||
<view class="vec-qr-dot dot2"></view>
|
||
<view class="vec-qr-dot dot3"></view>
|
||
<view class="vec-qr-dot dot4"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('sharePoster') }}</text>
|
||
<text class="grid-item-sub">{{ sharePosterSubText }}</text>
|
||
</view>
|
||
|
||
<!-- 4.6 Exchange Hall -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/hall/index')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-hall">
|
||
<view class="vector-hall-icon">
|
||
<view class="vec-arrow-left"></view>
|
||
<view class="vec-arrow-right"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('exchangeHall') }}</text>
|
||
<text class="grid-item-sub">{{ exchangeHallSubText }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 5. Workspace Fleet Bento: NFC Hardware & Team Overview (2x2 Grid) -->
|
||
<view class="section-header">
|
||
<text class="section-title">{{ t('workspaceSection') }}</text>
|
||
</view>
|
||
<view class="workspace-grid">
|
||
<!-- 5.1 NFC Scan -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/nfc/scan')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-scan">
|
||
<view class="vector-nfc-icon">
|
||
<view class="vec-nfc-card"></view>
|
||
<view class="vec-nfc-wave"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('nfcScan') }}</text>
|
||
</view>
|
||
|
||
<!-- 5.2 NFC Mode -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/nfc/mode')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-mode">
|
||
<view class="vector-mode-icon">
|
||
<view class="vec-mode-sq sq1"></view>
|
||
<view class="vec-mode-sq sq2"></view>
|
||
<view class="vec-mode-sq sq3"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('nfcMode') }}</text>
|
||
</view>
|
||
|
||
<!-- 5.3 NFC Security -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/nfc/security')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-security">
|
||
<view class="vector-sec-icon">
|
||
<view class="vec-sec-shield"></view>
|
||
<view class="vec-sec-core"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('nfcSecurity') }}</text>
|
||
</view>
|
||
|
||
<!-- 5.4 Team Briefing -->
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/team/overview')">
|
||
<view class="grid-item-head">
|
||
<view class="icon-pod pod-team">
|
||
<view class="vector-team-icon">
|
||
<view class="vec-team-bar bar1"></view>
|
||
<view class="vec-team-bar bar2"></view>
|
||
<view class="vec-team-bar bar3"></view>
|
||
</view>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('teamBriefing') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 6. Notifications & System Switches Bento -->
|
||
<view class="section-header">
|
||
<text class="section-title">{{ t('notificationsSection') }}</text>
|
||
</view>
|
||
<view class="bento-card">
|
||
<view class="menu-row menu-row-switch">
|
||
<view class="menu-prefix-pod pod-radar-notice">
|
||
<view class="vector-pulse-icon"></view>
|
||
</view>
|
||
<view class="switch-label-wrap">
|
||
<text class="menu-title">{{ t('radarPushTitle') }}</text>
|
||
<text class="menu-subtitle">{{ t('radarPushDesc') }}</text>
|
||
</view>
|
||
<view class="switch-touch-area">
|
||
<switch
|
||
:checked="state.notifications.radarPush"
|
||
color="#0088FF"
|
||
@change="onRadarPushChange"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-divider"></view>
|
||
|
||
<view class="menu-row menu-row-switch">
|
||
<view class="menu-prefix-pod pod-lead-notice">
|
||
<view class="vector-bell-icon"></view>
|
||
</view>
|
||
<view class="switch-label-wrap">
|
||
<text class="menu-title">{{ t('leadNoticeTitle') }}</text>
|
||
<text class="menu-subtitle">{{ t('leadNoticeDesc') }}</text>
|
||
</view>
|
||
<view class="switch-touch-area">
|
||
<switch
|
||
:checked="state.notifications.leadNotice"
|
||
color="#0088FF"
|
||
@change="onLeadNoticeChange"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 7. Preferences & Display Language Bento -->
|
||
<view class="section-header">
|
||
<text class="section-title">{{ t('languageSection') }}</text>
|
||
</view>
|
||
<view class="bento-card">
|
||
<view class="menu-row menu-row-arrow" @click="openLanguageDrawer">
|
||
<view class="menu-prefix-pod pod-globe">
|
||
<view class="vector-globe-icon"></view>
|
||
</view>
|
||
<view class="menu-label-wrap">
|
||
<text class="menu-title">{{ t('languageLabel') }}</text>
|
||
</view>
|
||
<view class="menu-value-wrap">
|
||
<view class="lang-pill">
|
||
<text class="menu-value-text">{{ currentLanguageLabel }}</text>
|
||
</view>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 8. Subtle Ghost Sign Out Button -->
|
||
<view class="signout-section">
|
||
<button class="signout-btn" @click="onLogout">
|
||
<text class="signout-text">{{ t('logout') }}</text>
|
||
</button>
|
||
</view>
|
||
|
||
<!-- System error notification if any -->
|
||
<view v-if="state.errorMessage !== ''" class="error-notice">
|
||
<text class="error-notice-text">{{ state.errorMessage }}</text>
|
||
</view>
|
||
|
||
<view class="bottom-safe-space"></view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- Language Selection Bottom Sheet Drawer -->
|
||
<view v-if="languageDrawerVisible" class="drawer-mask" @click="closeLanguageDrawer">
|
||
<view class="drawer-sheet" :class="pageRtlClass" @click.stop="">
|
||
<view class="drawer-header">
|
||
<text class="drawer-title">{{ t('languageLabel') }}</text>
|
||
<view class="drawer-close-btn" @click="closeLanguageDrawer">
|
||
<text class="drawer-close-symbol">x</text>
|
||
</view>
|
||
</view>
|
||
<view class="drawer-divider"></view>
|
||
<scroll-view class="drawer-lang-scroll" :scroll-y="true">
|
||
<view class="drawer-lang-list">
|
||
<view
|
||
v-for="item in languageList"
|
||
:key="item.code"
|
||
class="drawer-lang-item"
|
||
:class="{ 'drawer-lang-item-active': item.code === state.locale }"
|
||
@click="onSelectLocaleFromDrawer(item.code)"
|
||
>
|
||
<text
|
||
class="drawer-lang-text"
|
||
:class="{ 'drawer-lang-text-active': item.code === state.locale }"
|
||
>
|
||
{{ item.label }}
|
||
</text>
|
||
<view v-if="item.code === state.locale" class="drawer-check-icon"></view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import {
|
||
ProfileState,
|
||
loadProfileSettings,
|
||
saveProfileSettings,
|
||
toggleRadarPush,
|
||
toggleLeadNotice,
|
||
setPreferredLocale,
|
||
resolveProfileText,
|
||
previewAccountAvatar,
|
||
removeAccountAvatar,
|
||
calculateQuotaPercent,
|
||
} from './useProfile.uts';
|
||
import { OmniLocale, isRtl } from '../../../common/locale.uts';
|
||
import { fetchCardQuota } from '../../../common/api.uts';
|
||
import { getTenantId, clearAuthToken } from '../../../common/request.uts';
|
||
|
||
type LangOption = {
|
||
code: OmniLocale;
|
||
label: string;
|
||
};
|
||
|
||
const state = reactive<ProfileState>(loadProfileSettings());
|
||
const quotaLine = ref('--');
|
||
const quotaExceeded = ref(false);
|
||
const quotaPercent = ref(20);
|
||
const languageDrawerVisible = ref(false);
|
||
|
||
const metricsData = reactive({
|
||
cards: '1',
|
||
visitors: '128',
|
||
leads: '12',
|
||
});
|
||
|
||
const pageRtlClass = computed((): string => {
|
||
return isRtl(state.locale) ? 'page-rtl' : '';
|
||
});
|
||
|
||
const currentLanguageLabel = computed((): string => {
|
||
for (let i = 0; i < languageList.length; i++) {
|
||
if (languageList[i].code === state.locale) {
|
||
return languageList[i].label;
|
||
}
|
||
}
|
||
return 'English';
|
||
});
|
||
|
||
function openLanguageDrawer(): void {
|
||
languageDrawerVisible.value = true;
|
||
}
|
||
|
||
function closeLanguageDrawer(): void {
|
||
languageDrawerVisible.value = false;
|
||
}
|
||
|
||
function onSelectLocaleFromDrawer(code: OmniLocale): void {
|
||
setPreferredLocale(state, code);
|
||
closeLanguageDrawer();
|
||
}
|
||
|
||
function onAvatarClick(): void {
|
||
if (state.account.avatar !== '') {
|
||
previewAccountAvatar(state);
|
||
} else {
|
||
onAvatarChoose();
|
||
}
|
||
}
|
||
|
||
function onAvatarChoose(): void {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sourceType: ['album', 'camera'],
|
||
success: (res: { tempFilePaths: string[] }) => {
|
||
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
||
state.account.avatar = res.tempFilePaths[0];
|
||
saveProfileSettings(state);
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
function onAvatarDelete(): void {
|
||
removeAccountAvatar(state);
|
||
saveProfileSettings(state);
|
||
}
|
||
|
||
const languageList: LangOption[] = [
|
||
{ code: 'zh-CN', label: '简体中文' },
|
||
{ code: 'en-US', label: 'English' },
|
||
{ code: 'ar-SA', label: 'العربية' },
|
||
{ code: 'es-ES', label: 'Español' },
|
||
{ code: 'de-DE', label: 'Deutsch' },
|
||
{ code: 'fr-FR', label: 'Français' },
|
||
{ code: 'ja-JP', label: '日本語' },
|
||
];
|
||
|
||
function t(key: string): string {
|
||
return resolveProfileText(key);
|
||
}
|
||
|
||
function onRadarPushChange(e: UniSwitchChangeEvent): void {
|
||
toggleRadarPush(state, e.detail.value);
|
||
}
|
||
|
||
function onLeadNoticeChange(e: UniSwitchChangeEvent): void {
|
||
toggleLeadNotice(state, e.detail.value);
|
||
}
|
||
|
||
const myCardsSubText = computed((): string => {
|
||
return state.locale === 'zh-CN' ? '查看名片与在线出示' : 'View & share';
|
||
});
|
||
|
||
const cardEditSubText = computed((): string => {
|
||
return state.locale === 'zh-CN' ? '修改联系与社交矩阵' : 'Edit profile';
|
||
});
|
||
|
||
const productCasesSubText = computed((): string => {
|
||
return state.locale === 'zh-CN' ? '画廊相册与量化成效' : 'Showcases & metrics';
|
||
});
|
||
|
||
const articleDynamicsSubText = computed((): string => {
|
||
return state.locale === 'zh-CN' ? '发布行业博文与动态' : 'Publish insights';
|
||
});
|
||
|
||
const sharePosterSubText = computed((): string => {
|
||
return state.locale === 'zh-CN' ? '展会专属扫码展台' : 'Digital QR poster';
|
||
});
|
||
|
||
const exchangeHallSubText = computed((): string => {
|
||
return state.locale === 'zh-CN' ? '面对面扫码碰卡互换' : 'Peer exchange';
|
||
});
|
||
|
||
function onEditProfileClick(): void {
|
||
openPage('/pages/owner/card/edit');
|
||
}
|
||
|
||
function onQuotaClick(): void {
|
||
const isZh = state.locale === 'zh-CN';
|
||
uni.showModal({
|
||
title: isZh ? '企业商业配额' : 'Commercial Quota',
|
||
content: isZh
|
||
? `当前用量：${quotaLine.value} 张名片。\n如需扩容或升级企业旗舰版，请前往管理后台或联系您的企业管理员。`
|
||
: `Current Usage: ${quotaLine.value} cards.\nTo upgrade or expand quota, please visit the admin console.`,
|
||
showCancel: false,
|
||
confirmText: isZh ? '知道了' : 'OK',
|
||
});
|
||
}
|
||
|
||
function openPage(url: string): void {
|
||
const tabPages = [
|
||
'/pages/owner/workplace/index',
|
||
'/pages/owner/card/index',
|
||
'/pages/owner/radar',
|
||
'/pages/owner/leads',
|
||
'/pages/owner/profile/index',
|
||
];
|
||
const isTab = tabPages.some((tab: string): boolean => url.startsWith(tab));
|
||
if (isTab) {
|
||
uni.switchTab({
|
||
url,
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
}
|
||
}
|
||
|
||
async function loadQuota(): Promise<void> {
|
||
try {
|
||
const tenantId = getTenantId();
|
||
const quota = await fetchCardQuota(tenantId !== '' ? tenantId : 1);
|
||
quotaLine.value = `${quota.used} / ${quota.limit}`;
|
||
quotaExceeded.value = quota.exceeded === true;
|
||
quotaPercent.value = calculateQuotaPercent(quota.used, quota.limit);
|
||
metricsData.cards = String(quota.used);
|
||
} catch (_e) {
|
||
quotaLine.value = '1 / 5';
|
||
quotaExceeded.value = false;
|
||
quotaPercent.value = calculateQuotaPercent(1, 5);
|
||
metricsData.cards = '1';
|
||
}
|
||
}
|
||
|
||
function onLogout(): void {
|
||
uni.showModal({
|
||
title: resolveProfileText('confirmLogoutTitle'),
|
||
content: resolveProfileText('confirmLogoutContent'),
|
||
success: (res: { confirm?: boolean }) => {
|
||
if (res.confirm === true) {
|
||
clearAuthToken();
|
||
uni.showToast({
|
||
title: resolveProfileText('logout'),
|
||
icon: 'none',
|
||
});
|
||
// #ifdef H5
|
||
if (typeof window !== 'undefined') {
|
||
window.location.hash = '#/pages/common/login';
|
||
return;
|
||
}
|
||
// #endif
|
||
uni.reLaunch({
|
||
url: '/pages/common/login',
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
onShow(() => {
|
||
const loaded = loadProfileSettings();
|
||
state.account = loaded.account;
|
||
state.notifications = loaded.notifications;
|
||
state.locale = loaded.locale;
|
||
loadQuota();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ============================================================
|
||
OmniCard AI Design Tokens (Executive Clean Consumerized B2B)
|
||
- Background: #F5F8FC
|
||
- Surface: #FFFFFF
|
||
- Border: #EBF1F7
|
||
- Text Primary: #101828
|
||
- Text Secondary: #64748B
|
||
- Brand Primary: #0088FF
|
||
- Ambient Shadow: 0 8px 30px rgba(0,0,0,0.04), 0 2px 8px rgba(11,99,229,0.03)
|
||
============================================================ */
|
||
|
||
.profile-page {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
background-color: #F5F8FC;
|
||
}
|
||
|
||
/* Ambient Aurora Glow */
|
||
.profile-aurora-glow {
|
||
position: absolute;
|
||
top: -48px;
|
||
left: 10%;
|
||
right: 10%;
|
||
height: 150px;
|
||
background: linear-gradient(135deg, rgba(0, 210, 255, 0.12) 0%, rgba(0, 136, 255, 0.08) 50%, rgba(99, 102, 241, 0.04) 100%);
|
||
filter: blur(36px);
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.profile-scroll {
|
||
flex: 1;
|
||
}
|
||
|
||
.profile-content {
|
||
padding: 20px 16px 36px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 1. Header */
|
||
.profile-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 18px;
|
||
padding: 4px 2px;
|
||
}
|
||
|
||
.header-text-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.profile-title {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #101828;
|
||
line-height: 1.25;
|
||
letter-spacing: -0.3px;
|
||
}
|
||
|
||
.profile-subtitle {
|
||
font-size: 13px;
|
||
color: #64748B;
|
||
margin-top: 4px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 2. Bento Card Universal */
|
||
.bento-card {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #EBF1F7;
|
||
border-radius: 20px;
|
||
padding: 16px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(11, 99, 229, 0.03);
|
||
}
|
||
|
||
/* Hero Identity Card */
|
||
.hero-identity-card {
|
||
padding: 18px 16px 16px 16px;
|
||
transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
|
||
.hero-identity-top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Avatar with Ring */
|
||
.avatar-ring-container {
|
||
position: relative;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 31px;
|
||
padding: 2px;
|
||
background: linear-gradient(135deg, rgba(0, 163, 255, 0.4) 0%, rgba(11, 99, 229, 0.15) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
}
|
||
|
||
.avatar-wrap {
|
||
position: relative;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 28px;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 28px;
|
||
background-color: #EBF1F7;
|
||
}
|
||
|
||
.avatar-empty {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 28px;
|
||
border: 1.5px dashed #CBD5E1;
|
||
background-color: #F8FAFC;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-add-icon {
|
||
font-size: 24px;
|
||
color: #64748B;
|
||
line-height: 1;
|
||
}
|
||
|
||
.avatar-remove-badge {
|
||
position: absolute;
|
||
top: -2px;
|
||
right: -2px;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 9px;
|
||
background-color: #F04438;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1.5px solid #FFFFFF;
|
||
}
|
||
|
||
.avatar-remove-icon {
|
||
color: #FFFFFF;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
|
||
.identity-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
|
||
.identity-name-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.identity-name {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #101828;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.tier-pill {
|
||
margin-left: 8px;
|
||
padding: 2px 8px;
|
||
border-radius: 9999px;
|
||
background: linear-gradient(135deg, #00A3FF 0%, #0B63E5 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tier-pill-text {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
letter-spacing: 0.6px;
|
||
}
|
||
|
||
.identity-company {
|
||
font-size: 13px;
|
||
color: #64748B;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.identity-dept {
|
||
font-size: 12px;
|
||
color: #94A3B8;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.identity-edit-btn {
|
||
padding: 6px 12px;
|
||
background-color: #EBF5FF;
|
||
border-radius: 9999px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 32px;
|
||
}
|
||
|
||
.identity-edit-btn:active {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.identity-edit-text {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #0088FF;
|
||
}
|
||
|
||
.bento-inner-divider {
|
||
height: 1px;
|
||
background-color: #F1F5F9;
|
||
margin: 16px 0 14px 0;
|
||
}
|
||
|
||
/* Quota Bento Progress */
|
||
.quota-bento-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.quota-meta-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.quota-label-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.quota-section-title {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #101828;
|
||
}
|
||
|
||
.quota-status-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 3px;
|
||
background-color: #12B76A;
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.quota-status-text {
|
||
font-size: 11px;
|
||
color: #12B76A;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.quota-numbers {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #0088FF;
|
||
}
|
||
|
||
.quota-track {
|
||
height: 6px;
|
||
background-color: #EBF1F7;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.quota-fill {
|
||
height: 100%;
|
||
border-radius: 3px;
|
||
background: linear-gradient(90deg, #00A3FF 0%, #0B63E5 100%);
|
||
}
|
||
|
||
.quota-fill-danger {
|
||
background: #F04438;
|
||
}
|
||
|
||
.quota-alert-row {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.quota-alert-text {
|
||
font-size: 11px;
|
||
color: #F04438;
|
||
}
|
||
|
||
/* 3. Executive Metrics Bento Row */
|
||
.metrics-bento-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.metrics-bento-item {
|
||
width: calc((100% - 16px) / 3);
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #EBF1F7;
|
||
border-radius: 16px;
|
||
padding: 12px 10px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
min-height: 72px;
|
||
}
|
||
|
||
.metrics-bento-item:active {
|
||
transform: scale(0.97);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.metrics-top-meta {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.metrics-title {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: #64748B;
|
||
}
|
||
|
||
.metrics-arrow {
|
||
font-size: 14px;
|
||
color: #CBD5E1;
|
||
line-height: 1;
|
||
}
|
||
|
||
.metrics-value-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: baseline;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.metrics-number {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #101828;
|
||
line-height: 1.1;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.metrics-unit {
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
color: #94A3B8;
|
||
margin-left: 4px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* 4. Section Headers */
|
||
.section-header {
|
||
padding: 6px 2px 8px 2px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #94A3B8;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.6px;
|
||
}
|
||
|
||
/* Workspace Grid (Bento 2x3 & 2x2) */
|
||
.workspace-grid {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.workspace-grid-item {
|
||
width: calc(50% - 6px);
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #EBF1F7;
|
||
border-radius: 16px;
|
||
padding: 14px 12px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
min-height: 88px;
|
||
box-sizing: border-box;
|
||
transition: transform 0.15s ease, opacity 0.15s ease;
|
||
}
|
||
|
||
.workspace-grid-item:active {
|
||
opacity: 0.85;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.grid-item-head {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.grid-arrow {
|
||
font-size: 16px;
|
||
color: #CBD5E1;
|
||
line-height: 1;
|
||
}
|
||
|
||
.grid-item-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #101828;
|
||
}
|
||
|
||
.grid-item-sub {
|
||
font-size: 11px;
|
||
color: #94A3B8;
|
||
margin-top: 2px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* ============================================================
|
||
Micro Vector Icon Pods (Pure CSS 1.5px Modern Graphic Pods)
|
||
============================================================ */
|
||
.icon-pod {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.pod-cards { background-color: #EBF5FF; }
|
||
.pod-edit { background-color: #EFF6FF; }
|
||
.pod-cases { background-color: #ECFDF5; }
|
||
.pod-articles { background-color: #FFF7ED; }
|
||
.pod-poster { background-color: #F5F3FF; }
|
||
.pod-hall { background-color: #F0FDF4; }
|
||
.pod-scan { background-color: #EBF5FF; }
|
||
.pod-mode { background-color: #F1F5F9; }
|
||
.pod-security { background-color: #FEF2F2; }
|
||
.pod-team { background-color: #F0FDF4; }
|
||
|
||
/* 4.1 Micro Cards Vector */
|
||
.vector-cards-icon {
|
||
position: relative;
|
||
width: 16px;
|
||
height: 14px;
|
||
}
|
||
.vec-card-front {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 3px;
|
||
width: 13px;
|
||
height: 10px;
|
||
border: 1.5px solid #0088FF;
|
||
border-radius: 2px;
|
||
background-color: #FFFFFF;
|
||
box-sizing: border-box;
|
||
}
|
||
.vec-card-back {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 12px;
|
||
height: 9px;
|
||
border: 1.5px solid #94A3B8;
|
||
border-radius: 2px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 4.2 Micro Edit Vector */
|
||
.vector-edit-icon {
|
||
position: relative;
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
.vec-edit-pen {
|
||
position: absolute;
|
||
left: 2px;
|
||
top: 2px;
|
||
width: 11px;
|
||
height: 4px;
|
||
border: 1.5px solid #2563EB;
|
||
border-radius: 2px;
|
||
transform: rotate(-45deg);
|
||
box-sizing: border-box;
|
||
}
|
||
.vec-edit-line {
|
||
position: absolute;
|
||
left: 1px;
|
||
bottom: 1px;
|
||
width: 13px;
|
||
height: 1.5px;
|
||
background-color: #94A3B8;
|
||
}
|
||
|
||
/* 4.3 Micro Cases Vector */
|
||
.vector-cases-icon {
|
||
position: relative;
|
||
width: 16px;
|
||
height: 14px;
|
||
}
|
||
.vec-cases-frame {
|
||
width: 16px;
|
||
height: 13px;
|
||
border: 1.5px solid #10B981;
|
||
border-radius: 3px;
|
||
box-sizing: border-box;
|
||
}
|
||
.vec-cases-sun {
|
||
position: absolute;
|
||
top: 3px;
|
||
right: 3px;
|
||
width: 3px;
|
||
height: 3px;
|
||
border-radius: 1.5px;
|
||
background-color: #10B981;
|
||
}
|
||
|
||
/* 4.4 Micro Articles Vector */
|
||
.vector-articles-icon {
|
||
position: relative;
|
||
width: 14px;
|
||
height: 16px;
|
||
}
|
||
.vec-doc-page {
|
||
width: 14px;
|
||
height: 16px;
|
||
border: 1.5px solid #F97316;
|
||
border-radius: 2px;
|
||
box-sizing: border-box;
|
||
}
|
||
.vec-doc-line1 {
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 3px;
|
||
width: 8px;
|
||
height: 1.5px;
|
||
background-color: #F97316;
|
||
}
|
||
.vec-doc-line2 {
|
||
position: absolute;
|
||
top: 9px;
|
||
left: 3px;
|
||
width: 6px;
|
||
height: 1.5px;
|
||
background-color: #FDBA74;
|
||
}
|
||
|
||
/* 4.5 Micro QR Vector */
|
||
.vector-qr-icon {
|
||
position: relative;
|
||
width: 14px;
|
||
height: 14px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-content: space-between;
|
||
}
|
||
.vec-qr-dot {
|
||
width: 5px;
|
||
height: 5px;
|
||
border: 1.5px solid #8B5CF6;
|
||
border-radius: 1px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 4.6 Micro Hall Vector */
|
||
.vector-hall-icon {
|
||
position: relative;
|
||
width: 16px;
|
||
height: 12px;
|
||
}
|
||
.vec-arrow-left {
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 0;
|
||
width: 12px;
|
||
height: 1.5px;
|
||
background-color: #10B981;
|
||
}
|
||
.vec-arrow-right {
|
||
position: absolute;
|
||
bottom: 1px;
|
||
right: 0;
|
||
width: 12px;
|
||
height: 1.5px;
|
||
background-color: #059669;
|
||
}
|
||
|
||
/* 5.1 Micro NFC Vector */
|
||
.vector-nfc-icon {
|
||
position: relative;
|
||
width: 16px;
|
||
height: 14px;
|
||
}
|
||
.vec-nfc-card {
|
||
width: 14px;
|
||
height: 11px;
|
||
border: 1.5px solid #0088FF;
|
||
border-radius: 2px;
|
||
box-sizing: border-box;
|
||
}
|
||
.vec-nfc-wave {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 2px;
|
||
width: 4px;
|
||
height: 7px;
|
||
border-right: 1.5px solid #38BDF8;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 5.2 Micro Mode Vector */
|
||
.vector-mode-icon {
|
||
position: relative;
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.vec-mode-sq {
|
||
position: absolute;
|
||
width: 6px;
|
||
height: 6px;
|
||
border: 1.5px solid #64748B;
|
||
border-radius: 1px;
|
||
box-sizing: border-box;
|
||
}
|
||
.sq1 { top: 0; left: 0; }
|
||
.sq2 { top: 0; right: 0; border-color: #0088FF; }
|
||
.sq3 { bottom: 0; left: 0; }
|
||
|
||
/* 5.3 Micro Security Vector */
|
||
.vector-sec-icon {
|
||
position: relative;
|
||
width: 14px;
|
||
height: 15px;
|
||
}
|
||
.vec-sec-shield {
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 1.5px solid #EF4444;
|
||
border-bottom-left-radius: 7px;
|
||
border-bottom-right-radius: 7px;
|
||
border-top-left-radius: 2px;
|
||
border-top-right-radius: 2px;
|
||
box-sizing: border-box;
|
||
}
|
||
.vec-sec-core {
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 5px;
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background-color: #EF4444;
|
||
}
|
||
|
||
/* 5.4 Micro Team Vector */
|
||
.vector-team-icon {
|
||
position: relative;
|
||
width: 15px;
|
||
height: 14px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
}
|
||
.vec-team-bar {
|
||
width: 3px;
|
||
border-radius: 1px;
|
||
background-color: #10B981;
|
||
}
|
||
.bar1 { height: 6px; }
|
||
.bar2 { height: 12px; }
|
||
.bar3 { height: 9px; }
|
||
|
||
/* 6 & 7 Menu Rows & Switch */
|
||
.menu-prefix-pod {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 12px;
|
||
}
|
||
.pod-radar-notice { background-color: #EFF6FF; }
|
||
.pod-lead-notice { background-color: #F0FDF4; }
|
||
.pod-globe { background-color: #F8FAFC; }
|
||
|
||
.vector-pulse-icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
border: 1.5px solid #0088FF;
|
||
border-radius: 5px;
|
||
}
|
||
.vector-bell-icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
border: 1.5px solid #10B981;
|
||
border-top-left-radius: 5px;
|
||
border-top-right-radius: 5px;
|
||
}
|
||
.vector-globe-icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
border: 1.5px solid #64748B;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.menu-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 48px;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.menu-row-switch {
|
||
min-height: 52px;
|
||
}
|
||
|
||
.menu-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #101828;
|
||
}
|
||
|
||
.menu-divider {
|
||
height: 1px;
|
||
background-color: #F1F5F9;
|
||
margin: 2px 0;
|
||
}
|
||
|
||
.switch-label-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.menu-subtitle {
|
||
font-size: 12px;
|
||
color: #64748B;
|
||
line-height: 1.4;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.switch-touch-area {
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 7. Language Pill */
|
||
.menu-row-arrow {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.menu-label-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
|
||
.menu-value-wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.lang-pill {
|
||
padding: 4px 10px;
|
||
background-color: #F8FAFC;
|
||
border: 1px solid #E2E8F0;
|
||
border-radius: 9999px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.menu-value-text {
|
||
font-size: 13px;
|
||
color: #475569;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.menu-arrow {
|
||
font-size: 16px;
|
||
color: #CBD5E1;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 8. Subtle Ghost Sign Out */
|
||
.signout-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.signout-btn {
|
||
width: 100%;
|
||
min-height: 46px;
|
||
border-radius: 9999px;
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #E2E8F0;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.signout-btn:active {
|
||
opacity: 0.75;
|
||
background-color: #F8FAFC;
|
||
}
|
||
|
||
.signout-text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #64748B;
|
||
}
|
||
|
||
/* Compatible Design Token References */
|
||
.lang-token-compat {
|
||
color: #0B5CFF;
|
||
background-color: #F7F8FA;
|
||
border-color: #E3E7ED;
|
||
box-shadow: 0 0 0 1px #667085;
|
||
}
|
||
|
||
/* Error Notice */
|
||
.error-notice {
|
||
padding: 10px 14px;
|
||
background-color: #FEF2F2;
|
||
border: 1px solid #FEE2E2;
|
||
border-radius: 12px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.error-notice-text {
|
||
font-size: 12px;
|
||
color: #EF4444;
|
||
}
|
||
|
||
.bottom-safe-space {
|
||
height: calc(28px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
|
||
}
|
||
|
||
/* Language Bottom Sheet Drawer */
|
||
.drawer-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(15, 23, 42, 0.45);
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.drawer-sheet {
|
||
background-color: #FFFFFF;
|
||
border-top-left-radius: 24px;
|
||
border-top-right-radius: 24px;
|
||
padding: 20px 16px;
|
||
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
|
||
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
|
||
max-height: 70vh;
|
||
}
|
||
|
||
.drawer-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 4px 12px 4px;
|
||
}
|
||
|
||
.drawer-title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #101828;
|
||
}
|
||
|
||
.drawer-close-btn {
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.drawer-close-symbol {
|
||
font-size: 16px;
|
||
color: #64748B;
|
||
line-height: 1;
|
||
}
|
||
|
||
.drawer-divider {
|
||
height: 1px;
|
||
background-color: #F1F5F9;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.drawer-lang-scroll {
|
||
max-height: 50vh;
|
||
}
|
||
|
||
.drawer-lang-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.drawer-lang-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 50px;
|
||
padding: 0 14px;
|
||
border-radius: 14px;
|
||
margin-bottom: 4px;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.drawer-lang-item-active {
|
||
background-color: #EBF5FF;
|
||
}
|
||
|
||
.drawer-lang-text {
|
||
font-size: 15px;
|
||
color: #101828;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.drawer-lang-text-active {
|
||
color: #0088FF;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.drawer-check-icon {
|
||
width: 6px;
|
||
height: 12px;
|
||
border-right: 2px solid #0088FF;
|
||
border-bottom: 2px solid #0088FF;
|
||
transform: rotate(45deg);
|
||
margin-right: 6px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* RTL Layout Alignment */
|
||
.page-rtl .hero-identity-top {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .avatar-ring-container {
|
||
margin-right: 0;
|
||
margin-left: 14px;
|
||
}
|
||
|
||
.page-rtl .identity-name-row {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .tier-pill {
|
||
margin-left: 0;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.page-rtl .quota-meta-row {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .quota-label-group {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .metrics-bento-row {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .metrics-top-meta {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .metrics-value-row {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .grid-item-head {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .grid-arrow {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.page-rtl .menu-row {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .menu-prefix-pod {
|
||
margin-right: 0;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.page-rtl .switch-label-wrap {
|
||
padding-right: 0;
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.page-rtl .menu-value-wrap {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .lang-pill {
|
||
margin-right: 0;
|
||
margin-left: 8px;
|
||
}
|
||
</style>
|