优化全能创作

core/frontend/src/omni-session-page.css

@@ -104,7 +104,8 @@
 
 .omni-session-feed {
   flex: 1 1 auto;
-  padding: 30px 0 18px;
+  /* 底部留给 sticky composer(+确认卡高度余量),最后一条消息/确认卡滚到输入框上方,不被挡住 */
+  padding: 30px 0 168px;
   background: transparent;
 }
 
@@ -120,6 +121,8 @@
    这里改用 .is-user 避开 —— 本文件相对设计稿唯一的类名改动。 */
 .omni-chat-row.is-user {
   justify-content: flex-end;
+  /* 用户气泡常从乐观 id 换成服务端 id；入场动画会让它闪一下，关掉 */
+  animation: none;
 }
 
 .omni-chat-avatar {
@@ -328,8 +331,18 @@
 }
 
 .omni-plan-points i,
-.omni-plan-summary i {
+.omni-plan-points .omni-plan-point-body,
+.omni-plan-summary i,
+.omni-plan-summary .omni-plan-point-body {
+  display: block;
   font-style: normal;
+  font-weight: 400;
+  color: #525965;
+}
+
+.omni-strategy-grid .omni-strategy-value {
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .omni-plan-timeline {
@@ -921,6 +934,7 @@
   color: #fff;
   background: var(--klein);
   cursor: pointer;
+  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
 }
 
 .omni-session-send svg {
@@ -928,6 +942,22 @@
   height: 16px;
 }
 
+/* 整理方案中:发送钮变成终止(方块),中性深色贴合 omni 工具条 */
+.omni-session-send.is-stop {
+  background: #2a2f38;
+  color: #fff;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
+}
+
+.omni-session-send.is-stop:hover:not(:disabled) {
+  background: #3a404a;
+}
+
+.omni-session-send.is-stop svg {
+  width: 12px;
+  height: 12px;
+}
+
 .omni-process-card {
   padding: 0;
 }
@@ -1286,6 +1316,9 @@
 /* ── 确认闸门(.omni-confirm-card)· 设计稿里是方案卡下面那条操作行,这里独立成卡。
    积分数字挂在按钮里 —— 用户按下去之前就该知道要花多少。 */
 .omni-confirm-card {
+  position: relative;
+  /* 不要压过 sticky composer(z-index:3);下拉菜单自身另有更高 z-index */
+  z-index: 1;
   width: min(760px, 100%);
   display: flex;
   flex-direction: column;
@@ -1296,6 +1329,8 @@
   border: 1px solid rgba(34, 42, 54, .10);
   border-radius: 14px;
   background: #fff;
+  /* 时长/参数下拉要冒出卡片，不能被裁 */
+  overflow: visible;
 }
 
 .omni-confirm-copy {
@@ -1317,15 +1352,43 @@
 }
 
 .omni-confirm-params {
+  position: relative;
+  z-index: 6;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
+  overflow: visible;
 }
 
 .omni-confirm-params .omni-duration-control {
   position: relative;
-  z-index: 20;
+  z-index: 80;
+}
+
+.omni-confirm-params .omni-duration-control:has(.omni-duration-menu:not([hidden])) {
+  z-index: 120;
+}
+
+/* 确认卡贴着输入框：时长菜单向上展开，避免「超出」压到 composer */
+.omni-confirm-params .omni-duration-menu {
+  top: auto;
+  bottom: calc(100% + 8px);
+  right: 0;
+  left: auto;
+  width: min(330px, calc(100vw - 48px));
+  max-height: min(360px, calc(100vh - 120px));
+  overflow-y: auto;
+}
+
+.omni-confirm-params .omni-parameter:has(.custom-select-shell.open) {
+  z-index: 40;
+}
+
+.omni-confirm-params .omni-parameter .custom-select-menu {
+  /* 贴底时也优先向上翻，避免被 sticky composer 挡住 */
+  top: auto;
+  bottom: calc(100% + 6px);
 }
 
 .omni-confirm-hint {
@@ -1386,10 +1449,11 @@
 .omni-mention-chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
 }
 
 .omni-mention-chip {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -1400,6 +1464,34 @@
   line-height: 1.2;
 }
 
+.omni-mention-chip.has-thumb {
+  max-width: none;
+  padding: 0;
+  border-radius: 10px;
+  background: transparent;
+  border: 0;
+  overflow: visible;
+}
+
+.omni-mention-thumb {
+  display: block;
+  width: 52px;
+  height: 52px;
+  padding: 0;
+  border: 1px solid rgba(34, 42, 54, .1);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f3f4f7;
+  cursor: zoom-in;
+}
+
+.omni-mention-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 .omni-mention-chip i {
   flex: 0 0 auto;
   padding: 2px 6px;
@@ -1416,7 +1508,7 @@
   white-space: nowrap;
 }
 
-.omni-mention-chip button {
+.omni-mention-chip .omni-mention-remove {
   width: 16px;
   height: 16px;
   display: grid;
@@ -1429,12 +1521,23 @@
   cursor: pointer;
 }
 
-.omni-mention-chip button svg {
+.omni-mention-chip.has-thumb .omni-mention-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  color: #fff;
+  background: rgba(34, 42, 54, .72);
+  box-shadow: 0 2px 6px rgba(20, 27, 38, .18);
+}
+
+.omni-mention-chip .omni-mention-remove svg {
   width: 11px;
   height: 11px;
 }
 
-.omni-mention-chips.is-user .omni-mention-chip {
+.omni-mention-chips.is-user .omni-mention-chip:not(.has-thumb) {
   color: #fff;
   background: rgba(255, 255, 255, .14);
 }
@@ -1444,11 +1547,20 @@
   background: #edf5ff;
 }
 
+.omni-chat-stack .omni-mention-chips.is-user {
+  justify-content: flex-end;
+  margin: 0 0 8px;
+}
+
+.omni-mention-chips.is-user .omni-mention-chip.has-thumb .omni-mention-thumb {
+  border-color: var(--border-faint);
+}
+
 .omni-mention-chips.is-composer {
   margin: 0 2px 8px;
 }
 
-.omni-mention-chips.is-composer .omni-mention-chip {
+.omni-mention-chips.is-composer .omni-mention-chip:not(.has-thumb) {
   color: #2b3240;
   background: #edf5ff;
   border: 1px solid rgba(0, 47, 167, .12);
@@ -1459,7 +1571,7 @@
   background: var(--klein);
 }
 
-.omni-mention-chips.is-composer .omni-mention-chip button {
+.omni-mention-chips.is-composer .omni-mention-chip:not(.has-thumb) .omni-mention-remove {
   color: #66707d;
 }
 
@@ -1471,15 +1583,98 @@
   max-width: min(670px, 82%);
 }
 
+/* 用户短消息(如「嗯」)勿被下方 time+操作条撑宽;气泡贴合文案,长文仍受 max-width 约束 */
+.omni-chat-row.is-user .omni-chat-stack {
+  align-items: flex-end;
+  width: fit-content;
+}
+
 .omni-chat-stack .omni-chat-bubble {
   max-width: 100%;
 }
 
-/* 发送中:不要文案;用户气泡略提亮 + 柔和呼吸,发出去后恢复纯黑 */
+.omni-chat-row.is-user .omni-chat-stack .omni-chat-bubble {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.omni-user-message-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 24px;
+  margin-top: 2px;
+  color: var(--black-alpha-48);
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .15s ease, visibility 0s linear .15s;
+}
+
+.omni-chat-row.is-user:hover .omni-user-message-actions,
+.omni-chat-row.is-user:focus-within .omni-user-message-actions {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.omni-user-message-actions time {
+  margin-right: 8px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.omni-user-message-actions button {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: var(--r-md);
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.omni-user-message-actions button:hover:not(:disabled) {
+  color: var(--accent-black);
+  background: var(--black-alpha-4);
+}
+
+.omni-user-message-actions button:disabled {
+  cursor: not-allowed;
+  opacity: .45;
+}
+
+.omni-user-message-actions svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* 发送中:不要文案;左侧柔和呼吸高亮,气泡本身不变形 */
+.omni-chat-row.is-user .omni-chat-stack.is-pending {
+  padding-left: 6px;
+}
+
+.omni-chat-row.is-user .omni-chat-stack.is-pending::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 3px;
+  border-radius: 2px;
+  background: #5b6572;
+  animation: omniSendPulse 1.35s ease-in-out infinite;
+  pointer-events: none;
+}
+
 .omni-chat-row.is-user .omni-chat-stack.is-pending .omni-chat-bubble {
   background: #3a424e;
   border-color: #3a424e;
-  animation: omniSendPulse 1.35s ease-in-out infinite;
 }
 
 .omni-send-spinner {
@@ -1497,29 +1692,6 @@
   color: #5c6570;
 }
 
-.omni-typing {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.omni-typing i {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--klein);
-  opacity: .35;
-  animation: omniTyping 1.1s ease-in-out infinite;
-}
-
-.omni-typing i:nth-child(2) { animation-delay: .15s; }
-.omni-typing i:nth-child(3) { animation-delay: .3s; }
-
-@keyframes omniTyping {
-  0%, 80%, 100% { opacity: .28; transform: translateY(0); }
-  40% { opacity: 1; transform: translateY(-2px); }
-}
-
 .omni-chat-bubble.is-reasoning {
   display: flex;
   flex-direction: column;
@@ -1549,14 +1721,37 @@
   padding-left: 10px;
 }
 
+.omni-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.omni-typing i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--klein);
+  opacity: .35;
+  animation: omniTyping 1.1s ease-in-out infinite;
+}
+
+.omni-typing i:nth-child(2) { animation-delay: .15s; }
+.omni-typing i:nth-child(3) { animation-delay: .3s; }
+
+@keyframes omniTyping {
+  0%, 80%, 100% { opacity: .28; transform: translateY(0); }
+  40% { opacity: 1; transform: translateY(-2px); }
+}
+
 @keyframes omniSendPulse {
   0%, 100% {
-    background: #3a424e;
-    box-shadow: 0 0 0 0 rgba(58, 66, 78, 0);
+    background: #5b6572;
+    opacity: .45;
   }
   50% {
-    background: #4a5360;
-    box-shadow: 0 0 0 4px rgba(58, 66, 78, .12);
+    background: #8b95a3;
+    opacity: 1;
   }
 }
 
@@ -1602,7 +1797,7 @@
   right: 12px;
   bottom: 12px;
   z-index: 81;
-  width: min(420px, calc(100vw - 24px));
+  width: min(560px, calc(100vw - 24px));
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -1713,6 +1908,105 @@
   word-break: break-word;
 }
 
+.omni-prompt-block.is-shot {
+  border-color: rgba(0, 47, 167, .10);
+  background: linear-gradient(180deg, #fbfcff 0%, #fff 48%);
+}
+
+.omni-prompt-meta,
+.omni-prompt-shot-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+.omni-prompt-meta div,
+.omni-prompt-shot-fields div {
+  min-width: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #f6f8fb;
+}
+
+.omni-prompt-shot-fields {
+  grid-template-columns: 1fr;
+  margin-bottom: 10px;
+}
+
+.omni-prompt-meta dt,
+.omni-prompt-shot-fields dt {
+  margin: 0;
+  color: #858b94;
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.omni-prompt-meta dd,
+.omni-prompt-shot-fields dd {
+  margin: 4px 0 0;
+  color: #272d37;
+  font-size: 13px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.omni-prompt-block.is-table {
+  padding: 10px;
+}
+
+.omni-prompt-table-wrap {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid rgba(34, 42, 54, .08);
+  background: #fff;
+}
+
+.omni-prompt-table {
+  width: 100%;
+  min-width: 420px;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.omni-prompt-table th,
+.omni-prompt-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(34, 42, 54, .07);
+  color: #2b3240;
+  font-size: 12px;
+  line-height: 1.55;
+  text-align: left;
+  vertical-align: top;
+  word-break: break-word;
+}
+
+.omni-prompt-table th {
+  position: sticky;
+  top: 0;
+  color: #5c6570;
+  background: #f6f8fb;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.omni-prompt-table th:first-child,
+.omni-prompt-table td:first-child {
+  width: 72px;
+  color: var(--klein);
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.omni-prompt-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.omni-prompt-table tbody tr:hover td {
+  background: #fafbff;
+}
+
 
 .omni-gate-bubble {
   display: flex;
@@ -1754,3 +2048,16 @@
   font-size: 12px;
   color: #8a93a0;
 }
+
+
+.omni-session-upload-wrap.is-uploading {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.omni-upload-status {
+  font-size: 12px;
+  color: #5c6570;
+  white-space: nowrap;
+}