feat: 数据库管理基本完成

web/src/views/database/CreateDatabaseModal.vue

@@ -4,12 +4,16 @@ import { NButton, NInput } from 'naive-ui'
 
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const createModel = ref({
-  database: '',
+  server_id: null,
+  name: '',
+  create_user: false,
   username: '',
   password: '',
   host: 'localhost'
 })
 
+const servers = ref<{ label: string; value: string }[]>([])
+
 const hostType = [
   { label: '本地（localhost）', value: 'localhost' },
   { label: '所有（%）', value: '%' },
@@ -23,6 +27,17 @@ const handleCreate = () => {
     window.$bus.emit('database:refresh')
   })
 }
+
+onMounted(() => {
+  database.serverList(1, 10000).then((data: any) => {
+    for (const server of data.items) {
+      servers.value.push({
+        label: server.name,
+        value: server.id
+      })
+    }
+  })
+})
 </script>
 
 <template>
@@ -37,15 +52,34 @@ const handleCreate = () => {
     @close="show = false"
   >
     <n-form :model="createModel">
+      <n-form-item path="server_id" label="服务器">
+        <n-select
+          v-model:value="createModel.server_id"
+          @keydown.enter.prevent
+          placeholder="选择服务器"
+          :options="servers"
+        />
+      </n-form-item>
       <n-form-item path="database" label="数据库名">
         <n-input
-          v-model:value="createModel.database"
+          v-model:value="createModel.name"
           type="text"
           @keydown.enter.prevent
           placeholder="输入数据库名称"
         />
       </n-form-item>
-      <n-form-item path="username" label="用户名">
+      <n-form-item path="create_user" label="创建用户">
+        <n-switch v-model:value="createModel.create_user" />
+      </n-form-item>
+      <n-form-item v-if="!createModel.create_user" path="username" label="授权用户">
+        <n-input
+          v-model:value="createModel.username"
+          type="text"
+          @keydown.enter.prevent
+          placeholder="输入授权用户名"
+        />
+      </n-form-item>
+      <n-form-item v-if="createModel.create_user" path="username" label="用户名">
         <n-input
           v-model:value="createModel.username"
           type="text"
@@ -53,7 +87,7 @@ const handleCreate = () => {
           placeholder="输入用户名"
         />
       </n-form-item>
-      <n-form-item path="password" label="密码">
+      <n-form-item v-if="createModel.create_user" path="password" label="密码">
         <n-input
           v-model:value="createModel.password"
           type="password"
@@ -61,7 +95,7 @@ const handleCreate = () => {
           placeholder="输入密码"
         />
       </n-form-item>
-      <n-form-item path="host-select" label="主机">
+      <n-form-item v-if="createModel.create_user" path="host-select" label="主机">
         <n-select
           v-model:value="createModel.host"
           @keydown.enter.prevent
@@ -69,7 +103,11 @@ const handleCreate = () => {
           :options="hostType"
         />
       </n-form-item>
-      <n-form-item v-if="createModel.host === ''" path="host" label="指定主机">
+      <n-form-item
+        v-if="createModel.create_user && createModel.host === ''"
+        path="host"
+        label="指定主机"
+      >
         <n-input
           v-model:value="createModel.host"
           type="text"

web/src/views/database/DatabaseList.vue

@@ -5,6 +5,29 @@ import { NButton, NPopconfirm, NTag } from 'naive-ui'
 import database from '@/api/panel/database'
 
 const columns: any = [
+  {
+    title: '类型',
+    key: 'type',
+    width: 150,
+    render(row: any) {
+      return h(
+        NTag,
+        { type: 'info' },
+        {
+          default: () => {
+            switch (row.type) {
+              case 'mysql':
+                return 'MySQL'
+              case 'postgresql':
+                return 'PostgreSQL'
+              default:
+                return row.type
+            }
+          }
+        }
+      )
+    }
+  },
   {
     title: '数据库名',
     key: 'name',
@@ -15,12 +38,12 @@ const columns: any = [
   {
     title: '服务器',
     key: 'server',
-    width: 300
+    width: 150
   },
   {
     title: '编码',
     key: 'encoding',
-    width: 200,
+    width: 150,
     render(row: any) {
       return h(NTag, null, {
         default: () => row.encoding
@@ -96,7 +119,7 @@ onUnmounted(() => {
   <n-data-table
     striped
     remote
-    :scroll-x="1200"
+    :scroll-x="800"
     :loading="loading"
     :columns="columns"
     :data="data"

web/src/views/database/IndexView.vue

@@ -5,6 +5,7 @@ defineOptions({
 
 import CreateDatabaseModal from '@/views/database/CreateDatabaseModal.vue'
 import CreateServerModal from '@/views/database/CreateServerModal.vue'
+import CreateUserModal from '@/views/database/CreateUserModal.vue'
 import DatabaseList from '@/views/database/DatabaseList.vue'
 import ServerList from '@/views/database/ServerList.vue'
 import UserList from '@/views/database/UserList.vue'
@@ -28,10 +29,10 @@ const createServerModalShow = ref(false)
         <TheIcon :size="18" icon="material-symbols:add" />
         创建数据库
       </n-button>
-      <n-button v-if="currentTab === 'user'" type="primary" @click="createUserModalShow = true">
+      <!--<n-button v-if="currentTab === 'user'" type="primary" @click="createUserModalShow = true">
         <TheIcon :size="18" icon="material-symbols:add" />
         创建用户
-      </n-button>
+      </n-button>-->
       <n-button v-if="currentTab === 'server'" type="primary" @click="createServerModalShow = true">
         <TheIcon :size="18" icon="material-symbols:add" />
         添加服务器

web/src/views/database/ServerList.vue

@@ -6,13 +6,6 @@ import database from '@/api/panel/database'
 import { formatDateTime } from '@/utils'
 
 const columns: any = [
-  {
-    title: '名称',
-    key: 'name',
-    minWidth: 100,
-    resizable: true,
-    ellipsis: { tooltip: true }
-  },
   {
     title: '类型',
     key: 'type',
@@ -36,6 +29,13 @@ const columns: any = [
       )
     }
   },
+  {
+    title: '名称',
+    key: 'name',
+    minWidth: 100,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '用户名',
     key: 'username',
@@ -48,7 +48,7 @@ const columns: any = [
   {
     title: '密码',
     key: 'password',
-    width: 200,
+    width: 150,
     render(row: any) {
       return h(NInputGroup, null, {
         default: () => [
@@ -66,7 +66,7 @@ const columns: any = [
   {
     title: '主机',
     key: 'host',
-    width: 200,
+    width: 150,
     render(row: any) {
       return h(NTag, null, {
         default: () => `${row.host}:${row.port}`

web/src/views/database/UserList.vue

@@ -6,6 +6,29 @@ import database from '@/api/panel/database'
 import { formatDateTime } from '@/utils'
 
 const columns: any = [
+  {
+    title: '类型',
+    key: 'type',
+    width: 150,
+    render(row: any) {
+      return h(
+        NTag,
+        { type: 'info' },
+        {
+          default: () => {
+            switch (row.server.type) {
+              case 'mysql':
+                return 'MySQL'
+              case 'postgresql':
+                return 'PostgreSQL'
+              default:
+                return row.server.type
+            }
+          }
+        }
+      )
+    }
+  },
   {
     title: '用户名',
     key: 'username',
@@ -27,7 +50,8 @@ const columns: any = [
             value: row.password,
             type: 'password',
             showPasswordOn: 'click',
-            readonly: true
+            readonly: true,
+            placeholder: '未保存'
           })
         ]
       })
@@ -36,13 +60,21 @@ const columns: any = [
   {
     title: '主机',
     key: 'host',
-    width: 200,
+    width: 150,
     render(row: any) {
       return h(NTag, null, {
         default: () => row.host
       })
     }
   },
+  {
+    title: '服务器',
+    key: 'server',
+    width: 150,
+    render(row: any) {
+      return row.server.name
+    }
+  },
   {
     title: '备注',
     key: 'remark',
@@ -138,7 +170,7 @@ onUnmounted(() => {
   <n-data-table
     striped
     remote
-    :scroll-x="1200"
+    :scroll-x="1400"
     :loading="loading"
     :columns="columns"
     :data="data"