fmode-app/src/app/desktop/pages/mine/mine.ts

import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { Router } from '@angular/router';
import { UiAvatar, UiButton, UiCard, UiModal, UiSegmented } from '../../../ui';
import { PageComponent } from '../../../components/shell/page/page';
import { PALETTES, PaletteService } from '../../../core/palette.service';
import { SessionService } from '../../../core/session.service';
import { environment } from '../../../../environments/environment';

/**
 * 桌面·我的（SPEC FR-10）
 *
 * AC-10.2 退出需二次确认 · AC-10.3 版本号从构建注入
 *
 * 本次调整（2026-10-15 用户反馈）：
 *   · **移除「使用端」区块** —— 端由 UA 自动判定；手动切换属 demo 便利功能，正式项目不暴露
 *   · **配色选择器改为真正的色块预览** —— 每个缩略图渲染**该套配色自身**的色值
 *     （靠 `[data-preview-palette]` 作用域，见 _palette.scss）
 *   · 顶部布局与模态框统一走底座 `ui-card` / `ui-modal`
 */
@Component({
  selector: 'app-dk-mine-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [UiAvatar, UiButton, UiCard, UiModal, UiSegmented, PageComponent],
  template: `
    <app-page [wide]="true">
      <div class="settings-layout">
        <!-- 账号面板 -->
        <ui-card class="account-card">
          <div class="card-kicker"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i>账户中心</div>
          <div class="identity">
            <ui-avatar [name]="me()?.name ?? '?'" size="lg" />
            <div class="identity-body">
              <h2>{{ me()?.name || '未登录' }}</h2>
              <p>{{ me()?.mobile || '—' }}</p>
            </div>
          </div>

          <dl class="facts">
            @for (f of accountFacts(); track f.label) {
              <div>
                <dt>{{ f.label }}</dt>
                <dd>{{ f.value }}</dd>
              </div>
            }
          </dl>

          <p class="account-note">
            <i class="fa-solid fa-lock" aria-hidden="true"></i>
            账号信息由服务端返回，本地不保存敏感凭证。
          </p>

          <button type="button" class="logout-action" (click)="confirming.set(true)">
            <i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i>退出登录
          </button>
        </ui-card>

        <!-- 设置内容 -->
        <div class="settings-content">
          <ui-card class="settings-card" title="界面外观">
            <div class="setting-row">
              <div class="setting-copy">
                <h4>显示模式</h4>
                <p>选择适合当前环境的界面。</p>
              </div>
              <ui-segmented
                [options]="themeOptions"
                [value]="themeMode()"
                (valueChange)="setTheme($event)"
              />
            </div>

            <!-- 整体配色：每个缩略图渲染该套配色自身的色值 -->
            <div class="setting-block">
              <div class="setting-copy">
                <h4>整体配色</h4>
                <p>导航、内容与控件统一切换。</p>
              </div>
              <div class="palettes" role="group" aria-label="整体配色方案">
                @for (p of palettes; track p.id) {
                  <button
                    type="button"
                    class="palette-choice"
                    [class.selected]="palette.palette() === p.id"
                    [attr.aria-pressed]="palette.palette() === p.id"
                    [attr.aria-label]="p.name"
                    (click)="palette.set(p.id)"
                  >
                    <span
                      class="thumb"
                      [attr.data-preview-palette]="p.id"
                      [attr.data-preview-theme]="themeMode()"
                      aria-hidden="true"
                    >
                      <span class="thumb-nav"><i></i><i></i><i></i></span>
                      <span class="thumb-main"><i class="t1"></i><i class="t2"></i><i class="t3"></i></span>
                      <span class="thumb-rail"></span>
                    </span>
                    <span class="palette-name">
                      {{ p.name }}
                      @if (palette.palette() === p.id) {
                        <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
                      }
                    </span>
                    <span class="palette-desc">{{ p.description }}</span>
                  </button>
                }
              </div>
            </div>
          </ui-card>

          <ui-card class="settings-card" title="账号与凭证">
            <div class="setting-row">
              <div class="setting-copy">
                <h4>登录凭证</h4>
                <p>如遇连接异常可尝试修复。</p>
              </div>
              <ui-button variant="outline" icon="fa-solid fa-wrench" (click)="fixToken()">
                修复 Token
              </ui-button>
            </div>
          </ui-card>

          <footer class="about">
            <span>Fmode <span class="mono">{{ version }}</span></span>
          </footer>
        </div>
      </div>
    </app-page>

    <!-- 退出二次确认（AC-10.2）：底座 ui-modal -->
    <ui-modal [open]="confirming()" title="退出登录？" size="sm" (openChange)="confirming.set($event)">
      <p class="dialog-text">退出后需要重新登录才能继续使用。</p>
      <div class="dialog-actions">
        <ui-button variant="outline" (click)="confirming.set(false)">取消</ui-button>
        <button type="button" class="dialog-danger" (click)="doLogout()">
          <i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i>退出登录
        </button>
      </div>
    </ui-modal>
  `,
  styles: [
    `
      @use '../../../core/styles/breakpoints' as bp;

      :host {
        display: block;
      }

      .account-card {
        border-top: 3px solid var(--primary);
        animation: page-card-in var(--motion-normal) var(--ease-standard) both;
      }
      .settings-card { animation: page-card-in var(--motion-normal) var(--ease-standard) both; }
      .settings-card:nth-child(2) { animation-delay: 60ms; }
      .card-kicker {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        margin-bottom: var(--sp-4);
        color: var(--primary);
        font-size: var(--fs-11);
        font-weight: 600;
      }

      .settings-layout {
        display: grid;
        grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
        gap: var(--sp-4);
        align-items: start;
      }
      @include bp.dk-below-4col {
        .settings-layout {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      .identity {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        margin-bottom: var(--sp-4);
      }
      .identity-body h2 {
        margin: 0;
        font-size: var(--fs-20);
        color: var(--ink);
      }
      .identity-body p {
        margin: 0;
        font-size: var(--fs-12);
        color: var(--muted);
      }

      /* 账号事实：PC 端右对齐键值行,避免描述列表在窄栏内折行错位 */
      .facts {
        display: grid;
        gap: var(--sp-2);
        margin: 0 0 var(--sp-4);
        padding: var(--sp-3) 0;
        border-top: 1px solid var(--edge);
        border-bottom: 1px solid var(--edge);
      }
      .facts > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-3);
        font-size: var(--fs-13);
      }
      .facts dt {
        color: var(--muted);
        flex-shrink: 0;
      }
      .facts dd {
        margin: 0;
        color: var(--ink);
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .account-note {
        display: flex;
        gap: var(--sp-2);
        margin: var(--sp-4) 0;
        font-size: var(--fs-11);
        color: var(--muted);
        line-height: 1.7;
      }

      .settings-content {
        display: grid;
        gap: var(--sp-4);
        min-width: 0;
      }

      .setting-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
        flex-wrap: wrap;
      }
      .setting-block {
        margin-top: var(--sp-4);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--edge);
      }
      .setting-copy h4 {
        margin: 0;
        font-size: var(--fs-13);
        color: var(--ink);
      }
      .setting-copy p {
        margin: var(--sp-1) 0 0;
        font-size: var(--fs-11);
        color: var(--muted);
      }

      /* 配色选择器：流动网格,每格渲染该套配色自身的色值 */
      .palettes {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--sp-3);
        margin-top: var(--sp-3);
      }
      .palette-choice {
        display: grid;
        gap: var(--sp-1);
        padding: var(--sp-2);
        border: 1px solid var(--edge-strong);
        border-radius: var(--r-sm);
        background: var(--surface);
        text-align: left;
        cursor: pointer;
        min-width: 0;
      }
      .palette-choice.selected {
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary);
      }
      .palette-choice:hover {
        background: var(--surface-hover);
      }

      /*
        缩略图：三段式(导航 / 内容 / 右栏)。
        🔴 内部一律用 var(--nav-surface) 等令牌 —— 因外层 [data-preview-palette='x']
           会把这些令牌**局部重定义为该套配色**的值(见 _palette.scss),
           所以缩略图天然显示各自的配色,而非当前配色。
      */
      .thumb {
        display: grid;
        grid-template-columns: 26% 1fr 20%;
        height: 48px;
        border: 1px solid var(--edge-strong);
        border-radius: var(--r-sm);
        overflow: hidden;
        background: var(--surface);
      }
      .thumb-nav {
        display: grid;
        align-content: start;
        gap: 4px;
        padding: 7px 4px;
        background: var(--nav-surface);
        border-right: 1px solid var(--nav-line);
      }
      .thumb-nav i {
        display: block;
        height: 3px;
        border-radius: var(--r-tag);
        background: var(--nav-text);
        opacity: 0.65;
      }
      .thumb-main {
        display: grid;
        align-content: center;
        gap: 5px;
        padding: 8px;
        background: var(--surface);
      }
      .thumb-main i {
        display: block;
        height: 3px;
        border-radius: var(--r-tag);
        background: var(--edge-strong);
      }
      .thumb-main .t1 {
        width: 55%;
        background: var(--ink-2);
      }
      .thumb-main .t3 {
        width: 38%;
        height: 7px;
        background: var(--primary);
      }
      .thumb-rail {
        background: var(--rail-surface);
        border-left: 1px solid var(--edge-strong);
      }

      .palette-name {
        display: flex;
        align-items: center;
        gap: var(--sp-1);
        font-size: var(--fs-12);
        font-weight: 500;
        color: var(--ink);
      }
      .palette-desc {
        font-size: var(--fs-11);
        color: var(--muted);
      }

      .about {
        font-size: var(--fs-11);
        color: var(--muted);
      }
      .mono {
        font-family: var(--mono, monospace);
        color: var(--ink-2);
      }

      .dialog-text {
        margin: 0 0 var(--sp-4);
        font-size: var(--fs-13);
        color: var(--muted);
      }
      .dialog-actions {
        display: flex;
        gap: var(--sp-2);
        justify-content: flex-end;
      }
      .logout-action,
      .dialog-danger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-2);
        min-height: 42px;
        border-radius: var(--r-sm);
        font: inherit;
        font-size: var(--fs-13);
        font-weight: 600;
        cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
      }
      .logout-action {
        width: 100%;
        border: 1px solid color-mix(in srgb, var(--danger) 52%, var(--edge));
        background: var(--danger-subtle);
        color: var(--danger);
      }
      .dialog-danger {
        padding: 0 var(--sp-4);
        border: 1px solid color-mix(in srgb, var(--danger) 52%, var(--edge));
        background: var(--danger);
        color: var(--on-danger);
      }
      .logout-action:hover { background: var(--danger-subtle); }
      .logout-action:active, .dialog-danger:active { transform: scale(.98); }
      .logout-action:focus-visible, .dialog-danger:focus-visible {
        outline: 2px solid var(--primary-ring);
        outline-offset: 2px;
      }
      @keyframes page-card-in {
        from { opacity: 0; transform: translateY(var(--sp-2)); }
        to { opacity: 1; transform: translateY(0); }
      }
      @media (prefers-reduced-motion: reduce) {
        .account-card, .settings-card { animation: none; }
        .logout-action, .dialog-danger { transition: none; }
      }
    `,
  ],
})
export class DkMinePage {
  readonly palette = inject(PaletteService);
  private readonly session = inject(SessionService);
  private readonly router = inject(Router);

