搜索结果列表页面开发

src/components/IssueCommentItem/README.md

@@ -0,0 +1,30 @@
+TS接口文档可以查看同文件夹下的types.ts
+
+### Props
+
+| 参数             | 说明                      | 类型                            | 可选值       | 默认值   |
+|----------------|-------------------------|-------------------------------|-----------|-------|
+| data           | 用户信息和部分评论信息的数据          | IssueUserInfoData             | —         | {}    |
+| canEdit?          | 能否编辑                    | boolean                       | —         | false |
+
+### Emits
+
+注意：以下事件都是组件内部对应的按钮点击触发，如果用插槽自定义对应区域的内容的话，事件自行监听即可
+
+| 方法   | 说明 | 返回值                   |
+|------|----|-----------------------|
+| edit | 编辑 | IssueUserInfoData |
+
+### Slots
+
+| 名称           | 说明                            |
+|--------------|-------------------------------|
+| default      | 内容区域部分的插槽                     |
+| footer       | panel外footer区域的插槽             |
+| header       | 头部左边区域部分的插槽                   |
+| works        | 身份tag区域的插槽                    |
+| extra-works  | 额外的身份tag区域的插槽                 |
+| extra-tags   | 组件额外标签区域插槽，在只对当前组件标签进行拓展时可以使用 |
+| actions      | 操作区域插槽                        |
+| more-actions | 下拉菜单区域插槽                      |
+| dropdown     | 下拉菜单内部插槽                      |

src/components/IssueCommentItem/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <section class="g-issue-comment-item">
+    <panel>
+      <template #header>
+        <div class="g-issue-comment-item-header">
+          <slot name="header">
+            <span class="g-issue-comment-item-name">{{ data.name }}</span>
+            <span class="g-issue-comment-item-split" v-if="data.createdTime">·</span>
+            <span v-if="data.createdTime">{{ formatTimeFromNow(data.createdTime) }}</span>
+            <template v-if="data.hasEdited">
+              <span class="g-issue-comment-item-split">·</span>
+              <custom-tag border-color="#D3D3D3" color="#606060">已编辑</custom-tag>
+            </template>
+          </slot>
+        </div>
+      </template>
+      <template #headerRight>
+        <div class="g-issue-comment-item-actions">
+          <slot name="works">
+            <custom-tag v-if="data.isCreator" border-color="#D3D3D3" color="#606060">创建者</custom-tag>
+            <custom-tag v-if="data.isDeveloper" border-color="#D3D3D3" color="#606060">开发者</custom-tag>
+          </slot>
+          <slot name="extra-works"></slot>
+          <slot name="actions">
+            <d-button
+              v-if="canEdit"
+              icon="edit"
+              variant="text"
+              @click="emits('edit', data)"
+            >
+              编辑
+            </d-button>
+          </slot>
+          <slot name="more-actions">
+            <d-dropdown :position="['bottom-start', 'bottom-end']" align="center">
+              <d-button
+                icon="more-operate"
+                variant="text"
+              >
+              </d-button>
+              <template #menu>
+                <slot name="dropdown">
+                  <ul>
+                    <li style="padding: 16px">我是插槽</li>
+                  </ul>
+                </slot>
+              </template>
+            </d-dropdown>
+          </slot>
+        </div>
+      </template>
+      <template #default>
+        <slot></slot>
+      </template>
+    </panel>
+    <slot name="footer"></slot>
+  </section>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'issue-comment-item'
+};
+</script>
+
+<script setup lang="ts">
+import Panel from '@/components/Panel/index.vue';
+import type { IssueUserInfoData } from '@/components/IssueCommentItem/types';
+import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
+import CustomTag from '@/components/CustomTag/index.vue';
+
+withDefaults(defineProps<{
+  data: IssueUserInfoData;
+  canEdit?: boolean;
+}>(), {
+  data: () => ({
+    name: '',
+    createdTime: '',
+    isCreator: false,
+    isDeveloper: false
+  }),
+  canEdit: false
+});
+
+const emits = defineEmits<{(e: 'edit', data: IssueUserInfoData): void
+}>();
+
+const { formatTimeFromNow } = useTimeFormat();
+
+</script>
+
+<style scoped lang="scss">
+$g-issue-comment-item-color: #333333;
+$g-issue-comment-item-color-second: #606060;
+.g-issue-comment-item {
+  position: relative;
+  height: auto;
+  &-header {
+    display: flex;
+    align-items: center;
+    color: $g-issue-comment-item-color-second;
+  }
+  &-name {
+    color: $g-issue-comment-item-color;
+    font-weight: 500;
+  }
+  &-split {
+    padding: 0 8px;
+    font-weight: bolder;
+  }
+  &-actions {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    :deep(.g-custom-tag){
+      margin-right: 0;
+    }
+  }
+}
+</style>

src/components/IssueCommentItem/types.ts

@@ -0,0 +1,7 @@
+export type IssueUserInfoData = {
+  name: string;
+  createdTime: string;
+  hasEdited?: boolean;
+  isCreator: boolean;
+  isDeveloper: boolean;
+}