根据uniapp调整工程结构

components/AiCard.vue

@@ -0,0 +1,118 @@
+<template>
+  <section class="AiCard">
+    <div flex v-if="$slots.custom" class="start">
+      <div class="fill">
+        <slot name="custom"/>
+      </div>
+      <div v-if="$slots.menu" class="iconfont iconfont-iconMore" @tap.stop="handleMore"/>
+    </div>
+    <template v-else>
+      <u-row>
+        <div class="content">
+          <slot/>
+        </div>
+        <div btn @tap="$emit('send')">发送</div>
+      </u-row>
+      <u-row justify="space-between">
+        <slot v-if="$slots.title" name="title"/>
+        <div v-else>{{ cardTitle }}</div>
+        <div v-if="$slots.menu" class="iconfont iconfont-iconMore" @tap.stop="handleMore"/>
+      </u-row>
+    </template>
+    <div v-if="menu" class="mask" @click.stop="handleClose">
+      <div class="moreMenu" :style="menuPos">
+        <slot name="menu"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiCard",
+  props: {
+    cardTitle: String
+  },
+  data() {
+    return {
+      menuPos: {},
+      menu: false
+    }
+  },
+  methods: {
+    handleMore({detail}) {
+      this.menuPos = {
+        left: detail.x - 10 + 'px',
+        top: detail.y + 'px'
+      }
+      this.menu = !this.menu
+    },
+    handleClose() {
+      this.menu = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiCard {
+  width: 100%;
+  background: #FFFFFF;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+  border-radius: 8px;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  color: #999;
+  font-size: 26px;
+  flex-shrink: 0;
+
+  .content {
+    background: #F9F9F9;
+    border-radius: 4px;
+    min-height: 120px;
+    flex: 1;
+    min-width: 0;
+    margin-bottom: 26px;
+    padding: 20px;
+    box-sizing: border-box;
+    color: #333;
+  }
+
+  .u-row {
+    flex-wrap: nowrap;
+  }
+
+  div[btn] {
+    color: #1365DD;
+    padding: 0 0 0 18px;
+    cursor: pointer;
+  }
+
+  .iconfont-iconMore {
+    font-size: 38px;
+    transform: rotate(90deg);
+  }
+
+  .moreMenu {
+    position: fixed;
+    background: #FFFFFF;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    transform: translate(-100%, -100%);
+    min-width: 100px;
+    min-height: 100px;
+    z-index: 9;
+  }
+
+  .mask {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 11;
+  }
+}
+</style>