feat(mobile-uni): 重构“我”（个人中心）为原生App沉浸式卡片看板，禁用Emoji全面采用uni-icons矢量图标
This commit is contained in:
@@ -1,27 +1,42 @@
|
||||
<template>
|
||||
<view class="page profile-page employee-page-shell">
|
||||
<view class="profile-head">
|
||||
<text class="profile-eyebrow">银城物业 · 员工成长</text>
|
||||
<text class="page-title">我</text>
|
||||
<text class="page-subtitle">训练记录、积分与个人能力画像</text>
|
||||
<!-- Top Hero Header Card -->
|
||||
<view class="hero-identity-card">
|
||||
<view class="hero-brand-bar">
|
||||
<text class="hero-brand-name">银城物业 · 员工端</text>
|
||||
<view class="online-tag">
|
||||
<view class="green-dot" />
|
||||
<text class="online-text">已登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="identity-main-row">
|
||||
<view class="avatar-box">
|
||||
<uni-icons type="person-filled" size="26" color="#e60012" />
|
||||
</view>
|
||||
<view class="identity-copy">
|
||||
<text class="identity-phone">{{ maskedPhone }}</text>
|
||||
<view v-if="loggedIn" class="position-badge">
|
||||
<text class="badge-text">{{ positionProfile.value }} · {{ positionProfile.heroTitle }}</text>
|
||||
</view>
|
||||
<text v-else class="identity-note">登录后查看训练记录和能力画像</text>
|
||||
</view>
|
||||
<button v-if="!loggedIn" class="primary-gradient-btn compact-login-btn" @click="goLogin">去登录</button>
|
||||
<button v-else class="logout-pill-btn" @click="logout">
|
||||
<text>退出</text>
|
||||
<uni-icons type="right" size="11" color="#64748b" />
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="message" class="status-message">{{ message }}</view>
|
||||
|
||||
<view class="panel identity-card">
|
||||
<view class="identity-avatar">
|
||||
<uni-icons type="person-filled" size="26" color="#e60012" />
|
||||
</view>
|
||||
<view class="identity-info">
|
||||
<text class="identity-phone">{{ maskedPhone }}</text>
|
||||
<text v-if="loggedIn" class="identity-position">{{ positionProfile.value }} · {{ positionProfile.heroTitle }}</text>
|
||||
<text v-if="loggedIn" class="identity-source">岗位来自人力系统组织同步，如需调整请联系 HR</text>
|
||||
<text v-else class="identity-source">登录后查看训练记录和能力画像</text>
|
||||
</view>
|
||||
<button v-if="!loggedIn" class="primary-button identity-action" @click="goLogin">去登录</button>
|
||||
<text v-else class="identity-logout" role="button" @click="logout">退出 ›</text>
|
||||
<!-- Error Toast Notice -->
|
||||
<view v-if="message" class="app-toast-message">
|
||||
<uni-icons type="info-filled" size="14" color="#d97706" />
|
||||
<text class="toast-text">{{ message }}</text>
|
||||
<button class="toast-close-btn" @click="message = ''">×</button>
|
||||
</view>
|
||||
|
||||
<!-- Supervisor Mode Notice -->
|
||||
<view v-if="supervisorLearning" class="panel supervisor-mode-panel">
|
||||
<view class="mode-copy">
|
||||
<text class="panel-title mode-title">当前为学员模式</text>
|
||||
@@ -30,36 +45,45 @@
|
||||
<button class="secondary-button account-action" @click="returnToSupervisor">返回主管工作台</button>
|
||||
</view>
|
||||
|
||||
<view v-if="loggedIn && profile" class="panel profile-summary">
|
||||
<text class="panel-title">成长摘要</text>
|
||||
<view class="summary-strip">
|
||||
<view class="summary-cell">
|
||||
<text class="summary-value score">{{ profile.score }}</text>
|
||||
<text class="summary-label">训练综合分</text>
|
||||
</view>
|
||||
<view class="summary-cell">
|
||||
<text class="summary-value">{{ profile.completed }}</text>
|
||||
<text class="summary-label">已训练</text>
|
||||
</view>
|
||||
<view class="summary-cell">
|
||||
<text class="summary-value">{{ profile.pendingReview }}</text>
|
||||
<text class="summary-label">待复盘</text>
|
||||
</view>
|
||||
<view class="summary-cell">
|
||||
<text class="summary-value">{{ profile.trainingMinutes || 0 }}</text>
|
||||
<text class="summary-label">分钟</text>
|
||||
</view>
|
||||
<view class="summary-cell">
|
||||
<text class="summary-value level">{{ profile.aiLevel || '未评级' }}</text>
|
||||
<text class="summary-label">等级</text>
|
||||
<!-- 1. 成长摘要 Panel -->
|
||||
<view v-if="loggedIn && profile" class="panel section-card profile-summary">
|
||||
<view class="panel-head">
|
||||
<view class="section-title">
|
||||
<view class="section-bar" />
|
||||
<text>成长摘要</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="ai-score-disclaimer">AI训练综合分仅作训练参考，不等于BRD五维绩效总分，人可复核/否决</text>
|
||||
|
||||
<view class="summary-dash-grid">
|
||||
<view class="dash-cell cell-score">
|
||||
<text class="cell-value score-text">{{ profile.score }}</text>
|
||||
<text class="cell-label">综合分</text>
|
||||
</view>
|
||||
<view class="dash-cell">
|
||||
<text class="cell-value">{{ profile.completed }}</text>
|
||||
<text class="cell-label">已训练</text>
|
||||
</view>
|
||||
<view class="dash-cell">
|
||||
<text class="cell-value">{{ profile.pendingReview }}</text>
|
||||
<text class="cell-label">待复盘</text>
|
||||
</view>
|
||||
<view class="dash-cell">
|
||||
<text class="cell-value">{{ profile.trainingMinutes || 0 }}</text>
|
||||
<text class="cell-label">分钟</text>
|
||||
</view>
|
||||
<view class="dash-cell cell-level">
|
||||
<text class="cell-value level-text">{{ profile.aiLevel || '未评级' }}</text>
|
||||
<text class="cell-label">等级</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="summary-foot">
|
||||
<text class="ai-score-disclaimer">AI训练综合分仅作参考，不等于BRD总分，人可复核</text>
|
||||
<button class="growth-toggle" @click="showGrowthDetail = !showGrowthDetail">
|
||||
{{ showGrowthDetail ? '收起 ›' : '展开能力详情 ›' }}
|
||||
{{ showGrowthDetail ? '收起 ▲' : '能力详情 ▼' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-if="showGrowthDetail && profile.dimensions?.length" class="dimension-list">
|
||||
<view v-for="item in profile.dimensions" :key="item.label" class="dimension-row">
|
||||
<view>
|
||||
@@ -88,56 +112,59 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button v-if="loggedIn" class="panel points-entry" @click="openPoints">
|
||||
<view class="entry-icon">
|
||||
<uni-icons type="star-filled" size="20" color="#ffffff" />
|
||||
</view>
|
||||
<view class="points-entry-copy">
|
||||
<text class="panel-title">我的积分</text>
|
||||
<text class="points-entry-desc">奖励积分与学习学分明细</text>
|
||||
</view>
|
||||
<text class="points-entry-arrow">›</text>
|
||||
</button>
|
||||
<!-- 2. 功能入口 Menu Group -->
|
||||
<view v-if="loggedIn" class="panel section-card menu-group-card">
|
||||
<button class="menu-item-row" @click="openPoints">
|
||||
<view class="menu-icon-box box-amber">
|
||||
<uni-icons type="star-filled" size="18" color="#d97706" />
|
||||
</view>
|
||||
<view class="menu-item-copy">
|
||||
<text class="menu-item-title">我的积分</text>
|
||||
<text class="menu-item-desc">奖励积分与学习学分明细</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="14" color="#94a3b8" />
|
||||
</button>
|
||||
|
||||
<view v-if="loggedIn" class="panel feature-entries">
|
||||
<text class="panel-title">我的助手</text>
|
||||
<button class="feature-entry" @click="openMemories">
|
||||
<view class="entry-icon">
|
||||
<uni-icons type="auth-filled" size="20" color="#ffffff" />
|
||||
<button class="menu-item-row" @click="openMemories">
|
||||
<view class="menu-icon-box box-blue">
|
||||
<uni-icons type="folder-add" size="18" color="#2d80ff" />
|
||||
</view>
|
||||
<view class="feature-entry-copy">
|
||||
<text class="feature-entry-title">我的资料与记忆</text>
|
||||
<text class="feature-entry-desc">待确认 · 私人记录 · 项目跟进</text>
|
||||
<view class="menu-item-copy">
|
||||
<text class="menu-item-title">我的资料与记忆</text>
|
||||
<text class="menu-item-desc">待确认 · 私人记录 · 项目跟进</text>
|
||||
</view>
|
||||
<text class="points-entry-arrow">›</text>
|
||||
<uni-icons type="right" size="14" color="#94a3b8" />
|
||||
</button>
|
||||
<button class="feature-entry" @click="openWorkResults">
|
||||
<view class="entry-icon">
|
||||
<uni-icons type="calendar-filled" size="20" color="#ffffff" />
|
||||
|
||||
<button class="menu-item-row" @click="openWorkResults">
|
||||
<view class="menu-icon-box box-emerald">
|
||||
<uni-icons type="calendar-filled" size="18" color="#10b981" />
|
||||
</view>
|
||||
<view class="feature-entry-copy">
|
||||
<text class="feature-entry-title">我的工作记录</text>
|
||||
<text class="feature-entry-desc">今日成果 · 处理状态 · 原始来源</text>
|
||||
<view class="menu-item-copy">
|
||||
<text class="menu-item-title">成果投稿与记录</text>
|
||||
<text class="menu-item-desc">今日成果 · 处理状态 · 原始来源</text>
|
||||
</view>
|
||||
<text class="points-entry-arrow">›</text>
|
||||
<uni-icons type="right" size="14" color="#94a3b8" />
|
||||
</button>
|
||||
<button class="feature-entry" @click="openPracticeSummary">
|
||||
<view class="entry-icon">
|
||||
<uni-icons type="list" size="20" color="#ffffff" />
|
||||
|
||||
<button class="menu-item-row" @click="openPracticeSummary">
|
||||
<view class="menu-icon-box box-purple">
|
||||
<uni-icons type="compose" size="18" color="#8b5cf6" />
|
||||
</view>
|
||||
<view class="feature-entry-copy">
|
||||
<text class="feature-entry-title">我的训练概况</text>
|
||||
<text class="feature-entry-desc">问师傅帮你汇总近期训练情况</text>
|
||||
<view class="menu-item-copy">
|
||||
<text class="menu-item-title">我的训练概况</text>
|
||||
<text class="menu-item-desc">问师傅帮您汇总近期训练情况</text>
|
||||
</view>
|
||||
<text class="points-entry-arrow">›</text>
|
||||
<uni-icons type="right" size="14" color="#94a3b8" />
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-if="loggedIn && evidence" class="panel evidence-panel">
|
||||
<!-- 3. 成长证据包 Panel -->
|
||||
<view v-if="loggedIn && evidence" class="panel section-card evidence-panel">
|
||||
<view class="fold-head">
|
||||
<text class="panel-title">成长证据包（待人工复核）</text>
|
||||
<button class="fold-toggle inline" @click="showEvidence = !showEvidence">
|
||||
{{ showEvidence ? '收起 ›' : '展开 ›' }}
|
||||
{{ showEvidence ? '收起 ▲' : '展开 ▼' }}
|
||||
</button>
|
||||
</view>
|
||||
<view class="evidence-strip">
|
||||
@@ -155,64 +182,78 @@
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="showEvidence">
|
||||
<view class="evidence-grid">
|
||||
<view class="evidence-metric">
|
||||
<text>{{ evidence.currentLevel }}</text>
|
||||
<text>参考等级</text>
|
||||
<view class="evidence-grid">
|
||||
<view class="evidence-metric">
|
||||
<text>{{ evidence.currentLevel }}</text>
|
||||
<text>参考等级</text>
|
||||
</view>
|
||||
<view class="evidence-metric">
|
||||
<text>{{ evidence.trainingMinutes }}</text>
|
||||
<text>训练分钟</text>
|
||||
</view>
|
||||
<view class="evidence-metric">
|
||||
<text>{{ evidence.contribution }}</text>
|
||||
<text>人工贡献分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evidence-metric">
|
||||
<text>{{ evidence.trainingMinutes }}</text>
|
||||
<text>训练分钟</text>
|
||||
<view v-if="evidence.evidenceItems?.length" class="evidence-list">
|
||||
<text v-for="item in evidence.evidenceItems" :key="item" class="evidence-item">{{ item }}</text>
|
||||
</view>
|
||||
<view class="evidence-metric">
|
||||
<text>{{ evidence.contribution }}</text>
|
||||
<text>人工贡献分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="evidence.evidenceItems?.length" class="evidence-list">
|
||||
<text v-for="item in evidence.evidenceItems" :key="item" class="evidence-item">{{ item }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view v-if="loggedIn" class="panel history-panel">
|
||||
<view class="history-head">
|
||||
<text class="panel-title">最近练过</text>
|
||||
<button class="ghost-button refresh-button" :disabled="loading" @click="loadData">刷新</button>
|
||||
<!-- 4. 最近对练 Panel -->
|
||||
<view v-if="loggedIn" class="panel section-card history-panel">
|
||||
<view class="panel-head">
|
||||
<view class="section-title">
|
||||
<view class="section-bar" />
|
||||
<text>最近对练</text>
|
||||
</view>
|
||||
<button class="icon-refresh-btn" :disabled="loading" @click="loadData" title="刷新">
|
||||
<uni-icons type="refresh" size="16" color="#64748b" :class="{ spinning: loading }" />
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-if="history.length" class="history-list">
|
||||
<view
|
||||
v-for="item in visibleHistory"
|
||||
:key="item.id || item.sessionId || item.time"
|
||||
class="history-row history-row-clickable"
|
||||
class="history-row-item"
|
||||
@click="openHistory(item.id)"
|
||||
>
|
||||
<view class="entry-icon small">
|
||||
<uni-icons type="compose" size="16" color="#ffffff" />
|
||||
<view class="menu-icon-box box-blue small-box">
|
||||
<uni-icons type="paperplane-filled" size="14" color="#2d80ff" />
|
||||
</view>
|
||||
<view class="history-main">
|
||||
<text class="history-title">{{ item.scene }} · {{ historyMark(item) }}</text>
|
||||
<text class="history-desc">{{ item.time }}</text>
|
||||
</view>
|
||||
<text class="points-entry-arrow">›</text>
|
||||
<uni-icons type="right" size="14" color="#94a3b8" />
|
||||
</view>
|
||||
<button v-if="history.length > 3" class="history-more" @click="showAllHistory = !showAllHistory">
|
||||
{{ showAllHistory ? '收起 ›' : `查看全部 ${history.length} 条 ›` }}
|
||||
<button v-if="history.length > 3" class="fold-toggle" @click="showAllHistory = !showAllHistory">
|
||||
{{ showAllHistory ? '收起 ▲' : `展开全部 ${history.length} 条 ▼` }}
|
||||
</button>
|
||||
</view>
|
||||
<view v-else class="empty">暂无训练记录</view>
|
||||
<view v-else-if="!loading" class="app-empty-state">
|
||||
<view class="empty-icon-circle circle-blue">
|
||||
<uni-icons type="compose" size="22" color="#2d80ff" />
|
||||
</view>
|
||||
<text class="empty-title">暂无训练记录</text>
|
||||
<text class="empty-desc">去“练”模块完成一次实操对练吧！</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel display-panel">
|
||||
<!-- 5. 显示与辅助 Panel -->
|
||||
<view class="panel section-card display-panel">
|
||||
<button class="display-heading" @click="showFontOptions = !showFontOptions">
|
||||
<view class="entry-icon">
|
||||
<text class="display-icon-text">Aa</text>
|
||||
<view class="menu-icon-box box-slate">
|
||||
<uni-icons type="font" size="18" color="#475569" />
|
||||
</view>
|
||||
<view class="display-heading-copy">
|
||||
<text class="panel-title">显示与辅助</text>
|
||||
<text class="display-current">字体大小 · {{ currentFontSizeLabel }}</text>
|
||||
<text class="menu-item-title">显示与辅助</text>
|
||||
<text class="menu-item-desc">字体大小 · {{ currentFontSizeLabel }}</text>
|
||||
</view>
|
||||
<text class="display-toggle">{{ showFontOptions ? '收起 ›' : '调整 ›' }}</text>
|
||||
<text class="display-toggle">{{ showFontOptions ? '收起 ▲' : '调整 ▼' }}</text>
|
||||
</button>
|
||||
<template v-if="showFontOptions">
|
||||
<view class="font-size-options" role="group" aria-label="字体大小">
|
||||
@@ -954,72 +995,366 @@ onShow(() => {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.feature-entries {
|
||||
.profile-page {
|
||||
padding: 12px 16px 36px;
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* Hero Identity Card */
|
||||
.hero-identity-card {
|
||||
padding: 18px 16px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(24, 28, 36, 0.04);
|
||||
}
|
||||
|
||||
.hero-brand-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.hero-brand-name {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.online-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: #edf7f0;
|
||||
}
|
||||
|
||||
.green-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
|
||||
.online-text {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.identity-main-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #fff4f4;
|
||||
border: 2px solid #ffe2e2;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.identity-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feature-entry {
|
||||
.identity-phone {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.position-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #e60012;
|
||||
}
|
||||
|
||||
.identity-note {
|
||||
font-size: 11px;
|
||||
color: #8a8d93;
|
||||
}
|
||||
|
||||
.logout-pill-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.logout-pill-btn::after { border: none; }
|
||||
|
||||
/* Toast Message */
|
||||
.app-toast-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
background: #fff8e6;
|
||||
border: 1px solid #fef3c7;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #d97706;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toast-close-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #d97706;
|
||||
font-size: 16px;
|
||||
padding: 0 4px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.toast-close-btn::after { border: none; }
|
||||
|
||||
/* Section Card */
|
||||
.section-card {
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(24, 28, 36, 0.04);
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1a1a1a;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-bar {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
background: var(--employee-primary, #e60012);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Summary Dash Grid */
|
||||
.summary-dash-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dash-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 4px;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.dash-cell.cell-score {
|
||||
background: #fff4f4;
|
||||
border: 1px solid #ffe2e2;
|
||||
}
|
||||
|
||||
.dash-cell.cell-level {
|
||||
background: #eff6ff;
|
||||
border: 1px solid #dbeafe;
|
||||
}
|
||||
|
||||
.cell-value {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.cell-value.score-text { color: #e60012; font-size: 18px; }
|
||||
.cell-value.level-text { color: #2d80ff; font-size: 13px; }
|
||||
|
||||
.cell-label {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Menu Group Card */
|
||||
.menu-group-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.menu-item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 12px 4px;
|
||||
padding: 12px 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.feature-entry::after {
|
||||
border: none;
|
||||
.menu-item-row + .menu-item-row {
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.feature-entry + .feature-entry {
|
||||
border-top: 1px solid #f2f3f5;
|
||||
}
|
||||
.menu-item-row::after { border: none; }
|
||||
|
||||
.entry-icon {
|
||||
flex-shrink: 0;
|
||||
.menu-icon-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: var(--brand);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.entry-icon.small {
|
||||
.menu-icon-box.small-box {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 9px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.display-icon-text {
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.box-amber { background: #fff8e6; }
|
||||
.box-blue { background: #eff6ff; }
|
||||
.box-emerald { background: #edf7f0; }
|
||||
.box-purple { background: #f3e8ff; }
|
||||
.box-slate { background: #f1f5f9; }
|
||||
|
||||
.feature-entry-copy {
|
||||
flex: 1;
|
||||
.menu-item-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feature-entry-title {
|
||||
color: #18202b;
|
||||
.menu-item-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.feature-entry-desc {
|
||||
color: #8a93a0;
|
||||
font-size: 12px;
|
||||
.menu-item-desc {
|
||||
font-size: 11px;
|
||||
color: #8a8d93;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* History Row Item */
|
||||
.history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.history-row-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.history-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.history-desc {
|
||||
font-size: 11px;
|
||||
color: #8a8d93;
|
||||
}
|
||||
|
||||
/* Refresh & Fold Buttons */
|
||||
.icon-refresh-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #f1f5f9;
|
||||
border: none;
|
||||
padding: 0;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.fold-toggle {
|
||||
@@ -1027,19 +1362,115 @@ onShow(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
margin: 10px 0 0;
|
||||
padding: 0;
|
||||
height: 36px;
|
||||
margin-top: 6px;
|
||||
border: none;
|
||||
border-top: 1px dashed #eceff2;
|
||||
background: transparent;
|
||||
color: #6b7480;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
color: #8a8d93;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fold-toggle::after {
|
||||
.fold-toggle::after { border: none; }
|
||||
|
||||
.app-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: #eff6ff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 12px;
|
||||
color: #8a8d93;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Display & Accessibility Panel */
|
||||
.display-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.display-heading::after { border: none; }
|
||||
|
||||
.display-heading-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.display-toggle {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-size-options {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.font-size-option {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-size-option.active {
|
||||
border-color: #e60012;
|
||||
background: #fff4f4;
|
||||
color: #e60012;
|
||||
}
|
||||
|
||||
.font-size-option::after { border: none; }
|
||||
|
||||
.display-note {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.feature-entry-desc {
|
||||
color: #8a93a0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fold-toggle.inline {
|
||||
|
||||
Reference in New Issue
Block a user