Merge branch 'feat_theme_zyh' of United_Software/k_online_ui into feat_theme

src/assets/main.css

@@ -13,7 +13,7 @@
   /* background-color: white; */
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #dddee0;
+  background-color: var(--color-scrollbar-thumb);
   border-radius: 20px;
   box-shadow: inset 0 0 0 white;
 }

src/hooks/rowClickStyle.ts

@@ -1,6 +1,6 @@
 import { onMounted, onBeforeUnmount } from 'vue'
 
-export function useRowClickStyle(tableRef: any, rowClass: string = 'row--clicked') {
+export function useRowClickStyle(tableRef: any, rowClass: string = 'vxe-table-row-clicked-style') {
   const handleMouseDown = (event: any) => {
     const trElement = event.target.closest('tr')
     if (trElement && trElement.hasAttribute('rowid')) {

src/styles/elementui.scss

@@ -212,7 +212,7 @@ div.el-dialog {
   padding: 0 0 8px;
   border-radius: 12px;
   overflow: hidden;
-  background-color: var(--management-bg-bolor);
+  background-color: var(--color-dialog-body-bg);
 }
 header.el-dialog__header {
   padding: 12px 16px;
@@ -342,8 +342,8 @@ div .el-input__inner {
   color: var(--color-neutral-1);
   font-size: var(--font-size-3);
 }
-input.el-input__inner::placeholder {
-  color: var(--color-neutral-3);
+.el-input__inner::placeholder {
+  color: #6c6f75;
   font-size: var(--font-size-3);
 }
 div .el-select__placeholder.is-transparent {
@@ -720,8 +720,8 @@ div .el-month-table td .el-date-table-cell__text {
   color: var(--color-neutral-1);
 }
 div .el-month-table td.today .el-date-table-cell__text {
-  color: var(--color-neutral-1) ; 
-  font-weight: 400 ;
+  color: var(--color-neutral-1);
+  font-weight: 400;
 }
 div .el-select-dropdown {
   background-color: var(--color-header-bg);
@@ -735,4 +735,4 @@ div .el-radio__inner:hover {
 }
 div .dash_popver {
   background-color: var(--management-bg-bolor) !important;
-}
+}

src/styles/theme.scss

@@ -83,6 +83,7 @@
   --color-table-header-bg: #f8f9fd;
 
   --color-dialog-header-bg: #f6f8fa;
+  --color-dialog-body-bg: #ffffff;
 
   // 按钮
   // default
@@ -141,6 +142,16 @@
   --tag-info-text-color: #2b2f36;
 
   --dashboard-text-color: #646a73;
+
+  --el-input-focus: #fff;
+
+  // 发送邮件部分
+
+  --color-email-bg: #f6f8fa;
+  --color-detail-email-record-bg: #eceef1;
+  --color-email-border: #eaebed;
+  --w-e-textarea-bg-color: #ffffff;
+  --color-divider: #eaebed;
   // 横幅
   --dashboard-scoring-bg-color: linear-gradient(
     251deg,
@@ -150,14 +161,24 @@
     rgba(224, 247, 249, 0.6) 80.46%,
     rgba(255, 255, 255, 0.3)
   );
-  
+
   --color-range-text: #2b2f36;
   --tag-bg-color: rgba(239, 239, 240);
   --tips-bg-color: rgba(26, 28, 32, 1);
   --scoring-bg-color: #f2f4f7;
-  
-  --scoring-colurful-color: linear-gradient(251deg, rgba(242, 244, 247) 0%, rgba(255, 237, 230) 100%);
+
+  --scoring-colurful-color: linear-gradient(
+    251deg,
+    rgba(242, 244, 247) 0%,
+    rgba(255, 237, 230) 100%
+  );
   --scoring-smile-radio-color: #e0e2e6;
+
+  // 滚动条
+  --color-scrollbar-thumb: #656f7d;
+
+  --color-table-header-bg: #f8f9fd;
+  --color-table-click-row-bg: #ffe3cc;
 }
 
 :root.dark {
@@ -168,11 +189,48 @@
   --color-neutral-2: rgba(240, 241, 243, 0.7);
   --color-neutral-3: rgba(240, 241, 243, 0.3);
   --color-border: #3f434a;
-  --color-header-bg: #343A43;
+  --color-header-bg: #30353c;
+
+  --border-hover-color: #654f3f;
+
+  --color-dialog-header-bg: #3e454f;
+  --color-dialog-body-bg: #30353c;
+
+  // 滚动条
+  --color-scrollbar-thumb: #656f7d;
+
+  // 菜单选中背景
+  --color-mune-active-bg: #553d2b;
+
+  // 邮件
+  --w-e-toolbar-bg-color: var(--color-email-bg);
+  --w-e-textarea-bg-color: var(--color-email-bg);
+  --w-e-toolbar-border-color: #656f7d;
+  --w-e-toolbar-color: var(--color-neutral-1);
+  --color-email-border: #656f7d;
+  --color-email-bg: #3c414a;
+  --color-detail-email-record-bg: #343a43;
+  --color-divider: #4c515a;
+  --color-avatar: var(--color-mode);
+  --color-header-bg: #343a43;
 
   // ElementUI
   // 整体背景颜色
   --el-bg-color: #2b2f36;
   // 按钮边框颜色
   --color-accent-13: #656f7d;
+  --el-border: #656f7d;
+  .el-input {
+    --el-input-border: #656f7d;
+  }
+  --color-table-header-bg: #34383f;
+  --el-input-focus: #2b2f36;
+
+  // vxe-table
+  --vxe-ui-layout-background-color: #2b2f36;
+  --vxe-ui-table-border-color: #3f434a;
+  --vxe-ui-table-column-icon-border-color: #6a6d73;
+  --color-table-header-bg: #30353c;
+
+  --color-table-click-row-bg: #8b582f;
 }

src/styles/vxeTable.scss

@@ -60,14 +60,14 @@ div.vxe-table .vxe-sort--desc-btn.sort--active {
 }
 
 // 表格点击样式
-.row--clicked {
-  background-color: #ffe3cc !important;
+.vxe-table-row-clicked-style {
+  background-color: var(--color-table-click-row-bg) !important;
 }
 div.vxe-table--render-default tr.vxe-body--row.row--hover,
 .vxe-table--render-default tr.vxe-body--row.row--stripe.row--hover {
   background-color: var(--border-hover-color);
 }
-div.vxe-table--render-default tr.vxe-body--row.row--clicked {
+div.vxe-table--render-default tr.vxe-body--row.vxe-table-row-clicked-style {
   background-color: var(--border-hover-color);
 }
 

src/views/Tracking/src/components/TrackingDetail/src/components/EmailDrawer.vue

@@ -207,7 +207,7 @@ const sendEmail = () => {
         @click="handleFocusEditor"
       />
     </div>
-    <div style="border-bottom: 1px solid var(--color-border)">
+    <div style="border-bottom: 1px solid var(--color-divider)">
       <el-button
         @click="sendEmail"
         class="el-button--dark"
@@ -241,7 +241,7 @@ const sendEmail = () => {
   padding: 16px;
   border-radius: 12px;
   border-bottom: 1px solid var(--color-border);
-  background: var(--color-header-bg);
+  background: var(--color-email-bg);
 
   .show-records {
     max-height: 370px;
@@ -282,7 +282,7 @@ const sendEmail = () => {
 .text-editor {
   margin-top: 16px;
   border-radius: 6px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-email-border);
   overflow: hidden;
 }
 
@@ -305,7 +305,7 @@ const sendEmail = () => {
       div {
         height: 14px;
         line-height: 14px;
-        color: #fff;
+        color: var(--color-avatar);
         font-weight: 700;
       }
     }
@@ -329,14 +329,14 @@ const sendEmail = () => {
 
   & > .content {
     padding: 16px 6px;
-    background-color: #eceef1;
+    background-color: var(--color-detail-email-record-bg);
     border-radius: 6px;
   }
 }
 
 :deep(.text-editor) {
   & > div:first-of-type {
-    border-bottom: 1px solid var(--color-border) !important;
+    border-bottom: 1px solid var(--color-email-border) !important;
   }
 }
 </style>