@baishuyun/ai-design 1.0.0

package/src/stories/assets/tutorials.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177597)"><path fill="#B7F0EF" fill-rule="evenodd" d="M17 7.87059C17 6.48214 17.9812 5.28722 19.3431 5.01709L29.5249 2.99755C31.3238 2.64076 33 4.01717 33 5.85105V22.1344C33 23.5229 32.0188 24.7178 30.6569 24.9879L20.4751 27.0074C18.6762 27.3642 17 25.9878 17 24.1539L17 7.87059Z" clip-rule="evenodd" opacity=".7"/><path fill="#87E6E5" fill-rule="evenodd" d="M1 5.85245C1 4.01857 2.67623 2.64215 4.47507 2.99895L14.6569 5.01848C16.0188 5.28861 17 6.48354 17 7.87198V24.1553C17 25.9892 15.3238 27.3656 13.5249 27.0088L3.34311 24.9893C1.98119 24.7192 1 23.5242 1 22.1358V5.85245Z" clip-rule="evenodd"/><path fill="#61C1FD" fill-rule="evenodd" d="M15.543 5.71289C15.543 5.71289 16.8157 5.96289 17.4002 6.57653C17.9847 7.19016 18.4521 9.03107 18.4521 9.03107C18.4521 9.03107 18.4521 25.1106 18.4521 26.9629C18.4521 28.8152 19.3775 31.4174 19.3775 31.4174L17.4002 28.8947L16.2575 31.4174C16.2575 31.4174 15.543 29.0765 15.543 27.122C15.543 25.1674 15.543 5.71289 15.543 5.71289Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_10031_177597"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>

package/src/stories/assets/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#ED1D24" d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z"/><path fill="#fff" d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z"/></svg>

package/src/stories/fields-design-info-table.stories.tsx

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IFieldDesignInfo } from '@baishuyun/types';
+import { FieldsDesignInfoTable } from '../components/fields-design-info-table';
+
+const meta: Meta<typeof FieldsDesignInfoTable> = {
+  title: 'Example/Chat/FieldsDesignInfoTable',
+  component: FieldsDesignInfoTable,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 420 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof FieldsDesignInfoTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const basicFields: IFieldDesignInfo[] = [
+  {
+    fieldName: '订单编号',
+    type: '流水号',
+    required: true,
+    description: '唯一标识订单的编号',
+    relationDesc: '',
+  },
+  {
+    fieldName: '下单日期',
+    type: '日期时间',
+    required: true,
+    description: '选择订单的下单日期时间',
+    relationDesc: '',
+  },
+  {
+    fieldName: '客户名称',
+    type: '文本',
+    required: true,
+    description: '输入客户的名称',
+    relationDesc: '',
+  },
+  {
+    fieldName: '联系电话',
+    type: '文本',
+    required: true,
+    description: '输入客户的联系电话',
+    relationDesc: '',
+  },
+  {
+    fieldName: '收货地址',
+    type: '地址',
+    required: true,
+    description: '选择或输入收货地址',
+    relationDesc: '',
+  },
+];
+
+const fieldsWithSubform: IFieldDesignInfo[] = [
+  ...basicFields,
+  {
+    fieldName: '商品明细',
+    type: '子表单',
+    required: true,
+    description: '填写订单商品明细',
+    relationDesc: '',
+    isSubForm: true,
+  },
+  {
+    fieldName: '商品名称',
+    type: '文本',
+    required: true,
+    description: '输入商品的名称',
+    relationDesc: '',
+    isFieldInSubForm: true,
+    parentFormName: '商品明细',
+  },
+  {
+    fieldName: '商品单价',
+    type: '数字',
+    required: true,
+    description: '输入商品的单价',
+    relationDesc: '',
+    isFieldInSubForm: true,
+    parentFormName: '商品明细',
+  },
+  {
+    fieldName: '购买数量',
+    type: '数字',
+    required: true,
+    description: '输入商品的购买数量',
+    relationDesc: '',
+    isFieldInSubForm: true,
+    parentFormName: '商品明细',
+  },
+  {
+    fieldName: '商品金额',
+    type: '数字',
+    required: true,
+    description: '自动计算商品金额（单价*数量）红红火火恍恍惚惚哈哈哈哈哈哈哈',
+    relationDesc: '',
+    isFieldInSubForm: true,
+    parentFormName: '商品明细',
+  },
+];
+
+/** 基础表格 - 无子表单 */
+export const Basic: Story = {
+  args: {
+    fields: basicFields,
+  },
+};
+
+/** 包含子表单 - 可展开/收起 */
+export const WithSubForm: Story = {
+  args: {
+    fields: fieldsWithSubform,
+  },
+};
+
+/** 空数据 */
+export const Empty: Story = {
+  args: {
+    fields: [],
+  },
+};
+
+/** 多个子表单 */
+export const MultipleSubForms: Story = {
+  args: {
+    fields: [
+      {
+        fieldName: '项目名称',
+        type: '文本',
+        required: true,
+        description: '输入项目名称',
+        relationDesc: '',
+      },
+      {
+        fieldName: '团队成员',
+        type: '子表单',
+        required: true,
+        description: '添加团队成员信息',
+        relationDesc: '',
+        isSubForm: true,
+      },
+      {
+        fieldName: '姓名',
+        type: '文本',
+        required: true,
+        description: '输入成员姓名',
+        relationDesc: '',
+        isFieldInSubForm: true,
+        parentFormName: '团队成员',
+      },
+      {
+        fieldName: '职位',
+        type: '文本',
+        required: false,
+        description: '输入成员职位',
+        relationDesc: '',
+        isFieldInSubForm: true,
+        parentFormName: '团队成员',
+      },
+      {
+        fieldName: '备注',
+        type: '文本',
+        required: false,
+        description: '输入备注信息',
+        relationDesc: '',
+      },
+      {
+        fieldName: '里程碑',
+        type: '子表单',
+        required: false,
+        description: '添加项目里程碑',
+        relationDesc: '',
+        isSubForm: true,
+      },
+      {
+        fieldName: '阶段名称',
+        type: '文本',
+        required: true,
+        description: '输入里程碑阶段名称',
+        relationDesc: '',
+        isFieldInSubForm: true,
+        parentFormName: '里程碑',
+      },
+      {
+        fieldName: '截止日期',
+        type: '日期时间',
+        required: true,
+        description: '选择里程碑截止日期',
+        relationDesc: '',
+        isFieldInSubForm: true,
+        parentFormName: '里程碑',
+      },
+    ],
+  },
+};

package/src/stories/fields-generating.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FieldsGeneratingIndicator } from '../components/fields-generating-indicator';
+
+const meta = {
+  title: 'Example/Chat/FieldsGeneratingIndicator',
+  component: FieldsGeneratingIndicator,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof FieldsGeneratingIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {},
+};
+
+export const CustomText: Story = {
+  args: {
+    children: '数据查询中',
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    children: '已生成，请在对话中确定',
+    loading: false,
+  },
+};
+
+export const ShortText: Story = {
+  args: {
+    children: '加载中',
+  },
+};

