@done-coding/admin-core 0.22.2 → 0.22.3-alpha.0

package/es/index.mjs

@@ -23,57 +23,62 @@ import { default as default24 } from "./components/panel/PanelItemNestPanel.vue.
 import { default as default25 } from "./components/misc/SelectModule.vue.mjs";
 import { default as default26 } from "./components/display/ShadowClone.vue.mjs";
 import { default as default27 } from "./components/slot-layout/SlotLayoutTemplate.vue.mjs";
-import { default as default28 } from "./components/display/TabsMain.vue.mjs";
-import { default as default29 } from "./components/misc/TriggerAutoImport.vue.mjs";
-import { default as default30 } from "./components/display/WatchSize.vue.mjs";
+import { default as default28 } from "./components/table/TableEmpty.vue.mjs";
+import { default as default29 } from "./components/display/TabsMain.vue.mjs";
+import { default as default30 } from "./components/misc/TriggerAutoImport.vue.mjs";
+import { default as default31 } from "./components/display/WatchSize.vue.mjs";
 import { APP_API_LIST_MODEL_KEY_CONFIG } from "./config/list-model.mjs";
 import { APP_GLOBAL_IMAGE_PREVIEW_KEY, APP_GLOBAL_VIDEO_PREVIEW_KEY, GLOBAL_MODAL_REMOTE_KEY } from "./components/modal/modal-global-keys.mjs";
 import { APP_LAYOUT_APP_STORE_KEY, APP_LAYOUT_BRIDGE_KEY, APP_LAYOUT_USER_STORE_KEY, APP_PAGE_CONTENT_INSET, BODY_CONTENT_VIEWPORT_HEIGHT, BODY_CONTENT_VIEWPORT_INSET, BODY_CONTENT_VIEWPORT_RECT, CORE_BRIDGE_KEY, FORM_NEST_REGISTRY_KEY, NEST_LAYOUT_SCALE_KEY, SCOPE_VIEWPORT_MAX_HEIGHT, TABS_MAIN_VISUAL_LEVEL, getModalShelfInjectionKey } from "./inject/key.mjs";
 import { APP_PAGE_SLOT_Z_INDEX, computeAppPageContentInset, computeAppPageReducedViewportHeight, computeAppPageReducedViewportWidth, computeAppPageSlotShimStyles, computeAppPageSlotStyles } from "./components/app-layout/app-page-geometry.mjs";
-import { default as default31 } from "./components/display/ActionConfirm.vue.mjs";
-import { default as default32 } from "./components/app-layout/AppAside.vue.mjs";
-import { default as default33 } from "./components/app-layout/AppBody.vue.mjs";
-import { default as default34 } from "./components/app-layout/AppBreadcrumb.vue.mjs";
-import { default as default35 } from "./components/app-layout/AppFooter.vue.mjs";
-import { default as default36 } from "./components/app-layout/AppHeader.vue.mjs";
-import { default as default37 } from "./components/app-layout/AppLayout.vue.mjs";
-import { default as default38 } from "./components/app-layout/AppPage.vue.mjs";
-import { default as default39 } from "./components/app-layout/AppSidebar.vue.mjs";
-import { default as default40 } from "./components/app-layout/AppTheme.vue.mjs";
-import { default as default41 } from "./components/misc/AutoRefresh.vue.mjs";
-import { default as default42 } from "./components/misc/AutoRefreshGroup.vue.mjs";
+import { default as default32 } from "./components/display/ActionConfirm.vue.mjs";
+import { default as default33 } from "./components/app-layout/AppAside.vue.mjs";
+import { default as default34 } from "./components/app-layout/AppBody.vue.mjs";
+import { default as default35 } from "./components/app-layout/AppBreadcrumb.vue.mjs";
+import { default as default36 } from "./components/app-layout/AppFooter.vue.mjs";
+import { default as default37 } from "./components/app-layout/AppHeader.vue.mjs";
+import { default as default38 } from "./components/app-layout/AppLayout.vue.mjs";
+import { default as default39 } from "./components/app-layout/AppPage.vue.mjs";
+import { default as default40 } from "./components/app-layout/AppSidebar.vue.mjs";
+import { default as default41 } from "./components/app-layout/AppTheme.vue.mjs";
+import { default as default42 } from "./components/misc/AutoRefresh.vue.mjs";
+import { default as default43 } from "./components/misc/AutoRefreshGroup.vue.mjs";
 import { CORE_VIEWPORT_DECOR_ZINDEX_ABOVE, CORE_VIEWPORT_DECOR_ZINDEX_BELOW } from "./components/app-layout/viewport.mjs";
