From c82c9c3be6ca672148144fa7e5fd0ba06ca4e946 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Thu, 1 May 2025 11:53:03 +0800
Subject: [PATCH 1/7] refactor: split component

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 src/components/tool-bar.vue                   |  10 +-
 src/lang/enUS.ts                              |   1 +
 src/lang/zhCN.ts                              |   1 +
 .../dynamo-editor/components/code-editor.vue  |   0
 .../dynamo-editor/components/create-item.vue  |   0
 .../dynamo-editor/components/ui-editor.vue    | 368 ++++++++++++++++++
 src/views/editor/dynamo-editor/index.vue      | 365 +----------------
 7 files changed, 382 insertions(+), 363 deletions(-)
 create mode 100644 src/views/editor/dynamo-editor/components/code-editor.vue
 create mode 100644 src/views/editor/dynamo-editor/components/create-item.vue
 create mode 100644 src/views/editor/dynamo-editor/components/ui-editor.vue

diff --git a/src/components/tool-bar.vue b/src/components/tool-bar.vue
index 710a8f36..f37acccb 100644
--- a/src/components/tool-bar.vue
+++ b/src/components/tool-bar.vue
@@ -77,6 +77,14 @@
         </template>
         {{ $t('editor.dynamo.sqlEditor') }}
       </n-button>
+      <n-button quaternary>
+        <template #icon>
+          <n-icon>
+            <Add />
+          </n-icon>
+        </template>
+        {{ $t('editor.dynamo.createItem') }}
+      </n-button>
     </n-button-group>
     <n-tabs
       v-if="props.type === 'MANAGE'"
@@ -95,7 +103,7 @@
 </template>
 
 <script setup lang="ts">
-import { AiStatus, Search, Code, Template } from '@vicons/carbon';
+import { Add, AiStatus, Search, Code, Template } from '@vicons/carbon';
 import { storeToRefs } from 'pinia';
 import { useClusterManageStore, useConnectionStore, useTabStore } from '../store';
 import { useLang } from '../lang';
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 337916b1..2f20518d 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -210,6 +210,7 @@ export const enUS = {
       indexIsRequired: 'Table/Index is required',
       atLeastRequired: 'Partition key or at least 1 filter is required',
       scanWarning: 'Request without partitionKey will scan the table',
+      createItem: 'Create Item',
     },
   },
   file: {
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index af263c85..d64ee336 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -210,6 +210,7 @@ export const zhCN = {
       indexIsRequired: '表/索引 是必需的',
       atLeastRequired: 'Partition Key 或至少 1 个过滤器是必需的',
       scanWarning: '未提供 Partition Key，执行 Scan 操作可能会导致性能问题',
+      createItem: '添加数据',
     },
   },
   file: {
diff --git a/src/views/editor/dynamo-editor/components/code-editor.vue b/src/views/editor/dynamo-editor/components/code-editor.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/editor/dynamo-editor/components/create-item.vue b/src/views/editor/dynamo-editor/components/create-item.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/editor/dynamo-editor/components/ui-editor.vue b/src/views/editor/dynamo-editor/components/ui-editor.vue
new file mode 100644
index 00000000..96e33c9f
--- /dev/null
+++ b/src/views/editor/dynamo-editor/components/ui-editor.vue
@@ -0,0 +1,368 @@
+<template>
+  <n-card>
+    <n-form
+      ref="dynamoQueryFormRef"
+      :model="dynamoQueryForm"
+      :rules="dynamoQueryFormRules"
+      label-placement="left"
+      require-mark-placement="right-hanging"
+      label-width="auto"
+    >
+      <!-- First row with partition and sort key -->
+      <n-grid :cols="24" :x-gap="12">
+        <n-grid-item span="12">
+          <n-form-item :label="$t('editor.dynamo.tableOrIndex')" path="index">
+            <n-select
+              :placeholder="$t('editor.dynamo.selectTableOrIndex')"
+              v-model:value="dynamoQueryForm.index"
+              remote
+              :loading="loadingRef.index"
+              @update:show="handleIndexOpen"
+              @update:value="handleUpdate"
+              :options="indicesOrTableOptions"
+            />
+          </n-form-item>
+        </n-grid-item>
+
+        <n-grid-item span="12">
+          <n-form-item
+            v-if="selectedIndexOrTable?.partitionKeyName"
+            :label="getLabel('PARTITION_KEY')"
+            path="partitionKey"
+            :input-props="inputProps"
+          >
+            <n-input
+              v-model:value="dynamoQueryForm.partitionKey"
+              :placeholder="$t('editor.dynamo.enterPartitionKey')"
+              :input-props="inputProps"
+            />
+          </n-form-item>
+        </n-grid-item>
+
+        <n-grid-item span="12">
+          <n-form-item
+            v-if="selectedIndexOrTable?.sortKeyName"
+            :label="getLabel('SORT_KEY')"
+            path="sortKey"
+            :input-props="inputProps"
+          >
+            <n-input
+              v-model:value="dynamoQueryForm.sortKey"
+              :placeholder="$t('editor.dynamo.enterSortKey')"
+            />
+          </n-form-item>
+        </n-grid-item>
+      </n-grid>
+
+      <!-- Dynamic additional form items -->
+      <n-card :title="$t('editor.dynamo.filterTitle')">
+        <template #header-extra>
+          <n-icon size="26" @click="addFilterItem" style="cursor: pointer">
+            <Add />
+          </n-icon>
+        </template>
+        <n-grid
+          v-for="(item, index) in dynamoQueryForm.formFilterItems"
+          :key="index"
+          :cols="24"
+          :x-gap="12"
+        >
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`formFilterItems[${index}].key`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.filterKeyRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.key"
+                :placeholder="$t('editor.dynamo.inputAttrName')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="4">
+            <n-form-item
+              :path="`formFilterItems[${index}].operator`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.filterOperatorRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-select
+                v-model:value="item.operator"
+                :placeholder="$t('editor.dynamo.inputOperator')"
+                :options="filterConditions"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`formFilterItems[${index}].value`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.filterValueRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.value"
+                :placeholder="$t('editor.dynamo.inputAttrValue')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="2">
+            <n-button quaternary circle @click="removeFilterItem(index)">
+              <template #icon>
+                <n-icon>
+                  <Delete />
+                </n-icon>
+              </template>
+            </n-button>
+          </n-grid-item>
+        </n-grid>
+      </n-card>
+    </n-form>
+    <template #footer>
+      <div class="card-footer">
+        <n-button type="warning" tertiary @click="handleReset">
+          {{ $t('dialogOps.reset') }}
+        </n-button>
+        <n-button type="primary" @click="handleSubmit" :disabled="!validationPassed">
+          {{ $t('dialogOps.execute') }}
+        </n-button>
+      </div>
+    </template>
+  </n-card>
+  <n-card :title="$t('editor.dynamo.resultTitle')" v-if="queryResult.data">
+    <n-data-table :columns="queryResult.columns" :data="queryResult.data" />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { Add, Delete } from '@vicons/carbon';
+import { isEmpty } from 'lodash';
+import { FormItemRule, FormRules, FormValidationError } from 'naive-ui';
+import {
+  Connection,
+  DynamoDBConnection,
+  DynamoIndexOrTableOption,
+  useConnectionStore,
+  useTabStore,
+} from '../../../../store';
+import { inputProps } from '../../../../common';
+import { useLang } from '../../../../lang';
+
+const connectionStore = useConnectionStore();
+
+const { fetchIndices, queryTable } = connectionStore;
+const { getDynamoIndexOrTableOption } = storeToRefs(connectionStore);
+
+const tabStore = useTabStore();
+const { activeConnection } = storeToRefs(tabStore);
+
+const dynamoQueryFormRef = ref();
+const filterConditions = ref([
+  { label: '=', value: '=' },
+  { label: '!=', value: '!=' },
+  { label: '<=', value: '<=' },
+  { label: '<', value: '<' },
+  { label: '>=', value: '>=' },
+  { label: '>', value: '>' },
+  { label: 'Between', value: 'between' },
+  { label: 'Exists', value: 'attribute_exists' },
+  { label: 'Not exists', value: 'attribute_not_exists' },
+  { label: 'Contain', value: 'contains' },
+  { label: 'Not contain', value: 'not contain' },
+  { label: 'Begins with', value: 'begins_with' },
+]);
+
+const loadingRef = ref({ index: false });
+
+const message = useMessage();
+const lang = useLang();
+
+const dynamoQueryForm = ref<{
+  index: string;
+  partitionKey: string;
+  sortKey: string;
+  formFilterItems: Array<{ key: string; value: string; operator: string }>;
+}>({ index: '', partitionKey: '', sortKey: '', formFilterItems: [] });
+
+const dynamoQueryFormRules = reactive<FormRules>({
+  index: [
+    {
+      required: true,
+      renderMessage: () => lang.t('editor.dynamo.indexIsRequired'),
+      trigger: ['input', 'blur'],
+    },
+  ],
+  partitionKey: [
+    {
+      validator: (_: FormItemRule, value) =>
+        !(isEmpty(dynamoQueryForm.value.formFilterItems) && !value),
+      renderMessage: () => lang.t('editor.dynamo.atLeastRequired'),
+      level: 'error',
+      trigger: ['input', 'blur'],
+    },
+    {
+      validator: (_: FormItemRule, value) =>
+        !(!isEmpty(dynamoQueryForm.value.formFilterItems) && !value),
+      renderMessage: () => lang.t('editor.dynamo.scanWarning'),
+      level: 'warning',
+      trigger: ['input', 'blur'],
+    },
+  ],
+});
+
+const queryResult = ref<{
+  columns: Array<{ title: string; key: string }>;
+  data: Array<Record<string, unknown>> | undefined;
+}>({
+  columns: [],
+  data: undefined,
+});
+
+const addFilterItem = () => {
+  dynamoQueryForm.value.formFilterItems.push({ key: '', value: '', operator: '' });
+};
+
+const removeFilterItem = (index: number) => {
+  dynamoQueryForm.value.formFilterItems.splice(index, 1);
+};
+
+const indicesOrTableOptions = ref<Array<DynamoIndexOrTableOption>>([]);
+
+const selectedIndexOrTable = ref<DynamoIndexOrTableOption | undefined>(undefined);
+
+const handleUpdate = (value: string) => {
+  const indices = getDynamoIndexOrTableOption.value(activeConnection.value as DynamoDBConnection);
+  selectedIndexOrTable.value = indices.find(item => item.value === value);
+  dynamoQueryForm.value.index = selectedIndexOrTable.value!.value;
+};
+
+const getLabel = (label: string) => {
+  if (!selectedIndexOrTable.value) {
+    return label;
+  }
+  switch (label) {
+    case 'PARTITION_KEY':
+      return `${selectedIndexOrTable.value.partitionKeyName} (Partition Key):`;
+    case 'SORT_KEY':
+      return `${selectedIndexOrTable.value.sortKeyName} (Sort Key):`;
+    default:
+      return label;
+  }
+};
+
+const handleIndexOpen = async (isOpen: boolean) => {
+  if (!isOpen) {
+    loadingRef.value.index = false;
+    return;
+  }
+  loadingRef.value.index = true;
+  try {
+    await fetchIndices(activeConnection.value as Connection);
+    indicesOrTableOptions.value = getDynamoIndexOrTableOption.value(
+      activeConnection.value as DynamoDBConnection,
+    );
+  } catch (err) {
+    message.error(`status: ${(err as Error).name}, details: ${(err as Error).message}`, {
+      closable: true,
+      keepAliveOnHover: true,
+      duration: 3600,
+    });
+  } finally {
+    loadingRef.value.index = false;
+  }
+};
+
+const validateForm = async () => {
+  try {
+    return await dynamoQueryFormRef.value?.validate(
+      (errors: Array<FormValidationError>) => !errors,
+    );
+  } catch (e) {
+    return false;
+  }
+};
+const validationPassed = watch(
+  [dynamoQueryForm.value, dynamoQueryForm.value.formFilterItems],
+  validateForm,
+);
+
+const handleSubmit = async (event: MouseEvent) => {
+  event.preventDefault();
+  if (!activeConnection.value || !selectedIndexOrTable.value) {
+    message.error(`status: 500, ${lang.t('connection.selectIndex')}`);
+    return;
+  }
+  if (!(await validateForm())) {
+    message.error(lang.t('connection.validationFailed'));
+    return;
+  }
+
+  try {
+    const { tableName } = activeConnection.value as DynamoDBConnection;
+    const { partitionKey, sortKey, formFilterItems } = dynamoQueryForm.value;
+    const { partitionKeyName, sortKeyName, value } =
+      selectedIndexOrTable.value as DynamoIndexOrTableOption;
+    // Build query parameters
+    const queryParams = {
+      tableName,
+      indexName: value,
+      partitionKey: { name: partitionKeyName, value: partitionKey },
+      sortKey: sortKeyName && sortKey ? { name: sortKeyName, value: sortKey } : undefined,
+      filters: formFilterItems,
+    };
+
+    const data = await queryTable(activeConnection.value as DynamoDBConnection, queryParams);
+
+    const columnsSet = new Set<string>();
+    data.items.forEach(item => {
+      Object.keys(item).forEach(key => {
+        columnsSet.add(key);
+      });
+    });
+    const columnsData = data.items.map(item => {
+      const row: Record<string, unknown> = {};
+      columnsSet.forEach(key => {
+        row[key] = item[key];
+      });
+      return row;
+    });
+    queryResult.value = {
+      columns: Array.from(columnsSet).map(key => ({ title: key, key })),
+      data: columnsData,
+    };
+  } catch (error) {
+    message.error(`status: ${(error as Error).name}, details: ${(error as Error).message}`, {
+      closable: true,
+      keepAliveOnHover: true,
+      duration: 3600,
+    });
+  }
+};
+
+const handleReset = () => {
+  selectedIndexOrTable.value = undefined;
+  dynamoQueryForm.value = { index: '', partitionKey: '', sortKey: '', formFilterItems: [] };
+
+  if (dynamoQueryFormRef.value) {
+    dynamoQueryFormRef.value.restoreValidation();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/editor/dynamo-editor/index.vue b/src/views/editor/dynamo-editor/index.vue
index 431a1462..2ee84aaf 100644
--- a/src/views/editor/dynamo-editor/index.vue
+++ b/src/views/editor/dynamo-editor/index.vue
@@ -1,372 +1,13 @@
 <template>
   <div class="dynamo-editor">
     <tool-bar type="DYNAMO_EDITOR" />
-    <n-card>
-      <n-form
-        ref="dynamoQueryFormRef"
-        :model="dynamoQueryForm"
-        :rules="dynamoQueryFormRules"
-        label-placement="left"
-        require-mark-placement="right-hanging"
-        label-width="auto"
-      >
-        <!-- First row with partition and sort key -->
-        <n-grid :cols="24" :x-gap="12">
-          <n-grid-item span="12">
-            <n-form-item :label="$t('editor.dynamo.tableOrIndex')" path="index">
-              <n-select
-                :placeholder="$t('editor.dynamo.selectTableOrIndex')"
-                v-model:value="dynamoQueryForm.index"
-                remote
-                :loading="loadingRef.index"
-                @update:show="handleIndexOpen"
-                @update:value="handleUpdate"
-                :options="indicesOrTableOptions"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item span="12">
-            <n-form-item
-              v-if="selectedIndexOrTable?.partitionKeyName"
-              :label="getLabel('PARTITION_KEY')"
-              path="partitionKey"
-              :input-props="inputProps"
-            >
-              <n-input
-                v-model:value="dynamoQueryForm.partitionKey"
-                :placeholder="$t('editor.dynamo.enterPartitionKey')"
-                :input-props="inputProps"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item span="12">
-            <n-form-item
-              v-if="selectedIndexOrTable?.sortKeyName"
-              :label="getLabel('SORT_KEY')"
-              path="sortKey"
-              :input-props="inputProps"
-            >
-              <n-input
-                v-model:value="dynamoQueryForm.sortKey"
-                :placeholder="$t('editor.dynamo.enterSortKey')"
-              />
-            </n-form-item>
-          </n-grid-item>
-        </n-grid>
-
-        <!-- Dynamic additional form items -->
-        <n-card :title="$t('editor.dynamo.filterTitle')">
-          <template #header-extra>
-            <n-icon size="26" @click="addFilterItem" style="cursor: pointer">
-              <Add />
-            </n-icon>
-          </template>
-          <n-grid
-            v-for="(item, index) in dynamoQueryForm.formFilterItems"
-            :key="index"
-            :cols="24"
-            :x-gap="12"
-          >
-            <n-grid-item span="9">
-              <n-form-item
-                :path="`formFilterItems[${index}].key`"
-                :rule="{
-                  required: true,
-                  message: `${lang.t('editor.dynamo.filterKeyRequired')}`,
-                  trigger: ['input', 'blur'],
-                }"
-              >
-                <n-input
-                  v-model:value="item.key"
-                  :placeholder="$t('editor.dynamo.inputAttrName')"
-                  :input-props="inputProps"
-                />
-              </n-form-item>
-            </n-grid-item>
-            <n-grid-item span="4">
-              <n-form-item
-                :path="`formFilterItems[${index}].operator`"
-                :rule="{
-                  required: true,
-                  message: `${lang.t('editor.dynamo.filterOperatorRequired')}`,
-                  trigger: ['input', 'blur'],
-                }"
-              >
-                <n-select
-                  v-model:value="item.operator"
-                  :placeholder="$t('editor.dynamo.inputOperator')"
-                  :options="filterConditions"
-                />
-              </n-form-item>
-            </n-grid-item>
-            <n-grid-item span="9">
-              <n-form-item
-                :path="`formFilterItems[${index}].value`"
-                :rule="{
-                  required: true,
-                  message: `${lang.t('editor.dynamo.filterValueRequired')}`,
-                  trigger: ['input', 'blur'],
-                }"
-              >
-                <n-input
-                  v-model:value="item.value"
-                  :placeholder="$t('editor.dynamo.inputAttrValue')"
-                  :input-props="inputProps"
-                />
-              </n-form-item>
-            </n-grid-item>
-            <n-grid-item span="2">
-              <n-button quaternary circle @click="removeFilterItem(index)">
-                <template #icon>
-                  <n-icon>
-                    <Delete />
-                  </n-icon>
-                </template>
-              </n-button>
-            </n-grid-item>
-          </n-grid>
-        </n-card>
-      </n-form>
-      <template #footer>
-        <div class="card-footer">
-          <n-button type="warning" tertiary @click="handleReset">
-            {{ $t('dialogOps.reset') }}
-          </n-button>
-          <n-button type="primary" @click="handleSubmit" :disabled="!validationPassed">
-            {{ $t('dialogOps.execute') }}
-          </n-button>
-        </div>
-      </template>
-    </n-card>
-    <n-card :title="$t('editor.dynamo.resultTitle')" v-if="queryResult.data">
-      <n-data-table :columns="queryResult.columns" :data="queryResult.data" />
-    </n-card>
+    <ui-editor></ui-editor>
   </div>
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
-import { Add, Delete } from '@vicons/carbon';
-import { isEmpty } from 'lodash';
 import ToolBar from '../../../components/tool-bar.vue';
