ui库和web端产品库合并版本(还需修复细节)

2022-11-29 18:27:14 +08:00
parent 5e4bd93238
commit 8bf6c57668
151 changed files with 28267 additions and 49 deletions
--- a/ui/packages/layout/AiDetail.vue
+++ b/ui/packages/layout/AiDetail.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="ai-detail">
+    <div class="ai-detail__title">
+      <slot name="title"></slot>
+    </div>
+    <div class="ai-detail__step" v-if="isHasStepSlot">
+      <slot name="step"></slot>
+    </div>
+    <div class="ai-detail__content" :class="className">
+      <div class="ai-detail__content--wrapper" :class="{'ai-detail__content--side':isHasSidebar,list}">
+        <slot name="content"></slot>
+      </div>
+    </div>
+    <div class="ai-detail__footer" v-if="isHasFooterSlot">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiDetail',
+
+  props: {
+    isHasSidebar: {
+      type: Boolean,
+      default: false
+    },
+    list: Boolean
+  },
+
+  computed: {
+    isHasFooterSlot() {
+      return this.$slots.footer
+    },
+
+    isHasStepSlot() {
+      return this.$slots.step
+    },
+
+    className() {
+      if (this.isHasFooterSlot) {
+        if (this.isHasStepSlot) {
+          return 'ai-detail__content--active-step'
+        }
+
+        return 'ai-detail__content--active'
+      } else {
+        if (this.isHasStepSlot) {
+          return 'ai-detail__content--step'
+        }
+      }
+
+      return ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-detail {
+  height: 100%;
+  background: #F5F6F9;
+  overflow: hidden;
+
+  .ai-detail__title {
+    margin: 0 20px;
+  }
+
+  .ai-detail__step {
+    height: 72px;
+  }
+
+  .ai-detail__content {
+    height: calc(100% - 48px);
+    padding: 0 0 20px 0;
+    overflow-x: hidden;
+    overflow-y: overlay;
+  }
+
+  @media screen and (max-width: 1740px) {
+    .ai-detail__content {
+      padding: 0 20px 20px;
+    }
+  }
+
+  .ai-detail__content--wrapper {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-top: 20px;
+
+    &.list {
+      max-width: unset;
+      margin: 0 20px;
+    }
+  }
+
+  @media screen and (max-width: 1740px) {
+    .ai-detail__content--side {
+      margin-left: 128px;
+    }
+  }
+
+  .ai-detail__content--active {
+    height: calc(100% - 48px - 64px);
+  }
+
+  .ai-detail__content--active-step {
+    height: calc(100% - 48px - 64px - 72px);
+  }
+
+  .ai-detail__content--step {
+    height: calc(100% - 48px - 72px);
+  }
+
+  .ai-detail__footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 64px;
+    background: #F5F5F5;
+    box-shadow: 0px 1px 0px 0px #E5E5E5;
+
+    .el-button {
+      width: 92px;
+    }
+  }
+}
+</style>