settings-modal.html

<!-- 设置弹窗内容（按功能分割，由 renderer 加载到 #settings-body） -->
<style>
  /* ========== 登录/注册卡片整体样式 ========== */
  #settings-identity-key-section {
    max-width: 720px;
    margin: 0 auto;
    background: rgba(15, 25, 35, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(100, 120, 140, 0.4);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.4);
  }
  #settings-identity-key-section .settings-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  #settings-identity-key-section .settings-section-title + p {
    font-size: 0.85rem;
    color: #8ba0b5;
    margin: 0.25rem 0 0;
  }
  #settings-identity-key-section .settings-hint {
    background: rgba(30, 50, 70, 0.5);
    border-left: 3px solid #3a7ca5;
    border-radius: 0.75rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: #9eb4cc;
    margin-bottom: 1.25rem;
  }
  #settings-identity-email-wrap {
    margin-bottom: 1.5rem;
  }
  #settings-identity-email-wrap label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #cbd5e6;
    margin-bottom: 0.5rem;
  }
  #settings-identity-email {
    width: 100%;
    background: #0f1a24;
    border: 1px solid #2a3a48;
    border-radius: 0.75rem;
    padding: 0.6rem 0.9rem;
    color: #eef4ff;
    font-size: 0.9rem;
  }
  #settings-identity-email:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
  }
  .settings-identity-priv-row {
    position: relative;
  }
  #settings-identity-privkey {
    width: 100%;
    background: #0f1a24;
    border: 1px solid #2a3a48;
    border-radius: 0.75rem;
    padding: 0.6rem 0.9rem;
    color: #eef4ff;
    font-size: 0.85rem;
    font-family: monospace;
    resize: vertical;
  }
  #settings-identity-privkey:focus {
    outline: none;
    border-color: #3b82f6;
  }
  .settings-identity-copy-btn {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: #1e2f3c;
    border: none;
    border-radius: 1.5rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.7rem;
    color: #bcd0e8;
    cursor: pointer;
    transition: all 0.2s;
  }
  .settings-identity-copy-btn:hover {
    background: #2a4050;
    color: white;
  }
  #settings-identity-key-section .settings-hint:last-of-type {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: #f59e0b;
    color: #f5c67a;
    margin-bottom: 1.5rem;
  }
  .settings-identity-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }
  
  /* ========== Tab 式按钮组样式 ========== */
  .identity-mode-tabs {
    display: flex;
    margin: 1.25rem 0 1.5rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 2rem;
    padding: 0.25rem;
    gap: 0.25rem;
  }
  .identity-mode-tab {
    flex: 1;
    text-align: center;
    background: transparent;
    border: none;
    border-radius: 1.75rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #b0c4de;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .identity-mode-tab:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #eef4ff;
  }
  /* 注意：真正的“选中”高亮需要配合JavaScript添加 active 类，此处仅提供视觉样式定义，便于后续扩展 */
  .identity-mode-tab.active {
    background: #2563eb;
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }
  
  /* ========== 用户信息：顶部居中大头 + 下方表单 ========== */
  #settings-identity-profile-form-wrap {
    max-width: 520px;
    margin: 0 auto;
    background: linear-gradient(165deg, rgba(18, 32, 48, 0.92), rgba(15, 23, 35, 0.88));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(100, 130, 160, 0.35);
    border-radius: 1.5rem;
    padding: 0;
    /* 勿用 overflow:hidden，否则会挡住外层 .settings-panels 的纵向滚动，导致下方密钥区无法滚入视口 */
    overflow: visible;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
  }
  .profile-form-card {
    padding: 0;
  }
  .profile-form-hero {
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(180deg, rgba(30, 58, 95, 0.35) 0%, rgba(15, 23, 35, 0.2) 55%, transparent 100%);
    border-bottom: 1px solid rgba(71, 85, 105, 0.35);
  }
  /* 压缩首屏高度，让「下方还有内容」提示更容易出现在第一屏 */
  .profile-form-hero--compact {
    padding: 1.15rem 1.25rem 1rem;
  }
  .profile-form-hero--compact .profile-form-hero-text {
    margin-top: 0.65rem;
  }
  .profile-form-hero--compact #settings-profile-avatar-preview.profile-form-avatar-preview--hero {
    width: 88px;
    height: 88px;
  }
  .profile-form-hero-name {
    margin: 0 0 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #e2e8f0;
  }
  .profile-form-page-more-notice {
    margin: 0 1rem 0.85rem;
    padding: 0.25rem 0;
  }
  .profile-form-page-more-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(59, 130, 246, 0.4);
    background: rgba(37, 99, 235, 0.14);
    color: #dbeafe;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
  }
  .profile-form-page-more-toggle:hover {
    background: rgba(37, 99, 235, 0.24);
  }
  .profile-form-page-more-toggle:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.7);
    outline-offset: 2px;
  }
  .profile-form-page-more-toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #dbeafe;
  }
  .profile-form-page-more-toggle-icon {
    font-size: 0.98rem;
    line-height: 1;
    color: #93c5fd;
    transition: transform 0.2s ease;
  }
  .profile-form-page-more-toggle[aria-expanded="true"] .profile-form-page-more-toggle-icon {
    transform: rotate(180deg);
  }
  .profile-form-keys-block[hidden] {
    display: none !important;
  }
  .profile-form-avatar-ring {
    display: inline-flex;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.55), rgba(59, 130, 246, 0.25), rgba(15, 23, 42, 0.8));
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .profile-form-avatar-ring:hover {
    box-shadow: 0 14px 46px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .profile-form-avatar-preview-wrap {
    position: relative;
    border-radius: 999px;
  }
  #settings-profile-avatar-preview.profile-form-avatar-preview--hero {
    width: 132px;
    height: 132px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 35% 30%, rgba(71, 85, 105, 0.5), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(30, 41, 59, 0.9);
    box-sizing: border-box;
  }
  .profile-form-avatar-trigger:hover #settings-profile-avatar-preview.profile-form-avatar-preview--hero {
    border-color: rgba(96, 165, 250, 0.85);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
  }
  #settings-profile-avatar-preview.profile-form-avatar-preview--hero:empty {
    background: radial-gradient(circle at 35% 30%, rgba(71, 85, 105, 0.45), rgba(15, 23, 42, 0.98));
  }
  #settings-profile-avatar-preview.profile-form-avatar-preview--hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
  }
  .profile-form-avatar-trigger {
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
  }
  .profile-form-avatar-trigger:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.8);
    outline-offset: 2px;
  }
  .profile-form-avatar-empty-icon {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 2rem;
  }
  .profile-form-avatar-hint {
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    color: #93c5fd;
  }
  .profile-form-hero-text {
    margin-top: 1.25rem;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }
  .profile-form-header {
    margin-bottom: 0;
  }
  .profile-form-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
  }
  .profile-form-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.45;
  }
  .profile-form-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.5rem 1.5rem 1.75rem;
  }
  .profile-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .profile-form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #cbd5e6;
  }
  .profile-form-input,
  .profile-form-textarea {
    width: 100%;
    background: #0f1a24;
    border: 1px solid #2a3a48;
    border-radius: 0.75rem;
    padding: 0.6rem 0.9rem;
    color: #eef4ff;
    font-size: 0.9rem;
    box-sizing: border-box;
  }
  .profile-form-input:focus,
  .profile-form-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }
  .profile-form-textarea {
    resize: vertical;
    min-height: 5rem;
  }
  .profile-form-keys-block {
    border-top: 1px solid rgba(71, 85, 105, 0.35);
    padding: 1.25rem 1.5rem 1.5rem;
    background: rgba(0, 0, 0, 0.18);
  }
  .profile-form-keys-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    margin: 0 0 0.35rem;
    letter-spacing: 0.04em;
  }
  .profile-form-keys-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 1rem;
    line-height: 1.45;
  }
  .profile-form-key-format-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
  }
  .profile-form-key-format-label {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
  }
  .profile-form-key-format-seg {
    display: inline-flex;
    border-radius: 0.5rem;
    border: 1px solid rgba(71, 85, 105, 0.6);
    overflow: hidden;
  }
  .profile-form-key-format-btn {
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
    border: none;
    background: rgba(15, 23, 42, 0.6);
    color: #94a3b8;
    cursor: pointer;
    font-family: inherit;
  }
  .profile-form-key-format-btn:hover {
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.5);
  }
  .profile-form-key-format-btn.profile-form-key-format-btn--active {
    background: #2563eb;
    color: #fff;
  }
  .profile-form-key-row {
    margin-bottom: 1rem;
  }
  .profile-form-key-row:last-child {
    margin-bottom: 0;
  }
  .profile-form-key-row-inner {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
  }
  .profile-form-key-readonly {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    resize: none;
    box-sizing: border-box;
  }
  .profile-form-keys-warn {
    font-size: 0.72rem;
    color: #fbbf24;
    margin: 0.15rem 0 0.35rem;
    opacity: 0.95;
  }
  .profile-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.25rem;
  }
  
  /* 保持原有按钮样式（与全局一致） */
  .apply-editor-btn-primary {
    background: #2563eb;
    border: none;
    border-radius: 2rem;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
  }
  .apply-editor-btn-primary:hover {
    background: #1d4ed8;
  }
  .apply-editor-btn-secondary {
    background: rgba(100, 120, 140, 0.2);
    border: 1px solid #4b5e72;
    border-radius: 2rem;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
  }
  .apply-editor-btn-secondary:hover {
    background: rgba(100, 120, 140, 0.4);
    border-color: #7c9bbe;
  }
  </style>
  
  <nav class="settings-nav" aria-label="设置分类">
    <div class="settings-nav-group">
      <div class="settings-nav-title">Sync</div>
      <button type="button" class="settings-tab active" data-tab="sync">
        <i class="bi bi-hdd-network settings-tab-icon" aria-hidden="true"></i>
        <span class="settings-tab-label">Sync &amp; Servers</span>
      </button>
    </div>
    <div class="settings-nav-group">
      <div class="settings-nav-title">Workspace</div>
      <button type="button" class="settings-tab" data-tab="workspace">
        <i class="bi bi-folder2-open settings-tab-icon" aria-hidden="true"></i>
        <span class="settings-tab-label">Current Workspace</span>
      </button>
    </div>
    <div class="settings-nav-group">
      <div class="settings-nav-title">外观</div>
      <button type="button" class="settings-tab" data-tab="appearance">
        <i class="bi bi-brightness-high settings-tab-icon" aria-hidden="true"></i>
        <span class="settings-tab-label">主题</span>
      </button>
    </div>
    <div class="settings-nav-group">
      <div class="settings-nav-title">用户</div>
      <button type="button" class="settings-tab" data-tab="identity-login">
        <i class="bi bi-key settings-tab-icon" aria-hidden="true"></i>
        <span class="settings-tab-label">登录 / 注册</span>
      </button>
      <button type="button" class="settings-tab" data-tab="identity-profile">
        <i class="bi bi-person-vcard settings-tab-icon" aria-hidden="true"></i>
        <span class="settings-tab-label">用户信息</span>
      </button>
    </div>
  </nav>
  <div class="settings-panels">
    <div class="settings-panel" data-tab-panel="sync">
      <div class="settings-section-title">Sync & Servers</div>
      <div class="settings-sync-layout">
        <div class="settings-sync-sidebar">
          <div class="settings-sync-sidebar-header">
            <span class="settings-sync-sidebar-title">Servers</span>
            <div class="settings-sync-sidebar-actions">
              <button type="button" class="settings-sync-icon-btn" id="settings-sync-new" title="新建服务器">
                <i class="bi bi-plus-lg"></i>
              </button>
              <button type="button" class="settings-sync-icon-btn" id="settings-sync-duplicate" title="另存为配置">
                <i class="bi bi-files"></i>
              </button>
            </div>
          </div>
          <ul class="settings-sync-server-list" id="settings-sync-server-list"></ul>
        </div>
        <div class="settings-sync-main">
          <div class="settings-field">
            <label>Profile Name</label>
            <input id="settings-sync-name" type="text" autocomplete="off" placeholder="选填，如：本地 / 远程1" />
          </div>
          <div class="settings-field">
            <label>EventStore WebSocket</label>
            <input id="settings-sync-esserver" type="text" autocomplete="off" placeholder="选填，如：ws://127.0.0.1:8080/" />
          </div>
          <div class="settings-field">
            <label>Upload Base URL</label>
            <input id="settings-sync-uploadpath" type="text" autocomplete="off" placeholder="选填，如：http://127.0.0.1:8081/uploads/" />
          </div>
          <div class="settings-field">
            <label>Site Name</label>
            <input id="settings-sync-sitename" type="text" autocomplete="off" placeholder="选填，如：辰龙文档中心" />
          </div>
          <div class="settings-field">
            <label>Domain</label>
            <input id="settings-sync-domain" type="text" autocomplete="off" placeholder="选填，如：https://docs.example.com" />
          </div>
          <div class="settings-hint">
            左侧为服务器列表（本地 / 远程 1 / 远程 2 等），右侧为当前选中服务器的一组配置。
          </div>
          <div class="settings-sync-actions">
            <button type="button" class="apply-editor-btn apply-editor-btn-secondary" id="settings-sync-cancel-btn">取消</button>
            <button type="button" class="apply-editor-btn apply-editor-btn-primary" id="settings-sync-save-btn">保存 Sync 配置</button>
          </div>
        </div>
      </div>
    </div>
    <div class="settings-panel" data-tab-panel="appearance" style="display:none;">
      <div class="settings-section-title">主题</div>
      <p class="settings-hint" style="margin-bottom:12px;">选择界面配色；切换后立即写入本机存储，下次启动仍会生效。</p>
      <div class="settings-appearance-theme-row flex flex-wrap items-center gap-4 px-1 pb-1 pt-1.5">
        <button type="button" class="settings-theme-btn settings-theme-toggle" data-theme-choice="light" aria-pressed="false">
          <i class="bi bi-brightness-high" aria-hidden="true"></i>
          浅色
        </button>
        <button type="button" class="settings-theme-btn settings-theme-toggle" data-theme-choice="dark" aria-pressed="false">
          <i class="bi bi-moon-stars-fill" aria-hidden="true"></i>
          深色
        </button>
      </div>
      <p class="settings-theme-saved-hint" id="settings-theme-saved-hint" aria-live="polite"></p>
    </div>
    <div class="settings-panel" data-tab-panel="workspace" style="display:none;">
      <div class="settings-section-title">Workspace（只读显示）</div>
      <div class="settings-field">
        <label>Current Workspace</label>
        <input id="settings-workspace-current" type="text" readonly />
      </div>
      <div class="settings-hint">
        当前工作区路径仅供查看。要切换或修改工作区，请在主界面使用左侧 Files 面板或顶部 File &gt; Open Workspace…。
      </div>
    </div>
    <div class="settings-panel" data-tab-panel="identity-login" style="display:none;">
      <div id="settings-identity-key-section" class="mx-auto max-w-3xl rounded-2xl border border-slate-700/60 bg-slate-900/35 p-4 md:p-6 shadow-[0_12px_28px_rgba(2,6,23,0.35)]">
        <div class="mb-4 flex items-center justify-between gap-3">
          <div>
            <div class="settings-section-title !mb-1 !text-base" id="settings-identity-login-title">登录 / 注册</div>
            <p class="m-0 text-xs text-slate-400" id="settings-identity-login-subtitle">使用 EventStore 密钥管理当前登录身份</p>
          </div>
          <span id="settings-identity-login-badge" class="inline-flex items-center rounded-full border border-sky-500/30 bg-sky-500/10 px-2.5 py-1 text-[10px] font-medium tracking-wide text-sky-300">
            KEY LOGIN
          </span>
        </div>

        <div class="settings-hint rounded-lg border border-slate-700/50 bg-slate-900/45 px-3 py-2 text-slate-400" id="settings-identity-empty-hint" style="display:none;">
          登录只支持两种方式：粘贴已有 ESEC，或输入邮箱生成新用户密钥。
        </div>

        <!-- 已登录时：从服务器拉取的用户资料状态 -->
        <div class="settings-identity-profile-block" id="settings-identity-profile-block" style="display:none;">
          <div class="settings-identity-profile-loading" id="settings-identity-profile-loading" style="display:none;">
            <span class="settings-identity-profile-spinner" aria-hidden="true"></span>
            <span>正在从服务器获取用户信息…</span>
          </div>
          <div class="settings-identity-profile-has" id="settings-identity-profile-has" style="display:none;">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
            已登录，服务器资料：<strong id="settings-identity-profile-name">(已设置)</strong>
            <button type="button" class="content-compose-mini-btn" id="settings-identity-profile-set-btn" style="margin-left:8px;">编辑资料</button>
          </div>
          <div class="settings-identity-profile-empty" id="settings-identity-profile-empty" style="display:none;">
            已登录，但尚未设置个人资料。
            <button type="button" class="content-compose-mini-btn" id="settings-identity-profile-skip-btn" style="margin-left:8px;">稍后</button>
            <button type="button" class="content-compose-mini-btn" id="settings-identity-profile-set-btn-empty" style="margin-left:4px;">去完善</button>
          </div>
          <div class="settings-identity-profile-error" id="settings-identity-profile-error" style="display:none;"></div>
        </div>
  
        <!-- Tab 式按钮组（二选一效果） -->
        <div class="identity-mode-tabs">
          <button type="button" class="identity-mode-tab apply-editor-btn-secondary" id="settings-identity-mode-paste-btn">粘贴已有 ESEC</button>
          <button type="button" class="identity-mode-tab apply-editor-btn-secondary" id="settings-identity-mode-new-btn">新用户（邮箱）</button>
        </div>
  
        <div class="settings-field mt-4 rounded-xl border border-slate-700/60 bg-slate-900/35 px-3 py-3" id="settings-identity-email-wrap" style="display:none;">
          <label class="mb-1.5 block text-xs font-medium text-slate-300">邮箱（注册时必填，一个邮箱只对应一个私钥）</label>
          <input id="settings-identity-email" class="!h-9 !w-full !rounded-lg !border-slate-600/70 !bg-slate-950/70 !px-3 !text-slate-100 placeholder:!text-slate-500" type="email" placeholder="请输入邮箱，例如 you@example.com" autocomplete="off" />
        </div>
  
        <div class="settings-field mt-4 rounded-xl border border-slate-700/60 bg-slate-900/35 px-3 py-3" id="settings-identity-esec-wrap">
          <label class="mb-1.5 block text-xs font-medium text-slate-300" id="settings-identity-esec-label">ESEC 密钥（仅保存在本地，不上传服务器）</label>
          <div class="settings-identity-priv-row">
            <textarea id="settings-identity-privkey" class="!min-h-[92px] !w-full !rounded-lg !border-slate-600/70 !bg-slate-950/70 !px-3 !py-2 !text-slate-100 placeholder:!text-slate-500" rows="3" placeholder="粘贴或导入 ESEC 密钥，例如 esec1..."></textarea>
            <button type="button" class="settings-identity-copy-btn" id="settings-identity-copy-btn" title="复制 ESEC 密钥">
              复制
            </button>
          </div>
        </div>
  
        <input id="settings-identity-pubkey" type="hidden" />
  
        <div class="settings-hint mt-3 rounded-lg border border-amber-500/25 bg-amber-500/8 px-3 py-2 text-amber-200/80" id="settings-identity-login-help">
          新用户请先填邮箱并生成密钥；点击「使用此 ESEC 登录」会保存到本地，并在已在 Sync &amp; Servers 中填写 EventStore WebSocket 时，自动向该服务器提交注册（与 eventstoreUI create_user 一致）。
        </div>
  
        <div class="settings-sync-actions settings-identity-actions-row mt-4 !justify-end">
          <button type="button" class="apply-editor-btn apply-editor-btn-secondary" id="settings-identity-generate-main-btn">生成新用户密钥</button>
          <button type="button" class="apply-editor-btn apply-editor-btn-primary" id="settings-identity-save-btn">使用此 ESEC 登录</button>
          <button type="button" class="apply-editor-btn apply-editor-btn-secondary" id="settings-identity-register-server-btn" style="display:none;" title="使用当前 Sync 中的 esserver 向 EventStore 注册">向当前服务器注册</button>
          <button type="button" class="apply-editor-btn apply-editor-btn-secondary" id="settings-identity-logout-btn" style="display:none;" title="清除本地密钥">退出登录</button>
        </div>
      </div>
    </div>
    <div class="settings-panel" data-tab-panel="identity-profile" style="display:none;">
      <div class="settings-identity-profile-form-wrap" id="settings-identity-profile-form-wrap">
        <div class="profile-form-card">
          <div class="profile-form-hero profile-form-hero--compact">
            <p class="profile-form-hero-name" id="settings-profile-hero-name">未设置昵称</p>
            <div class="profile-form-avatar-ring">
              <button type="button" class="profile-form-avatar-trigger" id="settings-profile-avatar-trigger" title="点击上传头像，或聚焦后 Ctrl+V 粘贴图片">
                <div class="profile-form-avatar-preview-wrap">
                  <div id="settings-profile-avatar-preview" class="profile-form-avatar-preview profile-form-avatar-preview--hero"></div>
                </div>
              </button>
            </div>
            <input id="settings-profile-avatar-file" type="file" accept="image/png,image/jpeg,image/webp,image/gif" style="display:none;" />
            <p class="profile-form-avatar-hint">点击头像上传，或聚焦头像后粘贴图片（Ctrl+V）</p>
            <div class="profile-form-hero-text">
              <h2 class="profile-form-title">个人资料</h2>
              <p class="profile-form-subtitle">填写名称与简介后保存，将直接上传到 EventStore 个人主页</p>
            </div>
          </div>
          <div class="profile-form-page-more-notice">
            <button type="button" class="profile-form-page-more-toggle" id="settings-profile-keys-toggle" aria-expanded="false" aria-controls="settings-profile-keys-section">
              <span class="profile-form-page-more-toggle-text"><i class="bi bi-key"></i> 展开密钥信息（公钥 / 私钥）</span>
              <i class="bi bi-chevron-down profile-form-page-more-toggle-icon" aria-hidden="true"></i>
            </button>
          </div>
          <div class="profile-form-body">
            <div class="profile-form-field">
              <label class="profile-form-label" for="settings-profile-name">显示名称</label>
              <input id="settings-profile-name" type="text" class="profile-form-input" placeholder="显示名称" maxlength="32" />
            </div>
            <div class="profile-form-field">
              <label class="profile-form-label" for="settings-profile-title">职业 / 头衔</label>
              <input id="settings-profile-title" type="text" class="profile-form-input" placeholder="选填，如：开发者" maxlength="20" />
            </div>
            <div class="profile-form-field">
              <label class="profile-form-label" for="settings-profile-bio">个人简介</label>
              <textarea id="settings-profile-bio" class="profile-form-textarea" rows="4" placeholder="介绍一下自己，让读者更了解您…"></textarea>
            </div>
            <div class="profile-form-actions">
              <button type="button" class="apply-editor-btn apply-editor-btn-secondary" id="settings-profile-back-btn">返回</button>
              <button type="button" class="apply-editor-btn apply-editor-btn-primary" id="settings-profile-save-btn">保存到服务器</button>
            </div>
          </div>
          <div class="profile-form-keys-block" id="settings-profile-keys-section" hidden>
            <div class="profile-form-keys-title">身份密钥（只读）</div>
            <p class="profile-form-keys-desc">公钥与 ESEC 私钥由「登录 / 注册」页决定，不可在此修改；备份或迁移时请复制到安全位置。</p>
            <div class="profile-form-key-format-row">
              <span class="profile-form-key-format-label">显示格式</span>
              <div class="profile-form-key-format-seg" role="group" aria-label="密钥显示格式">
                <button type="button" class="profile-form-key-format-btn profile-form-key-format-btn--active" id="settings-profile-key-format-encoded" data-key-format="encoded">epub / ESEC</button>
                <button type="button" class="profile-form-key-format-btn" id="settings-profile-key-format-hex" data-key-format="hex">Hex</button>
              </div>
            </div>
            <div class="profile-form-key-row">
              <label class="profile-form-label" for="settings-profile-pubkey-display"><span id="settings-profile-pubkey-label-text">公钥（epub）</span></label>
              <div class="profile-form-key-row-inner">
                <textarea id="settings-profile-pubkey-display" class="profile-form-key-readonly" rows="2" readonly spellcheck="false" autocomplete="off"></textarea>
                <button type="button" class="apply-editor-btn apply-editor-btn-secondary" id="settings-profile-copy-pubkey">复制</button>
              </div>
            </div>
            <div class="profile-form-key-row">
              <label class="profile-form-label" for="settings-profile-privkey-display"><span id="settings-profile-privkey-label-text">私钥（ESEC）</span></label>
              <p class="profile-form-keys-warn">请勿泄露给他人；获得私钥即可代表您登录。</p>
              <div class="profile-form-key-row-inner">
                <textarea id="settings-profile-privkey-display" class="profile-form-key-readonly" rows="3" readonly spellcheck="false" autocomplete="off"></textarea>
                <button type="button" class="apply-editor-btn apply-editor-btn-secondary" id="settings-profile-copy-privkey">复制</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>