refactor: clean up styles, configs and home page

- Migrate inline styles for ChatMainList, AigcPhotoCard and SpriteAnimator, delete unused SCSS files
- Update development proxy target in vite.config.ts and env variables including client ID and token
- Fix prop references and styling in ChatInputArea and Welcome components
- Enable and refactor Calender component integration with proper event handling
- Add tabbed layout to ChatMainList with Discovery and chat message sections
- Update Vue 3 component patterns for better maintainability
- Temporarily comment out ChatInputArea in ChatMainList

src/pages/home/components/AigcPhotoCard/index.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="aigc-photo-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
-    @click="handleAction">
-    <img class="aigc-photo-card__image block w-full" :src="data.cover" />
-    <div class="aigc-photo-card__shade"></div>
+  <div class="h-[272px] bg-[#0f172a] relative rounded-[24px] overflow-hidden w-full"
+    :class="{ 'is-disabled': disabled }" @click="handleAction">
+    <img class="block w-full" :src="data.cover" />
+    <div class="absolute inset-0 bg-[#0f172a]/38"></div>
 
-    <div class="aigc-photo-card__play flex flex-items-center flex-justify-center rounded-full">
-      <div class="aigc-photo-card__triangle"></div>
+    <div
+      class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[76px] h-[76px] border border-white/50 bg-white/30 flex items-center justify-center rounded-full">
+      <div
+        class="w-0 h-0 ml-[6px] border-t-[17px] border-t-transparent border-b-[17px] border-b-transparent border-l-[23px] border-l-white">
+      </div>
     </div>
 
-    <div class="aigc-photo-card__title color-white font-size-16 font-900">
+    <div
+      class="absolute inset-x-0 bottom-[72px] text-center leading-[22px] tracking-normal [text-shadow:0_2px_8px_rgba(0,0,0,0.32)] text-white text-[16px] font-bold">
       {{ data.title }}
     </div>
   </div>
 </template>
 
 <script setup>
