docs: 更新 storybook@7 版本，适配 vite

apps/mobile/.npmrc

@@ -1,5 +1,5 @@
 always-auth=true
-registry=https://registry.npmmirror.com/
+registry=http://192.168.3.71:4873/
 @jianyu:registry=http://192.168.3.71:4873/
 @jy:registry=http://192.168.3.71:4873/
 element-ui:registry=http://192.168.3.71:4873/

apps/mobile/.storybook/main.js

@@ -0,0 +1,28 @@
+import { join, dirname } from 'path'
+
+/**
+ * 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) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+
+/** @type { import('@storybook/vue-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions')
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/vue-vite'),
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+export default config

apps/mobile/.storybook/preview.js

@@ -0,0 +1,86 @@
+import 'vant/lib/icon/local.css'
+import '@/assets/fonts/index.scss'
+import 'tinymce/skins/content/default/content.css'
+import 'virtual:uno.css'
+import 'vant/lib/index.less'
+import '@/assets/style/index.scss'
+import './preview.scss'
+import { useArgs } from '@storybook/preview-api'
+import EventBus from './eventBus'
+import Vue from "vue";
+
+
+Vue.prototype.$envs = {}
+
+const ComponentUIBus = new EventBus()
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      },
+      expanded: true
+    },
+    viewport: {
+      viewports: {
+        iPhone6: {
+          name: 'iPhone 6/7/8',
+          styles: {
+            width: '375px',
+            height: '667px'
+          },
+          type: 'mobile'
+        },
+        iPhone6Plus: {
+          name: 'iPhone 6/7/8 Plus',
+          styles: {
+            width: '414px',
+            height: '736px'
+          },
+          type: 'mobile'
+        },
+        iPhone5SE: {
+          name: 'iPhone 5/SE',
+          styles: {
+            width: '320px',
+            height: '568px'
+          },
+          type: 'mobile'
+        }
+      },
+      defaultViewport: 'iPhone6'
+    },
+    options: {
+      storySort: {
+        order: [
+          'Intro',
+          '指令',
+          '实例方法',
+          '项目工具',
+          '全局状态',
+          '全局样式',
+          '基础组件',
+          '业务组件',
+          '*',
+          '示例'
+        ]
+      }
+    }
+  },
+  decorators: [
+    (story, context) => {
+      const [_, updateArgs] = useArgs()
+
+      ComponentUIBus.emit(context.title, _)
+      function updateArgsCallback(callback) {
+        ComponentUIBus.on(context.title, callback)
+      }
+
+      return story({ ...context, updateArgs, updateArgsCallback })
+    }
+  ]
+}
+
+export default preview

apps/mobile/config/storybook/main.js

@@ -1,18 +0,0 @@
-module.exports = {
-  core: {
-    builder: 'webpack5'
-  },
-  stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/addon-storysource',
-      options: {
-        loaderOptions: {
-          injectStoryParameters: false
-        }
-      }
-    }
-  ]
-}

apps/mobile/config/storybook/preview.js

@@ -1,74 +0,0 @@
-import '@/assets/fonts/index.scss'
-import '@/assets/style/index.scss'
-import './preview.scss'
-import { useArgs } from '@storybook/client-api'
-import EventBus from './eventBus'
-
-export const parameters = {
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/
-    },
-    expanded: true
-  },
-  viewport: {
-    viewports: {
-      iPhone6: {
-        name: 'iPhone 6/7/8',
-        styles: {
-          width: '375px',
-          height: '667px'
-        },
-        type: 'mobile'
-      },
-      iPhone6Plus: {
-        name: 'iPhone 6/7/8 Plus',
-        styles: {
-          width: '414px',
-          height: '736px'
-        },
-        type: 'mobile'
-      },
-      iPhone5SE: {
-        name: 'iPhone 5/SE',
-        styles: {
-          width: '320px',
-          height: '568px'
-        },
-        type: 'mobile'
-      }
-    },
-    defaultViewport: 'iPhone6'
-  },
-  options: {
-    storySort: {
-      order: [
-        'Intro',
-        '指令',
-        '实例方法',
-        '项目工具',
-        '全局状态',
-        '全局样式',
-        '基础组件',
-        '业务组件',
-        '*',
-        '示例'
-      ]
-    }
-  }
-}
-
-const ComponentUIBus = new EventBus()
-export const decorators = [
-  (story, context) => {
-    const [_, updateArgs] = useArgs()
-
-    ComponentUIBus.emit(context.title, _)
-    function updateArgsCallback(callback) {
-      ComponentUIBus.on(context.title, callback)
-    }
-
-    return story({ ...context, updateArgs, updateArgsCallback })
-  }
-]

apps/mobile/package.json

@@ -9,7 +9,9 @@
     "update": "node ./scripts/updateGitInfo.js",
     "preview": "vite preview --port 4173",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
-    "format": "prettier --write \"./**/*.{,vue,ts,js,json,md}\""
+    "format": "prettier --write \"./**/*.{,vue,ts,js,json,md}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@jy/data-models": "workspace:^",
@@ -39,6 +41,18 @@
     "@nabla/vite-plugin-eslint": "^2.0.2",
     "@rushstack/eslint-patch": "^1.1.0",
     "@sentry/vite-plugin": "^2.21.1",