-import { FormItemRule, FormRules, FormValidationError } from 'naive-ui';
-import {
-  Connection,
-  DynamoDBConnection,
-  DynamoIndexOrTableOption,
-  useConnectionStore,
-  useTabStore,
-} from '../../../store';
-import { inputProps } from '../../../common';
-import { useLang } from '../../../lang';
-
-const connectionStore = useConnectionStore();
-
-const { fetchIndices, queryTable } = connectionStore;
-const { getDynamoIndexOrTableOption } = storeToRefs(connectionStore);
-
-const tabStore = useTabStore();
-const { activeConnection } = storeToRefs(tabStore);
-
-const dynamoQueryFormRef = ref();
-const filterConditions = ref([
-  { label: '=', value: '=' },
-  { label: '!=', value: '!=' },
-  { label: '<=', value: '<=' },
-  { label: '<', value: '<' },
-  { label: '>=', value: '>=' },
-  { label: '>', value: '>' },
-  { label: 'Between', value: 'between' },
-  { label: 'Exists', value: 'attribute_exists' },
-  { label: 'Not exists', value: 'attribute_not_exists' },
-  { label: 'Contain', value: 'contains' },
-  { label: 'Not contain', value: 'not contain' },
-  { label: 'Begins with', value: 'begins_with' },
-]);
-
-const loadingRef = ref({ index: false });
-
-const message = useMessage();
-const lang = useLang();
-
-const dynamoQueryForm = ref<{
-  index: string;
-  partitionKey: string;
-  sortKey: string;
-  formFilterItems: Array<{ key: string; value: string; operator: string }>;
-}>({ index: '', partitionKey: '', sortKey: '', formFilterItems: [] });
-
-const dynamoQueryFormRules = reactive<FormRules>({
-  index: [
-    {
-      required: true,
-      renderMessage: () => lang.t('editor.dynamo.indexIsRequired'),
-      trigger: ['input', 'blur'],
-    },
-  ],
-  partitionKey: [
-    {
-      validator: (_: FormItemRule, value) =>
-        !(isEmpty(dynamoQueryForm.value.formFilterItems) && !value),
-      renderMessage: () => lang.t('editor.dynamo.atLeastRequired'),
-      level: 'error',
-      trigger: ['input', 'blur'],
-    },
-    {
-      validator: (_: FormItemRule, value) =>
-        !(!isEmpty(dynamoQueryForm.value.formFilterItems) && !value),
-      renderMessage: () => lang.t('editor.dynamo.scanWarning'),
-      level: 'warning',
-      trigger: ['input', 'blur'],
-    },
-  ],
-});
-
-const queryResult = ref<{
-  columns: Array<{ title: string; key: string }>;
-  data: Array<Record<string, unknown>> | undefined;
-}>({
-  columns: [],
-  data: undefined,
-});
-
-const addFilterItem = () => {
-  dynamoQueryForm.value.formFilterItems.push({ key: '', value: '', operator: '' });
-};
-
-const removeFilterItem = (index: number) => {
-  dynamoQueryForm.value.formFilterItems.splice(index, 1);
-};
-
-const indicesOrTableOptions = ref<Array<DynamoIndexOrTableOption>>([]);
-
-const selectedIndexOrTable = ref<DynamoIndexOrTableOption | undefined>(undefined);
-
-const handleUpdate = (value: string) => {
-  const indices = getDynamoIndexOrTableOption.value(activeConnection.value as DynamoDBConnection);
-  selectedIndexOrTable.value = indices.find(item => item.value === value);
-  dynamoQueryForm.value.index = selectedIndexOrTable.value!.value;
-};
-
-const getLabel = (label: string) => {
-  if (!selectedIndexOrTable.value) {
-    return label;
-  }
-  switch (label) {
-    case 'PARTITION_KEY':
-      return `${selectedIndexOrTable.value.partitionKeyName} (Partition Key):`;
-    case 'SORT_KEY':
-      return `${selectedIndexOrTable.value.sortKeyName} (Sort Key):`;
-    default:
-      return label;
-  }
-};
-
-const handleIndexOpen = async (isOpen: boolean) => {
-  if (!isOpen) {
-    loadingRef.value.index = false;
-    return;
-  }
-  loadingRef.value.index = true;
-  try {
-    await fetchIndices(activeConnection.value as Connection);
-    indicesOrTableOptions.value = getDynamoIndexOrTableOption.value(
-      activeConnection.value as DynamoDBConnection,
-    );
-  } catch (err) {
-    message.error(`status: ${(err as Error).name}, details: ${(err as Error).message}`, {
-      closable: true,
-      keepAliveOnHover: true,
-      duration: 3600,
-    });
-  } finally {
-    loadingRef.value.index = false;
-  }
-};
-
-const validateForm = async () => {
-  try {
-    return await dynamoQueryFormRef.value?.validate(
-      (errors: Array<FormValidationError>) => !errors,
-    );
-  } catch (e) {
-    return false;
-  }
-};
-const validationPassed = watch(
-  [dynamoQueryForm.value, dynamoQueryForm.value.formFilterItems],
-  validateForm,
-);
-
-const handleSubmit = async (event: MouseEvent) => {
-  event.preventDefault();
-  if (!activeConnection.value || !selectedIndexOrTable.value) {
-    message.error(`status: 500, ${lang.t('connection.selectIndex')}`);
-    return;
-  }
-  if (!(await validateForm())) {
-    message.error(lang.t('connection.validationFailed'));
-    return;
-  }
-
-  try {
-    const { tableName } = activeConnection.value as DynamoDBConnection;
-    const { partitionKey, sortKey, formFilterItems } = dynamoQueryForm.value;
-    const { partitionKeyName, sortKeyName, value } =
-      selectedIndexOrTable.value as DynamoIndexOrTableOption;
-    // Build query parameters
-    const queryParams = {
-      tableName,
-      indexName: value,
-      partitionKey: { name: partitionKeyName, value: partitionKey },
-      sortKey: sortKeyName && sortKey ? { name: sortKeyName, value: sortKey } : undefined,
-      filters: formFilterItems,
-    };
-
-    const data = await queryTable(activeConnection.value as DynamoDBConnection, queryParams);
-
-    const columnsSet = new Set<string>();
-    data.items.forEach(item => {
-      Object.keys(item).forEach(key => {
-        columnsSet.add(key);
-      });
-    });
-    const columnsData = data.items.map(item => {
-      const row: Record<string, unknown> = {};
-      columnsSet.forEach(key => {
-        row[key] = item[key];
-      });
-      return row;
-    });
-    queryResult.value = {
-      columns: Array.from(columnsSet).map(key => ({ title: key, key })),
-      data: columnsData,
-    };
-  } catch (error) {
-    message.error(`status: ${(error as Error).name}, details: ${(error as Error).message}`, {
-      closable: true,
-      keepAliveOnHover: true,
-      duration: 3600,
-    });
-  }
-};
-
-const handleReset = () => {
-  selectedIndexOrTable.value = undefined;
-  dynamoQueryForm.value = { index: '', partitionKey: '', sortKey: '', formFilterItems: [] };
-
-  if (dynamoQueryFormRef.value) {
-    dynamoQueryFormRef.value.restoreValidation();
-  }
-};
+import UiEditor from './components/ui-editor.vue';
 </script>
 
