From 94d057e5cc84d3a3dd1180304714a16b23039570 Mon Sep 17 00:00:00 2001
From: AnnyTerfect <1247470246@qq.com>
Date: Mon, 6 Nov 2023 22:47:49 +0800
Subject: [PATCH 1/6] feat(frontend): heterogeneousMode -> isHeterogeneous

---
 .../src/components/Search/UserRequirement.vue |  2 ++
 .../packages/main/src/request/engine/index.ts |  6 ++---
 frontend/packages/main/src/views/Search.vue   | 27 ++++++++-----------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/frontend/packages/main/src/components/Search/UserRequirement.vue b/frontend/packages/main/src/components/Search/UserRequirement.vue
index d1b4588..1c79308 100644
--- a/frontend/packages/main/src/components/Search/UserRequirement.vue
+++ b/frontend/packages/main/src/components/Search/UserRequirement.vue
@@ -12,6 +12,7 @@ import type { DataType, TaskType, LibraryType, Filter } from "@beiming-system/ty
 export interface Props {
   modelValue: Filter;
   isAdmin?: boolean;
+  isHeterogeneous?: boolean;
 }
 
 const { t } = useI18n();
@@ -20,6 +21,7 @@ const emits = defineEmits(["update:modelValue"]);
 
 withDefaults(defineProps<Props>(), {
   isAdmin: false,
+  isHeterogeneous: false,
 });
 
 const route = useRoute();
