搜索结果列表页面开发

src/components/Repo/RepoIntro.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+defineProps<{
+  repoId: string;
+  repoInfo: any;
+  validLinks: any[];
+  topicList: any[];
+  loadingStatus: {
+    profileLoading: boolean;
+    readmeLoading: boolean;
+    eventsLoading: boolean;
+    contributorLoading: boolean;
+    releasesLoading: boolean;
+  };
+  editable: boolean;
+}>();
+
+function triggerLink(link: any) {
+  if (link.linkName) router.push({ name: link.linkName, params: link.params });
+}
+
+const handleClickTopic = (name: string) => {
+  if (name) {
+    router.push(`/topic/${name}`);
+  } else {
+    router.push('/404');
+  }
+};
+</script>
+
+<template>
+  <div class="repo-info">
+    <d-skeleton :loading="loadingStatus.profileLoading" :rows="10">
+      <div class="repo-profile">
+        <div class="profile-title flex items-center justify-between">
+          <div class="flex items-center">
+            <Icon name="gt-file2-c" class="mr-2"></Icon><span class="text-G900 font-medium">简介</span>
+          </div>
+          <div v-if="editable" @click="triggerLink({linkName:'repoSetting'})" class="cursor-pointer" title="编辑简介">
+            <Icon name="gt-edit"></Icon>
+          </div>
+        </div>
+
+        <div class="text-G900 break-words mt-3">
+          <g-text :config="{ line: 4, ellipse: true,tooltip:false, showAll: true }">
+            {{ repoInfo.description || '暂无简介' }}
+          </g-text>
+        </div>
+        <!-- <div class="my-4 flex flex-wrap w-[100%]" v-if="topicList?.length">
+          <div v-for="topic of topicList" :key="topic.name" class="border-box max-w-[100%] truncate py-[2px] px-2 border-solid border-[1px] border-CG300 rounded-[3px] text-CG600 text-[12px] mr-1 mb-1 cursor-pointer font-bold hover:text-CG900" @click.stop="handleClickTopic(topic.name)">
+            <d-popover :content="topic.name" trigger="hover">
+              {{ topic.name }}
+            </d-popover>
+          </div>
+        </div> -->
+        <div class="mt-6">
+          <div
+            v-for="(link, idx) in validLinks"
+            :key="idx"
+            class="text-G900 mb-3 flex items-center"
+            style="line-height: 1"
+            @click="triggerLink(link)"
+            :class="{ ['cursor-pointer']: link.linkName }"
+            :title="link.name"
+          >
+            <Icon v-if="/^(icon|gt)\-/.test(link.icon)" :name="link.icon" size="16px" class="inline-block min-w-[16px]"></Icon>
+            <img v-else :src="link.icon" class="h-3.5" />
+            <span
+            class="ml-2 overflow-wrap-break"
+            style="word-break: break-all; cursor: pointer"
+            >{{ link.text }}</span>
+            <span class="ml-0.5" v-if="link.suffix">{{ link.suffix }}</span>
+          </div>
+        </div>
+        <div class="g-row-line my-24"></div>
+      </div>
+    </d-skeleton>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+</style>