搜索结果列表页面开发

2025-03-12 18:41:20 +08:00
commit 7cebe8fc00
739 changed files with 88149 additions and 0 deletions
--- a/src/components/Repo/DownloadChart.vue
+++ b/src/components/Repo/DownloadChart.vue
@@ -0,0 +1,122 @@
+<template>
+  <div v-if="['xxl', 'xl', 'md'].includes(widthType)">
+    <div>
+      <GIcon name="gt-plane-upload-black" />
+      <span class="text-[#000] text-[16px] ml-2 font-semibold">下载使用量</span>
+    </div>
+    <div class="flex mt-4 items-end">
+      <div class="text-[#2951E0] text-xl mr-8 font-semibold">
+        {{ total }}
+      </div>
+      <div class="num-empty" v-if="isEmpty"></div>
+      <div v-else id="download" style="width: 100%; height: 56px"></div>
+    </div>
+  </div>
+
+  <div v-else class="p-2 download-chart-mobile">
+    <div class="mb-4">
+      <span class="text-[#000] text-[16px] ml-2 font-semibold">下载使用量：</span>
+      <span class="text-[#2951E0] text-[16px] font-semibold">
+        {{ total }}
+      </span>
+    </div>
+    <div v-if="isEmpty" class="num-empty"></div>
+    <div v-else id="download" style="width: 100%; height: 56px"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref, nextTick } from 'vue';
+import { getRepoClone } from '@/api/repo';
+import { usePageResize } from '@/utils/hooks/usePageResize';
+import * as echarts from 'echarts';
+
+const props = defineProps<{
+  repoId: string;
+}>();
+
+const { widthType } = usePageResize();
+const isEmpty = ref(false);
+
+const initGitCode = () => {
+  const myChart = echarts.init(document.getElementById('download'));
+
+  myChart.setOption({
+    xAxis: {
+      type: 'category',
+      show: false,
+      boundaryGap: false
+    },
+    yAxis: {
+      type: 'value',
+      show: false
+    },
+    tooltip: {
+      trigger: 'axis',
+      renderMode: 'richText',
+      formatter: function(params) {
+        return `${params[0].value}`;
+      }
+    },
+    grid: {
+      left: 0,
+      bottom: 2,
+      top: 0,
+      right: 0,
+      height: 50
+    },
+    series: [
+      {
+        data: downloadList.value,
+        type: 'line',
+        symbol: 'none',
+        lineStyle: { color: '#2951E0' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(41, 81, 224, 0.24)' },
+            { offset: 1, color: 'rgba(41, 81, 224, 0.04)' }
+          ])
+        }
+      }
+    ]
+  });
+};
+
+const downloadList = ref([]);
+const total = ref(0);
+const getDownloadData = () => {
+  getRepoClone(props.repoId).then((data) => {
+    if (data?.data?.data) {
+      total.value = data.data.data[0]?.total_dl_cnt || 0;
+      data.data.data.forEach((item) => {
+        downloadList.value.unshift(item.today_dl_cnt || 0);
+      });
+    }
+    if (total.value === 0) {
+      isEmpty.value = true;
+    } else {
+      // 只有一天数据，前面加个0，展示折线
+      downloadList.value.length === 1 && (downloadList.value.unshift(0));
+      nextTick(() => {
+        initGitCode();
+      });
+    }
+  });
+};
+
+onMounted(() => {
+  getDownloadData();
+});
+</script>
+<style lang="scss" scoped>
+.download-chart-mobile {
+  border-radius: 4px;
+  border: 1px solid #E3E3EE;
+  background: #F1F1F8;
+}
+.num-empty {
+  height: 10px;
+  border-top: 2px solid #2951E0;
+  width: 100%;
+  background: linear-gradient(180deg, rgba(41, 81, 224, 0.12) 0%, rgba(41, 81, 224, 0.04) 100%);
+}
+</style>