perf: 📜️(#1) 处理CR中的将原生的 CSS 语法转换为 Tailwindcss

ZRMYDYCG · Mar 7, 2025 · b65ac39 · b65ac39
1 parent 4b76908
commit b65ac39
Show file tree

Hide file tree

Showing 15 changed files with 174 additions and 547 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />

diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
     "moment": "^2.30.1",
     "pinia": "^3.0.1",
     "querystring": "^0.2.1",
-    "remixicon": "^4.6.0",
     "socket.io-client": "^4.8.1",
     "tailwindcss": "^4.0.9",
     "vue": "^3.5.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/List/index.vue b/src/components/List/index.vue
@@ -21,6 +21,7 @@
     </div>
   </div>
 </template>
+
 <script>
 import { useCurrentInstance } from '@/hooks'
 import { get as getObjectAttrValue } from 'lodash'
@@ -126,6 +127,7 @@ export default {
   },
 }
 </script>
+
 <style scoped>
 .gc-list .gc-list__item {
   display: flex;
@@ -135,6 +137,7 @@ export default {
   border-bottom: 1px solid #f7f7f7;
   border-radius: 10px;
   transition: background 0.3s;
+  color: #333;
 }
 
 .gc-list .gc-list__item:hover,

diff --git a/src/view/chat/components/chat-content.vue b/src/view/chat/components/chat-content.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="chatting">
+  <div class="chatting h-[100vh] flex-1">
     <GcColumn ref="gcColumnRef">
       <template #header>
         <div v-if="activeChat" class="user flex w-[100%]">
-          <div class="avater">
-            <img :src="$common.formatServerFilePath(activeChat.avatar)" alt="" />
+          <div class="avater mr-[15px] h-[45px] w-[45px]">
+            <img class="rounded-full" :src="$common.formatServerFilePath(activeChat.avatar)" alt="" />
           </div>
-          <div class="info flex items-center justify-between">
+          <div class="info flex flex-1 items-center justify-between">
             <div>
               <div class="info-top flex items-center justify-between">
-                <p class="nickname">{{ activeChat?.remark }}</p>
+                <p class="nickname text-[15px]">{{ activeChat?.remark }}</p>
               </div>
-              <div class="info-bottom flex items-center gap-2">
+              <div class="info-bottom flex items-center gap-2 text-[12px] text-[#96a1b1]">
                 <span class="h-[10px] w-[10px] rounded-full bg-green-500"></span>
                 <p class="desc">在线</p>
               </div>
@@ -23,19 +23,21 @@
               <el-icon>
                 <VideoCamera />
               </el-icon>
-              <el-icon> <More /> </el-icon>
+              <el-icon>
+                <More />
+              </el-icon>
             </div>
           </div>
         </div>
       </template>
-      <div class="chat-list">
+      <div class="chat-list px-[15px] py-[30px]">
         <ChatItem v-for="message in messageList" :key="message.id" :message="message" :is-me="message.is_me"></ChatItem>
       </div>
       <template #footer>
-        <div class="chat-input">
+        <div class="chat-input p-[16px]">
           <el-input v-model="inputMessage" type="textarea" :rows="3" placeholder="输入消息" resize="none" />
-          <div class="chat-input-actions">
-            <div class="left">
+          <div class="chat-input-actions mt-[12px] flex items-center justify-between">
+            <div class="left flex items-center">
               <el-button :icon="Picture" circle plain />
               <el-button :icon="Orange" circle plain />
             </div>
@@ -187,81 +189,11 @@ socket.on('chat-1v1-to-client', (message: MessageItem) => {
 </script>
 
 <style scoped>
-.chatting {
-  flex: 1;
-  height: 100vh;
-}
-
-.chatting :deep(.gc-column__header) {
+:deep(.gc-column__header) {
   display: flex;
   align-items: center;
   height: 70px;
   padding-left: 15px;
   border-bottom: 1px solid #e0e4ea;
 }
-
-.chatting :deep(.gc-column__header .user .avater) {
-  width: 45px;
-  height: 45px;
-  margin-right: 15px;
-}
-
-.chatting :deep(.gc-column__header .user .avater img) {
-  border-radius: 50%;
-}
-
-.chatting :deep(.gc-column__header .user .info) {
-  flex: 1;
-}
-
-.chatting :deep(.gc-column__header .user .info-top .nickname) {
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.chatting :deep(.gc-column__header .user .info-bottom) {
-  font-size: 12px;
-  color: #96a1b1;
-}
-
-.chatting :deep(.el-scrollbar .chat-list) {
-  padding: 30px 15px;
-}
-
-.chatting :deep(.gc-column__footer) {
-  //padding: 15px;
-}
-
-.chat-input {
-  padding: 16px; /* 增加填充以提升输入区域的布局 */
-}
-
-.chat-input .input-actions {
-  display: flex;
-  gap: 8px;
-  padding: 8px 0;
-}
-
-.chat-input .chat-input-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 12px;
-}
-
-.chat-input .chat-input-actions .left {
-  display: flex;
-  align-items: center;
-}
-
-.chat-input .chat-input-actions .left i {
-  margin-right: 20px;
-  font-size: 16px;
-  color: #eee;
-  cursor: pointer;
-}
-
-.chat-input .chat-input-actions el-button {
-  min-width: 80px;
-}
 </style>
diff --git a/src/view/chat/components/chat-history.vue b/src/view/chat/components/chat-history.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-history">
+  <div class="chat-history h-[100vh] w-[300px] border-r border-r-[#e0e4ea]">
     <GcColumn ref="gcColumnRef">
       <template #header>
         <div class="search">
@@ -12,7 +12,7 @@
       </template>
 
       <template #scroll-header>
-        <div class="list-title">聊天记录</div>
+        <div class="list-title mb-[5px] pl-[15px] text-[14px] leading-[45px] text-[#96a1b1]">聊天记录</div>
       </template>
       <GcList
         ref="chatListRef"
@@ -25,17 +25,19 @@
         <template #default="{ item }">
           <div class="chat-item flex w-[100%]">
             <div class="user flex w-[100%] items-center">
-              <div class="avater">
-                <img :src="formatServerFilePath(item.avatar)" alt="头像" />
+              <div class="avater mr-[15px] h-[45px] w-[45px] shrink-0">
+                <img class="rounded-full" :src="formatServerFilePath(item.avatar)" alt="头像" />
               </div>
-              <div class="info">
+              <div class="info flex-1">
                 <div class="info-top flex items-center justify-between">
-                  <p class="remark truncate">{{ item.remark }}</p>
-                  <span class="date">{{ $dataHelpers.formatDate(item.send_time, 'HH:mm') }}</span>
+                  <p class="remark nickname truncate text-[15px] font-semibold">{{ item.remark }}</p>
+                  <span class="date text-[12px] text-[#404a5b]">{{
+                    $dataHelpers.formatDate(item.send_time, 'HH:mm')
+                  }}</span>
                 </div>
 
-                <div class="info-bottom flex">
-                  <p class="last-message truncate">
+                <div class="info-bottom mt-[5px] flex">
+                  <p class="last-message w-0 flex-1 truncate text-[13px] text-[#404a5b]">
                     {{ item.last_message }}
                   </p>
                 </div>
@@ -184,7 +186,7 @@ const deleteChat = async (chat: ChatItem) => {
       message,
       duration: 3000,
     })
-    handleRefresh()
+    await handleRefresh()
   } else {
     ElMessage.error({
       message,
@@ -195,65 +197,15 @@ const deleteChat = async (chat: ChatItem) => {
 </script>
 
 <style scoped>
-.chat-history {
-  width: 300px;
-  height: 100vh;
-  border-right: 1px solid #e0e4ea;
-}
-
-.chat-history :deep(.gc-column .gc-column__header) {
+:deep(.gc-column .gc-column__header) {
   display: flex;
   align-items: center;
   height: 70px;
   padding-left: 15px;
   border-bottom: 1px solid #e0e4ea;
 }
 
-.chat-history :deep(.gc-column .list-title) {
-  font-size: 14px;
-  color: #96a1b1;
-  line-height: 45px;
-  padding-left: 15px;
-  margin-bottom: 5px;
-}
-
-.chat-history :deep(.gc-column .el-scrollbar .gc-list) {
+:deep(.gc-column .el-scrollbar .gc-list) {
   padding-bottom: 30px;
 }
-
-.chat-history :deep(.gc-column .el-scrollbar .gc-list .gc-list__item .chat-item .user .avater) {
-  flex-shrink: 0;
-  width: 45px;
-  height: 45px;
-  margin-right: 15px;
-}
-
-.chat-history :deep(.gc-column .el-scrollbar .gc-list .gc-list__item .chat-item .user .avater img) {
-  border-radius: 50%;
-}
-
-.chat-history :deep(.gc-column .el-scrollbar .gc-list .gc-list__item .chat-item .user .info) {
-  flex: 1;
-}
-
-.chat-history :deep(.gc-column .el-scrollbar .gc-list .gc-list__item .chat-item .user .info-top .nickname) {
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.chat-history :deep(.gc-column .el-scrollbar .gc-list .gc-list__item .chat-item .user .info-top .date) {
-  color: #404a5b;
-  font-size: 12px;
-}
-
-.chat-history :deep(.gc-column .el-scrollbar .gc-list .gc-list__item .chat-item .user .info-bottom) {
-  margin-top: 5px;
-}
-
-.chat-history :deep(.gc-column .el-scrollbar .gc-list .gc-list__item .chat-item .user .info-bottom .last-message) {
-  width: 0;
-  flex: 1;
-  font-size: 13px;
-  color: #404a5b;
-}
 </style>