feat: AI建议 & 许可证页面

src/components/AIRepair/Panel.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <slot name="header"></slot>
+  </div>
+  <Transition
+    name="collapse-transition"
+    @beforeEnter="beforeEnter"
+    @enter="enter"
+    @afterEnter="afterEnter"
+    @beforeLeave="beforeLeave"
+    @leave="leave"
+    @afterLeave="afterLeave"
+    >
+      <div v-if="props.expand">
+        <slot name="body"></slot>
+      </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, type RendererElement } from 'vue';
+
+const props = defineProps({
+    expand: {
+      type: Boolean,
+      required: true
+    },
+  });
+
+const beforeEnter = (el: RendererElement) => {
+    if (!el.dataset) {
+      el.dataset = {};
+    }
+    if (el.style.height) {
+      el.dataset.height = el.style.height;
+    }
+    el.style.maxHeight = 0;
+  };
+  const enter = (el: RendererElement) => {
+    requestAnimationFrame(() => {
+      el.dataset.oldOverflow = el.style.overflow;
+      if (el.dataset.height) {
+        el.style.maxHeight = el.dataset.height;
+      } else if (el.scrollHeight !== 0) {
+        el.style.maxHeight = `${el.scrollHeight}px`;
+      } else {
+        el.style.maxHeight = 0;
+      }
+      el.style.overflow = 'hidden';
+    });
+  };
+  const afterEnter = (el: RendererElement) => {
+    el.style.maxHeight = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  };
+  const beforeLeave = (el: RendererElement) => {
+    if (!el.dataset) {
+      el.dataset = {};
+    }
+    el.dataset.oldOverflow = el.style.overflow;
+    el.style.maxHeight = `${el.scrollHeight}px`;
+    el.style.overflow = 'hidden';
+  };
+  const leave = (el: RendererElement) => {
+    if (el.scrollHeight !== 0) {
+      el.style.maxHeight = 0;
+    }
+  };
+  const afterLeave = (el: RendererElement) => {
+    el.style.maxHeight = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  };
+</script>
+
+<style scoped lang="scss">
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.5s ease;
+  }
+  
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
+
+.collapse-transition {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition:
+      max-height 0.3s cubic-bezier(0.5, 0.05, 0.5, 0.95),
+      opacity 0.3s cubic-bezier(0.5, 0.05, 0.5, 0.95);
+  }
+}
+</style>

src/components/AIRepair/Table.vue

@@ -0,0 +1,46 @@
+<template>
+  <d-table :data="dataSource" @sort-change="handleSortChange" :header-bg="true">
+    <d-column v-for="(column, index) in props.tableConfig" :field="column.field"
+    :header="column.header" :sortable="column.sortable" :sort-method="column.sortMethod"></d-column>
+  </d-table>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from 'vue';
+
+export default defineComponent({
+  props: {
+    tableConfig: {
+      type: Array,
+      default: () => [],
+    },
+    dataSource: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props) {
+
+    onMounted(() => {
+      console.log('props', props);
+    });
+
+    const handleSortChange = ({ field, direction }) => {
+      console.log('field', field);
+      console.log('direction', direction);
+    };
+    const sortDateMethod = (a, b) => {
+      return a.date > b.date;
+    };
+    const sortNameMethod = (a, b) => {
+      return a.lastName > b.lastName;
+    };
+
+    return { props, handleSortChange, sortDateMethod, sortNameMethod };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>