搜索结果列表页面开发

src/views/Dashboard/Discussion/Created/index.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import DashboardDiscussionListItem from '@/components/Discussion/Dashboard/DashboardDiscussionListItem.vue';
+import type { discussionListItemType } from '@/api/discussion/types';
+import { reactive, shallowRef, watch, onMounted, ref, computed } from 'vue';
+import { myCreatedDiscuss, myJoineddDiscuss } from '@/api/discussion';
+import debounce from 'lodash/debounce';
+
+defineOptions({
+  name: 'DiscussionCreated'
+});
+
+// 获取讨论列表
+const loading = ref(false);
+let pageQuery = reactive({
+  page: 1,
+  size: 10
+});
+const titleQuery = ref('');
+const total = ref(0);
+const list = shallowRef<discussionListItemType[]>([]);
+const disscussTypeList = ref([
+  {
+    value: 'created_by_me',
+    name: '我创建的'
+  },
+  {
+    value: 'join_to_me',
+    name: '我参与的'
+  }
+]);
+const disscussType = ref('created_by_me');
+const disscussTypeChange = () => {
+  pageQuery = { page: 1, size: 10 };
+  // searchParams.value.page = pageQuery.page;
+  // searchParams.value.size = pageQuery.size;
+  switch (disscussType.value) {
+    case 'created_by_me':
+      fetchData();
+      break;
+    case 'join_to_me':
+      fetchJoinData();
+      break;
+  };
+};
+const fetchJoinData = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  const res = await myJoineddDiscuss({ ...pageQuery, title: titleQuery.value });
+  if (!res.error) {
+    const resData = res?.data?.data;
+    list.value = resData.records;
+    total.value = resData.total;
+  }
+  loading.value = false;
+};
+const fetchData = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  const res = await myCreatedDiscuss({ ...pageQuery, title: titleQuery.value });
+  if (!res.error) {
+    const resData = res?.data?.data;
+    list.value = resData.records;
+    total.value = resData.total;
+  }
+  loading.value = false;
+};
+const pageIndexChange = () => {
+  switch (disscussType.value) {
+    case 'created_by_me':
+      fetchData();
+      break;
+    case 'join_to_me':
+      fetchJoinData();
+      break;
+  };
+};
+// const debouncedFetchData = debounce(() => fetchData(), 300);
+
+// const searchParams = computed(() => {
+//   return {
+//     title: titleQuery.value,
+//     page: pageQuery.page,
+//     size: pageQuery.size
+//   };
+// });
+
+// watch(titleQuery, () => {
+//   pageQuery.page = 1;
+// });
+
+// watch(searchParams, debouncedFetchData);
+const titleChange = debounce(() => {
+  disscussTypeChange();
+}, 500);
+const handleTitleChange = (e: KeyboardEvent) => {
+  // 回车触发
+  if (e.key === 'Enter') {
+    disscussTypeChange();
+  }
+};
+const bodyClick = () => {
+  // document.body.click();
+  pageQuery.page = 1;
+  pageIndexChange();
+};
+const clearInput = () => {
+  titleQuery.value = '';
+  titleChange();
+};
+onMounted(async () => {
+  await fetchData();
+});
+</script>
+
+<template>
+  <div class="dashboard-discussion space-y-4 mt-24">
+    <section class="space-y-1 flex items-center">
+      <d-select class="discuss-select" v-model="disscussType" :options="disscussTypeList"
+        @value-change="disscussTypeChange"></d-select>
+      <d-input class="flex-1" v-model="titleQuery" placeholder="搜索讨论" @keydown="handleTitleChange" clearable @clear="clearInput">
+        <template #prefix>
+          <Icon name="gt-search" />
+        </template>
+      </d-input>
+    </section>
+    <DataPanelV2 skeleton :loading="loading" :empty="!list?.length">
+      <section class="list">
+        <DashboardDiscussionListItem v-for="item in list" v-bind="item" :key="item.id"></DashboardDiscussionListItem>
+      </section>
+    </DataPanelV2>
+  </div>
+  <d-pagination class="justify-center mt-20 mb-20" size="md" :page-size-options="[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" total-item-text="总计" :can-view-total="true" @page-size-change="bodyClick" auto-hide
+    @page-index-change="pageIndexChange" />
+</template>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+:deep(.devui-input) {
+  margin-top: 0 !important;
+}
+.discuss-select {
+  @apply w-[98px] mr-[16px]
+}
+
+.list>* {
+  @apply border-t-0 rounded-t-none rounded-b-none;
+}
+
+.list>*:first-child {
+  @apply border-t rounded-t;
+}
+
+.list>*:last-child {
+  @apply border-b-0;
+}
+</style>