-<style lang="scss" scoped>
-.card-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-</style>
+<style lang="scss" scoped></style>

From 9180b01867a0159e048e4248f1894eb7e5fd3def Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Sat, 17 May 2025 16:29:50 +0800
Subject: [PATCH 2/7] feat: implement create item ui

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 src/components/tool-bar.vue                   |  20 +-
 src/lang/enUS.ts                              |   9 +-
 src/lang/zhCN.ts                              |   9 +-
 src/store/connectionStore.ts                  |  25 +-
 src/store/tabStore.ts                         |   1 +
 .../dynamo-editor/components/code-editor.vue  |   0
 .../dynamo-editor/components/create-item.vue  | 283 ++++++++++++++++++
 .../dynamo-editor/components/sql-editor.vue   |   7 +
 .../dynamo-editor/components/ui-editor.vue    |   6 +-
 src/views/editor/dynamo-editor/index.vue      |  11 +-
 10 files changed, 341 insertions(+), 30 deletions(-)
 delete mode 100644 src/views/editor/dynamo-editor/components/code-editor.vue
 create mode 100644 src/views/editor/dynamo-editor/components/sql-editor.vue

diff --git a/src/components/tool-bar.vue b/src/components/tool-bar.vue
index f37acccb..522b274b 100644
--- a/src/components/tool-bar.vue
+++ b/src/components/tool-bar.vue
@@ -61,7 +61,7 @@
       {{ $t('editor.loadDefault') }}
     </n-tooltip>
     <n-button-group v-if="props.type === 'DYNAMO_EDITOR'">
-      <n-button quaternary>
+      <n-button quaternary @click="handleEditorSwitch('DYNAMO_EDITOR_UI')">
         <template #icon>
           <n-icon>
             <Template />
@@ -69,7 +69,7 @@
         </template>
         {{ $t('editor.dynamo.uiQuery') }}
       </n-button>
-      <n-button quaternary>
+      <n-button quaternary @click="handleEditorSwitch('DYNAMO_EDITOR_SQL')">
         <template #icon>
           <n-icon>
             <Code />
@@ -77,7 +77,7 @@
         </template>
         {{ $t('editor.dynamo.sqlEditor') }}
       </n-button>
-      <n-button quaternary>
+      <n-button quaternary @click="handleEditorSwitch('DYNAMO_EDITOR_CREATE_ITEM')">
         <template #icon>
           <n-icon>
             <Add />
@@ -109,6 +109,9 @@ import { useClusterManageStore, useConnectionStore, useTabStore } from '../store
 import { useLang } from '../lang';
 import { CustomError, inputProps } from '../common';
 
+const props = defineProps({ type: String });
+const emits = defineEmits(['switch-manage-tab']);
+
 const message = useMessage();
 const lang = useLang();
 
@@ -116,11 +119,6 @@ const connectionStore = useConnectionStore();
 const { fetchConnections, fetchIndices, selectIndex } = connectionStore;
 const { connections } = storeToRefs(connectionStore);
 
-const props = defineProps({
-  type: String,
-});
-const emits = defineEmits(['switch-manage-tab']);
-
 const tabStore = useTabStore();
 const { loadDefaultSnippet, selectConnection } = tabStore;
 const { activePanel, activeElasticsearchIndexOption } = storeToRefs(tabStore);
@@ -263,6 +261,12 @@ const handleHiddenChange = async (value: boolean) => {
     await refreshStates(value);
   }
 };
