搜索结果列表页面开发

src/components/MoreList/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <d-dropdown :visible="visible" :position="position" :align="align" @toggle="handleToggle">
+    <slot name="trigger">
+      <d-button class="btn-more" variant="text">
+        <d-tooltip content="更多" position="top">
+          <Icon name="gt-more-operate" :operable="true" />
+        </d-tooltip>
+      </d-button>
+    </slot>
+    <template #menu>
+      <ul class="list-menu px-4">
+        <template v-for="(opt, index) in moreOpts" :key="index">
+          <OptionLink
+            v-if="opt.type !== 'exit' || item.my_role?.access_level < 50"
+            v-bind="item"
+            class="list-menu-item"
+            @click.prevent="opt.handle(item)"
+          >
+            <img v-if="opt.svg" :src="opt.svg" />
+            <Icon v-else-if="opt.icon" class="icon" :style="{ color: opt.iconColor }" :name="opt.icon" :size="14" />
+            <span>{{ opt.text }}</span>
+          </OptionLink>
+        </template>
+      </ul>
+    </template>
+  </d-dropdown>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface IData {
+  [propName: string]: any; // 数据  key 展示字段名 ： value  数据
+}
+const props = withDefaults(
+  defineProps<{
+    moreOpts?: IData[];
+    position?: string[];
+    align?: string;
+    item?: any;
+  }>(),
+  {
+    moreOpts: () => [],
+    position: () => ['bottom-end', 'top-end'],
+    align: 'start',
+    item: {}
+  }
+);
+
+const visible = ref(false);
+const handleToggle = (isVisible?: boolean) => {
+  visible.value = isVisible;
+};
+</script>
+
+<style lang="scss" scoped>
+.btn-more {
+  border: none;
+  background-color: #fff;
+
+  .icon {
+    transform: rotate(90deg);
+  }
+}
+.list-menu {
+  padding: 8px;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-border);
+}
+</style>