package/src/stories/fields-previewer.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FieldsPreviewer } from '../components/fields-previewer';
+
+const meta = {
+  title: 'Example/Chat/FieldsPreviewer',
+  component: FieldsPreviewer,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof FieldsPreviewer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    title: '编辑表单',
+    onSave: () => alert('保存点击'),
+    onCancel: () => alert('取消点击'),
+  },
+};
+
+export const WithSideSpace: Story = {
+  args: {
+    title: '编辑表单',
+    rightSpaceWidth: 375,
+    onSave: () => alert('保存点击'),
+    onCancel: () => alert('取消点击'),
+  },
+};
+
+export const streaming: Story = {
+  args: {
+    title: '编辑表单',
+    rightSpaceWidth: 375,
+    streaming: true,
+    active: true,
+    onSave: () => alert('保存点击'),
+    onCancel: () => alert('取消点击'),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    title: '编辑表单',
+    empty: true,
+    streaming: true,
+    onSave: () => alert('保存点击'),
+    onCancel: () => alert('取消点击'),
+  },
+};
+
+export const Fullscreen: Story = {
+  args: {
+    title: '编辑表单',
+    fullscreen: true,
+    streaming: true,
+    onSave: () => alert('保存点击'),
+    onCancel: () => alert('取消点击'),
+    empty: true,
+  },
+};
+
+export const DataVariant: Story = {
+  args: {
+    title: '数据预览',
+    onSave: () => alert('保存点击'),
+    active: false,
+    variant: 'data-previewer',
+    rightSpaceWidth: 375,
+  },
+};

package/src/style.css

@@ -0,0 +1,223 @@
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --tw-space-y-reverse: 0;
+  --tw-border-style: solid;
+  --tw-leading: initial;
+  --tw-font-weight: initial;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-color: initial;
+  --tw-shadow-alpha: 100%;
+  --tw-inset-shadow: 0 0 #0000;
+  --tw-inset-shadow-color: initial;
+  --tw-inset-shadow-alpha: 100%;
+  --tw-ring-color: initial;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-inset-ring-color: initial;
+  --tw-inset-ring-shadow: 0 0 #0000;
+  --tw-ring-inset: initial;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-outline-style: solid;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-translate-z: 0;
+  --tw-animation-delay: 0s;
+  --tw-animation-direction: normal;
+  --tw-animation-duration: initial;
+  --tw-animation-fill-mode: none;
+  --tw-animation-iteration-count: 1;
+  --tw-enter-blur: 0;
+  --tw-enter-opacity: 1;
+  --tw-enter-rotate: 0;
+  --tw-enter-scale: 1;
+  --tw-enter-translate-x: 0;
+  --tw-enter-translate-y: 0;
+  --tw-exit-blur: 0;
+  --tw-exit-opacity: 1;
+  --tw-exit-rotate: 0;
+  --tw-exit-scale: 1;
+  --tw-exit-translate-x: 0;
+  --tw-exit-translate-y: 0;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: #eff0f6;
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    font-size: 14px;
+  }
+}
+
+@utility rounded-inherit {
+  border-radius: inherit;
+}
+
+@layer components {
+  .gradient-border {
+    @apply relative;
+  }
+  .gradient-border::before {
+    content: '';
+    @apply absolute inset-0 rounded-inherit p-[1px] pointer-events-none;
+    background: linear-gradient(
+      90deg,
+      rgb(132, 180, 255) 0%,
+      rgb(2, 101, 255) 50%,
+      rgb(177, 250, 255) 100%
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+}
+
+.prose {
+  --tw-prose-body: #121111;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #b5b5b5;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}

package/src/types.ts

@@ -0,0 +1,8 @@
+export interface FormIconOption {
+  id: string;
+  code: string;
+  label: string;
+  value: number;
+}
+
+export type LegacySlotRenderer = (container: HTMLElement, props: Record<string, any>) => () => void;

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["@baishuyun/typescript-config/vite.json"],
+  "include": ["src"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "rootDir": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,42 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import path from "path";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [
+    tailwindcss() as any,
+    react(),
+    dts(),
+  ],
+  resolve: {
+    preserveSymlinks: false,
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    sourcemap: true,
+    target: "es2018",
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "bs-ai-design",
+      formats: ["es", "umd"],
+    },
+    cssCodeSplit: true,
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});