feat:优化代码

0xDarker · Aug 28, 2024 · ba85bfd · ba85bfd
1 parent f059728
commit ba85bfd
Show file tree

Hide file tree

Showing 33 changed files with 1,082 additions and 1,111 deletions.
diff --git a/src/assets/css/define/global.less b/src/assets/css/define/global.less
@@ -69,7 +69,7 @@ textarea {
   white-space: pre-wrap;
   word-wrap: break-word;
   border: none;
-  background: #fff;
+  background: #ffffff;
   font-family: 'Microsoft YaHei';
 }
 
@@ -81,8 +81,7 @@ textarea {
   cursor: pointer;
 }
 
-.height100,
-.height-atuo {
+.height100 {
   height: 100%;
 }
 
@@ -180,19 +179,19 @@ textarea {
 }
 
 // 全局边框
-.bdr-t {
+.border-top {
   border-top: 1px solid var(--line-border-color);
 }
 
-.bdr-r {
+.border-right {
   border-right: 1px solid var(--line-border-color);
 }
 
-.bdr-b {
+.border-bottom {
   border-bottom: 1px solid var(--line-border-color);
 }
 
-.bdr-l {
+.border-left {
   border-left: 1px solid var(--line-border-color);
 }
 
@@ -279,13 +278,3 @@ textarea {
   padding: 0 15px;
   justify-content: space-between;
 }
-
-.icon-rotate {
-  animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/assets/css/define/theme.less b/src/assets/css/define/theme.less
@@ -31,7 +31,7 @@ html {
 // 黑色主题
 html[theme-mode='dark'] {
   --im-primary-color: #1890ff;
-  --im-bg-color: #202124;
+  --im-bg-color: #1e1e1e;
   --line-border-color: rgb(255 255 255 / 9%);
   --border-color: rgb(255 255 255 / 9%);
   --im-text-color: rgb(255 255 255 / 82%);
@@ -73,7 +73,4 @@ html[theme-mode='dark'] {
 
 body {
   background-color: var(--im-bg-color);
-  transition:
-    background-color 0.5s ease,
-    color 0.5s ease; /* 平滑过渡效果 */
 }
diff --git a/src/assets/css/editor-mention.less b/src/assets/css/editor-mention.less
@@ -1,14 +1,12 @@
 .ql-mention-list-container {
   width: 160px;
   max-height: 200px;
-  border: 1px solid #f0f0f0;
   border-radius: 10px;
   background-color: #ffffff;
-  box-shadow: 0 2px 12px 0 rgba(30, 30, 30, 0.08);
   z-index: 9001;
   overflow: auto;
-  padding: 3px;
-  padding-left: 6px;
+  padding: 3px 3px 3px 3px;
+  border: 1px solid #e0e0e0;
 }
 
 .ql-mention-loading {
@@ -26,35 +24,29 @@
 
 .ql-mention-list-item {
   cursor: pointer;
-  line-height: 44px;
   font-size: 16px;
-  vertical-align: middle;
   padding: 0 10px;
   overflow: hidden;
-}
+  height: 28px;
 
-.ql-mention-list-item.disabled {
-  cursor: auto;
-}
+  &.disabled {
+    cursor: auto;
+  }
 
-.ql-mention-list-item.selected {
-  background-color: var(--im-primary-color);
-  color: #fff;
-  text-decoration: none;
-  border-radius: 3px;
+  &.selected {
+    background-color: var(--im-primary-color);
+    color: #ffffff;
+    border-radius: 2px;
+  }
 }
 
 .mention {
   height: 24px;
   width: 65px;
   border-radius: 6px;
-  background-color: #d3e1eb;
   padding: 3px 0;
   margin-right: 2px;
   user-select: all;
-}
-
-.mention {
   color: var(--im-primary-color);
   background-color: transparent;
 
@@ -64,13 +56,13 @@
 }
 
 .ed-member-item {
-  height: 35px;
+  height: 28px;
   display: flex;
   align-items: center;
 
-  img {
-    height: 22px;
-    width: 22px;
+  > img {
+    height: 18px;
+    width: 18px;
     border-radius: 50%;
   }
 
@@ -86,11 +78,7 @@
 html[theme-mode='dark'] {
   .ql-mention-list-container {
     background-color: rgb(44 44 49);
-    color: #fff;
+    color: #ffffff;
     border: unset;
-
-    .ql-mention-list-item {
-      color: var(--im-text-color-grey);
-    }
   }
 }
diff --git a/src/assets/image/empty.svg b/src/assets/image/empty.svg
diff --git a/src/assets/image/welcome.svg b/src/assets/image/welcome.svg
diff --git a/src/components/base/UploadsModal.vue b/src/components/base/UploadsModal.vue
@@ -15,7 +15,7 @@ const statusItem = {
 
 <template>
   <div class="section me-scrollbar me-scrollbar-thumb">
-    <div class="title bdr-b">
+    <div class="title border-bottom">
       <span>上传管理 ({{ uploadsStore.successCount }}/{{ uploadsStore.items.length }})</span>
       <span class="pointer" @click="uploadsStore.close()">关闭</span>
     </div>

diff --git a/src/components/editor/Editor.vue b/src/components/editor/Editor.vue
@@ -409,7 +409,7 @@ useEventBus([
 
 <template>
   <section class="el-container is-vertical editor">
-    <header class="el-header toolbar bdr-t">
+    <header class="el-header toolbar border-top">
       <n-popover
         placement="top-start"
         trigger="click"

diff --git a/src/components/editor/MeEditorEmoticon.vue b/src/components/editor/MeEditorEmoticon.vue
@@ -49,7 +49,7 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
   </form>
 
   <section class="el-container is-vertical section height100">
-    <header class="el-header em-header bdr-b">
+    <header class="el-header em-header border-bottom">
       <span>{{ items[tabIndex].name }}</span>
     </header>
 

diff --git a/src/components/group/GroupNotice.vue b/src/components/group/GroupNotice.vue
@@ -48,7 +48,7 @@ onMounted(() => {
 
 <template>
   <section class="el-container is-vertical">
-    <header class="el-header bdr-b">
+    <header class="el-header border-bottom">
       <div class="center-text">
         <span>{{ title }}</span>
       </div>

diff --git a/src/components/group/GroupPanel.vue b/src/components/group/GroupPanel.vue
@@ -162,7 +162,7 @@ onMounted(() => {
 </script>
 <template>
   <section class="el-container is-vertical section">
-    <header class="el-header header bdr-b">
+    <header class="el-header header border-bottom">
       <div class="left-icon" @click="emit('to-talk')">
         <n-icon size="21" :component="Comment" />
       </div>
@@ -288,7 +288,7 @@ onMounted(() => {
       </div>
     </main>
 
-    <footer v-show="loading == false" class="el-footer footer bdr-t">
+    <footer v-show="loading == false" class="el-footer footer border-top">
       <template v-if="isAdmin">
         <n-button block type="primary" text-color="#ffffff" @click="onShowManage(true)">
           群聊管理

diff --git a/src/components/group/manage/ApplyTab.vue b/src/components/group/manage/ApplyTab.vue
@@ -119,7 +119,7 @@ onMounted(() => {
 </script>
 <template>
   <section class="section el-container is-vertical height100">
-    <header class="el-header header bdr-b">
+    <header class="el-header header border-bottom">
       <p>申请管理({{ filterSearch.length }})</p>
       <div>
         <n-space>

diff --git a/src/components/group/manage/ConfigTab.vue b/src/components/group/manage/ConfigTab.vue
@@ -75,7 +75,7 @@ onMounted(() => {
 </script>
 <template>
   <section class="section el-container is-vertical height100">
-    <header class="el-header header bdr-b">
+    <header class="el-header header border-bottom">
       <p>设置管理</p>
     </header>
 

diff --git a/src/components/group/manage/DetailTab.vue b/src/components/group/manage/DetailTab.vue
@@ -63,7 +63,7 @@ onMounted(() => {
 </script>
 <template>
   <section class="section el-container is-vertical height100">
-    <header class="el-header header bdr-b">
+    <header class="el-header header border-bottom">
       <p>基础信息</p>
     </header>
 

diff --git a/src/components/group/manage/MemberTab.vue b/src/components/group/manage/MemberTab.vue
@@ -313,7 +313,7 @@ onMounted(() => {
 </script>
 <template>
   <section class="el-container is-vertical height100">
-    <header class="el-header header bdr-b">
+    <header class="el-header header border-bottom">
       <p>成员管理({{ filterSearch.length }})</p>
       <div>
         <n-space>
@@ -372,7 +372,7 @@ onMounted(() => {
       </div>
     </main>
 
-    <footer class="el-footer footer bdr-t" v-show="batchDelete">
+    <footer class="el-footer footer border-top" v-show="batchDelete">
       <div class="tips">已选({{ filterCheck.length }})</div>
       <div>
         <n-space>

diff --git a/src/components/group/manage/NoticeTab.vue b/src/components/group/manage/NoticeTab.vue
@@ -106,7 +106,7 @@ onMounted(() => {
 </script>
 <template>
   <section class="section el-container is-vertical height100">
-    <header class="el-header header bdr-b">
+    <header class="el-header header border-bottom">
       <p>公告管理({{ filterSearch.length }})</p>
       <div>
         <n-space>
@@ -141,7 +141,7 @@ onMounted(() => {
 
     <main v-else class="el-main main me-scrollbar me-scrollbar-thumb">
       <div
-        class="member-item bdr-b"
+        class="member-item border-bottom"
         v-for="item in filterSearch"
         :key="item.id"
         @click="onRowClick(item)"
@@ -160,7 +160,7 @@ onMounted(() => {
       </div>
     </main>
 
-    <footer class="el-footer footer bdr-t" v-show="batchDelete">
+    <footer class="el-footer footer border-top" v-show="batchDelete">
       <div class="tips">已选({{ filterCheck.length }})</div>
       <div>
         <n-space>

diff --git a/src/components/group/manage/index.vue b/src/components/group/manage/index.vue
@@ -47,7 +47,7 @@ const onMaskClick = () => {
     }"
   >
     <section class="el-container container-box">
-      <aside class="el-aside bdr-r" style="width: 120px">
+      <aside class="el-aside border-right" style="width: 120px">
         <div
           v-for="(menu, index) in menus"
           :key="menu.name"

diff --git a/src/components/talk/HistoryRecord.vue b/src/components/talk/HistoryRecord.vue
@@ -114,7 +114,7 @@ onMounted(() => {
     }"
   >
     <section class="main-box el-container is-vertical o-hidden">
-      <header class="el-header bdr-b search" style="height: 50px">
+      <header class="el-header border-bottom search" style="height: 50px">
         <div class="type-items">
           <span
             v-for="tab in tabs"

diff --git a/src/components/user/UserCardModal.vue b/src/components/user/UserCardModal.vue
@@ -297,7 +297,7 @@ const onAfterEnter = () => {
 
         <footer
           v-if="userInfo.friend_info.is_friend == 'Y'"
-          class="el-footer footer bdr-t flex-center"
+          class="el-footer footer border-top flex-center"
         >
           <n-button
             round
@@ -314,7 +314,7 @@ const onAfterEnter = () => {
           </n-button>
         </footer>
 
-        <footer v-else-if="userId != loginUserId" class="el-footer footer bdr-t flex-center">
+        <footer v-else-if="userId != loginUserId" class="el-footer footer border-top flex-center">
           <template v-if="isOpenFrom">
             <n-input
               type="text"

diff --git a/src/layout/SubViewLayout.vue b/src/layout/SubViewLayout.vue
@@ -19,9 +19,9 @@ defineProps<{
 
 <template>
   <section class="el-container is-vertical section">
-    <header class="el-header bdr-b">{{ title }}</header>
+    <header class="el-header border-bottom">{{ title }}</header>
     <section class="el-container o-hidden">
-      <aside class="el-aside bdr-r">
+      <aside class="el-aside border-right">
         <router-link v-for="(menu, key) in menus" :to="menu.path" :key="key">
           <div
             v-if="menu.show !== false"

diff --git a/src/views/contact/friend-apply.vue b/src/views/contact/friend-apply.vue
@@ -4,7 +4,7 @@ import FriendApply from './inner/FriendApply.vue'
 
 <template>
   <section class="el-container is-vertical height100">
-    <header class="el-header me-view-header bdr-b">好友通知</header>
+    <header class="el-header me-view-header border-bottom">好友通知</header>
 
     <main class="el-main me-scrollbar me-scrollbar-thumb">
       <FriendApply />