@robot-admin/naive-ui-components 0.6.28 → 0.6.30

package/dist/C_Skeleton.css

@@ -0,0 +1,253 @@
+/* unplugin-vue-components disabled *//* C_Skeleton 骨架屏组件样式 */
+.c-skeleton {
+  --c-skeleton-bg: #e5e7eb;
+  --c-skeleton-wave-bg: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  --c-skeleton-radius: 4px;
+  --c-skeleton-circle-size: 40px;
+  --c-skeleton-circle-sm: 32px;
+  --c-skeleton-circle-lg: 56px;
+  --c-skeleton-line-height: 16px;
+  --c-skeleton-line-sm-height: 12px;
+  --c-skeleton-line-mini-height: 8px;
+  --c-skeleton-gap: 12px;
+  --c-skeleton-card-cover-height: 160px;
+  --c-skeleton-image-height: 200px;
+  width: 100%;
+}
+
+/* ─── 基础骨架块 ─── */
+.c-skeleton__item {
+  background-color: var(--c-skeleton-bg);
+  border-radius: var(--c-skeleton-radius);
+  position: relative;
+  overflow: hidden;
+}
+
+/* ─── 动画：脉冲 ─── */
+.c-skeleton--pulse .c-skeleton__item {
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+@keyframes skeleton-pulse {
+0%, 100% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.4;
+}
+}
+/* ─── 动画：波浪 ─── */
+.c-skeleton--wave .c-skeleton__item::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--c-skeleton-wave-bg);
+  animation: skeleton-wave 1.6s linear infinite;
+}
+@keyframes skeleton-wave {
+0% {
+    transform: translateX(-100%);
+}
+100% {
+    transform: translateX(100%);
+}
+}
+/* ─── 无动画 ─── */
+.c-skeleton--none .c-skeleton__item {
+  animation: none;
+}
+.c-skeleton--none .c-skeleton__item::after {
+  display: none;
+}
+
+/* ─── 文本行 ─── */
+.c-skeleton__text {
+  margin-bottom: 8px;
+}
+.c-skeleton__line {
+  height: var(--c-skeleton-line-height);
+  width: 100%;
+}
+.c-skeleton__line--sm {
+  height: var(--c-skeleton-line-sm-height);
+  margin-top: 6px;
+}
+.c-skeleton__line--mini {
+  height: var(--c-skeleton-line-mini-height);
+}
+.c-skeleton__line--label {
+  height: var(--c-skeleton-line-sm-height);
+  margin-bottom: 8px;
+}
+.c-skeleton__line--input {
+  height: 34px;
+  border-radius: 6px;
+}
+.c-skeleton__line--btn {
+  height: 32px;
+  border-radius: 6px;
+}
+
+/* ─── 圆形（头像） ─── */
+.c-skeleton__circle {
+  width: var(--c-skeleton-circle-size);
+  height: var(--c-skeleton-circle-size);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.c-skeleton__circle--sm {
+  width: var(--c-skeleton-circle-sm);
+  height: var(--c-skeleton-circle-sm);
+}
+.c-skeleton__circle--lg {
+  width: var(--c-skeleton-circle-lg);
+  height: var(--c-skeleton-circle-lg);
+}
+
+/* ─── Avatar 预设 ─── */
+.c-skeleton__avatar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--c-skeleton-gap);
+}
+.c-skeleton__avatar-text {
+  flex: 1;
+}
+
+/* ─── Image 预设 ─── */
+.c-skeleton__image {
+  width: 100%;
+  height: var(--c-skeleton-image-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  margin-bottom: var(--c-skeleton-gap);
+}
+.c-skeleton__image-icon {
+  color: var(--c-skeleton-bg);
+  opacity: 0.6;
+  filter: brightness(0.8);
+}
+
+/* ─── Card 预设 ─── */
+.c-skeleton__card {
+  border: 1px solid var(--c-skeleton-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: var(--c-skeleton-gap);
+}
+.c-skeleton__card-cover {
+  width: 100%;
+  height: var(--c-skeleton-card-cover-height);
+  border-radius: 0;
+}
+.c-skeleton__card-body {
+  padding: 16px;
+}
+.c-skeleton__card-desc {
+  margin-top: 8px;
+}
+.c-skeleton__card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--c-skeleton-bg);
+}
+
+/* ─── Table 预设 ─── */
+.c-skeleton__table {
+  width: 100%;
+  border: 1px solid var(--c-skeleton-bg);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.c-skeleton__table-header {
+  display: flex;
+  padding: 12px 16px;
+  background-color: color-mix(in srgb, var(--c-skeleton-bg) 30%, transparent);
+  border-bottom: 1px solid var(--c-skeleton-bg);
+}
+.c-skeleton__table-row {
+  display: flex;
+  padding: 12px 16px;
+  border-bottom: 1px solid color-mix(in srgb, var(--c-skeleton-bg) 50%, transparent);
+}
+.c-skeleton__table-row:last-child {
+  border-bottom: none;
+}
+.c-skeleton__table-cell {
+  flex: 1;
+  padding: 0 8px;
+}
+.c-skeleton__table-cell--action {
+  flex: 0 0 120px;
+}
+.c-skeleton__action-btns {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* ─── Form 预设 ─── */
+.c-skeleton__form {
+  display: grid;
+  grid-template-columns: repeat(var(--form-cols, 2), 1fr);
+  gap: 16px 24px;
+}
+.c-skeleton__form-field {
+  display: flex;
+  flex-direction: column;
+}
+.c-skeleton__form-actions {
+  grid-column: 1/-1;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 16px;
+}
+
+/* ─── List 预设 ─── */
+.c-skeleton__list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--c-skeleton-gap);
+  padding: 12px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--c-skeleton-bg) 50%, transparent);
+}
+.c-skeleton__list-item:last-child {
+  border-bottom: none;
+}
+.c-skeleton__list-content {
+  flex: 1;
+}
+
+/* ─── Detail 预设 ─── */
+.c-skeleton__detail-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+.c-skeleton__detail-title {
+  flex: 1;
+}
+.c-skeleton__detail-body {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px 24px;
+}
+.c-skeleton__detail-field {
+  display: flex;
+  flex-direction: column;
+}
+.c-skeleton__detail-value {
+  margin-top: 4px;
+}
+
+/*# sourceMappingURL=C_Skeleton-BNPbaut7.css.map*/

