搜索结果列表页面开发

src/views/Dashboard/Projects/index.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { defineOptions, onMounted, ref, reactive } from 'vue';
+import { getUserProject } from '@/api/user';
+import type { projectItems } from '@/api/user/types';
+import { reqCatch } from '@/utils/catch';
+import { debounce } from 'lodash';
+import StarBtn from '@/components/StarBtn/StarBtn.vue';
+import { starInterface } from '@/components/StarBtn/starService';
+defineOptions({ name: 'projects' });
+
+const titleQuery = ref('');
+const loading = ref<boolean>(false);
+const list = ref<Array<projectItems>>([]);
+const total = ref(0);
+const pageQuery = reactive({
+  page: 1,
+  size: 10
+});
+const getProjectsList = async () => {
+  const params = {
+    page: pageQuery.page,
+    per_page: pageQuery.size,
+    search: titleQuery.value,
+    order_by: 'last_activity_at',
+    sort: 'desc',
+  };
+  loading.value = true;
+  const result = await reqCatch(getUserProject, params);
+  loading.value = false;
+  if (result.data) {
+    const project = result.data.data;
+    list.value = project.content;
+    total.value = project.total;
+  }
+  // xsz
+};
+function getStarInterface(project: projectItems) {
+  return starInterface(`${project.namespace_info.full_path}%2F${project.path}`);
+}
+const sizeClick = () => {
+  pageQuery.page = 1;
+  getProjectsList();
+};
+const indexChange = () => {
+  getProjectsList();
+};
+const changeFilterList = debounce(() => {
+  pageQuery.page = 1;
+  getProjectsList();
+}, 1000);
+const clearFilterList = () => {
+  pageQuery.page = 1;
+  getProjectsList();
+};
+onMounted(() => {
+  getProjectsList();
+});
+</script>
+<template>
+  <div class="dashboard-projects space-y-4 mt-32">
+    <section class="space-y-1 flex items-center">
+      <d-input class="flex-1" v-model="titleQuery" :maxlength="100" placeholder="搜索" @input="changeFilterList" clearable
+        @clear="clearFilterList">
+        <template #prefix>
+          <Icon name="gt-search" />
+        </template>
+      </d-input>
+    </section>
+    <DataPanel skeleton :loading="loading" :empty="!list?.length">
+      <section class="card-list">
+        <a :href="item.web_url" target="_blank" class="hover:text-[inherit] py-[16px] block px-[20px] card-item"
+          v-for="item in list" :key="item.id">
+          <div class="flex justify-between items-center">
+            <GText><p class="text-[16px] font-[600] hover:text-[#2951E0] hover:underline">{{ item.name_with_namespace }}</p></GText>
+            <div class="choice-item-stat">
+              <StarBtn :active="item.starred"
+                       :interface="getStarInterface(item)"
+                       @starChange="(active) => item.starred = active"></StarBtn>
+            </div>
+          </div>
+          <p class="text-[#9C9DB4] mb-[8px] mp-[4px] line-clamp-2 leading-[20px] break-words">{{ item.description }}</p>
+          <div class="choice-item-footer flex-1">
+            <div class="extented-item lang" v-if="item.main_repository_language[0]">
+              <span class="lang-color" :style="{ backgroundColor: item.main_repository_language[1] }"></span>
+              <d-tooltip :content="item.main_repository_language[0]">
+                <span>{{ item.main_repository_language[0] || ''
+                }}</span>
+              </d-tooltip>
+            </div>
+            <span class="extented-item-line" v-if="item.main_repository_language[0]"></span>
+            <div class="extented-item">
+              <GIcon name="gt-line-star" color="#9C9DB4"></GIcon>
+              <GNumber :number="Number(item.star_count || 0)" />
+            </div>
+            <span class="extented-item-line"></span>
+            <div class="extented-item">
+              <GIcon name="gt-line-fork" color="#9C9DB4"></GIcon>
+              <GNumber :number="Number(item.forks_count || 0)" />
+            </div>
+            <span class="extented-item-line"></span>
+            <div class="extented-item">
+              <GIcon name="gt-line-time" color="#9C9DB4"></GIcon>
+              <Time :time="item.last_activity_at"></Time>更新
+            </div>
+          </div>
+        </a>
+        <!-- <DashboardDiscussionListItem v-for="item in list" v-bind="item" :key="item.id"></DashboardDiscussionListItem> -->
+      </section>
+    </DataPanel>
+  </div>
+  <d-pagination v-if="!loading" auto-hide class="justify-center mt-20 mb-20" size="md" :pageSizeOptions="[10, 20, 50]"
+    :show-page-selector="false" :can-change-page-size="true" :max-items="5" v-model:pageSize="pageQuery.size"
+    v-model:pageIndex="pageQuery.page" :total="total" @page-size-change="sizeClick" @page-index-change="indexChange" />
+</template>
+<style lang="scss" scoped>
+.dashboard-projects {
+  ::v-deep .g-card {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
+.card-list {
+  border: 1px solid #E3E3EE;
+  border-radius: 4px;
+  border-bottom: none;
+
+  .card-item {
+    border-bottom: 1px solid #E3E3EE;
+  }
+}
+
+.choice-item-stat {
+  font-size: 16px;
+  font-family: NotoSansSC, NotoSansSC;
+  font-weight: 600;
+  @apply flex items-center gap-2 whitespace-nowrap;
+}
+
+.status-btn {
+  height: 32px;
+  border-radius: 4px;
+  border: 1px solid #E3E3EE;
+  background: #fff;
+  padding: 6px 16px;
+  cursor: pointer;
+
+  &:hover {
+    background: linear-gradient(0deg, rgba(188, 188, 208, 0.10) 0%, rgba(188, 188, 208, 0.10) 100%), var(--White, #FFF);
+  }
+}
+
+.choice-item-footer {
+  @apply flex items-center flex-wrap gap-2 leading-[21px] text-[#9C9DB4] whitespace-nowrap overflow-hidden text-ellipsis break-words;
+
+  .extented-item {
+    font-size: 14px;
+    @apply inline-flex items-center gap-2 text-ellipsis overflow-hidden;
+
+    &:last-of-type {
+      @apply mr-0;
+    }
+
+    &.lang {
+      vertical-align: top;
+    }
+  }
+
+  .extented-item-line {
+    background-color: #E3E3EE;
+    width: 1px;
+    height: 8px;
+    display: inline-block;
+  }
+
+  .lang-color {
+    background-color: var(--color-danger);
+    @apply inline-block w-[10px] h-[10px];
+  }
+}
+</style>