-import { default as default43, default as default44 } from "./components/modal/ModalConfirm.vue.mjs";
+import { default as default44, default as default45 } from "./components/modal/ModalConfirm.vue.mjs";
 import { DC_SLOT_ATTR, SlotRegion, parseSlotRegion } from "./config/slot-region.mjs";
+import { default as default46 } from "./components/data-view/DataGridView.vue.mjs";
 import { EXPORT_MAX_LIMIT, OPERATE_COLUMN_PROP, exportCSV, pickExportColumns } from "./utils/export.mjs";
 import { FORM_CONFIG_SELECT_ALL_VALUE, getConfirmPasswordRule, passwordRule, setFormComponentType } from "./helpers/form.mjs";
 import { FORM_ITEM_CHANGE_LOADING, NEST_LAYOUT_TIERS, ceilToTier, generateFormData, getBlurSubmit, getChangeSubmit, getDatePickerShortcuts, getEnterSubmit, getPlaceholder, getVModelSugar, parseFormData, resolveFormLayout, resolveLayoutSpan, setInputComponent, setSelectComponent, stringifyFormData, swiftFormItemConfig } from "./components/form/utils.mjs";
-import { default as default45 } from "./components/form/FormActiveFilter.vue.mjs";
-import { default as default46 } from "./components/form/FormItemNestForm.vue.mjs";
-import { default as default47 } from "./components/form/FormItemNestFormList.vue.mjs";
-import { default as default48 } from "./components/form/FormMain.vue.mjs";
-import { default as default49 } from "./components/form/FormSearch.vue.mjs";
-import { default as default50 } from "./components/form/FormShadowCloneDispatch.vue.mjs";
-import { default as default51 } from "./components/form/FormSortSwitch.vue.mjs";
-import { default as default52 } from "./components/form/FormSortSwitchGroup.vue.mjs";
-import { default as default53 } from "./components/form/FormSubmitPanel.vue.mjs";
-import { default as default54 } from "./components/form/FormUpload.vue.mjs";
-import { default as default55 } from "./components/form/FormUploadAudio.vue.mjs";
-import { default as default56 } from "./components/form/FormUploadImage.vue.mjs";
-import { default as default57 } from "./components/form/FormUploadVideo.vue.mjs";
-import { default as default58 } from "./components/form/FormVerifyImage.vue.mjs";
-import { default as default59, default as default60 } from "./components/list-layout/ListLayout.vue.mjs";
-import { default as default61 } from "./components/modal/ModalVideoPreview.vue.mjs";
-import { default as default62 } from "./components/panel/PanelEditSwitch.vue.mjs";
-import { default as default63 } from "./components/panel/PanelItem.vue.mjs";
-import { default as default64 } from "./components/panel/PanelItemNestForm.vue.mjs";
-import { default as default65 } from "./components/panel/PanelMain.vue.mjs";
+import { default as default47 } from "./components/form/FormActiveFilter.vue.mjs";
+import { default as default48 } from "./components/form/FormItemNestForm.vue.mjs";
+import { default as default49 } from "./components/form/FormItemNestFormList.vue.mjs";
+import { default as default50 } from "./components/form/FormMain.vue.mjs";
+import { default as default51 } from "./components/form/FormSearch.vue.mjs";
+import { default as default52 } from "./components/form/FormShadowCloneDispatch.vue.mjs";
+import { default as default53 } from "./components/form/FormSortSwitch.vue.mjs";
+import { default as default54 } from "./components/form/FormSortSwitchGroup.vue.mjs";
+import { default as default55 } from "./components/form/FormSubmitPanel.vue.mjs";
+import { default as default56 } from "./components/form/FormUpload.vue.mjs";
+import { default as default57 } from "./components/form/FormUploadAudio.vue.mjs";
+import { default as default58 } from "./components/form/FormUploadImage.vue.mjs";
+import { default as default59 } from "./components/form/FormUploadVideo.vue.mjs";
+import { default as default60 } from "./components/form/FormVerifyImage.vue.mjs";
+import { default as default61 } from "./components/data-view/InfiniteListView.vue.mjs";
+import { default as default62, default as default63 } from "./components/list-layout/ListLayout.vue.mjs";
+import { default as default64 } from "./components/modal/ModalVideoPreview.vue.mjs";
+import { default as default65 } from "./components/panel/PanelEditSwitch.vue.mjs";
+import { default as default66 } from "./components/panel/PanelItem.vue.mjs";
+import { default as default67 } from "./components/panel/PanelItemNestForm.vue.mjs";
+import { default as default68 } from "./components/panel/PanelMain.vue.mjs";
 import { ROUTE_MODULE_LEVEL, TabsMainReplaceQueryKey } from "./config/route.mjs";
