微信小程序页面迁移校验之前 P5任务处理之前

2026-03-09 01:19:21 +08:00
parent 263bf96035
commit 6e20987d2f
1112 changed files with 153824 additions and 219694 deletions
--- a/副本/miniprogram/pages/chat/chat.wxss
+++ b/副本/miniprogram/pages/chat/chat.wxss
@@ -0,0 +1,289 @@
+/* pages/chat/chat.wxss — AI 对话页样式 */
+
+/* 加载态 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+/* 页面容器 */
+.chat-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: var(--color-gray-1);
+}
+
+/* ========== 消息列表 ========== */
+.message-list {
+  flex: 1;
+  padding: 24rpx 32rpx;
+  padding-bottom: 0;
+  overflow-y: auto;
+}
+
+.scroll-bottom-spacer {
+  height: 32rpx;
+}
+
+/* ========== 引用卡片（页面顶部） ========== */
+.reference-card {
+  background-color: var(--color-gray-2, #eeeeee);
+  border-radius: var(--radius-lg);
+  padding: 24rpx;
+  margin-bottom: 24rpx;
+}
+
+.reference-header {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 8rpx;
+}
+
+.reference-source {
+  font-size: var(--font-xs);
+  color: var(--color-gray-7);
+}
+
+.reference-summary {
+  font-size: var(--font-sm);
+  color: var(--color-gray-9);
+  line-height: 1.5;
+}
+
+/* ========== 空对话提示 ========== */
+.empty-hint {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 200rpx;
+}
+
+.empty-icon {
+  font-size: 96rpx;
+  margin-bottom: 24rpx;
+}
+
+.empty-text {
+  font-size: var(--font-lg);
+  color: var(--color-gray-13);
+  font-weight: 500;
+  margin-bottom: 8rpx;
+}
+
+.empty-sub {
+  font-size: var(--font-sm);
+  color: var(--color-gray-7);
+}
+
+/* ========== 消息行 ========== */
+.message-row {
+  display: flex;
+  margin-bottom: 24rpx;
+}
+
+.message-user {
+  justify-content: flex-end;
+}
+
+.message-assistant {
+  justify-content: flex-start;
+  gap: 16rpx;
+}
+
+/* ========== AI 头像 ========== */
+.ai-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--color-primary), #4d8ff7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ai-avatar-emoji {
+  font-size: 36rpx;
+  line-height: 1;
+}
+
+/* ========== 气泡 ========== */
+.bubble-wrapper {
+  max-width: 80%;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.bubble {
+  padding: 20rpx 28rpx;
+  line-height: 1.6;
+  word-break: break-all;
+}
+
+.bubble-text {
+  font-size: var(--font-sm);
+  line-height: 1.6;
+}
+
+/* 用户气泡：蓝色，右上角方角 */
+.bubble-user {
+  max-width: 80%;
+  background-color: var(--color-primary);
+  border-radius: 32rpx 8rpx 32rpx 32rpx;
+}
+
+.bubble-user .bubble-text {
+  color: #ffffff;
+}
+
+/* AI 气泡：白色，左上角方角 */
+.bubble-assistant {
+  background-color: #ffffff;
+  border-radius: 8rpx 32rpx 32rpx 32rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+}
+
+.bubble-assistant .bubble-text {
+  color: var(--color-gray-13);
+}
+
+/* ========== AI 引用卡片（内联） ========== */
+.inline-ref-card {
+  background-color: #ffffff;
+  border-radius: var(--radius-lg);
+  padding: 20rpx 24rpx;
+  border-left: 6rpx solid var(--color-primary);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+}
+
+.inline-ref-header {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  margin-bottom: 8rpx;
+}
+
+.inline-ref-type {
+  font-size: var(--font-xs);
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+.inline-ref-title {
+  font-size: var(--font-sm);
+  color: var(--color-gray-13);
+  font-weight: 500;
+}
+
+.inline-ref-summary {
+  font-size: var(--font-xs);
+  color: var(--color-gray-8);
+  margin-bottom: 12rpx;
+  display: block;
+}
+
+.inline-ref-data {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx 24rpx;
+}
+
+.ref-data-item {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.ref-data-key {
+  font-size: var(--font-xs);
+  color: var(--color-gray-7);
+}
+
+.ref-data-value {
+  font-size: var(--font-xs);
+  color: var(--color-gray-13);
+  font-weight: 500;
+}
+
+/* ========== 打字指示器 ========== */
+.typing-bubble {
+  padding: 20rpx 32rpx;
+}
+
+.typing-dots {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background-color: var(--color-gray-6);
+  animation: typingBounce 1.4s infinite ease-in-out;
+}
+
+.dot-1 { animation-delay: 0s; }
+.dot-2 { animation-delay: 0.2s; }
+.dot-3 { animation-delay: 0.4s; }
+
+@keyframes typingBounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* ========== 底部输入区域 ========== */
+.input-bar {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 16rpx 24rpx;
+  background-color: #ffffff;
+  border-top: 1rpx solid var(--color-gray-2, #eeeeee);
+}
+
+.input-wrapper {
+  flex: 1;
+  background-color: var(--color-gray-1);
+  border-radius: 48rpx;
+  padding: 16rpx 28rpx;
+}
+
+.chat-input {
+  width: 100%;
+  font-size: var(--font-sm);
+  color: var(--color-gray-13);
+  line-height: 1.4;
+}
+
+.input-placeholder {
+  color: var(--color-gray-6);
+  font-size: var(--font-sm);
+}
+
+/* 发送按钮 */
+.send-btn {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background-color 0.2s;
+}
+
+.send-btn-active {
+  background-color: var(--color-primary);
+}
+
+.send-btn-disabled {
+  background-color: var(--color-gray-1);
+}