增加文档配置编辑功能

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">

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>

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],

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) {

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>

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>>

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"
       />