From b25071a92b653e8256dfbddbcf2bfa8c8e994fc9 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 29 May 2026 19:07:09 +0800
Subject: [PATCH] refactor(home-components): replace scss styles with tailwind
 utilities

Remove standalone .scss style files for home page components, update their vue templates to use inline Tailwind utility classes, and remove the associated scoped style imports.
---
 .../components/AttachListComponent/index.vue  | 12 +++---
 .../AttachListComponent/styles/index.scss     | 23 -----------
 .../home/components/ChatCardAi/index.vue      | 14 +++----
 .../components/ChatCardAi/styles/index.scss   | 39 -------------------
 .../home/components/ChatCardMine/index.vue    |  9 ++---
 .../components/ChatCardMine/styles/index.scss | 20 ----------
 .../home/components/ChatTopWelcome/index.vue  | 10 ++---
 .../ChatTopWelcome/styles/index.scss          |  3 --
 .../DiscoveryCardComponent/index.vue          |  6 +--
 .../DiscoveryCardComponent/styles/index.scss  |  5 ---
 10 files changed, 17 insertions(+), 124 deletions(-)
 delete mode 100644 src/pages/home/components/AttachListComponent/styles/index.scss
 delete mode 100644 src/pages/home/components/ChatCardAi/styles/index.scss
 delete mode 100644 src/pages/home/components/ChatCardMine/styles/index.scss
 delete mode 100644 src/pages/home/components/ChatTopWelcome/styles/index.scss
 delete mode 100644 src/pages/home/components/DiscoveryCardComponent/styles/index.scss

diff --git a/src/pages/home/components/AttachListComponent/index.vue b/src/pages/home/components/AttachListComponent/index.vue
index da327a1..8464e2d 100644
--- a/src/pages/home/components/AttachListComponent/index.vue
+++ b/src/pages/home/components/AttachListComponent/index.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="tag-list">
-    <div v-for="(item, index) in tags" :key="index" class="tag-item" @click="handleClick(item)">
-      <span class="tag-text">{{ item }}</span>
+  <div class="flex flex-wrap px-3 py-1.5">
+    <div v-for="(item, index) in tags" :key="index"
+      class="border border-white bg-white/50 rounded-lg px-2.5 py-1 mr-2 mb-2 inline-flex items-center justify-center"
+      @click="handleClick(item)">
+      <span class="text-[14px] text-[#0ccd58]">{{ item }}</span>
     </div>
   </div>
 </template>
