Situation-Awareness-Platform-Frontend/src/views/Topic/index.vue

<template>
  <div class="page-topic flex">
    <div class="flex-shrink-0 mt-5" :key="updateKey">
      <DataPanel :empty="!topicDetail.topicName" :loading="topicDetail.topicName ? false : loading" skeleton :card="false" >
        <intro :topicInfo="topicDetail.topic_ext" :validLinks="validLinks"/>
      </DataPanel>
    </div>
    <div class="flex-auto mt-5 overflow-hidden g-card g-content-card topic-repo" :key="updateKey">
      <DataPanel :empty="!topicDetail.topicName" :loading="topicDetail.topicName ? false : loading" skeleton :card="false" >
        <div class="topic-intro">
          <div class="intro-top">
            <div class="title">
              #{{ topicDetail.topicName }}
            </div>
            <div class="desc">
              {{ topicDetail.topic_ext?.description }}
            </div>
          </div>
          <div class="intro-bottom">
              <div class="star">
                <d-button class="star-topic flex" @click.stop="toggleRepoStar(topicDetail)">
                  <!-- <Icon :name="isStar ? 'gt-starred-c' : 'gt-star'" :color="isStar ? '#FFCC00' : '#fff'" /> -->
                  <span class="btn-span">{{ topicDetail.isStar ? '取消Star' : 'Star' }}</span>
                </d-button>
              </div>
          </div>
        </div>
      </DataPanel>
      <div class="repo-list">
        <div class="repo-list-title">
          <div class="repo-filters">
            <div class="repo-tabs">
              <div class="catalog flex items-center">
                <div v-for="item in typeList" :key="item.type" :class="{active:curType === item.type}" class="catalog-item py-4 flex items-center text-CG600 cursor-pointer mr-8">
                  <Icon v-if="item.icon" :name="item.icon" size="14" :color="curType === item.type?'var(--color-CG900)':'var(--color-CG600)'"></Icon>
                  <span>{{item.label}}</span>
                </div>
              </div>
            </div>
            <div class="repo-filter">
              <!-- <div class="repo-filter-item">
                <d-select
                  class="repo-filter-select"
                  v-model="filter.lang"
                  :options="langList"
                  placeholder="语言"
                  filter
                  allow-clear
                >
                </d-select>
              </div> -->
              <div class="repo-filter-item">
                <d-select
                  class="repo-filter-select last-select"
                  v-model="filter.sort"
                  :options="options"
                  placeholder="排序"
                  allow-clear
                >
                </d-select>
              </div>
            </div>
          </div>
        </div>
        <reposList :topicId="topicDetail.topicId" :orderBy="filter.sort" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, toRef, watch } from 'vue';
import { useRoute } from 'vue-router';
import reposList from '@/views/Topic/components/repos.vue';
import intro from '@/views/Topic/components/intro.vue';
// import { useUserLang } from '@/views/User/hooks/useUserLang';
import { getTopicDetailByName, starTopic, unstarTopic } from '@/api/repo';
import { useUserInfo } from '@/views/User/hooks/useUserInfo';
import { emitEvent } from '@/utils/eventBus';
import router from '@/router';
// const { langList } = useUserLang('user_created');
const route = useRoute();
const curType = ref<'users' | 'repo' | 'group'>('repo');
const topicDetail = ref({
  topicName: '',
  topicId: '',
  isStar: false,
  topic_ext: {}
});
const filter = ref({
  type: null,
  lang: null,
  sort: 'updated_at,asc'
});
const typeList = toRef([
  {
    id: 1,
    icon: '',
    type: 'repo',
    label: '开源项目'
  }
  // ,
  // {
  //   id: 2,
  //   icon: '',
  //   type: 'users',
  //   label: '社区博客'
  // }
]);
const options = ref([
  {
    name: '名称升序',
    value: 'name,asc'
  },
  {
    name: '名称降序',
    value: 'name,desc'
  },
  {
    name: '最近创建',
    value: 'created_at,asc'
  },
  {
    name: '最早创建',
    value: 'created_at,desc'
  },
  {
    name: '最近活跃',
    value: 'updated_at,asc'
  },
  {
    name: '较早活跃',
    value: 'updated_at,desc'
  }
]);

const validLinks = toRef([
  {
    topic_id: '656da68597a5c33a99a51333',
    name: '人工智能'
  },
  {
    topic_id: '656da68597a5c33a99a51333',
    name: '人工智能'
  }
]);
const { userInfo } = useUserInfo();
const loading = ref(false);
const toggleRepoStar = ({ topicId, isStar }) => {
  if (!userInfo || !userInfo.username) {
    emitEvent('login');
    return false;
  }
  if (loading.value) return false;
  loading.value = true;
  if (!isStar) {
    starTopic(topicId)
      .then(() => {
        getTopicDetail();
      }).finally(() => {
        loading.value = false;
      });
  } else {
    unstarTopic(topicId)
      .then(() => {
        getTopicDetail();
      }).finally(() => {
        loading.value = false;
      });
  }
};
const getTopicDetail = async() => {
  loading.value = true;
  const res = await getTopicDetailByName(route.params?.topicName as string);
  if (res.data?.data) {
    topicDetail.value.topicId = res.data.data?.object_id || '';
    topicDetail.value.topicName = res.data.data?.name || '';
    topicDetail.value.isStar = res.data.data?.stared || false;
    topicDetail.value.topic_ext = res.data.data?.topic_ext || {};
  } else {
    router.replace('/404');
  }
  loading.value = false;
};

