fix

src/components/task/TaskAssetManager.vue

@@ -1,11 +1,10 @@
 <template>
   <n-flex vertical>
     <n-flex align="center">
-      <n-text strong>素材</n-text>
-      <n-button size="small" @click="showUpload = true">上传图片</n-button>
+      <n-text strong>图片素材</n-text>
+      <n-button size="small" @click="showUpload = true">上传</n-button>
     </n-flex>
-    <n-empty v-if="!assets.length" description="暂无素材" size="small" />
-    <n-flex v-else wrap>
+    <n-flex v-if="assets.length" wrap>
       <n-card
         v-for="asset in assets"
         :key="asset.name"
@@ -15,13 +14,13 @@
         <template #cover>
           <n-image
             :src="asset.url"
-            style="width: 100%; height: 80px; object-fit: cover"
+            style="width: 100%; height: 100px; object-fit: contain"
           />
         </template>
         <n-flex align="center" justify="space-between">
-          <n-text style="font-size: 12px; word-break: break-all">{{
-            asset.name
-          }}</n-text>
+          <n-text style="font-size: 12px; word-break: break-all">
+            {{ asset.name }}
+          </n-text>
           <n-button
             size="tiny"
             quaternary

src/components/task/TaskPanel.vue

@@ -33,7 +33,10 @@
         </template>
       </n-flex>
       <n-flex>
-        <n-tooltip v-if="tutorialAssets.length && taskTab === TASK_TYPE.Tutorial" trigger="hover">
+        <n-tooltip
+          v-if="tutorialAssets.length && taskTab === TASK_TYPE.Tutorial"
+          trigger="hover"
+        >
           <template #trigger>
             <n-button text @click="showAssets = true">
               <Icon :width="16" icon="lucide:image"></Icon>
@@ -45,7 +48,9 @@
           <template #trigger>
             <n-button
               text
-              @click="$router.push({ name: 'submissions', params: { page: 1 } })"
+              @click="
+                $router.push({ name: 'submissions', params: { page: 1 } })
+              "
             >
               <Icon :width="16" icon="lucide:list"></Icon>
             </n-button>
@@ -76,19 +81,25 @@
   <n-modal
     v-model:show="showAssets"
     preset="card"
-    title="素材"
-    style="width: 500px"
+    title="图片素材"
+    style="width: 570px"
   >
-    <n-grid :cols="3" :x-gap="12" :y-gap="12">
-      <n-gi v-for="asset in tutorialAssets" :key="asset.name">
-        <n-card size="small" :title="asset.name">
+    <n-flex wrap>
+      <n-card
+        v-for="asset in tutorialAssets"
+        :key="asset.name"
+        :title="asset.name"
+        size="small"
+        style="width: 120px"
+      >
+        <template #cover>
           <n-image
             :src="asset.url"
             style="width: 100%; height: 100px; object-fit: contain"
           />
+        </template>
       </n-card>
-      </n-gi>
-    </n-grid>
+    </n-flex>
   </n-modal>
 </template>
 <script lang="ts" setup>

src/pages/TutorialEditor.vue

@@ -40,7 +40,7 @@
 
     <n-gi :span="6" class="col">
       <n-flex vertical>
-        <n-form inline>
+        <n-form inline :show-feedback="false">
           <n-form-item label="序号" label-placement="left">
             <n-input-number v-model:value="tutorial.display" />
           </n-form-item>