From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化

---
 app/components/datasets/create/step-one/index.module.css |  106 +++++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 95 insertions(+), 11 deletions(-)

diff --git a/app/components/datasets/create/step-one/index.module.css b/app/components/datasets/create/step-one/index.module.css
index 581409b..bb8dd9b 100644
--- a/app/components/datasets/create/step-one/index.module.css
+++ b/app/components/datasets/create/step-one/index.module.css
@@ -1,5 +1,11 @@
 .stepHeader {
+  position: sticky;
+  top: 0;
+  left: 0;
   padding: 42px 64px 12px 0;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 28px;
 }
 
 .form {
@@ -8,22 +14,38 @@
 }
 
 .dataSourceItem {
-  @apply w-full relative flex items-center p-3 h-14 bg-components-option-card-option-bg rounded-xl
-  cursor-pointer border border-components-option-card-option-border text-text-secondary;
+  @apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
+  border: 0.5px solid #EAECF0;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #101828;
 }
 
 .dataSourceItem:hover {
-  @apply bg-components-option-card-option-bg-hover border border-components-option-card-option-border-hover shadow-xs shadow-shadow-shadow-3;
+  background-color: #f5f8ff;
+  border: 0.5px solid #B2CCFF;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
 
 .dataSourceItem.active {
-  @apply bg-components-option-card-option-selected-bg border border-components-option-card-option-selected-border
-  ring-[0.5px] ring-components-option-card-option-selected-border;
+  background-color: #f5f8ff;
+  border: 1.5px solid #528BFF;
+  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
 }
 
-.dataSourceItem.disabled,
+.dataSourceItem.disabled {
+  background-color: #f9fafb;
+  border: 0.5px solid #EAECF0;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  cursor: default;
+}
+
 .dataSourceItem.disabled:hover {
-  @apply bg-components-option-card-option-bg border-[0.5px] border-components-option-card-option-border cursor-not-allowed text-text-disabled shadow-none;
+  background-color: #f9fafb;
+  border: 0.5px solid #EAECF0;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
 }
 
 .comingTag {
@@ -42,9 +64,17 @@
 }
 
 .datasetIcon {
-  @apply flex shrink-0 mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat bg-text-primary-on-surface border-[0.5px] border-divider-regular backdrop-blur-sm;
+  @apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
+  background-color: #F5FAFF;
   background-image: url(../assets/file.svg);
   background-size: 16px;
+  border: 0.5px solid #D1E9FF;
+}
+
+.dataSourceItem:active .datasetIcon,
+.dataSourceItem:hover .datasetIcon {
+  background-color: #F5F8FF;
+  border: 0.5px solid #E0EAFF;
 }
 
 .datasetIcon.notion {
@@ -60,7 +90,61 @@
   width: 120px;
 }
 
-.notionIcon {
-  background: var(--color-components-card-bg) center no-repeat url(../assets/notion.svg);
-  background-size: 24px;
+.dividerLine {
+  margin: 32px 0;
+  max-width: 640px;
+  height: 1px;
+  background-color: #eaecf0;
 }
+
+.notionConnectionTip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 24px;
+  width: 640px;
+  background: #F9FAFB;
+  border-radius: 16px;
+}
+
+.notionIcon {
+  display: flex;
+  padding: 12px;
+  width: 48px;
+  height: 48px;
+  background: #fff center no-repeat url(../assets/notion.svg);
+  background-size: 24px;
+  border: 0.5px solid #EAECF5;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  border-radius: 12px;
+}
+
+.notionConnectionTip .title {
+  position: relative;
+  margin: 24px 0 4px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  color: #374151;
+}
+
+.notionConnectionTip .title::after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  right: -12px;
+  width: 16px;
+  height: 16px;
+  background: center no-repeat url(../assets/Icon-3-dots.svg);
+  background-size: contain;
+}
+
+.notionConnectionTip .tip {
+  margin-bottom: 20px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 18px;
+  color: #6B7280;
+}
\ No newline at end of file

--
Gitblit v1.8.0