From 59f88f811616061c46e4002e3feb72569445ffbe Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 3 Nov 2023 17:45:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/back-button/index.vue       |  8 +++-
 ui/src/components/index.ts                    |  5 +--
 .../index.vue}                                | 13 +++---
 ui/src/styles/app.scss                        |  7 ++--
 ui/src/styles/element-plus.scss               | 14 +++++++
 ui/src/views/dataset/CreateDataset.vue        | 42 +++++++++++++++----
 ui/src/views/dataset/component/BaseForm.vue   |  2 +-
 ui/src/views/setting/index.vue                |  4 +-
 8 files changed, 68 insertions(+), 27 deletions(-)
 rename ui/src/components/{content-container/LayoutContent.vue => layout-container/index.vue} (72%)

diff --git a/ui/src/components/back-button/index.vue b/ui/src/components/back-button/index.vue
index 4ca5d64e1..9f52e8475 100644
--- a/ui/src/components/back-button/index.vue
+++ b/ui/src/components/back-button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-icon class="back-button cursor mr-8 vertical-middle" @click="jump">
+  <el-icon class="back-button cursor mr-8" @click="jump">
     <Back />
   </el-icon>
 </template>
@@ -22,4 +22,8 @@ function jump() {
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.back-button {
+  font-size:20px;
+}
+</style>
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 370f1a95a..5453020d8 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -3,20 +3,19 @@ import AppIcon from './icons/AppIcon.vue'
 import AppAvatar from './app-avatar/index.vue'
 import LoginLayout from './login-layout/index.vue'
 import LoginContainer from './login-container/index.vue'
-import LayoutContent from './content-container/LayoutContent.vue'
+import LayoutContainer from './layout-container/index.vue'
 import TagsInput from './tags-input/index.vue'
 import CardBox from './card-box/index.vue'
 import CardAdd from './card-add/index.vue'
 import BackButton from './back-button/index.vue'
 
-
 export default {
   install(app: App) {
     app.component(AppIcon.name, AppIcon)
     app.component(AppAvatar.name, AppAvatar)
     app.component(LoginLayout.name, LoginLayout)
     app.component(LoginContainer.name, LoginContainer)
-    app.component(LayoutContent.name, LayoutContent)
+    app.component(LayoutContainer.name, LayoutContainer)
     app.component(TagsInput.name, TagsInput)
     app.component(CardBox.name, CardBox)
     app.component(CardAdd.name, CardAdd)
diff --git a/ui/src/components/content-container/LayoutContent.vue b/ui/src/components/layout-container/index.vue
similarity index 72%
rename from ui/src/components/content-container/LayoutContent.vue
rename to ui/src/components/layout-container/index.vue
index 9d30a63bf..97a356c55 100644
--- a/ui/src/components/content-container/LayoutContent.vue
+++ b/ui/src/components/layout-container/index.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="content-container">
-    <div class="content-container__header mt-16 mb-16" v-if="slots.header || header">
-      <slot name="header">
-        <back-button :to="backTo" v-if="showBack"></back-button>
-        <h2 class="vertical-middle">{{ header }}</h2>
-      </slot>
+    <div class="content-container__header flex align-center" v-if="slots.header || header">
+      <back-button :to="backTo" v-if="showBack"></back-button>
+      <h3>{{ header }}</h3>
+      <slot name="header"> </slot>
     </div>
     <el-scrollbar>
       <div class="content-container__main main-calc-height">
@@ -16,7 +15,7 @@
 
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
-defineOptions({ name: 'LayoutContent' })
+defineOptions({ name: 'LayoutContainer' })
 const slots = useSlots()
 const props = defineProps({
   header: String,
@@ -34,6 +33,8 @@ const showBack = computed(() => {
   padding: 0 var(--app-view-padding) var(--app-view-padding);
   .content-container__header {
     box-sizing: border-box;
+    padding: 16px 0;
+    flex-wrap: wrap;
   }
   .content-container__main {
     background-color: var(--app-view-bg-color);
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 00f833a45..af2fbd2da 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -202,17 +202,16 @@ h4 {
 // 标题前带竖线样式
 .title-decoration-1 {
   position: relative;
-  padding-left: 15px;
+  padding-left: 12px;
   &:before {
     position: absolute;
     left: 2px;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 4px;
-    height: 90%;
+    width: 2px;
+    height: 80%;
     content: '';
     background: var(--el-color-primary);
-    border-radius: 10px;
   }
 }
 
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index e67c19db0..98f491491 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -102,6 +102,20 @@
   }
 }
 
+// el-steps
+.el-step__icon {
+  background: none;
+}
+.el-step__head.is-process {
+  .el-step__icon {
+    &.is-text {
+      color: #ffffff;
+      border-color: var(--el-color-primary) !important;
+      background: var(--el-color-primary) !important;
+    }
+  }
+}
+
 // 抽屉样式整体修改
 .el-drawer {
   .el-drawer__header {
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index c5943da23..73eeee416 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -1,11 +1,20 @@
 <template>
-  <LayoutContent header="创建数据集" back-to="-1">
-    <div class="create-dataset flex main-calc-height">
-      <div class="p-24">
-        <el-steps :active="active" finish-status="success" align-center>
-          <el-step v-for="(item, index) in steps" :key="index" :title="item.name" />
-        </el-steps>
-      </div>
+  <LayoutContainer header="创建数据集" back-to="-1" class="create-dataset">
+    <template #header>
+      <el-steps :active="active" finish-status="success" align-center class="create-dataset__steps">
+        <el-step v-for="(item, index) in steps" :key="index">
+          <template #icon>
+            <div class="app-step">
+              <div class="el-step__icon is-text">
+                <div class="el-step__icon-inner">{{ index + 1 }}</div>
+              </div>
+              {{ item.name }}
+            </div>
+          </template>
+        </el-step>
+      </el-steps>
+    </template>
+    <div class="create-dataset__main flex main-calc-height">
       <div class="create-dataset__component p-24">
         <el-scrollbar>
           <component :is="steps[active].component" :ref="steps[active]?.ref" />
@@ -18,7 +27,7 @@
         <el-button @click="next" type="primary">开始导入</el-button>
       </div>
     </div>
-  </LayoutContent>
+  </LayoutContainer>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
@@ -51,7 +60,22 @@ const prev = () => {}
 </script>
 <style lang="scss" scoped>
 .create-dataset {
-  flex-direction: column;
+  &__steps {
+    min-width: 450px;
+    max-width: 800px;
+    width: 80%;
+    margin: 0 auto;
+    padding-right: 60px;
+
+    :deep(.el-step__line) {
+      left: 64% !important;
+      right: -33% !important;
+    }
+  }
+  &__main {
+    flex-direction: column;
+  }
+
   // height: 100%;
   &__component {
     flex: 1;
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index c271306d1..6ddac88d5 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 class="title-decoration-1 mb-8">基本信息</h4>
+  <h4 class="title-decoration-1 mb-16">基本信息</h4>
   <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
     <el-form-item label="数据集名称" prop="name">
       <el-input
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index b3b6ba59b..525cd60d8 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutContent header="团队管理">
+  <LayoutContainer header="团队管理">
     <div class="team-manage flex main-calc-height">
       <div class="team-member p-8 border-r">
         <div class="flex-between p-16">
@@ -67,7 +67,7 @@
       </div>
     </div>
     <CreateMemberDialog ref="CreateMemberRef" @refresh="refresh" />
-  </LayoutContent>
+  </LayoutContainer>
 </template>
 
 <script lang="ts" setup>