搜索结果列表页面开发

src/components/FileIcon/README.md

@@ -0,0 +1,9 @@
+### Props
+
+| 参数         | 说明                                            | 类型      | 可选值                           | 默认值     |
+|------------|-----------------------------------------------|---------|--------------------------------  |---------|
+| type       | icon的类型，可以传入映射对象对应的key值，也可以直接传入可被组件识别的icon name | string  | — | "folder" |
+| title?     | 文件名称                                          | string  | — | "标题"    |
+| showTitle? | 是否显示文案                                        | boolean | — | true    |
+| size?      | icon的尺寸                                       | string  | — | "18px"  |
+| link?      | 需要跳转的路由地址                                     | string  | — | —       |

src/components/FileIcon/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="g-file-icon">
+    <slot name="icon">
+      <Icon :name="iconName" :size="size" class="mr-1" />
+    </slot>
+    <slot v-if="showTitle" name="title">
+      <div class="g-file-item">
+       <!-- submodule -->
+      <template v-if="file?.type === 'commit'">
+        <a :href="file.submodule_url" target="_blank" class="g-file-icon-link">
+          <span class="g-file-icon-title" :title="title">
+            {{ file.name }}
+          </span>
+        </a>
+        <a :href="file.submodule_link" target="_blank" class="g-file-icon-link text-light">
+          <span class="g-file-icon-title" :title="title">
+            @{{ file.blob_id.slice(0, 8) }}
+          </span>
+        </a>
+      </template>
+      <!-- link -->
+      <router-link v-else-if="link" :to="routeLink" class="g-file-icon-link">
+        <span class="g-file-icon-title" :title="title">
+          {{ title }}
+        </span>
+      </router-link>
+      <!-- text -->
+      <span v-else class="g-file-icon-title" :title="title">
+        {{ title }}
+      </span>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useFile } from '@/utils/hooks/useFile';
+import { useEscapeBranchName } from '@/utils/hooks/usebranchName';
+const { getIcon, getFolderIcon, getFileIcon } = useFile();
+
+const props = withDefaults(
+  defineProps<{
+    type: string;
+    title?: string;
+    // 是否显示文案
+    showTitle?: boolean;
+    size?: string;
+    // 路由链接
+    link?: string;
+    maxWidth?: number;
+    file?: object;
+  }>(),
+  {
+    type: 'folder',
+    title: '标题',
+    showTitle: true,
+    size: '18px',
+    link: ''
+  }
+);
+
+const iconName = computed(() => {
+  if (props.file) {
+    return getIcon(props.file);
+  }
+  return props.type === 'folder' ? getFolderIcon() : getFileIcon(props.title);
+});
+
+const routeLink = computed(() => {
+  return useEscapeBranchName(props.link);
+});
+</script>
+
+<style scoped lang="scss">
+.g-file-icon {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  width: 100%;
+  &-link {
+    line-height: 1;
+    width: 100%;
+  }
+
+  &-title {
+    font-size: 14px;
+    font-weight: 400;
+    margin-left: 4px;
+    line-height: 1.5;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+  .g-file-item{
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+}</style>