搜索结果列表页面开发

src/components/IssueTop/README.md

@@ -0,0 +1,47 @@
+# IssueTop
+
+### 说明
+- IssueTop组件为issue置顶组件，demo如下
+``` js
+// tempalte
+ <issue-top
+   title="DV300开关机压测出现系统挂3516DV300开关机压测出现系统挂"
+   user-name="李轩扬"
+   created-time="2023-07-25"
+   index-label="1"
+   :is-open="true"
+   :hide-close="false"
+   @handle-close="handleIssueTopClose"
+  >
+  </issue-top>
+// script 
+const handleIssueTopClose = () => {
+  
+};
+```
+### Props
+
+| 参数       | 说明                   | 类型                        | 可选值    | 默认值     |
+|-----------|------------------------|----------------------------|----------|-----------|
+| title | 标题 | string |  |        |
+| createdTime | 创建时间 | string |  |  |
+| userName | 用户名 | string |  |  |
+| hideClose? | 隐藏关闭按钮 | boolean |  | false |
+| indexLabel? | index名称自定义 | string |  |  |
+| isOpen? | 是否是开启 | boolean |  | true |
+
+
+### Emits
+
+| 方法             | 说明                               | 返回值               |
+|-----------------|------------------------------------|---------------------|
+| handleClose | 点击关闭触发      | props(当前卡片对象信息) |
+
+
+### Slots
+
+| 名称                 | 说明                                        |
+|---------------------|---------------------------------------------|
+| header | 标题行区域插槽             |
+| content | 用户名，创建时间区域插槽 |
+| status | 开启/关闭状态区域插槽 |

src/components/IssueTop/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="g-issue-top flex gap-4">
+    <!-- status -->
+    <div class="stat-card min-w-[56px] min-h-[70px] flex flex-col gap-2 justify-center items-center"
+      :style="{ backgroundColor: issueStateOption[state].bgColor}">
+      <span>
+        <Icon v-if="issueStateOption[state]" :name="issueStateOption[state].icon" :color="issueStateOption[state].color"></Icon>
+      </span>
+      <GLink :href="issueUrl" v-if="indexLabel"> #{{ indexLabel }} </GLink>
+    </div>
+    <!-- info -->
+    <div class="issue-info" :class="{ 'mr-[25px]': !hideClose }">
+      <GLink :href="orgId &&  $route.params.repoName?
+        $router.resolve({ name: 'repoIssueDetail', params: { serialNumber: data.iid } }).href :
+        data.web_url" class="issue-title" style="font-weight: 500;" :title="title">{{ title }}</GLink>
+      <div class="bottom-info">
+        <GLink :to="{ name: 'homepage', params: { namespace: userName } }" class="flex items-center min-w-[16px]">
+          <g-avatar :name="userName" :src="author?.avatar_url" :width="16" :height="16"></g-avatar>
+        </GLink>
+        <GLink class="user-name" :to="{ name: 'homepage', params: { namespace: userName } }">{{ pickNickName(author) }}</GLink>
+        <span class="text-CG600 text-xs">创建于 <Time :time="createdTime" /></span>
+      </div>
+    </div>
+    <!-- off btn -->
+    <span class="text-xs g-issue-top-header-close g-icon-pointer" v-if="!hideClose"
+      @click.stop="emits('handleClose', props)">关闭</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Time from '@/components/Time/index.vue';
+import UserAvtar from '@/components/UserAvatar/index.vue';
+import { pickNickName } from '@/utils';
+import { issueStateOption } from '@/constant/issue';
+import type { ISSUE_STATE } from '@/constant/issue';
+import { useOrgId } from '@/utils/hooks/useOrgId';
+const { orgId } = useOrgId('/');
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    userName: string;
+    createdTime: string;
+    hideClose?: boolean;
+    indexLabel?: string;
+    author?: object;
+    issueUrl: string;
+    data: object;
+    state: ISSUE_STATE
+  }>(),
+  {
+    title: '',
+    userName: '',
+    createdTime: '',
+    hideClose: true,
+    indexLabel: ''
+  }
+);
+
+const emits = defineEmits(['handleClose']);
+</script>
+
+<style scoped lang="scss">
+$g-issue-top-border-color: #d3d3d3;
+$g-issue-top-border-radius: 4px;
+$g-issue-top-text-color: #707a87;
+
+.g-issue-top {
+  background-color: #fff;
+  padding: 16px 20px;
+
+  &-header {
+    &-close {
+      position: absolute;
+      right: 20px;
+      top: 18px;
+      font-weight: 400;
+      color: #707a87;
+      line-height: 17px;
+      height: 21px;
+    }
+
+  }
+
+  .stat-card {
+    border-radius: 3px;
+  }
+}
+.issue-info {
+  @apply flex flex-col gap-2 justify-between whitespace-nowrap overflow-hidden text-ellipsis;
+  .issue-title {
+    @apply text-G900 text-base line-clamp-2 break-all overflow-hidden text-ellipsis whitespace-normal;
+  }
+  .bottom-info {
+    @apply flex gap-2 items-center;
+    .user-name {
+      @apply overflow-hidden text-ellipsis break-all;
+    }
+  }
+}
+</style>