getTopicDetail();

const updateKey = ref(0);

watch(() => route.params?.topicName, () => {
  updateKey.value += 1;
  getTopicDetail();
}, {
  deep: true,
  flush: 'post'
});

</script>
<style lang="scss" scoped>
$g-page-user-repo-border-color-second: #e6e7e8;
$g-page-user-repo-border-radius: 4px;
.page-topic {
  :deep(.devui-menu-vertical) {
    border-right: none;
  }
  :deep(.devui-menu-vertical .devui-menu-item-select) {
    // background-color: transparent !important;
    span {
      color: var(--color-G900);
    }
  }
  :deep(.devui-menu-item-select) {
    font-weight: 500;
  }

  &-border {
    border-bottom: 1px solid var(--color-G200);
  }
  .topic-repo {
    box-shadow: 0px 2px 4px 0px rgba(37,45,59,0.08);
    border-radius: 3px;
    // min-height: 500px;
  }
  .topic-intro {
    .intro-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 20px 0px;
    }
    .title {
      color: var(--color-B600);
    }
    .desc {
      text-align: center;
      line-height: 20px;
      margin: 12px 0px 16px;
      padding: 0 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .intro-bottom {
      width: 100%;
      display: flex;
      justify-content: center;
      height: 52px;
      background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FB 100%);
    }
    .star {
      .star-topic {
        background-color:var(--color-B500);
        color:#fff;
        padding: 6px 12px;
        line-height: 20px;
      }
    }
  }
  .repo-list-title {
    padding: 0px 20px;
  }
  .repo-filters {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-G300);
    align-items: center;
    .repo-tabs {
      .catalog-item {
        border-bottom: 2px solid #fff;
        &:hover {
          border-bottom: 2px solid var(--color-G900);
        }
      }
      .active {
        color: var(--color-G900);
        font-weight: bold;
        border-bottom: 2px solid var(--color-G900);
      }
    }
    .repo-filter {
      display: flex;
    }
  }
  .repo-filter {
    // margin-top: 24px;
    &-item {
      :deep(.devui-input__wrapper) {
        border-color: $g-page-user-repo-border-color-second;
      }
    }
    &-item {
      margin-right: 0;
      &.filter-item-input {
        margin-right: 8px;
        flex: 1;
        overflow: hidden;
      }
      &.filter-item-selects {
        display: flex;
        align-items: center;
        border: 1px solid $g-page-user-repo-border-color-second;
        border-radius: $g-page-user-repo-border-radius;
        overflow: hidden;
      }
    }
    &-select {
      max-width: 100px;
      position: relative;
      &::after {
        content: '';
        height: 14px;
        width: 1px;
        background-color: $g-page-user-repo-border-color-second;
        display: block;
        position: absolute;
        top: 50%;
        right: -3px;
        z-index: 20;
        transform: translateY(-50%);
      }
      &.last-select {
        &::after {
          display: none;
        }
      }
      :deep(.devui-select__selection) {
        border: none;
        border-radius: 0;
      }
      :deep(.devui-select__input) {
        padding-left: 16px;
      }
    }
    // &-actions {
    //   display: flex;
    //   align-items: center;
    //   margin-left: 8px;
    // }
    // &-custom-button {
    //   &-text {
    //     position: relative;
    //     padding-left: 16px;
    //     margin-left: 10px;
    //     &::before {
    //       content: '';
    //       height: 20px;
    //       width: 1px;
    //       background-color: $g-page-user-repo-border-color-second;
    //       display: block;
    //       position: absolute;
    //       top: 50%;
    //       left: 0;
    //       z-index: 20;
    //       transform: translateY(-50%);
    //     }
    //   }
    //   &:hover {
    //     opacity: 0.85;
    //   }
    //   &:active {
    //     opacity: 0.9;
    //   }
    // }
    // &-title {
    //   font-size: 14px;
    //   font-weight: 500;
    //   color: $g-page-user-repo-color-second;
    //   margin-left: 20px;
    // }
    // &-content {
    //   overflow: hidden;
    //   .is-last {
    //     :deep(.g-repo-item) {
    //       border-bottom: none;
    //     }
    //   }
    //   :deep(.g-repo-item) {
    //     border-top: none;
    //     border-left: none;
    //     border-right: none;
    //     border-radius: 0;
    //     box-shadow: none;
    //   }
    // }
  }
}</style>