更新模型/数据集的卡片 (OpenCSGs#76)

* Add nickname and tag in modelcard * Add nickname,desc and tag in datasetcard * Add task-tag in modelcard and datasetcard * Add task-tag in datasetcard * reset modeldetail * reset datasetdetail * reset datasetdetail * Update the DatasetItem.vue and ModelItem.vue * Update the card of model and dataset --------- Co-authored-by: zxr <[email protected]>
caoxianshu · Mar 11, 2024 · 55d5192 · 55d5192
1 parent 52d362e
commit 55d5192
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 19 deletions.
diff --git a/app/javascript/components/datasets/DatasetItem.vue b/app/javascript/components/datasets/DatasetItem.vue
@@ -2,9 +2,20 @@
   <a :href="`/datasets/${ dataset.path }`"
      class="dataset-card hover:active-dataset-card p-4 sm:w-full border border-gray-200 rounded-xl">
     <div class="flex items-center mb-[5px] w-[399px] sm:w-auto">
-      <div class="dataset-path text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">{{ dataset.path }}</div>
+      <div class="dataset-path text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+        {{ getPath }}
+      </div>
     </div>
+    <p class="h-[40px] w-[399px] sm:w-auto leading-[18px] mb-[5px] text-[#909399] text-xs overflow-hidden overflow-ellipsis line-clamp-2">
+      {{ dataset.description }}
+    </p>
     <div class="flex items-center gap-[8px] text-xs text-[#909399]">
+      <span v-if="getTaskTagName">{{ getTaskTagName }}</span>
+      <span v-if="getTaskTagName">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1" height="8" viewBox="0 0 1 8" fill="none">
+          <path d="M0.5 0V8" stroke="#DCDFE6"/>
+        </svg>
+      </span>
       <span>更新时间：{{ dataset.updated_at.substring(0, 10) }}</span>
       <span>
         <svg xmlns="http://www.w3.org/2000/svg" width="1" height="8" viewBox="0 0 1 8" fill="none">
@@ -23,15 +34,24 @@
 </template>
 
 <script setup>
-  import { computed } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  dataset: Object,
+})
+
+const getPath = computed(() => {
+  return props.dataset.path.split('/')[0] + '/' + (props.dataset.nickname === '' ? props.dataset.name : props.dataset.nickname)
+})
 
-  const props = defineProps({
-    dataset: Object,
-  })
+const visibility = computed(() => {
+  return props.dataset.private ? '私有' : '公开'
+})
 
-  const visibility = computed(() => {
-    return props.dataset.private ? '私有' : '公开'
-  })
+const getTaskTagName = computed(() => {
+  const taskTag = (props.dataset.tags || []).find(tag => tag.category === "task")
+  return taskTag ? taskTag["show_name"] : null
+})
 </script>
 
 <style scoped>

diff --git a/app/javascript/components/models/ModelItem.vue b/app/javascript/components/models/ModelItem.vue
@@ -2,9 +2,21 @@
   <a :href="`/models/${ model.path }`"
      class="model-card p-4 hover:active-model-card sm:w-full border border-gray-200 bg-white rounded-xl hover:active">
     <div class="flex items-center mb-[5px] w-[399px] sm:w-auto">
-      <div :title="model.path" class="model-path text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">{{ model.path }}</div>
+      <div :title="model.path"
+           class="model-path text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+        {{ getPath }}
+      </div>
     </div>
+    <p class="h-[40px] w-[399px] sm:w-auto leading-[18px] mb-[5px] text-[#909399] text-xs overflow-hidden overflow-ellipsis line-clamp-2">
+      {{ model.description }}
+    </p>
     <div class="flex items-center gap-[8px] text-xs text-[#909399]">
+      <span v-if="getTaskTagName">{{ getTaskTagName }}</span>
+      <span v-if="getTaskTagName">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1" height="8" viewBox="0 0 1 8" fill="none">
+          <path d="M0.5 0V8" stroke="#DCDFE6"/>
+        </svg>
+      </span>
       <span>更新时间：{{ model.updated_at.substring(0, 10) }}</span>
       <span>
         <svg xmlns="http://www.w3.org/2000/svg" width="1" height="8" viewBox="0 0 1 8" fill="none">
@@ -23,19 +35,28 @@
 </template>
 
 <script setup>
-  import { computed } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  model: Object,
+})
+
+const getPath = computed(() => {
+  return props.model.path.split('/')[0] + '/' + (props.model.nickname === '' ? props.model.name : props.model.nickname)
+})
 
-  const props = defineProps({
-    model: Object,
-  })
+const visibility = computed(() => {
+  return props.model.private ? '私有' : '公开'
+})
 
-  const visibility = computed(() => {
-    return props.model.private ? '私有' : '公开'
-  })
+const getTaskTagName = computed(() => {
+  const taskTag = (props.model.tags || []).find(tag => tag.category === "task")
+  return taskTag ? taskTag["show_name"] : null
+})
 </script>
 
 <style scoped>
-  .model-card:hover .model-path {
-    color: var(--theme-dark-red-t-red-500-ad-4-a-3-b, #AD4A3B);
-  }
+.model-card:hover .model-path {
+  color: var(--theme-dark-red-t-red-500-ad-4-a-3-b, #AD4A3B);
+}
 </style>