搜索结果列表页面开发

src/components/Commit/README.md

@@ -0,0 +1,33 @@
+# Commit组件
+
+### 说明
+``` js
+// template
+<commit v-bind="commitObj" />
+
+// script
+const commitObj = {
+  avatar: 'https://devui.design/components/assets/image1.png',
+  name: '曾恒瑶',
+  repoName: 'test',
+  title: 'Merge pull request #905 from HwangTaehyun/masterMerge pull request #905 from HwangTaehyun/masterMerge pull request #905 from HwangTaehyun/masterMerge pull request #905 from HwangTaehyun/masterMerge pull request #905 from HwangTaehyun/master',
+  desc: 'Merge pull request #905 from HwangTaehyun/masterMerge pull request #905 from HwangTaehyun/masterMerge pull request #905 from HwangTaehyun/masterMerge pull request #905 from HwangTaehyun/masterMerge pull request #905 from Hwa',
+  tip: 'Add Github Contributor Stats under Tools',
+  id: '49bfc90a',
+  createdTime: '2021-10-2',
+  num: 84
+};
+```
+### Props
+
+| 参数             | 说明                      | 类型                            | 可选值       | 默认值   |
+|----------------|-------------------------|-------------------------------|-----------|-------|
+| id | commit提交id | string                 | — | — |
+| avatar    | 头像src     | string   | —         | —   |
+| name      | 用户名                | string                  | —         | —   |
+| repoName      | commit所属仓库名                | string                  | —         | —   |
+| title | 标题               | string                 | —         | — |
+| createdTime | 创建时间 | string | — | — |
+| num? | 提交次数            | number                       | —      | 1 |
+| desc? | 描述          | string | —      | —     |
+| tip? | 底部提示文案 | string                 | — | — |

src/components/Commit/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="g-commit">
+    <div class="g-commit-header flex justify-between">
+      <div class="flex gap-2 items-center overflow-hidden">
+        <GLink
+          :to="toUserDetail"
+          v-if="!author_user_name"
+          :disabled="!author_user_name"
+          class="flex items-center gap-2 flex-shrink-0"
+        >
+          <GAvatar class="g-commit-header-avatar" :width="20" :height="20" :src="avatar" :name="name" />
+          <span class="g-commit-name">{{ name }}</span>
+        </GLink>
+        <GLink :to="toUserDetail" v-else class="flex items-center gap-2 flex-shrink-0">
+          <GAvatar class="g-commit-header-avatar" :width="20" :height="20" :src="avatar" :name="name" />
+          <span class="g-commit-name">{{ name }}</span>
+        </GLink>
+        <GLink :to="toDetail" class="g-commit-title ml-2">
+          <span>{{ title || message }}</span>
+        </GLink>
+        <span
+          v-show="foldable && (desc?.length || tip?.length)"
+          class="fold-btn flex-center cursor-pointer hover:bg-CG200"
+          @click="handleToggleFold"
+        >
+          <Icon :name="isFold ? 'gt-chevron-down' : 'gt-chevron-up'" />
+        </span>
+      </div>
+      <div class="g-commit-right flex-center flex-shrink-0 ml-20 text-G700 gap-4">
+        <slot name="right">
+          <span class="g-commit-text commit-link">
+            <GLink :to="toDetail">{{ id?.slice(0, 8) }}</GLink>
+          </span>
+          <span class="g-commit-text"> 创建于 <Time :time="createdTime" /> </span>
+          <span class="g-commit-text">
+            <d-icon name="icon-time" :operable="true">
+              <template #suffix>
+              <GLink class="hover:text-black" :to="toCommitList">
+                <template v-if="num">{{ num }}次提交</template>
+                <template v-else>历史提交</template>
+              </GLink>
+              </template>
+            </d-icon>
+          </span>
+        </slot>
+      </div>
+    </div>
+    <div class="g-commit-content ml-7 mt-2" v-show="foldable ? !isFold : true">
+      <slot name="content">
+        <div class="g-commit-desc text-CG600 overflow-auto">{{ desc }}</div>
+        <div class="g-commit-tip text-CG600">{{ tip }}</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { checkUsername } from '@/api/user';
+import { useRouter } from 'vue-router';
+
+interface IProps {
+  id: string;
+  avatar: string;
+  name: string;
+  author_user_name: string;
+  repoNamespace: string;
+  repoName: string;
+  title: string;
+  message?: string;
+  desc?: string;
+  tip?: string;
+  createdTime: string;
+  num?: number;
+  branch?: string;
+  foldable?: boolean; // 是否开启折叠，默认不开启
+}
+const props = defineProps<IProps>();
+
+const toUserDetail = computed(() => ({
+  name: 'homepage',
+  params: {
+    namespace: props.author_user_name
+  }
+}));
+const router = useRouter();
+const toDetail = computed(() =>
+  router
+    .resolve({
+      name: 'repoCommitDetail',
+      params: {
+        namespace: props.repoNamespace,
+        repoName: props.repoName,
+        commitId: props.id
+      },
+      query: {
+        ref: props.branch
+      }
+    })
+    .href.replace(/%2F/g, '/')
+);
+const toCommitList = computed(() => ({
+  name: 'repoCommitByBranch',
+  params: {
+    branchName: props.branch
+  }
+}));
+
+const isFold = ref(true);
+const handleToggleFold = () => {
+  isFold.value = !isFold.value;
+};
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+.g-commit {
+  margin-top: 24px;
+  width: 100%;
+  padding: 10px 16px;
+  &-header {
+    display: flex;
+    align-items: center;
+    .fold-btn {
+      border-radius: var(--border-radius);
+      width: 20px;
+      height: 16px;
+    }
+  }
+  &-title {
+    margin-right: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  &-right {
+    display: flex;
+    justify-content: flex-end;
+    & > div {
+      word-break: break-all;
+      white-space: wrap;
+    }
+  }
+  &-tip {
+    font-size: 12px;
+    color: var(--color-light);
+  }
+  &-text {
+    display: flex;
+    align-items: center;
+    :deep(i) {
+      color: black;
+      margin-right: 4px;
+    }
+  }
+}
+</style>