repos square

web_src/vuepages/langs/config/en-US.js

@@ -157,7 +157,7 @@ const en = {
     computeCluster: 'Compute Cluster',
     resourceSpecification: 'Resource Specification',
     lastUpdateTime: 'Last Update Time',
-    resSceneDeleteConfirm: 'Are you sure to delete the current Resource Scene?',    
+    resSceneDeleteConfirm: 'Are you sure to delete the current Resource Scene?',
     resourceSpecificationIsAvailable: 'Specification Is Available',
     resourceSpecificationIsAvailableAll: 'Specification Is Available(All)',
     available: 'Available',
@@ -177,22 +177,22 @@ const en = {
     Activated: 'Activated',
     notActive: 'Not active',
   },
-  tranformImageFailed:'Picture desensitization failed',
-  originPicture:'Origin picture',
-  desensitizationPicture:'Desensitization picture',
-  desensitizationObject:'Desensitization object',
-  example:'Example',
-  startDesensitization:'Start desensitization',
-  all:'All',
-  onlyFace:'Only face',
-  onlyLicensePlate:'Only license plate',
-  dragThePictureHere:'Drag the picture here',
-  or:' or ',
-  clickUpload:'Click upload',
-  dataDesensitizationModelExperience:'Data desensitization model experience',
-  dataDesensitizationModelDesc:'Use AI technology to desensitize the face and license plate number in the picture. For more information about this model, please visit the project',
-  limitFilesUpload:'Only jpg/jpeg/png files can be uploaded',
-  limitSizeUpload:'The size of the uploaded file cannot exceed 20M!',
+  tranformImageFailed: 'Picture desensitization failed',
+  originPicture: 'Origin picture',
+  desensitizationPicture: 'Desensitization picture',
+  desensitizationObject: 'Desensitization object',
+  example: 'Example',
+  startDesensitization: 'Start desensitization',
+  all: 'All',
+  onlyFace: 'Only face',
+  onlyLicensePlate: 'Only license plate',
+  dragThePictureHere: 'Drag the picture here',
+  or: ' or ',
+  clickUpload: 'Click upload',
+  dataDesensitizationModelExperience: 'Data desensitization model experience',
+  dataDesensitizationModelDesc: 'Use AI technology to desensitize the face and license plate number in the picture. For more information about this model, please visit the project',
+  limitFilesUpload: 'Only jpg/jpeg/png files can be uploaded',
+  limitSizeUpload: 'The size of the uploaded file cannot exceed 20M!',
   modelManage: {
     modelManage: 'Model management',
     modelName: 'Model name',
@@ -254,6 +254,36 @@ const en = {
     deleteModelFileConfirmTips: 'Are you sure you want to delete the current model file?',
     modelFileDeleteFailed: 'Model file delete failed',
   },
+  repos: {
+    activeOrganization: 'Active Organization',
+    activeUsers: 'Active Users',
+    follow: 'Follow',
+    unFollow: 'Unfollow',
+    selectedFields: 'Recommend Repositories',
+    mostPopular: 'Most Popular',
+    mostActive: 'Most Active',
+    newest: 'Newest',
+    recentlyUpdated: 'Recently Updated',
+    mostStars: 'Most Stars',
+    mostForks: 'Most Forks',
+    mostDatasets: 'Most Datasets',
+    mostAiTasks: 'Most Ai Tasks',
+    mostModels: 'Most Models',
+    dataset: 'Datasets',
+    model: 'Models',
+    aiTask: 'AI Tasks',
+    updated: 'Updated',
+    contributors: 'Contributors',
+    searchRepositories: 'Search Repositories',
+    search: 'Search',
+    allFields: 'All Fields',
+    preferred: 'Preferred',
+    openIIncubation: 'OpenI Incubation',
+    hotPapers: 'Hot Papers',
+    watch: 'Watch',
+    star: 'Star',
+    fork: 'Fork',
+  }
 }
 
 export default en;

web_src/vuepages/langs/config/zh-CN.js

@@ -177,22 +177,22 @@ const zh = {
     Activated: '已激活',
     notActive: '未激活',
   },
-  tranformImageFailed:'图片脱敏失败',
-  originPicture:'原始图片',
-  desensitizationPicture:'脱敏图片',
-  desensitizationObject:'脱敏对象',
-  example:'示例',
-  startDesensitization:'开始处理',
-  all:'全部',
-  onlyFace:'仅人脸',
-  onlyLicensePlate:'仅车牌',
-  dragThePictureHere:'拖动图片到这里',
-  or:'或',
-  clickUpload:'点击上传',
-  dataDesensitizationModelExperience:'数据脱敏模型体验',
-  dataDesensitizationModelDesc:'利用人工智能AI技术，把图片中的人脸、车牌号码进行脱敏处理。该模型更多信息请访问项目',
-  limitFilesUpload:'只能上传 jpg/jpeg/png 格式的文件',
-  limitSizeUpload:'上传文件大小不能超过 20M !',
+  tranformImageFailed: '图片脱敏失败',
+  originPicture: '原始图片',
+  desensitizationPicture: '脱敏图片',
+  desensitizationObject: '脱敏对象',
+  example: '示例',
+  startDesensitization: '开始处理',
+  all: '全部',
+  onlyFace: '仅人脸',
+  onlyLicensePlate: '仅车牌',
+  dragThePictureHere: '拖动图片到这里',
+  or: '或',
+  clickUpload: '点击上传',
+  dataDesensitizationModelExperience: '数据脱敏模型体验',
+  dataDesensitizationModelDesc: '利用人工智能AI技术，把图片中的人脸、车牌号码进行脱敏处理。该模型更多信息请访问项目',
+  limitFilesUpload: '只能上传 jpg/jpeg/png 格式的文件',
+  limitSizeUpload: '上传文件大小不能超过 20M !',
   modelManage: {
     modelManage: '模型管理',
     modelName: '模型名称',
@@ -254,6 +254,36 @@ const zh = {
     deleteModelFileConfirmTips: '请确认是否删除当前模型文件？',
     modelFileDeleteFailed: '模型文件删除失败',
   },
+  repos: {
+    activeOrganization: '活跃组织',
+    activeUsers: '活跃用户',
+    follow: '关注',
+    unFollow: '取消关注',
+    selectedFields: '精选领域',
+    mostPopular: '近期热门',
+    mostActive: '近期活跃',
+    newest: '最近创建',
+    recentlyUpdated: '最近更新',
+    mostStars: '点赞最多',
+    mostForks: '派生最多',
+    mostDatasets: '数据集最多',
+    mostAiTasks: 'AI任务最多',
+    mostModels: '模型最多',
+    dataset: '数据集',
+    model: '模型：',
+    aiTask: 'AI任务：',
+    updated: '最后更新于',
+    contributors: '贡献者',
+    searchRepositories: '搜项目',
+    search: '搜索',
+    allFields: '全部领域',
+    preferred: '项目优选',
+    openIIncubation: '启智孵化管道',
+    hotPapers: '热门论文项目',
+    watch: '关注',
+    star: '点赞',
+    fork: '派生',
+  },
 }
 
 export default zh;

web_src/vuepages/pages/repos/components/ActiveOrgs.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="title">
         <i style="margin-left:10px;margin-right:8px;font-size:20px;" class="ri-blaze-line"></i>
-        <span>活跃组织</span>
+        <span>{{ $t('repos.activeOrganization') }}</span>
       </div>
       <div class="content">
         <div class="item" v-for="(item, index) in list" :key="index">
@@ -22,7 +22,6 @@
 </template>
 
 <script>
-
 import { getActiveOrgs } from '~/apis/modules/repos';
 
 export default {
@@ -47,6 +46,7 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="less">
 .title {
   height: 43px;

web_src/vuepages/pages/repos/components/ActiveUsers.vue

@@ -3,20 +3,24 @@
     <div class="container">
       <div class="title">
         <i style="margin-left:10px;margin-right:8px;font-size:20px;" class="ri-account-pin-circle-line"></i>
-        <span>活跃用户</span>
+        <span>{{ $t('repos.activeUsers') }}</span>
       </div>
       <div class="content">
         <div class="item" v-for="(item, index) in list" :key="index">
           <div class="item-l">
             <img class="avatar" :src="item.User.RelAvatarLink">
-            <div class="name-c"><a class="name" :href="`/${item.User.Name}`"
-                :title="(item.User.FullName || item.User.Name)">{{ item.User.FullName || item.User.Name
-                }}</a></div>
+            <div class="name-c">
+              <a class="name" :href="`/${item.User.Name}`" :title="(item.User.FullName || item.User.Name)">
+                {{ item.User.FullName || item.User.Name }}
+              </a>
+            </div>
           </div>
           <div class="item-r">
             <template v-if="item.ShowButton">
-              <a class="op-btn" v-if="!item.Followed" href="javascript:;" @click="following(item, index, true)">关注</a>
-              <a class="op-btn" v-if="item.Followed" href="javascript:;" @click="following(item, index, false)">取消关注</a>
+              <a class="op-btn" v-if="!item.Followed" href="javascript:;" @click="following(item, index, true)">
+                {{ $t('repos.follow') }}</a>
+              <a class="op-btn" v-if="item.Followed" href="javascript:;" @click="following(item, index, false)">
+                {{ $t('repos.unFollow') }}</a>
             </template>
           </div>
         </div>
@@ -24,8 +28,8 @@
     </div>
   </div>
 </template>
-<script>
 
+<script>
 import { getActiveUsers, followingUsers } from '~/apis/modules/repos';
 
 export default {
@@ -62,6 +66,7 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="less">
 .title {
   height: 43px;

web_src/vuepages/pages/repos/components/RecommendRepos.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="repo-selected-bg">
     <div class="ui container _repo_container _repo-selected-container" style="padding-top:3rem;padding-bottom:4rem;">
-      <div class="_repo_title"><span>精选领域</span></div>
+      <div class="_repo_title"><span>{{ $t('repos.selectedFields') }}</span></div>
       <div class="_repo-selected-list">
         <div class="swiper-wrapper" id="_repo-selected"></div>
         <div class="swiper-pagination"></div>
@@ -9,16 +9,13 @@
     </div>
   </div>
 </template>
-<script>
 
+<script>
 import { getHomePageData } from '~/apis/modules/repos';
-// import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const';
 
 export default {
   name: "RecommendRepos",
-  props: {
-    // visible: { type: Boolean, default: false },
-  },
+  props: {},
   components: {},
   data() {
     return {
@@ -48,12 +45,12 @@ export default {
             if (i >= 4) break;
             var repo = repos[i];
             html += `<div class="ui fluid card">
-                    <div class="content">
-                        ${repo["Avatar"] ? `<img class="left floated mini ui image" src="${repo["Avatar"]}">` : `<img class="left floated mini ui image" avatar="${repo["OwnerName"]}">`}
-                        <a class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="/${repo["OwnerName"]}/${repo["Name"]}" title="${repo["Alias"]}">${repo["Alias"]}</a>
-                        <div class="description nowrap-2" style="rgba(136,136,136,1);;font-size:12px;" title="${repo["Description"]}">${repo["Description"]}</div>
-                      </div>
-                </div>`;
+              <div class="content">
+                ${repo["Avatar"] ? `<img class="left floated mini ui image" src="${repo["Avatar"]}">` : `<img class="left floated mini ui image" avatar="${repo["OwnerName"]}">`}
+                <a class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="/${repo["OwnerName"]}/${repo["Name"]}" title="${repo["Alias"]}">${repo["Alias"]}</a>
+                <div class="description nowrap-2" style="rgba(136,136,136,1);;font-size:12px;" title="${repo["Description"]}">${repo["Description"]}</div>
+              </div>
+            </div>`;
           }
           html += '</div>'
         }
@@ -103,6 +100,7 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="less">
 .repo-selected-bg {
   background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.11899999999999993%2C%201.217%2C%20-0.24039506172839506%2C%200.11899999999999993%2C%200.269%2C%20-0.22)%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.47%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23e5e7eb%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");

web_src/vuepages/pages/repos/components/ReposFilters.vue

@@ -5,11 +5,8 @@
     </div>
   </div>
 </template>
-<script>
-
-// import { addResQueue, updateResQueue } from '~/apis/modules/resources';
-// import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const';
 
+<script>
 export default {
   name: "ReposFilters",
   props: {
@@ -21,31 +18,31 @@ export default {
       focusIndex: 0,
       list: [{
         key: 'mostpopular',
-        label: '近期热门',
+        label: this.$t('repos.mostPopular'),
       }, {
         key: 'mostactive',
-        label: '近期活跃',
+        label: this.$t('repos.newest'),
       }, {
         key: 'newest',
-        label: '最近创建',
+        label: this.$t('repos.newest'),
       }, {
         key: 'recentupdate',
-        label: '最近更新',
+        label: this.$t('repos.recentlyUpdated'),
       }, {
         key: 'moststars',
-        label: '点赞最多',
+        label: this.$t('repos.mostStars'),
       }, {
         key: 'mostforks',
-        label: '派生最多',
+        label: this.$t('repos.mostForks'),
       }, {
         key: 'mostdatasets',
-        label: '数据集最多',
+        label: this.$t('repos.mostDatasets'),
       }, {
         key: 'mostaitasks',
-        label: 'AI任务最多',
+        label: this.$t('repos.mostAiTasks'),
       }, {
         key: 'mostmodels',
-        label: '模型最多',
+        label: this.$t('repos.mostModels'),
       }]
     };
   },
@@ -59,10 +56,11 @@ export default {
       this.focusIndex = index >= 0 ? index : 0;
     }
   },
-  mounted() {   
+  mounted() {
   },
 };
 </script>
+
 <style scoped lang="less">
 .item {
   height: 40px;

web_src/vuepages/pages/repos/components/ReposItem.vue

@@ -14,9 +14,15 @@
               </a>
             </div>
             <span class="title-r">
-              <span class="t-item"><i class="ri-eye-line"></i><span>{{ data.NumWatches }}</span></span>
-              <span class="t-item"><i class="ri-star-line"></i><span>{{ data.NumStars }}</span></span>
-              <span class="t-item">
+              <span class="t-item" :title="$t('repos.watch')">
+                <i class="ri-eye-line"></i>
+                <span>{{ data.NumWatches }}</span>
+              </span>
+              <span class="t-item" :title="$t('repos.star')">
+                <i class="ri-star-line"></i>
+                <span>{{ data.NumStars }}</span>
+              </span>
+              <span class="t-item" :title="$t('repos.fork')">
                 <svg class="svg octicon-repo-forked" width="12" height="12" aria-hidden="true">
                   <use xlink:href="#octicon-repo-forked"></use>
                 </svg>
@@ -32,17 +38,17 @@
           <div class="repo-datas">
             <span class="repo-datas-item" v-show="(data.DatasetCnt > 0)">
               <i class="ri-stack-line"></i>
-              <span class="label">数据集：</span>
+              <span class="label">{{ $t('repos.dataset') }}：</span>
               <span class="value">{{ data.DatasetCnt }}</span>
             </span>
             <span class="repo-datas-item" v-show="(data.ModelCnt > 0)">
               <i class="ri-send-plane-2-line"></i>
-              <span class="label">模型：</span>
+              <span class="label">{{ $t('repos.model') }}：</span>
               <span class="value">{{ data.ModelCnt }}</span>
             </span>
             <span class="repo-datas-item" v-show="(data.AiTaskCnt > 0)">
               <i class="ri-order-play-line"></i>
-              <span class="label">AI任务：</span>
+              <span class="label">{{ $t('repos.aiTask') }}：</span>
               <span class="value">{{ data.AiTaskCnt }}</span>
             </span>
           </div>
@@ -50,7 +56,7 @@
       </div>
       <div class="item-bottom">
         <div>
-          <span>最后更新于</span>
+          <span>{{ $t('repos.updated') }}</span>
           <el-tooltip effect="dark" :content="dateFormat(data.UpdatedUnix)" placement="top-start">
             <span>{{ calcFromNow(data.UpdatedUnix) }}</span>
           </el-tooltip>
@@ -58,7 +64,8 @@
               :style="{ backgroundColor: data.PrimaryLanguage.Color }"></i>{{ data.PrimaryLanguage.Language }}</span>
         </div>
         <div class="contributors">
-          <span class="contributors-count">贡献者</span><span> 17+ </span>
+          <span class="contributors-count">{{ $t('repos.contributors') }}&nbsp;</span>
+          <span> 17+ </span>
           <span class="contributors-avatar">
             <img class="avatar" src="/user/avatar/Itx003/-1">
             <img class="avatar" src="/user/avatar/Itx003/-1">
@@ -71,8 +78,8 @@
     </div>
   </div>
 </template>
-<script>
 
+<script>
 import relativeTime from 'dayjs/plugin/relativeTime';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import 'dayjs/locale/zh-cn';
@@ -93,7 +100,6 @@ export default {
   components: {},
   data() {
     return {
-      aaa: false,
       contributors: [],
     };
   },
@@ -102,13 +108,14 @@ export default {
       return dayjs(unix * 1000).fromNow();
     },
     dateFormat(unix) {
-      return lang == 'zh-CN' ? dayjs(unix * 1000).format('YYYY年MM月DD日 hh时mm分ss秒') :
-        dayjs(unix * 1000).format('ddd, D MMM YYYY hh:mm:ss [CST]');
+      return lang == 'zh-CN' ? dayjs(unix * 1000).format('YYYY年MM月DD日 HH时mm分ss秒') :
+        dayjs(unix * 1000).format('ddd, D MMM YYYY HH:mm:ss [CST]');
     }
   },
   mounted() { },
 };
 </script>
+
 <style scoped lang="less">
 .item {
   width: 100%;
@@ -199,6 +206,9 @@ export default {
 
 .content .tags {
   margin-bottom: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .content .tag {
@@ -210,7 +220,6 @@ export default {
   margin-right: 8px;
 
   &.tag-focus {
-    // background-color: rgb(245, 182, 110);
     color: red;
   }
 }

web_src/vuepages/pages/repos/components/ReposList.vue

@@ -95,11 +95,8 @@ export default {
   mounted() { },
 };
 </script>
-<style scoped lang="less">
-.list-container {}
-
-.repos-item-container {}
 
+<style scoped lang="less">
 .center {
   text-align: center;
 }

web_src/vuepages/pages/repos/components/SearchBar.vue

@@ -3,7 +3,8 @@
     <div class="_repo_search">
       <div class="_repo_search_input_c">
         <div class="_repo_search_input">
-          <input type="text" v-model="searchInputValue" placeholder="搜项目" @keyup.enter="search" />
+          <input type="text" v-model="searchInputValue" :placeholder="$t('repos.searchRepositories')"
+            @keyup.enter="search" />
         </div>
         <div class="_repo_search_btn" @click="search">
           <svg xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +25,7 @@
               </path>
             </g>
           </svg>
-          <span style="margin-left:10px;">搜索</span>
+          <span style="margin-left:10px;">{{ $t('repos.search') }}</span>
         </div>
       </div>
       <div class="_repo_search_label">
@@ -33,7 +34,7 @@
           :key="index">{{ item.v }}</a>
         <a v-if="type == 'search'" href="javascript:;" @click="changeTopic({ k: '', v: '' })"
           style="color:#40485b;font-weight:bold;"
-          :style="{ backgroundColor: selectTopic == '' ? selectedColor : defaultColor }">全部领域</a>
+          :style="{ backgroundColor: selectTopic == '' ? selectedColor : defaultColor }">{{ $t('repos.allFields') }}</a>
         <a v-if="type == 'search'" href="javascript:;" @click="changeTopic(item)" style="color:#40485b;"
           :style="{ backgroundColor: selectTopic.toLocaleLowerCase() == item.k ? selectedColor : defaultColor }"
           v-for="(item, index) in topics" :key="index">{{ item.v }}</a>
@@ -41,8 +42,8 @@
     </div>
   </div>
 </template>
-<script>
 
+<script>
 import { getPromoteData } from '~/apis/modules/common';
 const COLOR_LIST = [
   'rgb(255, 104, 104)',
@@ -149,6 +150,7 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="less">
 ._repo_search {
   margin: 54px 0;

web_src/vuepages/pages/repos/components/SquareTop.vue

@@ -33,17 +33,14 @@
     </div>
   </div>
 </template>
-<script>
 
+<script>
 import { getPromoteData } from '~/apis/modules/common';
 import { getReposSquareTabData } from '~/apis/modules/repos';
-// import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const';
 
 export default {
   name: "SquareTop",
-  props: {
-    // visible: { type: Boolean, default: false },
-  },
+  props: {},
   components: {},
   data() {
     return {
@@ -52,15 +49,15 @@ export default {
       tabs: [{
         key: 'preferred',
         icon: 'ri-fire-line',
-        label: '项目优选',
+        label: this.$t('repos.preferred'),
       }, {
         key: 'incubation',
         icon: 'ri-award-line',
-        label: '启智孵化管道',
+        label: this.$t('repos.openIIncubation'),
       }, {
         key: 'hot-paper',
         icon: 'ri-file-damage-line',
-        label: '热门论文项目',
+        label: this.$t('repos.hotPapers'),
       }],
       bannerData: [],
     };
@@ -101,7 +98,7 @@ export default {
           if (dataJ === undefined) break;
           html += `<div class="_repo_sw_card">
 						<div class="_repo_sw_card_title _repo_nowrap"><a href="/${dataJ.OwnerName}/${dataJ.Name}" title="${dataJ.Name}">${dataJ.Name}</a></div>
-						<div class="_repo_sw_card_descr _repo_nowrap_line_2">${dataJ.Description}</div>
+						<div class="_repo_sw_card_descr _repo_nowrap_line_2" title="${dataJ.Description}">${dataJ.Description}</div>
 						<div class="_repo_sw_card_label _repo_nowrap">`
           const topics = dataJ.Topics || [];
           for (let k = 0, kLen = topics.length; k < kLen; k++) {
@@ -154,6 +151,7 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="less">
 ._repo_container_bg {
   width: 100%;

web_src/vuepages/pages/repos/search/index.vue

@@ -27,14 +27,11 @@
 </template>
 
 <script>
-
 import SearchBar from '../components/SearchBar.vue';
 import ReposFilters from '../components/ReposFilters.vue';
 import ReposList from '../components/ReposList.vue';
 import ActiveUsers from '../components/ActiveUsers.vue';
 import ActiveOrgs from '../components/ActiveOrgs.vue';
-
-// import { saveLocalModel, getModelInfoByName, modifyModel } from '~/apis/modules/modelmanage';
 import { getUrlSearchParams } from '~/utils';
 
 export default {

web_src/vuepages/pages/repos/square/index.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script>
-
 import SquareTop from '../components/SquareTop.vue';
 import SearchBar from '../components/SearchBar.vue';
 import RecommendRepos from '../components/RecommendRepos.vue';