@robot-admin/naive-ui-components 0.6.31 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +5 -3
- package/dist/C_OrgChart.js.map +1 -1
- package/dist/C_OrgChart2.js.map +1 -1
- package/dist/C_Skeleton.js.map +1 -1
- package/dist/C_Skeleton2.js.map +1 -1
- package/dist/{C_Table-B8hpzOcR.css.map → C_Table-BcM5LqAM.css.map} +1 -1
- package/dist/{C_Table-CGP3n_u0.css.map → C_Table-HATVoq1F.css.map} +1 -1
- package/dist/C_Table.cjs +1 -1
- package/dist/C_Table.css +140 -97
- package/dist/C_Table.d.cts +2 -2
- package/dist/C_Table.d.ts +2 -2
- package/dist/C_Table.js +1 -1
- package/dist/C_Table.js.map +1 -1
- package/dist/C_Table2.js +3 -1
- package/dist/C_Table2.js.map +1 -1
- package/dist/constants.d.ts +4 -4
- package/dist/constants2.d.ts +3 -3
- package/dist/constants3.d.ts +3 -3
- package/dist/constants4.d.ts +2 -2
- package/dist/constants5.d.ts +2 -2
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.vue.d.ts +1 -1
- package/dist/index10.vue.d.ts +1 -1
- package/dist/index11.vue.d.ts +2 -2
- package/dist/index13.vue.d.ts +3 -3
- package/dist/index14.vue.d.ts +1 -1
- package/dist/index15.vue.d.ts +4 -4
- package/dist/index16.vue.d.ts +2 -2
- package/dist/index18.vue.d.ts +4 -4
- package/dist/index2.vue.d.ts +6 -6
- package/dist/index20.vue.d.ts +1 -1
- package/dist/index21.vue.d.ts +1 -1
- package/dist/index22.vue.d.ts +2 -2
- package/dist/index23.vue.d.ts +1 -1
- package/dist/index24.vue.d.ts +1 -1
- package/dist/index26.vue.d.ts +4 -4
- package/dist/index27.vue.d.ts +2 -2
- package/dist/index28.vue.d.ts +3 -3
- package/dist/index3.vue.d.ts +3 -3
- package/dist/index4.vue.d.ts +5 -5
- package/dist/index6.vue.d.ts +2 -2
- package/dist/index7.vue.d.ts +2 -2
- package/dist/index9.vue.d.ts +2 -2
- package/dist/resolver.cjs.map +1 -1
- package/dist/resolver.js.map +1 -1
- package/dist/style.css +142 -99
- package/dist/useCalendarEvents.d.ts +1 -1
- package/dist/useCollapsePanel.d.ts +5 -5
- package/dist/useCropperCore.d.ts +4 -4
- package/dist/useDraggableLayout.d.ts +5 -5
- package/dist/useDynamicFormState.d.ts +124 -124
- package/dist/useEdgeInteraction.d.ts +1 -1
- package/dist/useGlobalSearch.d.ts +1 -1
- package/dist/useInfiniteScroll.d.ts +4 -4
- package/dist/useModalEdit.d.ts +513 -240
- package/dist/useQRCode.d.ts +3 -3
- package/dist/useSearchState.d.ts +2 -2
- package/dist/useSignatureHistory.d.ts +3 -3
- package/dist/useSplitResize.d.ts +5 -5
- package/dist/useTimeSelection.d.ts +2 -2
- package/dist/useTreeOperations.d.ts +4 -4
- package/dist/useWorkflowValidation.d.ts +7 -7
- package/package.json +1 -1
package/dist/C_Skeleton2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Skeleton2.js","names":["preset","repeat"],"sources":["../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"irCE6SE,IAAM,EAAQ,EAQR,EAAgB,MACpB,EAAM,YAAc,GAAQ,OAAS,EAAM,UAC7C,CAEM,EAAc,OAA+C,CACjE,KAAM,EAAM,OAAO,MAAQ,EAC3B,KAAM,EAAM,OAAO,MAAQ,EAC3B,WAAY,EAAM,OAAO,YAAc,GACvC,YAAa,EAAM,OAAO,aAAe,GAC1C,EAAC,CAEI,EAAa,OAA8C,CAC/D,OAAQ,EAAM,MAAM,QAAU,EAC9B,KAAM,EAAM,MAAM,MAAQ,EAC1B,UAAW,EAAM,MAAM,WAAa,GACpC,YAAa,EAAM,MAAM,aAAe,GACzC,EAAC,CAEI,EAAa,OAA8C,CAC/D,MAAO,EAAM,MAAM,OAAS,EAC5B,WAAY,EAAM,MAAM,YAAc,GACtC,UAAW,EAAM,MAAM,WAAa,EACrC,EAAC,CAEI,EAAa,OAA8C,CAC/D,UAAW,EAAM,MAAM,WAAa,GACpC,WAAY,EAAM,MAAM,YAAc,EACtC,UAAW,EAAM,MAAM,WAAa,EACpC,WAAY,EAAM,MAAM,YAAc,GACvC,EAAC,CAEI,EAAe,OAAgD,CACnE,OAAQ,EAAM,QAAQ,QAAU,EAChC,WAAY,EAAM,QAAQ,YAAc,EACxC,WAAY,EAAM,QAAQ,YAAc,GACzC,EAAC,cA/UM,EAAM,SAAA,GAAA,CADd,EAkRM,MAAA,OAhRJ,MAAK,EAAA,CAAC,aAAY,CAAA,eACM,EAAA,QAAa,CAAA,CAAA,GAErC,EAAA,YAAgB,CACAA,EAAAA,SAAM,QAAA,EAAA,GAAA,CACpB,EASM,EAAA,CAAA,IAAA,EAAA,CAAA,EARQC,EAAAA,OAAL,QADT,EASM,MAAA,CAPH,IAAK,EACN,MAAM,qBAEN,EAGE,MAAA,CAFA,MAAM,oCACL,MAAK,EAAA,CAAA,MAAW,IAAMA,EAAAA,OAAM,MAAA,OAAA,CAAA,oBAMdD,EAAAA,SAAM,UAAA,GAAA,CAA3B,EAcW,EAAA,CAAA,IAAA,EAAA,CAAA,CAfX,EAAA,cAAkB,CAAA,AAAA,EAAA,KAAA,EAAA,sTAAA,EAAA,CAAA,CAAA,GAAA,EAkBGA,EAAAA,SAAM,SAAA,GAAA,CAA3B,EAmBW,EAAA,CAAA,IAAA,EAAA,CAAA,CApBX,EAAA,aAAiB,EAAA,EAAA,GAAA,CAEf,EAiBM,EAAA,KAAA,EAhBQC,EAAAA,OAAL,QADT,EAiBM,MAAA,CAfH,IAAK,EACN,MAAM,8CAEN,EAWM,MAAA,CAXD,MAAM,yBAAwB,CAAA,CACjC,EASM,MAAA,CARJ,QAAQ,YACR,KAAK,eACL,MAAM,KACN,OAAO,OAEP,EAEE,OAAA,CADA,EAAE,2HAA0H,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,eAQjHD,EAAAA,SAAM,QAAA,GAAA,CAA3B,EA0CW,EAAA,CAAA,IAAA,EAAA,CAAA,CA3CX,EAAA,YAAgB,EAAA,EAAA,GAAA,CAEd,EAwCM,EAAA,KAAA,EAvCQC,EAAAA,OAAL,QADT,EAwCM,MAAA,CAtCH,IAAK,EACN,MAAM,qBAGE,EAAA,MAAW,WAAA,GAAA,CADnB,EAGE,MAHF,EAGE,EAAA,EAAA,OAAA,GAAA,CACF,EAiBM,MAjBN,EAiBM,EAAA,EAAA,GAAA,CAhBJ,EAKE,EAAA,KAAA,EAJY,EAAA,MAAW,WAAhB,QADT,EAKE,MAAA,CAHC,IAAG,KAAO,IACX,MAAM,oCACL,MAAK,EAAA,CAAA,MAAW,IAAM,EAAA,MAAW,WAAU,MAAA,MAAA,CAAA,kBAE9C,EASM,MATN,EASM,EAAA,EAAA,GAAA,CARJ,EAOE,EAAA,KAAA,EANY,EAAA,MAAW,UAAhB,QADT,EAOE,MAAA,CALC,IAAG,KAAO,IACX,MAAM,yDACL,MAAK,EAAA,CAAA,MAA2B,IAAM,EAAA,MAAW,UAAS,MAAA,OAAA,CAAA,sBAOzD,EAAA,MAAW,YAAA,GAAA,CADnB,EAYM,MAZN,EAYM,AAAA,EAAA,KAAA,CARJ,EAGE,MAAA,CAFA,MAAM,0DACN,MAAA,CAAA,MAAA,OAAA,WAEF,EAGE,MAAA,CAFA,MAAM,0DACN,MAAA,CAAA,MAAA,OAAA,2CAOaD,EAAAA,SAAM,SAAA,GAAA,CAA3B,EA2DW,EAAA,CAAA,IAAA,EAAA,CAAA,CA5DX,EAAA,aAAiB,CAEf,EAyDM,MAzDN,EAyDM,CAvDI,EAAA,MAAY,YAAA,GAAA,CADpB,EAsBM,MAtBN,EAsBM,EAAA,EAAA,GAAA,CAlBJ,EAQM,EAAA,KAAA,EAPQ,EAAA,MAAY,KAAjB,QADT,EAQM,MAAA,CANH,IAAG,KAAO,IACX,MAAM,kCAEN,EAEE,MAAA,CADA,MAAM,yDAAwD,CAAA,KAAA,GAAA,CAAA,CAAA,SAI1D,EAAA,MAAY,aAAA,GAAA,CADpB,EAQM,MARN,EAQM,AAAA,EAAA,KAAA,CAJJ,EAGE,MAAA,CAFA,MAAM,yDACN,MAAA,CAAA,MAAA,MAAA,kDAIN,EAgCM,EAAA,KAAA,EA/BQ,EAAA,MAAY,KAAjB,QADT,EAgCM,MAAA,CA9BH,IAAG,KAAO,IACX,MAAM,iCAEN,EAWM,EAAA,KAAA,EAVQ,EAAA,MAAY,KAAjB,QADT,EAWM,MAAA,CATH,IAAG,KAAO,IACX,MAAM,2BAEN,EAKE,MAAA,CAJA,MAAM,yDACL,MAAK,EAAA,CAAA,MAAA,GAA8B,KAAK,MAAK,GAAQ,EAAI,EAAC,GAAA,GAAA,CAAA,GAAA,CAAA,oBAMvD,EAAA,MAAY,aAAA,GAAA,CADpB,EAcM,MAdN,EAcM,AAAA,EAAA,KAAA,CAVJ,EASM,MAAA,CATD,MAAM,0BAAyB,CAAA,CAClC,EAGE,MAAA,CAFA,MAAM,2DACN,MAAA,CAAA,MAAA,OAAA,GAEF,EAGE,MAAA,CAFA,MAAM,2DACN,MAAA,CAAA,MAAA,OAAA,0CASSA,EAAAA,SAAM,QAAA,GAAA,CAA3B,EAiCW,EAAA,CAAA,IAAA,EAAA,CAAA,CAlCX,EAAA,YAAgB,CAEd,EA+BM,MAAA,CA9BJ,MAAM,mBACL,MAAK,EAAA,CAAA,cAAmB,EAAA,MAAW,KAAI,CAAA,UAExC,EAaM,EAAA,KAAA,EAZQ,EAAA,MAAW,OAAhB,QADT,EAaM,MAAA,CAXH,IAAK,EACN,MAAM,2BAGE,EAAA,MAAW,WAAA,GAAA,CADnB,EAIE,MAAA,OAFA,MAAM,4DACL,MAAK,EAAA,CAAA,MAAA,GAAA,GAAqB,EAAC,GAAA,GAAA,IAAA,CAAA,+BAE9B,EAEE,MAAA,CADA,MAAM,4DAA2D,CAAA,KAAA,GAAA,CAAA,CAAA,SAI7D,EAAA,MAAW,aAAA,GAAA,CADnB,EAYM,MAZN,EAYM,AAAA,EAAA,KAAA,CARJ,EAGE,MAAA,CAFA,MAAM,0DACN,MAAA,CAAA,MAAA,QAAA,WAEF,EAGE,MAAA,CAFA,MAAM,0DACN,MAAA,CAAA,MAAA,OAAA,qCAOaA,EAAAA,SAAM,QAAA,GAAA,CAA3B,EAyBW,EAAA,CAAA,IAAA,EAAA,CAAA,CA1BX,EAAA,YAAgB,EAAA,EAAA,GAAA,CAEd,EAuBM,EAAA,KAAA,EAtBQ,EAAA,MAAW,MAAhB,QADT,EAuBM,MAAA,CArBH,IAAK,EACN,MAAM,0BAGE,EAAA,MAAW,YAAA,GAAA,CADnB,EAGE,MAHF,EAGE,EAAA,EAAA,OAAA,GAAA,CACF,EAaM,MAbN,EAaM,CAAA,AAAA,EAAA,KAZJ,EAGE,MAAA,CAFA,MAAM,oCACN,MAAA,CAAA,MAAA,MAAA,kBAEF,EAOE,EAAA,KAAA,EANY,EAAA,MAAW,UAAhB,QADT,EAOE,MAAA,CALC,IAAG,KAAO,IACX,MAAM,yDACL,MAAK,EAAA,CAAA,MAAyB,IAAM,EAAA,MAAW,UAAS,MAAA,MAAA,CAAA,oCAS5CA,EAAAA,SAAM,UAAA,GAAA,CAA3B,EA2CW,EAAA,CAAA,IAAA,EAAA,CAAA,CA5CX,EAAA,cAAkB,CAEhB,EAyCM,MAzCN,EAyCM,CAvCI,EAAA,MAAa,YAAA,GAAA,CADrB,EAiBM,MAjBN,EAiBM,AAAA,EAAA,KAAA,CAbJ,EAEE,MAAA,CADA,MAAM,6DAA4D,CAAA,KAAA,GAAA,CAEpE,EASM,MAAA,CATD,MAAM,2BAA0B,CAAA,CACnC,EAGE,MAAA,CAFA,MAAM,oCACN,MAAA,CAAA,MAAA,QAAA,GAEF,EAGE,MAAA,CAFA,MAAM,yDACN,MAAA,CAAA,MAAA,QAAA,wBAIN,EAqBM,MArBN,EAqBM,EAAA,EAAA,GAAA,CApBJ,EAmBM,EAAA,KAAA,EAlBQ,EAAA,MAAa,OAAlB,QADT,EAmBM,MAAA,CAjBH,IAAK,EACN,MAAM,6BAEN,EAGE,MAAA,CAFA,MAAM,4DACL,MAAK,EAAA,CAAA,MAAA,GAAA,GAAqB,EAAC,GAAA,GAAA,IAAA,CAAA,UAE9B,EASM,MATN,EASM,EAAA,EAAA,GAAA,CARJ,EAOE,EAAA,KAAA,EANY,EAAA,MAAa,WAAlB,QADT,EAOE,MAAA,CALC,IAAG,KAAO,IACX,MAAM,yDACL,MAAK,EAAA,CAAA,MAA6B,IAAM,EAAA,MAAa,WAAU,MAAA,OAAA,CAAA,+DAY9E,EAAe,EAAA,CAAA,IAAA,EAAA,CAAA,CADf,EAAA,gBAAoB,CACpB,EAAe,EAAA,OAAA,UAAA,CAAA,CAAA,KAAA"}
|
|
1
|
+
{"version":3,"file":"C_Skeleton2.js","names":["preset","repeat"],"sources":["../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n <div\r\n v-if=\"props.loading\"\r\n class=\"c-skeleton\"\r\n :class=\"[`c-skeleton--${animationType}`]\"\r\n >\r\n <!-- text 预设 -->\r\n <template v-if=\"preset === 'text'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__text\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n />\r\n </div>\r\n </template>\r\n\r\n <!-- avatar 预设 -->\r\n <template v-else-if=\"preset === 'avatar'\">\r\n <div class=\"c-skeleton__avatar-group\">\r\n <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n <div class=\"c-skeleton__avatar-text\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 40%\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 60%\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- image 预设 -->\r\n <template v-else-if=\"preset === 'image'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__image c-skeleton__item\"\r\n >\r\n <div class=\"c-skeleton__image-icon\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"32\"\r\n height=\"32\"\r\n >\r\n <path\r\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- card 预设 -->\r\n <template v-else-if=\"preset === 'card'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__card\"\r\n >\r\n <div\r\n v-if=\"cardConfig.showCover\"\r\n class=\"c-skeleton__card-cover c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__card-body\">\r\n <div\r\n v-for=\"t in cardConfig.titleLines\"\r\n :key=\"`t-${t}`\"\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n />\r\n <div class=\"c-skeleton__card-desc\">\r\n <div\r\n v-for=\"d in cardConfig.descLines\"\r\n :key=\"`d-${d}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: d === cardConfig.descLines ? '70%' : '100%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n <div\r\n v-if=\"cardConfig.showFooter\"\r\n class=\"c-skeleton__card-footer\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- table 预设 -->\r\n <template v-else-if=\"preset === 'table'\">\r\n <div class=\"c-skeleton__table\">\r\n <div\r\n v-if=\"tableConfig.showHeader\"\r\n class=\"c-skeleton__table-header\"\r\n >\r\n <div\r\n v-for=\"c in tableConfig.cols\"\r\n :key=\"`h-${c}`\"\r\n class=\"c-skeleton__table-cell\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"tableConfig.showActions\"\r\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 60%\"\r\n />\r\n </div>\r\n </div>\r\n <div\r\n v-for=\"r in tableConfig.rows\"\r\n :key=\"`r-${r}`\"\r\n class=\"c-skeleton__table-row\"\r\n >\r\n <div\r\n v-for=\"c in tableConfig.cols\"\r\n :key=\"`c-${c}`\"\r\n class=\"c-skeleton__table-cell\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n }\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"tableConfig.showActions\"\r\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n >\r\n <div class=\"c-skeleton__action-btns\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n style=\"width: 40px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n style=\"width: 40px\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- form 预设 -->\r\n <template v-else-if=\"preset === 'form'\">\r\n <div\r\n class=\"c-skeleton__form\"\r\n :style=\"{ '--form-cols': formConfig.cols }\"\r\n >\r\n <div\r\n v-for=\"f in formConfig.fields\"\r\n :key=\"f\"\r\n class=\"c-skeleton__form-field\"\r\n >\r\n <div\r\n v-if=\"formConfig.showLabel\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"formConfig.showActions\"\r\n class=\"c-skeleton__form-actions\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 100px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- list 预设 -->\r\n <template v-else-if=\"preset === 'list'\">\r\n <div\r\n v-for=\"i in listConfig.items\"\r\n :key=\"i\"\r\n class=\"c-skeleton__list-item\"\r\n >\r\n <div\r\n v-if=\"listConfig.showAvatar\"\r\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__list-content\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 30%\"\r\n />\r\n <div\r\n v-for=\"d in listConfig.descLines\"\r\n :key=\"`d-${d}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: d === listConfig.descLines ? '50%' : '90%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- detail 预设 -->\r\n <template v-else-if=\"preset === 'detail'\">\r\n <div class=\"c-skeleton__detail\">\r\n <div\r\n v-if=\"detailConfig.showAvatar\"\r\n class=\"c-skeleton__detail-header\"\r\n >\r\n <div\r\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__detail-title\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 120px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 200px\"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"c-skeleton__detail-body\">\r\n <div\r\n v-for=\"f in detailConfig.fields\"\r\n :key=\"f\"\r\n class=\"c-skeleton__detail-field\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n />\r\n <div class=\"c-skeleton__detail-value\">\r\n <div\r\n v-for=\"v in detailConfig.valueLines\"\r\n :key=\"`v-${v}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: v === detailConfig.valueLines ? '60%' : '100%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </template>\r\n </div>\r\n\r\n <!-- 加载完成后显示插槽内容 -->\r\n <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed } from 'vue'\r\n import type {\r\n SkeletonProps,\r\n SkeletonTableConfig,\r\n SkeletonFormConfig,\r\n SkeletonListConfig,\r\n SkeletonCardConfig,\r\n SkeletonDetailConfig,\r\n } from './types'\r\n\r\n defineOptions({ name: 'C_Skeleton' })\r\n\r\n const props = withDefaults(defineProps<SkeletonProps>(), {\r\n preset: 'text',\r\n loading: true,\r\n animation: 'wave',\r\n repeat: 3,\r\n borderRadius: '4px',\r\n })\r\n\r\n const animationType = computed(() =>\r\n props.animation === false ? 'none' : props.animation\r\n )\r\n\r\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n rows: props.table?.rows ?? 5,\r\n cols: props.table?.cols ?? 4,\r\n showHeader: props.table?.showHeader ?? true,\r\n showActions: props.table?.showActions ?? true,\r\n }))\r\n\r\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n fields: props.form?.fields ?? 6,\r\n cols: props.form?.cols ?? 2,\r\n showLabel: props.form?.showLabel ?? true,\r\n showActions: props.form?.showActions ?? true,\r\n }))\r\n\r\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n items: props.list?.items ?? 5,\r\n showAvatar: props.list?.showAvatar ?? true,\r\n descLines: props.list?.descLines ?? 2,\r\n }))\r\n\r\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n showCover: props.card?.showCover ?? true,\r\n titleLines: props.card?.titleLines ?? 1,\r\n descLines: props.card?.descLines ?? 2,\r\n showFooter: props.card?.showFooter ?? true,\r\n }))\r\n\r\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n fields: props.detail?.fields ?? 6,\r\n valueLines: props.detail?.valueLines ?? 1,\r\n showAvatar: props.detail?.showAvatar ?? true,\r\n }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n <div\r\n v-if=\"props.loading\"\r\n class=\"c-skeleton\"\r\n :class=\"[`c-skeleton--${animationType}`]\"\r\n >\r\n <!-- text 预设 -->\r\n <template v-if=\"preset === 'text'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__text\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n />\r\n </div>\r\n </template>\r\n\r\n <!-- avatar 预设 -->\r\n <template v-else-if=\"preset === 'avatar'\">\r\n <div class=\"c-skeleton__avatar-group\">\r\n <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n <div class=\"c-skeleton__avatar-text\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 40%\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 60%\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- image 预设 -->\r\n <template v-else-if=\"preset === 'image'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__image c-skeleton__item\"\r\n >\r\n <div class=\"c-skeleton__image-icon\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"32\"\r\n height=\"32\"\r\n >\r\n <path\r\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- card 预设 -->\r\n <template v-else-if=\"preset === 'card'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__card\"\r\n >\r\n <div\r\n v-if=\"cardConfig.showCover\"\r\n class=\"c-skeleton__card-cover c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__card-body\">\r\n <div\r\n v-for=\"t in cardConfig.titleLines\"\r\n :key=\"`t-${t}`\"\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n />\r\n <div class=\"c-skeleton__card-desc\">\r\n <div\r\n v-for=\"d in cardConfig.descLines\"\r\n :key=\"`d-${d}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: d === cardConfig.descLines ? '70%' : '100%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n <div\r\n v-if=\"cardConfig.showFooter\"\r\n class=\"c-skeleton__card-footer\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- table 预设 -->\r\n <template v-else-if=\"preset === 'table'\">\r\n <div class=\"c-skeleton__table\">\r\n <div\r\n v-if=\"tableConfig.showHeader\"\r\n class=\"c-skeleton__table-header\"\r\n >\r\n <div\r\n v-for=\"c in tableConfig.cols\"\r\n :key=\"`h-${c}`\"\r\n class=\"c-skeleton__table-cell\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"tableConfig.showActions\"\r\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 60%\"\r\n />\r\n </div>\r\n </div>\r\n <div\r\n v-for=\"r in tableConfig.rows\"\r\n :key=\"`r-${r}`\"\r\n class=\"c-skeleton__table-row\"\r\n >\r\n <div\r\n v-for=\"c in tableConfig.cols\"\r\n :key=\"`c-${c}`\"\r\n class=\"c-skeleton__table-cell\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n }\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"tableConfig.showActions\"\r\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n >\r\n <div class=\"c-skeleton__action-btns\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n style=\"width: 40px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n style=\"width: 40px\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- form 预设 -->\r\n <template v-else-if=\"preset === 'form'\">\r\n <div\r\n class=\"c-skeleton__form\"\r\n :style=\"{ '--form-cols': formConfig.cols }\"\r\n >\r\n <div\r\n v-for=\"f in formConfig.fields\"\r\n :key=\"f\"\r\n class=\"c-skeleton__form-field\"\r\n >\r\n <div\r\n v-if=\"formConfig.showLabel\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"formConfig.showActions\"\r\n class=\"c-skeleton__form-actions\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 100px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- list 预设 -->\r\n <template v-else-if=\"preset === 'list'\">\r\n <div\r\n v-for=\"i in listConfig.items\"\r\n :key=\"i\"\r\n class=\"c-skeleton__list-item\"\r\n >\r\n <div\r\n v-if=\"listConfig.showAvatar\"\r\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__list-content\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 30%\"\r\n />\r\n <div\r\n v-for=\"d in listConfig.descLines\"\r\n :key=\"`d-${d}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: d === listConfig.descLines ? '50%' : '90%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- detail 预设 -->\r\n <template v-else-if=\"preset === 'detail'\">\r\n <div class=\"c-skeleton__detail\">\r\n <div\r\n v-if=\"detailConfig.showAvatar\"\r\n class=\"c-skeleton__detail-header\"\r\n >\r\n <div\r\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__detail-title\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 120px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 200px\"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"c-skeleton__detail-body\">\r\n <div\r\n v-for=\"f in detailConfig.fields\"\r\n :key=\"f\"\r\n class=\"c-skeleton__detail-field\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n />\r\n <div class=\"c-skeleton__detail-value\">\r\n <div\r\n v-for=\"v in detailConfig.valueLines\"\r\n :key=\"`v-${v}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: v === detailConfig.valueLines ? '60%' : '100%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </template>\r\n </div>\r\n\r\n <!-- 加载完成后显示插槽内容 -->\r\n <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed } from 'vue'\r\n import type {\r\n SkeletonProps,\r\n SkeletonTableConfig,\r\n SkeletonFormConfig,\r\n SkeletonListConfig,\r\n SkeletonCardConfig,\r\n SkeletonDetailConfig,\r\n } from './types'\r\n\r\n defineOptions({ name: 'C_Skeleton' })\r\n\r\n const props = withDefaults(defineProps<SkeletonProps>(), {\r\n preset: 'text',\r\n loading: true,\r\n animation: 'wave',\r\n repeat: 3,\r\n borderRadius: '4px',\r\n })\r\n\r\n const animationType = computed(() =>\r\n props.animation === false ? 'none' : props.animation\r\n )\r\n\r\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n rows: props.table?.rows ?? 5,\r\n cols: props.table?.cols ?? 4,\r\n showHeader: props.table?.showHeader ?? true,\r\n showActions: props.table?.showActions ?? true,\r\n }))\r\n\r\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n fields: props.form?.fields ?? 6,\r\n cols: props.form?.cols ?? 2,\r\n showLabel: props.form?.showLabel ?? true,\r\n showActions: props.form?.showActions ?? true,\r\n }))\r\n\r\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n items: props.list?.items ?? 5,\r\n showAvatar: props.list?.showAvatar ?? true,\r\n descLines: props.list?.descLines ?? 2,\r\n }))\r\n\r\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n showCover: props.card?.showCover ?? true,\r\n titleLines: props.card?.titleLines ?? 1,\r\n descLines: props.card?.descLines ?? 2,\r\n showFooter: props.card?.showFooter ?? true,\r\n }))\r\n\r\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n fields: props.detail?.fields ?? 6,\r\n valueLines: props.detail?.valueLines ?? 1,\r\n showAvatar: props.detail?.showAvatar ?? true,\r\n }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n <div\r\n v-if=\"props.loading\"\r\n class=\"c-skeleton\"\r\n :class=\"[`c-skeleton--${animationType}`]\"\r\n >\r\n <!-- text 预设 -->\r\n <template v-if=\"preset === 'text'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__text\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n />\r\n </div>\r\n </template>\r\n\r\n <!-- avatar 预设 -->\r\n <template v-else-if=\"preset === 'avatar'\">\r\n <div class=\"c-skeleton__avatar-group\">\r\n <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n <div class=\"c-skeleton__avatar-text\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 40%\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 60%\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- image 预设 -->\r\n <template v-else-if=\"preset === 'image'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__image c-skeleton__item\"\r\n >\r\n <div class=\"c-skeleton__image-icon\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n width=\"32\"\r\n height=\"32\"\r\n >\r\n <path\r\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- card 预设 -->\r\n <template v-else-if=\"preset === 'card'\">\r\n <div\r\n v-for=\"i in repeat\"\r\n :key=\"i\"\r\n class=\"c-skeleton__card\"\r\n >\r\n <div\r\n v-if=\"cardConfig.showCover\"\r\n class=\"c-skeleton__card-cover c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__card-body\">\r\n <div\r\n v-for=\"t in cardConfig.titleLines\"\r\n :key=\"`t-${t}`\"\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n />\r\n <div class=\"c-skeleton__card-desc\">\r\n <div\r\n v-for=\"d in cardConfig.descLines\"\r\n :key=\"`d-${d}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: d === cardConfig.descLines ? '70%' : '100%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n <div\r\n v-if=\"cardConfig.showFooter\"\r\n class=\"c-skeleton__card-footer\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- table 预设 -->\r\n <template v-else-if=\"preset === 'table'\">\r\n <div class=\"c-skeleton__table\">\r\n <div\r\n v-if=\"tableConfig.showHeader\"\r\n class=\"c-skeleton__table-header\"\r\n >\r\n <div\r\n v-for=\"c in tableConfig.cols\"\r\n :key=\"`h-${c}`\"\r\n class=\"c-skeleton__table-cell\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"tableConfig.showActions\"\r\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 60%\"\r\n />\r\n </div>\r\n </div>\r\n <div\r\n v-for=\"r in tableConfig.rows\"\r\n :key=\"`r-${r}`\"\r\n class=\"c-skeleton__table-row\"\r\n >\r\n <div\r\n v-for=\"c in tableConfig.cols\"\r\n :key=\"`c-${c}`\"\r\n class=\"c-skeleton__table-cell\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n }\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"tableConfig.showActions\"\r\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n >\r\n <div class=\"c-skeleton__action-btns\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n style=\"width: 40px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n style=\"width: 40px\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- form 预设 -->\r\n <template v-else-if=\"preset === 'form'\">\r\n <div\r\n class=\"c-skeleton__form\"\r\n :style=\"{ '--form-cols': formConfig.cols }\"\r\n >\r\n <div\r\n v-for=\"f in formConfig.fields\"\r\n :key=\"f\"\r\n class=\"c-skeleton__form-field\"\r\n >\r\n <div\r\n v-if=\"formConfig.showLabel\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n />\r\n </div>\r\n <div\r\n v-if=\"formConfig.showActions\"\r\n class=\"c-skeleton__form-actions\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 100px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n style=\"width: 80px\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- list 预设 -->\r\n <template v-else-if=\"preset === 'list'\">\r\n <div\r\n v-for=\"i in listConfig.items\"\r\n :key=\"i\"\r\n class=\"c-skeleton__list-item\"\r\n >\r\n <div\r\n v-if=\"listConfig.showAvatar\"\r\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__list-content\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 30%\"\r\n />\r\n <div\r\n v-for=\"d in listConfig.descLines\"\r\n :key=\"`d-${d}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: d === listConfig.descLines ? '50%' : '90%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n\r\n <!-- detail 预设 -->\r\n <template v-else-if=\"preset === 'detail'\">\r\n <div class=\"c-skeleton__detail\">\r\n <div\r\n v-if=\"detailConfig.showAvatar\"\r\n class=\"c-skeleton__detail-header\"\r\n >\r\n <div\r\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n />\r\n <div class=\"c-skeleton__detail-title\">\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item\"\r\n style=\"width: 120px\"\r\n />\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n style=\"width: 200px\"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"c-skeleton__detail-body\">\r\n <div\r\n v-for=\"f in detailConfig.fields\"\r\n :key=\"f\"\r\n class=\"c-skeleton__detail-field\"\r\n >\r\n <div\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n />\r\n <div class=\"c-skeleton__detail-value\">\r\n <div\r\n v-for=\"v in detailConfig.valueLines\"\r\n :key=\"`v-${v}`\"\r\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n :style=\"{\r\n width: v === detailConfig.valueLines ? '60%' : '100%',\r\n }\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </template>\r\n </div>\r\n\r\n <!-- 加载完成后显示插槽内容 -->\r\n <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed } from 'vue'\r\n import type {\r\n SkeletonProps,\r\n SkeletonTableConfig,\r\n SkeletonFormConfig,\r\n SkeletonListConfig,\r\n SkeletonCardConfig,\r\n SkeletonDetailConfig,\r\n } from './types'\r\n\r\n defineOptions({ name: 'C_Skeleton' })\r\n\r\n const props = withDefaults(defineProps<SkeletonProps>(), {\r\n preset: 'text',\r\n loading: true,\r\n animation: 'wave',\r\n repeat: 3,\r\n borderRadius: '4px',\r\n })\r\n\r\n const animationType = computed(() =>\r\n props.animation === false ? 'none' : props.animation\r\n )\r\n\r\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n rows: props.table?.rows ?? 5,\r\n cols: props.table?.cols ?? 4,\r\n showHeader: props.table?.showHeader ?? true,\r\n showActions: props.table?.showActions ?? true,\r\n }))\r\n\r\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n fields: props.form?.fields ?? 6,\r\n cols: props.form?.cols ?? 2,\r\n showLabel: props.form?.showLabel ?? true,\r\n showActions: props.form?.showActions ?? true,\r\n }))\r\n\r\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n items: props.list?.items ?? 5,\r\n showAvatar: props.list?.showAvatar ?? true,\r\n descLines: props.list?.descLines ?? 2,\r\n }))\r\n\r\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n showCover: props.card?.showCover ?? true,\r\n titleLines: props.card?.titleLines ?? 1,\r\n descLines: props.card?.descLines ?? 2,\r\n showFooter: props.card?.showFooter ?? true,\r\n }))\r\n\r\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n fields: props.detail?.fields ?? 6,\r\n valueLines: props.detail?.valueLines ?? 1,\r\n showAvatar: props.detail?.showAvatar ?? true,\r\n }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n"],"mappings":"irCE6SE,IAAM,EAAQ,EAQR,EAAgB,MACpB,EAAM,YAAc,GAAQ,OAAS,EAAM,UAC5C,CAEK,EAAc,OAA+C,CACjE,KAAM,EAAM,OAAO,MAAQ,EAC3B,KAAM,EAAM,OAAO,MAAQ,EAC3B,WAAY,EAAM,OAAO,YAAc,GACvC,YAAa,EAAM,OAAO,aAAe,GAC1C,EAAE,CAEG,EAAa,OAA8C,CAC/D,OAAQ,EAAM,MAAM,QAAU,EAC9B,KAAM,EAAM,MAAM,MAAQ,EAC1B,UAAW,EAAM,MAAM,WAAa,GACpC,YAAa,EAAM,MAAM,aAAe,GACzC,EAAE,CAEG,EAAa,OAA8C,CAC/D,MAAO,EAAM,MAAM,OAAS,EAC5B,WAAY,EAAM,MAAM,YAAc,GACtC,UAAW,EAAM,MAAM,WAAa,EACrC,EAAE,CAEG,EAAa,OAA8C,CAC/D,UAAW,EAAM,MAAM,WAAa,GACpC,WAAY,EAAM,MAAM,YAAc,EACtC,UAAW,EAAM,MAAM,WAAa,EACpC,WAAY,EAAM,MAAM,YAAc,GACvC,EAAE,CAEG,EAAe,OAAgD,CACnE,OAAQ,EAAM,QAAQ,QAAU,EAChC,WAAY,EAAM,QAAQ,YAAc,EACxC,WAAY,EAAM,QAAQ,YAAc,GACzC,EAAE,cA/UK,EAAM,SAAA,GAAA,CADd,EAkRM,MAAA,OAhRJ,MAAK,EAAA,CAAC,aAAY,CAAA,eACM,EAAA,QAAa,CAAA,CAAA,GAErC,EAAA,YAAgB,CACAA,EAAAA,SAAM,QAAA,EAAA,GAAA,CACpB,EASM,EAAA,CAAA,IAAA,EAAA,CAAA,EARQC,EAAAA,OAAL,QADT,EASM,MAAA,CAPH,IAAK,EACN,MAAM,qBAEN,EAGE,MAAA,CAFA,MAAM,oCACL,MAAK,EAAA,CAAA,MAAW,IAAMA,EAAAA,OAAM,MAAA,OAAA,CAAA,oBAMdD,EAAAA,SAAM,UAAA,GAAA,CAA3B,EAcW,EAAA,CAAA,IAAA,EAAA,CAAA,CAfX,EAAA,cAAkB,CAAA,AAAA,EAAA,KAAA,EAAA,sTAAA,EAAA,CAAA,CAAA,GAAA,EAkBGA,EAAAA,SAAM,SAAA,GAAA,CAA3B,EAmBW,EAAA,CAAA,IAAA,EAAA,CAAA,CApBX,EAAA,aAAiB,EAAA,EAAA,GAAA,CAEf,EAiBM,EAAA,KAAA,EAhBQC,EAAAA,OAAL,QADT,EAiBM,MAAA,CAfH,IAAK,EACN,MAAM,8CAEN,EAWM,MAAA,CAXD,MAAM,yBAAwB,CAAA,CACjC,EASM,MAAA,CARJ,QAAQ,YACR,KAAK,eACL,MAAM,KACN,OAAO,OAEP,EAEE,OAAA,CADA,EAAE,2HAA0H,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,eAQjHD,EAAAA,SAAM,QAAA,GAAA,CAA3B,EA0CW,EAAA,CAAA,IAAA,EAAA,CAAA,CA3CX,EAAA,YAAgB,EAAA,EAAA,GAAA,CAEd,EAwCM,EAAA,KAAA,EAvCQC,EAAAA,OAAL,QADT,EAwCM,MAAA,CAtCH,IAAK,EACN,MAAM,qBAGE,EAAA,MAAW,WAAA,GAAA,CADnB,EAGE,MAHF,EAGE,EAAA,EAAA,OAAA,GAAA,CACF,EAiBM,MAjBN,EAiBM,EAAA,EAAA,GAAA,CAhBJ,EAKE,EAAA,KAAA,EAJY,EAAA,MAAW,WAAhB,QADT,EAKE,MAAA,CAHC,IAAG,KAAO,IACX,MAAM,oCACL,MAAK,EAAA,CAAA,MAAW,IAAM,EAAA,MAAW,WAAU,MAAA,MAAA,CAAA,kBAE9C,EASM,MATN,EASM,EAAA,EAAA,GAAA,CARJ,EAOE,EAAA,KAAA,EANY,EAAA,MAAW,UAAhB,QADT,EAOE,MAAA,CALC,IAAG,KAAO,IACX,MAAM,yDACL,MAAK,EAAA,CAAA,MAA4B,IAAM,EAAA,MAAW,UAAS,MAAA,OAAA,CAAA,sBAO1D,EAAA,MAAW,YAAA,GAAA,CADnB,EAYM,MAZN,EAYM,AAAA,EAAA,KAAA,CARJ,EAGE,MAAA,CAFA,MAAM,0DACN,MAAA,CAAA,MAAA,OAAA,WAEF,EAGE,MAAA,CAFA,MAAM,0DACN,MAAA,CAAA,MAAA,OAAA,2CAOaD,EAAAA,SAAM,SAAA,GAAA,CAA3B,EA2DW,EAAA,CAAA,IAAA,EAAA,CAAA,CA5DX,EAAA,aAAiB,CAEf,EAyDM,MAzDN,EAyDM,CAvDI,EAAA,MAAY,YAAA,GAAA,CADpB,EAsBM,MAtBN,EAsBM,EAAA,EAAA,GAAA,CAlBJ,EAQM,EAAA,KAAA,EAPQ,EAAA,MAAY,KAAjB,QADT,EAQM,MAAA,CANH,IAAG,KAAO,IACX,MAAM,kCAEN,EAEE,MAAA,CADA,MAAM,yDAAwD,CAAA,KAAA,GAAA,CAAA,CAAA,SAI1D,EAAA,MAAY,aAAA,GAAA,CADpB,EAQM,MARN,EAQM,AAAA,EAAA,KAAA,CAJJ,EAGE,MAAA,CAFA,MAAM,yDACN,MAAA,CAAA,MAAA,MAAA,kDAIN,EAgCM,EAAA,KAAA,EA/BQ,EAAA,MAAY,KAAjB,QADT,EAgCM,MAAA,CA9BH,IAAG,KAAO,IACX,MAAM,iCAEN,EAWM,EAAA,KAAA,EAVQ,EAAA,MAAY,KAAjB,QADT,EAWM,MAAA,CATH,IAAG,KAAO,IACX,MAAM,2BAEN,EAKE,MAAA,CAJA,MAAM,yDACL,MAAK,EAAA,CAAA,MAAA,GAA+B,KAAK,MAAK,GAAQ,EAAI,EAAC,GAAA,GAAA,CAAA,GAAA,CAAA,oBAMxD,EAAA,MAAY,aAAA,GAAA,CADpB,EAcM,MAdN,EAcM,AAAA,EAAA,KAAA,CAVJ,EASM,MAAA,CATD,MAAM,0BAAyB,CAAA,CAClC,EAGE,MAAA,CAFA,MAAM,2DACN,MAAA,CAAA,MAAA,OAAA,GAEF,EAGE,MAAA,CAFA,MAAM,2DACN,MAAA,CAAA,MAAA,OAAA,0CASSA,EAAAA,SAAM,QAAA,GAAA,CAA3B,EAiCW,EAAA,CAAA,IAAA,EAAA,CAAA,CAlCX,EAAA,YAAgB,CAEd,EA+BM,MAAA,CA9BJ,MAAM,mBACL,MAAK,EAAA,CAAA,cAAmB,EAAA,MAAW,KAAI,CAAA,UAExC,EAaM,EAAA,KAAA,EAZQ,EAAA,MAAW,OAAhB,QADT,EAaM,MAAA,CAXH,IAAK,EACN,MAAM,2BAGE,EAAA,MAAW,WAAA,GAAA,CADnB,EAIE,MAAA,OAFA,MAAM,4DACL,MAAK,EAAA,CAAA,MAAA,GAAA,GAAqB,EAAC,GAAA,GAAA,IAAA,CAAA,+BAE9B,EAEE,MAAA,CADA,MAAM,4DAA2D,CAAA,KAAA,GAAA,CAAA,CAAA,SAI7D,EAAA,MAAW,aAAA,GAAA,CADnB,EAYM,MAZN,EAYM,AAAA,EAAA,KAAA,CARJ,EAGE,MAAA,CAFA,MAAM,0DACN,MAAA,CAAA,MAAA,QAAA,WAEF,EAGE,MAAA,CAFA,MAAM,0DACN,MAAA,CAAA,MAAA,OAAA,qCAOaA,EAAAA,SAAM,QAAA,GAAA,CAA3B,EAyBW,EAAA,CAAA,IAAA,EAAA,CAAA,CA1BX,EAAA,YAAgB,EAAA,EAAA,GAAA,CAEd,EAuBM,EAAA,KAAA,EAtBQ,EAAA,MAAW,MAAhB,QADT,EAuBM,MAAA,CArBH,IAAK,EACN,MAAM,0BAGE,EAAA,MAAW,YAAA,GAAA,CADnB,EAGE,MAHF,EAGE,EAAA,EAAA,OAAA,GAAA,CACF,EAaM,MAbN,EAaM,CAAA,AAAA,EAAA,KAZJ,EAGE,MAAA,CAFA,MAAM,oCACN,MAAA,CAAA,MAAA,MAAA,kBAEF,EAOE,EAAA,KAAA,EANY,EAAA,MAAW,UAAhB,QADT,EAOE,MAAA,CALC,IAAG,KAAO,IACX,MAAM,yDACL,MAAK,EAAA,CAAA,MAA0B,IAAM,EAAA,MAAW,UAAS,MAAA,MAAA,CAAA,oCAS7CA,EAAAA,SAAM,UAAA,GAAA,CAA3B,EA2CW,EAAA,CAAA,IAAA,EAAA,CAAA,CA5CX,EAAA,cAAkB,CAEhB,EAyCM,MAzCN,EAyCM,CAvCI,EAAA,MAAa,YAAA,GAAA,CADrB,EAiBM,MAjBN,EAiBM,AAAA,EAAA,KAAA,CAbJ,EAEE,MAAA,CADA,MAAM,6DAA4D,CAAA,KAAA,GAAA,CAEpE,EASM,MAAA,CATD,MAAM,2BAA0B,CAAA,CACnC,EAGE,MAAA,CAFA,MAAM,oCACN,MAAA,CAAA,MAAA,QAAA,GAEF,EAGE,MAAA,CAFA,MAAM,yDACN,MAAA,CAAA,MAAA,QAAA,wBAIN,EAqBM,MArBN,EAqBM,EAAA,EAAA,GAAA,CApBJ,EAmBM,EAAA,KAAA,EAlBQ,EAAA,MAAa,OAAlB,QADT,EAmBM,MAAA,CAjBH,IAAK,EACN,MAAM,6BAEN,EAGE,MAAA,CAFA,MAAM,4DACL,MAAK,EAAA,CAAA,MAAA,GAAA,GAAqB,EAAC,GAAA,GAAA,IAAA,CAAA,UAE9B,EASM,MATN,EASM,EAAA,EAAA,GAAA,CARJ,EAOE,EAAA,KAAA,EANY,EAAA,MAAa,WAAlB,QADT,EAOE,MAAA,CALC,IAAG,KAAO,IACX,MAAM,yDACL,MAAK,EAAA,CAAA,MAA8B,IAAM,EAAA,MAAa,WAAU,MAAA,OAAA,CAAA,+DAY/E,EAAe,EAAA,CAAA,IAAA,EAAA,CAAA,CADf,EAAA,gBAAoB,CACpB,EAAe,EAAA,OAAA,UAAA,CAAA,CAAA,KAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Table-B8hpzOcR.css","names":[],"sources":["../src/components/C_Table/components/ColumnSettings/index.vue?vue&type=style&index=0&scoped=1a3d4df6&lang.scss","../src/components/C_Table/index.vue?vue&type=style&index=0&scoped=5791e51b&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.column-management-tab .search-row[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n.column-management-tab .search-row .search-input[data-v-1a3d4df6] {\n flex: 1;\n min-width: 0;\n}\n.column-management-tab .search-row .resizable-control[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0 10px;\n height: 34px;\n background: var(--n-color-target);\n border-radius: 6px;\n white-space: nowrap;\n}\n.column-management-tab .top-actions-bar[data-v-1a3d4df6] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n padding: 10px 12px;\n background: var(--n-color-target);\n border-radius: 6px;\n}\n.column-management-tab .top-actions-bar .stats-info[data-v-1a3d4df6] {\n flex: 1;\n}\n.column-management-tab .top-actions-bar .quick-actions[data-v-1a3d4df6] {\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 4px;\n margin-bottom: 4px;\n border-radius: 4px;\n background: transparent;\n cursor: move;\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item[data-v-1a3d4df6]:hover {\n background: var(--n-color-target);\n}\n.column-management-tab .column-list .column-item.disabled[data-v-1a3d4df6] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.column-management-tab .column-list .column-item.fixed-left[data-v-1a3d4df6] {\n background: rgba(24, 160, 88, 0.08);\n}\n.column-management-tab .column-list .column-item.fixed-right[data-v-1a3d4df6] {\n background: rgba(240, 138, 0, 0.08);\n}\n.column-management-tab .column-list .column-item .column-info[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n flex: 1;\n gap: 10px;\n min-width: 0;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle[data-v-1a3d4df6] {\n color: var(--n-text-color-3);\n cursor: grab;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle[data-v-1a3d4df6]:active {\n cursor: grabbing;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle.disabled[data-v-1a3d4df6] {\n cursor: not-allowed;\n opacity: 0.3;\n}\n.column-management-tab .column-list .column-item .column-info .column-details[data-v-1a3d4df6] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n.column-management-tab .column-list .column-item .column-actions[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls[data-v-1a3d4df6] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon[data-v-1a3d4df6] {\n opacity: 0.6;\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon[data-v-1a3d4df6]:not(.disabled):hover {\n opacity: 1;\n transform: scale(1.15);\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon.disabled[data-v-1a3d4df6] {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.column-management-tab .column-list .column-item .column-actions .c-icon[data-v-1a3d4df6] {\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item .column-actions .c-icon[data-v-1a3d4df6]:hover {\n transform: scale(1.15);\n}","/* unplugin-vue-components disabled *//* ================= 1. 组件根容器 ================= */\n.c-table-wrapper[data-v-5791e51b] {\n --c-table-border-color: var(--border-color, #e5e7eb);\n --c-table-bg: var(--body-color, #fff);\n --c-table-header-bg: var(--card-color, #fafafc);\n --c-table-summary-bg: var(--card-color, #fafafc);\n --c-table-summary-font-weight: 600;\n --c-table-drag-ghost-opacity: 0.4;\n --c-table-drag-ghost-bg: var(--primary-color, #2080f0);\n width: 100%;\n position: relative;\n}\n\n/* ================= 列拖拽排序 ================= */\n.column-drag-ghost[data-v-5791e51b] {\n opacity: var(--c-table-drag-ghost-opacity);\n background: var(--c-table-drag-ghost-bg) !important;\n}\n.drag-handle[data-v-5791e51b] {\n cursor: grab;\n}\n.drag-handle[data-v-5791e51b]:active {\n cursor: grabbing;\n}\n\n/* ================= 合计行强调 ================= */\n.c-table-wrapper[data-v-5791e51b] .n-data-table-tfoot {\n background: var(--c-table-summary-bg);\n font-weight: var(--c-table-summary-font-weight);\n}\n\n/* ================= 2. 表格工具栏 ================= */\n.table-toolbar[data-v-5791e51b] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n.table-toolbar .toolbar-left[data-v-5791e51b] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.table-toolbar .toolbar-right[data-v-5791e51b] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.table-toolbar .toolbar-right .column-settings-btn[data-v-5791e51b] {\n opacity: 0.6;\n transition: opacity 0.2s ease, transform 0.2s ease;\n cursor: pointer;\n}\n.table-toolbar .toolbar-right .column-settings-btn[data-v-5791e51b]:hover {\n opacity: 1;\n transform: scale(1.1);\n}\n\n/* ================= 3. 动态行工具栏 ================= */\n.dynamic-rows-toolbar[data-v-5791e51b] {\n margin-bottom: 16px;\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--n-border-color);\n background-color: var(--n-card-color);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n transition: all 0.2s ease;\n}\n.dynamic-rows-toolbar[data-v-5791e51b]:hover {\n border-color: var(--n-primary-color-suppl);\n}\n\n/* ================= 4. 表格布局基础 ================= */\n[data-v-5791e51b] .n-data-table {\n table-layout: auto !important;\n width: 100% !important;\n border-radius: 8px;\n overflow: hidden;\n}\n\n/* 确保表格容器允许横向滚动(固定列必需) */\n[data-v-5791e51b] .n-data-table-wrapper {\n overflow-x: auto !important;\n}\n\n/* 分页组件样式 */\n.pagination-wrapper[data-v-5791e51b] {\n margin-top: 16px;\n display: flex;\n justify-content: flex-end;\n}\n\n/* ================= 5. 表格列宽度管理 ================= */\n/* 普通列的最小宽度保护 */\n[data-v-5791e51b] .n-data-table-th:not(:last-child) {\n min-width: 80px !important;\n}\n\n/* 操作列固定宽度(适应4个按钮的布局) */\n[data-v-5791e51b] .n-data-table-th:last-child {\n width: 180px !important;\n min-width: 160px !important;\n max-width: 200px !important;\n text-align: center !important;\n padding: 8px 12px !important;\n}\n\n/* 操作按钮容器居中 */\n[data-v-5791e51b] .n-data-table-td:last-child .n-space {\n justify-content: center !important;\n align-items: center !important;\n}\n\n/* ================= 6. 可编辑单元格样式 ================= */\n/* 单元格编辑容器 - 精致化设计 */\n.cell-edit-wrapper[data-v-5791e51b] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 6px 8px;\n min-height: 36px;\n border-radius: 4px;\n transition: all 0.2s ease;\n cursor: pointer;\n position: relative;\n /* 悬停效果 */\n /* 激活状态 */\n}\n.cell-edit-wrapper[data-v-5791e51b]:hover {\n background-color: var(--n-color-target);\n}\n.cell-edit-wrapper:hover .cell-edit-icon[data-v-5791e51b] {\n opacity: 1;\n color: var(--n-color-success);\n transform: scale(1.05);\n}\n.cell-edit-wrapper[data-v-5791e51b]:active {\n transform: translateY(1px);\n}\n\n/* 单元格内容 */\n.cell-value[data-v-5791e51b] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-right: 16px;\n line-height: 1.4;\n font-size: 13px;\n}\n\n/* 编辑图标 - 使用全局选择器确保动态创建的元素也能被选中 */\n.cell-edit-icon[data-v-5791e51b],.cell-edit-icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n margin-left: 4px;\n transition: all 0.25s ease;\n color: var(--n-color-success);\n opacity: 0;\n position: relative;\n /* 悬停效果 */\n /* 激活效果 */\n /* 图标尺寸 */\n}\n.cell-edit-icon[data-v-5791e51b]:hover,.cell-edit-icon {\n opacity: 1 !important;\n color: var(--n-color-success-hover) !important;\n background-color: var(--n-color-success-pressed);\n transform: scale(1.1);\n}\n.cell-edit-icon[data-v-5791e51b]:active,.cell-edit-icon {\n transform: scale(0.95);\n}\n.cell-edit-icon svg[data-v-5791e51b],.cell-edit-icon {\n width: 14px;\n height: 14px;\n}\n\n/* ================= 7. 单元格编辑状态样式 ================= */\n/* 编辑容器 - 确保水平布局不换行 */\n.cell-editing-container[data-v-5791e51b],[data-v-5791e51b] .cell-editing-container {\n display: flex !important;\n align-items: center !important;\n width: 100% !important;\n min-height: 36px !important;\n background-color: var(--n-input-color) !important;\n border: 1px solid var(--n-primary-color) !important;\n border-radius: 6px !important;\n padding: 4px 6px !important;\n box-shadow: 0 0 0 2px var(--n-primary-color-suppl) !important;\n gap: 8px !important;\n}\n\n/* 编辑输入区域 - 占据剩余空间 */\n.cell-editing-input[data-v-5791e51b],[data-v-5791e51b] .cell-editing-input {\n flex: 1 !important;\n min-width: 0 !important;\n}\n\n/* 深度选择器处理输入框样式 */\n[data-v-5791e51b] .cell-editing-input .n-input {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-5791e51b] .cell-editing-input .n-input.n-input--focus {\n border: none !important;\n box-shadow: none !important;\n}\n[data-v-5791e51b] .cell-editing-input .n-input-number {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-5791e51b] .cell-editing-input .n-select {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-5791e51b] .cell-editing-input .n-select .n-base-selection {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n\n/* 编辑操作按钮容器 */\n.cell-editing-actions[data-v-5791e51b],[data-v-5791e51b] .cell-editing-actions {\n display: flex !important;\n flex-shrink: 0 !important;\n align-items: center !important;\n gap: 4px !important;\n background: var(--n-color-popover) !important;\n border: 1px solid var(--n-border-color) !important;\n border-radius: 4px !important;\n padding: 2px !important;\n box-shadow: var(--n-box-shadow) !important;\n}\n\n/* 编辑操作按钮 */\n.cell-action-btn[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n width: 20px !important;\n height: 20px !important;\n border: none !important;\n border-radius: 3px !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n background: transparent !important;\n /* 保存按钮 */\n /* 取消按钮 */\n /* 图标尺寸 */\n}\n.cell-action-btn.cell-action-save[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn.cell-action-save {\n color: var(--n-color-success) !important;\n}\n.cell-action-btn.cell-action-save[data-v-5791e51b]:hover,[data-v-5791e51b] .cell-action-btn.cell-action-save:hover {\n background: var(--n-color-success-pressed) !important;\n transform: scale(1.1) !important;\n}\n.cell-action-btn.cell-action-cancel[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn.cell-action-cancel {\n color: var(--n-color-error) !important;\n}\n.cell-action-btn.cell-action-cancel[data-v-5791e51b]:hover,[data-v-5791e51b] .cell-action-btn.cell-action-cancel:hover {\n background: var(--n-color-error-pressed) !important;\n transform: scale(1.1) !important;\n}\n.cell-action-btn svg[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn svg {\n width: 11px !important;\n height: 11px !important;\n}\n\n/* ================= 7. 操作按钮样式 ================= */\n/* 通用按钮样式 */\n[data-v-5791e51b] .n-button {\n white-space: nowrap;\n font-size: 12px !important;\n flex-shrink: 0 !important;\n border-radius: 6px;\n transition: all 0.2s ease;\n font-weight: 500;\n /* 图标间距 */\n /* 小尺寸按钮优化 */\n /* 四元按钮样式 */\n}\n[data-v-5791e51b] .n-button .n-icon {\n margin-right: 4px !important;\n}\n[data-v-5791e51b] .n-button.n-button--small-type {\n padding: 4px 8px;\n height: 28px;\n line-height: 20px;\n}\n[data-v-5791e51b] .n-button.n-button--quaternary-type:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n[data-v-5791e51b] .n-button.n-button--quaternary-type:active {\n transform: translateY(0);\n}\n\n/* ================= 8. 按钮组间距优化 ================= */\n/* 操作按钮组 */\n[data-v-5791e51b] .n-space.n-space--horizontal .n-space-item:not(:last-child) {\n margin-right: 6px !important;\n}\n\n/* ================= 9. 模态框样式优化 ================= */\n/* 编辑模态框 */\n[data-v-5791e51b] .n-modal .n-card {\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n[data-v-5791e51b] .n-modal .n-card__header {\n padding: 20px 24px 16px;\n font-weight: 600;\n font-size: 16px;\n}\n[data-v-5791e51b] .n-modal .n-card__content {\n padding: 0 24px 16px;\n}\n[data-v-5791e51b] .n-modal .n-card__action {\n padding: 16px 24px 20px;\n border-top: 1px solid var(--n-divider-color);\n}\n\n/* ================= 10. 描述列表样式 ================= */\n/* 详情模态框描述列表 */\n[data-v-5791e51b] .n-descriptions .n-descriptions-item-label {\n font-weight: 500;\n color: var(--n-text-color-2);\n}\n[data-v-5791e51b] .n-descriptions .n-descriptions-item-content {\n color: var(--n-text-color-1);\n word-break: break-all;\n}\n\n/* ================= 11. 响应式设计 ================= */\n/* 移动端适配 */\n@media (max-width: 768px) {\n.c-table-wrapper[data-v-5791e51b] {\n overflow-x: auto;\n}\n /* 操作列在移动端的适配 */\n[data-v-5791e51b] .n-data-table-th:last-child {\n width: 160px !important;\n min-width: 160px !important;\n}\n /* 按钮在移动端的优化 */\n[data-v-5791e51b] .n-button {\n font-size: 11px !important;\n padding: 3px 6px;\n}\n[data-v-5791e51b] .n-button .n-icon {\n margin-right: 2px !important;\n}\n /* 单元格编辑图标在移动端始终显示 */\n.cell-edit-icon[data-v-5791e51b] {\n opacity: 0.6;\n}\n}\n/* ================= 12. 主题适配 ================= */\n/* 暗色主题适配 - 已通过 CSS 变量自动适配 */\n[data-theme=dark][data-v-5791e51b] {\n /* CSS 变量已自动适配,如有特殊需求可在此添加 */\n}\n\n/* ================= 13. 响应式优化 ================= */\n/* 小屏幕下的单元格编辑优化 */\n@media (max-width: 768px) {\n.cell-editing-container[data-v-5791e51b],[data-v-5791e51b] .cell-editing-container {\n gap: 6px !important;\n}\n.cell-editing-actions[data-v-5791e51b],[data-v-5791e51b] .cell-editing-actions {\n gap: 3px !important;\n padding: 2px !important;\n}\n.cell-action-btn[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn {\n width: 18px !important;\n height: 18px !important;\n}\n.cell-action-btn svg[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn svg {\n width: 10px !important;\n height: 10px !important;\n}\n /* 移动端编辑图标 */\n.cell-edit-icon[data-v-5791e51b] {\n opacity: 0.6 !important;\n}\n.cell-value[data-v-5791e51b] {\n margin-right: 12px !important;\n}\n}\n/* ================= 14. 性能优化 ================= */\n/* 使用 GPU 加速的动画 */\n.cell-edit-icon[data-v-5791e51b],\n.cell-action-btn[data-v-5791e51b] {\n will-change: transform;\n backface-visibility: hidden;\n}\n[data-v-5791e51b] .n-button {\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* ================= 15. 可访问性优化 ================= */\n/* 聚焦状态 */\n.cell-edit-wrapper[data-v-5791e51b]:focus-within,\n.cell-editing-container[data-v-5791e51b]:focus-within {\n outline: 2px solid var(--n-primary-color);\n outline-offset: 2px;\n}\n\n/* 高对比度模式支持 */\n@media (prefers-contrast: high) {\n.cell-edit-icon[data-v-5791e51b] {\n opacity: 0.8;\n}\n.cell-editing-actions[data-v-5791e51b] {\n border-width: 2px;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
1
|
+
{"version":3,"file":"C_Table-BcM5LqAM.css","names":[],"sources":["../src/components/C_Table/components/ColumnSettings/index.vue?vue&type=style&index=0&scoped=d733b0fa&lang.scss","../src/components/C_Table/index.vue?vue&type=style&index=0&scoped=d2c076b0&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.column-management-tab .search-row[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n.column-management-tab .search-row .search-input[data-v-d733b0fa] {\n flex: 1;\n min-width: 0;\n}\n.column-management-tab .search-row .resizable-control[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0 10px;\n height: 34px;\n background: var(--n-color-target);\n border-radius: 6px;\n white-space: nowrap;\n}\n.column-management-tab .top-actions-bar[data-v-d733b0fa] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n padding: 10px 12px;\n background: var(--n-color-target);\n border-radius: 6px;\n}\n.column-management-tab .top-actions-bar .stats-info[data-v-d733b0fa] {\n flex: 1;\n}\n.column-management-tab .top-actions-bar .quick-actions[data-v-d733b0fa] {\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 4px;\n margin-bottom: 4px;\n border-radius: 4px;\n background: transparent;\n cursor: move;\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item[data-v-d733b0fa]:hover {\n background: var(--n-color-target);\n}\n.column-management-tab .column-list .column-item.disabled[data-v-d733b0fa] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.column-management-tab .column-list .column-item.fixed-left[data-v-d733b0fa] {\n background: rgba(24, 160, 88, 0.08);\n}\n.column-management-tab .column-list .column-item.fixed-right[data-v-d733b0fa] {\n background: rgba(240, 138, 0, 0.08);\n}\n.column-management-tab .column-list .column-item .column-info[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n flex: 1;\n gap: 10px;\n min-width: 0;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle[data-v-d733b0fa] {\n color: var(--n-text-color-3);\n cursor: grab;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle[data-v-d733b0fa]:active {\n cursor: grabbing;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle.disabled[data-v-d733b0fa] {\n cursor: not-allowed;\n opacity: 0.3;\n}\n.column-management-tab .column-list .column-item .column-info .column-details[data-v-d733b0fa] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n.column-management-tab .column-list .column-item .column-actions[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls[data-v-d733b0fa] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon[data-v-d733b0fa] {\n opacity: 0.6;\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon[data-v-d733b0fa]:not(.disabled):hover {\n opacity: 1;\n transform: scale(1.15);\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon.disabled[data-v-d733b0fa] {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.column-management-tab .column-list .column-item .column-actions .c-icon[data-v-d733b0fa] {\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item .column-actions .c-icon[data-v-d733b0fa]:hover {\n transform: scale(1.15);\n}","/* unplugin-vue-components disabled *//* ================= 1. 组件根容器 ================= */\n.c-table-wrapper[data-v-d2c076b0] {\n --c-table-border-color: var(--border-color, #e5e7eb);\n --c-table-bg: var(--body-color, #fff);\n --c-table-header-bg: var(--card-color, #fafafc);\n --c-table-summary-bg: var(--card-color, #fafafc);\n --c-table-summary-font-weight: 600;\n --c-table-drag-ghost-opacity: 0.4;\n --c-table-drag-ghost-bg: var(--primary-color, #2080f0);\n width: 100%;\n position: relative;\n}\n\n/* ================= 列拖拽排序 ================= */\n.column-drag-ghost[data-v-d2c076b0] {\n opacity: var(--c-table-drag-ghost-opacity);\n background: var(--c-table-drag-ghost-bg) !important;\n}\n.drag-handle[data-v-d2c076b0] {\n cursor: grab;\n}\n.drag-handle[data-v-d2c076b0]:active {\n cursor: grabbing;\n}\n\n/* ================= 合计行强调 ================= */\n.c-table-wrapper[data-v-d2c076b0] .n-data-table-tfoot {\n background: var(--c-table-summary-bg);\n font-weight: var(--c-table-summary-font-weight);\n}\n\n/* ================= 2. 表格工具栏 ================= */\n.table-toolbar[data-v-d2c076b0] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n.table-toolbar .toolbar-left[data-v-d2c076b0] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.table-toolbar .toolbar-right[data-v-d2c076b0] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.table-toolbar .toolbar-right .column-settings-btn[data-v-d2c076b0] {\n opacity: 0.6;\n transition: opacity 0.2s ease, transform 0.2s ease;\n cursor: pointer;\n}\n.table-toolbar .toolbar-right .column-settings-btn[data-v-d2c076b0]:hover {\n opacity: 1;\n transform: scale(1.1);\n}\n\n/* ================= 3. 动态行工具栏 ================= */\n.dynamic-rows-toolbar[data-v-d2c076b0] {\n margin-bottom: 16px;\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--n-border-color);\n background-color: var(--n-card-color);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n transition: all 0.2s ease;\n}\n.dynamic-rows-toolbar[data-v-d2c076b0]:hover {\n border-color: var(--n-primary-color-suppl);\n}\n\n/* ================= 4. 表格布局基础 ================= */\n[data-v-d2c076b0] .n-data-table {\n table-layout: auto !important;\n width: 100% !important;\n border-radius: 8px;\n overflow: hidden;\n}\n\n/* 确保表格容器允许横向滚动(固定列必需) */\n[data-v-d2c076b0] .n-data-table-wrapper {\n overflow-x: auto !important;\n}\n\n/* 分页组件样式 */\n.pagination-wrapper[data-v-d2c076b0] {\n margin-top: 16px;\n display: flex;\n justify-content: flex-end;\n}\n\n/* ================= 5. 表格列宽度管理 ================= */\n/* 普通列的最小宽度保护 */\n[data-v-d2c076b0] .n-data-table-th:not(:last-child) {\n min-width: 80px !important;\n}\n\n/* 操作列固定宽度(适应4个按钮的布局) */\n[data-v-d2c076b0] .n-data-table-th:last-child {\n width: 180px !important;\n min-width: 160px !important;\n max-width: 200px !important;\n text-align: center !important;\n padding: 8px 12px !important;\n}\n\n/* 操作按钮容器居中 */\n[data-v-d2c076b0] .n-data-table-td:last-child .n-space {\n justify-content: center !important;\n align-items: center !important;\n}\n\n/* ================= 6. 可编辑单元格样式 ================= */\n/* 单元格编辑容器 - 精致化设计 */\n.cell-edit-wrapper[data-v-d2c076b0] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 6px 8px;\n min-height: 36px;\n border-radius: 4px;\n transition: all 0.2s ease;\n cursor: pointer;\n position: relative;\n /* 悬停效果 */\n /* 激活状态 */\n}\n.cell-edit-wrapper[data-v-d2c076b0]:hover {\n background-color: var(--n-color-target);\n}\n.cell-edit-wrapper:hover .cell-edit-icon[data-v-d2c076b0] {\n opacity: 1;\n color: var(--n-color-success);\n transform: scale(1.05);\n}\n.cell-edit-wrapper[data-v-d2c076b0]:active {\n transform: translateY(1px);\n}\n\n/* 单元格内容 */\n.cell-value[data-v-d2c076b0] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-right: 16px;\n line-height: 1.4;\n font-size: 13px;\n}\n\n/* 编辑图标 - 使用全局选择器确保动态创建的元素也能被选中 */\n.cell-edit-icon[data-v-d2c076b0],.cell-edit-icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n margin-left: 4px;\n transition: all 0.25s ease;\n color: var(--n-color-success);\n opacity: 0;\n position: relative;\n /* 悬停效果 */\n /* 激活效果 */\n /* 图标尺寸 */\n}\n.cell-edit-icon[data-v-d2c076b0]:hover,.cell-edit-icon {\n opacity: 1 !important;\n color: var(--n-color-success-hover) !important;\n background-color: var(--n-color-success-pressed);\n transform: scale(1.1);\n}\n.cell-edit-icon[data-v-d2c076b0]:active,.cell-edit-icon {\n transform: scale(0.95);\n}\n.cell-edit-icon svg[data-v-d2c076b0],.cell-edit-icon {\n width: 14px;\n height: 14px;\n}\n\n/* ================= 7. 单元格编辑状态样式 ================= */\n/* 编辑容器 - 确保水平布局不换行 */\n.cell-editing-container[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-container {\n display: flex !important;\n align-items: center !important;\n width: 100% !important;\n min-height: 36px !important;\n background-color: var(--n-input-color) !important;\n border: 1px solid var(--n-primary-color) !important;\n border-radius: 6px !important;\n padding: 4px 6px !important;\n box-shadow: 0 0 0 2px var(--n-primary-color-suppl) !important;\n gap: 8px !important;\n}\n\n/* 编辑输入区域 - 占据剩余空间 */\n.cell-editing-input[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-input {\n flex: 1 !important;\n min-width: 0 !important;\n}\n\n/* 深度选择器处理输入框样式 */\n[data-v-d2c076b0] .cell-editing-input .n-input {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-d2c076b0] .cell-editing-input .n-input.n-input--focus {\n border: none !important;\n box-shadow: none !important;\n}\n[data-v-d2c076b0] .cell-editing-input .n-input-number {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-d2c076b0] .cell-editing-input .n-select {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-d2c076b0] .cell-editing-input .n-select .n-base-selection {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n\n/* 编辑操作按钮容器 */\n.cell-editing-actions[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-actions {\n display: flex !important;\n flex-shrink: 0 !important;\n align-items: center !important;\n gap: 4px !important;\n background: var(--n-color-popover) !important;\n border: 1px solid var(--n-border-color) !important;\n border-radius: 4px !important;\n padding: 2px !important;\n box-shadow: var(--n-box-shadow) !important;\n}\n\n/* 编辑操作按钮 */\n.cell-action-btn[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n width: 20px !important;\n height: 20px !important;\n border: none !important;\n border-radius: 3px !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n background: transparent !important;\n /* 保存按钮 */\n /* 取消按钮 */\n /* 图标尺寸 */\n}\n.cell-action-btn.cell-action-save[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn.cell-action-save {\n color: var(--n-color-success) !important;\n}\n.cell-action-btn.cell-action-save[data-v-d2c076b0]:hover,[data-v-d2c076b0] .cell-action-btn.cell-action-save:hover {\n background: var(--n-color-success-pressed) !important;\n transform: scale(1.1) !important;\n}\n.cell-action-btn.cell-action-cancel[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn.cell-action-cancel {\n color: var(--n-color-error) !important;\n}\n.cell-action-btn.cell-action-cancel[data-v-d2c076b0]:hover,[data-v-d2c076b0] .cell-action-btn.cell-action-cancel:hover {\n background: var(--n-color-error-pressed) !important;\n transform: scale(1.1) !important;\n}\n.cell-action-btn svg[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn svg {\n width: 11px !important;\n height: 11px !important;\n}\n\n/* ================= 7. 操作按钮样式 ================= */\n/* 通用按钮样式 */\n[data-v-d2c076b0] .n-button {\n white-space: nowrap;\n font-size: 12px !important;\n flex-shrink: 0 !important;\n border-radius: 6px;\n transition: all 0.2s ease;\n font-weight: 500;\n /* 图标间距 */\n /* 小尺寸按钮优化 */\n /* 四元按钮样式 */\n}\n[data-v-d2c076b0] .n-button .n-icon {\n margin-right: 4px !important;\n}\n[data-v-d2c076b0] .n-button.n-button--small-type {\n padding: 4px 8px;\n height: 28px;\n line-height: 20px;\n}\n[data-v-d2c076b0] .n-button.n-button--quaternary-type:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n[data-v-d2c076b0] .n-button.n-button--quaternary-type:active {\n transform: translateY(0);\n}\n\n/* ================= 8. 按钮组间距优化 ================= */\n/* 操作按钮组 */\n[data-v-d2c076b0] .n-space.n-space--horizontal .n-space-item:not(:last-child) {\n margin-right: 6px !important;\n}\n\n/* ================= 9. 模态框样式优化 ================= */\n/* 编辑模态框 */\n[data-v-d2c076b0] .n-modal .n-card {\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n[data-v-d2c076b0] .n-modal .n-card__header {\n padding: 20px 24px 16px;\n font-weight: 600;\n font-size: 16px;\n}\n[data-v-d2c076b0] .n-modal .n-card__content {\n padding: 0 24px 16px;\n}\n[data-v-d2c076b0] .n-modal .n-card__action {\n padding: 16px 24px 20px;\n border-top: 1px solid var(--n-divider-color);\n}\n\n/* ================= 10. 描述列表样式 ================= */\n/* 详情模态框描述列表 */\n[data-v-d2c076b0] .n-descriptions .n-descriptions-item-label {\n font-weight: 500;\n color: var(--n-text-color-2);\n}\n[data-v-d2c076b0] .n-descriptions .n-descriptions-item-content {\n color: var(--n-text-color-1);\n word-break: break-all;\n}\n\n/* ================= 11. 响应式设计 ================= */\n/* 移动端适配 */\n@media (max-width: 768px) {\n.c-table-wrapper[data-v-d2c076b0] {\n overflow-x: auto;\n}\n /* 操作列在移动端的适配 */\n[data-v-d2c076b0] .n-data-table-th:last-child {\n width: 160px !important;\n min-width: 160px !important;\n}\n /* 按钮在移动端的优化 */\n[data-v-d2c076b0] .n-button {\n font-size: 11px !important;\n padding: 3px 6px;\n}\n[data-v-d2c076b0] .n-button .n-icon {\n margin-right: 2px !important;\n}\n /* 单元格编辑图标在移动端始终显示 */\n.cell-edit-icon[data-v-d2c076b0] {\n opacity: 0.6;\n}\n}\n/* ================= 12. 主题适配 ================= */\n/* 暗色主题适配 - 已通过 CSS 变量自动适配 */\n[data-theme=dark][data-v-d2c076b0] {\n /* CSS 变量已自动适配,如有特殊需求可在此添加 */\n}\n\n/* ================= 13. 响应式优化 ================= */\n/* 小屏幕下的单元格编辑优化 */\n@media (max-width: 768px) {\n.cell-editing-container[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-container {\n gap: 6px !important;\n}\n.cell-editing-actions[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-actions {\n gap: 3px !important;\n padding: 2px !important;\n}\n.cell-action-btn[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn {\n width: 18px !important;\n height: 18px !important;\n}\n.cell-action-btn svg[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn svg {\n width: 10px !important;\n height: 10px !important;\n}\n /* 移动端编辑图标 */\n.cell-edit-icon[data-v-d2c076b0] {\n opacity: 0.6 !important;\n}\n.cell-value[data-v-d2c076b0] {\n margin-right: 12px !important;\n}\n}\n/* ================= 14. 性能优化 ================= */\n/* 使用 GPU 加速的动画 */\n.cell-edit-icon[data-v-d2c076b0],\n.cell-action-btn[data-v-d2c076b0] {\n will-change: transform;\n backface-visibility: hidden;\n}\n[data-v-d2c076b0] .n-button {\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* ================= 15. 可访问性优化 ================= */\n/* 聚焦状态 */\n.cell-edit-wrapper[data-v-d2c076b0]:focus-within,\n.cell-editing-container[data-v-d2c076b0]:focus-within {\n outline: 2px solid var(--n-primary-color);\n outline-offset: 2px;\n}\n\n/* 高对比度模式支持 */\n@media (prefers-contrast: high) {\n.cell-edit-icon[data-v-d2c076b0] {\n opacity: 0.8;\n}\n.cell-editing-actions[data-v-d2c076b0] {\n border-width: 2px;\n}\n}\n/* ================= 11. 行拖拽排序 ================= */\n.row-drag-ghost[data-v-d2c076b0] {\n opacity: 0.4;\n background: var(--c-table-drag-ghost-bg) !important;\n}\n.row-drag-chosen[data-v-d2c076b0] {\n background: var(--n-color-hover, #f5f5f5) !important;\n}\n\n/* ================= 12. 批量操作栏 ================= */\n.batch-actions-bar[data-v-d2c076b0] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n margin-bottom: 8px;\n background: var(--n-color-hover, #f0f7ff);\n border-radius: 6px;\n border: 1px solid var(--n-primary-color-suppl, #70b3ff);\n}\n.batch-actions-bar .batch-info[data-v-d2c076b0] {\n font-size: 13px;\n color: var(--n-text-color-2);\n font-weight: 500;\n}\n\n/* ================= 13. 错误状态 ================= */\n.table-error-state[data-v-d2c076b0] {\n padding: 48px 24px;\n text-align: center;\n}\n.table-error-state .error-content[data-v-d2c076b0] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n color: var(--n-text-color-3, #999);\n}\n.table-error-state .error-message[data-v-d2c076b0] {\n font-size: 14px;\n margin: 0;\n color: var(--n-text-color-2, #666);\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Table-CGP3n_u0.css","names":[],"sources":["../src/components/C_Table/components/ColumnSettings/index.vue?vue&type=style&index=0&scoped=1a3d4df6&lang.scss","../src/components/C_Table/index.vue?vue&type=style&index=0&scoped=5791e51b&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.column-management-tab .search-row[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n.column-management-tab .search-row .search-input[data-v-1a3d4df6] {\n flex: 1;\n min-width: 0;\n}\n.column-management-tab .search-row .resizable-control[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0 10px;\n height: 34px;\n background: var(--n-color-target);\n border-radius: 6px;\n white-space: nowrap;\n}\n.column-management-tab .top-actions-bar[data-v-1a3d4df6] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n padding: 10px 12px;\n background: var(--n-color-target);\n border-radius: 6px;\n}\n.column-management-tab .top-actions-bar .stats-info[data-v-1a3d4df6] {\n flex: 1;\n}\n.column-management-tab .top-actions-bar .quick-actions[data-v-1a3d4df6] {\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 4px;\n margin-bottom: 4px;\n border-radius: 4px;\n background: transparent;\n cursor: move;\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item[data-v-1a3d4df6]:hover {\n background: var(--n-color-target);\n}\n.column-management-tab .column-list .column-item.disabled[data-v-1a3d4df6] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.column-management-tab .column-list .column-item.fixed-left[data-v-1a3d4df6] {\n background: rgba(24, 160, 88, 0.08);\n}\n.column-management-tab .column-list .column-item.fixed-right[data-v-1a3d4df6] {\n background: rgba(240, 138, 0, 0.08);\n}\n.column-management-tab .column-list .column-item .column-info[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n flex: 1;\n gap: 10px;\n min-width: 0;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle[data-v-1a3d4df6] {\n color: var(--n-text-color-3);\n cursor: grab;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle[data-v-1a3d4df6]:active {\n cursor: grabbing;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle.disabled[data-v-1a3d4df6] {\n cursor: not-allowed;\n opacity: 0.3;\n}\n.column-management-tab .column-list .column-item .column-info .column-details[data-v-1a3d4df6] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n.column-management-tab .column-list .column-item .column-actions[data-v-1a3d4df6] {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls[data-v-1a3d4df6] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon[data-v-1a3d4df6] {\n opacity: 0.6;\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon[data-v-1a3d4df6]:not(.disabled):hover {\n opacity: 1;\n transform: scale(1.15);\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon.disabled[data-v-1a3d4df6] {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.column-management-tab .column-list .column-item .column-actions .c-icon[data-v-1a3d4df6] {\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item .column-actions .c-icon[data-v-1a3d4df6]:hover {\n transform: scale(1.15);\n}","/* unplugin-vue-components disabled *//* ================= 1. 组件根容器 ================= */\n.c-table-wrapper[data-v-5791e51b] {\n --c-table-border-color: var(--border-color, #e5e7eb);\n --c-table-bg: var(--body-color, #fff);\n --c-table-header-bg: var(--card-color, #fafafc);\n --c-table-summary-bg: var(--card-color, #fafafc);\n --c-table-summary-font-weight: 600;\n --c-table-drag-ghost-opacity: 0.4;\n --c-table-drag-ghost-bg: var(--primary-color, #2080f0);\n width: 100%;\n position: relative;\n}\n\n/* ================= 列拖拽排序 ================= */\n.column-drag-ghost[data-v-5791e51b] {\n opacity: var(--c-table-drag-ghost-opacity);\n background: var(--c-table-drag-ghost-bg) !important;\n}\n.drag-handle[data-v-5791e51b] {\n cursor: grab;\n}\n.drag-handle[data-v-5791e51b]:active {\n cursor: grabbing;\n}\n\n/* ================= 合计行强调 ================= */\n.c-table-wrapper[data-v-5791e51b] .n-data-table-tfoot {\n background: var(--c-table-summary-bg);\n font-weight: var(--c-table-summary-font-weight);\n}\n\n/* ================= 2. 表格工具栏 ================= */\n.table-toolbar[data-v-5791e51b] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n.table-toolbar .toolbar-left[data-v-5791e51b] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.table-toolbar .toolbar-right[data-v-5791e51b] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.table-toolbar .toolbar-right .column-settings-btn[data-v-5791e51b] {\n opacity: 0.6;\n transition: opacity 0.2s ease, transform 0.2s ease;\n cursor: pointer;\n}\n.table-toolbar .toolbar-right .column-settings-btn[data-v-5791e51b]:hover {\n opacity: 1;\n transform: scale(1.1);\n}\n\n/* ================= 3. 动态行工具栏 ================= */\n.dynamic-rows-toolbar[data-v-5791e51b] {\n margin-bottom: 16px;\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--n-border-color);\n background-color: var(--n-card-color);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n transition: all 0.2s ease;\n}\n.dynamic-rows-toolbar[data-v-5791e51b]:hover {\n border-color: var(--n-primary-color-suppl);\n}\n\n/* ================= 4. 表格布局基础 ================= */\n[data-v-5791e51b] .n-data-table {\n table-layout: auto !important;\n width: 100% !important;\n border-radius: 8px;\n overflow: hidden;\n}\n\n/* 确保表格容器允许横向滚动(固定列必需) */\n[data-v-5791e51b] .n-data-table-wrapper {\n overflow-x: auto !important;\n}\n\n/* 分页组件样式 */\n.pagination-wrapper[data-v-5791e51b] {\n margin-top: 16px;\n display: flex;\n justify-content: flex-end;\n}\n\n/* ================= 5. 表格列宽度管理 ================= */\n/* 普通列的最小宽度保护 */\n[data-v-5791e51b] .n-data-table-th:not(:last-child) {\n min-width: 80px !important;\n}\n\n/* 操作列固定宽度(适应4个按钮的布局) */\n[data-v-5791e51b] .n-data-table-th:last-child {\n width: 180px !important;\n min-width: 160px !important;\n max-width: 200px !important;\n text-align: center !important;\n padding: 8px 12px !important;\n}\n\n/* 操作按钮容器居中 */\n[data-v-5791e51b] .n-data-table-td:last-child .n-space {\n justify-content: center !important;\n align-items: center !important;\n}\n\n/* ================= 6. 可编辑单元格样式 ================= */\n/* 单元格编辑容器 - 精致化设计 */\n.cell-edit-wrapper[data-v-5791e51b] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 6px 8px;\n min-height: 36px;\n border-radius: 4px;\n transition: all 0.2s ease;\n cursor: pointer;\n position: relative;\n /* 悬停效果 */\n /* 激活状态 */\n}\n.cell-edit-wrapper[data-v-5791e51b]:hover {\n background-color: var(--n-color-target);\n}\n.cell-edit-wrapper:hover .cell-edit-icon[data-v-5791e51b] {\n opacity: 1;\n color: var(--n-color-success);\n transform: scale(1.05);\n}\n.cell-edit-wrapper[data-v-5791e51b]:active {\n transform: translateY(1px);\n}\n\n/* 单元格内容 */\n.cell-value[data-v-5791e51b] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-right: 16px;\n line-height: 1.4;\n font-size: 13px;\n}\n\n/* 编辑图标 - 使用全局选择器确保动态创建的元素也能被选中 */\n.cell-edit-icon[data-v-5791e51b],.cell-edit-icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n margin-left: 4px;\n transition: all 0.25s ease;\n color: var(--n-color-success);\n opacity: 0;\n position: relative;\n /* 悬停效果 */\n /* 激活效果 */\n /* 图标尺寸 */\n}\n.cell-edit-icon[data-v-5791e51b]:hover,.cell-edit-icon {\n opacity: 1 !important;\n color: var(--n-color-success-hover) !important;\n background-color: var(--n-color-success-pressed);\n transform: scale(1.1);\n}\n.cell-edit-icon[data-v-5791e51b]:active,.cell-edit-icon {\n transform: scale(0.95);\n}\n.cell-edit-icon svg[data-v-5791e51b],.cell-edit-icon {\n width: 14px;\n height: 14px;\n}\n\n/* ================= 7. 单元格编辑状态样式 ================= */\n/* 编辑容器 - 确保水平布局不换行 */\n.cell-editing-container[data-v-5791e51b],[data-v-5791e51b] .cell-editing-container {\n display: flex !important;\n align-items: center !important;\n width: 100% !important;\n min-height: 36px !important;\n background-color: var(--n-input-color) !important;\n border: 1px solid var(--n-primary-color) !important;\n border-radius: 6px !important;\n padding: 4px 6px !important;\n box-shadow: 0 0 0 2px var(--n-primary-color-suppl) !important;\n gap: 8px !important;\n}\n\n/* 编辑输入区域 - 占据剩余空间 */\n.cell-editing-input[data-v-5791e51b],[data-v-5791e51b] .cell-editing-input {\n flex: 1 !important;\n min-width: 0 !important;\n}\n\n/* 深度选择器处理输入框样式 */\n[data-v-5791e51b] .cell-editing-input .n-input {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-5791e51b] .cell-editing-input .n-input.n-input--focus {\n border: none !important;\n box-shadow: none !important;\n}\n[data-v-5791e51b] .cell-editing-input .n-input-number {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-5791e51b] .cell-editing-input .n-select {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-5791e51b] .cell-editing-input .n-select .n-base-selection {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n\n/* 编辑操作按钮容器 */\n.cell-editing-actions[data-v-5791e51b],[data-v-5791e51b] .cell-editing-actions {\n display: flex !important;\n flex-shrink: 0 !important;\n align-items: center !important;\n gap: 4px !important;\n background: var(--n-color-popover) !important;\n border: 1px solid var(--n-border-color) !important;\n border-radius: 4px !important;\n padding: 2px !important;\n box-shadow: var(--n-box-shadow) !important;\n}\n\n/* 编辑操作按钮 */\n.cell-action-btn[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n width: 20px !important;\n height: 20px !important;\n border: none !important;\n border-radius: 3px !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n background: transparent !important;\n /* 保存按钮 */\n /* 取消按钮 */\n /* 图标尺寸 */\n}\n.cell-action-btn.cell-action-save[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn.cell-action-save {\n color: var(--n-color-success) !important;\n}\n.cell-action-btn.cell-action-save[data-v-5791e51b]:hover,[data-v-5791e51b] .cell-action-btn.cell-action-save:hover {\n background: var(--n-color-success-pressed) !important;\n transform: scale(1.1) !important;\n}\n.cell-action-btn.cell-action-cancel[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn.cell-action-cancel {\n color: var(--n-color-error) !important;\n}\n.cell-action-btn.cell-action-cancel[data-v-5791e51b]:hover,[data-v-5791e51b] .cell-action-btn.cell-action-cancel:hover {\n background: var(--n-color-error-pressed) !important;\n transform: scale(1.1) !important;\n}\n.cell-action-btn svg[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn svg {\n width: 11px !important;\n height: 11px !important;\n}\n\n/* ================= 7. 操作按钮样式 ================= */\n/* 通用按钮样式 */\n[data-v-5791e51b] .n-button {\n white-space: nowrap;\n font-size: 12px !important;\n flex-shrink: 0 !important;\n border-radius: 6px;\n transition: all 0.2s ease;\n font-weight: 500;\n /* 图标间距 */\n /* 小尺寸按钮优化 */\n /* 四元按钮样式 */\n}\n[data-v-5791e51b] .n-button .n-icon {\n margin-right: 4px !important;\n}\n[data-v-5791e51b] .n-button.n-button--small-type {\n padding: 4px 8px;\n height: 28px;\n line-height: 20px;\n}\n[data-v-5791e51b] .n-button.n-button--quaternary-type:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n[data-v-5791e51b] .n-button.n-button--quaternary-type:active {\n transform: translateY(0);\n}\n\n/* ================= 8. 按钮组间距优化 ================= */\n/* 操作按钮组 */\n[data-v-5791e51b] .n-space.n-space--horizontal .n-space-item:not(:last-child) {\n margin-right: 6px !important;\n}\n\n/* ================= 9. 模态框样式优化 ================= */\n/* 编辑模态框 */\n[data-v-5791e51b] .n-modal .n-card {\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n[data-v-5791e51b] .n-modal .n-card__header {\n padding: 20px 24px 16px;\n font-weight: 600;\n font-size: 16px;\n}\n[data-v-5791e51b] .n-modal .n-card__content {\n padding: 0 24px 16px;\n}\n[data-v-5791e51b] .n-modal .n-card__action {\n padding: 16px 24px 20px;\n border-top: 1px solid var(--n-divider-color);\n}\n\n/* ================= 10. 描述列表样式 ================= */\n/* 详情模态框描述列表 */\n[data-v-5791e51b] .n-descriptions .n-descriptions-item-label {\n font-weight: 500;\n color: var(--n-text-color-2);\n}\n[data-v-5791e51b] .n-descriptions .n-descriptions-item-content {\n color: var(--n-text-color-1);\n word-break: break-all;\n}\n\n/* ================= 11. 响应式设计 ================= */\n/* 移动端适配 */\n@media (max-width: 768px) {\n.c-table-wrapper[data-v-5791e51b] {\n overflow-x: auto;\n}\n /* 操作列在移动端的适配 */\n[data-v-5791e51b] .n-data-table-th:last-child {\n width: 160px !important;\n min-width: 160px !important;\n}\n /* 按钮在移动端的优化 */\n[data-v-5791e51b] .n-button {\n font-size: 11px !important;\n padding: 3px 6px;\n}\n[data-v-5791e51b] .n-button .n-icon {\n margin-right: 2px !important;\n}\n /* 单元格编辑图标在移动端始终显示 */\n.cell-edit-icon[data-v-5791e51b] {\n opacity: 0.6;\n}\n}\n/* ================= 12. 主题适配 ================= */\n/* 暗色主题适配 - 已通过 CSS 变量自动适配 */\n[data-theme=dark][data-v-5791e51b] {\n /* CSS 变量已自动适配,如有特殊需求可在此添加 */\n}\n\n/* ================= 13. 响应式优化 ================= */\n/* 小屏幕下的单元格编辑优化 */\n@media (max-width: 768px) {\n.cell-editing-container[data-v-5791e51b],[data-v-5791e51b] .cell-editing-container {\n gap: 6px !important;\n}\n.cell-editing-actions[data-v-5791e51b],[data-v-5791e51b] .cell-editing-actions {\n gap: 3px !important;\n padding: 2px !important;\n}\n.cell-action-btn[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn {\n width: 18px !important;\n height: 18px !important;\n}\n.cell-action-btn svg[data-v-5791e51b],[data-v-5791e51b] .cell-action-btn svg {\n width: 10px !important;\n height: 10px !important;\n}\n /* 移动端编辑图标 */\n.cell-edit-icon[data-v-5791e51b] {\n opacity: 0.6 !important;\n}\n.cell-value[data-v-5791e51b] {\n margin-right: 12px !important;\n}\n}\n/* ================= 14. 性能优化 ================= */\n/* 使用 GPU 加速的动画 */\n.cell-edit-icon[data-v-5791e51b],\n.cell-action-btn[data-v-5791e51b] {\n will-change: transform;\n backface-visibility: hidden;\n}\n[data-v-5791e51b] .n-button {\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* ================= 15. 可访问性优化 ================= */\n/* 聚焦状态 */\n.cell-edit-wrapper[data-v-5791e51b]:focus-within,\n.cell-editing-container[data-v-5791e51b]:focus-within {\n outline: 2px solid var(--n-primary-color);\n outline-offset: 2px;\n}\n\n/* 高对比度模式支持 */\n@media (prefers-contrast: high) {\n.cell-edit-icon[data-v-5791e51b] {\n opacity: 0.8;\n}\n.cell-editing-actions[data-v-5791e51b] {\n border-width: 2px;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
1
|
+
{"version":3,"file":"C_Table-HATVoq1F.css","names":[],"sources":["../src/components/C_Table/components/ColumnSettings/index.vue?vue&type=style&index=0&scoped=d733b0fa&lang.scss","../src/components/C_Table/index.vue?vue&type=style&index=0&scoped=d2c076b0&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.column-management-tab .search-row[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n.column-management-tab .search-row .search-input[data-v-d733b0fa] {\n flex: 1;\n min-width: 0;\n}\n.column-management-tab .search-row .resizable-control[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0 10px;\n height: 34px;\n background: var(--n-color-target);\n border-radius: 6px;\n white-space: nowrap;\n}\n.column-management-tab .top-actions-bar[data-v-d733b0fa] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n padding: 10px 12px;\n background: var(--n-color-target);\n border-radius: 6px;\n}\n.column-management-tab .top-actions-bar .stats-info[data-v-d733b0fa] {\n flex: 1;\n}\n.column-management-tab .top-actions-bar .quick-actions[data-v-d733b0fa] {\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 4px;\n margin-bottom: 4px;\n border-radius: 4px;\n background: transparent;\n cursor: move;\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item[data-v-d733b0fa]:hover {\n background: var(--n-color-target);\n}\n.column-management-tab .column-list .column-item.disabled[data-v-d733b0fa] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.column-management-tab .column-list .column-item.fixed-left[data-v-d733b0fa] {\n background: rgba(24, 160, 88, 0.08);\n}\n.column-management-tab .column-list .column-item.fixed-right[data-v-d733b0fa] {\n background: rgba(240, 138, 0, 0.08);\n}\n.column-management-tab .column-list .column-item .column-info[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n flex: 1;\n gap: 10px;\n min-width: 0;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle[data-v-d733b0fa] {\n color: var(--n-text-color-3);\n cursor: grab;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle[data-v-d733b0fa]:active {\n cursor: grabbing;\n}\n.column-management-tab .column-list .column-item .column-info .column-controls .drag-handle.disabled[data-v-d733b0fa] {\n cursor: not-allowed;\n opacity: 0.3;\n}\n.column-management-tab .column-list .column-item .column-info .column-details[data-v-d733b0fa] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n.column-management-tab .column-list .column-item .column-actions[data-v-d733b0fa] {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls[data-v-d733b0fa] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon[data-v-d733b0fa] {\n opacity: 0.6;\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon[data-v-d733b0fa]:not(.disabled):hover {\n opacity: 1;\n transform: scale(1.15);\n}\n.column-management-tab .column-list .column-item .column-actions .drag-controls .c-icon.disabled[data-v-d733b0fa] {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.column-management-tab .column-list .column-item .column-actions .c-icon[data-v-d733b0fa] {\n transition: all 0.2s ease;\n}\n.column-management-tab .column-list .column-item .column-actions .c-icon[data-v-d733b0fa]:hover {\n transform: scale(1.15);\n}","/* unplugin-vue-components disabled *//* ================= 1. 组件根容器 ================= */\n.c-table-wrapper[data-v-d2c076b0] {\n --c-table-border-color: var(--border-color, #e5e7eb);\n --c-table-bg: var(--body-color, #fff);\n --c-table-header-bg: var(--card-color, #fafafc);\n --c-table-summary-bg: var(--card-color, #fafafc);\n --c-table-summary-font-weight: 600;\n --c-table-drag-ghost-opacity: 0.4;\n --c-table-drag-ghost-bg: var(--primary-color, #2080f0);\n width: 100%;\n position: relative;\n}\n\n/* ================= 列拖拽排序 ================= */\n.column-drag-ghost[data-v-d2c076b0] {\n opacity: var(--c-table-drag-ghost-opacity);\n background: var(--c-table-drag-ghost-bg) !important;\n}\n.drag-handle[data-v-d2c076b0] {\n cursor: grab;\n}\n.drag-handle[data-v-d2c076b0]:active {\n cursor: grabbing;\n}\n\n/* ================= 合计行强调 ================= */\n.c-table-wrapper[data-v-d2c076b0] .n-data-table-tfoot {\n background: var(--c-table-summary-bg);\n font-weight: var(--c-table-summary-font-weight);\n}\n\n/* ================= 2. 表格工具栏 ================= */\n.table-toolbar[data-v-d2c076b0] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n.table-toolbar .toolbar-left[data-v-d2c076b0] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.table-toolbar .toolbar-right[data-v-d2c076b0] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.table-toolbar .toolbar-right .column-settings-btn[data-v-d2c076b0] {\n opacity: 0.6;\n transition: opacity 0.2s ease, transform 0.2s ease;\n cursor: pointer;\n}\n.table-toolbar .toolbar-right .column-settings-btn[data-v-d2c076b0]:hover {\n opacity: 1;\n transform: scale(1.1);\n}\n\n/* ================= 3. 动态行工具栏 ================= */\n.dynamic-rows-toolbar[data-v-d2c076b0] {\n margin-bottom: 16px;\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--n-border-color);\n background-color: var(--n-card-color);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n transition: all 0.2s ease;\n}\n.dynamic-rows-toolbar[data-v-d2c076b0]:hover {\n border-color: var(--n-primary-color-suppl);\n}\n\n/* ================= 4. 表格布局基础 ================= */\n[data-v-d2c076b0] .n-data-table {\n table-layout: auto !important;\n width: 100% !important;\n border-radius: 8px;\n overflow: hidden;\n}\n\n/* 确保表格容器允许横向滚动(固定列必需) */\n[data-v-d2c076b0] .n-data-table-wrapper {\n overflow-x: auto !important;\n}\n\n/* 分页组件样式 */\n.pagination-wrapper[data-v-d2c076b0] {\n margin-top: 16px;\n display: flex;\n justify-content: flex-end;\n}\n\n/* ================= 5. 表格列宽度管理 ================= */\n/* 普通列的最小宽度保护 */\n[data-v-d2c076b0] .n-data-table-th:not(:last-child) {\n min-width: 80px !important;\n}\n\n/* 操作列固定宽度(适应4个按钮的布局) */\n[data-v-d2c076b0] .n-data-table-th:last-child {\n width: 180px !important;\n min-width: 160px !important;\n max-width: 200px !important;\n text-align: center !important;\n padding: 8px 12px !important;\n}\n\n/* 操作按钮容器居中 */\n[data-v-d2c076b0] .n-data-table-td:last-child .n-space {\n justify-content: center !important;\n align-items: center !important;\n}\n\n/* ================= 6. 可编辑单元格样式 ================= */\n/* 单元格编辑容器 - 精致化设计 */\n.cell-edit-wrapper[data-v-d2c076b0] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 6px 8px;\n min-height: 36px;\n border-radius: 4px;\n transition: all 0.2s ease;\n cursor: pointer;\n position: relative;\n /* 悬停效果 */\n /* 激活状态 */\n}\n.cell-edit-wrapper[data-v-d2c076b0]:hover {\n background-color: var(--n-color-target);\n}\n.cell-edit-wrapper:hover .cell-edit-icon[data-v-d2c076b0] {\n opacity: 1;\n color: var(--n-color-success);\n transform: scale(1.05);\n}\n.cell-edit-wrapper[data-v-d2c076b0]:active {\n transform: translateY(1px);\n}\n\n/* 单元格内容 */\n.cell-value[data-v-d2c076b0] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-right: 16px;\n line-height: 1.4;\n font-size: 13px;\n}\n\n/* 编辑图标 - 使用全局选择器确保动态创建的元素也能被选中 */\n.cell-edit-icon[data-v-d2c076b0],.cell-edit-icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n margin-left: 4px;\n transition: all 0.25s ease;\n color: var(--n-color-success);\n opacity: 0;\n position: relative;\n /* 悬停效果 */\n /* 激活效果 */\n /* 图标尺寸 */\n}\n.cell-edit-icon[data-v-d2c076b0]:hover,.cell-edit-icon {\n opacity: 1 !important;\n color: var(--n-color-success-hover) !important;\n background-color: var(--n-color-success-pressed);\n transform: scale(1.1);\n}\n.cell-edit-icon[data-v-d2c076b0]:active,.cell-edit-icon {\n transform: scale(0.95);\n}\n.cell-edit-icon svg[data-v-d2c076b0],.cell-edit-icon {\n width: 14px;\n height: 14px;\n}\n\n/* ================= 7. 单元格编辑状态样式 ================= */\n/* 编辑容器 - 确保水平布局不换行 */\n.cell-editing-container[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-container {\n display: flex !important;\n align-items: center !important;\n width: 100% !important;\n min-height: 36px !important;\n background-color: var(--n-input-color) !important;\n border: 1px solid var(--n-primary-color) !important;\n border-radius: 6px !important;\n padding: 4px 6px !important;\n box-shadow: 0 0 0 2px var(--n-primary-color-suppl) !important;\n gap: 8px !important;\n}\n\n/* 编辑输入区域 - 占据剩余空间 */\n.cell-editing-input[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-input {\n flex: 1 !important;\n min-width: 0 !important;\n}\n\n/* 深度选择器处理输入框样式 */\n[data-v-d2c076b0] .cell-editing-input .n-input {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-d2c076b0] .cell-editing-input .n-input.n-input--focus {\n border: none !important;\n box-shadow: none !important;\n}\n[data-v-d2c076b0] .cell-editing-input .n-input-number {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-d2c076b0] .cell-editing-input .n-select {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n[data-v-d2c076b0] .cell-editing-input .n-select .n-base-selection {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n}\n\n/* 编辑操作按钮容器 */\n.cell-editing-actions[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-actions {\n display: flex !important;\n flex-shrink: 0 !important;\n align-items: center !important;\n gap: 4px !important;\n background: var(--n-color-popover) !important;\n border: 1px solid var(--n-border-color) !important;\n border-radius: 4px !important;\n padding: 2px !important;\n box-shadow: var(--n-box-shadow) !important;\n}\n\n/* 编辑操作按钮 */\n.cell-action-btn[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n width: 20px !important;\n height: 20px !important;\n border: none !important;\n border-radius: 3px !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n background: transparent !important;\n /* 保存按钮 */\n /* 取消按钮 */\n /* 图标尺寸 */\n}\n.cell-action-btn.cell-action-save[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn.cell-action-save {\n color: var(--n-color-success) !important;\n}\n.cell-action-btn.cell-action-save[data-v-d2c076b0]:hover,[data-v-d2c076b0] .cell-action-btn.cell-action-save:hover {\n background: var(--n-color-success-pressed) !important;\n transform: scale(1.1) !important;\n}\n.cell-action-btn.cell-action-cancel[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn.cell-action-cancel {\n color: var(--n-color-error) !important;\n}\n.cell-action-btn.cell-action-cancel[data-v-d2c076b0]:hover,[data-v-d2c076b0] .cell-action-btn.cell-action-cancel:hover {\n background: var(--n-color-error-pressed) !important;\n transform: scale(1.1) !important;\n}\n.cell-action-btn svg[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn svg {\n width: 11px !important;\n height: 11px !important;\n}\n\n/* ================= 7. 操作按钮样式 ================= */\n/* 通用按钮样式 */\n[data-v-d2c076b0] .n-button {\n white-space: nowrap;\n font-size: 12px !important;\n flex-shrink: 0 !important;\n border-radius: 6px;\n transition: all 0.2s ease;\n font-weight: 500;\n /* 图标间距 */\n /* 小尺寸按钮优化 */\n /* 四元按钮样式 */\n}\n[data-v-d2c076b0] .n-button .n-icon {\n margin-right: 4px !important;\n}\n[data-v-d2c076b0] .n-button.n-button--small-type {\n padding: 4px 8px;\n height: 28px;\n line-height: 20px;\n}\n[data-v-d2c076b0] .n-button.n-button--quaternary-type:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n[data-v-d2c076b0] .n-button.n-button--quaternary-type:active {\n transform: translateY(0);\n}\n\n/* ================= 8. 按钮组间距优化 ================= */\n/* 操作按钮组 */\n[data-v-d2c076b0] .n-space.n-space--horizontal .n-space-item:not(:last-child) {\n margin-right: 6px !important;\n}\n\n/* ================= 9. 模态框样式优化 ================= */\n/* 编辑模态框 */\n[data-v-d2c076b0] .n-modal .n-card {\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n[data-v-d2c076b0] .n-modal .n-card__header {\n padding: 20px 24px 16px;\n font-weight: 600;\n font-size: 16px;\n}\n[data-v-d2c076b0] .n-modal .n-card__content {\n padding: 0 24px 16px;\n}\n[data-v-d2c076b0] .n-modal .n-card__action {\n padding: 16px 24px 20px;\n border-top: 1px solid var(--n-divider-color);\n}\n\n/* ================= 10. 描述列表样式 ================= */\n/* 详情模态框描述列表 */\n[data-v-d2c076b0] .n-descriptions .n-descriptions-item-label {\n font-weight: 500;\n color: var(--n-text-color-2);\n}\n[data-v-d2c076b0] .n-descriptions .n-descriptions-item-content {\n color: var(--n-text-color-1);\n word-break: break-all;\n}\n\n/* ================= 11. 响应式设计 ================= */\n/* 移动端适配 */\n@media (max-width: 768px) {\n.c-table-wrapper[data-v-d2c076b0] {\n overflow-x: auto;\n}\n /* 操作列在移动端的适配 */\n[data-v-d2c076b0] .n-data-table-th:last-child {\n width: 160px !important;\n min-width: 160px !important;\n}\n /* 按钮在移动端的优化 */\n[data-v-d2c076b0] .n-button {\n font-size: 11px !important;\n padding: 3px 6px;\n}\n[data-v-d2c076b0] .n-button .n-icon {\n margin-right: 2px !important;\n}\n /* 单元格编辑图标在移动端始终显示 */\n.cell-edit-icon[data-v-d2c076b0] {\n opacity: 0.6;\n}\n}\n/* ================= 12. 主题适配 ================= */\n/* 暗色主题适配 - 已通过 CSS 变量自动适配 */\n[data-theme=dark][data-v-d2c076b0] {\n /* CSS 变量已自动适配,如有特殊需求可在此添加 */\n}\n\n/* ================= 13. 响应式优化 ================= */\n/* 小屏幕下的单元格编辑优化 */\n@media (max-width: 768px) {\n.cell-editing-container[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-container {\n gap: 6px !important;\n}\n.cell-editing-actions[data-v-d2c076b0],[data-v-d2c076b0] .cell-editing-actions {\n gap: 3px !important;\n padding: 2px !important;\n}\n.cell-action-btn[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn {\n width: 18px !important;\n height: 18px !important;\n}\n.cell-action-btn svg[data-v-d2c076b0],[data-v-d2c076b0] .cell-action-btn svg {\n width: 10px !important;\n height: 10px !important;\n}\n /* 移动端编辑图标 */\n.cell-edit-icon[data-v-d2c076b0] {\n opacity: 0.6 !important;\n}\n.cell-value[data-v-d2c076b0] {\n margin-right: 12px !important;\n}\n}\n/* ================= 14. 性能优化 ================= */\n/* 使用 GPU 加速的动画 */\n.cell-edit-icon[data-v-d2c076b0],\n.cell-action-btn[data-v-d2c076b0] {\n will-change: transform;\n backface-visibility: hidden;\n}\n[data-v-d2c076b0] .n-button {\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* ================= 15. 可访问性优化 ================= */\n/* 聚焦状态 */\n.cell-edit-wrapper[data-v-d2c076b0]:focus-within,\n.cell-editing-container[data-v-d2c076b0]:focus-within {\n outline: 2px solid var(--n-primary-color);\n outline-offset: 2px;\n}\n\n/* 高对比度模式支持 */\n@media (prefers-contrast: high) {\n.cell-edit-icon[data-v-d2c076b0] {\n opacity: 0.8;\n}\n.cell-editing-actions[data-v-d2c076b0] {\n border-width: 2px;\n}\n}\n/* ================= 11. 行拖拽排序 ================= */\n.row-drag-ghost[data-v-d2c076b0] {\n opacity: 0.4;\n background: var(--c-table-drag-ghost-bg) !important;\n}\n.row-drag-chosen[data-v-d2c076b0] {\n background: var(--n-color-hover, #f5f5f5) !important;\n}\n\n/* ================= 12. 批量操作栏 ================= */\n.batch-actions-bar[data-v-d2c076b0] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n margin-bottom: 8px;\n background: var(--n-color-hover, #f0f7ff);\n border-radius: 6px;\n border: 1px solid var(--n-primary-color-suppl, #70b3ff);\n}\n.batch-actions-bar .batch-info[data-v-d2c076b0] {\n font-size: 13px;\n color: var(--n-text-color-2);\n font-weight: 500;\n}\n\n/* ================= 13. 错误状态 ================= */\n.table-error-state[data-v-d2c076b0] {\n padding: 48px 24px;\n text-align: center;\n}\n.table-error-state .error-content[data-v-d2c076b0] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n color: var(--n-text-color-3, #999);\n}\n.table-error-state .error-message[data-v-d2c076b0] {\n font-size: 14px;\n margin: 0;\n color: var(--n-text-color-2, #666);\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
package/dist/C_Table.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./C_Icon.js`),require(`./C_Editor.js`),require(`./C_Form.js`);const e=require(`./C_Table.js`);exports.C_Table=e.t,exports.createEditModeChecker=e.
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./C_Icon.js`),require(`./C_Editor.js`),require(`./C_Form.js`);const e=require(`./C_Table.js`);exports.C_Table=e.t,exports.TABLE_GLOBAL_CONFIG_KEY=e.o,exports.applyFormatter=e.s,exports.createEditModeChecker=e.b,exports.exportTableData=e.n,exports.mergeGlobalConfig=e.c,exports.printPresets=e.m,exports.resolveConfig=e.x,exports.useCellEdit=e.v,exports.useCrossPageSelection=e.r,exports.useDynamicRows=e.p,exports.useModalEdit=e._,exports.usePagination=e.d,exports.usePrintWatermark=e.h,exports.useRowDrag=e.i,exports.useRowEdit=e.y,exports.useTableActions=e.u,exports.useTableColumns=e.a,exports.useTableExpand=e.g,exports.useTableGlobalConfig=e.l,exports.useTableManager=e.f;
|