qidian-vue-ui 1.5.2 → 1.7.0

package/dist/components/file-viewer/index.css

@@ -1,18 +1,18 @@
-.qd-file-viewer[data-v-d9e97271],
-.qd-file-viewer__content[data-v-d9e97271] {
+.qd-file-viewer[data-v-a1dee402],
+.qd-file-viewer__content[data-v-a1dee402] {
   width: 100%;
   height: 100%;
 }
-.qd-file-viewer--image[data-v-d9e97271] {
+.qd-file-viewer--image[data-v-a1dee402] {
   transform: translate3d(0, 0, 0);
 }
-.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__trigger {
+.qd-file-viewer--image[data-v-a1dee402] .t-image-viewer__trigger {
   display: none;
 }
-.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__modal-box,
-.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer-preview-image {
+.qd-file-viewer--image[data-v-a1dee402] .t-image-viewer__modal-box,
+.qd-file-viewer--image[data-v-a1dee402] .t-image-viewer-preview-image {
   animation: none;
 }
-.qd-file-viewer--image[data-v-d9e97271] .t-image-viewer__modal-mask {
+.qd-file-viewer--image[data-v-a1dee402] .t-image-viewer__modal-mask {
   transition: none;
 }

package/dist/components/file-viewer/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const QdFileViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d9e97271"]]);
+const QdFileViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a1dee402"]]);
 export {
   QdFileViewer as default
 };

package/dist/components/file-viewer/index.vue2.mjs

@@ -4,7 +4,6 @@ import { allRenderers } from "@file-viewer/preset-all";
 import { FileViewer } from "@file-viewer/vue3";
 import { ImageViewer } from "tdesign-vue-next";
 import { isImage } from "../../utils/tools.mjs";
-import { useConfig } from "../config-provider/useConfig.mjs";
 import { useTheme } from "../../hooks/useTheme.mjs";
 import QdOfficePdf from "../office/pdf/index.vue.mjs";
 import merge from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
@@ -20,9 +19,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const tdTheme = useTheme();
-    const { t } = useConfig("wrapper");
+    const SVG_PLACEHOLDER_PNG = (() => {
+      if (typeof document === "undefined") return "";
+      const canvas = document.createElement("canvas");
+      canvas.width = 800;
+      canvas.height = 600;
+      return canvas.toDataURL("image/png");
+    })();
     const rootRef = ref();
     const imageViewerVisible = ref(false);
+    const svgReady = ref(false);
     const isPdf = computed(() => {
       const { file, src } = props;
       if (file) {
@@ -35,6 +41,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return false;
     });
+    const isSvg = computed(() => {
+      const { file, src } = props;
+      if (file) {
+        if ("type" in file && file.type === "image/svg+xml") return true;
+        if ("name" in file && file.name.endsWith(".svg")) return true;
+      }
+      if (src) {
+        const pathname = new URL(src, "https://x").pathname;
+        if (pathname.endsWith(".svg")) return true;
+      }
+      return false;
+    });
     const fileType = computed(() => {
       const { file, src } = props;
       if (file && "type" in file && file.type) return file.type;
@@ -48,23 +66,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (src) return src;
       return void 0;
     });
-    const imageViewerImages = computed(
-      () => imageViewerSource.value ? [imageViewerSource.value] : []
-    );
+    const imageViewerImages = computed(() => {
+      const source = imageViewerSource.value;
+      if (!source) return [];
+      if (isSvg.value) {
+        return svgReady.value ? [{ mainImage: source, thumbnail: source, isSvg: true }] : [SVG_PLACEHOLDER_PNG];
+      }
+      return [source];
+    });
     const useImageViewer = computed(() => isImageFile.value && !!imageViewerSource.value);
     const resolvedAttach = computed(() => {
       if (rootRef.value) return () => rootRef.value;
       return "body";
     });
     watch(
-      useImageViewer,
-      (val) => {
-        if (!val) {
+      [useImageViewer, imageViewerSource],
+      () => {
+        if (!useImageViewer.value) {
           imageViewerVisible.value = false;
+          svgReady.value = false;
           return;
         }
+        svgReady.value = false;
         nextTick(() => {
           imageViewerVisible.value = true;
+          nextTick(() => {
+            svgReady.value = true;
+          });
         });
       },
       { immediate: true }

package/dist/components/index.d.ts

@@ -20,4 +20,5 @@ export * from './service';
 export * from './service-dialog-table-select';
 export * from './service-popup-table-select';
 export * from './service-select';
+export * from './steps';
 export * from './upload';

package/dist/components/multi-file-viewer/index.vue.mjs

@@ -32,6 +32,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const imageViewerIndex = ref(0);
     const { t } = useConfig("multiFileViewer");
     const { t: wrapperT } = useConfig("wrapper");
+    const SVG_PLACEHOLDER_PNG = (() => {
+      if (typeof document === "undefined") return "";
+      const canvas = document.createElement("canvas");
+      canvas.width = 800;
+      canvas.height = 600;
+      return canvas.toDataURL("image/png");
+    })();
+    const svgReady = ref(false);
     const mergedProps = computed(() => ({
       ...props,
       ...runtimeOverrides.value
@@ -64,7 +72,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const useImageViewer = computed(() => allFilesAreImages.value && !fileViewerOnly.value);
     const imageViewerImages = computed(
-      () => (mergedProps.value.files ?? []).map((item) => resolveImageViewerSource(item) ?? "")
+      () => (mergedProps.value.files ?? []).map((item) => {
+        const source = resolveImageViewerSource(item);
+        if (isSvgItem(item) && source) {
+          return svgReady.value ? { mainImage: source, thumbnail: source, isSvg: true } : SVG_PLACEHOLDER_PNG;
+        }
+        return source ?? "";
+      })
     );
     const resolvedAttach = computed(() => mergedProps.value.attach ?? wrapperT("attach") ?? "body");
     const isDialog = computed(() => mergedProps.value.wrapper !== false && !useImageViewer.value);
@@ -92,6 +106,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (item.src) return item.src;
       return void 0;
     }
+    function isSvgItem(item) {
+      const file = item.file;
+      if (file) {
+        if ("type" in file && file.type === "image/svg+xml") return true;
+        if ("name" in file && file.name.endsWith(".svg")) return true;
+      }
+      if (item.src) {
+        const pathname = new URL(item.src, "https://x").pathname;
+        if (pathname.endsWith(".svg")) return true;
+      }
+      return false;
+    }
     function normalizeIndex(index, files) {
       if (!files?.length) return 0;
       if (index === void 0 || index < 0 || index >= files.length) return 0;
@@ -121,9 +147,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       activeIndex.value = normalizeIndex(mergedProps.value.index, mergedProps.value.files);
       if (useImageViewer.value) {
         imageViewerIndex.value = activeIndex.value;
+        svgReady.value = false;
         imageViewerVisible.value = false;
         nextTick(() => {
           imageViewerVisible.value = true;
+          nextTick(() => {
+            svgReady.value = true;
+          });
         });
         return;
       }
@@ -131,6 +161,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       nextTick(() => dialogRef.value?.show());
     }
     function hide() {
+      svgReady.value = false;
       if (imageViewerVisible.value) imageViewerVisible.value = false;
       if (!isDialog.value) return;
       dialogRef.value?.hide();

package/dist/components/org/select/props.d.ts

@@ -1,6 +1,6 @@
 export declare const qdOrgSelectProps: {
     readonly showFullDeptPath: true;
-    readonly manual: true;
+    readonly manual: undefined;
     readonly showArrow: true;
     readonly popupVisible: undefined;
     readonly disabled: undefined;

package/dist/components/service-select/index.css

@@ -1,4 +1,4 @@
-.qd-service-select__load[data-v-340599bc] {
+.qd-service-select__load[data-v-90dbce79] {
   width: 100%;
   border-top: 1px solid var(--td-component-stroke);
   padding: 6px;

package/dist/components/service-select/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const QdServiceSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-340599bc"]]);
+const QdServiceSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-90dbce79"]]);
 export {
   QdServiceSelect as default
 };

package/dist/components/service-select/index.vue2.mjs

@@ -1,5 +1,5 @@
 import './index.css'
-import { defineComponent, mergeDefaults, computed, ref, watch, onMounted, onActivated, onDeactivated, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, renderSlot, createCommentVNode, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, mergeDefaults, computed, ref, unref, watch, onMounted, onActivated, onDeactivated, createBlock, openBlock, mergeProps, isRef, createSlots, withCtx, renderSlot, createCommentVNode, renderList, normalizeProps, guardReactiveProps } from "vue";
 import { useVModels } from "../../node_modules/.pnpm/@vueuse_core@14.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
 import { isEmpty, useServiceLoadMore, toArr, extractSlotsWithoutPrefix, checkSameObject } from "qidian-shared";
 import { Select, Loading } from "tdesign-vue-next";
@@ -181,6 +181,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onChange,
         ...selectOptions
       } = props;
+      const mergedManual = manual ?? unref(pagination) !== false;
       const rePopupProps = popupProps || {};
       rePopupProps.onScrollToBottom = (context) => {
         popupProps?.onScrollToBottom?.(context);
@@ -250,7 +251,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         },
         serviceOptions: {
           service,
-          manual,
+          manual: mergedManual,
           transformParams: mergedTransformParams,
           transformRes,
           pagination,

package/dist/components/service-select/props.d.ts

@@ -1,5 +1,5 @@
 export declare const qdServiceSelectProps: {
-    readonly manual: true;
+    readonly manual: undefined;
     readonly showArrow: true;
     readonly popupVisible: undefined;
     readonly disabled: undefined;

package/dist/components/service-select/props.mjs

@@ -1,5 +1,5 @@
 const qdServiceSelectProps = {
-  manual: true,
+  manual: void 0,
   showArrow: true,
   popupVisible: void 0,
   disabled: void 0,

package/dist/components/steps/index.css

@@ -0,0 +1,211 @@
+.qd-steps[data-v-3fae5c44] {
+  display: grid;
+  gap: var(--td-comp-paddingTB-xs);
+}
+.qd-steps__nav[data-v-3fae5c44] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.qd-steps__phases[data-v-3fae5c44] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.qd-steps__phase[data-v-3fae5c44] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--td-size-3);
+  padding: var(--td-size-1) var(--td-comp-paddingLR-s) var(--td-size-1) var(--td-comp-paddingLR-xs);
+  border-radius: var(--td-radius-round);
+  transition: all 0.15s;
+}
+.qd-steps__phase--clickable[data-v-3fae5c44] {
+  cursor: pointer;
+}
+.qd-steps__phase--done[data-v-3fae5c44] {
+  color: var(--td-text-color-secondary);
+}
+.qd-steps__phase--done .qd-steps__phase-icon[data-v-3fae5c44] {
+  background-color: var(--td-success-color);
+  color: var(--td-text-color-anti);
+  border-color: transparent;
+}
+.qd-steps__phase--done .qd-steps__phase-name[data-v-3fae5c44] {
+  color: var(--td-text-color-secondary);
+}
+.qd-steps__phase--done.qd-steps__phase--clickable[data-v-3fae5c44]:hover {
+  background-color: var(--td-bg-color-container-hover);
+}
+.qd-steps__phase--active[data-v-3fae5c44] {
+  background-color: var(--td-brand-color-light);
+}
+.qd-steps__phase--active .qd-steps__phase-icon[data-v-3fae5c44] {
+  background-color: var(--td-brand-color);
+  color: var(--td-text-color-anti);
+  border-color: transparent;
+  box-shadow: var(--td-shadow-1);
+}
+.qd-steps__phase--active .qd-steps__phase-name[data-v-3fae5c44] {
+  color: var(--td-text-color-brand);
+  font-weight: 700;
+}
+.qd-steps__phase--pending[data-v-3fae5c44] {
+  opacity: 0.6;
+}
+.qd-steps__phase-icon[data-v-3fae5c44] {
+  width: calc(var(--td-comp-size-xxxs) + var(--td-size-1));
+  height: calc(var(--td-comp-size-xxxs) + var(--td-size-1));
+  border-radius: var(--td-radius-circle);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--td-font-size-mark-small);
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+  background-color: var(--td-bg-color-secondarycontainer);
+  color: var(--td-text-color-placeholder);
+  border: calc(var(--td-size-1) / 2) solid var(--td-component-stroke);
+  transition: all 0.15s;
+}
+.qd-steps__phase-name[data-v-3fae5c44] {
+  font-size: var(--td-font-size-body-small);
+  color: var(--td-text-color-placeholder);
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color 0.15s;
+}
+.qd-steps__separator[data-v-3fae5c44] {
+  color: var(--td-text-color-placeholder);
+  margin: 0 var(--td-comp-margin-s);
+  font-size: var(--td-font-size-body-large);
+  line-height: 1;
+  transform: translateY(calc(var(--td-size-1) / -2));
+}
+.qd-steps__separator--done[data-v-3fae5c44] {
+  color: var(--td-success-color);
+}
+.qd-steps__divider[data-v-3fae5c44] {
+  border-top: calc(var(--td-size-1) / 2) solid var(--td-border-level-1-color);
+}
+.qd-steps__substeps[data-v-3fae5c44] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--td-comp-margin-m);
+  margin-top: 0;
+  padding-bottom: 0;
+}
+.qd-steps__substep-list[data-v-3fae5c44] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--td-size-1);
+}
+.qd-steps__substep[data-v-3fae5c44] {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--td-radius-medium);
+  padding: var(--td-size-2) var(--td-comp-paddingLR-s);
+  gap: var(--td-size-3);
+  transition: all 0.12s;
+}
+.qd-steps__substep--clickable[data-v-3fae5c44] {
+  cursor: pointer;
+}
+.qd-steps__substep[data-v-3fae5c44]:hover {
+  background-color: var(--td-bg-color-container-hover);
+}
+.qd-steps__substep:hover .qd-steps__substep-name[data-v-3fae5c44] {
+  color: var(--td-text-color-primary);
+}
+.qd-steps__substep--done .qd-steps__substep-no[data-v-3fae5c44] {
+  color: var(--td-success-color);
+  background-color: transparent;
+}
+.qd-steps__substep--done .qd-steps__substep-no[data-v-3fae5c44]::before {
+  background-color: var(--td-success-color);
+  border-color: transparent;
+}
+.qd-steps__substep--done .qd-steps__substep-name[data-v-3fae5c44] {
+  color: var(--td-text-color-primary);
+}
+.qd-steps__substep--active[data-v-3fae5c44] {
+  background-color: var(--td-bg-color-container-hover);
+}
+.qd-steps__substep--active .qd-steps__substep-no[data-v-3fae5c44] {
+  color: var(--td-text-color-brand);
+  background-color: transparent;
+}
+.qd-steps__substep--active .qd-steps__substep-no[data-v-3fae5c44]::before {
+  background-color: var(--td-brand-color);
+  border-color: transparent;
+  box-shadow: 0 0 0 var(--td-size-1) var(--td-brand-color-light);
+}
+.qd-steps__substep--active .qd-steps__substep-name[data-v-3fae5c44] {
+  color: var(--td-text-color-brand);
+  font-weight: 700;
+}
+.qd-steps__substep--pending[data-v-3fae5c44] {
+  color: var(--td-text-color-placeholder);
+}
+.qd-steps__substep--pending .qd-steps__substep-no[data-v-3fae5c44] {
+  color: var(--td-text-color-disabled);
+}
+.qd-steps__substep--pending .qd-steps__substep-no[data-v-3fae5c44]::before {
+  border-color: var(--td-component-border);
+}
+.qd-steps__substep--pending .qd-steps__substep-name[data-v-3fae5c44] {
+  color: var(--td-text-color-placeholder);
+}
+.qd-steps__substep-no[data-v-3fae5c44] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 0;
+  padding-left: calc(var(--td-size-4) + var(--td-size-1));
+  font-size: var(--td-font-size-mark-small);
+  font-weight: 700;
+  line-height: 1.45;
+  color: var(--td-text-color-disabled);
+  background-color: transparent;
+}
+.qd-steps__substep-no[data-v-3fae5c44]::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: var(--td-size-3);
+  height: var(--td-size-3);
+  border-radius: var(--td-radius-circle);
+  border: calc(var(--td-size-1) / 2) solid var(--td-component-stroke);
+  box-sizing: border-box;
+  transform: translateY(-50%);
+  transition: all 0.12s;
+}
+.qd-steps__substep-name[data-v-3fae5c44] {
+  font-size: var(--td-font-size-body-small);
+  font-weight: 600;
+  color: var(--td-text-color-secondary);
+  white-space: nowrap;
+  transition: color 0.12s;
+}
+.qd-steps__indicator[data-v-3fae5c44] {
+  flex: none;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  font-size: var(--td-font-size-body-small);
+  font-weight: 600;
+  color: var(--td-text-color-placeholder);
+  white-space: nowrap;
+  background-color: transparent;
+}
+.qd-steps__indicator b[data-v-3fae5c44] {
+  color: var(--td-text-color-primary);
+  font-weight: 700;
+}

package/dist/components/steps/index.d.ts

@@ -0,0 +1,2 @@
+export { default as QdSteps } from './index.vue';
+export type { QdStepsProps, QdStepsGroup } from './types';

package/dist/components/steps/index.vue.d.ts

@@ -0,0 +1,10 @@
+import type { QdStepsProps } from './types';
+declare const _default: import("vue").DefineComponent<QdStepsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    jump: (stepIndex: number) => any;
+}, string, import("vue").PublicProps, Readonly<QdStepsProps> & Readonly<{
+    onJump?: ((stepIndex: number) => any) | undefined;
+}>, {
+    maxReachedStep: number;
+    canJumpTo: (stepIndex: number) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/steps/index.vue.mjs

@@ -0,0 +1,8 @@
+import './index.css'
+import _sfc_main from "./index.vue2.mjs";
+/* empty css            */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3fae5c44"]]);
+export {
+  index as default
+};

package/dist/components/steps/index.vue2.mjs

@@ -0,0 +1,158 @@
+import './index.css'
+import { defineComponent, mergeDefaults, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, Fragment, renderList, createBlock, normalizeClass, toDisplayString, unref, createTextVNode } from "vue";
+import { ChevronRightSIcon } from "tdesign-icons-vue-next";
+import { qdStepsProps } from "./props.mjs";
+const _hoisted_1 = { class: "qd-steps" };
+const _hoisted_2 = { class: "qd-steps__nav" };
+const _hoisted_3 = { class: "qd-steps__phases" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
+  key: 0,
+  class: "qd-steps__phase-icon"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "qd-steps__phase-icon"
+};
+const _hoisted_7 = {
+  key: 2,
+  class: "qd-steps__phase-icon"
+};
+const _hoisted_8 = { class: "qd-steps__phase-name" };
+const _hoisted_9 = { class: "qd-steps__substeps" };
+const _hoisted_10 = { class: "qd-steps__substep-list" };
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = { class: "qd-steps__substep-no" };
+const _hoisted_13 = { class: "qd-steps__substep-name" };
+const _hoisted_14 = { class: "qd-steps__indicator" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "QdSteps"
+  },
+  __name: "index",
+  props: /* @__PURE__ */ mergeDefaults({
+    options: {},
+    current: {},
+    maxReachedStep: {},
+    canJumpTo: { type: Function }
+  }, qdStepsProps),
+  emits: ["jump"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const flatSteps = computed(() => props.options.flatMap((group) => getPhaseStepLabels(group)));
+    const reachedStep = computed(() => props.maxReachedStep ?? props.current);
+    const hasSubSteps = computed(() => props.options.some((group) => group.steps?.length));
+    const currentPhaseIndex = computed(
+      () => props.options.findIndex((group) => getPhaseStepIndexes(group).includes(props.current))
+    );
+    const currentPhaseStepIndexes = computed(() => {
+      const group = props.options[currentPhaseIndex.value];
+      if (!group) return [];
+      return getPhaseStepIndexes(group);
+    });
+    function getPhaseFirstStepIndex(group) {
+      return getPhaseStepIndexes(group)[0];
+    }
+    function getPhaseStepLabels(group) {
+      return group.steps?.length ? group.steps : [group.title];
+    }
+    function getPhaseStepIndexes(group) {
+      const startIndex = props.options.slice(0, props.options.indexOf(group)).reduce((total, item) => total + getPhaseStepLabels(item).length, 0);
+      return getPhaseStepLabels(group).map((_, index) => startIndex + index);
+    }
+    function getPhaseStatus(group) {
+      const stepIndexes = getPhaseStepIndexes(group);
+      const isActive = stepIndexes.includes(props.current);
+      if (isActive) return "active";
+      const isDone = stepIndexes.every((stepIndex) => stepIndex <= reachedStep.value);
+      if (isDone) return "done";
+      return "pending";
+    }
+    function getStepStatus(stepIndex) {
+      if (stepIndex === props.current) return "active";
+      if (stepIndex < props.current || stepIndex <= reachedStep.value) return "done";
+      return "pending";
+    }
+    function handlePhaseClick(phase) {
+      const stepIndex = getPhaseFirstStepIndex(phase);
+      if (!props.canJumpTo(stepIndex)) return;
+      emit("jump", stepIndex);
+    }
+    function handleStepClick(stepIndex) {
+      if (!props.canJumpTo(stepIndex)) return;
+      emit("jump", stepIndex);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (phase, pi) => {
+              return openBlock(), createElementBlock(Fragment, { key: pi }, [
+                createElementVNode("div", {
+                  class: normalizeClass([
+                    "qd-steps__phase",
+                    {
+                      "qd-steps__phase--done": getPhaseStatus(phase) === "done",
+                      "qd-steps__phase--active": getPhaseStatus(phase) === "active",
+                      "qd-steps__phase--pending": getPhaseStatus(phase) === "pending",
+                      "qd-steps__phase--clickable": __props.canJumpTo(getPhaseFirstStepIndex(phase))
+                    }
+                  ]),
+                  onClick: ($event) => handlePhaseClick(phase)
+                }, [
+                  getPhaseStatus(phase) === "done" ? (openBlock(), createElementBlock("span", _hoisted_5, "✓")) : getPhaseStatus(phase) === "active" ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(pi + 1), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(pi + 1), 1)),
+                  createElementVNode("span", _hoisted_8, toDisplayString(phase.title), 1)
+                ], 10, _hoisted_4),
+                pi < __props.options.length - 1 ? (openBlock(), createBlock(unref(ChevronRightSIcon), {
+                  key: 0,
+                  class: normalizeClass([
+                    "qd-steps__separator",
+                    { "qd-steps__separator--done": getPhaseStatus(phase) === "done" }
+                  ])
+                }, null, 8, ["class"])) : createCommentVNode("", true)
+              ], 64);
+            }), 128))
+          ])
+        ]),
+        hasSubSteps.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _cache[1] || (_cache[1] = createElementVNode("div", { class: "qd-steps__divider" }, null, -1)),
+          createElementVNode("div", _hoisted_9, [
+            createElementVNode("div", _hoisted_10, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(currentPhaseStepIndexes.value, (stepIndex, subIndex) => {
+                return openBlock(), createElementBlock("div", {
+                  key: stepIndex,
+                  class: normalizeClass([
+                    "qd-steps__substep",
+                    `qd-steps__substep--${getStepStatus(stepIndex)}`,
+                    {
+                      "qd-steps__substep--clickable": __props.canJumpTo(stepIndex)
+                    }
+                  ]),
+                  onClick: ($event) => handleStepClick(stepIndex)
+                }, [
+                  createElementVNode("span", _hoisted_12, [
+                    getStepStatus(stepIndex) === "done" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createTextVNode("✓")
+                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode(toDisplayString(currentPhaseIndex.value + 1) + "." + toDisplayString(subIndex + 1), 1)
+                    ], 64))
+                  ]),
+                  createElementVNode("span", _hoisted_13, toDisplayString(flatSteps.value[stepIndex]), 1)
+                ], 10, _hoisted_11);
+              }), 128))
+            ]),
+            createElementVNode("div", _hoisted_14, [
+              _cache[0] || (_cache[0] = createTextVNode(" 第 ", -1)),
+              createElementVNode("b", null, toDisplayString(__props.current + 1), 1),
+              createTextVNode(" / " + toDisplayString(flatSteps.value.length) + " 步 ", 1)
+            ])
+          ])
+        ], 64)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/steps/props.d.ts

