Merge remote-tracking branch 'github/main' into csghub__ut-vue-models

frontend/setupTests.js

@@ -1,6 +1,7 @@
 import { config } from '@vue/test-utils';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import CsgButton from '@/components/shared/CsgButton.vue';  
 import SvgIcon from '@/components/shared/SvgIcon.vue';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import { createI18n } from 'vue-i18n';
@@ -23,6 +24,7 @@ config.global.plugins = [ElementPlus, i18n, pinia];
 // register global components
 config.global.components = {
     SvgIcon,
+    CsgButton,
     ...ElementPlusIconsVue
 };
 

frontend/src/components/__tests__/datasets/NewDataset.spec.js

@@ -12,16 +12,14 @@ vi.mock('../../../stores/UserStore', () => ({
 }));
 
 // Mock useFetchApi
-const mockPost = vi.fn().mockResolvedValue({
-                   json: async () => ({
-                     data: { value: { data: { path: 'testuser/testdataset' } } },
-                     error: { value: null }
-                   })
-                 });
-
 vi.mock('../../../packs/useFetchApi', () => ({
   default: () => ({
-    post: () => mockPost(),
+    post: () => ({
+      json: () => Promise.resolve({
+        data: { value: { data: { path: 'testuser/testdataset' } } },
+        error: { value: null }
+      })
+    })
   })
 }));
 
@@ -70,28 +68,25 @@ describe("NewDataset", () => {
   });
 
   describe("form validation", () => {
+    const validateForm = () => {
+      return new Promise(resolve => {
+        wrapper.vm.$refs.dataFormRef.validate(valid => resolve(valid))
+      })
+    }
     it("validates required fields", async() => {
-      await wrapper.find('button').trigger('click');
-
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const formErrors = wrapper.findAll('.el-form-item__error');
-      expect(formErrors.length).toBeGreaterThan(0);
+      expect(await validateForm()).toBe(false)
     })
 
     it("accepts invalid dataset name", async () => {
       wrapper.vm.dataForm.name = '**__invalid-name'
-      await wrapper.find('button').trigger('click');
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const errorMessage = wrapper.find('.el-form-item__error');
-      expect(errorMessage.exists()).toBe(true);
+      await wrapper.vm.$nextTick()
+      expect(await validateForm()).toBe(false)
     });
 
     it("accepts valid dataset name", async () => {
       wrapper.vm.dataForm.name = 'valid-name'
-      await wrapper.find('button').trigger('click');
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const errorMessage = wrapper.find('.el-form-item__error');
-      expect(errorMessage.exists()).toBe(false);
+      await wrapper.vm.$nextTick()
+      expect(await validateForm()).toBe(true)
     });
   })
 

frontend/src/components/application_spaces/ApplicationSpaceDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :private="applicationSpace.private"

frontend/src/components/application_spaces/ApplicationSpaceItem.vue

@@ -66,7 +66,7 @@
       v-if="getComputed.taskTag"
       class="flex gap-2 my-2 overflow-x-auto no-scrollbar"
     >
-      <span class="max-w-[80px] xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
+      <span class="w-fit xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
         {{ getComputed.taskTag }}
       </span>
       <span>

frontend/src/components/application_spaces/NewApplicationSpace.vue

@@ -318,13 +318,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
-              class="btn btn-primary btn-md"
               @click="handleSubmit"
-            >
-              {{ t('application_spaces.new.create') }}
-            </button>
+              class="btn btn-primary btn-md"
+              :name="t('application_spaces.new.create')"
+            />
           </el-form-item>
         </div>
       </el-form>

frontend/src/components/codes/NewCode.vue

@@ -139,13 +139,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
+              :name="t('codes.newCode.createCode')"
               @click="handleSubmit"
-            >
-              {{ t('codes.newCode.createCode') }}
-            </button>
+            />
           </el-form-item>
         </div>
       </el-form>

frontend/src/components/collections/CollectionsDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
+    class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
   >
     <div class="mx-auto page-responsive-width">
       <repo-header

frontend/src/components/collections/NewCollection.vue

@@ -128,12 +128,11 @@
       </el-form>
       <div class="flex justify-end w-full">
         <el-form-item>
-          <button
-            class="bg-brand-600 w-[118px] h-9 rounded-lg text-white flex items-center justify-center border disabled:text-gray-400 disabled:bg-gray-100 disabled:border-gray-200"
+          <CsgButton
+            class="btn btn-primary btn-md"
+            :name="$t('collections.newCollection.createCollection')"
             @click="createCollection"
-          >
-            {{ $t('collections.newCollection.createCollection') }}
-          </button>
+          />
         </el-form-item>
       </div>
     </div>

frontend/src/components/community/DiscussionCards.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-[16px]">
     <div class="flex justify-between">
