[Bug]: vue storybook

[Aerojin]

Version

System:  macos 14.4.1
Browsers:  chrome 131.0.6778.205（正式版本） (arm64)
npmPackages:
"@rsbuild/core": "^1.1.13",
    "@rsbuild/plugin-vue": "^1.0.5",
    "@rslib/core": "^0.3.0",
    "@storybook/addon-docs": "^8.4.7",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "@storybook/vue3": "^8.4.7",
    "@types/node": "^22.10.5",
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/compiler-sfc": "^3.5.13",
    "react": "^19.0.0",
    "storybook": "^8.4.7",
    "storybook-addon-rslib": "^0.1.7",
    "storybook-vue3-rsbuild": "^0.1.7",
    "typescript": "^5.7.2",
    "vue": "^3.5.13",
    "vue-tsc": "^2.2.0"

Details

.storybook/main.ts

import { dirname, join } from 'node:path'
import type { StorybookConfig } from 'storybook-vue3-rsbuild'

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}

const config = {
  stories: [
    "../stories/*.mdx",
    "../stories/**/*.mdx",
    "../stories/*.stories.@(js|jsx|mjs|ts|tsx)",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-docs',
    "@storybook/addon-essentials", 
    "storybook-addon-rslib",
    '@storybook/addon-interactions',
  ],
  framework: {
    name: getAbsolutePath('storybook-vue3-rsbuild'),
    options: {},
  }, // 例如 storybook-react-rsbuild
  docs: {
    autodocs: 'tag',
  },

};

export default config;

src/components/Button.vue

<template>
  <button type="button" :class="classes" @click="onClick" :style="style">
    {{ label }}
  </button>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    /**
     * 按钮的文本
     */
    label: string;
    /**
     * 是否是primary
     */
    primary?: boolean;
    /**
     * 按钮大小
     */
    size?: "small" | "medium" | "large";
    /**
     * 按钮背景颜色
     */
    backgroundColor?: string;
  }>(),
  { primary: false }
);

const emit = defineEmits<{
  /**
   * 按钮点击事件
   */
  (e: "click", id: number): void;
}>();

const classes = computed(() => ({
  "storybook-button": true,
  "storybook-button--primary": props.primary,
  "storybook-button--secondary": !props.primary,
  [`storybook-button--${props.size || "medium"}`]: true,
}));

const style = computed(() => ({
  backgroundColor: props.backgroundColor,
}));

/**
 * 按钮的文本111
 */
const onClick = () => {
  emit("click", 1);
};
</script>

stories/Button.stories.ts

import { ref } from "vue";
import { fn } from "@storybook/test";
import type { Meta, StoryObj } from "@storybook/vue3";

import XButton from "../src/components/Button.vue";

const meta = {
  title: "Example/Button",
  component: XButton,
  tags: ["autodocs"],
  argTypes: {
    size: { control: "select", options: ["small", "medium", "large"] },
    backgroundColor: { control: "color" },
  },
  args: {
    primary: false,
    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
    onClick: fn(),
  },
} satisfies Meta<typeof XButton>;

type Story = StoryObj<typeof XButton>;

export default meta;

export const Primary = {
  args: {
    primary: true,
    label: "Button",
  },
};

export const Drawer = {
  render: (args) => ({
    components: { XButton },
    setup() {
      const onClick = (event) => {
        console.log(666, event);
      };

      return { ...args, onClick };
    },
    template: '<x-button :label="label" :primary="primary"  @click="onClick"/>',
  }),
  args: {
    primary: true,
    label: "Button",
  },
};


const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { XButton },
  setup() {
    let model = ref("Javascript");
    const onClick = (event) => {
      console.log(666, event);
    };

    return { ...args, model, onClick };
  },
  template: '<x-button :label="label" :primary="primary"  @click="onClick"/>',
});

export const Normal = Template.bind({});

Normal.args = {
  primary: true,
  label: "Button",
};

如下图，通过配置Template，storybook 中直接不显示样例

但是我通过 storybook 官网的例子，用上面的方法确能正常显示

Reproduce link

Reproduce Steps

storybook dev -p 6006

[fi3ework]

Please provide a minimal reproduction to help us address the issue, we cannot assist with troubleshooting based on the information currently provided.
Thanks.

Why reproduction is required

[Aerojin]

https://github.com/Aerojin/rslib-demo/tree/main

可以 clone 这个仓库复现

[Aerojin]

Please provide a minimal reproduction to help us address the issue, we cannot assist with troubleshooting based on the information currently provided. Thanks.

Why reproduction is required

已经建了demo ，帮忙排查下这个问题