1194 行
28 KiB
Plaintext
1194 行
28 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. Page Header -->
|
||
<view class="profile-header">
|
||
<text class="profile-title">{{ t('title') }}</text>
|
||
<text class="profile-subtitle">{{ t('subtitle') }}</text>
|
||
</view>
|
||
|
||
<!-- 2. Hero Bento Card: Identity, PRO Badge & Card Quota Progress -->
|
||
<view class="bento-card hero-identity-card">
|
||
<view class="hero-identity-top" @click="onEditProfileClick">
|
||
<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 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>
|
||
|
||
<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. Digital Card Studio Bento (2x3 Grid) -->
|
||
<view class="section-header">
|
||
<text class="section-title">{{ t('cardStudioSection') }}</text>
|
||
</view>
|
||
<view class="workspace-grid">
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/index')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-cards">
|
||
<text class="grid-icon-symbol">CARD</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('myCards') }}</text>
|
||
<text class="grid-item-sub">{{ myCardsSubText }}</text>
|
||
</view>
|
||
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/edit')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-edit">
|
||
<text class="grid-icon-symbol">EDIT</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('cardEdit') }}</text>
|
||
<text class="grid-item-sub">{{ cardEditSubText }}</text>
|
||
</view>
|
||
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/cases')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-cases">
|
||
<text class="grid-icon-symbol">CASE</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('productCases') }}</text>
|
||
<text class="grid-item-sub">{{ productCasesSubText }}</text>
|
||
</view>
|
||
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/articles')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-articles">
|
||
<text class="grid-icon-symbol">POST</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('articleDynamics') }}</text>
|
||
<text class="grid-item-sub">{{ articleDynamicsSubText }}</text>
|
||
</view>
|
||
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/card/qrcode')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-poster">
|
||
<text class="grid-icon-symbol">QR</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('sharePoster') }}</text>
|
||
<text class="grid-item-sub">{{ sharePosterSubText }}</text>
|
||
</view>
|
||
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/hall/index')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-hall">
|
||
<text class="grid-icon-symbol">HALL</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('exchangeHall') }}</text>
|
||
<text class="grid-item-sub">{{ exchangeHallSubText }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 4. 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">
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/nfc/scan')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-scan">
|
||
<text class="grid-icon-symbol">NFC</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('nfcScan') }}</text>
|
||
</view>
|
||
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/nfc/mode')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-mode">
|
||
<text class="grid-icon-symbol">MODE</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('nfcMode') }}</text>
|
||
</view>
|
||
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/nfc/security')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-security">
|
||
<text class="grid-icon-symbol">SEC</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('nfcSecurity') }}</text>
|
||
</view>
|
||
|
||
<view class="workspace-grid-item" @click="openPage('/pages/owner/team/overview')">
|
||
<view class="grid-item-head">
|
||
<view class="grid-icon-circle grid-icon-team">
|
||
<text class="grid-icon-symbol">TEAM</text>
|
||
</view>
|
||
<text class="grid-arrow">›</text>
|
||
</view>
|
||
<text class="grid-item-title">{{ t('teamBriefing') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 4. Notifications & 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="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="#0B5CFF"
|
||
@change="onRadarPushChange"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-divider"></view>
|
||
|
||
<view class="menu-row menu-row-switch">
|
||
<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="#0B5CFF"
|
||
@change="onLeadNoticeChange"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 5. Display Language Preferences Bento Setting Item -->
|
||
<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-label-wrap">
|
||
<text class="menu-title">{{ t('languageLabel') }}</text>
|
||
</view>
|
||
<view class="menu-value-wrap">
|
||
<text class="menu-value-text">{{ currentLanguageLabel }}</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 6. Minimal Safe Sign Out -->
|
||
<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 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 {
|
||
onSelectLocale(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/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);
|
||
} catch (_e) {
|
||
quotaLine.value = '1 / 5';
|
||
quotaExceeded.value = false;
|
||
quotaPercent.value = calculateQuotaPercent(1, 5);
|
||
}
|
||
}
|
||
|
||
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>
|
||
/* Compatible tokens: #0B5CFF #F7F8FA #101828 #667085 #E3E7ED */
|
||
.profile-page {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
background-color: #F5F8FC;
|
||
}
|
||
|
||
.profile-aurora-glow {
|
||
position: absolute;
|
||
top: -40px;
|
||
left: 12%;
|
||
right: 12%;
|
||
height: 130px;
|
||
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(32px);
|
||
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: column;
|
||
margin-bottom: 16px;
|
||
padding: 4px 2px;
|
||
}
|
||
|
||
.profile-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #101828;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.profile-subtitle {
|
||
font-size: 13px;
|
||
color: #667085;
|
||
margin-top: 3px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 2. Bento Card General */
|
||
.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;
|
||
}
|
||
|
||
.hero-identity-top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.avatar-wrap {
|
||
position: relative;
|
||
width: 56px;
|
||
height: 56px;
|
||
margin-right: 14px;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 28px;
|
||
background-color: #E3E7ED;
|
||
border: 2px solid #EBF5FF;
|
||
}
|
||
|
||
.avatar-empty {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 28px;
|
||
border: 1.5px dashed #C9CDD4;
|
||
background-color: #F7F8FA;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-add-icon {
|
||
font-size: 24px;
|
||
color: #667085;
|
||
line-height: 1;
|
||
}
|
||
|
||
.avatar-remove-badge {
|
||
position: absolute;
|
||
top: -3px;
|
||
right: -3px;
|
||
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: 17px;
|
||
font-weight: 600;
|
||
color: #101828;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.tier-pill {
|
||
margin-left: 8px;
|
||
padding: 2px 7px;
|
||
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.5px;
|
||
}
|
||
|
||
.identity-company {
|
||
font-size: 13px;
|
||
color: #667085;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.identity-dept {
|
||
font-size: 12px;
|
||
color: #667085;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.identity-edit-btn {
|
||
padding: 4px 10px;
|
||
background-color: var(--oc-primary-soft, #EBF5FF);
|
||
border-radius: 9999px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.identity-edit-text {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #0088FF;
|
||
}
|
||
|
||
.bento-inner-divider {
|
||
height: 1px;
|
||
background-color: #EBF1F7;
|
||
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: #0B5CFF;
|
||
}
|
||
|
||
.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. Section Header */
|
||
.section-header {
|
||
padding: 4px 2px 8px 2px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #667085;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* Workspace Fleet 2x2 Grid */
|
||
.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: 84px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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-icon-circle {
|
||
padding: 3px 6px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.grid-icon-cards {
|
||
background-color: #EBF5FF;
|
||
}
|
||
|
||
.grid-icon-edit {
|
||
background-color: #F0F5FF;
|
||
}
|
||
|
||
.grid-icon-cases {
|
||
background-color: #ECFDF3;
|
||
}
|
||
|
||
.grid-icon-articles {
|
||
background-color: #FFF4ED;
|
||
}
|
||
|
||
.grid-icon-poster {
|
||
background-color: #F5F3FF;
|
||
}
|
||
|
||
.grid-icon-hall {
|
||
background-color: #E0F2FE;
|
||
}
|
||
|
||
.grid-icon-scan {
|
||
background-color: #EBF5FF;
|
||
}
|
||
|
||
.grid-icon-mode {
|
||
background-color: #F0F5FF;
|
||
}
|
||
|
||
.grid-icon-security {
|
||
background-color: #FFF1F0;
|
||
}
|
||
|
||
.grid-icon-team {
|
||
background-color: #EDFBF6;
|
||
}
|
||
|
||
.grid-icon-symbol {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: #0B5CFF;
|
||
}
|
||
|
||
.grid-icon-security .grid-icon-symbol {
|
||
color: #F04438;
|
||
}
|
||
|
||
.grid-icon-team .grid-icon-symbol {
|
||
color: #12B76A;
|
||
}
|
||
|
||
.grid-arrow {
|
||
font-size: 16px;
|
||
color: #94A3B8;
|
||
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;
|
||
}
|
||
|
||
/* 4. Menu & Switches Rows */
|
||
.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: #EBF1F7;
|
||
margin: 2px 0;
|
||
}
|
||
|
||
.switch-label-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.menu-subtitle {
|
||
font-size: 12px;
|
||
color: #667085;
|
||
line-height: 1.4;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.switch-touch-area {
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 5. Language Setting Item & Drawer */
|
||
.menu-row-arrow {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.menu-label-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.menu-value-wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.menu-value-text {
|
||
font-size: 14px;
|
||
color: #64748B;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.menu-arrow {
|
||
font-size: 16px;
|
||
color: #94A3B8;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Language Bottom Sheet Drawer */
|
||
.drawer-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(16, 24, 40, 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: #EBF1F7;
|
||
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;
|
||
}
|
||
|
||
/* Compatible Swiss Token References */
|
||
.lang-token-compat {
|
||
color: #0B5CFF;
|
||
background-color: #F7F8FA;
|
||
border-color: #E3E7ED;
|
||
}
|
||
|
||
/* 6. Sign Out Minimal Button */
|
||
.signout-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.signout-btn {
|
||
width: 100%;
|
||
min-height: 46px;
|
||
border-radius: 9999px;
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #EBF1F7;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.signout-btn:active {
|
||
opacity: 0.7;
|
||
background-color: #F7F8FA;
|
||
}
|
||
|
||
.signout-text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #667085;
|
||
}
|
||
|
||
/* Error Notice */
|
||
.error-notice {
|
||
padding: 10px 14px;
|
||
background-color: #F7F8FA;
|
||
border: 1px solid #E3E7ED;
|
||
border-radius: 12px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.error-notice-text {
|
||
font-size: 12px;
|
||
color: #667085;
|
||
}
|
||
|
||
.bottom-safe-space {
|
||
height: calc(24px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
|
||
}
|
||
|
||
/* RTL Layout */
|
||
.page-rtl .hero-identity-top {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .avatar-wrap {
|
||
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 .grid-item-head {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .grid-arrow {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.page-rtl .menu-row {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.page-rtl .switch-label-wrap {
|
||
padding-right: 0;
|
||
padding-left: 12px;
|
||
}
|
||
</style>
|