src/views/Dashboard/Discussion/Joined/index.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import DashboardDiscussionListItem from '@/components/Discussion/Dashboard/DashboardDiscussionListItem.vue';
+import type { discussionListItemType } from '@/api/discussion/types';
+import { reactive, shallowRef, watch, onMounted, ref, computed } from 'vue';
+import { myJoineddDiscuss } from '@/api/discussion';
+import debounce from 'lodash/debounce';
+
+defineOptions({
+  name: 'DiscussionJoined'
+});
+
+// 获取讨论列表
+const loading = ref(false);
+const pageQuery = reactive({
+  page: 1,
+  size: 10
+});
+const titleQuery = ref('');
+const total = ref(0);
+const list = shallowRef<discussionListItemType[]>([]);
+const fetchData = async() => {
+  if (loading.value) return;
+  loading.value = true;
+  const res = await myJoineddDiscuss(searchParams.value);
+  if (!res.error) {
+    const resData = res?.data?.data;
+    list.value = resData.records;
+    total.value = resData.total;
+  }
+  loading.value = false;
+};
+
+const debouncedFetchData = debounce(() => fetchData(), 300);
+
+const searchParams = computed(() => {
+  return {
+    title: titleQuery.value,
+    page: pageQuery.page,
+    size: pageQuery.size
+  };
+});
+
+watch(titleQuery, () => {
+  pageQuery.page = 1;
+});
+
+watch(searchParams, debouncedFetchData);
+
+const bodyClick = () => {
+  document.body.click();
+};
+
+onMounted(async() => {
+  await fetchData();
+});
+</script>
+
+<template>
+  <div class="dashboard-discussion space-y-4 mt-32">
+    <section class="space-y-1">
+      <d-input v-model="titleQuery" placeholder="搜索讨论">
+        <template #prefix>
+          <Icon name="gt-search" />
+        </template>
+      </d-input>
+    </section>
+    <DataPanel skeleton :loading="loading" :empty="!list?.length">
+      <section class="list g-content-card">
+        <DashboardDiscussionListItem v-for="item in list" v-bind="item" :key="item.id"></DashboardDiscussionListItem>
+      </section>
+    </DataPanel>
+  </div>
+  <d-pagination
+    class="justify-center mt-20 mb-20"
+    size="md"
+    :page-size-options="[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"
+    total-item-text="总计"
+    :can-view-total="true"
+    @page-size-change="bodyClick"
+    auto-hide
+  />
+</template>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+$g-commit-border-radius: 0.25rem;
+
+.dashboard-discussion {
+  // @apply max-w-5xl;
+}
+.list > * {
+  @apply border-t-0 rounded-t-none rounded-b-none;
+}
+.list > *:first-child {
+  @apply border-t rounded-t;
+}
+.list > *:last-child {
+  @apply rounded-b;
+}
+.list.g-content-card {
+  overflow: hidden;
+}
+</style>

src/views/Dashboard/Issue/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="mt-[24px]">
+    <!-- issue List -->
+    <IssueFilterList type="personal" :searchParams="{scope}" ref="table" class="mt-2" :filterOption="['sort']" :key="scope"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import IssueFilterList from '@/views/Repo/components/IssueFilterList/index.vue';
+const route = useRoute();
+const table = ref();
+const scope = ref('');
+
+watch(() => route.name, (_new) => {
+  switch (_new) {
+    case 'issues':
+      scope.value = 'created_by_me';
+      break;
+    case 'issuesAssigned':
+      scope.value = 'assigned_to_me';
+      break;
+    case 'issuesMentioned':
+
+      break;
+    default:
+      scope.value = 'all';
+      break;
+  }
+}, { immediate: true });
+
+</script>
+
+<style lang="scss" scoped>
+
+.my-issue-list{
+  margin-top: 24px;
+}
+</style>

src/views/Dashboard/Merge/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <MergreFilterList type="personal" :search-params="{scope}" class="mt-[24px]" :key="scope"/>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'MY-MR' });
+import { watch, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import MergreFilterList from '@/views/Repo/components/MergeFilterList/index.vue';
+const scope = ref('');
+const route = useRoute();
+
+watch(() => route.name, (_new) => {
+  switch (_new) {
+    case 'merge':
+      scope.value = 'created_by_me';
+      break;
+    case 'mergeAssigned':
+      scope.value = 'assigned_to_me';
+      break;
+    case 'mergeMentioned':
+      // @ 我的
+      break;
+    case 'mergeReviewed':
+      scope.value = 'need_my_review';
+      break;
+    default:
+      scope.value = 'all';
+      break;
+  }
+}, { immediate: true });
+</script>

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>