fantasia-ui 0.6.4 → 0.6.6

package/dist/fantasia-ui.css

@@ -2971,27 +2971,34 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   padding: 12px 16px;
   background: var(--f-collapse-item-header-bg);
   color: var(--f-collapse-item-header-color);
   cursor: pointer;
   user-select: none;
-  transition: background var(--f-collapse-item-transition-duration);
+  transition: all var(--f-collapse-item-transition-duration);
 }
 .f-collapse-item__header:hover {
   background: var(--f-collapse-item-header-hover-bg);
 }
+.f-collapse-item__header:hover .f-collapse-item__icon {
+  color: #ec4899;
+}
 .f-collapse-item__header-title {
+  flex: 1;
   font-size: 14px;
   font-weight: 500;
 }
 .f-collapse-item__icon {
   flex-shrink: 0;
-  color: var(--f-collapse-item-content-color);
-  transition: transform var(--f-collapse-item-transition-duration);
+  margin-left: auto;
+  color: #94a3b8;
+  transition: all var(--f-collapse-item-transition-duration);
 }
 .f-collapse-item--active .f-collapse-item__icon {
   transform: rotate(180deg);
+  color: #ec4899;
 }
 .f-collapse-item--disabled .f-collapse-item__header {
   cursor: not-allowed;
@@ -6287,17 +6294,19 @@
 .f-step__content {
   min-width: 0;
   flex: 1;
-  padding-top: 4px;
+  padding-top: 2px;
 }
 .f-step__title {
   font-size: 14px;
   font-weight: 600;
   color: #1f2937;
+  line-height: 1.5;
 }
 .f-step__description {
-  margin-top: 4px;
+  margin-top: 6px;
   font-size: 12px;
   color: #64748b;
+  line-height: 1.5;
 }
 
 .f-switch {
@@ -7023,15 +7032,15 @@
 }
 .f-timeline-item__tail {
   position: absolute;
-  top: 24px;
+  top: 26px;
   left: 11px;
-  height: calc(100% - 24px);
+  height: calc(100% - 26px);
   border-left: 2px solid #e2e8f0;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .f-timeline-item__node {
   position: absolute;
-  top: 0;
+  top: 2px;
   left: 0;
   display: flex;
   align-items: center;
@@ -7074,6 +7083,7 @@
   align-items: center;
   gap: 12px;
   margin-bottom: 8px;
+  line-height: 24px;
   min-height: 24px;
 }
 .f-timeline-item__header.is-clickable {
@@ -7096,6 +7106,7 @@
   color: #94a3b8;
   transition: color 0.3s;
   white-space: nowrap;
+  line-height: 24px;
 }
 .f-timeline-item__title {
   flex: 1;
@@ -7103,11 +7114,16 @@
   font-weight: 500;
   color: #1e293b;
   transition: color 0.3s;
+  line-height: 24px;
 }
 .f-timeline-item__collapse-icon {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  width: 24px;
+  height: 24px;
   color: #94a3b8;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -7124,6 +7140,9 @@
   line-height: 1.6;
   padding-top: 4px;
 }
+.f-timeline-item.is-collapsible:not(.is-collapsed) .f-timeline-item__collapse-icon {
+  color: #ec4899;
+}
 .f-timeline-item.is-collapsible:not(.is-collapsed) .f-timeline-item__collapse-icon :deep(svg) {
   transform: rotate(180deg);
 }
@@ -13069,27 +13088,34 @@ to {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   padding: 12px 16px;
   background: var(--f-collapse-item-header-bg);
   color: var(--f-collapse-item-header-color);
   cursor: pointer;
   user-select: none;
-  transition: background var(--f-collapse-item-transition-duration);
+  transition: all var(--f-collapse-item-transition-duration);
 }
 .f-collapse-item__header[data-v-d69a6c2b]:hover {
   background: var(--f-collapse-item-header-hover-bg);
 }
+.f-collapse-item__header:hover .f-collapse-item__icon[data-v-d69a6c2b] {
+  color: #ec4899;
+}
 .f-collapse-item__header-title[data-v-d69a6c2b] {
+  flex: 1;
   font-size: 14px;
   font-weight: 500;
 }
 .f-collapse-item__icon[data-v-d69a6c2b] {
   flex-shrink: 0;
-  color: var(--f-collapse-item-content-color);
-  transition: transform var(--f-collapse-item-transition-duration);
+  margin-left: auto;
+  color: #94a3b8;
+  transition: all var(--f-collapse-item-transition-duration);
 }
 .f-collapse-item--active .f-collapse-item__icon[data-v-d69a6c2b] {
   transform: rotate(180deg);
+  color: #ec4899;
 }
 .f-collapse-item--disabled .f-collapse-item__header[data-v-d69a6c2b] {
   cursor: not-allowed;
@@ -14110,17 +14136,19 @@ to {
 .f-step__content[data-v-39ce5b1c] {
   min-width: 0;
   flex: 1;
-  padding-top: 4px;
+  padding-top: 2px;
 }
 .f-step__title[data-v-39ce5b1c] {
   font-size: 14px;
   font-weight: 600;
   color: #1f2937;
+  line-height: 1.5;
 }
 .f-step__description[data-v-39ce5b1c] {
-  margin-top: 4px;
+  margin-top: 6px;
   font-size: 12px;
   color: #64748b;
+  line-height: 1.5;
 }.f-timeline[data-v-05989a62] {
   position: relative;
   padding: 0;
@@ -14239,15 +14267,15 @@ to {
 }
 .f-timeline-item__tail[data-v-235d4634] {
   position: absolute;
-  top: 24px;
+  top: 26px;
   left: 11px;
-  height: calc(100% - 24px);
+  height: calc(100% - 26px);
   border-left: 2px solid #e2e8f0;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .f-timeline-item__node[data-v-235d4634] {
   position: absolute;
-  top: 0;
+  top: 2px;
   left: 0;
   display: flex;
   align-items: center;
@@ -14290,6 +14318,7 @@ to {
   align-items: center;
   gap: 12px;
   margin-bottom: 8px;
+  line-height: 24px;
   min-height: 24px;
 }
 .f-timeline-item__header.is-clickable[data-v-235d4634] {
@@ -14312,6 +14341,7 @@ to {
   color: #94a3b8;
   transition: color 0.3s;
   white-space: nowrap;
+  line-height: 24px;
 }
 .f-timeline-item__title[data-v-235d4634] {
   flex: 1;
@@ -14319,11 +14349,16 @@ to {
   font-weight: 500;
   color: #1e293b;
   transition: color 0.3s;
+  line-height: 24px;
 }
 .f-timeline-item__collapse-icon[data-v-235d4634] {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  width: 24px;
+  height: 24px;
   color: #94a3b8;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -14340,6 +14375,9 @@ to {
   line-height: 1.6;
   padding-top: 4px;
 }
+.f-timeline-item.is-collapsible:not(.is-collapsed) .f-timeline-item__collapse-icon[data-v-235d4634] {
+  color: #ec4899;
+}
 .f-timeline-item.is-collapsible:not(.is-collapsed) .f-timeline-item__collapse-icon[data-v-235d4634] svg {
   transform: rotate(180deg);
 }
@@ -14445,7 +14483,7 @@ to {
 .f-timeline-item__content[data-v-235d4634] {
     font-size: 13px;
 }
-}.f-dialog-overlay[data-v-7a2da7c7] {
+}.f-dialog-overlay[data-v-cae03335] {
   position: fixed;
   top: 0;
   left: 0;
@@ -14461,7 +14499,7 @@ to {
   transition: background-color 0.25s ease;
   touch-action: none;
 }
-.f-dialog[data-v-7a2da7c7] {
+.f-dialog[data-v-cae03335] {
   position: relative;
   background: #fff;
   border-radius: 8px;
@@ -14475,7 +14513,7 @@ to {
   will-change: transform, opacity;
   transform-origin: center;
 }
-.f-dialog__close[data-v-7a2da7c7] {
+.f-dialog__close[data-v-cae03335] {
   position: absolute;
   top: 16px;
   right: 16px;
@@ -14493,20 +14531,20 @@ to {
   z-index: 1;
   padding: 0;
 }
-.f-dialog__close[data-v-7a2da7c7]:hover {
+.f-dialog__close[data-v-cae03335]:hover {
   background: #f5f7fa;
   color: #606266;
 }
-.f-dialog__header[data-v-7a2da7c7] {
+.f-dialog__header[data-v-cae03335] {
   padding: 20px 20px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.f-dialog__header.has-divider[data-v-7a2da7c7] {
+.f-dialog__header.has-divider[data-v-cae03335] {
   border-bottom: 1px solid #e4e7ed;
 }
-.f-dialog__icon[data-v-7a2da7c7] {
+.f-dialog__icon[data-v-cae03335] {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
@@ -14515,11 +14553,11 @@ to {
   justify-content: center;
   border-radius: 50%;
 }
-.f-dialog__icon[data-v-7a2da7c7] svg {
+.f-dialog__icon[data-v-cae03335] svg {
   width: 20px;
   height: 20px;
 }
-.f-dialog__title[data-v-7a2da7c7] {
+.f-dialog__title[data-v-cae03335] {
   flex: 1;
   margin: 0;
   font-size: 18px;
@@ -14527,7 +14565,7 @@ to {
   color: #303133;
   line-height: 1.4;
 }
-.f-dialog__body[data-v-7a2da7c7] {
+.f-dialog__body[data-v-cae03335] {
   flex: 1;
   min-height: 0;
   color: #606266;
@@ -14537,88 +14575,88 @@ to {
   display: flex;
   flex-direction: column;
 }
-.f-dialog__body[data-v-7a2da7c7] .f-scrollbar {
+.f-dialog__body[data-v-cae03335] .f-scrollbar {
   flex: 1;
   min-height: 0;
 }
-.f-dialog__body[data-v-7a2da7c7] .f-scrollbar__wrap {
+.f-dialog__body[data-v-cae03335] .f-scrollbar__wrap {
   overflow-y: auto !important;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
 }
-.f-dialog__body[data-v-7a2da7c7] .f-scrollbar__view {
+.f-dialog__body[data-v-cae03335] .f-scrollbar__view {
   padding: 20px;
 }
-.f-dialog__body p[data-v-7a2da7c7] {
+.f-dialog__body p[data-v-cae03335] {
   margin: 0;
 }
-.f-dialog__footer[data-v-7a2da7c7] {
+.f-dialog__footer[data-v-cae03335] {
   padding: 16px 20px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 12px;
 }
-.f-dialog__footer.has-divider[data-v-7a2da7c7] {
+.f-dialog__footer.has-divider[data-v-cae03335] {
   border-top: 1px solid #e4e7ed;
 }
-.f-dialog--info .f-dialog__icon[data-v-7a2da7c7] {
+.f-dialog--info .f-dialog__icon[data-v-cae03335] {
   background: #ecf5ff;
   color: #409eff;
 }
-.f-dialog--success .f-dialog__icon[data-v-7a2da7c7] {
+.f-dialog--success .f-dialog__icon[data-v-cae03335] {
   background: #f0f9ff;
   color: #67c23a;
 }
-.f-dialog--warning .f-dialog__icon[data-v-7a2da7c7] {
+.f-dialog--warning .f-dialog__icon[data-v-cae03335] {
   background: #fef0e6;
   color: #e6a23c;
 }
-.f-dialog--error .f-dialog__icon[data-v-7a2da7c7] {
+.f-dialog--error .f-dialog__icon[data-v-cae03335] {
   background: #fef0f0;
   color: #f56c6c;
 }
-.f-dialog--confirm .f-dialog__icon[data-v-7a2da7c7] {
+.f-dialog--confirm .f-dialog__icon[data-v-cae03335] {
   background: #fef0e6;
   color: #e6a23c;
 }
-.dialog-fade-enter-active[data-v-7a2da7c7],
-.dialog-fade-leave-active[data-v-7a2da7c7] {
+.dialog-fade-enter-active[data-v-cae03335],
+.dialog-fade-leave-active[data-v-cae03335] {
   transition: opacity 0.25s ease;
 }
-.dialog-fade-enter-from[data-v-7a2da7c7],
-.dialog-fade-leave-to[data-v-7a2da7c7] {
+.dialog-fade-enter-from[data-v-cae03335],
+.dialog-fade-leave-to[data-v-cae03335] {
   opacity: 0;
 }
-.dialog-enter-active[data-v-7a2da7c7],
-.dialog-leave-active[data-v-7a2da7c7] {
+.dialog-enter-active[data-v-cae03335],
+.dialog-leave-active[data-v-cae03335] {
   transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 }
-.dialog-enter-from[data-v-7a2da7c7],
-.dialog-leave-to[data-v-7a2da7c7] {
+.dialog-enter-from[data-v-cae03335],
+.dialog-leave-to[data-v-cae03335] {
   opacity: 0;
   transform: scale(0.88) translateY(6px);
 }
-.dialog-enter-to[data-v-7a2da7c7],
-.dialog-leave-from[data-v-7a2da7c7] {
+.dialog-enter-to[data-v-cae03335],
+.dialog-leave-from[data-v-cae03335] {
   opacity: 1;
   transform: scale(1) translateY(0);
 }
 @media (max-width: 768px) {
-.f-dialog-overlay[data-v-7a2da7c7] {
+.f-dialog-overlay[data-v-cae03335] {
     padding: 10px;
 }
-.f-dialog[data-v-7a2da7c7] {
+.f-dialog[data-v-cae03335] {
     width: 95vw;
     max-height: 85vh;
 }
-.f-dialog__header[data-v-7a2da7c7] {
+.f-dialog__header[data-v-cae03335] {
     padding: 16px 16px 12px;
 }
-.f-dialog__body[data-v-7a2da7c7] .f-scrollbar__view {
+.f-dialog__body[data-v-cae03335] .f-scrollbar__view {
     padding: 16px;
 }
-.f-dialog__footer[data-v-7a2da7c7] {
+.f-dialog__footer[data-v-cae03335] {
     padding: 12px 16px;
 }
 }.f-drawer-backdrop[data-v-c7209ade] {

package/dist/fantasia-ui.es.js

@@ -6228,6 +6228,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     title: { default: "提示" },
     content: { default: "" },
     type: { default: "info" },
+    width: { default: "500px" },
     confirmText: { default: "确定" },
     cancelText: { default: "取消" },
     showCancel: { type: Boolean, default: true },
@@ -6244,6 +6245,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const visible = useModel(__props, "modelValue");
+    const dialogWidth = computed(() => {
+      if (typeof props.width === "number") {
+        return `${props.width}px`;
+      }
+      return props.width;
+    });
     const handleClose = () => {
       visible.value = false;
       emit("cancel");
@@ -6295,7 +6302,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   visible.value ? (openBlock(), createElementBlock("div", {
                     key: 0,
-                    class: normalizeClass(["f-dialog", `f-dialog--${_ctx.type}`])
+                    class: normalizeClass(["f-dialog", `f-dialog--${_ctx.type}`]),
+                    style: normalizeStyle({ width: unref(dialogWidth) })
                   }, [
                     _ctx.showClose ? (openBlock(), createElementBlock("button", {
                       key: 0,
@@ -6358,7 +6366,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         })
                       ], true)
                     ], 2)
-                  ], 2)) : createCommentVNode("", true)
+                  ], 6)) : createCommentVNode("", true)
                 ]),
                 _: 3
               })
@@ -6370,7 +6378,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7a2da7c7"]]);
+const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-cae03335"]]);
 const _hoisted_1$3 = {
   key: 0,
   class: "f-drawer__header"

package/dist/fantasia-ui.umd.js

@@ -6229,6 +6229,7 @@ var __async = (__this, __arguments, generator) => {
       title: { default: "提示" },
       content: { default: "" },
       type: { default: "info" },
+      width: { default: "500px" },
       confirmText: { default: "确定" },
       cancelText: { default: "取消" },
       showCancel: { type: Boolean, default: true },
@@ -6245,6 +6246,12 @@ var __async = (__this, __arguments, generator) => {
       const props = __props;
       const emit = __emit;
       const visible = vue.useModel(__props, "modelValue");
+      const dialogWidth = vue.computed(() => {
+        if (typeof props.width === "number") {
+          return `${props.width}px`;
+        }
+        return props.width;
+      });
       const handleClose = () => {
         visible.value = false;
         emit("cancel");
@@ -6296,7 +6303,8 @@ var __async = (__this, __arguments, generator) => {
                   default: vue.withCtx(() => [
                     visible.value ? (vue.openBlock(), vue.createElementBlock("div", {
                       key: 0,
-                      class: vue.normalizeClass(["f-dialog", `f-dialog--${_ctx.type}`])
+                      class: vue.normalizeClass(["f-dialog", `f-dialog--${_ctx.type}`]),
+                      style: vue.normalizeStyle({ width: vue.unref(dialogWidth) })
                     }, [
                       _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
                         key: 0,
@@ -6359,7 +6367,7 @@ var __async = (__this, __arguments, generator) => {
                           })
                         ], true)
                       ], 2)
-                    ], 2)) : vue.createCommentVNode("", true)
+                    ], 6)) : vue.createCommentVNode("", true)
                   ]),
                   _: 3
                 })
@@ -6371,7 +6379,7 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   });
-  const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7a2da7c7"]]);
+  const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-cae03335"]]);
   const _hoisted_1$3 = {
     key: 0,
     class: "f-drawer__header"

package/dist/types/packages/components/modules/FDialog.vue.d.ts

@@ -20,6 +20,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     "onUpdate:modelValue"?: (value: boolean) => any;
     onCancel?: () => any;
 }>, {
+    width: string | number;
     type: import("../../types/components").FDialogType;
     title: string;
     content: string;

package/dist/types/packages/types/components/modules/f-dialog.d.ts

@@ -12,6 +12,8 @@ interface FDialogProps {
     content?: string;
     /** 对话框类型 */
     type?: FDialogType;
+    /** 对话框宽度，支持 CSS 单位字符串或数字(px) @default '500px' */
+    width?: string | number;
     /** 确认按钮文本 */
     confirmText?: string;
     /** 取消按钮文本 */
@@ -40,6 +42,7 @@ interface FDialogOptions {
     title?: string;
     content?: string;
     type?: FDialogType;
+    width?: string | number;
     confirmText?: string;
     cancelText?: string;
     showCancel?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fantasia-ui",
   "private": false,
-  "version": "0.6.4",
+  "version": "0.6.6",
   "type": "module",
   "main": "dist/fantasia-ui.umd.js",
   "module": "dist/fantasia-ui.es.js",