fix: 下载组件

stories/UploadSingleFile.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-21 00:37:46
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-21 02:56:04
+ * @FilePath: \vue3\stories\UploadSingleFile.stories.ts
+ * @Description:
+ *
+ */
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ThUploadSingleFile from '../packages/upload-single-file/index.vue'
+import avatar from './assets/avatar.jpeg'
+
+const meta = {
+  title: '表单组件/UploadSingleFile',
+  component: ThUploadSingleFile,
+  tags: ['autodocs'],
+  args: {
+    modelValue: '',
+    autoUpload: false,
+    accept: '',
+    disabled: false,
+    text: false,
+    request: () => Promise.resolve({
+      id: 0,
+      url: avatar,
+    }),
+  },
+} satisfies Meta<typeof ThUploadSingleFile>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  name: '基本使用',
+}

stories/UploadTable.stories.ts

@@ -2,28 +2,79 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-07-18 12:23:37
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-18 16:11:39
+ * @LastEditTime: 2023-07-21 03:50:54
  * @FilePath: \vue3\stories\UploadTable.stories.ts
  * @Description:
  *
  */
 import type { Meta, StoryObj } from '@storybook/vue3'
 import ThUploadTable from '../packages/upload-table/index.vue'
+import avatar from './assets/avatar.jpeg'
+
+// 模拟2秒钟的接口请求
+function request(formData: FormData) {
+  let name = '佚名文件'
+  let url = avatar
+  const fileName = formData.get('name')
+  const file = formData.get('file')
+  if (typeof fileName === 'string') {
+    name = fileName
+  }
+  else if (typeof file !== 'string' && file) {
+    name = file.name
+    url = URL.createObjectURL(file)
+  }
+  return new Promise<FileVO>((resolve) => {
+    setTimeout(() => {
+      resolve({
+        id: Date.now(),
+        name,
+        url,
+        createdBy: 'user',
+      })
+    }, 2000)
+  })
+}
 
 const meta = {
   title: '表单组件/UploadTable',
-  component: ThUploadTable,
   tags: ['autodocs'],
   args: {
     accept: '.jpeg,.jpg,.png,.bmp',
+    addText: '新增一行',
+    allowDelete: true,
+    allowReplace: false,
+    disabled: false,
+    hideAdd: false,
     label1: '文件名称',
     label2: '图片上传',
     label3: '操作',
     fileList: [],
+    replacePopconfirm: '是否重新本行文件？',
+    deletePopconfirm: '是否删除本行？',
+    request,
   },
-  argTypes: {
-    label1: { control: 'select', options: ['small', 'medium', 'large'] },
-  },
+  render: args => ({
+    components: { ThUploadTable },
+    setup() {
+      return { args }
+    },
+    template: `<th-upload-table
+                  v-model:file-list="args.fileList"
+                  v-model:disabled="args.disabled"
+                  :accept="args.accept"
+                  :add-text="args.addText"
+                  :allow-delete="args.allowDelete"
+                  :allow-replace="args.allowReplace"
+                  :hide-add="args.hideAdd"
+                  :label1="args.label1"
+                  :label2="args.label2"
+                  :label3="args.label3"
+                  :replace-popconfirm="args.replacePopconfirm"
+                  :delete-popconfirm="args.deletePopconfirm"
+                  :request="args.request"
+               />`,
+  }),
 } satisfies Meta<typeof ThUploadTable>
 export default meta