@@ -0,0 +1,4 @@
+export declare const qdStepsProps: {
+    readonly maxReachedStep: undefined;
+    readonly canJumpTo: () => boolean;
+};

package/dist/components/steps/props.mjs

@@ -0,0 +1,7 @@
+const qdStepsProps = {
+  maxReachedStep: void 0,
+  canJumpTo: () => false
+};
+export {
+  qdStepsProps
+};

package/dist/components/steps/types.d.ts

@@ -0,0 +1,10 @@
+export interface QdStepsGroup {
+    title: string;
+    steps?: string[];
+}
+export interface QdStepsProps {
+    options: QdStepsGroup[];
+    current: number;
+    maxReachedStep?: number;
+    canJumpTo?: (stepIndex: number) => boolean;
+}

package/dist/index.mjs

@@ -44,8 +44,9 @@ import { defineQdServiceDialogTableSelect } from "./components/service-dialog-ta
 import { default as default32 } from "./components/service-popup-table-select/index.vue.mjs";
 import { defineQdServicePopupTableSelect } from "./components/service-popup-table-select/define.mjs";
 import { default as default33 } from "./components/service-select/index.vue.mjs";
+import { default as default34 } from "./components/steps/index.vue.mjs";
 import { qdUploadAcceptMap } from "./components/upload/config.mjs";
-import { default as default34 } from "./components/upload/index.vue.mjs";
+import { default as default35 } from "./components/upload/index.vue.mjs";
 import { hasPermi, hasPermiDirective } from "./directive/hasPermi.mjs";
 import { hasRole, hasRoleDirective } from "./directive/hasRole.mjs";
 import { useAgentChat } from "./hooks/useAgentChat/index.mjs";
@@ -99,7 +100,8 @@ export {
   default32 as QdServicePopupTableSelect,
   default33 as QdServiceSelect,
   default30 as QdServiceTable,
-  default34 as QdUpload,
+  default34 as QdSteps,
+  default35 as QdUpload,
   auth,
   defineQdCrudList,
   defineQdCrudTable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qidian-vue-ui",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "description": "基于 TDesign 的 QiDian Vue UI 组件库",
   "author": "qidian",
   "license": "MIT",