ow

WebVue/src/components/basic/MyComputer.vue

@@ -17,7 +17,7 @@
     </div>
 
     <div class="my-computer-body" v-if="viewMode === 'icon'">
-      <div v-for="record in datas" :key="record.FileId + '-' + record.FileName" class="file-card-wrapper"
+      <div v-for="record in sortedDatas" :key="record.FileId + '-' + record.FileName" class="file-card-wrapper"
         @click="onCardClick(record)" @dblclick="onCardDblClick(record)">
         <div class="file-checkbox-wrapper">
           <a-checkbox :checked="isSelected(record)" @click.stop="toggleSelect(record)" />
@@ -63,11 +63,11 @@
         </div>
       </div>
 
-      <a-empty v-if="!datas || datas.length === 0" description="暂无文件" />
+      <a-empty v-if="!sortedDatas || sortedDatas.length === 0" description="暂无文件" />
     </div>
 
     <div class="my-computer-body list-body" v-else>
-      <div v-for="record in datas" :key="record.FileId + '-' + record.FileName" class="list-item"
+      <div v-for="record in sortedDatas" :key="record.FileId + '-' + record.FileName" class="list-item"
         :class="{ selected: isSelected(record) }" @click="onCardClick(record)" @dblclick="onCardDblClick(record)">
         <a-checkbox :checked="isSelected(record)" @click.stop="toggleSelect(record)" />
         <div class="list-icon">
@@ -92,7 +92,7 @@
         <div class="list-date">{{ formatDate(record.CreatedDatetime) }}</div>
       </div>
 
-      <a-empty v-if="!datas || datas.length === 0" description="暂无文件" />
+      <a-empty v-if="!sortedDatas || sortedDatas.length === 0" description="暂无文件" />
     </div>
   </div>
 </template>
@@ -125,6 +125,24 @@ const emit = defineEmits([
 
 const viewMode = ref<"icon" | "list">("icon");
 
+/**
+ * 默认排序：文件夹排在最前面，之后按文件名升序。
+ * 只影响显示顺序，不改动父组件传进来的数组。
+ * 中文用 localeCompare 走拼音排序（直接比大小会按 Unicode 排，顺序很怪），
+ * 带 numeric 让「文件2」排在「文件10」前面。
+ */
+const sortedDatas = computed(() => {
+  if (!props.datas) return [];
+  return [...props.datas].sort((a, b) => {
+    const aIsDir = a.IsDirectoryIndc == "Y" ? 0 : 1;
+    const bIsDir = b.IsDirectoryIndc == "Y" ? 0 : 1;
+    if (aIsDir !== bIsDir) return aIsDir - bIsDir;
+    return (a.OrgFileName ?? "").localeCompare(b.OrgFileName ?? "", "zh-CN", {
+      numeric: true,
+    });
+  });
+});
+
 const isAllChecked = computed(() => {
   if (!props.datas || props.datas.length === 0) return false;
   return props.datas.every((d) => props.selectedKeys.some((s) => s.FileId === d.FileId));