perf<词根管理>: 优化交互体验

.env.development

@@ -1,9 +1,11 @@
+# ignore
 # 本地环境
 ENV = 'development'
 
 # 本地环境接口地址
 # VITE_API_URL = 'http://127.0.0.1:8000'
-VITE_API_URL = 'http://192.168.1.225/'
+# VITE_API_URL = 'http://192.168.1.225/'
+VITE_API_URL = 'http://192.168.1.27:8080/'
 # VITE_API_URL = 'https://ads.vzzon.com'
 
 # 是否启用按钮权限

src/views/keyword/rootWordManage/components/root-word-manage-table.vue

@@ -8,7 +8,6 @@
 import { nextTick, onMounted, reactive, ref } from 'vue';
 import { Plus, Search, Upload } from '@element-plus/icons-vue';
 import * as api from '../api';
-import { uploadFile } from '../api';
 import type { UploadInstance, UploadRawFile } from 'element-plus';
 import { ElMessage, FormInstance, FormRules, genFileId } from 'element-plus';
 
@@ -271,30 +270,19 @@ function resetForm(formEl: FormInstance | undefined) {
   dialogVisible.value = false;
 }
 
-// async function handleFileChange(file: any) {
-//   if (file.raw) {
-//     await handleUpload(file.raw);
-//   }
-// }
-
-// async function handleUpload(uploadFile: any) {
-//   try {
-//     const response = await api.uploadFile(uploadFile);
-//     handleResponse(response);
-//   } catch (error) {
-//     console.error('error:', error);
-//   }
-// }
-
+/**
+ * 上传文件
+ * @param uploadRequest 上传请求
+ */
 async function handleCustomUpload(uploadRequest: any) {
   try {
     const { file } = uploadRequest;
-    const response = await uploadFile(file);
+    const response = await api.uploadFile(file);
     handleResponse(response);
     uploadRequest.onSuccess(response); // 通知 el-upload 上传成功
   } catch (error) {
     console.log('error:', error);
-    // uploadRequest.onError(error);
+    uploadRequest.onError(error);
   }
 }
 
@@ -373,42 +361,44 @@ function handleResponse(response: any) {
       </div>
       <!-- 表格 -->
       <el-card shadow="never">
-        <el-table :data="tableData" stripe max-height="530" style="width: 100%">
-          <el-table-column fixed="left" prop="add_date" label="添加日期" width="180" sortable />
-          <el-table-column prop="searchTerm" label="词根" sortable>
-            <template #default="{ row }">
-              <el-input ref="searchTermInpRef" v-if="row.isEditing" v-model="row.searchTerm" @change="updateSearchTerm(row)" />
-              <span class="font-bold" v-else>{{ row.searchTerm }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="searchTerm_type" label="词根类型" sortable>
-            <template #default="{ row }">
-              <el-popconfirm
-                title="确定修改吗?"
-                @confirm="updateSearchTermType(row)"
-                @cancel="cancelUpdate(row)"
-                :visible="row.popConfirmVisible">
-                <template #reference>
-                  <el-select v-model="row.searchTerm_type" @change="showPopConfirm(row)" style="width: 150px">
-                    <el-option label="positive" value="positive" />
-                    <el-option label="negative" value="negative" />
-                  </el-select>
-                </template>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-          <el-table-column fixed="right" label="操作" width="120">
-            <template #default="{ row }">
-              <el-button link type="primary" size="small" @click="handleClick(row)" v-if="!row.isEditing"> 编辑</el-button>
-              <el-button link type="primary" size="small" @click="handleClick(row)" v-else> 取消</el-button>
-              <el-popconfirm title="确定删除吗?" @confirm="handleDelete(row)">
-                <template #reference>
-                  <el-button link type="danger" size="small">删除</el-button>
-                </template>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
+        <div style="height: 535px; overflow: auto">
+          <el-table :data="tableData" stripe style="width: 100%">
+            <el-table-column fixed prop="add_date" label="添加日期" width="180" sortable />
+            <el-table-column prop="searchTerm" label="词根" sortable>
+              <template #default="{ row }">
+                <el-input ref="searchTermInpRef" v-if="row.isEditing" v-model="row.searchTerm" @change="updateSearchTerm(row)" />
+                <span class="font-bold" v-else>{{ row.searchTerm }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="searchTerm_type" label="词根类型" sortable>
+              <template #default="{ row }">
+                <el-popconfirm
+                  title="确定修改吗?"
+                  @confirm="updateSearchTermType(row)"
+                  @cancel="cancelUpdate(row)"
+                  :visible="row.popConfirmVisible">
+                  <template #reference>
+                    <el-select v-model="row.searchTerm_type" @change="showPopConfirm(row)" style="width: 150px">
+                      <el-option label="positive" value="positive" />
+                      <el-option label="negative" value="negative" />
+                    </el-select>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="120">
+              <template #default="{ row }">
+                <el-button link type="primary" size="small" @click="handleClick(row)" v-if="!row.isEditing"> 编辑</el-button>
+                <el-button link type="primary" size="small" @click="handleClick(row)" v-else> 取消</el-button>
+                <el-popconfirm title="确定删除吗?" @confirm="handleDelete(row)">
+                  <template #reference>
+                    <el-button link type="danger" size="small">删除</el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
         <div class="mt-3.5 flex justify-end">
           <el-pagination
             v-model:current-page="currentPage"