@@ -36,7 +38,3 @@ onMounted(() => {
   });
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/AttachListComponent/styles/index.scss b/src/pages/home/components/AttachListComponent/styles/index.scss
deleted file mode 100644
index 00487d7..0000000
--- a/src/pages/home/components/AttachListComponent/styles/index.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 6px 12px;
-}
-
-.tag-item {
-  box-sizing: border-box;
-  border: 1px solid #fff;
-  background-color: rgba(255, 255, 255, 0.5);
-  border-radius: 8px;
-  padding: 4px 10px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tag-text {
-  color: #0ccd58;
-  font-size: 14px;
-}
diff --git a/src/pages/home/components/ChatCardAi/index.vue b/src/pages/home/components/ChatCardAi/index.vue
index f5dc69b..bd612c1 100644
--- a/src/pages/home/components/ChatCardAi/index.vue
+++ b/src/pages/home/components/ChatCardAi/index.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-start）并占满宽度 -->
-  <div class="chat-ai-row">
-    <div class="container">
-      <div class="chat-ai">
-        <div class="container-content">
-          <img v-if="isLoading" class="loading-img" src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif" />
+  <div class="w-full flex items-center justify-start">
+    <div class="inline-block align-middle max-w-full overflow-x-hidden">
+      <div class="px-3 min-w-0 max-w-full overflow-hidden break-all">
+        <div class="flex items-center max-w-full">
+          <img v-if="isLoading" class="mr-2 w-7.5 h-6.25" src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif" />
           <ChatMarkdown :key="textKey" :text="processedText" />
           <ChatLoading v-if="isLoading" />
         </div>
@@ -62,7 +62,3 @@ watch(
   { immediate: true }
 );
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/ChatCardAi/styles/index.scss b/src/pages/home/components/ChatCardAi/styles/index.scss
deleted file mode 100644
index d06329a..0000000
--- a/src/pages/home/components/ChatCardAi/styles/index.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.chat-ai-row {
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center; /* 垂直居中气泡 */
-  justify-content: flex-start; /* 默认左对齐 */
-}
-
-.container {
-  /* 气泡容器：内联块按内容自适应 */
-  display: inline-block;
-  box-sizing: border-box;
-  vertical-align: middle;
-  width: auto;
-  max-width: 100%;
-  overflow-x: hidden;
-}
-
-.chat-ai {
-  padding: 0 12px; // 消息内容的内边距 左右12px
-  min-width: 0;
-  width: auto;
-  max-width: 100%;
-  overflow: hidden;
-  word-wrap: break-word;
-  word-break: break-all;
-}
-
-.container-content {
-  display: flex;
-  align-items: center;
-  max-width: 100%; // ✅ 限制最大宽度
-}
-
-.loading-img {
-  margin-right: 8px;
-  width: 30px;
-  height: 25px;
-}
diff --git a/src/pages/home/components/ChatCardMine/index.vue b/src/pages/home/components/ChatCardMine/index.vue
index 7c42865..94026fe 100644
--- a/src/pages/home/components/ChatCardMine/index.vue
+++ b/src/pages/home/components/ChatCardMine/index.vue
@@ -1,7 +1,8 @@
 <template>
   <!-- 外层行容器：接收来自父组件的对齐类（如 flex justify-end） -->
-  <div class="chat-mine-row">
-    <div class="chat-mine bg-17294E">
+  <div class="w-full flex justify-end">
+    <div
+      class="m-3 px-[16px] py-2 rounded-[15px] bg-[#17294E] inline-block w-auto overflow-x-auto align-top max-w-full">
       <span class="text-[15px] text-white">{{ text }}</span>
       <slot></slot>
     </div>
@@ -17,7 +18,3 @@ defineProps({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/ChatCardMine/styles/index.scss b/src/pages/home/components/ChatCardMine/styles/index.scss
deleted file mode 100644
index ca89b24..0000000
--- a/src/pages/home/components/ChatCardMine/styles/index.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.chat-mine-row {
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.chat-mine {
-  margin: 12px;
-  padding: 8px 16px;
-  border-radius: 15px;
-
-  /* 气泡为内联块，按内容宽度自适应；外层 `.chat-mine-row` 控制排列 */
-  display: inline-block;
-  box-sizing: border-box;
-  vertical-align: top;
-  width: auto;
-  max-width: 100%;
-  overflow-x: hidden;
-}
diff --git a/src/pages/home/components/ChatTopWelcome/index.vue b/src/pages/home/components/ChatTopWelcome/index.vue
index 6f4dfc2..6c19d90 100644
--- a/src/pages/home/components/ChatTopWelcome/index.vue
+++ b/src/pages/home/components/ChatTopWelcome/index.vue
@@ -1,8 +1,8 @@
 v
 <template>
-  <div class="welcome-content  p-[12px]">
-    <div class="wrap rounded-[20px]">
-      <div class="flex items-center justify-between  pl-[12px] pr-[12px]">
+  <div class="p-3">
+    <div class="bg-white/50 rounded-[20px]">
+      <div class="flex items-center justify-between pl-3 pr-3">
         <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
           :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
           :displayWidth="spriteStyle.displayWidth" :fps="16" />
@@ -86,7 +86,3 @@ const measureWelcomeHeight = (callback) => {
 
 defineExpose({ measureWelcomeHeight });
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/ChatTopWelcome/styles/index.scss b/src/pages/home/components/ChatTopWelcome/styles/index.scss
deleted file mode 100644
index a73f949..0000000
--- a/src/pages/home/components/ChatTopWelcome/styles/index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.wrap {
-  background-color: rgba(255, 255, 255, 0.5);
-}
\ No newline at end of file
diff --git a/src/pages/home/components/DiscoveryCardComponent/index.vue b/src/pages/home/components/DiscoveryCardComponent/index.vue
index 613b642..8168026 100644
--- a/src/pages/home/components/DiscoveryCardComponent/index.vue
+++ b/src/pages/home/components/DiscoveryCardComponent/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="w-full flex-1 mb-3">
     <div v-for="item in themeDTOList" :key="item.title">
       <RecommendPostsList :recommendTheme="item" />
     </div>
@@ -31,7 +31,3 @@ onMounted(() => {
   loadDiscoveryCradComponent();
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/DiscoveryCardComponent/styles/index.scss b/src/pages/home/components/DiscoveryCardComponent/styles/index.scss
deleted file mode 100644
index 9da07fd..0000000
--- a/src/pages/home/components/DiscoveryCardComponent/styles/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-}