搜索结果列表页面开发

src/components/GuardiansLs/index.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const statMap = new Map([
+  ['approve', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
+  ['true', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
+  ['pass', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
+  ['pass', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
+  ['reject', { state: 'reject', icon: 'gt-plane-Fail', color: 'var(--color-danger,#F2050D)' }] // 叉
+  // ['optional', { state: 'optional', icon: '' }] // 未操作状态 空
+]);
+
+// 审查，审视 对钩列表
+defineOptions({ name: 'GuardiansLs' });
+import { pickNickName } from '@/utils';
+interface IItem {
+  username: string;
+  nick_name?: string;
+  nickname?: string;
+  disabled?: boolean;
+  state: 'approve' | 'pass' | 'reject' ;
+};
+
+withDefaults(defineProps<{
+  data: IItem[];
+}>(), {
+  data() { return []; }
+});
+defineEmits<{
+  'agree': [IItem];
+  'reject': [IItem];
+}>();
+</script>
+<template>
+  <ul class="g-guardians-ls">
+    <li v-for="(item, index) in data" :key="item.id + index" class="g-guardians-ls-item"
+      :class="{ disabled: item.disabled }">
+      <g-avatar :width="18" :height="18" style="vertical-align: middle;" :name="pickNickName(item)" :src="item.avatar || item.avatar_url" />
+      <span class="username">
+        <GLink :to="{ name: 'homepage', params: { namespace: item.username } }">{{ pickNickName(item) }}</GLink>
+      </span>
+      <GIcon v-if="statMap.get(item.state)" :name="statMap.get(item.state).icon" :color="statMap.get(item.state).color"></GIcon>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+.g-guardians-ls {
+  @apply text-ellipsis overflow-hidden whitespace-nowrap flex flex-col gap-[8px];
+
+  &-item {
+    @apply flex leading-[18px] items-center align-middle gap-[8px] overflow-hidden text-ellipsis;
+
+    .username {
+      @apply overflow-hidden text-ellipsis flex-1;
+    }
+
+    .icon {
+      min-width: 1em;
+      // cursor: pointer;
+    }
+
+    .disabled {
+      filter: opacity(60%);
+      // @apply cursor-not-allowed;
+
+      // .icon {
+      //   @apply cursor-not-allowed;
+      // }
+    }
+  }
+}
+</style>