package/dist/C_Skeleton.d.cts

@@ -0,0 +1,2 @@
+import { a as SkeletonFormConfig, c as SkeletonProps, i as SkeletonDetailConfig, l as SkeletonTableConfig, n as SkeletonAnimation, o as SkeletonListConfig, r as SkeletonCardConfig, s as SkeletonPreset, t as _default } from "./index22.vue.js";
+export { _default as C_Skeleton, type SkeletonAnimation, type SkeletonCardConfig, type SkeletonDetailConfig, type SkeletonFormConfig, type SkeletonListConfig, type SkeletonPreset, type SkeletonProps, type SkeletonTableConfig };

package/dist/C_Skeleton.d.ts

@@ -0,0 +1,2 @@
+import { a as SkeletonFormConfig, c as SkeletonProps, i as SkeletonDetailConfig, l as SkeletonTableConfig, n as SkeletonAnimation, o as SkeletonListConfig, r as SkeletonCardConfig, s as SkeletonPreset, t as _default } from "./index22.vue.js";
+export { _default as C_Skeleton, type SkeletonAnimation, type SkeletonCardConfig, type SkeletonDetailConfig, type SkeletonFormConfig, type SkeletonListConfig, type SkeletonPreset, type SkeletonProps, type SkeletonTableConfig };

package/dist/C_Skeleton.js

@@ -0,0 +1 @@
+import{t as e}from"./C_Skeleton2.js";export{e as C_Skeleton};

package/dist/C_Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Skeleton.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":"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"}

package/dist/C_Skeleton2.js

