feat: 样式调整

src/pages/index/components/chat/ChatCardMine/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="chat-mine bg-17294E">
-    <text>{{ text }}</text>
+    <text class="font-size-15 color-white">{{ text }}</text>
     <slot></slot>
   </view>
 </template>

src/pages/index/components/chat/ChatCardMine/styles/index.scss

@@ -5,15 +5,7 @@
 
   display: flex;
   flex-direction: column;
+  min-width: 100px;
   max-width: 100%; // ✅ 限制最大宽度
   overflow-x: hidden; // ✅ 防止横向撑开
-
-  text {
-    font-size: 15px;
-    color: #ffffff;
-    line-height: 22px;
-    text-align: justify;
-    font-style: normal;
-    text-transform: none;
-  }
 }

src/pages/index/components/chat/ChatMainList/index.vue

@@ -25,7 +25,7 @@
       >
         <template v-if="item.msgType === MessageRole.AI">
           <ChatCardAI
-            class="message-item-ai"
+            class="flex flex-justify-start"
             :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
             :text="item.msg || ''"
             :isLoading="item.isLoading"
@@ -77,11 +77,11 @@
         </template>
 
         <template v-else-if="item.msgType === MessageRole.ME">
-          <ChatCardMine class="message-item-mine" :text="item.msg" />
+          <ChatCardMine class="flex flex-justify-end" :text="item.msg" />
         </template>
 
         <template v-else>
-          <ChatCardOther class="message-item-other" :text="item.msg">
+          <ChatCardOther class="flex flex-justify-center" :text="item.msg">
             <ActivityListComponent
               v-if="
                 mainPageDataModel.activityList &&

src/static/scss/colors.scss

@@ -4,19 +4,19 @@
   color: #fff;
 }
 
-.color-00 {
+.color-000 {
   color: #000;
 }
 
-.color-33 {
+.color-333 {
   color: #333;
 }
 
-.color-66 {
+.color-666 {
   color: #666;
 }
 
-.color-99 {
+.color-999 {
   color: #999;
 }
 

src/static/scss/flex.scss

@@ -7,6 +7,14 @@
   align-items: center;
 }
 
+.flex-justify-start {
+  justify-content: flex-start;
+}
+
+.flex-justify-end {
+  justify-content: flex-end;
+}
+
 .flex-justify-center {
   justify-content: center;
 }