Sfoglia il codice sorgente

style(mind): 心理报告上传卡片参照身页面卡片风格重新设计

- 改为水平布局卡片(图标+描述+标签+箭头)
- 使用紫粉渐变背景匹配心维度色系
- 保留报告列表功能,统一色调
Sisyphus 2 mesi fa
parent
commit
6dbf37c705
1 ha cambiato i file con 152 aggiunte e 26 eliminazioni
  1. 152 26
      cfc-frontend/pages/mind/index.vue

+ 152 - 26
cfc-frontend/pages/mind/index.vue

@@ -104,37 +104,38 @@
     </view>
 
     <!-- ===== 心理报告上传 ===== -->
-    <view class="report-upload-section" v-if="isLoggedIn">
-      <view class="report-upload-card">
-        <view class="report-upload-header">
-          <text class="report-upload-title">心理报告</text>
-          <view class="report-upload-btn" @click="chooseAndUploadReport">
-            <text class="report-upload-btn-text">上传报告</text>
-          </view>
-        </view>
-        <view class="report-upload-body">
-          <text class="report-upload-desc">上传 EMI 心理测评报告或第三方心理评估报告,系统将自动解析并生成可视化分析</text>
-          <view class="report-support-list">
-            <text class="report-support-item">支持格式: PDF、JPG、PNG</text>
-            <text class="report-support-item">单文件不超过 20MB</text>
-          </view>
+    <view class="mind-report-section" v-if="isLoggedIn">
+      <!-- 上传报告入口卡(参照身页面卡片风格) -->
+      <view class="mind-report-card" @click="chooseAndUploadReport">
+        <view class="mind-report-left">
+          <text class="mind-report-icon">&#x1F4CB;</text>
         </view>
-        <!-- 已上传报告列表 -->
-        <view class="report-list" v-if="uploadedReports && uploadedReports.length > 0">
-          <view class="report-item" v-for="report in uploadedReports" :key="report.id" @click="viewReport(report)">
-            <text class="report-item-icon">&#x1F4C4;</text>
-            <text class="report-item-name">{{ report.fileName || '心理报告' }}</text>
-            <text class="report-item-date">{{ formatDate(report.createdAt) }}</text>
-            <text class="report-item-status" :class="report.status === 'parsed' ? 'parsed' : 'pending'">
-              {{ report.status === 'parsed' ? '已解析' : '待解析' }}
-            </text>
+        <view class="mind-report-right">
+          <text class="mind-report-title">上传心理报告</text>
+          <text class="mind-report-desc">上传 EMI 心理测评报告或第三方心理评估报告,AI 智能解析生成可视化分析</text>
+          <view class="mind-report-tags">
+            <text class="mind-tag">EMI 测评</text>
+            <text class="mind-tag">AI 解析</text>
+            <text class="mind-tag">可视化</text>
           </view>
         </view>
-        <view class="report-empty" v-else-if="!reportUploadLoading">
-          <text class="report-empty-icon">&#x1F4C1;</text>
-          <text class="report-empty-text">暂无上传的报告</text>
+        <text class="mind-report-arrow">&#x203A;</text>
+      </view>
+      <!-- 已上传报告列表 -->
+      <view class="mind-report-list" v-if="uploadedReports && uploadedReports.length > 0">
+        <view class="mind-report-item" v-for="report in uploadedReports" :key="report.id" @click="viewReport(report)">
+          <text class="mind-report-item-icon">&#x1F4C4;</text>
+          <text class="mind-report-item-name">{{ report.fileName || '心理报告' }}</text>
+          <text class="mind-report-item-date">{{ formatDate(report.createdAt) }}</text>
+          <text :class="['mind-report-item-status', report.status === 'parsed' ? 'parsed' : 'pending']">
+            {{ report.status === 'parsed' ? '已解析' : '待解析' }}
+          </text>
         </view>
       </view>
+      <view class="mind-report-empty" v-else-if="!reportUploadLoading">
+        <text class="mind-report-empty-icon">&#x1F4C1;</text>
+        <text class="mind-report-empty-text">暂无上传的报告,点击上方卡片上传</text>
+      </view>
     </view>
 
     <!-- 肠脑轴情绪卡片 -->
@@ -1263,6 +1264,131 @@ export default {
   color: #fff;
 }
 
+/* ===== 心理报告上传卡片 ===== */
+.mind-report-section {
+  margin: 20rpx 30rpx;
+}
+.mind-report-card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: linear-gradient(135deg, #F3E8FF, #FCE4EC);
+  border-radius: 20rpx;
+  padding: 28rpx 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.mind-report-left {
+  width: 100rpx;
+  height: 100rpx;
+  background: rgba(255,255,255,0.7);
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+}
+.mind-report-icon {
+  font-size: 52rpx;
+}
+.mind-report-right {
+  flex: 1;
+}
+.mind-report-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #7C3AED;
+  display: block;
+  margin-bottom: 6rpx;
+}
+.mind-report-desc {
+  font-size: 22rpx;
+  color: #A855F7;
+  line-height: 1.5;
+  display: block;
+  margin-bottom: 10rpx;
+}
+.mind-report-tags {
+  display: flex;
+  flex-direction: row;
+  gap: 10rpx;
+}
+.mind-tag {
+  font-size: 20rpx;
+  color: #7C3AED;
+  background: rgba(255,255,255,0.6);
+  padding: 4rpx 14rpx;
+  border-radius: 20rpx;
+}
+.mind-report-arrow {
+  font-size: 36rpx;
+  color: #C084FC;
+  margin-left: 10rpx;
+  flex-shrink: 0;
+}
+.mind-report-card:active {
+  opacity: 0.7;
+}
+.mind-report-list {
+  margin-top: 12rpx;
+}
+.mind-report-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: #fff;
+  border-radius: 14rpx;
+  padding: 20rpx 20rpx;
+  margin-bottom: 8rpx;
+  box-shadow: 0 1rpx 6rpx rgba(0,0,0,0.05);
+}
+.mind-report-item:active {
+  opacity: 0.7;
+}
+.mind-report-item-icon {
+  font-size: 28rpx;
+  margin-right: 14rpx;
+}
+.mind-report-item-name {
+  font-size: 26rpx;
+  color: #333;
+  flex: 1;
+}
+.mind-report-item-date {
+  font-size: 22rpx;
+  color: #999;
+  margin-right: 14rpx;
+}
+.mind-report-item-status {
+  font-size: 22rpx;
+  padding: 2rpx 12rpx;
+  border-radius: 20rpx;
+}
+.mind-report-item-status.parsed {
+  color: #7C3AED;
+  background: #F3E8FF;
+}
+.mind-report-item-status.pending {
+  color: #999;
+  background: #F5F5F5;
+}
+.mind-report-empty {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx;
+  margin-top: 8rpx;
+}
+.mind-report-empty-icon {
+  font-size: 32rpx;
+  margin-right: 10rpx;
+}
+.mind-report-empty-text {
+  font-size: 24rpx;
+  color: #bbb;
+}
+
 /* ===== 心理能量概况 ===== */
 .energy-overview {
   display: flex;