+import { defineProps, defineEmits } from 'vue'
+
 const props = defineProps({
   data: {
     type: Object,
@@ -34,7 +40,3 @@ const handleAction = () => {
   emit("action", props.data);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

src/pages/home/components/AigcPhotoCard/styles/index.scss

@@ -1,54 +0,0 @@
-.aigc-photo-card {
-  height: 272px;
-  background: #0f172a;
-}
-
-.aigc-photo-card:active {
-  opacity: 0.86;
-}
-
-.aigc-photo-card.is-disabled {
-  opacity: 0.55;
-}
-
-.aigc-photo-card__image {
-  height: 100%;
-}
-
-.aigc-photo-card__shade {
-  position: absolute;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.38);
-}
-
-.aigc-photo-card__play {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 76px;
-  height: 76px;
-  border: 1px solid rgba(255, 255, 255, 0.48);
-  background: rgba(255, 255, 255, 0.28);
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
-}
-
-.aigc-photo-card__triangle {
-  width: 0;
-  height: 0;
-  margin-left: 6px;
-  border-top: 17px solid transparent;
-  border-bottom: 17px solid transparent;
-  border-left: 23px solid #fff;
-}
-
-.aigc-photo-card__title {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 72px;
-  text-align: center;
-  line-height: 22px;
-  letter-spacing: 0;
-  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
-}

src/pages/home/components/ChatInputArea/index.vue

@@ -36,7 +36,7 @@
 
       <div class="input-container-send">
         <div class="input-container-send-btn" @click="sendMessage">
-          <div v-if="props.isSessionActive" class="send-stop"> </div>
+          <div v-if="isSessionActive" class="send-stop"> </div>
           <img v-else class="send-icon" src="https://oss.nianxx.cn/mp/static/version_101/home/input_send_icon.png" />
         </div>
       </div>

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

@@ -8,7 +8,7 @@
     <div class="relative">
       <img class="w-full block" :src="mainPageDataModel?.initPageImages?.backgroundImageUrl" style="height: 252px;" />
       <div class="absolute bottom-0 left-0 right-0 flex-1">
-        <div class="px-12 pt-12">
+        <div class="px-[12px] pt-[12px]">
           <Welcome :mainPageDataModel="mainPageDataModel" />
         </div>
         <div style="margin-bottom: -1px;">
@@ -16,6 +16,116 @@
         </div>
       </div>
     </div>
+
+    <div v-show="tabIndex === 0" class="flex-full overflow-hidden min-h-0"
+      @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
+      @touchmove="handleScrollAreaTouchMove">
+
+      <Discovery @scroll-touch-start="handleScrollAreaTouchStart" @scroll-touch="handleScrollAreaTouchMove" />
+    </div>
+
+    <!-- 消息列表（可滚动区域） -->
+    <div v-show="tabIndex === 1" class="flex-full overflow-hidden min-h-0" scroll-y :scroll-top="scrollTop"
+      :scroll-with-animation="true" @scroll="handleScroll" @scrolltolower="handleScrollToLower"
+      @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
+      @touchmove="handleScrollAreaTouchMove">
+
+      <div class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
+        <template v-if="item.msgType === MessageRole.AI">
+          <ChatCardAI class="flex justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" :text="item.componentName && isLongTextCard(item.componentName)
+            ? ''
+            : item.msg || ''
+            " :isLoading="item.isLoading">
+            <template #content v-if="
+              item.toolCall ||
+              (item.componentName && isLongTextCard(item.componentName))
+            ">
+
+              <LongTextGuideCardPreview v-if="item.componentName && isLongTextCard(item.componentName)"
+                :componentName="item.componentName" />
+
+              <QuickBookingComponent v-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.quickBookingCard
+              " />
+              <DiscoveryCardComponent v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.discoveryCard
+              " />
+              <CreateServiceOrder v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.callServiceCard
+              " :toolCall="item.toolCall" />
+              <OpenMapComponent v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.mapCard
+              " />
+              <GeneratorPhotoComponent v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.aigcPhotoGeneratorCard
+              " :toolCall="item.toolCall" />
+              <AigcPhotoCard v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.videoCard
+              " :toolCall="item.toolCall" />
+
+              <Feedback v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.feedbackCard
+              " :toolCall="item.toolCall" />
+              <DetailCardCompontent v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName ===
+                CompName.pictureAndCommodityCard
+              " :toolCall="item.toolCall" />
+              <AddCarCrad v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.enterLicensePlateCard
+              " :toolCall="item.toolCall" />
+              <SurveyQuestionnaire v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName ===
+                CompName.callSurveyQuestionnaire
+              " :toolCall="item.toolCall" />
+            </template>
+
+            <template #footer>
+              <!-- 这个是底部 -->
+              <AttachListComponent v-if="item.question" :question="item.question" />
+            </template>
+          </ChatCardAI>
+        </template>
+
+        <template v-else-if="item.msgType === MessageRole.ME">
+          <ChatCardMine class="flex flex-justify-end" :text="item.msg" />
+        </template>
+
+        <template v-else>
+          <ChatCardOther class="flex flex-justify-center" :text="item.msg">
+            <ChatGuide v-if="chatMsgList.length < 2" />
+            <ActivityListComponent v-if="
+              mainPageDataModel.activityList &&
+              mainPageDataModel.activityList.length
+            " :activityList="mainPageDataModel.activityList" />
+
+            <!-- 先不展示了，等后续有需求再加回来 false -->
+            <RecommendPostsComponent v-if="
+              false &&
+              mainPageDataModel.recommendTheme &&
+              mainPageDataModel.recommendTheme.length
+            " :recommendThemeList="mainPageDataModel.recommendTheme" />
+          </ChatCardOther>
+        </template>
+      </div>
+    </div>
+
+    <!-- 输入框区域 -->
+    <!-- <div>
+      <ChatQuickAccess />
+      <ChatInputArea ref="inputAreaRef" v-model="inputMessage" :holdKeyboard="holdKeyboard"
+        :is-session-active="isSessionActive" :stop-request="stopRequest" @send="sendMessageAction"
+        @noHideKeyboard="handleNoHideKeyboard" @keyboardShow="handleKeyboardShow" @keyboardHide="handleKeyboardHide" />
+    </div> -->
   </div>
 </template>
 
@@ -27,7 +137,7 @@ import Welcome from "../Welcome/index.vue";
 import AiTabSwitch from "../AiTabSwitch/index.vue";
 import Discovery from "../Discovery/index.vue";
 import ChatGuide from "../ChatGuide/index.vue";
-
+import AigcPhotoCard from '../AigcPhotoCard/index.vue';
 import ChatTopNavBar from "../ChatTopNavBar/index.vue";
 import ChatCardAI from "../ChatCardAi/index.vue";
 import ChatCardMine from "../ChatCardMine/index.vue";
@@ -373,14 +483,11 @@ const initHandler = () => {
 };
 
 onMounted(() => {
-  try {
-    getMainPageData();
-    addNoticeListener();
-    // 有token时，加载最近会话、最近消息、初始化socket
-    initHandler();
-  } catch (error) {
-    console.error("页面初始化错误:", error);
-  }
+  console.log("onMounted");
+  getMainPageData();
+  addNoticeListener();
+  // 有token时，加载最近会话、最近消息、初始化socket
+  initHandler();
 });
 
 /// =============页面配置↓================
@@ -416,6 +523,7 @@ const getMainPageData = async () => {
     mainPageDataModel.value = res.data;
     agentId.value = res.data.agentId;
   }
+
   appStore.setSceneId(""); // 清空sceneId,分身二次进入展示默认的
 };
 
@@ -1138,7 +1246,3 @@ const resetConfig = () => {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>

src/pages/home/components/ChatMainList/styles/index.scss

@@ -1,6 +0,0 @@
-.main-scroll-area {
-  flex-basis: 0;
-  height: 0;
-  min-height: 0;
-  overscroll-behavior-y: contain;
-}

src/pages/home/components/Welcome/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="flex w-full">
-    <div class="flex flex-col flex-full min-width-0 mr-12">
-      <div class="flex flex-row flex-items-center flex-justify-between min-width-0">
-        <span class="flex-full min-width-0 text-[20px] text-[600] color-white ellipsis-1">
+    <div class="flex flex-col flex-full min-width-0 mr-[12px]">
+      <div class="flex flex-row items-center justify-between min-width-0">
+        <span class="flex-full min-width-0 text-[20px] font-semibold text-white truncate">
           {{ mainPageDataModel.welcomeContent }}
         </span>
-        <span class="shrink-0 text-[20px] text-[600] color-white mt-4"> {{ weatherText }} </span>
+        <span class="shrink-0 text-[20px] font-semibold text-white mt-[4px]">
+          {{ weatherText }}
+        </span>
       </div>
 
       <NoticeMessage :tipsMessage="props.mainPageDataModel.tipsMessage" />
@@ -16,9 +18,9 @@
       :displayWidth="spriteStyle.displayWidth" :fps="16" />
   </div>
 </template>
+
 <script setup>
-import { onMounted, ref } from "vue";
-import { defineProps, computed } from "vue";
+import { defineProps, computed, onMounted, ref } from "vue";
 import SpriteAnimator from "@/components/SpriteAnimator/index.vue";
 import NoticeMessage from "../NoticeMessage/index.vue";
 import { getLocalWeather } from "@/api/home";