搜索结果列表页面开发

src/components/AssociatedEmail/README.md

@@ -0,0 +1,50 @@
+# AssociatedEmail
+
+### 说明
+- AssociatedEmail组件为关联邮箱组件，demo如下
+``` js
+// tempalte
+<associated-email
+email="lixuanyang@gitcode.net"
+:is-mail="true"
+:is-verify="true"
+@handle-star="handleEmailStar"
+@handle-deleted="handleEmailDeleted"
+>
+</associated-email>
+// script 
+const handleEmailStar = (props:object) => {
+  
+};
+const handleEmailDeleted = (props:object) => {
+  
+};
+```
+### Props
+
+| 参数       | 说明                   | 类型                        | 可选值    | 默认值     |
+|-----------|------------------------|----------------------------|----------|-----------|
+| id? | 卡片唯一id | string |  |  |
+| email | 邮箱 | string |  |        |
+| isMail? | 是否是主邮箱 | boolean |  | false |
+| isVerify? | 是否校验 | boolean |  | false |
+| hideDeleted? | 隐藏删除按钮 | boolean |  | false |
+| hideStar? | 隐藏Star按钮 | boolean |  | false |
+
+
+### Emits
+
+| 方法             | 说明                               | 返回值               |
+|-----------------|------------------------------------|---------------------|
+| handleStar | 点击Star按钮触发 | props(当前卡片对象信息) |
+| handleDeleted | 点击删除按钮触发 | props(当前卡片对象信息) |
+
+
+### Slots
+
+| 名称                 | 说明                                        |
+|---------------------|---------------------------------------------|
+| header | 邮箱区域插槽           |
+| main | 主邮箱区域插槽 |
+| content | 描述内容区域插槽 |
+| right | 右侧按钮区域插槽 |

src/components/AssociatedEmail/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="g-email ">
+    <div class="g-email-left">
+      <div class="g-email-left-header flex items-center">
+        <slot name="header">
+          <div class="g-email-left-header-email">{{ email }}</div>
+          <slot name="main">
+            <span class="g-email-left-header-tip main" v-if="isMail">默认</span>
+            <span class="g-email-left-header-tip no-verify" v-if="!isVerify">未验证</span>
+          </slot>
+          <div class="g-email-right-text" v-if="!isVerify" @click.stop="emits('handleStar', props)">
+            <span class="g-email-right-text-p">重新发送邮件确认</span>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div v-if="!isMail" class="g-email-right">
+      <slot name="right">
+        <MoreList :moreOpts="moreOpts" :item="item"></MoreList>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import MoreList from '@/components/MoreList/index.vue';
+const props = withDefaults(defineProps<{
+  id?: string
+  email: string
+  isMail?: boolean
+  isVerify?: boolean
+  hideDeleted?: boolean
+  hideStar?: boolean,
+  moreOpts?: any,
+  item?: any
+}>(), {
+  id: '',
+  email: '',
+  isMail: false,
+  isVerify: false,
+  hideDeleted: false,
+  hideStar: false,
+  moreOpts: () => [],
+  item: () => ({
+  })
+});
+
+const emits = defineEmits(['handleStar', 'handleDeleted']);
+
+</script>
+
+<style scoped lang="scss">
+$g-email-border-color: var(--color-G300);
+
+.g-email {
+  border: 1px solid $g-email-border-color;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  &:last-of-type{
+    // border-bottom: none;
+  }
+  &-left {
+    align-self: center;
+    &-header {
+      &-email {
+        width: 300px;
+        font-size: 14px;
+        color: var(--color-G900);
+      }
+
+      &-tip {
+        padding-left: 16px;
+        font-size: 14px;
+        border-left: 1px solid var(--color-G400);
+        &.main {
+          color: var(--color-Y500);
+        }
+
+        &.no-verify {
+          color: var(--color-O500);
+        }
+      }
+    }
+
+    &-content {
+      margin-top: 8px;
+
+      p {
+        margin-top: 4px;
+      }
+    }
+  }
+
+  &-right {
+    font-size: 16px;
+    align-self: center;
+    flex-shrink: 0;
+    display: flex;
+    :deep(.devui-button) {
+      border-color: $g-email-border-color;
+      margin-left: 24px;
+    }
+
+    &-text {
+      align-self: center;
+      display: inline-block;
+      cursor: pointer;
+
+      .devui-icon__container {
+        vertical-align: middle;
+      }
+
+      &-p {
+        margin-left: 4px;
+        color: var(--color-CG600);
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>