+
+const handleEditorSwitch = async (
+  value: 'DYNAMO_EDITOR_UI' | 'DYNAMO_EDITOR_SQL' | 'DYNAMO_EDITOR_CREATE_ITEM',
+) => {
+  activePanel.value.editorType = value;
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 2f20518d..8df7439e 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -193,9 +193,6 @@ export const enUS = {
     unsupportedFile: 'DocKit only supports file end with .search file',
     loadDefault: 'Load default code snippet',
     dynamo: {
-      filterKeyRequired: 'Filter key name is required',
-      filterOperatorRequired: 'Filter operator is required',
-      filterValueRequired: 'Filter key value is required',
       uiQuery: 'Query UI',
       sqlEditor: 'PartiQL Editor',
       tableOrIndex: 'Table/Index',
@@ -205,12 +202,18 @@ export const enUS = {
       filterTitle: 'Filters - Optional',
       inputAttrName: 'Enter attribute name',
       inputOperator: 'Select Operator',
+      type: 'Select attribute type',
       inputAttrValue: 'Enter attribute value',
       resultTitle: 'Query Result',
       indexIsRequired: 'Table/Index is required',
       atLeastRequired: 'Partition key or at least 1 filter is required',
       scanWarning: 'Request without partitionKey will scan the table',
       createItem: 'Create Item',
+      addAttributesTitle: 'Add Attributes',
+      attributeNameRequired: 'Attribute name is required',
+      attributeTypeRequired: 'Attribute type is required',
+      attributeValueRequired: 'Attribute value is required',
+      operatorRequired: 'Filter operator is required',
     },
   },
   file: {
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index d64ee336..cd39003e 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -193,9 +193,6 @@ export const zhCN = {
     unsupportedFile: 'DocKit仅支持以 .search 结尾的文件',
     loadDefault: '加载默认代码片段',
     dynamo: {
-      filterKeyRequired: '请输入滤器键名',
-      filterOperatorRequired: '请输入滤器操作符',
-      filterValueRequired: '请输入滤器键的值',
       uiQuery: '查询 UI',
       sqlEditor: 'PartiQL 查询',
       tableOrIndex: '表/索引',
@@ -205,12 +202,18 @@ export const zhCN = {
       filterTitle: '条件过滤 - 可选',
       inputAttrName: '请输入属性名称',
       inputOperator: '选择操作符',
+      type: '选择属性类型',
       inputAttrValue: '请输入属性的值',
       resultTitle: '查询结果',
       indexIsRequired: '表/索引 是必需的',
       atLeastRequired: 'Partition Key 或至少 1 个过滤器是必需的',
       scanWarning: '未提供 Partition Key，执行 Scan 操作可能会导致性能问题',
       createItem: '添加数据',
+      addAttributesTitle: '添加属性',
+      attributeNameRequired: '请输入属性名称',
+      attributeTypeRequired: '请输入属性类型',
+      attributeValueRequired: '请输入属性值',
+      operatorRequired: '请输入滤器操作符',
     },
   },
   file: {
diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
index bc016e1f..3e66a032 100644
--- a/src/store/connectionStore.ts
+++ b/src/store/connectionStore.ts
@@ -41,12 +41,12 @@ export type DynamoDBConnection = {
   id?: number;
   name: string;
   type: DatabaseType.DYNAMODB;
-  indices: Array<DynamoIndex>;
+  indices?: Array<DynamoIndex>;
   region: string;
   accessKeyId: string;
   secretAccessKey: string;
   tableName: string;
-  keySchema: Array<KeySchema>;
+  keySchema?: Array<KeySchema>;
 };
 
 export type ElasticsearchConnection = {
@@ -122,7 +122,7 @@ export const useConnectionStore = defineStore('connectionStore', {
     },
     getDynamoIndexOrTableOption: () => {
       return (targetConnection?: DynamoDBConnection) => {
-        if (!targetConnection || targetConnection.type !== DatabaseType.DYNAMODB) return [];
+        if (!targetConnection?.keySchema) return [];
 
         const { partitionKeyName, sortKeyName } = getIndexInfo(targetConnection.keySchema);
         const partitionKeyOption = partitionKeyName && {
@@ -132,16 +132,17 @@ export const useConnectionStore = defineStore('connectionStore', {
           sortKeyName,
         };
 
-        const indexOptions = targetConnection.indices?.map(index => {
-          const { partitionKeyName, sortKeyName } = getIndexInfo(index.keySchema);
+        const indexOptions =
+          targetConnection.indices?.map(index => {
+            const { partitionKeyName, sortKeyName } = getIndexInfo(index.keySchema);
 
-          return {
-            label: `GSI - ${index.name}`,
-            value: index.name,
-            partitionKeyName,
-            sortKeyName,
-          };
-        });
+            return {
+              label: `GSI - ${index.name}`,
+              value: index.name,
+              partitionKeyName,
+              sortKeyName,
+            };
+          }) || [];
 
         return [partitionKeyOption, ...indexOptions].filter(
           Boolean,
diff --git a/src/store/tabStore.ts b/src/store/tabStore.ts
index 41275f1b..77001828 100644
--- a/src/store/tabStore.ts
+++ b/src/store/tabStore.ts
@@ -12,6 +12,7 @@ type Panel = {
   file?: string;
   content?: string;
   hideSystemIndices?: boolean;
+  editorType?: 'DYNAMO_EDITOR_UI' | 'DYNAMO_EDITOR_SQL' | 'DYNAMO_EDITOR_CREATE_ITEM';
 };
 
 const homePanel: Panel = { id: 0, name: 'home', file: '' };
diff --git a/src/views/editor/dynamo-editor/components/code-editor.vue b/src/views/editor/dynamo-editor/components/code-editor.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/editor/dynamo-editor/components/create-item.vue b/src/views/editor/dynamo-editor/components/create-item.vue
index e69de29b..4596d92f 100644
--- a/src/views/editor/dynamo-editor/components/create-item.vue
+++ b/src/views/editor/dynamo-editor/components/create-item.vue
@@ -0,0 +1,283 @@
+<template>
+  <n-card>
+    <n-form
+      ref="dynamoRecordFormRef"
+      :model="dynamoRecordForm"
+      :rules="dynamoRecordFormRules"
+      label-placement="left"
+      require-mark-placement="right-hanging"
+      label-width="auto"
+    >
+      <n-card :title="$t('editor.dynamo.addAttributesTitle')">
+        <template #header-extra>
+          <n-icon size="26" @click="addAttributeItem" style="cursor: pointer">
+            <Add />
+          </n-icon>
+        </template>
+        <!-- First row with partition and sort key -->
+        <n-grid :cols="24" :x-gap="12">
+          <n-grid-item span="12">
+            <n-form-item
+              v-if="selectedTable.partitionKeyLabel"
+              :label="selectedTable.partitionKeyLabel"
+              path="partitionKey"
+              :input-props="inputProps"
+            >
+              <n-input
+                v-model:value="dynamoRecordForm.partitionKey"
+                :placeholder="$t('editor.dynamo.enterPartitionKey')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+
+          <n-grid-item span="12">
+            <n-form-item
+              v-if="selectedTable.sortKeyLabel"
+              :label="selectedTable.sortKeyLabel"
+              path="sortKey"
+              :input-props="inputProps"
+            >
+              <n-input
+                v-model:value="dynamoRecordForm.sortKey"
+                :placeholder="$t('editor.dynamo.enterSortKey')"
+              />
+            </n-form-item>
+          </n-grid-item>
+        </n-grid>
+        <!-- Dynamically additional form items -->
+        <n-grid
+          v-for="(item, index) in dynamoRecordForm.attributes"
+          :key="index"
+          :cols="24"
+          :x-gap="12"
+        >
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`attributes[${index}].key`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeNameRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.key"
+                :placeholder="$t('editor.dynamo.inputAttrName')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="4">
+            <n-form-item
+              :path="`attributes[${index}].type`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeTypeRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-select
+                v-model:value="item.type"
+                :placeholder="$t('editor.dynamo.type')"
+                :options="attributeType"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`attributes[${index}].value`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.value"
+                :placeholder="$t('editor.dynamo.inputAttrValue')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="2">
+            <n-button quaternary circle @click="removeAttributeItem(index)">
+              <template #icon>
+                <n-icon>
+                  <Delete />
+                </n-icon>
+              </template>
+            </n-button>
+          </n-grid-item>
+        </n-grid>
+      </n-card>
+    </n-form>
+    <template #footer>
+      <div class="card-footer">
+        <n-button type="warning" tertiary @click="handleReset">
+          {{ $t('dialogOps.reset') }}
+        </n-button>
+        <n-button type="primary" @click="handleSubmit" :disabled="!validationPassed">
+          {{ $t('dialogOps.execute') }}
+        </n-button>
+      </div>
+    </template>
+  </n-card>
+  <n-card :title="$t('editor.dynamo.resultTitle')" v-if="queryResult.data">
+    <n-data-table :columns="queryResult.columns" :data="queryResult.data" />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { Add, Delete } from '@vicons/carbon';
+import { FormRules, FormValidationError } from 'naive-ui';
+import { Connection, DynamoDBConnection, useConnectionStore, useTabStore } from '../../../../store';
+import { inputProps } from '../../../../common';
+import { useLang } from '../../../../lang';
+
+const connectionStore = useConnectionStore();
+
+const { fetchIndices } = connectionStore;
+const { getDynamoIndexOrTableOption } = storeToRefs(connectionStore);
+
+const tabStore = useTabStore();
+const { activeConnection } = storeToRefs(tabStore);
+
+const dynamoRecordFormRef = ref();
+const attributeType = ref([
+  { label: 'String', value: 'String=' },
+  { label: 'Number', value: 'Number' },
+  { label: 'Boolean', value: 'Boolean' },
+  { label: 'Binary', value: 'Binary' },
+  { label: 'Null', value: 'Null' },
+  { label: 'String Set', value: 'String Set>' },
+  { label: 'Number Set', value: 'Number Set' },
+  { label: 'Binary Set', value: 'Binary Set' },
+  { label: 'List', value: 'List' },
+  { label: 'Map', value: 'Map' },
+]);
+
+const message = useMessage();
+const lang = useLang();
+
+const dynamoRecordForm = ref<{
+  index: string;
+  partitionKey: string;
+  sortKey: string;
+  attributes: Array<{ key: string; value: string; type: string }>;
+}>({ index: '', partitionKey: '', sortKey: '', attributes: [] });
+
+const dynamoRecordFormRules = reactive<FormRules>({
+  index: [
+    {
+      required: true,
+      renderMessage: () => lang.t('editor.dynamo.indexIsRequired'),
+      trigger: ['input', 'blur'],
+    },
+  ],
+  partitionKey: [
+    {
+      required: true,
+      renderMessage: () => lang.t('editor.dynamo.attributeValueRequired'),
+      level: 'error',
+      trigger: ['input', 'blur'],
+    },
+  ],
+});
+
+const queryResult = ref<{
+  columns: Array<{ title: string; key: string }>;
+  data: Array<Record<string, unknown>> | undefined;
+}>({
+  columns: [],
+  data: undefined,
+});
+
+const addAttributeItem = () => {
+  dynamoRecordForm.value.attributes.push({ key: '', value: '', type: '' });
+};
+
+const removeAttributeItem = (index: number) => {
+  dynamoRecordForm.value.attributes.splice(index, 1);
+};
+
+const selectedTable = computed(() => {
+  const indexOrTableOptions = getDynamoIndexOrTableOption.value(
+    activeConnection.value as DynamoDBConnection,
+  );
+  if (indexOrTableOptions?.length < 1) {
+    return {
+      partitionKeyName: undefined,
+      sortKeyName: undefined,
+      partitionKeyLabel: undefined,
+      sortKeyLabel: undefined,
+    };
+  }
+
+  const { partitionKeyName, sortKeyName } = indexOrTableOptions[0];
+
+  return {
+    partitionKeyName,
+    sortKeyName,
+    partitionKeyLabel: partitionKeyName ? `${partitionKeyName}  (Partition Key):` : undefined,
+    sortKeyLabel: sortKeyName ? `${sortKeyName} (Sort Key):` : undefined,
+  };
+});
+
+const validateForm = async () => {
+  try {
+    return await dynamoRecordFormRef.value?.validate(
+      (errors: Array<FormValidationError>) => !errors,
+    );
+  } catch (e) {
+    return false;
+  }
+};
+const validationPassed = watch(
+  [dynamoRecordForm.value, dynamoRecordForm.value.attributes],
+  validateForm,
+);
+
+const handleSubmit = async (event: MouseEvent) => {
+  event.preventDefault();
+  if (!activeConnection.value) {
+    message.error(`status: 500, ${lang.t('connection.selectIndex')}`);
+    return;
+  }
+  if (!(await validateForm())) {
+    message.error(lang.t('connection.validationFailed'));
+    return;
+  }
+
+  try {
+    // const { tableName } = activeConnection.value as DynamoDBConnection;
+    // const { partitionKey, sortKey, attributes } = dynamoRecordForm.value;
+    // Build query parameters
+  } catch (error) {
+    message.error(`status: ${(error as Error).name}, details: ${(error as Error).message}`, {
+      closable: true,
+      keepAliveOnHover: true,
+      duration: 3600,
+    });
+  }
+};
+
+const handleReset = () => {
+  dynamoRecordForm.value = { index: '', partitionKey: '', sortKey: '', attributes: [] };
+
+  if (dynamoRecordFormRef.value) {
+    dynamoRecordFormRef.value.restoreValidation();
+  }
+};
+
+fetchIndices(activeConnection.value as Connection);
+</script>
+
+<style lang="scss" scoped>
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/editor/dynamo-editor/components/sql-editor.vue b/src/views/editor/dynamo-editor/components/sql-editor.vue
new file mode 100644
index 00000000..4f5c106e
--- /dev/null
+++ b/src/views/editor/dynamo-editor/components/sql-editor.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>SQL editor</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/editor/dynamo-editor/components/ui-editor.vue b/src/views/editor/dynamo-editor/components/ui-editor.vue
index 96e33c9f..88ecc4eb 100644
--- a/src/views/editor/dynamo-editor/components/ui-editor.vue
+++ b/src/views/editor/dynamo-editor/components/ui-editor.vue
@@ -72,7 +72,7 @@
               :path="`formFilterItems[${index}].key`"
               :rule="{
                 required: true,
-                message: `${lang.t('editor.dynamo.filterKeyRequired')}`,
+                message: `${lang.t('editor.dynamo.attributeNameRequired')}`,
                 trigger: ['input', 'blur'],
               }"
             >
@@ -88,7 +88,7 @@
               :path="`formFilterItems[${index}].operator`"
               :rule="{
                 required: true,
-                message: `${lang.t('editor.dynamo.filterOperatorRequired')}`,
+                message: `${lang.t('editor.dynamo.operatorRequired')}`,
                 trigger: ['input', 'blur'],
               }"
             >
@@ -104,7 +104,7 @@
               :path="`formFilterItems[${index}].value`"
               :rule="{
                 required: true,
-                message: `${lang.t('editor.dynamo.filterValueRequired')}`,
+                message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
                 trigger: ['input', 'blur'],
               }"
             >
diff --git a/src/views/editor/dynamo-editor/index.vue b/src/views/editor/dynamo-editor/index.vue
index 2ee84aaf..0250bc6c 100644
--- a/src/views/editor/dynamo-editor/index.vue
+++ b/src/views/editor/dynamo-editor/index.vue
@@ -1,13 +1,22 @@
 <template>
   <div class="dynamo-editor">
     <tool-bar type="DYNAMO_EDITOR" />
-    <ui-editor></ui-editor>
+    <ui-editor v-if="activePanel.editorType === 'DYNAMO_EDITOR_UI'"></ui-editor>
+    <create-item v-else-if="activePanel.editorType === 'DYNAMO_EDITOR_CREATE_ITEM'" />
+    <sql-editor v-else />
   </div>
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import ToolBar from '../../../components/tool-bar.vue';
 import UiEditor from './components/ui-editor.vue';
+import SqlEditor from './components/sql-editor.vue';
+import CreateItem from './components/create-item.vue';
+import { useTabStore } from '../../../store';
+
+const tabStore = useTabStore();
+const { activePanel } = storeToRefs(tabStore);
 </script>
 
 <style lang="scss" scoped></style>

From a7ff0da75719781943aa7bb6d1133dc0d458e3f9 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Sat, 17 May 2025 18:39:30 +0800
Subject: [PATCH 3/7] feat: implement create item api [wip]

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 src-tauri/Cargo.lock                          |  1 +
 src-tauri/Cargo.toml                          |  1 +
 src-tauri/src/dynamo_client.rs                | 97 +++++++++++++++++--
 src/datasources/dynamoApi.ts                  | 71 +++++++++++++-
 src/store/connectionStore.ts                  | 27 +++++-
 .../dynamo-editor/components/create-item.vue  | 42 ++++----
 6 files changed, 209 insertions(+), 30 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 789825d5..a8829c7f 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1275,6 +1275,7 @@ dependencies = [
  "async-openai",
  "aws-config",
  "aws-sdk-dynamodb",
+ "base64 0.22.1",
  "futures",
  "http 0.2.12",
  "log",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 6b1b0f4e..24e0ee90 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -30,6 +30,7 @@ log = "0.4.22"
 futures = "0.3.30"
 aws-config = "1.6.1"
 aws-sdk-dynamodb = "1.71.2"
+base64 = "0.22.1"
 [features]
 # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
 custom-protocol = ["tauri/custom-protocol"]
diff --git a/src-tauri/src/dynamo_client.rs b/src-tauri/src/dynamo_client.rs
index aa0a602b..7881bb3d 100644
--- a/src-tauri/src/dynamo_client.rs
+++ b/src-tauri/src/dynamo_client.rs
@@ -3,6 +3,7 @@ use aws_sdk_dynamodb::{Client, config::Credentials, types::AttributeValue};
 use aws_config::Region;
 use serde::{Deserialize, Serialize};
 use serde_json::json;
+use base64;
 
 #[derive(Debug, Deserialize)]
 pub struct DynamoCredentials {
@@ -25,6 +26,23 @@ struct ApiResponse {
     data: Option<serde_json::Value>,
 }
 
+fn convert_json_to_attr_value(value: &serde_json::Value) -> Option<AttributeValue> {
+    match value {
+        serde_json::Value::String(s) => Some(AttributeValue::S(s.clone())),
+        serde_json::Value::Number(n) => Some(AttributeValue::N(n.to_string())),
+        serde_json::Value::Bool(b) => Some(AttributeValue::Bool(*b)),
+        serde_json::Value::Null => Some(AttributeValue::Null(true)),
+        serde_json::Value::Array(arr) => Some(AttributeValue::L(
+            arr.iter().filter_map(|v| convert_json_to_attr_value(v)).collect()
+        )),
+        serde_json::Value::Object(map) => Some(AttributeValue::M(
+            map.iter().filter_map(|(k, v)| {
+                convert_json_to_attr_value(v).map(|av| (k.clone(), av))
+            }).collect()
+        )),
+    }
+}
+
 #[tauri::command]
 pub async fn dynamo_api(
     window: tauri::Window,
@@ -146,18 +164,79 @@ pub async fn dynamo_api(
                 })
             }
         },
-        "put_item" => {
-            if let Some(_payload) = &options.payload {
-                // Implementation for put_item would go here
-                Ok(ApiResponse {
-                    status: 200,
-                    message: "Item put successfully".to_string(),
-                    data: None,
-                })
+        "CREATE_ITEM" => {
+            if let Some(payload) = &options.payload {
+                // Expecting payload to have an "attributes" array
+                if let Some(attributes) = payload.get("attributes").and_then(|v| v.as_array()) {
+                    let mut put_item = client.put_item().table_name(&options.table_name);
+
+                    for attr in attributes {
+                        if let (Some(key), Some(value), Some(attr_type)) = (
+                            attr.get("key").and_then(|v| v.as_str()),
+                            attr.get("value"),
+                            attr.get("type").and_then(|v| v.as_str()),
+                        ) {
+                            let attr_value = match attr_type {
+                                "S" => value.as_str().map(|s| AttributeValue::S(s.to_string())),
+                                "N" => value.as_f64().map(|n| AttributeValue::N(n.to_string())),
+                                "B" => value.as_str().map(|s| AttributeValue::B(
+                                    aws_sdk_dynamodb::primitives::Blob::new(base64::decode(s).unwrap_or_default())
+                                )),
+                                "BOOL" => value.as_bool().map(AttributeValue::Bool),
+                                "NULL" => Some(AttributeValue::Null(true)),
+                                "SS" => value.as_array().map(|arr| {
+                                    AttributeValue::Ss(arr.iter().filter_map(|v| v.as_str().map(|s| s.to_string())).collect())
+                                }),
+                                "NS" => value.as_array().map(|arr| {
+                                    AttributeValue::Ns(arr.iter().filter_map(|v| v.as_f64().map(|n| n.to_string())).collect())
+                                }),
+                                "BS" => value.as_array().map(|arr| {
+                                    AttributeValue::Bs(arr.iter().filter_map(|v| v.as_str().map(|s| {
+                                        aws_sdk_dynamodb::primitives::Blob::new(base64::decode(s).unwrap_or_default())
+                                    })).collect())
+                                }),
+                                "L" => value.as_array().map(|arr| {
+                                    AttributeValue::L(arr.iter().filter_map(|v| {
+                                        // Recursively convert each element
+                                        convert_json_to_attr_value(v)
+                                    }).collect())
+                                }),
+                                "M" => value.as_object().map(|map| {
+                                    AttributeValue::M(map.iter().filter_map(|(k, v)| {
+                                        convert_json_to_attr_value(v).map(|av| (k.clone(), av))
+                                    }).collect())
+                                }),
+                                _ => None,
+                            };
+                            if let Some(av) = attr_value {
+                                put_item = put_item.item(key, av);
+                            }
+                        }
+                    }
+
+                    match put_item.send().await {
+                        Ok(_) => Ok(ApiResponse {
+                            status: 200,
+                            message: "Item created successfully".to_string(),
+                            data: None,
+                        }),
+                        Err(e) => Ok(ApiResponse {
+                            status: 500,
+                            message: format!("Failed to create item: {}", e),
+                            data: None,
+                        }),
+                    }
+                } else {
+                    Ok(ApiResponse {
+                        status: 400,
+                        message: "Attributes array is required".to_string(),
+                        data: None,
+                    })
+                }
             } else {
                 Ok(ApiResponse {
                     status: 400,
-                    message: "Item is required for put_item operation".to_string(),
+                    message: "Item payload is required".to_string(),
                     data: None,
                 })
             }
diff --git a/src/datasources/dynamoApi.ts b/src/datasources/dynamoApi.ts
index a4d344fe..cf33b9fd 100644
--- a/src/datasources/dynamoApi.ts
+++ b/src/datasources/dynamoApi.ts
@@ -29,13 +29,35 @@ export type DynamoIndex = {
 };
 
 // Main table info type
-export type DynamoDBTableInfo = {
+export type RawDynamoDBTableInfo = {
   id: string;
   name: string;
   status: string;
   itemCount: number;
   sizeBytes: number;
   keySchema: KeySchema[]; // Based on connection store usage
+  attributeDefinitions: AttributeDefinition[];
+  indices: DynamoIndex[];
+  creationDateTime: string;
+};
+
+export type DynamoDBTableInfo = {
+  id: string;
+  name: string;
+  status: string;
+  itemCount: number;
+  sizeBytes: number;
+  partitionKey: {
+    name: string;
+    type: string;
+    valueType: string;
+  };
+  sortKey?: {
+    name: string;
+    type: string;
+    valueType: string;
+  };
+  keySchema: KeySchema[];
   attributeDefinitions?: AttributeDefinition[];
   indices?: DynamoIndex[];
   creationDateTime?: string;
@@ -84,8 +106,27 @@ const dynamoApi = {
     if (status !== 200) {
       throw new CustomError(status, message);
     }
-    return data as DynamoDBTableInfo;
+    const { keySchema, attributeDefinitions } = data as RawDynamoDBTableInfo;
+
+    const pkName = keySchema.find(({ keyType }) => keyType.toUpperCase() === 'HASH')?.attributeName;
+    const pkValueType = attributeDefinitions.find(
+      ({ attributeName }) => attributeName === pkName,
+    )?.attributeType;
+
+    const skName = keySchema.find(
+      ({ keyType }) => keyType.toUpperCase() === 'RANGE',
+    )?.attributeName;
+    const skValueType = attributeDefinitions.find(
+      ({ attributeName }) => attributeName === skName,
+    )?.attributeType;
+
+    const partitionKey = { name: pkName, valueType: pkValueType, type: 'HASH' };
+
+    const sortKey = { name: skName, valueType: skValueType, type: 'RANGE' };
+
+    return { ...data, partitionKey, sortKey } as DynamoDBTableInfo;
   },
+
   queryTable: async (con: DynamoDBConnection, queryParams: QueryParams): Promise<QueryResult> => {
     const credentials = {
       region: con.region,
@@ -136,6 +177,32 @@ const dynamoApi = {
 
     return data as QueryResult;
   },
+  createItem: async (
+    con: DynamoDBConnection,
+    attributes: Array<{
+      key: string;
+      value: string | number | boolean | null;
+      type: string;
+    }>,
+  ) => {
+    const credentials = {
+      region: con.region,
+      access_key_id: con.accessKeyId,
+      secret_access_key: con.secretAccessKey,
+    };
+    const options = {
+      table_name: con.tableName,
+      operation: 'CREATE_ITEM',
+      payload: { attributes },
+    };
+
+    const { status, message, data } = await tauriClient.invokeDynamoApi(credentials, options);
+
+    if (status !== 200) {
+      throw new CustomError(status, message);
+    }
+    return data as QueryResult;
+  },
 };
 
 export { dynamoApi };
diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
index 3e66a032..cbbecc91 100644
--- a/src/store/connectionStore.ts
+++ b/src/store/connectionStore.ts
@@ -3,12 +3,12 @@ import { buildAuthHeader, buildURL, CustomError, pureObject } from '../common';
 import { lang } from '../lang';
 import { SearchAction, transformToCurl } from '../common/monaco';
 import {
-  loadHttpClient,
-  storeApi,
   dynamoApi,
   DynamoIndex,
   KeySchema,
+  loadHttpClient,
   QueryParams,
+  storeApi,
 } from '../datasources';
 import { DynamoIndexOrTableOption } from './tabStore.ts';
 
@@ -47,6 +47,16 @@ export type DynamoDBConnection = {
   secretAccessKey: string;
   tableName: string;
   keySchema?: Array<KeySchema>;
+  partitionKey: {
+    name: string;
+    type: string;
+    valueType: string;
+  };
+  sortKey?: {
+    name: string;
+    type: string;
+    valueType: string;
+  };
 };
 
 export type ElasticsearchConnection = {
@@ -233,6 +243,8 @@ export const useConnectionStore = defineStore('connectionStore', {
         const tableInfo = await dynamoApi.describeTable(con as DynamoDBConnection);
         connection.keySchema = tableInfo.keySchema;
         connection.indices = tableInfo.indices as DynamoIndex[];
+        connection.partitionKey = tableInfo.partitionKey;
+        connection.sortKey = tableInfo.sortKey;
       }
     },
     async selectIndex(con: Connection, indexName: string) {
@@ -324,5 +336,16 @@ export const useConnectionStore = defineStore('connectionStore', {
         ? await dynamoApi.queryTable(con, queryParams)
         : await dynamoApi.scanTable(con, queryParams);
     },
+
+    async createItem(
+      con: DynamoDBConnection,
+      attributes: Array<{
+        key: string;
+        value: string | number | boolean | null;
+        type: string;
+      }>,
+    ) {
+      return await dynamoApi.createItem(con, attributes);
+    },
   },
 });
diff --git a/src/views/editor/dynamo-editor/components/create-item.vue b/src/views/editor/dynamo-editor/components/create-item.vue
index 4596d92f..adb65157 100644
--- a/src/views/editor/dynamo-editor/components/create-item.vue
+++ b/src/views/editor/dynamo-editor/components/create-item.vue
@@ -138,7 +138,7 @@ import { useLang } from '../../../../lang';
 
 const connectionStore = useConnectionStore();
 
-const { fetchIndices } = connectionStore;
+const { fetchIndices, createItem } = connectionStore;
 const { getDynamoIndexOrTableOption } = storeToRefs(connectionStore);
 
 const tabStore = useTabStore();
@@ -146,27 +146,26 @@ const { activeConnection } = storeToRefs(tabStore);
 
 const dynamoRecordFormRef = ref();
 const attributeType = ref([
-  { label: 'String', value: 'String=' },
-  { label: 'Number', value: 'Number' },
-  { label: 'Boolean', value: 'Boolean' },
-  { label: 'Binary', value: 'Binary' },
-  { label: 'Null', value: 'Null' },
-  { label: 'String Set', value: 'String Set>' },
-  { label: 'Number Set', value: 'Number Set' },
-  { label: 'Binary Set', value: 'Binary Set' },
-  { label: 'List', value: 'List' },
-  { label: 'Map', value: 'Map' },
+  { label: 'String', value: 'S' },
+  { label: 'Number', value: 'N' },
+  { label: 'Boolean', value: 'BOOL' },
+  { label: 'Binary', value: 'B' },
+  { label: 'Null', value: 'NULL' },
+  { label: 'List', value: 'L' },
+  { label: 'Map', value: 'M' },
+  { label: 'String Set', value: 'SS' },
+  { label: 'Number Set', value: 'NS' },
+  { label: 'Binary Set', value: 'BS' },
 ]);
 
 const message = useMessage();
 const lang = useLang();
 
 const dynamoRecordForm = ref<{
-  index: string;
   partitionKey: string;
   sortKey: string;
   attributes: Array<{ key: string; value: string; type: string }>;
-}>({ index: '', partitionKey: '', sortKey: '', attributes: [] });
+}>({ partitionKey: '', sortKey: '', attributes: [] });
 
 const dynamoRecordFormRules = reactive<FormRules>({
   index: [
@@ -251,9 +250,18 @@ const handleSubmit = async (event: MouseEvent) => {
   }
 
   try {
-    // const { tableName } = activeConnection.value as DynamoDBConnection;
-    // const { partitionKey, sortKey, attributes } = dynamoRecordForm.value;
-    // Build query parameters
+    const { partitionKey } = activeConnection.value as DynamoDBConnection;
+    const pkRecord = {
+      key: partitionKey.name,
+      value: dynamoRecordForm.value.partitionKey,
+      type: partitionKey.valueType,
+    };
+
+    const attributes = [pkRecord, ...dynamoRecordForm.value.attributes];
+
+    console.log('attributes', attributes);
+
+    // const result = await createItem(activeConnection.value as DynamoDBConnection, attributes);
   } catch (error) {
     message.error(`status: ${(error as Error).name}, details: ${(error as Error).message}`, {
       closable: true,
@@ -264,7 +272,7 @@ const handleSubmit = async (event: MouseEvent) => {
 };
 
 const handleReset = () => {
-  dynamoRecordForm.value = { index: '', partitionKey: '', sortKey: '', attributes: [] };
+  dynamoRecordForm.value = { partitionKey: '', sortKey: '', attributes: [] };
 
   if (dynamoRecordFormRef.value) {
     dynamoRecordFormRef.value.restoreValidation();

From e3bc894e74295336dd38c34f68e42bc43de755a3 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Tue, 20 May 2025 21:40:27 +0800
Subject: [PATCH 4/7] feat: create item success

---
 src-tauri/src/dynamo_client.rs                  |  3 ++-
 src/lang/enUS.ts                                |  1 +
 src/lang/zhCN.ts                                |  1 +
 .../dynamo-editor/components/create-item.vue    | 17 +++++++++++++----
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src-tauri/src/dynamo_client.rs b/src-tauri/src/dynamo_client.rs
index 7881bb3d..be36a0b6 100644
--- a/src-tauri/src/dynamo_client.rs
+++ b/src-tauri/src/dynamo_client.rs
@@ -83,7 +83,8 @@ pub async fn dynamo_api(
                     let table_info = json!({
                         "id": response.table().and_then(|t| t.table_id()),
                         "name": response.table().map(|t| t.table_name()),
-                        "status": response.table().and_then(|t| t.table_status().map(|s| s.as_str().to_string())),                        "itemCount": response.table().and_then(|t| t.item_count()),
+                        "status": response.table().and_then(|t| t.table_status().map(|s| s.as_str().to_string())),
+                        "itemCount": response.table().and_then(|t| t.item_count()),
                         "sizeBytes": response.table().and_then(|t| t.table_size_bytes()),
                         "keySchema": response.table().and_then(|t| {
                             Some(t.key_schema().iter().map(|k| {
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 8df7439e..818d0040 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -214,6 +214,7 @@ export const enUS = {
       attributeTypeRequired: 'Attribute type is required',
       attributeValueRequired: 'Attribute value is required',
       operatorRequired: 'Filter operator is required',
+      createItemSuccess: 'Item created successfully!',
     },
   },
   file: {
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index cd39003e..50602bbb 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -214,6 +214,7 @@ export const zhCN = {
       attributeTypeRequired: '请输入属性类型',
       attributeValueRequired: '请输入属性值',
       operatorRequired: '请输入滤器操作符',
+      createItemSuccess: '数据添加成功!',
     },
   },
   file: {
diff --git a/src/views/editor/dynamo-editor/components/create-item.vue b/src/views/editor/dynamo-editor/components/create-item.vue
index adb65157..b25e283c 100644
--- a/src/views/editor/dynamo-editor/components/create-item.vue
+++ b/src/views/editor/dynamo-editor/components/create-item.vue
@@ -117,7 +117,12 @@
         <n-button type="warning" tertiary @click="handleReset">
           {{ $t('dialogOps.reset') }}
         </n-button>
-        <n-button type="primary" @click="handleSubmit" :disabled="!validationPassed">
+        <n-button
+          type="primary"
+          @click="handleSubmit"
+          :disabled="!validationPassed"
+          :loading="loadingRef.createItem"
+        >
           {{ $t('dialogOps.execute') }}
         </n-button>
       </div>
@@ -144,6 +149,8 @@ const { getDynamoIndexOrTableOption } = storeToRefs(connectionStore);
 const tabStore = useTabStore();
 const { activeConnection } = storeToRefs(tabStore);
 
+const loadingRef = ref({ createItem: false });
+
 const dynamoRecordFormRef = ref();
 const attributeType = ref([
   { label: 'String', value: 'S' },
@@ -250,6 +257,7 @@ const handleSubmit = async (event: MouseEvent) => {
   }
 
   try {
+    loadingRef.value.createItem = true;
     const { partitionKey } = activeConnection.value as DynamoDBConnection;
     const pkRecord = {
       key: partitionKey.name,
@@ -259,15 +267,16 @@ const handleSubmit = async (event: MouseEvent) => {
 
     const attributes = [pkRecord, ...dynamoRecordForm.value.attributes];
 
-    console.log('attributes', attributes);
-
-    // const result = await createItem(activeConnection.value as DynamoDBConnection, attributes);
+    await createItem(activeConnection.value as DynamoDBConnection, attributes);
+    message.success(lang.t('editor.dynamo.createItemSuccess'));
   } catch (error) {
     message.error(`status: ${(error as Error).name}, details: ${(error as Error).message}`, {
       closable: true,
       keepAliveOnHover: true,
       duration: 3600,
     });
+  } finally {
+    loadingRef.value.createItem = false;
   }
 };
 

From 0c4801efa05ef9fae2f60a4553b98985ad5013a3 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Tue, 20 May 2025 23:45:57 +0800
Subject: [PATCH 5/7] feat: list defined attributes when create item

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 src/datasources/dynamoApi.ts                  |  2 +-
 src/store/connectionStore.ts                  |  3 +
 .../dynamo-editor/components/create-item.vue  | 56 +++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/datasources/dynamoApi.ts b/src/datasources/dynamoApi.ts
index cf33b9fd..b02c7c1a 100644
--- a/src/datasources/dynamoApi.ts
+++ b/src/datasources/dynamoApi.ts
@@ -58,7 +58,7 @@ export type DynamoDBTableInfo = {
     valueType: string;
   };
   keySchema: KeySchema[];
-  attributeDefinitions?: AttributeDefinition[];
+  attributeDefinitions: AttributeDefinition[];
   indices?: DynamoIndex[];
   creationDateTime?: string;
 };
diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
index cbbecc91..7c21525d 100644
--- a/src/store/connectionStore.ts
+++ b/src/store/connectionStore.ts
@@ -3,6 +3,7 @@ import { buildAuthHeader, buildURL, CustomError, pureObject } from '../common';
 import { lang } from '../lang';
 import { SearchAction, transformToCurl } from '../common/monaco';
 import {
+  AttributeDefinition,
   dynamoApi,
   DynamoIndex,
   KeySchema,
@@ -52,6 +53,7 @@ export type DynamoDBConnection = {
     type: string;
     valueType: string;
   };
+  attributeDefinitions: Array<AttributeDefinition>;
   sortKey?: {
     name: string;
     type: string;
@@ -245,6 +247,7 @@ export const useConnectionStore = defineStore('connectionStore', {
         connection.indices = tableInfo.indices as DynamoIndex[];
         connection.partitionKey = tableInfo.partitionKey;
         connection.sortKey = tableInfo.sortKey;
+        connection.attributeDefinitions = tableInfo.attributeDefinitions;
       }
     },
     async selectIndex(con: Connection, indexName: string) {
diff --git a/src/views/editor/dynamo-editor/components/create-item.vue b/src/views/editor/dynamo-editor/components/create-item.vue
index b25e283c..88a2ad31 100644
--- a/src/views/editor/dynamo-editor/components/create-item.vue
+++ b/src/views/editor/dynamo-editor/components/create-item.vue
@@ -45,7 +45,60 @@
             </n-form-item>
           </n-grid-item>
         </n-grid>
+        <n-divider title-placement="left"> Key Attributes </n-divider>
+        <n-grid
+          v-for="(item, index) in selectedTable.keyAttributes"
+          :key="index"
+          :cols="24"
+          :x-gap="12"
+        >
+          <n-grid-item span="9">
+            <n-form-item :path="`keyAttributes[${index}].key`">
+              <n-input
+                v-model:value="item.attributeName"
+                :placeholder="$t('editor.dynamo.inputAttrName')"
+                disabled
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="4">
+            <n-form-item :path="`keyAttributes[${index}].type`">
+              <n-select
+                v-model:value="item.attributeType"
+                :placeholder="$t('editor.dynamo.type')"
+                disabled
+                :options="attributeType"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`keyAttributes[${index}].value`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.value"
+                :placeholder="$t('editor.dynamo.inputAttrValue')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="2">
+            <n-button quaternary circle @click="removeAttributeItem(index)">
+              <template #icon>
+                <n-icon>
+                  <Delete />
+                </n-icon>
+              </template>
+            </n-button>
+          </n-grid-item>
+        </n-grid>
         <!-- Dynamically additional form items -->
+        <n-divider title-placement="left"> Additional Attributes </n-divider>
         <n-grid
           v-for="(item, index) in dynamoRecordForm.attributes"
           :key="index"
@@ -172,6 +225,7 @@ const dynamoRecordForm = ref<{
   partitionKey: string;
   sortKey: string;
   attributes: Array<{ key: string; value: string; type: string }>;
+  keyAttributes: Array<{ key: string; value: string; type: string }>;
 }>({ partitionKey: '', sortKey: '', attributes: [] });
 
 const dynamoRecordFormRules = reactive<FormRules>({
@@ -218,6 +272,7 @@ const selectedTable = computed(() => {
       sortKeyName: undefined,
       partitionKeyLabel: undefined,
       sortKeyLabel: undefined,
+      keyAttributes: [],
     };
   }
 
@@ -228,6 +283,7 @@ const selectedTable = computed(() => {
     sortKeyName,
     partitionKeyLabel: partitionKeyName ? `${partitionKeyName}  (Partition Key):` : undefined,
     sortKeyLabel: sortKeyName ? `${sortKeyName} (Sort Key):` : undefined,
+    keyAttributes: activeConnection.value.attributeDefinitions ?? [],
   };
 });
 

From 57c4d44b1ea83b9ad6d71d99a4372671d65d6e74 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Wed, 21 May 2025 21:34:58 +0800
Subject: [PATCH 6/7] feat: create item with key attributes and sort key

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 components.d.ts                               |   1 -
 src/lang/enUS.ts                              |   1 +
 src/lang/zhCN.ts                              |   1 +
 .../dynamo-editor/components/create-item.vue  | 428 +++++++++++-------
 4 files changed, 254 insertions(+), 177 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index aa10bcf8..e617d85f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -52,7 +52,6 @@ declare module 'vue' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
-    NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NTooltip: typeof import('naive-ui')['NTooltip']
     PathBreadcrumb: typeof import('./src/components/path-breadcrumb.vue')['default']
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 818d0040..7b7c7840 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -206,6 +206,7 @@ export const enUS = {
       inputAttrValue: 'Enter attribute value',
       resultTitle: 'Query Result',
       indexIsRequired: 'Table/Index is required',
+      partitionKeyRequired: 'Table/Index Partition key is required',
       atLeastRequired: 'Partition key or at least 1 filter is required',
       scanWarning: 'Request without partitionKey will scan the table',
       createItem: 'Create Item',
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 50602bbb..f13120f8 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -205,6 +205,7 @@ export const zhCN = {
       type: '选择属性类型',
       inputAttrValue: '请输入属性的值',
       resultTitle: '查询结果',
+      partitionKeyRequired: '表/索引的 Partition Key 是必需的',
       indexIsRequired: '表/索引 是必需的',
       atLeastRequired: 'Partition Key 或至少 1 个过滤器是必需的',
       scanWarning: '未提供 Partition Key，执行 Scan 操作可能会导致性能问题',
diff --git a/src/views/editor/dynamo-editor/components/create-item.vue b/src/views/editor/dynamo-editor/components/create-item.vue
index 88a2ad31..a4b6c7ae 100644
--- a/src/views/editor/dynamo-editor/components/create-item.vue
+++ b/src/views/editor/dynamo-editor/components/create-item.vue
@@ -1,170 +1,176 @@
 <template>
-  <n-card>
-    <n-form
-      ref="dynamoRecordFormRef"
-      :model="dynamoRecordForm"
-      :rules="dynamoRecordFormRules"
-      label-placement="left"
-      require-mark-placement="right-hanging"
-      label-width="auto"
-    >
-      <n-card :title="$t('editor.dynamo.addAttributesTitle')">
-        <template #header-extra>
-          <n-icon size="26" @click="addAttributeItem" style="cursor: pointer">
-            <Add />
-          </n-icon>
-        </template>
-        <!-- First row with partition and sort key -->
-        <n-grid :cols="24" :x-gap="12">
-          <n-grid-item span="12">
-            <n-form-item
-              v-if="selectedTable.partitionKeyLabel"
-              :label="selectedTable.partitionKeyLabel"
-              path="partitionKey"
-              :input-props="inputProps"
-            >
-              <n-input
-                v-model:value="dynamoRecordForm.partitionKey"
-                :placeholder="$t('editor.dynamo.enterPartitionKey')"
-                :input-props="inputProps"
-              />
-            </n-form-item>
-          </n-grid-item>
+  <n-card class="create-item-container">
+    <n-card :title="$t('editor.dynamo.addAttributesTitle')" class="create-item-container">
+      <template #header-extra>
+        <n-icon size="26" @click="addAttributeItem" style="cursor: pointer">
+          <Add />
+        </n-icon>
+      </template>
+      <div class="form-container">
+        <div class="form-scroll-container">
+          <n-form
+            ref="dynamoRecordFormRef"
+            :model="dynamoRecordForm"
+            :rules="dynamoRecordFormRules"
+            label-placement="left"
+            require-mark-placement="right-hanging"
+            label-width="auto"
+            class="create-item-container"
+          >
+            <n-infinite-scroll style="height: 100%">
+              <!-- First row with partition and sort key -->
+              <n-grid :cols="24" :x-gap="12">
+                <n-grid-item span="10">
+                  <n-form-item
+                    v-if="selectedTable.partitionKeyLabel"
+                    :label="selectedTable.partitionKeyLabel"
+                    path="partitionKey"
+                  >
+                    <n-input
+                      v-model:value="dynamoRecordForm.partitionKey"
+                      :placeholder="$t('editor.dynamo.enterPartitionKey')"
+                      :input-props="inputProps"
+                    />
+                  </n-form-item>
+                </n-grid-item>
 
-          <n-grid-item span="12">
-            <n-form-item
-              v-if="selectedTable.sortKeyLabel"
-              :label="selectedTable.sortKeyLabel"
-              path="sortKey"
-              :input-props="inputProps"
-            >
-              <n-input
-                v-model:value="dynamoRecordForm.sortKey"
-                :placeholder="$t('editor.dynamo.enterSortKey')"
-              />
-            </n-form-item>
-          </n-grid-item>
-        </n-grid>
-        <n-divider title-placement="left"> Key Attributes </n-divider>
-        <n-grid
-          v-for="(item, index) in selectedTable.keyAttributes"
-          :key="index"
-          :cols="24"
-          :x-gap="12"
-        >
-          <n-grid-item span="9">
-            <n-form-item :path="`keyAttributes[${index}].key`">
-              <n-input
-                v-model:value="item.attributeName"
-                :placeholder="$t('editor.dynamo.inputAttrName')"
-                disabled
-              />
-            </n-form-item>
-          </n-grid-item>
-          <n-grid-item span="4">
-            <n-form-item :path="`keyAttributes[${index}].type`">
-              <n-select
-                v-model:value="item.attributeType"
-                :placeholder="$t('editor.dynamo.type')"
-                disabled
-                :options="attributeType"
-              />
-            </n-form-item>
-          </n-grid-item>
-          <n-grid-item span="9">
-            <n-form-item
-              :path="`keyAttributes[${index}].value`"
-              :rule="{
-                required: true,
-                message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
-                trigger: ['input', 'blur'],
-              }"
-            >
-              <n-input
-                v-model:value="item.value"
-                :placeholder="$t('editor.dynamo.inputAttrValue')"
-                :input-props="inputProps"
-              />
-            </n-form-item>
-          </n-grid-item>
-          <n-grid-item span="2">
-            <n-button quaternary circle @click="removeAttributeItem(index)">
-              <template #icon>
-                <n-icon>
-                  <Delete />
-                </n-icon>
-              </template>
-            </n-button>
-          </n-grid-item>
-        </n-grid>
-        <!-- Dynamically additional form items -->
-        <n-divider title-placement="left"> Additional Attributes </n-divider>
-        <n-grid
-          v-for="(item, index) in dynamoRecordForm.attributes"
-          :key="index"
-          :cols="24"
-          :x-gap="12"
-        >
-          <n-grid-item span="9">
-            <n-form-item
-              :path="`attributes[${index}].key`"
-              :rule="{
-                required: true,
-                message: `${lang.t('editor.dynamo.attributeNameRequired')}`,
-                trigger: ['input', 'blur'],
-              }"
-            >
-              <n-input
-                v-model:value="item.key"
-                :placeholder="$t('editor.dynamo.inputAttrName')"
-                :input-props="inputProps"
-              />
-            </n-form-item>
-          </n-grid-item>
-          <n-grid-item span="4">
-            <n-form-item
-              :path="`attributes[${index}].type`"
-              :rule="{
-                required: true,
-                message: `${lang.t('editor.dynamo.attributeTypeRequired')}`,
-                trigger: ['input', 'blur'],
-              }"
-            >
-              <n-select
-                v-model:value="item.type"
-                :placeholder="$t('editor.dynamo.type')"
-                :options="attributeType"
-              />
-            </n-form-item>
-          </n-grid-item>
-          <n-grid-item span="9">
-            <n-form-item
-              :path="`attributes[${index}].value`"
-              :rule="{
-                required: true,
-                message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
-                trigger: ['input', 'blur'],
-              }"
-            >
-              <n-input
-                v-model:value="item.value"
-                :placeholder="$t('editor.dynamo.inputAttrValue')"
-                :input-props="inputProps"
-              />
-            </n-form-item>
-          </n-grid-item>
-          <n-grid-item span="2">
-            <n-button quaternary circle @click="removeAttributeItem(index)">
-              <template #icon>
-                <n-icon>
-                  <Delete />
-                </n-icon>
-              </template>
-            </n-button>
-          </n-grid-item>
-        </n-grid>
-      </n-card>
-    </n-form>
+                <n-grid-item span="12">
+                  <n-form-item
+                    v-if="selectedTable.sortKeyLabel"
+                    :label="selectedTable.sortKeyLabel"
+                    path="sortKey"
+                  >
+                    <n-input
+                      v-model:value="dynamoRecordForm.sortKey"
+                      :placeholder="$t('editor.dynamo.enterSortKey')"
+                      :input-props="inputProps"
+                    />
+                  </n-form-item>
+                </n-grid-item>
+              </n-grid>
+              <n-divider title-placement="left"> Key Attributes</n-divider>
+              <n-grid
+                v-for="(item, index) in dynamoRecordForm.keyAttributes"
+                :key="index"
+                :cols="24"
+                :x-gap="12"
+              >
+                <n-grid-item span="8">
+                  <n-form-item :path="`keyAttributes[${index}].key`">
+                    <n-input
+                      v-model:value="item.key"
+                      :placeholder="$t('editor.dynamo.inputAttrName')"
+                      disabled
+                    />
+                  </n-form-item>
+                </n-grid-item>
+                <n-grid-item span="4">
+                  <n-form-item :path="`keyAttributes[${index}].type`">
+                    <n-select
+                      v-model:value="item.type"
+                      :placeholder="$t('editor.dynamo.type')"
+                      disabled
+                      :options="attributeType"
+                    />
+                  </n-form-item>
+                </n-grid-item>
+                <n-grid-item span="10">
+                  <n-form-item :path="`keyAttributes[${index}].value`">
+                    <n-input-number
+                      v-if="calcType(item.type) === 'number'"
+                      v-model:value="item.value as number"
+                      :placeholder="$t('editor.dynamo.inputAttrValue')"
+                      style="width: 100%"
+                    />
+                    <n-input
+                      v-else
+                      v-model:value="item.value as string"
+                      :placeholder="$t('editor.dynamo.inputAttrValue')"
+                      :input-props="inputProps"
+                    />
+                  </n-form-item>
+                </n-grid-item>
+                <n-grid-item span="2">
+                  <n-button quaternary circle @click="removeAttributeItem(index)">
+                    <template #icon>
+                      <n-icon>
+                        <Delete />
+                      </n-icon>
+                    </template>
+                  </n-button>
+                </n-grid-item>
+              </n-grid>
+              <!-- Dynamically additional form items -->
+              <n-divider title-placement="left"> Additional Attributes</n-divider>
+              <n-grid
+                v-for="(item, index) in dynamoRecordForm.attributes"
+                :key="index"
+                :cols="24"
+                :x-gap="12"
+              >
+                <n-grid-item span="8">
+                  <n-form-item
+                    :path="`attributes[${index}].key`"
+                    :rule="{
+                      required: true,
+                      message: `${lang.t('editor.dynamo.attributeNameRequired')}`,
+                      trigger: ['input', 'blur'],
+                    }"
+                  >
+                    <n-input
+                      v-model:value="item.key"
+                      :placeholder="$t('editor.dynamo.inputAttrName')"
+                      :input-props="inputProps"
+                    />
+                  </n-form-item>
+                </n-grid-item>
+                <n-grid-item span="4">
+                  <n-form-item
+                    :path="`attributes[${index}].type`"
+                    :rule="{
+                      required: true,
+                      message: `${lang.t('editor.dynamo.attributeTypeRequired')}`,
+                      trigger: ['input', 'blur'],
+                    }"
+                  >
+                    <n-select
+                      v-model:value="item.type"
+                      :placeholder="$t('editor.dynamo.type')"
+                      :options="attributeType"
+                    />
+                  </n-form-item>
+                </n-grid-item>
+                <n-grid-item span="10">
+                  <n-form-item
+                    :path="`attributes[${index}].value`"
+                    :rule="{
+                      required: true,
+                      message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
+                      trigger: ['input', 'blur'],
+                    }"
+                  >
+                    <n-input
+                      v-model:value="item.value as string"
+                      :placeholder="$t('editor.dynamo.inputAttrValue')"
+                      :input-props="inputProps"
+                    />
+                  </n-form-item>
+                </n-grid-item>
+                <n-grid-item span="2">
+                  <n-button quaternary circle @click="removeAttributeItem(index)">
+                    <template #icon>
+                      <n-icon>
+                        <Delete />
+                      </n-icon>
+                    </template>
+                  </n-button>
+                </n-grid-item>
+              </n-grid>
+            </n-infinite-scroll>
+          </n-form>
+        </div>
+      </div>
+    </n-card>
     <template #footer>
       <div class="card-footer">
         <n-button type="warning" tertiary @click="handleReset">
@@ -176,7 +182,7 @@
           :disabled="!validationPassed"
           :loading="loadingRef.createItem"
         >
-          {{ $t('dialogOps.execute') }}
+          {{ $t('dialogOps.create') }}
         </n-button>
       </div>
     </template>
@@ -224,9 +230,9 @@ const lang = useLang();
 const dynamoRecordForm = ref<{
   partitionKey: string;
   sortKey: string;
-  attributes: Array<{ key: string; value: string; type: string }>;
-  keyAttributes: Array<{ key: string; value: string; type: string }>;
-}>({ partitionKey: '', sortKey: '', attributes: [] });
+  attributes: Array<{ key: string; value: string | number | boolean | null; type: string }>;
+  keyAttributes: Array<{ key: string; value: string | number | boolean | null; type: string }>;
+}>({ partitionKey: '', sortKey: '', attributes: [], keyAttributes: [] });
 
 const dynamoRecordFormRules = reactive<FormRules>({
   index: [
@@ -255,7 +261,7 @@ const queryResult = ref<{
 });
 
 const addAttributeItem = () => {
-  dynamoRecordForm.value.attributes.push({ key: '', value: '', type: '' });
+  dynamoRecordForm.value.attributes.push({ key: '', value: null, type: '' });
 };
 
 const removeAttributeItem = (index: number) => {
@@ -272,7 +278,6 @@ const selectedTable = computed(() => {
       sortKeyName: undefined,
       partitionKeyLabel: undefined,
       sortKeyLabel: undefined,
-      keyAttributes: [],
     };
   }
 
@@ -283,10 +288,36 @@ const selectedTable = computed(() => {
     sortKeyName,
     partitionKeyLabel: partitionKeyName ? `${partitionKeyName}  (Partition Key):` : undefined,
     sortKeyLabel: sortKeyName ? `${sortKeyName} (Sort Key):` : undefined,
-    keyAttributes: activeConnection.value.attributeDefinitions ?? [],
   };
 });
 
+const calcType = (type: string) => {
+  switch (type) {
+    case 'S':
+      return 'text';
+    case 'N':
+      return 'number';
+    case 'BOOL':
+      return 'checkbox';
+    case 'B':
+      return 'text';
+    case 'NULL':
+      return 'text';
+    case 'L':
+      return 'text';
+    case 'M':
+      return 'text';
+    case 'SS':
+      return 'text';
+    case 'NS':
+      return 'number';
+    case 'BS':
+      return 'text';
+    default:
+      return 'text';
+  }
+};
+
 const validateForm = async () => {
   try {
     return await dynamoRecordFormRef.value?.validate(
@@ -314,14 +345,30 @@ const handleSubmit = async (event: MouseEvent) => {
 
   try {
     loadingRef.value.createItem = true;
-    const { partitionKey } = activeConnection.value as DynamoDBConnection;
+    const { partitionKey, sortKey } = activeConnection.value as DynamoDBConnection;
     const pkRecord = {
       key: partitionKey.name,
       value: dynamoRecordForm.value.partitionKey,
       type: partitionKey.valueType,
     };
+    const skRecord = {
+      key: sortKey?.name,
+      value: dynamoRecordForm.value.sortKey,
+      type: sortKey?.valueType,
+    };
+
+    const attributes = [
+      ...dynamoRecordForm.value.attributes,
+      ...dynamoRecordForm.value.keyAttributes,
+      pkRecord,
+      ...(skRecord.key ? [skRecord] : []),
+    ].filter(({ value }) => value !== null) as Array<{
+      key: string;
+      value: string | number | boolean | null;
+      type: string;
+    }>;
 
-    const attributes = [pkRecord, ...dynamoRecordForm.value.attributes];
+    console.log('attributes', attributes);
 
     await createItem(activeConnection.value as DynamoDBConnection, attributes);
     message.success(lang.t('editor.dynamo.createItemSuccess'));
@@ -337,17 +384,46 @@ const handleSubmit = async (event: MouseEvent) => {
 };
 
 const handleReset = () => {
-  dynamoRecordForm.value = { partitionKey: '', sortKey: '', attributes: [] };
+  dynamoRecordForm.value = { partitionKey: '', sortKey: '', attributes: [], keyAttributes: [] };
 
   if (dynamoRecordFormRef.value) {
     dynamoRecordFormRef.value.restoreValidation();
   }
 };
 
-fetchIndices(activeConnection.value as Connection);
+fetchIndices(activeConnection.value as Connection).then(() => {
+  const { partitionKey, sortKey, attributeDefinitions } =
+    activeConnection.value as DynamoDBConnection;
+
+  dynamoRecordForm.value.keyAttributes = attributeDefinitions
+    .map(({ attributeName, attributeType }) => ({
+      key: attributeName,
+      value: null,
+      type: attributeType,
+    }))
+    .filter(({ key }) => ![partitionKey.name, sortKey?.name].filter(Boolean).includes(key));
+  console.log('keyAttributes', dynamoRecordForm.value.keyAttributes);
+});
 </script>
 
 <style lang="scss" scoped>
+.create-item-container {
+  width: 100%;
+  height: 100%;
+
+  .form-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .form-scroll-container {
+      flex: 1;
+      height: 0;
+    }
+  }
+}
+
 .card-footer {
   display: flex;
   justify-content: flex-end;

From 36a68ffb5d2faa297b76adc63b2020c20d30e9de Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Wed, 21 May 2025 21:45:18 +0800
Subject: [PATCH 7/7] refactor: form validation

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 .../dynamo-editor/components/create-item.vue  | 33 +++++++------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/views/editor/dynamo-editor/components/create-item.vue b/src/views/editor/dynamo-editor/components/create-item.vue
index a4b6c7ae..38b76964 100644
--- a/src/views/editor/dynamo-editor/components/create-item.vue
+++ b/src/views/editor/dynamo-editor/components/create-item.vue
@@ -11,7 +11,6 @@
           <n-form
             ref="dynamoRecordFormRef"
             :model="dynamoRecordForm"
-            :rules="dynamoRecordFormRules"
             label-placement="left"
             require-mark-placement="right-hanging"
             label-width="auto"
@@ -25,6 +24,11 @@
                     v-if="selectedTable.partitionKeyLabel"
                     :label="selectedTable.partitionKeyLabel"
                     path="partitionKey"
+                    :rule="{
+                      required: true,
+                      message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
+                      trigger: ['input', 'blur'],
+                    }"
                   >
                     <n-input
                       v-model:value="dynamoRecordForm.partitionKey"
@@ -39,6 +43,11 @@
                     v-if="selectedTable.sortKeyLabel"
                     :label="selectedTable.sortKeyLabel"
                     path="sortKey"
+                    :rule="{
+                      required: true,
+                      message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
+                      trigger: ['input', 'blur'],
+                    }"
                   >
                     <n-input
                       v-model:value="dynamoRecordForm.sortKey"
@@ -195,7 +204,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { Add, Delete } from '@vicons/carbon';
-import { FormRules, FormValidationError } from 'naive-ui';
+import { FormValidationError } from 'naive-ui';
 import { Connection, DynamoDBConnection, useConnectionStore, useTabStore } from '../../../../store';
 import { inputProps } from '../../../../common';
 import { useLang } from '../../../../lang';
@@ -234,24 +243,6 @@ const dynamoRecordForm = ref<{
   keyAttributes: Array<{ key: string; value: string | number | boolean | null; type: string }>;
 }>({ partitionKey: '', sortKey: '', attributes: [], keyAttributes: [] });
 
-const dynamoRecordFormRules = reactive<FormRules>({
-  index: [
-    {
-      required: true,
-      renderMessage: () => lang.t('editor.dynamo.indexIsRequired'),
-      trigger: ['input', 'blur'],
-    },
-  ],
-  partitionKey: [
-    {
-      required: true,
-      renderMessage: () => lang.t('editor.dynamo.attributeValueRequired'),
-      level: 'error',
-      trigger: ['input', 'blur'],
-    },
-  ],
-});
-
 const queryResult = ref<{
   columns: Array<{ title: string; key: string }>;
   data: Array<Record<string, unknown>> | undefined;
@@ -368,8 +359,6 @@ const handleSubmit = async (event: MouseEvent) => {
       type: string;
     }>;
 
-    console.log('attributes', attributes);
-
     await createItem(activeConnection.value as DynamoDBConnection, attributes);
     message.success(lang.t('editor.dynamo.createItemSuccess'));
   } catch (error) {