添加创建应用功能

app/backend/src/modules/application/application.controller.ts

@@ -1,11 +1,12 @@
 import { QueryApplicationsResponseDTO } from './dto/query-applications-response.dto'
-import { Body, Controller, Delete, Get, Param, Put, Query } from '@nestjs/common'
+import { Body, Controller, Delete, Get, Param, Post, Put, Query } from '@nestjs/common'
 import { ApplicationService } from './application.service'
 import { RegisterApplicationDTO } from './dto/register-application.dto'
 import { QueryApplicationsDTO } from './dto/query-applications.dto'
 import { Application } from './entity/application.entity'
 import { ApiInternalServerErrorResponse, ApiOperation, ApiTags } from '@nestjs/swagger'
 import { EntityManager } from '@mikro-orm/core'
+import { CreateApplicationDTO } from './dto/create-application.dto'
 
 
 @ApiTags('Application')
@@ -25,6 +26,14 @@ export class ApplicationController {
     await this.applicationService.register(dto)
   }
 
+  @Post()
+  @ApiOperation({ summary: '创建应用' })
+  async createApplication(
+    @Body() dto: CreateApplicationDTO,
+  ): Promise<Application> {
+    return await this.applicationService.create(dto)
+  }
+
   @Get()
   @ApiOperation({ summary: '查询应用列表' })
   async queryApplications(

app/backend/src/modules/application/application.service.ts

@@ -6,6 +6,7 @@ import { InjectRepository } from '@mikro-orm/nestjs'
 import { QueryApplicationsDTO } from './dto/query-applications.dto'
 import { QueryApplicationsResponseDTO } from './dto/query-applications-response.dto'
 import { EntityRepository } from '@mikro-orm/mysql'
+import { CreateApplicationDTO } from './dto/create-application.dto'
 
 
 @Injectable()
@@ -38,6 +39,16 @@ export class ApplicationService {
     await this.em.persistAndFlush(application)
   }
 
+  async create(dto: CreateApplicationDTO): Promise<Application> {
+    const application = this.applicationRepo.create({
+      code: dto.code,
+      title: dto.title || dto.code,
+    })
+    await this.em.persistAndFlush(application)
+
+    return application
+  }
+
   async queryApplicationByIdOrCode(idOrCode: string): Promise<Application> {
     const app = await this.applicationRepo.findOneOrFail(
       {

app/backend/src/modules/application/dto/create-application.dto.ts

@@ -0,0 +1,7 @@
+import { TakeType } from '@miaooo/nestjs-take-type'
+import { Application } from '../entity/application.entity'
+
+
+export class CreateApplicationDTO extends TakeType(Application, ['code'], ['title']) {
+
+}

app/frontend/api/backend/components/schemas/create_application_dto.ts

@@ -0,0 +1,14 @@
+/**
+ * @interface CreateApplicationDTO
+ * @export
+ */
+export interface CreateApplicationDTO {
+  /**
+   * 应用名称
+   */
+  "title"?: string
+  /**
+   * 唯一应用编码
+   */
+  "code": string
+}

app/frontend/api/backend/components/schemas/index.ts

@@ -1,12 +1,12 @@
 export * from "./register_api_document_dto"
 export * from "./application"
-export * from "./sdk_publish_lock"
 export * from "./sdk"
 export * from "./api_document_file"
 export * from "./api_document"
 export * from "./page_dto"
 export * from "./query_api_documents_response_dto"
 export * from "./register_application_dto"
+export * from "./create_application_dto"
 export * from "./application_dto"
 export * from "./query_applications_response_dto"
 export * from "./example_dto"

app/frontend/api/backend/components/schemas/sdk.ts

@@ -1,6 +1,5 @@
 import { ApiDocument } from "./api_document"
 import { ApiDocumentFile } from "./api_document_file"
-import { SdkPublishLock } from "./sdk_publish_lock"
 
 
 /**
@@ -20,7 +19,6 @@ export interface Sdk {
    * 关联的文档文件
    */
   "apiDocumentFile": ApiDocumentFile
-  "sdkPublishLock"?: SdkPublishLock
   "scope": string
   /**
    * Npm包名

app/frontend/api/backend/create_application.ts

@@ -0,0 +1,35 @@
+import { Keq } from 'keq'
+import { request } from 'keq'
+import { Application } from "./components/schemas/application"
+import { CreateApplicationDTO } from "./components/schemas/create_application_dto"
+
+
+interface ResponseMap {
+  "201": Application
+  "500": unknown
+}
+
+
+interface QueryArg {
+}
+
+interface ParamArg {
+}
+
+interface HeaderArg {
+}
+
+
+export function createApplication<STATUS extends keyof ResponseMap>(arg?: QueryArg & ParamArg & HeaderArg & (CreateApplicationDTO)): Keq<ResponseMap[STATUS]> {
+  const req = request.post<ResponseMap[STATUS]>
+  ("/api/application")
+    .option('module', {
+      name: "backend",
+      pathname: "/api/application",
+    })
+
+  if (arg && "title" in arg) req.send({ "title": arg["title"] })
+  if (arg && "code" in arg) req.send({ "code": arg["code"] })
+
+  return req
+}

app/frontend/api/backend/index.ts

@@ -11,6 +11,7 @@ export * from "./query_sdk_by_api_document_id"
 export * from "./query_sdk_by_version"
 export * from "./query_api_document_files"
 export * from "./register_application"
+export * from "./create_application"
 export * from "./query_applications"
 export * from "./query_application"
 export * from "./delete_application"

app/frontend/components/application/create-modal.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { createApplication } from '~/api/backend/create_application.js'
+
+const show = defineModel<boolean>('show', {
+  default: false,
+})
+
+const emit = defineEmits<{
+  'created:application': [applicationId: string]
+}>()
+
+const title = ref('')
+const code = ref('')
+
+const creating = ref(false)
+
+async function create (): Promise<void> {
+  creating.value = true
+  try {
+    const application = await createApplication<'201'>({
+      code: code.value,
+      title: title.value,
+    })
+
+    show.value = false
+    emit('created:application', application.id)
+  } finally {
+    creating.value = false
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <dialog class="d-modal" :class="show && 'd-modal-open'">
+      <div class="d-modal-box font-sans !border-[#5b6078]">
+        <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">应用名/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>
+              <span class="d-label-alt text-base-content/40">创建后无法修改</span>
+            </div>
+
+            <input
+              v-model="code"
+              class="d-input d-input-bordered w-full"
+              placeholder="只允许小写字母、数字和中线"
+            >
+          </div>
+        </div>
+
+        <div class="d-modal-action flex-0 space-x-6">
+          <button class="d-btn" @click="show = false">
+            取消
+          </button>
+
+          <button class="d-btn d-btn-primary" @click="create">
+            创建
+          </button>
+        </div>
+      </div>
+    </dialog>
+  </Teleport>
+</template>
+
+<style scoped lang="postcss">
+</style>

app/frontend/pages/applications.vue

@@ -14,7 +14,7 @@ const pagination = reactive({
   offset: 0,
 })
 
-const { pending } = useAsyncData(
+const { pending, refresh } = useAsyncData(
   async () => {
     const body = await queryApplications<'200'>({
       limit: pagination.limit,
@@ -26,49 +26,60 @@ const { pending } = useAsyncData(
   },
 )
 
+const showCreateModal = ref(false)
 </script>
 
 <template>
   <NuxtLoadingIndicator v-if="pending" />
 
-  <div class="container mx-auto flex flex-col font-mono">
-    <div class="flex-0 py-4 flex items-center justify-between">
-      <h1 class="select-none text-5xl font-bold text-gray-600">
-        Applications
-      </h1>
+  <ApplicationCreateModal
+    v-model:show="showCreateModal"
+    @created:application="() => refresh()"
+  />
 
-      <button class="d-btn d-btn-square d-btn-lg d-btn-ghost">
-        <IconSettings class="w-8 h-8" />
-      </button>
-    </div>
+  <div class="flex flex-col font-mono relative overflow-y-auto size-full">
+    <div class="z-10 bg-base-100 sticky top-0 container m-auto flex-0 pb-4">
+      <div class="flex items-center justify-between py-4">
+        <h1 class="select-none text-5xl font-bold text-gray-600">
+          Applications
+        </h1>
 
-    <div class="flex-0 flex items-center justify-between">
-      <div class="d-join  w-1/2 flex">
-        <SelectBox>
-          <SelectButton
-            class="d-join-item d-select-lg d-select-bordered"
-          >
-            Title
-          </SelectButton>
+        <button class="d-btn d-btn-square d-btn-lg d-btn-ghost">
+          <IconSettings class="w-8 h-8" />
+        </button>
+      </div>
 
-          <template #options>
-            <SelectOption class="d-btn-lg" selected>
+      <div class="flex items-center justify-between">
+        <div class="d-join  w-1/2 flex">
+          <SelectBox value="title">
+            <SelectButton
+              class="d-join-item d-select-lg d-select-bordered"
+            >
               Title
-            </SelectOption>
-            <SelectOption class="d-btn-lg">
-              Tag
-            </SelectOption>
-          </template>
-        </SelectBox>
-        <input class="d-join-item flex-auto d-input d-input-bordered d-input-lg" type="text" placeholder="Search">
-      </div>
+            </SelectButton>
 
-      <button class="d-btn d-btn-lg d-btn-primary">
-        Create Application
-      </button>
+            <template #options>
+              <SelectOption class="d-btn-lg" value="title">
+                Title
+              </SelectOption>
+              <SelectOption class="d-btn-lg" value="tag">
+                Tag
+              </SelectOption>
+            </template>
+          </SelectBox>
+          <input class="d-join-item flex-auto d-input d-input-bordered d-input-lg" type="text" placeholder="Search">
+        </div>
+
+        <button
+          class="d-btn d-btn-lg d-btn-primary"
+          @click="showCreateModal = true"
+        >
+          Create Application
+        </button>
+      </div>
     </div>
 
-    <div class="flex-auto pt-6">
+    <div class="container m-auto flex-auto pt-6">
       <div v-for="application in applications" :key="application.id">
         <application-preview-card :application="application" />
       </div>