@vunk/plus 1.11.10 → 1.12.0

package/components/thinking/index.css

@@ -0,0 +1,125 @@
+.vk-thinking {
+  width: 100%;
+  max-width: var(--vk-thinking-max-width);
+  color: var(--vk-thinking-color);
+  font-size: var(--vk-thinking-font-size-base);
+}
+.vk-thinking__card {
+  width: 100%;
+  border: 1px solid var(--vk-thinking-border-color);
+  border-radius: var(--vk-thinking-radius);
+  background: var(--vk-thinking-background-color);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.vk-thinking__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 1.5em 1.75em;
+}
+.vk-thinking__card.is-expanded .vk-thinking__header {
+  padding-bottom: 0.75em;
+}
+.vk-thinking__toggle {
+  min-width: var(--vk-thinking-button-width);
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+.vk-thinking__toggle:disabled {
+  cursor: not-allowed;
+}
+.vk-thinking__title {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  color: var(--el-text-color-primary);
+  font-size: var(--vk-thinking-font-size-title);
+  font-weight: 700;
+  line-height: 1.5;
+}
+.vk-thinking__card.is-thinking .vk-thinking__title {
+  animation: vk-thinking-blink 1.6s ease-in-out infinite;
+}
+.vk-thinking__caret {
+  font-size: var(--vk-thinking-font-size-caret);
+  flex: none;
+  color: var(--el-text-color-secondary);
+  transform: rotate(0deg);
+  transform-origin: center;
+  transition: transform var(--vk-thinking-animation-duration) ease;
+}
+.vk-thinking__caret.is-expanded {
+  transform: rotate(90deg);
+}
+.vk-thinking__skip {
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--el-text-color-secondary);
+  font-size: var(--vk-thinking-font-size-skip);
+  line-height: 1.5;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.vk-thinking__skip:hover {
+  color: var(--el-text-color-primary);
+}
+.vk-thinking__body {
+  padding: 0 1.75em 1.5em;
+}
+.vk-thinking__content {
+  color: var(--vk-thinking-color);
+  font-size: var(--vk-thinking-font-size-content);
+  line-height: 2;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.vk-thinking__content p,
+.vk-thinking__content ul,
+.vk-thinking__content ol {
+  margin: 0 0 12px;
+}
+.vk-thinking__content ul,
+.vk-thinking__content ol {
+  padding-left: 24px;
+}
+.vk-thinking__content li{
+  margin-bottom: 8px;
+}
+.vk-thinking__card.is-disabled {
+  opacity: 0.7;
+}
+@keyframes vk-thinking-blink {
+0%,
+  100% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.58;
+}
+}
+@media (width <= 768px) {
+.vk-thinking {
+    --vk-thinking-font-size-base: 14px;
+}
+.vk-thinking__header {
+    padding: 1.2857em 1.4286em;
+}
+.vk-thinking__card.is-expanded .vk-thinking__header {
+    padding-bottom: 0.7143em;
+}
+.vk-thinking__body {
+    padding: 0 1.4286em 1.2857em;
+}
+}

package/components/thinking/index.d.ts

@@ -0,0 +1,4 @@
+import VkThinking from './src/index.vue';
+export * as __VkThinking from './src/types';
+export { VkThinking, };
+export default VkThinking;

package/components/thinking/index.mjs

@@ -0,0 +1,357 @@
+import { defineComponent, useSlots, ref, watch, computed, nextTick, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, toDisplayString, createVNode, withCtx, withModifiers, createCommentVNode, withDirectives, renderSlot, vShow } from 'vue';
+import { c as arrow_right_bold_default } from '../index2.mjs';
+import { VkScrollbar } from '@vunk/plus/components/scrollbar';
+import { ElCollapseTransition, ElIcon } from 'element-plus';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  /**
+   * @description 展开/收起状态（v-model）
+   */
+  modelValue: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 思考内容文本
+   */
+  content: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description 当前思考状态
+   */
+  status: {
+    type: String,
+    default: "start"
+  },
+  /**
+   * @description 是否禁用交互
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description status=end 时是否自动收起
+   */
+  autoCollapse: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 动画过渡时长
+   */
+  duration: {
+    type: String,
+    default: "0.2s"
+  },
+  /**
+   * @description 头部触发按钮最小宽度
+   */
+  buttonWidth: {
+    type: String,
+    default: "160px"
+  },
+  /**
+   * @description 组件最大宽度
+   */
+  maxWidth: {
+    type: String,
+    default: "100%"
+  },
+  /**
+   * @description 卡片背景色
+   */
+  backgroundColor: {
+    type: String,
+    default: "#fcfcfc"
+  },
+  /**
+   * @description 正文字体颜色
+   */
+  color: {
+    type: String,
+    default: "var(--el-color-info)"
+  },
+  /**
+   * @description 标题文案
+   */
+  title: {
+    type: String,
+    default: "\u5206\u6790\u7528\u6237\u9700\u6C42"
+  },
+  /**
+   * @description 跳过按钮文案
+   */
+  skipText: {
+    type: String,
+    default: "\u8DF3\u8FC7\u601D\u8003"
+  },
+  /**
+   * @description 是否显示跳过按钮
+   */
+  showSkip: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 卡片圆角
+   */
+  radius: {
+    type: String,
+    default: "22px"
+  },
+  /**
+   * @description 卡片边框颜色
+   */
+  borderColor: {
+    type: String,
+    default: "#e4e7ed"
+  },
+  /**
+   * @description 内容区域最大高度（超过后滚动）
+   */
+  maxHeight: {
+    type: String,
+    default: ""
+  }
+};
+const emits = {
+  "change": null,
+  "update:modelValue": null,
+  "skip": null
+};
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VkThinking",
+    inheritAttrs: false
+  },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const isExpanded = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        isExpanded.value = newVal;
+      }
+    );
+    watch(
+      () => props.status,
+      (newVal) => {
+        if (newVal === "end" && props.autoCollapse) {
+          isExpanded.value = false;
+          emit("update:modelValue", false);
+        }
+      }
+    );
+    const displayedContent = computed(() => {
+      return props.status === "error" ? "\u601D\u8003\u8FC7\u7A0B\u4E2D\u51FA\u73B0\u9519\u8BEF" : props.content;
+    });
+    const hasContent = computed(() => {
+      return Boolean(slots.default) || Boolean(displayedContent.value);
+    });
+    const showSkipAction = computed(() => {
+      return props.showSkip && !props.disabled && props.status === "thinking";
+    });
+    const titleText = computed(() => {
+      if (props.status === "error")
+        return "\u5206\u6790\u51FA\u73B0\u95EE\u9898";
+      if (props.status === "cancel")
+        return "\u5DF2\u8DF3\u8FC7\u601D\u8003";
+      return props.title;
+    });
+    const cssVars = computed(() => ({
+      "--vk-thinking-animation-duration": props.duration,
+      "--vk-thinking-button-width": props.buttonWidth,
+      "--vk-thinking-max-width": props.maxWidth,
+      "--vk-thinking-background-color": props.backgroundColor,
+      "--vk-thinking-color": props.color,
+      "--vk-thinking-radius": props.radius,
+      "--vk-thinking-border-color": props.borderColor,
+      "--vk-thinking-body-max-height": props.maxHeight || "none",
+      "--vk-thinking-font-size-base": "16px",
+      "--vk-thinking-font-size-title": "1.125em",
+      "--vk-thinking-font-size-skip": "1em",
+      "--vk-thinking-font-size-content": "0.9em",
+      "--vk-thinking-font-size-caret": "0.8125em"
+    }));
+    const scrollbarRef = ref();
+    watch(
+      () => [props.content, isExpanded.value, props.status],
+      () => {
+        if (props.status === "thinking" && isExpanded.value) {
+          nextTick(() => {
+            scrollbarRef.value?.scrollToBottom({
+              behavior: "auto"
+            });
+          });
+        }
+      },
+      { flush: "post" }
+    );
+    function emitChange() {
+      emit("change", {
+        value: isExpanded.value,
+        status: props.status
+      });
+      emit("update:modelValue", isExpanded.value);
+    }
+    function toggleExpand() {
+      if (props.disabled || !hasContent.value)
+        return;
+      isExpanded.value = !isExpanded.value;
+      emitChange();
+    }
+    function skipThinking() {
+      if (props.disabled)
+        return;
+      isExpanded.value = false;
+      emitChange();
+      emit("skip", {
+        value: false,
+        status: props.status
+      });
+    }
+    const __returned__ = { props, emit, slots, isExpanded, displayedContent, hasContent, showSkipAction, titleText, cssVars, scrollbarRef, emitChange, toggleExpand, skipThinking, get ArrowRightBold() {
+      return arrow_right_bold_default;
+    }, get VkScrollbar() {
+      return VkScrollbar;
+    }, get ElCollapseTransition() {
+      return ElCollapseTransition;
+    }, get ElIcon() {
+      return ElIcon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "vk-thinking__header" };
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = { class: "vk-thinking__title" };
+const _hoisted_4 = { class: "vk-thinking__body" };
+const _hoisted_5 = { class: "vk-thinking__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: "vk-thinking",
+      style: normalizeStyle($setup.cssVars)
+    },
+    [
+      createElementVNode(
+        "section",
+        {
+          class: normalizeClass(["vk-thinking__card", [
+            `is-${_ctx.status}`,
+            {
+              "is-disabled": _ctx.disabled,
+              "is-expanded": $setup.isExpanded && $setup.hasContent
+            }
+          ]])
+        },
+        [
+          createElementVNode("header", _hoisted_1, [
+            createElementVNode("button", {
+              class: "vk-thinking__toggle",
+              type: "button",
+              disabled: _ctx.disabled,
+              onClick: $setup.toggleExpand
+            }, [
+              createElementVNode(
+                "span",
+                _hoisted_3,
+                toDisplayString($setup.titleText) + "\uFF1A",
+                1
+                /* TEXT */
+              ),
+              createVNode($setup["ElIcon"], {
+                class: normalizeClass(["vk-thinking__caret", { "is-expanded": $setup.isExpanded }])
+              }, {
+                default: withCtx(() => [
+                  createVNode($setup["ArrowRightBold"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"])
+            ], 8, _hoisted_2),
+            $setup.showSkipAction ? (openBlock(), createElementBlock(
+              "button",
+              {
+                key: 0,
+                class: "vk-thinking__skip",
+                type: "button",
+                onClick: withModifiers($setup.skipThinking, ["stop"])
+              },
+              toDisplayString(_ctx.skipText),
+              1
+              /* TEXT */
+            )) : createCommentVNode("v-if", true)
+          ]),
+          createVNode($setup["ElCollapseTransition"], null, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode(
+                "div",
+                _hoisted_4,
+                [
+                  createVNode($setup["VkScrollbar"], {
+                    ref: "scrollbarRef",
+                    class: "vk-thinking__scrollbar",
+                    "max-height": _ctx.maxHeight
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "default", {
+                        content: $setup.displayedContent,
+                        status: _ctx.status
+                      }, () => [
+                        createElementVNode(
+                          "div",
+                          _hoisted_5,
+                          toDisplayString($setup.displayedContent),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  }, 8, ["max-height"])
+                ],
+                512
+                /* NEED_PATCH */
+              ), [
+                [vShow, $setup.isExpanded && $setup.hasContent]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          })
+        ],
+        2
+        /* CLASS */
+      )
+    ],
+    4
+    /* STYLE */
+  );
+}
+var VkThinking = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\labCode\\vunk-plus\\packages\\components\\thinking\\src\\index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkThinking.install = (app) => {
+  app.component(VkThinking.name || "VkThinking", VkThinking);
+};
+
+export { VkThinking, types as __VkThinking, VkThinking as default };

package/components/thinking/src/ctx.d.ts

@@ -0,0 +1,121 @@
+import type { PropType } from 'vue';
+import type { ThinkingStatus } from './types';
+export declare const props: {
+    /**
+     * @description 展开/收起状态（v-model）
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description 思考内容文本
+     */
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 当前思考状态
+     */
+    status: {
+        type: PropType<ThinkingStatus>;
+        default: ThinkingStatus;
+    };
+    /**
+     * @description 是否禁用交互
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description status=end 时是否自动收起
+     */
+    autoCollapse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description 动画过渡时长
+     */
+    duration: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 头部触发按钮最小宽度
+     */
+    buttonWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 组件最大宽度
+     */
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 卡片背景色
+     */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 正文字体颜色
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 标题文案
+     */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 跳过按钮文案
+     */
+    skipText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 是否显示跳过按钮
+     */
+    showSkip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description 卡片圆角
+     */
+    radius: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 卡片边框颜色
+     */
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @description 内容区域最大高度（超过后滚动）
+     */
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export declare const emits: {
+    change: null;
+    'update:modelValue': null;
+    skip: null;
+};