feat: Add a note node to the agent canvas #2767 (#2768)

### What problem does this PR solve?

feat: Add a note node to the agent canvas #2767

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/flow/form/qweather-form/index.tsx

@@ -0,0 +1,87 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useCallback, useMemo } from 'react';
+import {
+  QWeatherLangOptions,
+  QWeatherTimePeriodOptions,
+  QWeatherTypeOptions,
+  QWeatherUserTypeOptions,
+} from '../../constant';
+import { IOperatorForm } from '../../interface';
+
+const QWeatherForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const qWeatherLangOptions = useMemo(() => {
+    return QWeatherLangOptions.map((x) => ({
+      value: x,
+      label: t(`qWeatherLangOptions.${x}`),
+    }));
+  }, [t]);
+
+  const qWeatherTypeOptions = useMemo(() => {
+    return QWeatherTypeOptions.map((x) => ({
+      value: x,
+      label: t(`qWeatherTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const qWeatherUserTypeOptions = useMemo(() => {
+    return QWeatherUserTypeOptions.map((x) => ({
+      value: x,
+      label: t(`qWeatherUserTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const getQWeatherTimePeriodOptions = useCallback(
+    (userType: string) => {
+      let options = QWeatherTimePeriodOptions;
+      if (userType === 'free') {
+        options = options.slice(0, 3);
+      }
+      return options.map((x) => ({
+        value: x,
+        label: t(`qWeatherTimePeriodOptions.${x}`),
+      }));
+    },
+    [t],
+  );
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item label={t('webApiKey')} name={'web_apikey'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('lang')} name={'lang'}>
+        <Select options={qWeatherLangOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('type')} name={'type'}>
+        <Select options={qWeatherTypeOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('userType')} name={'user_type'}>
+        <Select options={qWeatherUserTypeOptions}></Select>
+      </Form.Item>
+      <Form.Item noStyle dependencies={['type', 'user_type']}>
+        {({ getFieldValue }) =>
+          getFieldValue('type') === 'weather' && (
+            <Form.Item label={t('timePeriod')} name={'time_period'}>
+              <Select
+                options={getQWeatherTimePeriodOptions(
+                  getFieldValue('user_type'),
+                )}
+              ></Select>
+            </Form.Item>
+          )
+        }
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default QWeatherForm;