-        <div @click="showDetail?showDetail=!showDetail:changeFlag('new')" class="px-[16px] py-[5px] border bg-gray-25 rounded-xs hover:bg-gray-100 text-gray-500 text-sm leading-[22px] cursor-pointer ">
+        <div @click="showDetail?showDetail=!showDetail:changeFlag('new')" class="btn btn-secondary-gray btn-sm w-fit ">
           {{ showDetail? $t('community.discussion.back'):$t('community.discussion.new') }}
         </div>
         <!-- <div class="hover:bg-gray-100 cursor-pointer flex items-center gap-[8px] px-[16px] py-[5px] rounded-xs text-gray-500 text-sm leading-[22px]">

frontend/src/components/community/EmptyCommunity.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="py-[60px] border border-gray-200 bg-gray-25 flex flex-col justify-center gap-[24px]">
+  <div class="py-[60px] border border-gray-200 bg-gray-25 flex flex-col justify-center gap-6 rounded-md">
     <div class="flex justify-center">
       <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path opacity="0.12" d="M12 17.5997C12 16.1062 12 15.3595 12.2906 14.789C12.5463 14.2873 12.9543 13.8793 13.456 13.6237C14.0265 13.333 14.7732 13.333 16.2667 13.333H25.0667C26.5601 13.333 27.3069 13.333 27.8773 13.6237C28.3791 13.8793 28.787 14.2873 29.0427 14.789C29.3333 15.3595 29.3333 16.1062 29.3333 17.5997V27.1512C29.3333 28.4757 27.747 29.1555 26.7879 28.2421C25.8541 27.3528 24.6141 26.8568 23.3247 26.8568H16.2667C14.7732 26.8568 14.0265 26.8568 13.456 26.5662C12.9543 26.3105 12.5463 25.9026 12.2906 25.4008C12 24.8304 12 24.0836 12 22.5902V17.5997Z" fill="#4D6AD6"/><path d="M12 18.667H9.66663C9.3371 18.667 9.17233 18.667 9.01189 18.6799C8.36734 18.7319 7.74499 18.9393 7.19818 19.2845C7.06206 19.3704 6.93025 19.4693 6.66663 19.667V19.667C5.98472 20.1784 5.64377 20.4341 5.38373 20.534C4.2864 20.9555 3.06397 20.3443 2.74275 19.2135C2.66663 18.9456 2.66663 18.5194 2.66663 17.667V9.06699C2.66663 6.82678 2.66663 5.70668 3.1026 4.85103C3.48609 4.09838 4.09802 3.48646 4.85066 3.10297C5.70631 2.66699 6.82642 2.66699 9.06663 2.66699H17.6C19.8402 2.66699 20.9603 2.66699 21.8159 3.10297C22.5686 3.48646 23.1805 4.09838 23.564 4.85103C24 5.70668 24 6.82678 24 9.06699V9.33366V10.0003M26.7878 28.2427V28.2427C27.747 29.1562 29.3333 28.4763 29.3333 27.1518V17.6003C29.3333 16.1069 29.3333 15.3601 29.0426 14.7897C28.787 14.2879 28.379 13.88 27.8773 13.6243C27.3068 13.3337 26.5601 13.3337 25.0666 13.3337H16.2666C14.7732 13.3337 14.0264 13.3337 13.456 13.6243C12.9542 13.88 12.5463 14.2879 12.2906 14.7897C12 15.3601 12 16.1069 12 17.6003V22.5908C12 24.0843 12 24.831 12.2906 25.4014C12.5463 25.9032 12.9542 26.3112 13.456 26.5668C14.0264 26.8575 14.7732 26.8575 16.2666 26.8575H23.3246C24.6141 26.8575 25.8541 27.3535 26.7878 28.2427Z" stroke="#4D6AD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
     </div>
-    <div class="flex justify-center text-xl text-gray-700 leading-[28px] font-semibold">{{ $t('community.empty.welcome') }}</div>
-    <div class="flex justify-center text-sm text-gray-700 leading-[22px]">
+    <div class="flex justify-center text-xl text-gray-700 leading-8 font-semibold">{{ $t('community.empty.welcome') }}</div>
+    <div class="flex justify-center text-sm text-gray-700 leading-6">
       <span class="max-w-[320px] text-center">
         {{ $t('community.empty.desc') }}
       </span>

frontend/src/components/datasets/NewDataset.vue

@@ -145,13 +145,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit"
-            >
-              {{ t('datasets.newDataset.createDataset') }}
-            </button>
+              :name="t('datasets.newDataset.createDataset')"
+              @click="createDataset"
+            />
           </el-form-item>
         </div>
       </el-form>
@@ -296,8 +295,7 @@
       body: JSON.stringify(params)
     }
     const newEndpoint = '/datasets'