  readonly palettes = PALETTES;
  readonly version = environment.version;
  readonly confirming = signal(false);
  readonly themeOptions = [
    { label: '浅色', value: 'light' },
    { label: '深色', value: 'dark' },
  ];

  readonly me = computed(() => this.session.me());

  readonly accountFacts = computed(() => [
    { label: '所属组织', value: this.me()?.companyId ? '企业空间' : '未绑定组织' },
    { label: '工作空间', value: '团队协作空间' },
  ]);

  readonly themeMode = signal<'light' | 'dark'>(
    typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
      ? 'dark'
      : 'light',
  );

  setTheme(v: unknown): void {
    const mode = v as 'light' | 'dark';
    this.themeMode.set(mode);
    if (typeof document === 'undefined') return;
    document.documentElement.classList.toggle('dark', mode === 'dark');
    try {
      localStorage.setItem('ui-mode', mode);
    } catch {
      /* 忽略 */
    }
    const meta = document.querySelector('meta[name="theme-color"]');
    const canvas = getComputedStyle(document.documentElement).getPropertyValue('--canvas').trim();
    if (meta && canvas) meta.setAttribute('content', canvas);
  }

  fixToken(): void {
    void this.router.navigate(['/login'], { queryParams: { redirect: this.router.url } });
  }

  doLogout(): void {
    this.session.logout();
    this.confirming.set(false);
    void this.router.navigateByUrl('/login', { replaceUrl: true });
  }
}