搜索结果列表页面开发

src/components/MemberItemMini/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <li class="menu-item">
+    <span class="font-bold" v-if="item.nick_name" :title="item.nick_name">{{ item.nick_name }} &nbsp;</span>
+    <span :title="item.itemText">{{ item.itemText }}</span>
+    <span class="g-member-items-item-tags shrink-0 ml-2">
+      <slot name="tags" :data="item" :index="index">
+        <custom-tag v-if="isProjectMember" class="g-member-items-item-tag" color="#2865E0" border-color="#E4E9F0">
+          项目成员
+        </custom-tag>
+        <!-- <custom-tag v-if="isManager" class="g-member-items-item-tag" color="#2865E0" border-color="#E4E9F0">
+          管理者
+        </custom-tag>
+        <custom-tag
+          v-if="isVisitor && (item.join_way === 'inherit' || !isManager)"
+          class="g-member-items-item-tag"
+          color="#0EB07B"
+          border-color="#E4E9F0"
+        >
+          浏览者
+        </custom-tag>
+        <custom-tag
+          v-if="isDeveloper && (item.join_way === 'inherit' || !isManager)"
+          class="g-member-items-item-tag"
+          color="#707A87"
+          border-color="#E4E9F0"
+        >
+          开发者
+        </custom-tag> -->
+      </slot>
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'MemberItemMini' });
+import CustomTag from '@/components/CustomTag/index.vue';
+import setting from '@/setting';
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    item: any;
+  }>(),
+  {
+    item: {}
+  }
+);
+const userRole = setting.role;
+
+const { visitor, developer, admin } = setting.role;
+const isDeveloper = computed(() => props.item.access_level >= developer && props.item.access_level < admin);
+const isManager = computed(() => props.item.access_level >= admin);
+const isVisitor = computed(() => props.item.access_level >= visitor && props.item.access_level < developer);
+const isProjectMember = computed(() => {
+  return (
+    isManager.value
+    || (isDeveloper.value && (props.item.value?.join_way === 'inherit' || !isManager.value))
+    || (isVisitor.value && (props.item.value?.join_way === 'inherit' || !isManager.value))
+  );
+});
+</script>
+<style lang="scss" scoped>
+.menu-item {
+  @apply cursor-pointer whitespace-nowrap overflow-hidden overflow-x-auto text-ellipsis flex items-center;
+  padding: 8px;
+  max-width: 500px;
+  border-bottom: 1px solid var(--color-border-light);
+}
+</style>