diff --git a/app/frontend/components/application/settings-modal.vue b/app/frontend/components/application/settings-modal.vue
index af15bfa..54a6bda 100644
--- a/app/frontend/components/application/settings-modal.vue
+++ b/app/frontend/components/application/settings-modal.vue
@@ -16,6 +16,7 @@ defineEmits<{
 }>()
 
 const active = ref('0')
+const activeApiDocument = computed(() => application.value.apiDocuments.find(item => item.id === active.value))
 </script>
 
 <template>
@@ -56,6 +57,11 @@ const active = ref('0')
                 :application="application"
                 @changed:application="$emit('changed:application', $event)"
               />
+
+              <application-settings-modal-api-document-settings
+                v-else-if="activeApiDocument"
+                :api-document="activeApiDocument"
+              />
             </div>
 
             <div class="d-modal-action flex-0">
diff --git a/app/frontend/components/application/settings-modal/api-document-settings.vue b/app/frontend/components/application/settings-modal/api-document-settings.vue
new file mode 100644
index 0000000..8595c89
--- /dev/null
+++ b/app/frontend/components/application/settings-modal/api-document-settings.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ApiDocument } from '~/api/backend/components/schemas'
+
+const props = defineProps<{
+  apiDocument: ApiDocument
+}>()
+
+const code = toRef(() => props.apiDocument.code)
+const title = ref('')
+syncRef(title, toRef(() => props.apiDocument.title), { direction: 'rtl' })
+const cronSyncUrl = ref('')
+syncRef(
+  cronSyncUrl,
+  toRef(() => props.apiDocument.cronSyncUrl),
+  {
+    direction: 'rtl',
+    transform: { rtl: r => r || '' },
+  },
+)
+const type = ref<ApiDocument['type']>('openapi')
+syncRef(type, toRef(() => props.apiDocument.type), { direction: 'rtl' })
+
+const typeDescription: Record<ApiDocument['type'], string> = {
+  openapi: 'OpenAPI',
+  asyncapi: 'AsyncAPI',
+  markdown: 'Markdown',
+}
+
+watch(
+  () => props.apiDocument.id,
+  () => {
+    title.value = props.apiDocument.title
+  },
+)
+</script>
+
+<template>
+  <div class="flex flex-col space-y-4">
+    <div class="form-control w-full max-w-md">
+      <div class="d-label">
+        <span class="d-label-text">类型/Type</span>
+      </div>
+
+      <SelectBox v-model="type">
+        <SelectButton
+          class="d-join-item d-select-bordered"
+        >
+          {{ typeDescription[type] }}
+        </SelectButton>
+
+        <template #options>
+          <SelectOption value="openapi">
+            OpenAPI
+          </SelectOption>
+          <SelectOption value="asyncapi">
+            AsyncAPI
+          </SelectOption>
+          <SelectOption value="markdown">
+            Markdown
+          </SelectOption>
+        </template>
+      </SelectBox>
+    </div>
+
+    <div class="form-control w-full max-w-md">
+      <div class="d-label">
+        <span class="d-label-text">文档名/Title</span>
+      </div>
+
+      <input
+        v-model="title"
+        class="d-input d-input-bordered w-full"
+      >
+    </div>
+
+    <div class="form-control w-full max-w-md">
+      <div class="d-label">
+        <span class="d-label-text">文档编码/Code</span>
+      </div>
+
+      <input
+        :value="code"
+        disabled
+        class="d-input d-input-bordered w-full"
+        placeholder="大小写字母、下划线或中线"
+      >
+    </div>
+
+    <div class="form-control w-full max-w-md">
+      <div class="d-label">
+        <span class="d-label-text">同步地址</span>
+      </div>
+
+      <input
+        :value="cronSyncUrl"
+        class="d-input d-input-bordered w-full"
+        placeholder="大小写字母、下划线或中线"
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+</style>
diff --git a/app/frontend/components/application/settings-modal/application-settings.vue b/app/frontend/components/application/settings-modal/application-settings.vue
index d845595..f48f06b 100644
--- a/app/frontend/components/application/settings-modal/application-settings.vue
+++ b/app/frontend/components/application/settings-modal/application-settings.vue
@@ -10,7 +10,8 @@ const emit = defineEmits<{
   'changed:application': [code: string]
 }>()
 
-const title = ref(props.application.title)
+const title = ref('')
+syncRef(title, toRef(() => props.application.title), { direction: 'rtl' })
 
 watchDebounced(
   [title],
diff --git a/app/frontend/components/select/box.vue b/app/frontend/components/select/box.vue
index 5c9cd1a..5a3b797 100644
--- a/app/frontend/components/select/box.vue
+++ b/app/frontend/components/select/box.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { SELECT_VISIBLE_INJECT_KEY } from './constants'
+import { SELECT_VISIBLE_INJECT_KEY, SELECT_VALUE_INJECT_KEY } from './constants'
+
+const model = defineModel<string>()
+provide(SELECT_VALUE_INJECT_KEY, model)
+
 const optionsVisible = ref(false)
 
 function toggleOptionsVisible (visible?: boolean) {
diff --git a/app/frontend/components/select/button.vue b/app/frontend/components/select/button.vue
index 8b35366..22f61c5 100644
--- a/app/frontend/components/select/button.vue
+++ b/app/frontend/components/select/button.vue
@@ -8,8 +8,6 @@ const { visible, toggleVisible } = inject(SELECT_VISIBLE_INJECT_KEY, {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   toggleVisible: (visible: boolean) => {},
 })
-
-defineEmits(['click'])
 </script>
 
 <template>
diff --git a/app/frontend/components/select/constants.ts b/app/frontend/components/select/constants.ts
index cb8e86e..1311d98 100644
--- a/app/frontend/components/select/constants.ts
+++ b/app/frontend/components/select/constants.ts
@@ -4,3 +4,5 @@ export const SELECT_VISIBLE_INJECT_KEY = Symbol('SELECT_VISIBLE_INJECT_KEY') as
   visible: Ref<boolean>
   toggleVisible: (visible?: boolean) => void
 }>
+
+export const SELECT_VALUE_INJECT_KEY = Symbol('SELECT_VALUE_KEY') as InjectionKey<Ref<string | undefined>>
diff --git a/app/frontend/components/select/option.vue b/app/frontend/components/select/option.vue
index 4d09fad..abd3a04 100644
--- a/app/frontend/components/select/option.vue
+++ b/app/frontend/components/select/option.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { IconCheck } from '@tabler/icons-vue'
-import { SELECT_VISIBLE_INJECT_KEY } from './constants'
+import { SELECT_VALUE_INJECT_KEY, SELECT_VISIBLE_INJECT_KEY } from './constants'
 
 const props = defineProps<{
-  selected?: boolean
+  value: string
 }>()
 
+const selectedValue = inject(SELECT_VALUE_INJECT_KEY, toRef(''))
+const selected = computed(() => props.value === selectedValue.value)
+
 const { toggleVisible } = inject(SELECT_VISIBLE_INJECT_KEY, {
   visible: toRef(false),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -16,11 +19,14 @@ const { toggleVisible } = inject(SELECT_VISIBLE_INJECT_KEY, {
 <template>
   <li
     class="d-join-item d-btn relative w-44"
-    @click="toggleVisible(false)"
+    @click="() => {
+      toggleVisible(false)
+      selectedValue = props.value
+    }"
   >
     <div class="absolute top-0 left-7 w-6 h-full flex items-center">
       <IconCheck
-        v-if="props.selected"
+        v-if="selected"
         class="text-primary w-6 h-6"
         aria-hidden="true"
       />