Feat: Initialize the data pipeline canvas. #9869 (#9870)

### What problem does this PR solve?
Feat: Initialize the data pipeline canvas. #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/data-flow/form/components/output.tsx

@@ -0,0 +1,35 @@
+import { t } from 'i18next';
+
+export type OutputType = {
+  title: string;
+  type?: string;
+};
+
+type OutputProps = {
+  list: Array<OutputType>;
+};
+
+export function transferOutputs(outputs: Record<string, any>) {
+  return Object.entries(outputs).map(([key, value]) => ({
+    title: key,
+    type: value?.type,
+  }));
+}
+
+export function Output({ list }: OutputProps) {
+  return (
+    <section className="space-y-2">
+      <div>{t('flow.output')}</div>
+      <ul>
+        {list.map((x, idx) => (
+          <li
+            key={idx}
+            className="bg-background-highlight text-accent-primary rounded-sm px-2 py-1"
+          >
+            {x.title}: <span className="text-text-secondary">{x.type}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}