-import { default as default66 } from "./components/slot-layout/SlotLayoutFlowAside.vue.mjs";
+import { default as default69 } from "./components/slot-layout/SlotLayoutFlowAside.vue.mjs";
 import { TABLE_COLUMN_KEY_OPERATE, TABLE_COLUMN_KEY_SELECTION } from "./components/table/constants.mjs";
-import { default as default67 } from "./components/table/TableMain.vue.mjs";
-import { default as default68 } from "./components/modal/VideoPreviewTrigger.vue.mjs";
-import { default as default69 } from "./components/view-layout/ViewLayout.vue.mjs";
+import { default as default70 } from "./components/table/TableMain.vue.mjs";
+import { default as default71 } from "./components/table/TableSkeleton.vue.mjs";
+import { default as default72 } from "./components/table/TableToolbar.vue.mjs";
+import { default as default73 } from "./components/modal/VideoPreviewTrigger.vue.mjs";
+import { default as default74 } from "./components/view-layout/ViewLayout.vue.mjs";
 import { buildRhythmCss, useCoreThemeApply } from "./hooks/use-theme-apply.mjs";
 import { checkLogin } from "./router/guard/login.mjs";
 import { checkPermission } from "./router/guard/permission.mjs";
@@ -119,18 +124,18 @@ export {
   APP_PAGE_SLOT_Z_INDEX,
   default2 as ActionBtn,
   default3 as ActionBtnGroup,
-  default31 as ActionConfirm,
-  default32 as AppAside,
-  default33 as AppBody,
-  default34 as AppBreadcrumb,
-  default35 as AppFooter,
-  default36 as AppHeader,
-  default37 as AppLayout,
-  default38 as AppPage,
-  default39 as AppSidebar,
-  default40 as AppTheme,
-  default41 as AutoRefresh,
-  default42 as AutoRefreshGroup,
+  default32 as ActionConfirm,
+  default33 as AppAside,
+  default34 as AppBody,
+  default35 as AppBreadcrumb,
+  default36 as AppFooter,
+  default37 as AppHeader,
+  default38 as AppLayout,
+  default39 as AppPage,
+  default40 as AppSidebar,
+  default41 as AppTheme,
+  default42 as AutoRefresh,
+  default43 as AutoRefreshGroup,
   BODY_CONTENT_VIEWPORT_HEIGHT,
   BODY_CONTENT_VIEWPORT_INSET,
   BODY_CONTENT_VIEWPORT_RECT,
@@ -138,75 +143,80 @@ export {
   CORE_BRIDGE_KEY,
   CORE_VIEWPORT_DECOR_ZINDEX_ABOVE,
   CORE_VIEWPORT_DECOR_ZINDEX_BELOW,
-  default43 as ConfirmModal,
+  default44 as ConfirmModal,
   DC_SLOT_ATTR,
+  default46 as DataGridView,
   default5 as DetailModal,
   EXPORT_MAX_LIMIT,
   FORM_CONFIG_SELECT_ALL_VALUE,
   FORM_ITEM_CHANGE_LOADING,
   FORM_NEST_REGISTRY_KEY,
-  default45 as FormActiveFilter,
+  default47 as FormActiveFilter,
   default7 as FormInput,
   default8 as FormInputShadowClone,
-  default46 as FormItemNestForm,
-  default47 as FormItemNestFormList,
-  default48 as FormMain,
+  default48 as FormItemNestForm,
+  default49 as FormItemNestFormList,
+  default50 as FormMain,
   default9 as FormModal,
   default11 as FormRadioGroup,
-  default49 as FormSearch,
+  default51 as FormSearch,
   default12 as FormSelect,
   default13 as FormSelectShadowClone,
-  default50 as FormShadowCloneDispatch,
-  default51 as FormSortSwitch,
-  default52 as FormSortSwitchGroup,
+  default52 as FormShadowCloneDispatch,
+  default53 as FormSortSwitch,
+  default54 as FormSortSwitchGroup,
   default14 as FormSubmitBtn,
-  default53 as FormSubmitPanel,
+  default55 as FormSubmitPanel,
   default15 as FormTree,
-  default54 as FormUpload,
-  default55 as FormUploadAudio,
-  default56 as FormUploadImage,
-  default57 as FormUploadVideo,
+  default56 as FormUpload,
+  default57 as FormUploadAudio,
+  default58 as FormUploadImage,
+  default59 as FormUploadVideo,
   default16 as FormVerifyCode,
-  default58 as FormVerifyImage,
+  default60 as FormVerifyImage,
   GLOBAL_MODAL_REMOTE_KEY,
   default17 as HeightProvider,
   default18 as ImagePreviewTrigger,
-  default59 as ListLayout,
-  default60 as ListPage,
+  default61 as InfiniteListView,
+  default62 as ListLayout,
+  default63 as ListPage,
   default19 as MenuItemSub,
   default20 as MenuTree,
-  default44 as ModalConfirm,
+  default45 as ModalConfirm,
   default6 as ModalDetail,
   default10 as ModalForm,
   default21 as ModalImagePreview,
   default22 as ModalPorter,
   default23 as ModalShelf,
-  default61 as ModalVideoPreview,
+  default64 as ModalVideoPreview,
   NEST_LAYOUT_SCALE_KEY,
   NEST_LAYOUT_TIERS,
   OPERATE_COLUMN_PROP,
-  default62 as PanelEditSwitch,
-  default63 as PanelItem,
-  default64 as PanelItemNestForm,
+  default65 as PanelEditSwitch,
+  default66 as PanelItem,
+  default67 as PanelItemNestForm,
   default24 as PanelItemNestPanel,
-  default65 as PanelMain,
+  default68 as PanelMain,
   ROUTE_MODULE_LEVEL,
   SCOPE_VIEWPORT_MAX_HEIGHT,
   default25 as SelectModule,
   default26 as ShadowClone,
-  default66 as SlotLayoutFlowAside,
+  default69 as SlotLayoutFlowAside,
   default27 as SlotLayoutTemplate,
   SlotRegion,
   TABLE_COLUMN_KEY_OPERATE,
   TABLE_COLUMN_KEY_SELECTION,
   TABS_MAIN_VISUAL_LEVEL,
-  default67 as TableMain,
-  default28 as TabsMain,
+  default28 as TableEmpty,
+  default70 as TableMain,
+  default71 as TableSkeleton,
+  default72 as TableToolbar,
+  default29 as TabsMain,
   TabsMainReplaceQueryKey,
-  default29 as TriggerAutoImport,
-  default68 as VideoPreviewTrigger,
-  default69 as ViewLayout,
-  default30 as WatchSize,
+  default30 as TriggerAutoImport,
+  default73 as VideoPreviewTrigger,
+  default74 as ViewLayout,
+  default31 as WatchSize,
   buildRhythmCss,
   ceilToTier,
   checkLogin,

package/es/style.css

@@ -641,6 +641,192 @@ to {
     transform: rotate(360deg);
 }
 }
+.table-toolbar[data-v-0220e327] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+  gap: 20px;
+}
+.table-toolbar-left[data-v-0220e327] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.table-toolbar-right[data-v-0220e327] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.table-toolbar-switch-view[data-v-0220e327] {
+  --el-switch-off-color: var(--dc-core-primary-color);
+  --el-switch-on-color: var(--dc-core-warning-color);
+}
+.table-skeleton[data-v-c813d7d1] {
+  border: 1px solid var(--dc-core-border-color, var(--el-border-color-lighter));
+  border-radius: var(--dc-core-radius, var(--el-border-radius-base));
+  overflow: hidden;
+}
+.table-skeleton__row[data-v-c813d7d1] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 13px 12px;
+  border-bottom: 1px solid var(--el-fill-color, var(--el-border-color-lighter));
+}
+.table-skeleton__row_head[data-v-c813d7d1] {
+  background: var(--el-fill-color, var(--el-fill-color-light));
+}
+.table-skeleton__row_head .table-skeleton__bar[data-v-c813d7d1] {
+  height: 10px;
+}
+.table-skeleton__row[data-v-c813d7d1]:last-child {
+  border-bottom: none;
+}
+.table-skeleton__cell[data-v-c813d7d1] {
+  flex: 1;
+  min-width: 0;
+}
+.table-skeleton__bar[data-v-c813d7d1] {
+  height: 12px;
+  border-radius: 4px;
+}
+.table-skeleton__cell:nth-child(3n + 1) .table-skeleton__bar[data-v-c813d7d1] {
+  width: 52%;
+}
+.table-skeleton__cell:nth-child(3n + 2) .table-skeleton__bar[data-v-c813d7d1] {
+  width: 82%;
+}
+.table-skeleton__cell:nth-child(3n) .table-skeleton__bar[data-v-c813d7d1] {
+  width: 38%;
+}
+.table-skeleton__grid[data-v-c813d7d1] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+  padding: 12px;
+}
+.table-skeleton__card[data-v-c813d7d1] {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--dc-core-radius, var(--el-border-radius-base));
+}
+.table-skeleton__card-media[data-v-c813d7d1] {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--dc-core-radius, var(--el-border-radius-base));
+}
+@media (prefers-reduced-motion: reduce) {
+.table-skeleton[data-v-c813d7d1] .el-skeleton.is-animated .el-skeleton__item {
+    animation: none;
+}
+}
+.infinite-list-view[data-v-e597453f] {
+  width: 100%;
+}
+.infinite-list-view__viewport[data-v-e597453f] {
+  width: 100%;
+}
+.infinite-list-view__sentinel[data-v-e597453f] {
+  height: 1px;
+}
+.infinite-list-view__footer[data-v-e597453f] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 0;
+  color: var(--dc-core-text-color-secondary, var(--el-text-color-secondary));
+  font-size: 13px;
+}
+.infinite-list-view__json[data-v-e597453f] {
+  margin: 0;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--dc-core-text-color-secondary, var(--el-text-color-secondary));
+}
+.infinite-list-view__tip[data-v-e597453f] {
+  color: var(--dc-core-text-color-secondary, var(--el-text-color-secondary));
+}
+.infinite-list-view__retry[data-v-e597453f] {
+  border: none;
+  background: transparent;
+  color: var(--dc-core-primary-color, var(--el-color-primary));
+  font-size: 13px;
+  cursor: pointer;
+  padding: 0;
+}
+.infinite-list-view__retry[data-v-e597453f]:hover {
+  opacity: 0.8;
+}
+.infinite-list-view__empty[data-v-e597453f] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 60px;
+  color: var(--dc-core-text-color-secondary, var(--el-text-color-secondary));
+}
+.infinite-list-view__pull-indicator[data-v-e597453f] {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  overflow: hidden;
+  font-size: 13px;
+  color: var(--dc-core-text-color-secondary, var(--el-text-color-secondary));
+  transition: height 0.2s;
+}
+.infinite-list-view__pull-indicator > span[data-v-e597453f] {
+  padding-bottom: 6px;
+}
+.data-grid-view[data-v-d9e5439d] {
+  width: 100%;
+}
+.data-grid-view__grid[data-v-d9e5439d] {
+  display: grid;
+  gap: 12px;
+  padding-bottom: 12px;
+}
+.data-grid-view__cell[data-v-d9e5439d] {
+  min-width: 0;
+}
+.data-grid-view__card[data-v-d9e5439d] {
+  border: 1px solid var(--dc-core-border-color, var(--el-border-color-lighter));
+  border-radius: var(--dc-core-radius, 4px);
+  padding: 10px 12px;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.data-grid-view__field[data-v-d9e5439d] {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  line-height: 1.6;
+  font-size: 13px;
+}
+.data-grid-view__field-label[data-v-d9e5439d] {
+  flex-shrink: 0;
+  color: var(--dc-core-text-color-secondary, var(--el-text-color-secondary));
+}
+.data-grid-view__field-value[data-v-d9e5439d] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.data-grid-view__empty-error[data-v-d9e5439d] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 0;
+  color: var(--dc-core-text-color-secondary, var(--el-text-color-secondary));
+  font-size: 13px;
+}
 .form-active-filter[data-v-6d2d37c2] {
   display: flex;
   flex-wrap: wrap;
@@ -988,97 +1174,13 @@ to {
 .dc-form-upload-video__thumb_empty[data-v-5eac98bc] {
   background: var(--el-fill-color-light);
 }
-.table-toolbar[data-v-0220e327] {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-bottom: 8px;
-  gap: 20px;
-}
-.table-toolbar-left[data-v-0220e327] {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.table-toolbar-right[data-v-0220e327] {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.table-toolbar-switch-view[data-v-0220e327] {
-  --el-switch-off-color: var(--dc-core-primary-color);
-  --el-switch-on-color: var(--dc-core-warning-color);
-}
-.table-skeleton[data-v-c813d7d1] {
-  border: 1px solid var(--dc-core-border-color, var(--el-border-color-lighter));
-  border-radius: var(--dc-core-radius, var(--el-border-radius-base));
-  overflow: hidden;
-}
-.table-skeleton__row[data-v-c813d7d1] {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 13px 12px;
-  border-bottom: 1px solid var(--el-fill-color, var(--el-border-color-lighter));
-}
-.table-skeleton__row_head[data-v-c813d7d1] {
-  background: var(--el-fill-color, var(--el-fill-color-light));
-}
-.table-skeleton__row_head .table-skeleton__bar[data-v-c813d7d1] {
-  height: 10px;
-}
-.table-skeleton__row[data-v-c813d7d1]:last-child {
-  border-bottom: none;
-}
-.table-skeleton__cell[data-v-c813d7d1] {
-  flex: 1;
-  min-width: 0;
-}
-.table-skeleton__bar[data-v-c813d7d1] {
-  height: 12px;
-  border-radius: 4px;
-}
-.table-skeleton__cell:nth-child(3n + 1) .table-skeleton__bar[data-v-c813d7d1] {
-  width: 52%;
-}
-.table-skeleton__cell:nth-child(3n + 2) .table-skeleton__bar[data-v-c813d7d1] {
-  width: 82%;
-}
-.table-skeleton__cell:nth-child(3n) .table-skeleton__bar[data-v-c813d7d1] {
-  width: 38%;
-}
-.table-skeleton__grid[data-v-c813d7d1] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 12px;
-  padding: 12px;
-}
-.table-skeleton__card[data-v-c813d7d1] {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--dc-core-radius, var(--el-border-radius-base));
-}
-.table-skeleton__card-media[data-v-c813d7d1] {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  border-radius: var(--dc-core-radius, var(--el-border-radius-base));
-}
-@media (prefers-reduced-motion: reduce) {
-.table-skeleton[data-v-c813d7d1] .el-skeleton.is-animated .el-skeleton__item {
-    animation: none;
-}
-}
 .data-list-view-item.is-selected[data-v-d9b5d5ca] {
   /* 选中态钩子，具体视觉由消费方覆写 */
 }
-.data-list-view[data-v-da082546] {
+.data-list-view[data-v-ce0bb05b] {
   width: 100%;
 }
-.data-list-view-empty[data-v-da082546] {
+.data-list-view-empty[data-v-ce0bb05b] {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1122,40 +1224,40 @@ to {
 .dc-slot-layout-flow-aside-main[data-v-5c6ef74b] {
   width: var(--v7e1d11ca);
 }
-.list-layout[data-v-ce5a651b] {
-  min-height: var(--bbc8b4b6);
+.list-layout[data-v-a47ec619] {
+  min-height: var(--v37fdcdf2);
 }
-.list-layout-header[data-v-ce5a651b] {
+.list-layout-header[data-v-a47ec619] {
   margin-bottom: 10px;
 }
-.list-layout-operation[data-v-ce5a651b] {
+.list-layout-operation[data-v-a47ec619] {
   margin-bottom: 10px;
 }
-.list-layout_search-sticky[data-v-ce5a651b] .form-search {
+.list-layout_search-sticky[data-v-a47ec619] .form-search {
   position: sticky;
-  top: var(--v2ce52870);
+  top: var(--v5bcb0a52);
   z-index: 10;
   background: var(--dc-core-surface, var(--el-bg-color));
   box-shadow: 0 1px 0 0 var(--dc-core-border-color, var(--el-border-color-lighter));
 }
-.list-layout_toolbar-sticky[data-v-ce5a651b] .dc-table-main__toolbar {
+.list-layout_toolbar-sticky[data-v-a47ec619] .dc-table-main__toolbar {
   position: sticky;
-  top: var(--ca6d5736);
+  top: var(--v489faec3);
   z-index: 9;
   padding-top: 10px;
   background: var(--dc-core-surface, var(--el-bg-color));
   box-shadow: 0 1px 0 0 var(--dc-core-border-color, var(--el-border-color-lighter));
 }
-.list-layout_pager-sticky[data-v-ce5a651b] .dc-table-main__pagination {
+.list-layout_pager-sticky[data-v-a47ec619] .dc-table-main__pagination {
   position: sticky;
-  bottom: var(--v0af15863);
+  bottom: var(--v17e649c5);
   z-index: 9;
   margin-top: 0;
   padding-top: 10px;
   background: var(--dc-core-surface, var(--el-bg-color));
   box-shadow: 0 -1px 0 0 var(--dc-core-border-color, var(--el-border-color-lighter));
 }
-.list-layout[data-v-ce5a651b] .el-loading-mask {
+.list-layout[data-v-a47ec619] .el-loading-mask {
   left: -10px;
   top: -10px;
   right: -10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@done-coding/admin-core",
-  "version": "0.22.2",
+  "version": "0.22.3-alpha.0",
   "description": "内部前端库",
   "private": false,
   "main": "es/index.mjs",
@@ -80,5 +80,8 @@
     "node": ">=18.0.0",
     "pnpm": ">=9.0.0"
   },
-  "gitHead": "e23d3f11214fc43bc0a6e1149ebe56e014a89d8e"
+  "dependencies": {
+    "@tanstack/vue-virtual": "^3.13.35"
+  },
+  "gitHead": "7abecb0b61e0dca2284f8e556791e84c34c08b16"
 }

package/src/components/data-view/README.md

@@ -1,19 +1,45 @@
 # data-view 数据视图族
 
 > `DataListView` / `DataListViewItem`：table 的内部衍生品——**仅供 TableMain 内部 import，[MUST NOT] 对外导出 / 全局注册 / 提供 install 插件**（不进 core 顶层 export）。
-> 对外入口：经 `TableMain` 的 `customView` 模式消费（范式页 `apps/reference/src/pages/data-view/custom-view/`）。
+> `InfiniteListView` / `DataGridView`：**转正对外组件**——进 core 顶层 export（数据视图族的公共底座与网格容器）。
+> 对外入口：`DataListView` 经 `TableMain` 的 `customView` 模式消费（范式页 `apps/reference/src/pages/data-view/custom-view/`）；`DataGridView` 经 `ListLayout` 的 `viewMode="grid"` 或独立使用（范式页 `apps/reference/src/pages/data-view/grid/`）。
 
 ## 组件清单
 
-| 组件 | 一句话 | 文档 |
-| --- | --- | --- |
-| `DataListView` | 数据视图列表（卡片/自定义渲染，el-table 形态替代），TableMain `customView` 模式渲染载体 | [README-DataListView](./docs/README-DataListView.md) |
-| `DataListViewItem` | 列表项容器：仅承载选中态 class 钩子（`.is-selected`）+ 项内容插槽 | 并入 README-DataListView 小节 |
+| 组件 | 一句话 | 对外 | 文档 |
+| --- | --- | --- | --- |
+| `InfiniteListView` | 通用无限滚动容器（受控：存量数据 + 加载状态 + IO 哨兵触发 load-more + 底部错误/到底 + 虚拟列表），**通用原语建议独立使用** | ✅ 顶层 export | [README-InfiniteListView](./docs/README-InfiniteListView.md) |
+| `DataGridView` | 网格数据容器（对齐 TableMain 主 props，自持存量累加状态机，内部复 InfiniteListView + TableToolbar），ListLayout `viewMode="grid"` 渲染载体 | ✅ 顶层 export | [README-DataGridView](./docs/README-DataGridView.md) |
+| `DataListView` | 数据视图列表（卡片/自定义渲染，el-table 形态替代），TableMain `customView` 模式渲染载体 | ❌ 内部衍生品 | [README-DataListView](./docs/README-DataListView.md) |
+| `DataListViewItem` | 列表项容器：仅承载选中态 class 钩子（`.is-selected`）+ 项内容插槽 | ❌ 内部 | 并入 README-DataListView 小节 |
 
-族 index.ts 导出 `{ DataListView, DataListViewItem }` + `export * from "./types"`（5 个类型，含 `DataViewColumn<T>` / `DataListViewItemScope<T>`）。
+族 index.ts 导出：`InfiniteListView` / `DataGridView` / `DataListView` / `DataListViewItem` + `export * from "./types"`（含 `DataViewColumn<T>` / `DataListViewItemScope<T>` / `InfiniteListViewProps` / `DataGridViewProps`）。
 
 ## 内部件边界
 
-- **不进 core 顶层 export**：core 顶层 `index.ts` 无 data-view 导出行；两组件 [MUST NOT] 对外导出 / 全局注册 / 提供 install 插件
-- **消费入口**：走 `TableMain` `customView` prop + `#custom-view-item` 插槽（TableMain `customView.value ? markRaw(DataListView) : markRaw(ElTable)` 择一渲染；ListLayout 已转发该插槽，类型 `DataListViewItemScope<T>`）
+- **`DataListView` / `DataListViewItem` 不进 core 顶层 export**：[MUST NOT] 对外导出 / 全局注册 / 提供 install 插件
+- **`InfiniteListView` / `DataGridView` 进 core 顶层 export**：公共组件（规则 10 配套 demo；`DataGridView` 推荐经 `ListLayout` 门面使用，独立使用需自配数据/工具栏上下文，成本与 TableMain 独立使用相同）
+- **消费入口**：
+  - `DataListView`：走 `TableMain` `customView` prop + `#custom-view-item` 插槽（TableMain `customView.value ? markRaw(DataListView) : markRaw(ElTable)` 择一渲染；ListLayout 已转发该插槽，类型 `DataListViewItemScope<T>`）
+  - `DataGridView`：走 `ListLayout` `viewMode="grid"`（`viewMode="table"` 时 ListLayout 渲染 TableMain，内部 `customView` 仍切 ElTable/DataListView——切换在 ListLayout 层，两容器数据路径不同构故不共存于 TableMain 内）
 - **DataListViewItem**：由 DataListView 内部 `v-for` 使用，消费方不直接使用；[MUST NOT] 写死视觉样式（卡片阴影/圆角归消费方）、[MUST NOT] 内置选中状态机
+
+## 分层（A 底座 / B 容器）
+
+```
+data-view 族
+├── InfiniteListView   （A · 通用受控无限滚动容器，公共）
+│     ├─ IO 哨兵触发 load-more（root 限滚容器，零环境适配）
+│     ├─ 状态机展示：loading / loadingMore / error(底部原因+手动重试) / finished(到底)
+│     ├─ 虚拟列表：@tanstack/vue-virtual 单轴虚拟化
+│     └─ opt-in 触摸下拉刷新（pullRefresh，默认关）
+└── DataGridView       （B · 网格数据容器，公共）
+      ├─ 对齐 TableMain 主 props，自持存量累加状态机（api + query + fetchNextPage + hasMore）
+      ├─ 内部按 gridColumns 把存量 chunk 成行 → 喂 InfiniteListView 虚拟化
+      ├─ 复用 TableToolbar（存量上下文：currentPage = 已拉最大页）
+      ├─ 列配置驱动卡片渲染（useDataViewFieldMap 同源；custom-view-item 插槽默认 label: value 卡片）
+      └─ 无分页器；loading/错误重试/到底由 InfiniteListView 提供
+```
+
+- **共享 hook**：`useDataViewFieldMap`（列 → 稳定字段组件）供 `DataListView` 与 `DataGridView` 同源渲染（渲染层防双线漂移）。
+- **防漂移三层**（spec 2026-08-09-105416）：契约面 TS 类型复用（`TableMainInstance`/`TablePageInfo`/`TableExportContext`）+ 参数构造面 config 共享（`APP_API_LIST_MODEL_KEY_CONFIG`）+ 行为面契约测试网（`runContainerContractTests` 对 TableMain + DataGridView 跑同一套断言）。