+    "@storybook/addon-docs": "7.6.20",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-interactions": "7.6.20",
+    "@storybook/addon-actions": "7.6.20",
+    "@storybook/addon-links": "7.6.20",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/addon-storysource": "7.6.20",
+    "@storybook/blocks": "7.6.20",
+    "@storybook/builder-vite": "7.6.20",
+    "@storybook/test": "7.6.20",
+    "@storybook/vue": "7.6.20",
+    "@storybook/vue-vite": "7.6.20",
     "@vitejs/plugin-legacy": "^4.0.4",
     "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -47,8 +61,12 @@
     "eslint-plugin-vue": "^9.22.0",
     "less": "^4.1.3",
     "prettier": "^2.5.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.63.2",
+    "storybook": "7.6.20",
     "terser": "^5.14.2",
     "unocss": "^0.58.5",
     "unplugin-vue-components": "^0.25.1",

apps/mobile/src/components/cell/filter-cell/index.stories.js

@@ -44,16 +44,23 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {
-  title: '不带箭头-带描述',
-  label: '11'
+export const 基础用法 = {
+  render: Template,
+
+  args: {
+    title: '不带箭头-带描述',
+    label: '11'
+  }
 }
-export const 其他用法 = Template.bind({})
-其他用法.args = {
-  title: '带箭头带tag',
-  isTag: true,
-  isLink: true,
-  label: '',
-  value: '111'
+
+export const 其他用法 = {
+  render: Template,
+
+  args: {
+    title: '带箭头带tag',
+    isTag: true,
+    isLink: true,
+    label: '',
+    value: '111'
+  }
 }

apps/mobile/src/components/selector/area-city-sidebar/index.stories.js

@@ -28,10 +28,16 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
-export const 扩展用法 = Template.bind({})
-扩展用法.args = {
-  useProvinceCitySplit: true,
-  disabledCitySelect: true,
-  childrenAddText: '全省'
+export const 基础用法 = {
+  render: Template
+}
+
+export const 扩展用法 = {
+  render: Template,
+
+  args: {
+    useProvinceCitySplit: true,
+    disabledCitySelect: true,
+    childrenAddText: '全省'
+  }
 }

apps/mobile/src/components/selector/area-city/index.stories.js

@@ -28,8 +28,14 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
-export const 扩展用法 = Template.bind({})
-扩展用法.args = {
-  onlyProvince: true
+export const 基础用法 = {
+  render: Template
+}
+
+export const 扩展用法 = {
+  render: Template,
+
+  args: {
+    onlyProvince: true
+  }
 }

apps/mobile/src/components/selector/area/index.stories.js

@@ -28,4 +28,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/components/selector/buyer-class-sidebar/index.stories.js

@@ -22,4 +22,6 @@ const Template = (args, { argTypes }) => ({
   `
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/components/selector/date-time-group/index.stories.js

@@ -28,4 +28,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/components/selector/date-time-list/index.stories.js

@@ -28,4 +28,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/components/selector/industry-sidebar/index.stories.js

@@ -28,4 +28,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/components/selector/info-type-sidebar/index.stories.js

@@ -28,4 +28,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/components/selector/keywords-sidebar/index.stories.js

@@ -64,7 +64,10 @@ const Template = (args, { argTypes }) => ({
   `
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {
-  sourceList: propsSourceList
+export const 基础用法 = {
+  render: Template,
+
+  args: {
+    sourceList: propsSourceList
+  }
 }

apps/mobile/src/components/selector/money-input-custom/index.stories.js

@@ -22,4 +22,6 @@ const Template = (args, { argTypes }) => ({
   `
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/components/selector/money-input-group/index.stories.js

@@ -22,4 +22,6 @@ const Template = (args, { argTypes }) => ({
   `
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/components/selector/money/index.stories.js

@@ -24,7 +24,10 @@ const Template = (args, { argTypes }) => ({
   `
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {
-  options: entMoneyData
+export const 基础用法 = {
+  render: Template,
+
+  args: {
+    options: entMoneyData
+  }
 }

apps/mobile/src/components/selector/scope/index.stories.js

@@ -21,60 +21,67 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {
-  options: [
-    {
-      label: '企业名称',
-      key: 'A',
-      checked: true
-    },
-    {
-      label: '法定代表人',
-      key: 'B',
-      checked: false
-    },
-    {
-      label: '经营范围',
-      key: 'C',
-      checked: false
-    },
-    {
-      label: '中标项目/标的物',
-      key: 'D',
-      checked: false
-    }
-  ],
-  defaultVal: ['A']
+export const 基础用法 = {
+  render: Template,
+
+  args: {
+    options: [
+      {
+        label: '企业名称',
+        key: 'A',
+        checked: true
+      },
+      {
+        label: '法定代表人',
+        key: 'B',
+        checked: false
+      },
+      {
+        label: '经营范围',
+        key: 'C',
+        checked: false
+      },
+      {
+        label: '中标项目/标的物',
+        key: 'D',
+        checked: false
+      }
+    ],
+    defaultVal: ['A']
+  }
 }
-export const 自定义单选用法 = Template.bind({})
-自定义单选用法.args = {
-  options: [
-    {
-      label: '企业名称',
-      key: 'A',
-      checked: false
-    },
-    {
-      label: '法定代表人',
-      key: 'B',
-      checked: false
-    },
-    {
-      label: '经营范围',
-      key: 'C',
-      tag: '开通',
-      disabled: true,
-      checked: false
-    },
-    {
-      label: '中标项目/标的物',
-      key: 'D',
-      tag: '开通',
-      disabled: true,
-      checked: false
-    }
-  ],
-  defaultVal: ['A'],
-  multiple: false
+
+export const 自定义单选用法 = {
+  render: Template,
+
+  args: {
+    options: [
+      {
+        label: '企业名称',
+        key: 'A',
+        checked: false
+      },
+      {
+        label: '法定代表人',
+        key: 'B',
+        checked: false
+      },
+      {
+        label: '经营范围',
+        key: 'C',
+        tag: '开通',
+        disabled: true,
+        checked: false
+      },
+      {
+        label: '中标项目/标的物',
+        key: 'D',
+        tag: '开通',
+        disabled: true,
+        checked: false
+      }
+    ],
+    defaultVal: ['A'],
+    multiple: false
+  }
 }

apps/mobile/src/stories/Demo.stories.js

@@ -37,33 +37,37 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础示例 = Template.bind({})
+export const 基础示例 = {
+  render: Template
+}
 
-export const 更多示例 = (args, config) => ({
-  props: Object.keys(config.argTypes),
-  data: function () {
-    return {
-      sizes: ['small', 'medium', 'large'],
-      types: ['success', 'warning', 'danger']
-    }
-  },
-  components: {
-    Demo
-  },
-  template: `
-    <div>
-      <Demo v-for="size in sizes" v-bind="$props" :size="size" :label="size" @click="onClick">
-        <template #badge>大小: </template>
-      </Demo>
-      <br>
-      <Demo v-for="type in types" v-bind="$props" :size="type" :label="type" @click="onClick">
-        <template #badge>风格: </template>
-      </Demo>
-    </div>
-  `,
-  methods: {
-    onClick() {
-      console.log(this)
+export const 更多示例 = {
+  render: (args, config) => ({
+    props: Object.keys(config.argTypes),
+    data: function () {
+      return {
+        sizes: ['small', 'medium', 'large'],
+        types: ['success', 'warning', 'danger']
+      }
+    },
+    components: {
+      Demo
+    },
+    template: `
+      <div>
+        <Demo v-for="size in sizes" v-bind="$props" :size="size" :label="size" @click="onClick">
+          <template #badge>大小: </template>
+        </Demo>
+        <br>
+        <Demo v-for="type in types" v-bind="$props" :size="type" :label="type" @click="onClick">
+          <template #badge>风格: </template>
+        </Demo>
+      </div>
+    `,
+    methods: {
+      onClick() {
+        console.log(this)
+      }
     }
-  }
-})
+  })
+}

apps/mobile/src/stories/Style.stories.js

@@ -3,9 +3,11 @@ export default {
   title: '全局样式/全局样式'
 }
 
-export const Tag = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  template: `
-    <div class="jy-tag">开通</div>
-  `
-})
+export const Tag = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    template: `
+      <div class="jy-tag">开通</div>
+    `
+  })
+}

apps/mobile/src/ui/buyer-cell/index.stories.js

@@ -35,4 +35,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/ui/cell-card/index.stories.js

@@ -36,4 +36,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/ui/checkbox-group/index.stories.js

@@ -61,137 +61,148 @@ const Template = (args, { argTypes, updateArgs, updateArgsCallback }) => ({
   }
 })
 
-export const 基础多选用法 = Template.bind({})
-基础多选用法.args = {
-  options: [
-    {
-      key: 'all',
-      label: '全选'
-    },
-    {
-      key: 'a',
-      label: '选项a'
-    },
-    {
-      key: 'b',
-      label: '选项b'
-    },
-    {
-      key: 'c',
-      label: '选项c'
-    },
-    {
-      key: 'd',
-      label: '选项d'
+export const 基础多选用法 = {
+  render: Template,
+
+  args: {
+    options: [
+      {
+        key: 'all',
+        label: '全选'
+      },
+      {
+        key: 'a',
+        label: '选项a'
+      },
+      {
+        key: 'b',
+        label: '选项b'
+      },
+      {
+        key: 'c',
+        label: '选项c'
+      },
+      {
+        key: 'd',
+        label: '选项d'
+      }
+    ],
+    config: {
+      icon: true,
+      all: 'all'
     }
-  ],
-  config: {
-    icon: true,
-    all: 'all'
   }
 }
 
-export const 自定义多选用法 = Template.bind({})
-自定义多选用法.args = {
-  beforeChangeAction: (arr) => {
-    if (arr.length === 1) {
-      Toast('beforeChangeAction 回调函数', arr.length)
-    }
-    return arr
-  },
-  options: [
-    {
-      key: 'all',
-      label: '最多选择2个'
-    },
-    {
-      key: 'a',
-      label: '选项a'
-    },
-    {
-      key: 'b',
-      label: '选项b'
-    },
-    {
-      key: 'c',
-      label: '选项c'
+export const 自定义多选用法 = {
+  render: Template,
+
+  args: {
+    beforeChangeAction: (arr) => {
+      if (arr.length === 1) {
+        Toast('beforeChangeAction 回调函数', arr.length)
+      }
+      return arr
     },
-    {
-      key: 'd',
-      label: '选项d 手动禁用',
-      props: {
-        beforeChangeAction: (v) => {
-          Toast('手动禁止选中')
-          return false
+    options: [
+      {
+        key: 'all',
+        label: '最多选择2个'
+      },
+      {
+        key: 'a',
+        label: '选项a'
+      },
+      {
+        key: 'b',
+        label: '选项b'
+      },
+      {
+        key: 'c',
+        label: '选项c'
+      },
+      {
+        key: 'd',
+        label: '选项d 手动禁用',
+        props: {
+          beforeChangeAction: (v) => {
+            Toast('手动禁止选中')
+            return false
+          }
         }
       }
+    ],
+    config: {
+      icon: false,
+      max: 2,
+      all: 'all'
     }
-  ],
-  config: {
-    icon: false,
-    max: 2,
-    all: 'all'
   }
 }
 
-export const 扩展自定义选项用法 = (
-  args,
-  { argTypes, updateArgs, updateArgsCallback }
-) => ({
-  components: { exampleComponent },
-  props: Object.keys(argTypes),
-  template: '<exampleComponent/>'
-})
+export const 扩展自定义选项用法 = {
+  render: (args, { argTypes, updateArgs, updateArgsCallback }) => ({
+    components: { exampleComponent },
+    props: Object.keys(argTypes),
+    template: '<exampleComponent/>'
+  })
+}
+
+export const 基础单选用法 = {
+  render: Template,
 
-export const 基础单选用法 = Template.bind({})
-基础单选用法.args = {
-  options: ['选项1', '选项2', '选项3', '选项4'],
-  config: {
-    multiple: false
+  args: {
+    options: ['选项1', '选项2', '选项3', '选项4'],
+    config: {
+      multiple: false
+    }
   }
 }
 
-export const 自定义单选用法 = Template.bind({})
-自定义单选用法.args = {
-  options: [
-    {
-      key: 'all',
-      label: '不限'
-    },
-    {
-      key: 'a',
-      label: '选项a',
-      disabled: true,
-      tag: '开通',
-      props: {
-        beforeChangeAction: (v) => {
-          Toast('需开通')
-          return false
+export const 自定义单选用法 = {
+  render: Template,
+
+  args: {
+    options: [
+      {
+        key: 'all',
+        label: '不限'
+      },
+      {
+        key: 'a',
+        label: '选项a',
+        disabled: true,
+        tag: '开通',
+        props: {
+          beforeChangeAction: (v) => {
+            Toast('需开通')
+            return false
+          }
         }
-      }
-    },
-    {
-      key: 'b',
-      label: '选项b'
-    },
-    {
-      key: 'c',
-      label: '选项c 禁用',
-      disabled: true
-    },
-    {
-      key: 'd',
-      label: '选项d 手动禁用',
-      props: {
-        beforeChangeAction: (v) => {
-          Toast('手动禁止选中')
-          return false
+      },
+      {
+        key: 'b',
+        label: '选项b'
+      },
+      {
+        key: 'c',
+        label: '选项c 禁用',
+        disabled: true
+      },
+      {
+        key: 'd',
+        label: '选项d 手动禁用',
+        props: {
+          beforeChangeAction: (v) => {
+            Toast('手动禁止选中')
+            return false
+          }
         }
       }
+    ],
+    config: {
+      icon: false,
+      multiple: false
     }
-  ],
-  config: {
-    icon: false,
-    multiple: false
   }
 }

apps/mobile/src/ui/checkbox/index.stories.js

@@ -43,5 +43,7 @@ const Template = (args, { argTypes, updateArgs, updateArgsCallback }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {}
+export const 基础用法 = {
+  render: Template,
+  args: {}
+}

apps/mobile/src/ui/company-cell/index.stories.js

@@ -40,4 +40,6 @@ const Template = (args, { argTypes }) => ({
   methods: {}
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/ui/date-time-picker/index.stories.js

@@ -19,5 +19,7 @@ const Template = (args, { argTypes, updateArgs, updateArgsCallback }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {}
+export const 基础用法 = {
+  render: Template,
+  args: {}
+}

apps/mobile/src/ui/drop-filter/index.stories.js

@@ -99,129 +99,131 @@ const Template = (args, { argTypes, updateArgs, updateArgsCallback }) => ({
   }
 })
 
-export const 基础示例 = Template.bind({})
-基础示例.args = {
-  options: [
-    {
-      key: 'searchType',
-      menu: {
-        title: '搜索范围'
-      },
-      content: {
-        component: scopeSelectorContent,
-        props: {
-          multiple: true,
-          options: [
-            {
-              key: 'title',
-              label: '标题搜索',
-              checked: false
-            },
-            {
-              key: 'detail',
-              label: '正文搜索',
-              checked: false
-            },
-            {
-              key: 'ent_name',
-              label: '发布单位',
-              checked: false
-            }
-          ],
-          defaultVal: ['title']
+export const 基础示例 = {
+  render: Template,
+
+  args: {
+    options: [
+      {
+        key: 'searchType',
+        menu: {
+          title: '搜索范围'
+        },
+        content: {
+          component: scopeSelectorContent,
+          props: {
+            multiple: true,
+            options: [
+              {
+                key: 'title',
+                label: '标题搜索',
+                checked: false
+              },
+              {
+                key: 'detail',
+                label: '正文搜索',
+                checked: false
+              },
+              {
+                key: 'ent_name',
+                label: '发布单位',
+                checked: false
+              }
+            ],
+            defaultVal: ['title']
+          }
         }
-      }
-    },
-    {
-      key: 'time',
-      menu: {
-        title: '发布时间'
       },
-      content: {
-        component: scopeSelectorContent,
-        props: {
-          multiple: false,
-          options: [
-            {
-              key: '',
-              label: '全部',
-              checked: false
-            },
-            {
-              key: 'today',
-              label: '今天',
-              checked: false
-            },
-            {
-              key: 'lately3',
-              label: '最近3天',
-              checked: false
-            },
-            {
-              key: 'lately7',
-              label: '最近1周',
-              checked: false
-            },
-            {
-              key: 'lately30',
-              label: '最近1个月',
-              checked: false
-            },
-            {
-              key: 'lately90',
-              label: '最近3个月',
-              checked: false
-            }
-          ],
-          defaultVal: ['']
+      {
+        key: 'time',
+        menu: {
+          title: '发布时间'
+        },
+        content: {
+          component: scopeSelectorContent,
+          props: {
+            multiple: false,
+            options: [
+              {
+                key: '',
+                label: '全部',
+                checked: false
+              },
+              {
+                key: 'today',
+                label: '今天',
+                checked: false
+              },
+              {
+                key: 'lately3',
+                label: '最近3天',
+                checked: false
+              },
+              {
+                key: 'lately7',
+                label: '最近1周',
+                checked: false
+              },
+              {
+                key: 'lately30',
+                label: '最近1个月',
+                checked: false
+              },
+              {
+                key: 'lately90',
+                label: '最近3个月',
+                checked: false
+              }
+            ],
+            defaultVal: ['']
+          }
         }
-      }
-    },
-    {
-      key: 'area',
-      menu: {
-        title: '地区'
       },
-      content: {}
-    },
-    {
-      key: 'status',
-      menu: {
-        title: '信息状态'
+      {
+        key: 'area',
+        menu: {
+          title: '地区'
+        },
+        content: {}
       },
-      content: {
-        component: scopeSelectorContent,
-        props: {
-          multiple: false,
-          options: [
-            {
-              key: '0',
-              label: '全部',
-              checked: false
-            },
-            {
-              key: '1',
-              label: '生效中',
-              checked: false
-            },
-            {
-              key: '-1',
-              label: '已过期',
-              checked: false
-            }
-          ],
-          defaultVal: ['0']
+      {
+        key: 'status',
+        menu: {
+          title: '信息状态'
+        },
+        content: {
+          component: scopeSelectorContent,
+          props: {
+            multiple: false,
+            options: [
+              {
+                key: '0',
+                label: '全部',
+                checked: false
+              },
+              {
+                key: '1',
+                label: '生效中',
+                checked: false
+              },
+              {
+                key: '-1',
+                label: '已过期',
+                checked: false
+              }
+            ],
+            defaultVal: ['0']
+          }
         }
       }
-    }
-  ]
+    ]
+  }
 }
 
-export const 自定义插槽示例 = (
-  args,
-  { argTypes, updateArgs, updateArgsCallback }
-) => ({
-  components: { exampleComponent },
-  props: Object.keys(argTypes),
-  template: '<exampleComponent/>'
-})
+export const 自定义插槽示例 = {
+  render: (args, { argTypes, updateArgs, updateArgsCallback }) => ({
+    components: { exampleComponent },
+    props: Object.keys(argTypes),
+    template: '<exampleComponent/>'
+  })
+}

apps/mobile/src/ui/empty/index.stories.js

@@ -23,4 +23,6 @@ const Template = (args, { argTypes }) => ({
   template: '<AppEmpty  v-bind="$props">一些提示文本</AppEmpty>'
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/ui/history-list/index.stories.js

@@ -38,27 +38,33 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {
-  list: ['标签1', '标签2', '标签3']
+export const 基础用法 = {
+  render: Template,
+
+  args: {
+    list: ['标签1', '标签2', '标签3']
+  }
 }
 
-export const 扩展 = Template.bind({})
-扩展.args = {
-  title: '自定义标题，限制展示条数',
-  max: 2,
-  list: [
-    {
-      label: '标签1',
-      value: '其他参数'
-    },
-    {
-      label: '标签2',
-      value: '其他参数'
-    },
-    {
-      label: '标签3',
-      value: '其他参数'
-    }
-  ]
+export const 扩展 = {
+  render: Template,
+
+  args: {
+    title: '自定义标题，限制展示条数',
+    max: 2,
+    list: [
+      {
+        label: '标签1',
+        value: '其他参数'
+      },
+      {
+        label: '标签2',
+        value: '其他参数'
+      },
+      {
+        label: '标签3',
+        value: '其他参数'
+      }
+    ]
+  }
 }

apps/mobile/src/ui/icon/index.stories.js

@@ -20,45 +20,51 @@ const Template = (args, { argTypes }) => ({
   template: '<AppIcon  v-bind="$props" />'
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {
-  name: 'search',
-  size: '20'
+export const 基础用法 = {
+  render: Template,
+
+  args: {
+    name: 'search',
+    size: '20'
+  }
 }
 
-export const 全部图标 = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AppIcon },
-  template: `
-    <div class="demo-icon-group">
-      <div :data-icon="item.font_class" class="demo-icon-item" v-for="(item, index) in getAppIcons" :key="index" @click="copy2clipboard(item)">
-        <AppIcon v-bind="$props" :name="item.font_class" />
+export const 全部图标 = {
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { AppIcon },
+    template: `
+      <div class="demo-icon-group">
+        <div :data-icon="item.font_class" class="demo-icon-item" v-for="(item, index) in getAppIcons" :key="index" @click="copy2clipboard(item)">
+          <AppIcon v-bind="$props" :name="item.font_class" />
+        </div>
       </div>
-    </div>
-  `,
-  computed: {
-    getAppIcons() {
-      return iconfonts.glyphs
-    }
-  },
-  methods: {
-    copy2clipboard: (item) => {
-      const text = `<AppIcon name="${item.font_class}" />`
-      try {
-        navigator.clipboard.writeText(text).then(
-          function () {
-            Toast('✅复制成功')
-          },
-          function (e) {
-            Toast('❌复制失败')
-          }
-        )
-      } catch (error) {
-        copyText(text)
+    `,
+    computed: {
+      getAppIcons() {
+        return iconfonts.glyphs
+      }
+    },
+    methods: {
+      copy2clipboard: (item) => {
+        const text = `<AppIcon name="${item.font_class}" />`
+        try {
+          navigator.clipboard.writeText(text).then(
+            function () {
+              Toast('✅复制成功')
+            },
+            function (e) {
+              Toast('❌复制失败')
+            }
+          )
+        } catch (error) {
+          copyText(text)
+        }
       }
     }
+  }),
+
+  args: {
+    size: '40px'
   }
-})
-全部图标.args = {
-  size: '40px'
 }

apps/mobile/src/ui/j-cell/index.stories.js

@@ -46,4 +46,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/ui/keep-label/index.stories.js

@@ -11,4 +11,6 @@ const Template = (args, { argTypes }) => ({
   template: '<KeepLabel  v-bind="$props" />'
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/ui/notice-bar/index.stories.js

@@ -27,4 +27,6 @@ const Template = (args, { argTypes }) => ({
   }
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/ui/project-cell/index.stories.js

@@ -39,4 +39,6 @@ const Template = (args, { argTypes }) => ({
   methods: {}
 })
 
-export const 基础用法 = Template.bind({})
+export const 基础用法 = {
+  render: Template
+}

apps/mobile/src/ui/sidebar-selector/index.stories.js

@@ -73,10 +73,13 @@ const Template = (args, { argTypes }) => ({
   `
 })
 
-export const 基础用法 = Template.bind({})
-基础用法.args = {
-  sourceList: templateSourceData,
-  beforeChildChange() {
-    return true
+export const 基础用法 = {
+  render: Template,
+
+  args: {
+    sourceList: templateSourceData,
+    beforeChildChange() {
+      return true
+    }
   }
 }

apps/mobile/src/utils/directive/index.stories.mdx

@@ -93,7 +93,7 @@ project: 'client_follow_detail' 项目关注详情页
 | status | 当前是否处于收藏状态 | Boolean | false |
 | id |  用于收藏的 id | String / Array | - |
 | getContainer |  指定挂载的节点 | String / Function | body / () => Element |
-| complete | 业务回调 type 是否完成业务  | Function | ({ type, message }, response) => null |
+| complete | 业务回调 type 是否完成业务  | Function | - |
 
 
 ### v-leave-info