@bolloon/bolloon-agent 0.4.14 → 0.4.16

package/dist/web/mobile.css

@@ -1,4 +1,4 @@
-/* 手机端 UI — 微信风格 + bolloon WebUI 主题 (配色不变) */
+/* 手机端 UI — bolloon 品牌风格 (暗色 + 品牌绿) */
 :root {
   --bg: #1a1a18;
   --bg-card: #222220;
@@ -19,7 +19,7 @@ html, body { height: 100%; }
 body {
   background: var(--bg);
   color: var(--text);
-  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   overflow: hidden;
   touch-action: manipulation;
 }
@@ -53,8 +53,8 @@ body {
 }
 
 /* 页面容器 */
-.page-container { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
-.page { min-height: 100%; }
+.page-container { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
+.page { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
 
 /* 列表 */
 .list { padding: 8px 0; }
@@ -98,21 +98,49 @@ body {
 .conv-name { font-size: 16px; color: var(--text); }
 .conv-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
-/* 我 tab 卡片 */
+/* 我 tab 卡片 → 顶部身份栏 */
 .profile-card {
   display: flex; align-items: center; gap: 14px;
   padding: 20px 16px;
   background: var(--bg-card);
   border-bottom: 1px solid var(--border);
+  cursor: pointer;
 }
 .avatar {
-  width: 56px; height: 56px; border-radius: 12px;
+  width: 60px; height: 60px; border-radius: 50%;
   background: var(--accent); color: var(--bg);
   display: flex; align-items: center; justify-content: center;
   font-size: 24px; font-weight: 700;
+  background-size: cover; background-position: center;
+  flex-shrink: 0; cursor: pointer;
 }
+.profile-info { flex: 1; min-width: 0; }
 .profile-name { font-size: 18px; font-weight: 600; }
 .profile-did { font-size: 12px; color: var(--text-muted); word-break: break-all; margin-top: 4px; }
+.profile-p2p { font-size: 11px; color: var(--text-secondary); word-break: break-all; margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
+.profile-chevron { color: var(--text-muted); font-size: 22px; }
+
+/* 身份介绍页 */
+.identity-page { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg); }
+.identity-page[hidden] { display: none !important; }
+.identity-header { height: var(--topbar-h); display: flex; align-items: center; padding: 0 12px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--border); gap: 8px; background: var(--bg-card); }
+.identity-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+.identity-row { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
+.identity-row .k { font-size: 12px; color: var(--text-secondary); }
+.identity-row .v { font-size: 14px; color: var(--text); word-break: break-all; }
+
+/* 头像裁剪 */
+.crop-modal { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(0,0,0,0.92); }
+.crop-modal[hidden] { display: none !important; }
+.crop-stage { flex: 1; position: relative; overflow: hidden; touch-action: none; }
+.crop-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: none; user-select: none; -webkit-user-select: none; }
+.crop-box { position: absolute; width: 70vw; height: 70vw; max-width: 340px; max-height: 340px; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px dashed var(--accent); box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55); }
+.crop-zoom-row { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; background: rgba(0,0,0,0.6); }
+.crop-zoom-row input[type=range] { flex: 1; }
+.crop-actions { display: flex; gap: 10px; padding: 0 20px 20px; background: rgba(0,0,0,0.6); }
+.crop-actions button { flex: 1; padding: 13px; border: none; border-radius: 10px; font-weight: 700; }
+.crop-cancel { background: rgba(255,255,255,0.15); color: #fff; }
+.crop-confirm { background: var(--accent); color: var(--bg); }
 
 /* 底部 tab */
 .tabbar {
@@ -134,6 +162,74 @@ body {
 .tab.active { color: var(--accent); }
 .tab-icon { font-size: 20px; }
 
+/* 首页创建新会话栏 (底部中央, tab 上方, 悬浮) */
+.create-session-btn {
+  position: fixed;
+  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));
+  left: 50%; transform: translateX(-50%);
+  z-index: 20;
+  padding: 12px 22px;
+  border: none; border-radius: 30px;
+  background: var(--accent); color: var(--bg);
+  font-size: 15px; font-weight: 700;
+  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
+  cursor: pointer;
+}
+.create-session-btn:active { transform: translateX(-50%) scale(0.97); }
+
+/* 底部滑入/滑出 sheet */
+.sheet {
+  position: fixed; inset: 0;
+  z-index: 80;
+  display: flex; align-items: flex-end; justify-content: center;
+  background: rgba(0,0,0,0.45);
+  transition: opacity .25s;
+}
+.sheet[hidden] { display: none !important; }
+.sheet-inner {
+  width: 100%; max-width: 480px;
+  background: var(--bg-card);
+  border-top-left-radius: 18px; border-top-right-radius: 18px;
+  border: 1px solid var(--border); border-bottom: none;
+  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
+  display: flex; flex-direction: column; align-items: center; gap: 14px;
+  animation: sheetUp .28s ease;
+}
+@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
+.sheet-title { font-size: 16px; font-weight: 600; color: var(--text); }
+.sheet-text { font-size: 14px; color: var(--text-secondary); }
+.spinner {
+  width: 44px; height: 44px;
+  border: 4px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin .8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.sheet-choice {
+  width: 100%; padding: 14px;
+  border: none; border-radius: 12px;
+  background: var(--bg-hover); color: var(--text);
+  font-size: 15px; font-weight: 600;
+  text-align: center; cursor: pointer;
+}
+.sheet-choice:active { background: var(--border); }
+.sheet-choice.sheet-cancel { background: transparent; color: var(--text-secondary); }
+.sheet-inner-choices { gap: 10px; }
+
+/* 钱包 */
+.wallet-addr {
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-secondary);
+  word-break: break-all;
+  padding: 10px;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-family: 'JetBrains Mono', monospace;
+}
+
 /* 聊天页 */
 .chat-page {
   position: fixed; inset: 0;
@@ -149,6 +245,7 @@ body {
   border-bottom: 1px solid var(--border);
   gap: 8px;
 }
+.chat-topbar .icon-btn { position: relative; z-index: 5; }
 .chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
 .chat-input-bar {
   display: flex; gap: 8px; padding: 8px 12px;
@@ -171,3 +268,383 @@ body {
 .bubble { max-width: 75%; padding: 8px 12px; border-radius: 10px; margin: 4px 0; word-break: break-word; }
 .bubble.user { margin-left: auto; background: var(--accent); color: var(--bg); }
 .bubble.ai { background: var(--bg-card); color: var(--text); }
+
+/* ============ 回复气泡操作栏 (复制/点踩/分享/刷新/分支) ============ */
+.reply-actions {
+  display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;
+}
+.reply-actions .ra-btn {
+  font-size: 12px;
+  padding: 3px 9px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--bg);
+  color: var(--text-secondary);
+  cursor: pointer;
+  line-height: 1.2;
+}
+.reply-actions .ra-btn:active { background: var(--bg-card); }
+.reply-actions .ra-vote-like { color: #4caf50; border-color: #4caf50; }
+.reply-actions .ra-vote-dis { color: #e5484d; border-color: #e5484d; }
+
+/* ============ Agent Loop 循环状态 ============ */
+.loop-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  background: linear-gradient(180deg, var(--accent-glow) 0%, transparent 100%);
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-family: 'JetBrains Mono', monospace;
+  animation: loopStatusFadeIn 0.3s ease-out;
+}
+.loop-status-bar[hidden] { display: none !important; }
+@keyframes loopStatusFadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.loop-status-spinner {
+  width: 16px; height: 16px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-right-color: var(--accent-hover);
+  border-radius: 50%;
+  animation: loopStatusSpin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  flex-shrink: 0;
+}
+@keyframes loopStatusSpin {
+  to { transform: rotate(360deg); }
+}
+.loop-status-text {
+  flex: 1;
+  background: linear-gradient(90deg, var(--text-secondary) 0%, var(--accent) 50%, var(--text-secondary) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: loopStatusTextShimmer 2.4s linear infinite;
+}
+@keyframes loopStatusTextShimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ============ Agent 工作记录 = 执行轨迹 (放在回复区, 不折叠) ============ */
+.agent-trace {
+  margin: 6px 0 6px 4px;
+  padding: 8px 10px;
+  border-left: 2px solid var(--accent);
+  background: var(--bg-card);
+  border-radius: 8px;
+  max-height: 34vh;
+  overflow-y: auto;
+}
+.agent-trace-line {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  word-break: break-word;
+  white-space: pre-wrap;
+  padding: 1px 0;
+}
+.agent-trace-line:first-child { color: var(--text); }
+
+/* ============ 双频滑动卡片 (主页面) ============ */
+
+.card-carousel {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  touch-action: pan-x pan-y;
+}
+
+.card-track {
+  display: flex;
+  flex-direction: column;   /* 上下翻卡 */
+  gap: 16px;
+  padding: 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll-snap-type: y mandatory;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  height: 100%;
+  align-items: stretch;
+  touch-action: pan-y;   /* 垂直交给原生滚动翻卡, 水平交给 JS 做删除 reveal */
+}
+
+.card-track::-webkit-scrollbar { display: none; }
+
+/* 每张卡片外层: 纵向单元 + 删除位 */
+.card-wrap {
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+  position: relative;
+  border-radius: 16px;
+  overflow: hidden;
+  min-height: 0;
+}
+.card-delete {
+  position: absolute; right: 0; top: 0; bottom: 0;
+  width: 88px;
+  background: #e5484d; color: #fff;
+  border: none; font-size: 15px; font-weight: 700;
+  z-index: 3;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  opacity: 0; pointer-events: none;   /* 未 reveal 时隐藏且不可点, 避免遮挡 */
+  transition: opacity 0.15s;
+}
+.card-wrap.reveal-delete .card-delete { opacity: 1; pointer-events: auto; }
+.card-wrap.reveal-delete .agent-card { transform: translateX(-24px); }
+
+.agent-card {
+  position: relative; z-index: 2;
+  flex: none; width: 100%; height: 100%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: pan-y;   /* 横向交给 JS */
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.agent-card:active { cursor: grabbing; }
+.agent-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
+
+.agent-card.active-card {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent), 0 4px 24px rgba(196, 214, 64, 0.15);
+}
+
+/* 卡片封面区域 (水平频) */
+.card-cover {
+  position: relative;
+  height: 40vh;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.card-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-cover-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
+  color: var(--bg);
+}
+
+.card-cover-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px;
+  background: linear-gradient(transparent, rgba(0,0,0,0.8));
+  color: #fff;
+}
+
+.card-cover-name {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.card-cover-desc {
+  font-size: 13px;
+  opacity: 0.8;
+}
+
+/* 卡片详情区域 (垂直频) */
+.card-body {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px;
+}
+
+.card-body-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.card-body-row:last-child { border-bottom: none; }
+
+.card-body-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  min-width: 60px;
+}
+
+.card-body-value {
+  font-size: 14px;
+  color: var(--text);
+  flex: 1;
+}
+
+.card-action-btn {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--accent);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--accent);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 12px;
+  transition: background 0.2s;
+}
+
+.card-action-btn:active {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+/* 卡片指示器 */
+.card-indicator {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border);
+}
+
+.card-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--border);
+  transition: all 0.2s;
+}
+
+.card-dot.active {
+  background: var(--accent);
+  width: 24px;
+  border-radius: 4px;
+}
+
+/* 卡片详情浮层 */
+.card-detail {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card-detail[hidden] { display: none !important; }
+
+.detail-header {
+  height: var(--topbar-h);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 12px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+}
+
+.detail-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  flex: 1;
+}
+
+.detail-body {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px;
+}
+
+.detail-section {
+  margin-bottom: 20px;
+}
+
+.detail-section-title {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+
+.detail-meta {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.detail-meta-item {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.detail-meta-item .label {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.detail-meta-item .value {
+  font-size: 14px;
+  color: var(--text);
+  margin-top: 4px;
+}
+
+/* 聊天页 (在详情浮层内) */
+.chat-page {
+  position: fixed; inset: 0;
+  display: flex; flex-direction: column;
+  background: var(--bg);
+  z-index: 60;
+}
+
+/* 加载状态 */
+.card-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.card-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-muted);
+  font-size: 14px;
+  flex-direction: column;
+  gap: 8px;
+}