feat: Add key and value fields to Silo Edit Form

dRAGon-Okinawa · Aug 26, 2024 · ca55f52 · ca55f52
1 parent 4789ad3
commit ca55f52
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 27 deletions.
diff --git a/frontend/src/locales/langs/en-us.ts b/frontend/src/locales/langs/en-us.ts
@@ -43,6 +43,7 @@ const local: App.I18n.Schema = {
     error: 'Error',
     help: 'Help',
     index: 'Index',
+    key: 'Key',
     keywordSearch: 'Please enter keyword',
     logout: 'Logout',
     logoutConfirm: 'Are you sure you want to log out?',
@@ -55,12 +56,14 @@ const local: App.I18n.Schema = {
     refresh: 'Refresh',
     reset: 'Reset',
     search: 'Search',
+    settings: 'Settings',
     switch: 'Switch',
     tip: 'Tip',
     trigger: 'Trigger',
     update: 'Update',
     updateSuccess: 'Update Success',
     userCenter: 'User Center',
+    value: 'Value',
     yesOrNo: {
       yes: 'Yes',
       no: 'No'

diff --git a/frontend/src/typings/app.d.ts b/frontend/src/typings/app.d.ts
@@ -289,6 +289,7 @@ declare namespace App {
         error: string;
         help: string;
         index: string;
+        key: string;
         keywordSearch: string;
         logout: string;
         logoutConfirm: string;
@@ -300,13 +301,15 @@ declare namespace App {
         pleaseCheckValue: string;
         refresh: string;
         reset: string;
+        settings: string;
         search: string;
         switch: string;
         tip: string;
         trigger: string;
         update: string;
         updateSuccess: string;
         userCenter: string;
+        value: string;
         yesOrNo: {
           yes: string;
           no: string;

diff --git a/frontend/src/typings/components.d.ts b/frontend/src/typings/components.d.ts
@@ -39,6 +39,9 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCollapase: typeof import('naive-ui')['NCollapase']
+    NCollapse: typeof import('naive-ui')['NCollapse']
+    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDescriptions: typeof import('naive-ui')['NDescriptions']
@@ -48,6 +51,7 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
@@ -64,6 +68,8 @@ declare module 'vue' {
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NPopover: typeof import('naive-ui')['NPopover']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']

diff --git a/frontend/src/views/infrastructure/silo-list/modules/silo-edit.vue b/frontend/src/views/infrastructure/silo-list/modules/silo-edit.vue
@@ -88,33 +88,56 @@ watch(visible, () => {
   <NDrawer v-model:show="visible" display-directive="show" :width="360">
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
       <NForm ref="formRef" :model="model" :rules="rules">
-        <NFormItem :label="$t('common.name')" path="name">
-          <NInput v-model:value="model.name" :placeholder="$t('common.name')" />
-        </NFormItem>
-        <NFormItem :label="$t('dRAGon.vectorStore')" path="vectorStore">
-          <NSelect
-            v-model:value="model.vectorStore"
-            :placeholder="$t('dRAGon.vectorStore')"
-            :options="translateOptions(vectorStoreOptions)"
-            clearable
-          />
-        </NFormItem>
-        <NFormItem :label="$t('dRAGon.embeddingModel')" path="embeddingModel">
-          <NSelect
-            v-model:value="model.embeddingModel"
-            :placeholder="$t('dRAGon.embeddingModel')"
-            :options="translateOptions(embeddingModelOptions)"
-            clearable
-          />
-        </NFormItem>
-        <NFormItem :label="$t('dRAGon.ingestorLoader')" path="ingestorLoader">
-          <NSelect
-            v-model:value="model.ingestorLoader"
-            :placeholder="$t('dRAGon.ingestorLoader')"
-            :options="translateOptions(ingestorLoaderOptions)"
-            clearable
-          />
-        </NFormItem>
+        <NDivider title-placement="left">
+          {{ $t('dRAGon.silo') }}
+        </NDivider>
+        <NInput v-model:value="model.name" :placeholder="$t('common.name')" />
+        <NDivider title-placement="left">
+          {{ $t('dRAGon.vectorStore') }}
+        </NDivider>
+        <NSelect
+          v-model:value="model.vectorStore"
+          :placeholder="$t('dRAGon.vectorStore')"
+          :options="translateOptions(vectorStoreOptions)"
+          clearable
+          class="mb-4"
+        />
+        <NCollapse>
+          <NCollapseItem :title="$t('common.settings')">
+            <NDynamicInput>
+              <template #create-button-default>
+                {{ $t('common.add') }}
+              </template>
+              <div class="flex">
+                <NFormItem ignore-path-change :show-label="false" class="flex-auto">
+                  <NInput :placeholder="$t('common.key')" @keydown.enter.prevent />
+                </NFormItem>
+                <div class="mt-1 w-14 flex-auto text-center align-middle">=</div>
+                <NFormItem ignore-path-change :show-label="false" class="flex-auto">
+                  <NInput :placeholder="$t('common.value')" @keydown.enter.prevent />
+                </NFormItem>
+              </div>
+            </NDynamicInput>
+          </NCollapseItem>
+        </NCollapse>
+        <NDivider title-placement="left">
+          {{ $t('dRAGon.embeddingModel') }}
+        </NDivider>
+        <NSelect
+          v-model:value="model.embeddingModel"
+          :placeholder="$t('dRAGon.embeddingModel')"
+          :options="translateOptions(embeddingModelOptions)"
+          clearable
+        />
+        <NDivider title-placement="left">
+          {{ $t('dRAGon.ingestorLoader') }}
+        </NDivider>
+        <NSelect
+          v-model:value="model.ingestorLoader"
+          :placeholder="$t('dRAGon.ingestorLoader')"
+          :options="translateOptions(ingestorLoaderOptions)"
+          clearable
+        />
       </NForm>
       <template #footer>
         <NSpace :size="16">