Situation-Awareness-Platform-Frontend/src/components/Commit/index.vue

<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>