-    const postres = await useFetchApi(newEndpoint, options).post()
-    const { data, error } = await postres.json()
+    const { data, error } = await useFetchApi(newEndpoint, options).post().json()
 
     if (data.value) {
       ElMessage.success(t('datasets.newDataset.createSuccess'))

frontend/src/components/endpoints/EndpointDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :private="endpoint.private"

frontend/src/components/endpoints/NewEndpoint.vue

@@ -182,12 +182,12 @@
 
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit">
-              {{ t('endpoints.new.createEndpoint') }}
-            </button>
+              :name="t('endpoints.new.createEndpoint')"
+              @click="handleSubmit"
+            />
           </el-form-item>
         </div>
       </el-form>

frontend/src/components/evaluations/NewEvaluation.vue

@@ -220,13 +220,12 @@
             {{ t('all.cancel') }}
           </a>
           <el-form-item>
-            <button
-              :disabled="submitLoading"
+            <CsgButton
               class="btn btn-primary rounded-md text-sm font-medium flex items-center justify-center px-[14px] h-[42px]"
+              :disabled="submitLoading"
+              :name="t('evaluation.new.createEvaluation')"
               @click="handleSubmit"
-            >
-              {{ t('evaluation.new.createEvaluation') }}
-            </button>
+            />
           </el-form-item>
         </div>
       </el-form>

frontend/src/components/finetune/FinetuneDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :name="finetune.deploy_name"

frontend/src/components/finetune/NewFinetune.vue

@@ -143,12 +143,12 @@
 
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit">
-              {{ t('finetune.new.createFinetune') }}
-            </button>
+              :name="t('finetune.new.createFinetune')"
+              @click="handleSubmit"
+            />
           </el-form-item>
         </div>
       </el-form>

frontend/src/components/models/ModelSettings.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="my-8 md:my-0 md:border-none px-8 py-6">
+    class="my-8 md:my-0 md:border-none py-6">
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-8">
       <div class="w-[380px] sm:w-full flex flex-col">

frontend/src/components/models/NewModel.vue

@@ -143,13 +143,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit"
-            >
-              {{ t('models.newModel.createModel') }}
-            </button>
+              :name="t('models.newModel.createModel')"
+              @click="createModel"
+            />
           </el-form-item>
         </div>
       </el-form>

frontend/src/components/organizations/NewOrganization.vue

@@ -87,14 +87,12 @@
       </el-form-item>
 
       <el-form-item>
-        <button
-          class="btn btn-primary btn-md"
-          style="width: 100%;"
+        <CsgButton
+          class="btn btn-primary btn-md w-full"
           @click="handleSubmit"
-          :disabled="submitting"
-        >
-          {{ $t('organization.newOrganization.createOrg') }}
-        </button>
+          :loading="submitting"
+          :name="$t('organization.newOrganization.createOrg')"
+        />
       </el-form-item>
     </el-form>
   </div>

frontend/src/components/shared/RepoCards.vue

@@ -9,8 +9,8 @@
         :frameworkTags="frameworkTags"
         :languageTags="languageTags"
         :licenseTags="licenseTags"
-        :selectedTag="props.selectedTag"
-        :selectedTagType="props.selectedTagType"
+        :selectedTag="selectedTag"
+        :selectedTagType="selectedTagType"
         @resetTags="resetTags"
         :type="repoType"
       />
@@ -134,11 +134,21 @@
   import UpdateUsername from '../popup/UpdateUsername.vue'
 
   const props = defineProps({
-    selectedTag: String,
-    selectedTagType: String,
     repoType: String
   })
 
+  const getQueryParams = () => {
+    const { searchParams } = new URL(window.location.href)
+    return {
+      tag: searchParams.get('tag') ?? '',
+      tagType: searchParams.get('tag_type') ?? ''
+    }
+  }
+
+  const { tag, tagType } = getQueryParams()
+  const selectedTag = ref(tag)
+  const selectedTagType = ref(tagType)
+
   const tagFields = {
     model: [
       'computer_vision',

frontend/src/components/shared/RepoDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="repo"
-    class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto border-b border-gray-200"
+    class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
   >
     <div class="mx-auto page-responsive-width">
       <repo-header

frontend/src/components/shared/RepoItem.vue

@@ -37,7 +37,7 @@
 
     <div class="flex flex-nowrap overflow-hidden text-ellipsis items-center gap-2 text-xs text-gray-500">
       <span v-if="getComputed.taskTag"
-            class="max-w-[80px] xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+            class="w-fit xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
       >
             {{ getComputed.taskTag }}
       </span>

frontend/src/components/shared/RepoSummary.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex md:px-5 md:flex-col-reverse min-h-[calc(100vh-341px)]">
-    <div class="max-w-[60%] sm:max-w-[100%] pt-4 pb-10 pr-5 sm:pr-0 break-words flex-1 border-t border-gray-200 md:border-t-0">
+    <div class="max-w-[60%] sm:max-w-[100%] py-8 pr-6 sm:pr-0 break-words flex-1 md:border-t-0">
       <el-skeleton v-if="loading" class="mt-4" :rows="5" animated />
       <markdown-viewer
         :content="readmeContent"
@@ -10,7 +10,7 @@
       </markdown-viewer>
     </div>
     <div class="w-[40%] sm:w-[100%] border-l border-gray-200 md:border-l-0 md:border-b md:w-full md:pl-0">
-      <div class="p-[16px]">
+      <div class="pl-6 py-8">
         <div class="text-gray-500 text-base font-medium leading-[22px] md:pl-0">{{ $t('all.downloadCount') }}</div>
         <div class="text-gray-700 text-base font-semibold leading-6 mt-1 md:pl-0">{{ downloadCount }}</div>
       </div>