feat: 租户管理联调 TencentBlueKing#1589

# Reviewed, transaction id: 4798

src/pages/src/app.vue

@@ -5,9 +5,9 @@ import { useRoute } from 'vue-router';
 
 import HeaderBox from './views/Header.vue';
 
-import { currentUser } from '@/http/api';
+import { currentUser } from '@/http';
 import { t } from '@/language/index';
-import { useUser } from '@/store/user';
+import { useUser } from '@/store';
 import Password from '@/views/reset-password/index.vue';
 import ResetPassword from '@/views/reset-password/newPassword.vue';
 

src/pages/src/components/ChangePassword.vue

@@ -41,7 +41,7 @@ import { Message } from 'bkui-vue';
 import { reactive, ref, watch } from 'vue';
 
 import { logout } from '@/common/auth';
-import { putPersonalCenterUserPassword } from '@/http/personalCenterFiles';
+import { putPersonalCenterUserPassword } from '@/http';
 import { t } from '@/language/index';
 
 const emit = defineEmits(['closed']);

src/pages/src/components/ResetPassword.vue

@@ -28,8 +28,8 @@
 import { Message } from 'bkui-vue';
 import { reactive, ref, watch } from 'vue';
 
-import useValidate from '@/hooks/use-validate';
-import { putUsersPassword, randomPasswords } from '@/http/dataSourceFiles';
+import { useValidate } from '@/hooks';
+import { putUsersPassword, randomPasswords } from '@/http';
 import { t } from '@/language/index';
 
 const validate = useValidate();

src/pages/src/components/field-mapping/FieldMapping.vue

@@ -6,7 +6,7 @@
         <bk-form-item class="w-[100px]" :label="$t('映射关系')" />
         <bk-form-item class="w-[240px]" :label="$t('API返回字段')" required />
       </div>
-      <div class="field-content" v-for="(item, index) in fieldSettingData.field_mapping.builtin_fields" :key="index">
+      <div class="field-content" v-for="(item, index) in fieldSettingData?.field_mapping?.builtin_fields" :key="index">
         <div class="field-name">
           <bk-input :value="`${item.display_name}（${item.name}）`" readonly />
         </div>
@@ -42,7 +42,7 @@
         </bk-form-item>
       </div>
     </div>
-    <div class="custom-field" v-for="(item, index) in fieldSettingData.addFieldList" :key="index">
+    <div class="custom-field" v-for="(item, index) in fieldSettingData?.addFieldList" :key="index">
       <bk-form-item
         :property="`addFieldList.${index}.target_field`"
         :rules="rules.target_field">

src/pages/src/components/layouts/DataSourceCard.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="card-wrapper">
+    <div class="card-header">
+      <div class="card-header-right">
+        <i :class="list.logo" />
+        <div>
+          <p class="title">{{ list.name }}</p>
+          <p class="subtitle">{{ list.description }}</p>
+        </div>
+      </div>
+      <slot name="header"></slot>
+    </div>
+    <div :class="['card-content', { 'active-card-content': list.isShow }]">
+      <div class="step-bar">
+        <slot name="header"></slot>
+      </div>
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  list: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeId: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.card-wrapper {
+  margin-bottom: 12px;
+  background: #fff;
+
+  .card-header {
+    display: flex;
+    padding: 16px 24px;
+    border-radius: 2px;
+    box-shadow: 0 2px 4px 0 #1919290d;
+    align-items: center;
+    justify-content: space-between;
+
+    &:hover {
+      cursor: pointer;
+      border: 1px solid #A3C5FD;
+    }
+
+    .card-header-right {
+      display: flex;
+      align-items: center;
+
+      i {
+        margin-right: 15px;
+        font-size: 18px;
+      }
+
+      .title {
+        font-size: 14px;
+        line-height: 22px;
+        color: #313238;
+      }
+
+      .subtitle {
+        line-height: 18px;
+        color: #979BA5;
+      }
+    }
+  }
+
+  .card-content {
+    display: none;
+    background: #FFF;
+    border-radius: 2px;
+    box-shadow: 0 2px 4px 0 #1919290d;
+
+    .step-bar {
+      text-align: center;
+      background: #FAFBFD;
+      box-shadow: 0 1px 0 0 #F0F1F5;
+    }
+  }
+
+  .active-card-content {
+    display: block;
+  }
+}
+</style>

src/pages/src/components/layouts/LabelContent.vue

@@ -0,0 +1,39 @@
+<template>
+  <span class="label-content">
+    <span class="label-key">{{ `${label ? label + '：' : ''}` }} </span>
+    <span class="label-value">
+      <slot></slot>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.label-content {
+  display: flex;
+  font-size: 14px;
+  line-height: 40px;
+  align-content: center;
+
+  .label-key {
+    width: 98px;
+    color: #63656E;
+    text-align: right;
+  }
+
+  .label-value {
+    flex: 1;
+    color: #313238;
+  }
+}
+</style>

src/pages/src/components/layouts/MainBreadcrumbs.vue

@@ -17,7 +17,7 @@
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { useMainViewStore } from '@/store/mainView';
+import { useMainViewStore } from '@/store';
 
 const store = useMainViewStore();
 const route = useRoute();

src/pages/src/components/layouts/MainBreadcrumbsDetails.vue

@@ -24,7 +24,7 @@
 import { computed, defineEmits, defineProps } from 'vue';
 import { useRoute } from 'vue-router';
 
-import { useMainViewStore } from '@/store/mainView';
+import { useMainViewStore } from '@/store';
 
 defineProps({
   subtitle: {

src/pages/src/components/layouts/MainView.vue

@@ -26,9 +26,7 @@
 <script setup lang="ts">
 import MainBreadcrumbs from './MainBreadcrumbs.vue';
 
-import { useMainViewStore } from '@/store/mainView';
-import { useMenu } from '@/store/useMenu';
-
+import { useMainViewStore, useMenu } from '@/store';
 const menuStore = useMenu();
 const mainViewStore = useMainViewStore();
 </script>

src/pages/src/components/layouts/ViewRow.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="row-wrapper">
+    <header>
+      <p>{{ title }}</p>
+      <slot name="header"></slot>
+    </header>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.row-wrapper {
+  margin-bottom: 24px;
+
+  header {
+    display: flex;
+    place-content: center space-between;
+
+    p {
+      margin-bottom: 16px;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 22px;
+      color: #63656E;
+    }
+  }
+}
+</style>

src/pages/src/components/layouts/row.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="row-wrapper">
+    <header>
+      <p>{{ title }}</p>
+      <slot name="header"></slot>
+    </header>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.row-wrapper {
+  padding: 0 24px 8px;
+  margin-bottom: 16px;
+  background: #FFF;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px 0 #1919290d;
+
+  header {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+
+    p {
+      margin: 16px 0;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 22px;
+      color: #63656E;
+    }
+  }
+}
+</style>