diff --git a/frontend/packages/main/src/request/engine/index.ts b/frontend/packages/main/src/request/engine/index.ts
index 72d0a0b..2c0a091 100644
--- a/frontend/packages/main/src/request/engine/index.ts
+++ b/frontend/packages/main/src/request/engine/index.ts
@@ -44,7 +44,7 @@ function searchLearnware({
   scenarioList,
   files,
   isVerified,
-  heterogeneousMode,
+  isHeterogeneous,
   page,
   limit,
 }: {
@@ -56,7 +56,7 @@ function searchLearnware({
   scenarioList: ScenarioList;
   files: Files;
   isVerified: boolean;
-  heterogeneousMode: boolean;
+  isHeterogeneous: boolean;
   page: number;
   limit: number;
 }): Promise<{
@@ -85,7 +85,7 @@ function searchLearnware({
       }
       fd.append("semantic_specification", JSON.stringify(semanticSpec));
       fd.append("statistical_specification", (files.length > 0 && files[0]) || "");
-      fd.append("heterogeneous_mode", String(heterogeneousMode));
+      fd.append("is_heterogeneous", String(isHeterogeneous));
       fd.append("is_verified", String(isVerified));
       fd.append("limit", String(limit));
       fd.append("page", String(page));
diff --git a/frontend/packages/main/src/views/Search.vue b/frontend/packages/main/src/views/Search.vue
index 4cb9313..6f77b91 100644
--- a/frontend/packages/main/src/views/Search.vue
+++ b/frontend/packages/main/src/views/Search.vue
@@ -43,7 +43,7 @@ const singleRecommendedLearnwarePage = ref(1);
 const singleRecommendedLearnwarePageNum = ref(1);
 const singleRecommendedLearnwarePageSize = ref(Math.ceil(display.height.value / 900) * 10);
 const singleRecommendedLearnwareItems = ref<LearnwareCardInfo[]>([]);
-const heterogeneousMode = ref<boolean>(false);
+const isHeterogeneous = ref<boolean>(false);
 const rkmeTypeTable = ref<boolean>(false);
 const loading = ref(false);
 const isVerified = ref(route.query.is_verified ? route.query.is_verified === "true" : true);
@@ -82,7 +82,7 @@ function fetchByFilterAndPage(
   filters: Filter,
   page: number,
   isVerified: boolean = false,
-  heterogeneousMode: boolean = false,
+  isHeterogeneous: boolean = false,
 ): void {
   showError.value = false;
   loading.value = true;
@@ -96,7 +96,7 @@ function fetchByFilterAndPage(
     scenarioList: filters.scenarioList,
     files: filters.files,
     isVerified,
-    heterogeneousMode,
+    isHeterogeneous,
     page,
     limit: singleRecommendedLearnwarePageSize.value,
   })
@@ -233,17 +233,17 @@ watch(
     filters.value,
     singleRecommendedLearnwarePage.value,
     isVerified.value,
-    heterogeneousMode.value,
+    isHeterogeneous.value,
   ],
   (newVal) => {
-    const [newFilters, newPage, newIsVerified, newHeterogeneousMode] = newVal as [
+    const [newFilters, newPage, newIsVerified, newIsHeterogeneous] = newVal as [
       Filter,
       number,
       boolean,
       boolean,
     ];
 
-    fetchByFilterAndPage(newFilters, newPage - 1, newIsVerified, newHeterogeneousMode);
+    fetchByFilterAndPage(newFilters, newPage - 1, newIsVerified, newIsHeterogeneous);
   },
   { deep: true },
 );
@@ -286,7 +286,7 @@ function init(): void {
     filters.value,
     singleRecommendedLearnwarePage.value - 1,
     isVerified.value,
-    heterogeneousMode.value,
+    isHeterogeneous.value,
   );
 }
 
@@ -316,11 +316,11 @@ onMounted(() => init());
       >
         <template #prepend>
           <v-btn
-            v-if="heterogeneousMode"
+            v-if="isHeterogeneous"
             block
             variant="outlined"
             color="red"
-            @click="() => (heterogeneousMode = false)"
+            @click="() => (isHeterogeneous = false)"
           >
             {{ t("Search.TurnOffHeterogeneousSearch") }}
           </v-btn>
@@ -395,13 +395,8 @@ onMounted(() => init());
         />
       </v-card>
 
-      <div v-if="showHeterogeneousSearchSwitch && !heterogeneousMode" class="text-center">
-        <v-btn
-          class="px-8"
-          variant="outlined"
-          color="red"
-          @click="() => (heterogeneousMode = true)"
-        >
+      <div v-if="showHeterogeneousSearchSwitch && !isHeterogeneous" class="text-center">
+        <v-btn class="px-8" variant="outlined" color="red" @click="() => (isHeterogeneous = true)">
           {{ t("Search.HeterogeneousSearch") }}
         </v-btn>
       </div>

From b82b236439d555db4e3271fc35d2a79a2bdd8e2c Mon Sep 17 00:00:00 2001
From: AnnyTerfect <1247470246@qq.com>
Date: Tue, 7 Nov 2023 10:29:41 +0800
Subject: [PATCH 2/6] refactor(frontend): v-model:value to v-model

---
 frontend/packages/admin/src/App.vue           |  4 +-
 frontend/packages/main/src/App.vue            |  4 +-
 .../main/src/components/App/AppBar.vue        |  6 +-
 .../main/src/components/App/NavDrawer.vue     |  8 +--
 .../src/components/Search/UserRequirement.vue | 23 ++++++--
 .../Specification/DescriptionInput.vue        | 26 +++------
 .../components/Specification/FileUpload.vue   |  9 ++-
 .../src/components/Specification/SpecTag.vue  | 12 ++--
 .../Specification/SpecTag/DataType.vue        | 56 ++++++++----------
 .../Specification/SpecTag/GridBtns.vue        | 22 +++----
 .../Specification/SpecTag/LibraryType.vue     | 57 ++++++++-----------
 .../Specification/SpecTag/ScenarioList.vue    | 28 ++++-----
 .../Specification/SpecTag/TaskType.vue        | 56 ++++++++----------
 frontend/packages/main/src/views/Submit.vue   |  2 +-
 14 files changed, 150 insertions(+), 163 deletions(-)

diff --git a/frontend/packages/admin/src/App.vue b/frontend/packages/admin/src/App.vue
index 2d74636..f5e5add 100644
--- a/frontend/packages/admin/src/App.vue
+++ b/frontend/packages/admin/src/App.vue
@@ -78,9 +78,9 @@ watch(
 
 <template>
   <v-app>
-    <app-bar v-model:drawerOpen="drawerOpen" :routes="routes"></app-bar>
+    <app-bar v-model="drawerOpen" :routes="routes"></app-bar>
 
-    <nav-drawer v-model:drawerOpen="drawerOpen" :routes="routes"></nav-drawer>
+    <nav-drawer v-model="drawerOpen" :routes="routes"></nav-drawer>
 
     <v-main class="bg-gray-100 bg-opacity-50">
       <router-view v-slot="{ Component }">
diff --git a/frontend/packages/main/src/App.vue b/frontend/packages/main/src/App.vue
index 7fcbfd9..7dbeaeb 100644
--- a/frontend/packages/main/src/App.vue
+++ b/frontend/packages/main/src/App.vue
@@ -82,9 +82,9 @@ watch(
 
 <template>
   <v-app>
-    <app-bar v-model:drawerOpen="drawerOpen" :routes="routes"></app-bar>
+    <app-bar v-model="drawerOpen" :routes="routes"></app-bar>
 
-    <nav-drawer v-model:drawerOpen="drawerOpen" :routes="routes"></nav-drawer>
+    <nav-drawer v-model="drawerOpen" :routes="routes"></nav-drawer>
 
     <v-main class="bg-gray-100 bg-opacity-50">
       <router-view v-slot="{ Component }">
diff --git a/frontend/packages/main/src/components/App/AppBar.vue b/frontend/packages/main/src/components/App/AppBar.vue
index 91a71a9..225886a 100644
--- a/frontend/packages/main/src/components/App/AppBar.vue
+++ b/frontend/packages/main/src/components/App/AppBar.vue
@@ -7,11 +7,11 @@ import learnwareLogo from "/logo.svg?url";
 import type { Route } from "@beiming-system/types/route";
 
 export interface Props {
-  drawerOpen: boolean;
+  modelValue: boolean;
   routes: Route[];
 }
 
-const emit = defineEmits(["update:drawerOpen"]);
+const emit = defineEmits(["update:modelValue"]);
 const router = useRouter();
 
 const props = defineProps<Props>();
@@ -54,7 +54,7 @@ const filteredRoutes = computed<Route[]>(
     <div class="prepend">
       <v-app-bar-nav-icon
         v-if="['xs', 'sm'].includes(display.name.value)"
-        @click="() => emit('update:drawerOpen', !drawerOpen)"
+        @click="() => emit('update:modelValue', !modelValue)"
       ></v-app-bar-nav-icon>
       <div class="logo" @click="() => router.push('/')">
         <img class="logo-img" :src="learnwareLogo" />
diff --git a/frontend/packages/main/src/components/App/NavDrawer.vue b/frontend/packages/main/src/components/App/NavDrawer.vue
index c8541e4..edd8d93 100644
--- a/frontend/packages/main/src/components/App/NavDrawer.vue
+++ b/frontend/packages/main/src/components/App/NavDrawer.vue
@@ -5,19 +5,19 @@ import { useDisplay } from "vuetify";
 import type { Route } from "@beiming-system/types/route";
 
 export interface Props {
-  drawerOpen: boolean;
+  modelValue: boolean;
   routes: Route[];
 }
 
 const display = useDisplay();
 
-const emit = defineEmits(["update:drawerOpen"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps<Props>();
 
 const drawer = computed({
-  get: () => props.drawerOpen && ["xs", "sm"].includes(display.name.value),
-  set: (value) => emit("update:drawerOpen", value),
+  get: () => props.modelValue && ["xs", "sm"].includes(display.name.value),
+  set: (value) => emit("update:modelValue", value),
 });
 
 const store = useStore();
diff --git a/frontend/packages/main/src/components/Search/UserRequirement.vue b/frontend/packages/main/src/components/Search/UserRequirement.vue
index 1c79308..fc2e1fe 100644
--- a/frontend/packages/main/src/components/Search/UserRequirement.vue
+++ b/frontend/packages/main/src/components/Search/UserRequirement.vue
@@ -96,17 +96,17 @@ watch(
         ></v-text-field>
       </div>
 
-      <data-type-btns v-model:value="dataType" :cols="3" :md="2" :sm="2" :xs="2"></data-type-btns>
-      <task-type-btns v-model:value="taskType" :cols="2" :md="2" :sm="2" :xs="2"></task-type-btns>
+      <data-type-btns v-model="dataType" :cols="3" :md="2" :sm="2" :xs="2"></data-type-btns>
+      <task-type-btns v-model="taskType" :cols="2" :md="2" :sm="2" :xs="2"></task-type-btns>
       <library-type-btns
-        v-model:value="libraryType"
+        v-model="libraryType"
         :cols="2"
         :md="2"
         :sm="2"
         :xs="2"
       ></library-type-btns>
       <scenario-list-btns
-        v-model:value="scenarioList"
+        v-model="scenarioList"
         :cols="2"
         :md="2"
         :sm="2"
@@ -117,13 +117,26 @@ watch(
     </div>
 
     <div class="p-4 pt-0 border-t-1 border-gray-300">
+      <template v-if="isHeterogeneous">
+        <div ref="anchorRef" class="mt-3 mb-5 w-full text-h6 transition-all truncate">
+          <v-icon class="mr-3" icon="mdi-upload" color="black" size="small"></v-icon>
+          Upload Feature Description
+        </div>
+
+        <file-upload
+          v-model="files"
+          :height="28"
+          :tips="t('Submit.File.DragFileHere', { file: 'json' })"
+        />
+      </template>
+
       <div ref="anchorRef" class="mt-3 mb-5 w-full text-h6 transition-all truncate">
         <v-icon class="mr-3" icon="mdi-upload" color="black" size="small"></v-icon>
         {{ t("Search.UploadStatisticalRequirement") }}
       </div>
 
       <file-upload
-        v-model:files="files"
+        v-model="files"
         :height="28"
         :tips="t('Submit.File.DragFileHere', { file: 'json' })"
       />
diff --git a/frontend/packages/main/src/components/Specification/DescriptionInput.vue b/frontend/packages/main/src/components/Specification/DescriptionInput.vue
index d8463dd..4764cb8 100644
--- a/frontend/packages/main/src/components/Specification/DescriptionInput.vue
+++ b/frontend/packages/main/src/components/Specification/DescriptionInput.vue
@@ -6,7 +6,7 @@ import { debounce } from "../../utils";
 
 export interface Props {
   name: string;
-  value: {
+  modelValue: {
     Dimension: number;
     Description: Record<number, string>;
   };
@@ -16,27 +16,19 @@ const { t, locale } = useI18n();
 
 const display = useDisplay();
 
-const emits = defineEmits(["update:value"]);
+const emits = defineEmits(["update:modelValue"]);
 
-const props = defineProps({
-  name: {
-    type: String,
-    required: false,
-    default: "feature",
-  },
-  value: {
-    type: Object,
-    required: true,
-  },
-});
+const props = defineProps<Props>();
 
 const errorMessages = ref<string>("");
 
-const descriptionJSON = ref(props.value);
+const descriptionJSON = ref(props.modelValue);
 const descriptionArray = ref<(string | null)[]>(
-  [...new Array(props.value.Dimension)].map((_, idx) => props.value?.Description[idx] || null),
+  [...new Array(props.modelValue.Dimension)].map(
+    (_, idx) => props.modelValue?.Description[idx] || null,
+  ),
 );
-const descriptionString = ref(JSON.stringify(props.value, null, 2));
+const descriptionString = ref(JSON.stringify(props.modelValue, null, 2));
 
 const debouncedSetErrorMessages = debounce<string>((val) => {
   errorMessages.value = val;
@@ -50,7 +42,7 @@ watch(
       (_, idx) => newVal.Description[idx] || null,
     );
     descriptionString.value = JSON.stringify(newVal, null, 2);
-    emits("update:value", newVal);
+    emits("update:modelValue", newVal);
   },
 );
 watch(
diff --git a/frontend/packages/main/src/components/Specification/FileUpload.vue b/frontend/packages/main/src/components/Specification/FileUpload.vue
index 36c15fd..d2ab823 100644
--- a/frontend/packages/main/src/components/Specification/FileUpload.vue
+++ b/frontend/packages/main/src/components/Specification/FileUpload.vue
@@ -2,16 +2,15 @@
 import { ref, computed } from "vue";
 
 export interface Props {
-  files: File[];
+  modelValue: File[];
   tips: string;
   errorMessages?: string;
   height?: number;
 }
 
-const emit = defineEmits(["update:files"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const props = withDefaults(defineProps<Props>(), {
-  files: () => [],
   errorMessages: "",
   height: 40,
 });
@@ -43,9 +42,9 @@ const computeFileSize = (byte: number): string => {
 };
 
 const files = computed({
-  get: () => props.files,
+  get: () => props.modelValue,
   set: (val) => {
-    emit("update:files", val);
+    emit("update:modelValue", val);
   },
 });
 </script>
diff --git a/frontend/packages/main/src/components/Specification/SpecTag.vue b/frontend/packages/main/src/components/Specification/SpecTag.vue
index 67469cb..e1d72b6 100644
--- a/frontend/packages/main/src/components/Specification/SpecTag.vue
+++ b/frontend/packages/main/src/components/Specification/SpecTag.vue
@@ -71,10 +71,10 @@ const taskTypeDescription = computed({
         <v-alert class="w-full max-w-[900px] mx-auto" closable :text="errorMessages" type="error" />
       </v-card-actions>
     </v-scroll-y-transition>
-    <data-type-btns v-model:value="dataType" />
+    <data-type-btns v-model="dataType" />
     <description-input
       v-if="dataType === 'Table'"
-      v-model:value="dataTypeDescription"
+      v-model="dataTypeDescription"
       :name="t('Submit.SemanticSpecification.DataType.DescriptionInput.Name')"
     >
       <template #msg>
@@ -84,14 +84,14 @@ const taskTypeDescription = computed({
         {{ t("Submit.SemanticSpecification.DataType.DescriptionInput.FeatureTipsSmall") }}
       </template>
     </description-input>
-    <task-type-btns v-model:value="taskType" />
+    <task-type-btns v-model="taskType" />
     <description-input
       v-if="
         taskType === 'Classification' ||
         taskType === 'Regression' ||
         taskType === 'Feature Extraction'
       "
-      v-model:value="taskTypeDescription"
+      v-model="taskTypeDescription"
       :name="t('Submit.SemanticSpecification.TaskType.DescriptionOutput.Name')"
     >
       <template #msg>
@@ -101,7 +101,7 @@ const taskTypeDescription = computed({
         {{ t("Submit.SemanticSpecification.TaskType.DescriptionOutput.LabelTipsSmall") }}
       </template>
     </description-input>
-    <library-type-btns v-model:value="libraryType" />
-    <scenario-list-btns v-model:value="scenarioList" />
+    <library-type-btns v-model="libraryType" />
+    <scenario-list-btns v-model="scenarioList" />
   </div>
 </template>
diff --git a/frontend/packages/main/src/components/Specification/SpecTag/DataType.vue b/frontend/packages/main/src/components/Specification/SpecTag/DataType.vue
index 951a613..0708ee0 100644
--- a/frontend/packages/main/src/components/Specification/SpecTag/DataType.vue
+++ b/frontend/packages/main/src/components/Specification/SpecTag/DataType.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { computed } from "vue";
 import GridBtns from "./GridBtns.vue";
 import AudioBtn from "../../../assets/images/specification/dataType/audio.svg?component";
 import VideoBtn from "../../../assets/images/specification/dataType/video.svg?component";
@@ -8,39 +8,33 @@ import ImageBtn from "../../../assets/images/specification/dataType/image.svg?co
 import TableBtn from "../../../assets/images/specification/dataType/table.svg?component";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+export interface DataTypeProps {
+  modelValue: string;
+  cols?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+}
 
-const emit = defineEmits(["update:value"]);
-
-const props = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-  cols: {
-    type: Number,
-    default: 5,
-  },
-  md: {
-    type: Number,
-    default: 4,
-  },
-  sm: {
-    type: Number,
-    default: 4,
-  },
-  xs: {
-    type: Number,
-    default: 2,
-  },
+const props = withDefaults(defineProps<DataTypeProps>(), {
+  cols: 5,
+  md: 4,
+  sm: 4,
+  xs: 2,
 });
 
-const value = ref(props.value);
+const { t } = useI18n();
 
-watch(
-  () => value.value,
-  (newVal) => emit("update:value", newVal),
-);
+const emit = defineEmits(["update:modelValue"]);
+
+const modelValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
 
 const dataTypeBtns = computed(() => [
   {
@@ -73,7 +67,7 @@ const dataTypeBtns = computed(() => [
 
 <template>
   <grid-btns
-    v-model:value="value"
+    v-model="modelValue"
     :btns="dataTypeBtns"
     :title="t('Submit.SemanticSpecification.DataType.DataType')"
     :cols="cols"
diff --git a/frontend/packages/main/src/components/Specification/SpecTag/GridBtns.vue b/frontend/packages/main/src/components/Specification/SpecTag/GridBtns.vue
index 8fbccb4..2ecaee7 100644
--- a/frontend/packages/main/src/components/Specification/SpecTag/GridBtns.vue
+++ b/frontend/packages/main/src/components/Specification/SpecTag/GridBtns.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { computed } from "vue";
 import { useDisplay } from "vuetify";
 import IconBtn from "./IconBtn.vue";
 import type { FunctionalComponent, SVGAttributes } from "vue";
@@ -11,7 +11,7 @@ export interface Btn {
 }
 
 export interface Props {
-  value: string;
+  modelValue: string;
   btns: Btn[];
   title: string;
   cols?: number;
@@ -29,9 +29,16 @@ const props = withDefaults(defineProps<Props>(), {
   xs: 3,
 });
 
-const emit = defineEmits(["update:value"]);
+const emit = defineEmits(["update:modelValue"]);
 
-const value = ref(props.value);
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
 
 const realCols = computed(() => {
   let { cols } = props;
@@ -48,13 +55,6 @@ const realCols = computed(() => {
 function clickBtn(btn: Btn): void {
   value.value = btn.value === value.value ? "" : btn.value;
 }
-
-watch(
-  () => value.value,
-  (newValue) => {
-    emit("update:value", newValue);
-  },
-);
 </script>
 
 <template>
diff --git a/frontend/packages/main/src/components/Specification/SpecTag/LibraryType.vue b/frontend/packages/main/src/components/Specification/SpecTag/LibraryType.vue
index 8eebd51..b3c140c 100644
--- a/frontend/packages/main/src/components/Specification/SpecTag/LibraryType.vue
+++ b/frontend/packages/main/src/components/Specification/SpecTag/LibraryType.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { computed } from "vue";
 import GridBtns from "./GridBtns.vue";
 import TensorFlowBtn from "../../../assets/images/specification/libraryType/tensorflow.svg?component";
 import PyTorchBtn from "../../../assets/images/specification/libraryType/pytorch.svg?component";
@@ -7,40 +7,33 @@ import ScikitLearnBtn from "../../../assets/images/specification/libraryType/sci
 import OthersBtn from "../../../assets/images/specification/libraryType/others.svg?component";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+export interface LibraryTypeProps {
+  modelValue: string;
+  cols?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+}
 
-const emit = defineEmits(["update:value"]);
-
-const props = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-  cols: {
-    type: Number,
-    default: 4,
-  },
-  md: {
-    type: Number,
-    default: 4,
-  },
-  sm: {
-    type: Number,
-    default: 4,
-  },
-  xs: {
-    type: Number,
-    default: 2,
-  },
+const props = withDefaults(defineProps<LibraryTypeProps>(), {
+  cols: 4,
+  md: 4,
+  sm: 4,
+  xs: 2,
 });
 
-const value = ref(props.value);
+const { t } = useI18n();
 
-watch(
-  () => value.value,
-  (newVal) => emit("update:value", newVal),
-  { deep: true },
-);
+const emit = defineEmits(["update:modelValue"]);
+
+const modelValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
 
 const libraryTypeBtns = computed(() => [
   {
@@ -68,7 +61,7 @@ const libraryTypeBtns = computed(() => [
 
 <template>
   <grid-btns
-    v-model:value="value"
+    v-model="modelValue"
     :btns="libraryTypeBtns"
     :title="t('Submit.SemanticSpecification.LibraryType.LibraryType')"
     :cols="cols"
diff --git a/frontend/packages/main/src/components/Specification/SpecTag/ScenarioList.vue b/frontend/packages/main/src/components/Specification/SpecTag/ScenarioList.vue
index 2a5593f..8bd3dbd 100644
--- a/frontend/packages/main/src/components/Specification/SpecTag/ScenarioList.vue
+++ b/frontend/packages/main/src/components/Specification/SpecTag/ScenarioList.vue
@@ -5,7 +5,7 @@ import { useI18n } from "vue-i18n";
 import type { Scenario, ScenarioList } from "@beiming-system/types/learnware";
 
 export interface Props {
-  value: ScenarioList;
+  modelValue: ScenarioList;
   cols?: number;
   md?: number;
   sm?: number;
@@ -14,7 +14,7 @@ export interface Props {
 
 const { t } = useI18n();
 
-const emit = defineEmits(["update:value"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const display = useDisplay();
 
@@ -116,17 +116,19 @@ const items = computed<
   },
 ]);
 
-const allSelected = computed(() => props.value && props.value.length === items.value.length);
+const allSelected = computed(
+  () => props.modelValue && props.modelValue.length === items.value.length,
+);
 
 const selections = computed(() => {
-  if (props.value) {
-    return props.value.map((s) => items.value.find((item) => item.value === s));
+  if (props.modelValue) {
+    return props.modelValue.map((s) => items.value.find((item) => item.value === s));
   }
   return [];
 });
 
 function click(value: Scenario): void {
-  if (props.value && props.value.includes(value)) {
+  if (props.modelValue && props.modelValue.includes(value)) {
     deleteSelect(value);
   } else {
     addSelect(value);
@@ -134,21 +136,21 @@ function click(value: Scenario): void {
 }
 
 function addSelect(value: Scenario): void {
-  if (props.value) {
-    emit("update:value", [...props.value, value]);
+  if (props.modelValue) {
+    emit("update:modelValue", [...props.modelValue, value]);
   } else {
-    emit("update:value", [value]);
+    emit("update:modelValue", [value]);
   }
 }
 
 function deleteSelect(value: Scenario): void {
-  if (props.value) {
+  if (props.modelValue) {
     emit(
-      "update:value",
-      props.value.filter((s) => s !== value),
+      "update:modelValue",
+      props.modelValue.filter((s) => s !== value),
     );
   } else {
-    emit("update:value", []);
+    emit("update:modelValue", []);
   }
 }
 </script>
diff --git a/frontend/packages/main/src/components/Specification/SpecTag/TaskType.vue b/frontend/packages/main/src/components/Specification/SpecTag/TaskType.vue
index 906e2aa..80b7016 100644
--- a/frontend/packages/main/src/components/Specification/SpecTag/TaskType.vue
+++ b/frontend/packages/main/src/components/Specification/SpecTag/TaskType.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { computed } from "vue";
 import GridBtns from "./GridBtns.vue";
 import ClassificationBtn from "../../../assets/images/specification/taskType/classification.svg?component";
 import ClusteringBtn from "../../../assets/images/specification/taskType/clustering.svg?component";
@@ -11,39 +11,33 @@ import RankingBtn from "../../../assets/images/specification/taskType/ranking.sv
 import OthersBtn from "../../../assets/images/specification/taskType/others.svg?component";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+export interface TaskTypeProps {
+  modelValue: string;
+  cols?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+}
 
-const emit = defineEmits(["update:value"]);
-
-const props = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-  cols: {
-    type: Number,
-    default: 5,
-  },
-  md: {
-    type: Number,
-    default: 4,
-  },
-  sm: {
-    type: Number,
-    default: 4,
-  },
-  xs: {
-    type: Number,
-    default: 2,
-  },
+const props = withDefaults(defineProps<TaskTypeProps>(), {
+  cols: 5,
+  md: 4,
+  sm: 4,
+  xs: 2,
 });
 
-const value = ref(props.value);
+const { t } = useI18n();
 
-watch(
-  () => value.value,
-  (newVal) => emit("update:value", newVal),
-);
+const emit = defineEmits(["update:modelValue"]);
+
+const modelValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
 
 const taskTypeBtns = computed(() => [
   {
@@ -91,7 +85,7 @@ const taskTypeBtns = computed(() => [
 
 <template>
   <grid-btns
-    v-model:value="value"
+    v-model="modelValue"
     :btns="taskTypeBtns"
     :title="t('Submit.SemanticSpecification.TaskType.TaskType')"
     :cols="cols"
diff --git a/frontend/packages/main/src/views/Submit.vue b/frontend/packages/main/src/views/Submit.vue
index 75ecce0..75e77cc 100644
--- a/frontend/packages/main/src/views/Submit.vue
+++ b/frontend/packages/main/src/views/Submit.vue
@@ -462,7 +462,7 @@ onActivated(init);
           <v-window-item :value="3">
             <div class="p-4 m-auto">
               <file-upload
-                v-model:files="files.value"
+                v-model="files.value"
                 :error-messages="files.errorMessages"
                 :tips="t('Submit.File.DragFileHere', { file: 'zip' })"
                 class="text-xl"

From 321b152e8a9920f4b59adf6287cf9952ab96155b Mon Sep 17 00:00:00 2001
From: AnnyTerfect <1247470246@qq.com>
Date: Tue, 7 Nov 2023 13:26:43 +0800
Subject: [PATCH 3/6] feat(frontend): allow assign download type

---
 frontend/packages/admin/src/utils/saveContentToFile.ts | 4 ++--
 frontend/packages/admin/src/views/Users.vue            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/packages/admin/src/utils/saveContentToFile.ts b/frontend/packages/admin/src/utils/saveContentToFile.ts
index 683c3d9..1567b19 100644
--- a/frontend/packages/admin/src/utils/saveContentToFile.ts
+++ b/frontend/packages/admin/src/utils/saveContentToFile.ts
@@ -1,5 +1,5 @@
-export default function saveContentToFile(content: BlobPart, fileName: string): void {
-  const blob = new Blob([content], { type: "text/csv;charset=utf-8" });
+export default function saveContentToFile(content: BlobPart, type: string, fileName: string): void {
+  const blob = new Blob([content], { type });
   const url = window.URL.createObjectURL(blob);
   const link = document.createElement("a");
   document.body.appendChild(link);
diff --git a/frontend/packages/admin/src/views/Users.vue b/frontend/packages/admin/src/views/Users.vue
index b2ced1f..2491663 100644
--- a/frontend/packages/admin/src/views/Users.vue
+++ b/frontend/packages/admin/src/views/Users.vue
@@ -342,7 +342,7 @@ async function handleClickExport(): Promise<void> {
       });
   }
   const csvContent = "\ufeff" + table.map((e) => e.join(",")).join("\n");
-  saveContentToFile(csvContent, "user_list.csv");
+  saveContentToFile(csvContent, "text/csv;charset=utf-8", "user_list.csv");
 }
 
 watch(

From 89be94c8ad96ff5b98f32a4cc5e60a5ceec6a01b Mon Sep 17 00:00:00 2001
From: AnnyTerfect <1247470246@qq.com>
Date: Tue, 7 Nov 2023 13:36:00 +0800
Subject: [PATCH 4/6] refactor(frontend): reorganize saveContentToFile

---
 frontend/packages/admin/src/utils/index.ts            |  8 ++++----
 frontend/packages/main/src/utils/index.ts             | 11 ++++++-----
 .../{admin => main}/src/utils/saveContentToFile.ts    |  0
 3 files changed, 10 insertions(+), 9 deletions(-)
 rename frontend/packages/{admin => main}/src/utils/saveContentToFile.ts (100%)

diff --git a/frontend/packages/admin/src/utils/index.ts b/frontend/packages/admin/src/utils/index.ts
index 3176835..00f39fc 100644
--- a/frontend/packages/admin/src/utils/index.ts
+++ b/frontend/packages/admin/src/utils/index.ts
@@ -1,4 +1,4 @@
-export { downloadLearnware } from "./download.js";
-export { fetchex } from "./fetchex.js";
-export { default as saveContentToFile } from "./saveContentToFile.js";
-export { hex_md5 } from "./encrypt.js";
+export { downloadLearnware } from "./download";
+export { fetchex } from "./fetchex";
+export { default as saveContentToFile } from "@main/utils/saveContentToFile";
+export { hex_md5 } from "./encrypt";
diff --git a/frontend/packages/main/src/utils/index.ts b/frontend/packages/main/src/utils/index.ts
index 9a6b278..5cbcbd5 100644
--- a/frontend/packages/main/src/utils/index.ts
+++ b/frontend/packages/main/src/utils/index.ts
@@ -1,5 +1,6 @@
-export { downloadLearnwareSync } from "./download.js";
-export { hex_md5 } from "./encrypt.js";
-export { verifyLearnware } from "./verifyLearnware.js";
-export { promiseReadFile } from "./promiseReadFile.js";
-export { debounce, throttle } from "./control.js";
+export { downloadLearnwareSync } from "./download";
+export { hex_md5 } from "./encrypt";
+export { verifyLearnware } from "./verifyLearnware";
+export { promiseReadFile } from "./promiseReadFile";
+export { debounce, throttle } from "./control";
+export { default as saveContentToFile } from "./saveContentToFile";
diff --git a/frontend/packages/admin/src/utils/saveContentToFile.ts b/frontend/packages/main/src/utils/saveContentToFile.ts
similarity index 100%
rename from frontend/packages/admin/src/utils/saveContentToFile.ts
rename to frontend/packages/main/src/utils/saveContentToFile.ts

From 6ae02173aaa702949da91089f7bf1080f96826d4 Mon Sep 17 00:00:00 2001
From: Qincheng Zheng <zhengqc@lamda.nju.edu.cn>
Date: Tue, 7 Nov 2023 16:58:00 +0800
Subject: [PATCH 5/6] feat(frontend): optimize heter search interaction

---
 frontend/packages/locale/src/en/public.ts     |   1 +
 frontend/packages/locale/src/en/search.ts     |   2 +
 frontend/packages/locale/src/zh-cn/public.ts  |   1 +
 frontend/packages/locale/src/zh-cn/search.ts  |   2 +
 .../src/components/Search/UserRequirement.vue | 130 ++++++++++++++--
 .../Specification/DescriptionInput.vue        | 142 ++++++++++--------
 .../src/components/Specification/SpecTag.vue  |  56 ++++---
 frontend/packages/main/src/views/Search.vue   |  11 +-
 8 files changed, 246 insertions(+), 99 deletions(-)

diff --git a/frontend/packages/locale/src/en/public.ts b/frontend/packages/locale/src/en/public.ts
index 61788cb..06815ab 100644
--- a/frontend/packages/locale/src/en/public.ts
+++ b/frontend/packages/locale/src/en/public.ts
@@ -1,3 +1,4 @@
 export default {
   Description: "Description",
+  Finish: "Finish",
 };
diff --git a/frontend/packages/locale/src/en/search.ts b/frontend/packages/locale/src/en/search.ts
index 7e02f32..d19202e 100644
--- a/frontend/packages/locale/src/en/search.ts
+++ b/frontend/packages/locale/src/en/search.ts
@@ -10,6 +10,8 @@ export default {
   Updated: "Updated",
   HeterogeneousSearch: "Heterogeneous Search",
   TurnOffHeterogeneousSearch: "Turn off heterogeneous search",
+  UploadHeterogeneousRequirement: "Upload heterogeneous requirement",
+  StartHeterogeneousSearch: "Start heterogeneous search",
   RecommendedMultipleLearnware: "Recommended multiple learnware",
   RecommendedMultipleLearnwareTips:
     "The learnwares listed below are highly recommended as they have the highest statistical specification similarity to your tasks. Combining these learnwares can lead to great effectiveness.",
diff --git a/frontend/packages/locale/src/zh-cn/public.ts b/frontend/packages/locale/src/zh-cn/public.ts
index b830128..23153d4 100644
--- a/frontend/packages/locale/src/zh-cn/public.ts
+++ b/frontend/packages/locale/src/zh-cn/public.ts
@@ -1,3 +1,4 @@
 export default {
   Description: "描述",
+  Finish: "完成",
 };
diff --git a/frontend/packages/locale/src/zh-cn/search.ts b/frontend/packages/locale/src/zh-cn/search.ts
index 151b899..7da7fe7 100644
--- a/frontend/packages/locale/src/zh-cn/search.ts
+++ b/frontend/packages/locale/src/zh-cn/search.ts
@@ -10,6 +10,8 @@ export default {
   Updated: "更新于",
   HeterogeneousSearch: "异构查搜",
   TurnOffHeterogeneousSearch: "关闭异构查搜",
+  UploadHeterogeneousRequirement: "上传异构需求",
+  StartHeterogeneousSearch: "开始异构查搜",
   RecommendedMultipleLearnware: "推荐多个学件",
   RecommendedMultipleLearnwareTips:
     "以下学件被推荐，因为它们与您的任务具有最高的统计规约相似性。结合这些学件可以带来很好的效果。",
diff --git a/frontend/packages/main/src/components/Search/UserRequirement.vue b/frontend/packages/main/src/components/Search/UserRequirement.vue
index fc2e1fe..f09e716 100644
--- a/frontend/packages/main/src/components/Search/UserRequirement.vue
+++ b/frontend/packages/main/src/components/Search/UserRequirement.vue
@@ -7,6 +7,8 @@ import TaskTypeBtns from "../Specification/SpecTag/TaskType.vue";
 import LibraryTypeBtns from "../Specification/SpecTag/LibraryType.vue";
 import FileUpload from "../Specification/FileUpload.vue";
 import ScenarioListBtns from "../Specification/SpecTag/ScenarioList.vue";
+import DescriptionInput from "../Specification/DescriptionInput.vue";
+import { saveContentToFile } from "../../utils";
 import type { DataType, TaskType, LibraryType, Filter } from "@beiming-system/types/learnware";
 
 export interface Props {
@@ -43,6 +45,27 @@ const scenarioList = ref(tryScenarioList);
 
 const files = ref([]);
 
+const heterDialog = ref(false);
+const heterTab = ref<"dataType" | "taskType">("dataType");
+const dataTypeDescription = ref({
+  Dimension: 7,
+  Description: {
+    0: "gender",
+    1: "age",
+    2: "the description of feature 2",
+    5: "the description of feature 5",
+  },
+});
+const taskTypeDescription = ref({
+  Dimension: 2,
+  Description: {
+    0: "the description of label 0",
+    1: "the description of label 1",
+  },
+});
+const tempDataTypeDescription = ref(dataTypeDescription.value);
+const tempTaskTypeDescription = ref(taskTypeDescription.value);
+
 const requirement = computed(() => ({
   id: id.value,
   name: search.value,
@@ -51,8 +74,20 @@ const requirement = computed(() => ({
   libraryType: libraryType.value,
   scenarioList: scenarioList.value,
   files: files.value,
+  dataTypeDescription: dataTypeDescription.value,
+  taskTypeDescription: taskTypeDescription.value,
 }));
 
+watch(
+  () => heterDialog.value,
+  (val) => {
+    if (!val) {
+      dataTypeDescription.value = tempDataTypeDescription.value;
+      taskTypeDescription.value = tempTaskTypeDescription.value;
+    }
+  },
+);
+
 watch(
   () => requirement.value,
   () => {
@@ -118,19 +153,96 @@ watch(
 
     <div class="p-4 pt-0 border-t-1 border-gray-300">
       <template v-if="isHeterogeneous">
-        <div ref="anchorRef" class="mt-3 mb-5 w-full text-h6 transition-all truncate">
-          <v-icon class="mr-3" icon="mdi-upload" color="black" size="small"></v-icon>
-          Upload Feature Description
+        <div class="mt-3 mb-5 w-full text-h6 transition-all truncate">
+          <v-icon class="mr-3" icon="mdi-vector-difference" color="black" size="small"></v-icon>
+          {{ t("Search.UploadHeterogeneousRequirement") }}
         </div>
 
-        <file-upload
-          v-model="files"
-          :height="28"
-          :tips="t('Submit.File.DragFileHere', { file: 'json' })"
-        />
+        <v-dialog v-model="heterDialog" width="1024">
+          <template v-slot:activator="{ props }">
+            <v-card v-bind="props" flat class="border-gray-500 border-2 rounded-lg bg-transparent">
+              <v-card-text class="text-center text-base md:text-xl">
+                {{ t("Search.StartHeterogeneousSearch") }}
+              </v-card-text>
+            </v-card>
+          </template>
+
+          <v-card class="p-4 md:p-8 md:pt-4">
+            <div>
+              <v-tabs v-model="heterTab" align-tabs="center">
+                <v-tab value="dataType">{{
+                  t("Submit.SemanticSpecification.DataType.DescriptionInput.Name")
+                }}</v-tab>
+                <v-tab value="taskType">{{
+                  t("Submit.SemanticSpecification.TaskType.DescriptionOutput.Name")
+                }}</v-tab>
+              </v-tabs>
+            </div>
+
+            <v-window v-model="heterTab" class="overflow-y-scroll">
+              <v-window-item value="dataType">
+                <div class="flex justify-between">
+                  <div class="text-h4 font-semibold">
+                    {{ t("Submit.SemanticSpecification.DataType.DescriptionInput.Name") }}
+                  </div>
+                  <v-btn
+                    icon="mdi-download"
+                    variant="flat"
+                    @click="
+                      () =>
+                        saveContentToFile(
+                          JSON.stringify(tempDataTypeDescription, undefined, 2),
+                          'text/json',
+                          'dataTypeDescription.json',
+                        )
+                    "
+                  />
+                </div>
+                <description-input
+                  v-model="tempDataTypeDescription"
+                  :name="t('Submit.SemanticSpecification.DataType.DescriptionInput.Name')"
+                  class="mt-4"
+                >
+                </description-input>
+              </v-window-item>
+
+              <v-window-item value="taskType">
+                <div class="flex justify-between">
+                  <div class="mt-4 text-h4 font-semibold">
+                    {{ t("Submit.SemanticSpecification.TaskType.DescriptionOutput.Name") }}
+                  </div>
+                  <v-btn
+                    icon="mdi-download"
+                    variant="flat"
+                    @click="
+                      () =>
+                        saveContentToFile(
+                          JSON.stringify(tempTaskTypeDescription, undefined, 2),
+                          'text/json',
+                          'dataTypeDescription.json',
+                        )
+                    "
+                  />
+                </div>
+                <description-input
+                  v-model="tempTaskTypeDescription"
+                  :name="t('Submit.SemanticSpecification.TaskType.DescriptionOutput.Name')"
+                  class="mt-4"
+                >
+                </description-input>
+              </v-window-item>
+            </v-window>
+
+            <div class="flex justify-end mt-4">
+              <v-btn color="primary" rounded variant="flat" @click="heterDialog = false">
+                {{ t("Public.Finish") }}
+              </v-btn>
+            </div>
+          </v-card>
+        </v-dialog>
       </template>
 
-      <div ref="anchorRef" class="mt-3 mb-5 w-full text-h6 transition-all truncate">
+      <div class="mt-3 mb-5 w-full text-h6 transition-all truncate">
         <v-icon class="mr-3" icon="mdi-upload" color="black" size="small"></v-icon>
         {{ t("Search.UploadStatisticalRequirement") }}
       </div>
diff --git a/frontend/packages/main/src/components/Specification/DescriptionInput.vue b/frontend/packages/main/src/components/Specification/DescriptionInput.vue
index 4764cb8..e2dbc20 100644
--- a/frontend/packages/main/src/components/Specification/DescriptionInput.vue
+++ b/frontend/packages/main/src/components/Specification/DescriptionInput.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { useDisplay } from "vuetify";
 import { debounce } from "../../utils";
 
 export interface Props {
@@ -14,8 +13,6 @@ export interface Props {
 
 const { t, locale } = useI18n();
 
-const display = useDisplay();
-
 const emits = defineEmits(["update:modelValue"]);
 
 const props = defineProps<Props>();
@@ -93,66 +90,85 @@ watch(
 </script>
 
 <template>
-  <div class="mt-3">
-    <v-alert type="info" color="primary" closable>
-      <slot v-if="['sm', 'xs'].includes(display.name.value)" name="msg-small" />
-      <slot v-else name="msg" />
-    </v-alert>
-    <v-container class="mt-3">
-      <v-row>
-        <v-col cols="12" md="6" class="flex flex-col max-h-[600px]">
-          <v-virtual-scroll :items="descriptionArray">
-            <template #default="{ index: idx }">
-              <v-hover>
-                <template #default="{ isHovering, props: hoverProps }">
-                  <div v-bind="hoverProps">
-                    <v-text-field
-                      v-model="descriptionArray[idx]"
-                      :label="`${t('Public.Description')}: ${name} ${idx}`"
-                      class="mb-1"
-                      hide-details
-                    >
-                      <template v-if="isHovering" #append-inner>
-                        <v-icon
-                          class="mr-1"
-                          icon="mdi-plus"
-                          @click="() => descriptionArray.splice(idx, 0, null)"
-                        />
-                        <v-icon
-                          icon="mdi-delete"
-                          @click="
-                            () => (descriptionArray = descriptionArray.filter((_, i) => i !== idx))
-                          "
-                        />
-                      </template>
-                    </v-text-field>
-                  </div>
-                </template>
-              </v-hover>
+  <div class="grid grid-cols-1 gap-0 md:grid-cols-2 md:gap-3">
+    <div class="flex flex-col max-h-[600px] overflow-scroll">
+      <v-virtual-scroll v-if="modelValue.Dimension > 10" :items="descriptionArray" class="flex-1">
+        <template #default="{ index: idx }">
+          <v-hover>
+            <template #default="{ isHovering, props: hoverProps }">
+              <div v-bind="hoverProps">
+                <v-text-field
+                  v-model="descriptionArray[idx]"
+                  :label="`${t('Public.Description')}: ${name} ${idx}`"
+                  class="mb-1"
+                  hide-details
+                >
+                  <template v-if="isHovering" #append-inner>
+                    <v-icon
+                      class="mr-1"
+                      icon="mdi-plus"
+                      @click="() => descriptionArray.splice(idx, 0, null)"
+                    />
+                    <v-icon
+                      icon="mdi-delete"
+                      @click="
+                        () => (descriptionArray = descriptionArray.filter((_, i) => i !== idx))
+                      "
+                    />
+                  </template>
+                </v-text-field>
+              </div>
             </template>
-          </v-virtual-scroll>
-          <div>
-            <v-btn
-              block
-              variant="flat"
-              class="mt-1"
-              @click="descriptionArray = [...descriptionArray, null]"
-            >
-              <v-icon size="large" color="#555">mdi-plus</v-icon>
-            </v-btn>
-          </div>
-        </v-col>
-        <v-col cols="12" md="6" class="max-h-[600px]">
-          <div class="h-full overflow-y-scroll">
-            <v-textarea
-              v-model="descriptionString"
-              auto-grow
-              :label="`${name}${locale != 'zh-cn' ? ' ' : ''}${t('Public.Description')}`"
-              :error-messages="errorMessages"
-            />
-          </div>
-        </v-col>
-      </v-row>
-    </v-container>
+          </v-hover>
+        </template>
+      </v-virtual-scroll>
+      <template v-else>
+        <v-hover v-for="(_description, idx) in descriptionArray" :key="idx">
+          <template #default="{ isHovering, props: hoverProps }">
+            <div v-bind="hoverProps">
+              <v-text-field
+                v-model="descriptionArray[idx]"
+                :label="`${t('Public.Description')}: ${name} ${idx}`"
+                class="mb-1"
+                hide-details
+              >
+                <template v-if="isHovering" #append-inner>
+                  <v-icon
+                    class="mr-1"
+                    icon="mdi-plus"
+                    @click="() => descriptionArray.splice(idx, 0, null)"
+                  />
+                  <v-icon
+                    icon="mdi-delete"
+                    @click="() => (descriptionArray = descriptionArray.filter((_, i) => i !== idx))"
+                  />
+                </template>
+              </v-text-field>
+            </div>
+          </template>
+        </v-hover>
+      </template>
+      <div>
+        <v-btn
+          block
+          variant="flat"
+          class="mt-1"
+          @click="descriptionArray = [...descriptionArray, null]"
+        >
+          <v-icon size="large" color="#555">mdi-plus</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <div class="max-h-[600px]">
+      <div class="h-full overflow-y-scroll">
+        <v-textarea
+          v-model="descriptionString"
+          auto-grow
+          :label="`${name}${locale != 'zh-cn' ? ' ' : ''}${t('Public.Description')}`"
+          :error-messages="errorMessages"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/frontend/packages/main/src/components/Specification/SpecTag.vue b/frontend/packages/main/src/components/Specification/SpecTag.vue
index e1d72b6..b60c6ea 100644
--- a/frontend/packages/main/src/components/Specification/SpecTag.vue
+++ b/frontend/packages/main/src/components/Specification/SpecTag.vue
@@ -72,35 +72,47 @@ const taskTypeDescription = computed({
       </v-card-actions>
     </v-scroll-y-transition>
     <data-type-btns v-model="dataType" />
-    <description-input
-      v-if="dataType === 'Table'"
-      v-model="dataTypeDescription"
-      :name="t('Submit.SemanticSpecification.DataType.DescriptionInput.Name')"
-    >
-      <template #msg>
-        {{ t("Submit.SemanticSpecification.DataType.DescriptionInput.FeatureTips") }}
-      </template>
-      <template #msg-small>
-        {{ t("Submit.SemanticSpecification.DataType.DescriptionInput.FeatureTipsSmall") }}
-      </template>
-    </description-input>
+
+    <template v-if="dataType === 'Table'">
+      <v-alert class="mt-3" type="info" color="primary" closable>
+        <span class="hidden sm:inline">{{
+          t("Submit.SemanticSpecification.DataType.DescriptionInput.FeatureTips")
+        }}</span>
+        <span class="sm:hidden">{{
+          t("Submit.SemanticSpecification.DataType.DescriptionInput.FeatureTipsSmall")
+        }}</span>
+      </v-alert>
+      <description-input
+        v-model="dataTypeDescription"
+        :name="t('Submit.SemanticSpecification.DataType.DescriptionInput.Name')"
+        class="mt-3"
+      />
+    </template>
+
     <task-type-btns v-model="taskType" />
-    <description-input
+
+    <template
       v-if="
         taskType === 'Classification' ||
         taskType === 'Regression' ||
         taskType === 'Feature Extraction'
       "
-      v-model="taskTypeDescription"
-      :name="t('Submit.SemanticSpecification.TaskType.DescriptionOutput.Name')"
     >
-      <template #msg>
-        {{ t("Submit.SemanticSpecification.TaskType.DescriptionOutput.LabelTips") }}
-      </template>
-      <template #msg-small>
-        {{ t("Submit.SemanticSpecification.TaskType.DescriptionOutput.LabelTipsSmall") }}
-      </template>
-    </description-input>
+      <v-alert class="mt-3" type="info" color="primary" closable>
+        <span class="hidden sm:inline">{{
+          t("Submit.SemanticSpecification.TaskType.DescriptionOutput.LabelTips")
+        }}</span>
+        <span class="sm:hidden">{{
+          t("Submit.SemanticSpecification.TaskType.DescriptionOutput.LabelTipsSmall")
+        }}</span>
+      </v-alert>
+      <description-input
+        v-model="taskTypeDescription"
+        :name="t('Submit.SemanticSpecification.TaskType.DescriptionOutput.Name')"
+        class="mt-3"
+      />
+    </template>
+
     <library-type-btns v-model="libraryType" />
     <scenario-list-btns v-model="scenarioList" />
   </div>
diff --git a/frontend/packages/main/src/views/Search.vue b/frontend/packages/main/src/views/Search.vue
index 6f77b91..eaddc98 100644
--- a/frontend/packages/main/src/views/Search.vue
+++ b/frontend/packages/main/src/views/Search.vue
@@ -257,7 +257,7 @@ watch(
         .then((res: ArrayBuffer) => new TextDecoder("ascii").decode(res))
         .then((res) => JSON.parse(res))
         .then((res) => {
-          if (res.type === "table") {
+          if (res.type === "RKMETableSpecification") {
             rkmeTypeTable.value = true;
           }
         })
@@ -295,16 +295,16 @@ onMounted(() => init());
 
 <template>
   <div class="mx-auto w-full lg:flex">
-    <v-scroll-y-transition class="fixed w-full z-index-10">
-      <v-card-actions v-if="showError">
+    <v-scroll-y-transition>
+      <div v-if="showError" class="fixed w-full z-10">
         <v-alert
-          class="w-full max-w-[900px] mx-auto"
+          class="max-w-[900px] mx-auto z-10"
           closable
           :text="errorMsg"
           type="error"
           @click:close="showError = false"
         />
-      </v-card-actions>
+      </div>
     </v-scroll-y-transition>
 
     <div class="w-full lg:max-w-[460px]">
@@ -313,6 +313,7 @@ onMounted(() => init());
         class="bottom-0 w-full lg:fixed lg:max-w-[460px]"
         style="top: var(--v-layout-top)"
         :is-admin="isAdmin"
+        :is-heterogeneous="isHeterogeneous"
       >
         <template #prepend>
           <v-btn

From dc348c288794a1f10520eb3f436e5c5e4cf3a6e6 Mon Sep 17 00:00:00 2001
From: AnnyTerfect <1247470246@qq.com>
Date: Tue, 7 Nov 2023 18:42:26 +0800
Subject: [PATCH 6/6] perf(frontend): optimize scrollbar visibility

---
 .../packages/main/src/components/Search/UserRequirement.vue | 4 ++--
 .../main/src/components/Specification/DescriptionInput.vue  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/main/src/components/Search/UserRequirement.vue b/frontend/packages/main/src/components/Search/UserRequirement.vue
index f09e716..04cfc6e 100644
--- a/frontend/packages/main/src/components/Search/UserRequirement.vue
+++ b/frontend/packages/main/src/components/Search/UserRequirement.vue
@@ -179,7 +179,7 @@ watch(
               </v-tabs>
             </div>
 
-            <v-window v-model="heterTab" class="overflow-y-scroll">
+            <v-window v-model="heterTab">
               <v-window-item value="dataType">
                 <div class="flex justify-between">
                   <div class="text-h4 font-semibold">
@@ -258,7 +258,7 @@ watch(
 
 <style scoped lang="scss">
 .filter {
-  @apply p-2 w-full md:h-full md:overflow-y-scroll sm:px-5;
+  @apply p-2 w-full md:h-full md:overflow-y-auto sm:px-5;
 
   * {
     @apply mt-2;
diff --git a/frontend/packages/main/src/components/Specification/DescriptionInput.vue b/frontend/packages/main/src/components/Specification/DescriptionInput.vue
index e2dbc20..5ba9978 100644
--- a/frontend/packages/main/src/components/Specification/DescriptionInput.vue
+++ b/frontend/packages/main/src/components/Specification/DescriptionInput.vue
@@ -91,8 +91,8 @@ watch(
 
 <template>
   <div class="grid grid-cols-1 gap-0 md:grid-cols-2 md:gap-3">
-    <div class="flex flex-col max-h-[600px] overflow-scroll">
-      <v-virtual-scroll v-if="modelValue.Dimension > 10" :items="descriptionArray" class="flex-1">
+    <div class="flex flex-col max-h-[600px]">
+      <v-virtual-scroll v-if="modelValue.Dimension > 7" :items="descriptionArray" class="flex-1">
         <template #default="{ index: idx }">
           <v-hover>
             <template #default="{ isHovering, props: hoverProps }">
@@ -161,7 +161,7 @@ watch(
     </div>
 
     <div class="max-h-[600px]">
-      <div class="h-full overflow-y-scroll">
+      <div class="h-full overflow-y-auto">
         <v-textarea
           v-model="descriptionString"
           auto-grow