@@ -0,0 +1,2 @@
+import{Fragment as e,computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,createStaticVNode as a,defineComponent as o,normalizeClass as s,normalizeStyle as c,openBlock as l,renderList as u,renderSlot as d}from"vue";const f={key:0,class:`c-skeleton__card-cover c-skeleton__item`},p={class:`c-skeleton__card-body`},m={class:`c-skeleton__card-desc`},h={key:1,class:`c-skeleton__card-footer`},g={class:`c-skeleton__table`},_={key:0,class:`c-skeleton__table-header`},v={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},y={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},b={key:0,class:`c-skeleton__form-actions`},x={key:0,class:`c-skeleton__circle c-skeleton__circle--sm c-skeleton__item`},S={class:`c-skeleton__list-content`},C={class:`c-skeleton__detail`},w={key:0,class:`c-skeleton__detail-header`},T={class:`c-skeleton__detail-body`},E={class:`c-skeleton__detail-value`};var D=o({name:`C_Skeleton`,__name:`index`,props:{preset:{default:`text`},loading:{type:Boolean,default:!0},animation:{type:[String,Boolean],default:`wave`},repeat:{default:3},borderRadius:{default:`4px`},table:{},form:{},list:{},card:{},detail:{}},setup(o){let D=o,O=t(()=>D.animation===!1?`none`:D.animation),k=t(()=>({rows:D.table?.rows??5,cols:D.table?.cols??4,showHeader:D.table?.showHeader??!0,showActions:D.table?.showActions??!0})),A=t(()=>({fields:D.form?.fields??6,cols:D.form?.cols??2,showLabel:D.form?.showLabel??!0,showActions:D.form?.showActions??!0})),j=t(()=>({items:D.list?.items??5,showAvatar:D.list?.showAvatar??!0,descLines:D.list?.descLines??2})),M=t(()=>({showCover:D.card?.showCover??!0,titleLines:D.card?.titleLines??1,descLines:D.card?.descLines??2,showFooter:D.card?.showFooter??!0})),N=t(()=>({fields:D.detail?.fields??6,valueLines:D.detail?.valueLines??1,showAvatar:D.detail?.showAvatar??!0}));return(t,o)=>D.loading?(l(),r(`div`,{key:0,class:s([`c-skeleton`,[`c-skeleton--${O.value}`]])},[n(` text 预设 `),t.preset===`text`?(l(!0),r(e,{key:0},u(t.repeat,e=>(l(),r(`div`,{key:e,class:`c-skeleton__text`},[i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:c({width:e===t.repeat?`60%`:`100%`})},null,4)]))),128)):t.preset===`avatar`?(l(),r(e,{key:1},[n(` avatar 预设 `),o[0]||=a(`<div class="c-skeleton__avatar-group"><div class="c-skeleton__circle c-skeleton__item"></div><div class="c-skeleton__avatar-text"><div class="c-skeleton__line c-skeleton__item" style="width:40%;"></div><div class="c-skeleton__line c-skeleton__item c-skeleton__line--sm" style="width:60%;"></div></div></div>`,1)],64)):t.preset===`image`?(l(),r(e,{key:2},[n(` image 预设 `),(l(!0),r(e,null,u(t.repeat,e=>(l(),r(`div`,{key:e,class:`c-skeleton__image c-skeleton__item`},o[1]||=[i(`div`,{class:`c-skeleton__image-icon`},[i(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,width:`32`,height:`32`},[i(`path`,{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`})])],-1)]))),128))],64)):t.preset===`card`?(l(),r(e,{key:3},[n(` card 预设 `),(l(!0),r(e,null,u(t.repeat,t=>(l(),r(`div`,{key:t,class:`c-skeleton__card`},[M.value.showCover?(l(),r(`div`,f)):n(`v-if`,!0),i(`div`,p,[(l(!0),r(e,null,u(M.value.titleLines,e=>(l(),r(`div`,{key:`t-${e}`,class:`c-skeleton__line c-skeleton__item`,style:c({width:e===M.value.titleLines?`50%`:`80%`})},null,4))),128)),i(`div`,m,[(l(!0),r(e,null,u(M.value.descLines,e=>(l(),r(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===M.value.descLines?`70%`:`100%`})},null,4))),128))])]),M.value.showFooter?(l(),r(`div`,h,o[2]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)])):n(`v-if`,!0)]))),128))],64)):t.preset===`table`?(l(),r(e,{key:4},[n(` table 预设 `),i(`div`,g,[k.value.showHeader?(l(),r(`div`,_,[(l(!0),r(e,null,u(k.value.cols,e=>(l(),r(`div`,{key:`h-${e}`,class:`c-skeleton__table-cell`},o[3]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`},null,-1)]))),128)),k.value.showActions?(l(),r(`div`,v,o[4]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`60%`}},null,-1)])):n(`v-if`,!0)])):n(`v-if`,!0),(l(!0),r(e,null,u(k.value.rows,t=>(l(),r(`div`,{key:`r-${t}`,class:`c-skeleton__table-row`},[(l(!0),r(e,null,u(k.value.cols,e=>(l(),r(`div`,{key:`c-${e}`,class:`c-skeleton__table-cell`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:`${Math.floor(50+t*e*17%50)}%`})},null,4)]))),128)),k.value.showActions?(l(),r(`div`,y,o[5]||=[i(`div`,{class:`c-skeleton__action-btns`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}}),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}})],-1)])):n(`v-if`,!0)]))),128))])],64)):t.preset===`form`?(l(),r(e,{key:5},[n(` form 预设 `),i(`div`,{class:`c-skeleton__form`,style:c({"--form-cols":A.value.cols})},[(l(!0),r(e,null,u(A.value.fields,e=>(l(),r(`div`,{key:e,class:`c-skeleton__form-field`},[A.value.showLabel?(l(),r(`div`,{key:0,class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:c({width:`${60+e*13%30}px`})},null,4)):n(`v-if`,!0),o[6]||=i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--input`},null,-1)]))),128)),A.value.showActions?(l(),r(`div`,b,o[7]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`100px`}},null,-1),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)])):n(`v-if`,!0)],4)],64)):t.preset===`list`?(l(),r(e,{key:6},[n(` list 预设 `),(l(!0),r(e,null,u(j.value.items,t=>(l(),r(`div`,{key:t,class:`c-skeleton__list-item`},[j.value.showAvatar?(l(),r(`div`,x)):n(`v-if`,!0),i(`div`,S,[o[8]||=i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`30%`}},null,-1),(l(!0),r(e,null,u(j.value.descLines,e=>(l(),r(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===j.value.descLines?`50%`:`90%`})},null,4))),128))])]))),128))],64)):t.preset===`detail`?(l(),r(e,{key:7},[n(` detail 预设 `),i(`div`,C,[N.value.showAvatar?(l(),r(`div`,w,o[9]||=[i(`div`,{class:`c-skeleton__circle c-skeleton__circle--lg c-skeleton__item`},null,-1),i(`div`,{class:`c-skeleton__detail-title`},[i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`120px`}}),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`200px`}})],-1)])):n(`v-if`,!0),i(`div`,T,[(l(!0),r(e,null,u(N.value.fields,t=>(l(),r(`div`,{key:t,class:`c-skeleton__detail-field`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:c({width:`${50+t*17%40}px`})},null,4),i(`div`,E,[(l(!0),r(e,null,u(N.value.valueLines,e=>(l(),r(`div`,{key:`v-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===N.value.valueLines?`60%`:`100%`})},null,4))),128))])]))),128))])])],64)):n(`v-if`,!0)],2)):(l(),r(e,{key:1},[n(` 加载完成后显示插槽内容 `),d(t.$slots,`default`)],2112))}});export{D as t};
+//# sourceMappingURL=C_Skeleton2.js.map

package/dist/C_Skeleton2.js.map

@@ -0,0 +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":"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"}

package/dist/C_Steps.d.cts

@@ -1,2 +1,2 @@
-import { n as _default, t as StepItem } from "./index21.vue.js";
+import { n as _default, t as StepItem } from "./index23.vue.js";
 export { _default as C_Steps, type StepItem };

package/dist/C_Steps.d.ts

@@ -1,2 +1,2 @@
-import { n as _default, t as StepItem } from "./index21.vue.js";
+import { n as _default, t as StepItem } from "./index23.vue.js";
 export { _default as C_Steps, type StepItem };

package/dist/C_Table-B8hpzOcR.css.map

@@ -0,0 +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"}

package/dist/C_Table-CGP3n_u0.css.map

@@ -0,0 +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"}