fix: kafka

src/components/MicroComponents/index.tsx

@@ -155,6 +155,10 @@ export const InputTsx = defineComponent({
       type: String,
       required: true,
       default: ''
+    },
+    styles: {
+      type: Object,
+      default: () => {}
     }
   },
   emits: ['update:value', 'submit'],
@@ -175,7 +179,7 @@ export const InputTsx = defineComponent({
         {
 
           props.mode === 'normal'
-            ? <Input style={{ minWidth: '170px' }} value={props.value} placeholder={props.placeholder} onChange={(e) => onInput(e.target.value!)} />
+            ? <Input style={{ minWidth: '170px', ...props.styles }} value={props.value} placeholder={props.placeholder} onChange={(e) => onInput(e.target.value!)} />
             : <>
               <Space>
                 {

src/layout/components/Sidebar/index.vue

@@ -45,7 +45,7 @@
     v-model:collapsed="collapsed"
   >
     <div class="logo" >
-      <img :src="logoPng" alt="">
+      <img :src="logoPng" alt="" v-if="logoPng">
     </div>
     <a-menu
       v-model:selectedKeys="selectedKeys"

src/pages/cvs/edge/forward.vue

@@ -3,7 +3,8 @@
   <template #extra >
     <a-tooltip>
       <template #title v-if="forwardList.length === 2" >最多拥有两个转发中的事件</template>
-      <a-button type="primary" @click="openRealViewDialog('add')" :disabled="forwardList.length === 2" >新增</a-button>
+      <!-- :disabled="forwardList.length === 2" -->
+      <a-button type="primary" @click="openRealViewDialog('add')"  >新增</a-button>
   </a-tooltip>
   </template>
 </a-card>
@@ -26,11 +27,28 @@
     <a-descriptions :column="2" :title="'id: ' + item.id">
       <a-descriptions-item label="创建时间">{{dayjs(item.createAt).format('YYYY/MM/DD HH:MM:ss')}}</a-descriptions-item>
       <a-descriptions-item label="事件类型">{{item.forwardType}}</a-descriptions-item>
-      <a-descriptions-item label="Live">{{item.forwardConfig.defaultTimeout}}</a-descriptions-item>
-      <a-descriptions-item label="端点地址">{{item.forwardConfig.endpointUrl}}</a-descriptions-item>
-      <a-descriptions-item label="请求类型">{{item.forwardConfig.requestMethod}}</a-descriptions-item>
-      <a-descriptions-item  label="请求头参数" :span="3">
-        <a-table :pagination="false" :columns="[ { title: 'key', dataIndex: 'key' }, { title: 'value', dataIndex: 'value' }]" :data-source="Object.keys(item.forwardConfig.requestHeaders).map(key => ({key: key, value: item.forwardConfig.requestHeaders[key]})) " size="small" />
+      <template  v-if="item.forwardType === 'KAFKA'">
+        <a-descriptions-item label="主题" >{{item.forwardConfig.topic}}</a-descriptions-item>
+        <a-descriptions-item label="地址">{{item.forwardConfig.bootstrapServers}}</a-descriptions-item>
+        <a-descriptions-item label="acks">{{item.forwardConfig.acks}}</a-descriptions-item>
+        <a-descriptions-item label="retrie">{{item.forwardConfig.retrie}}</a-descriptions-item>
+        <a-descriptions-item label="batchSize">{{item.forwardConfig.batchSize}}</a-descriptions-item>
+        <a-descriptions-item label="linger">{{item.forwardConfig.linger}}</a-descriptions-item>
+        <a-descriptions-item label="keySerializer">{{item.forwardConfig.keySerializer}}</a-descriptions-item>
+      </template>
+      <template v-if="item.forwardType === 'HTTP'" >
+        <a-descriptions-item label="Live" >{{item.forwardConfig.defaultTimeout}}</a-descriptions-item>
+        <a-descriptions-item label="端点地址" >{{item.forwardConfig.endpointUrl}}</a-descriptions-item>
+        <a-descriptions-item label="请求类型"  >{{item.forwardConfig.requestMethod}}</a-descriptions-item>
+      </template>
+
+      <a-descriptions-item  label="请求头参数" :span="3" v-if="item.forwardConfig[item.forwardType === 'HTTP' ? 'requestHeaders' : 'otherProperties']">
+        <a-table
+          :pagination="false"
+          :columns="[ { title: 'key', dataIndex: 'key' }, { title: 'value', dataIndex: 'value' }]"
+          :data-source="Object.keys(item.forwardConfig[item.forwardType === 'HTTP' ? 'requestHeaders' : 'otherProperties']).map(key => ({key: key, value: item.forwardConfig.requestHeaders[key]})) "
+          size="small"
+        />
       </a-descriptions-item>
     </a-descriptions>
   </a-card>
@@ -60,35 +78,66 @@
             <a-radio-button value="HTTP">HTTP</a-radio-button>
             <a-radio-button value="KAFKA">KAFKA</a-radio-button>
           </a-radio-group>
+          </a-form-item>
+        <span v-if="forwardState.forwardConfig.forwardType === 'HTTP'" >
+          <a-form-item label="端点地址" v-bind="validateInfos.endpointUrl"  >
+            <InputTsx allowClear placeholder="请输入端点地址" v-model:value="forwardState.forwardConfig.endpointUrl" />
+          </a-form-item>
+          <a-form-item label="端点地址"  >
+            <a-radio-group v-model:value="forwardState.forwardConfig.requestMethod" button-style="solid">
+              <a-radio-button value="GET">GET</a-radio-button>
+              <a-radio-button value="POST">POST</a-radio-button>
+            </a-radio-group>
+          </a-form-item>
+          <a-form-item label="默认时间"   >
+            <a-input-number id="inputNumber" v-model:value="forwardState.forwardConfig.defaultTimeout" :min="1" />
+          </a-form-item>
+        </span>
+        <span v-else >
+          <a-form-item label="主题" v-bind="validateInfos.topic" >
+          <a-input allowClear placeholder="请填写主题" v-model:value="forwardState.forwardConfig.topic" ></a-input>
         </a-form-item>
-        <a-form-item label="端点地址" v-bind="validateInfos.endpointUrl"  >
-          <InputTsx allowClear placeholder="请输入端点地址" v-model:value="forwardState.forwardConfig.endpointUrl" />
+        <a-form-item label="地址" v-bind="validateInfos.topic" >
+          <a-input allowClear placeholder="请填写地址" v-model:value="forwardState.forwardConfig.bootstrapServers" ></a-input>
         </a-form-item>
-        <a-form-item label="端点地址"  >
-          <a-radio-group v-model:value="forwardState.forwardConfig.requestMethod" button-style="solid">
-            <a-radio-button value="GET">GET</a-radio-button>
-            <a-radio-button value="POST">POST</a-radio-button>
-          </a-radio-group>
+        <a-form-item label="acks" v-bind="validateInfos.acks" >
+          <a-input allowClear placeholder="请填写acks" v-model:value="forwardState.forwardConfig.acks"  disabled ></a-input>
+        </a-form-item>
+        <a-form-item label="重试次数" v-bind="validateInfos.retries" >
+          <a-input allowClear placeholder="请填写重试次数" v-model:value="forwardState.forwardConfig.retries"></a-input>
+        </a-form-item>
+        <a-form-item label="batchSize" v-bind="validateInfos.batchSize" >
+          <a-input allowClear placeholder="请填写batchSize" v-model:value="forwardState.forwardConfig.batchSize"></a-input>
+        </a-form-item>
+        <a-form-item label="linger" v-bind="validateInfos.linger" >
+          <a-input allowClear placeholder="请填写linger" v-model:value="forwardState.forwardConfig.linger"></a-input>
         </a-form-item>
-        <a-form-item label="默认时间"   >
-          <a-input-number id="inputNumber" v-model:value="forwardState.forwardConfig.defaultTimeout" :min="1" />
+        <a-form-item label="bufferMemory" v-bind="validateInfos.bufferMemory" >
+          <a-input allowClear placeholder="请填写bufferMemory" v-model:value="forwardState.forwardConfig.bufferMemory"></a-input>
         </a-form-item>
-        <a-form-item label="请求头参数"   >
-          <a-input-group style="margin-top: 10px;margin-bottom: 20px;" size="large" v-for="(item, index) in forwardState.forwardConfig.requestHeaders" :key="index">
-            <a-row :gutter="8">
-              <a-col :span="5">
-                <a-input allowClear style="height: 30px;" v-model:value="item.key" placeholder="key" />
-              </a-col>
-              <a-col :span="8">
-                <a-input allowClear style="height: 30px;"  v-model:value="item.value" placeholder="value" />
-              </a-col>
-              <a-col>
-                <a-button type="link" danger @click="forwardState.forwardConfig.requestHeaders.splice(index, 1)" >删除</a-button>
-              </a-col>
-            </a-row>
-          </a-input-group  >
-          <a-button  @click="addRequestHeaders" type="primary" >添加参数</a-button>
+        <a-form-item label="keySerializer" v-bind="validateInfos.keySerializer" >
+          <a-input allowClear placeholder="请填写keySerializer" v-model:value="forwardState.forwardConfig.keySerializer"></a-input>
         </a-form-item>
+        <a-form-item label="valueSerializer" v-bind="validateInfos.valueSerializer" >
+          <a-input allowClear placeholder="请填写valueSerializer" v-model:value="forwardState.forwardConfig.valueSerializer"></a-input>
+        </a-form-item>
+        </span>
+        <a-form-item :label="forwardState.forwardType === 'HTTP' ? '请求头参数': '其他参数'"   >
+            <a-input-group style="margin-top: 10px;margin-bottom: 20px;" size="large" v-for="(item, index) in forwardState.forwardConfig.requestHeaders" :key="index">
+              <a-row :gutter="8">
+                <a-col :span="5">
+                  <a-input allowClear style="height: 30px;" v-model:value="item.key" placeholder="key" />
+                </a-col>
+                <a-col :span="8">
+                  <a-input allowClear style="height: 30px;"  v-model:value="item.value" placeholder="value" />
+                </a-col>
+                <a-col>
+                  <a-button type="link" danger @click="forwardState.forwardConfig.requestHeaders.splice(index, 1)" >删除</a-button>
+                </a-col>
+              </a-row>
+            </a-input-group  >
+            <a-button  @click="addRequestHeaders" type="primary" >添加参数</a-button>
+          </a-form-item>
       </a-card>
     </a-form>
 
@@ -120,7 +169,17 @@ const forwardState = reactive({
     endpointUrl: '',
     requestMethod: 'GET',
     requestHeaders: [],
-    defaultTimeout: 10
+    defaultTimeout: 10,
+    topic: '',
+    bootstrapServers: '',
+    acks: '',
+    retries: '',
+    batchSize: '',
+    linger: '',
+    bufferMemory: '',
+    keySerializer: '',
+    valueSerializer: '',
+    otherProperties: ''
   }
 })
 
@@ -146,8 +205,6 @@ const getAiBoxForward = async () => {
 
 const openRealViewDialog = (type: 'add' | 'update', record = {}) => {
   resetFields(record)
-  console.log('record:', record)
-
   opraState.value = type
   visible.value = true
 }
@@ -160,6 +217,10 @@ const ok = () => {
     })
 
     forwardState.forwardConfig.requestHeaders = requestHeaders
+
+    if (forwardState.forwardConfig.forwardType === 'KAFKA') {
+      forwardState.forwardConfig.otherProperties = requestHeaders
+    }
     opraState.value === 'add' ? await AiboxController.addForward(forwardState as any) : await AiboxController.updateForward(forwardState as any)
     visible.value = false
     getAiBoxForward()

src/pages/cvs/edge/manage.vue

@@ -9,16 +9,17 @@
   >
   <template #search >
     <a-space>
-      <SelectTsx
-        v-model:value="serviceParams.devId"
+      <InputTsx :styles="{minWidth: '120px'}"  v-model:value="serviceParams.devId" placeholder="请输入设备ID" />
+      <!-- <SelectTsx
         :request="async () => (await SpaceController.devicePage({page: 1, pageSize: 10, deviceName: ''})).data"
         :keys="{
           name: 'deviceName',
           value: 'deviceId',
           key: 'deviceId'
         }"
-      />
+      /> -->
       <SelectTsx
+        style="width: 100px"
         v-model:value="serviceParams.eventType"
         :request="async () => await AiboxController.eventType"
         :keys="{
@@ -73,7 +74,7 @@
 </template>
 <script lang='ts' setup >
 import { AiboxController, SpaceController } from '@/controller'
-import { SelectTsx } from '@/components/MicroComponents'
+import { SelectTsx, InputTsx } from '@/components/MicroComponents'
 import dayjs from 'dayjs'
 import { ref, watch } from 'vue'