feat: 数据库管理优化1

web/src/views/database/CreateDatabaseModal.vue

@@ -76,7 +76,7 @@ onMounted(() => {
           v-model:value="createModel.username"
           type="text"
           @keydown.enter.prevent
-          placeholder="输入授权用户名"
+          placeholder="输入授权用户名（留空不授权）"
         />
       </n-form-item>
       <n-form-item v-if="createModel.create_user" path="username" label="用户名">

web/src/views/database/CreateServerModal.vue

@@ -18,6 +18,17 @@ const databaseType = [
   { label: 'PostgreSQL', value: 'postgresql' }
 ]
 
+watch(
+  () => createModel.value.type,
+  (value) => {
+    if (value === 'mysql') {
+      createModel.value.port = 3306
+    } else if (value === 'postgresql') {
+      createModel.value.port = 5432
+    }
+  }
+)
+
 const handleCreate = () => {
   useRequest(() => database.serverCreate(createModel.value)).onSuccess(() => {
     show.value = false
@@ -31,7 +42,7 @@ const handleCreate = () => {
   <n-modal
     v-model:show="show"
     preset="card"
-    title="添加数据库服务器"
+    title="添加服务器"
     style="width: 60vw"
     size="huge"
     :bordered="false"

web/src/views/database/CreateUserModal.vue

@@ -4,34 +4,47 @@ import { NButton, NInput } from 'naive-ui'
 
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
 const createModel = ref({
-  name: '',
-  type: 'mysql',
-  host: '127.0.0.1',
-  port: 3306,
+  server_id: null,
   username: '',
   password: '',
+  host: 'localhost',
+  privileges: [],
   remark: ''
 })
 
-const databaseType = [
-  { label: 'MySQL', value: 'mysql' },
-  { label: 'PostgreSQL', value: 'postgresql' }
+const servers = ref<{ label: string; value: string }[]>([])
+
+const hostType = [
+  { label: '本地（localhost）', value: 'localhost' },
+  { label: '所有（%）', value: '%' },
+  { label: '指定', value: '' }
 ]
 
 const handleCreate = () => {
-  useRequest(() => database.serverCreate(createModel.value)).onSuccess(() => {
+  useRequest(() => database.userCreate(createModel.value)).onSuccess(() => {
     show.value = false
-    window.$message.success('添加成功')
-    window.$bus.emit('database:refresh')
+    window.$message.success('创建成功')
+    window.$bus.emit('database-user: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>
   <n-modal
     v-model:show="show"
     preset="card"
-    title="添加数据库服务器"
+    title="创建用户"
     style="width: 60vw"
     size="huge"
     :bordered="false"
@@ -39,51 +52,20 @@ const handleCreate = () => {
     @close="show = false"
   >
     <n-form :model="createModel">
-      <n-form-item path="name" label="名称">
-        <n-input
-          v-model:value="createModel.name"
-          type="text"
-          @keydown.enter.prevent
-          placeholder="输入数据库服务器名称"
-        />
-      </n-form-item>
-      <n-form-item path="type" label="类型">
+      <n-form-item path="server_id" label="服务器">
         <n-select
-          v-model:value="createModel.type"
+          v-model:value="createModel.server_id"
           @keydown.enter.prevent
-          placeholder="选择数据库类型"
-          :options="databaseType"
+          placeholder="选择服务器"
+          :options="servers"
         />
       </n-form-item>
-      <n-row :gutter="[0, 24]">
-        <n-col :span="15">
-          <n-form-item path="host" label="主机">
-            <n-input
-              v-model:value="createModel.host"
-              type="text"
-              @keydown.enter.prevent
-              placeholder="输入数据库服务器主机"
-            />
-          </n-form-item>
-        </n-col>
-        <n-col :span="2"></n-col>
-        <n-col :span="7">
-          <n-form-item path="port" label="端口">
-            <n-input-number
-              w-full
-              v-model:value="createModel.port"
-              @keydown.enter.prevent
-              placeholder="输入数据库服务器端口"
-            />
-          </n-form-item>
-        </n-col>
-      </n-row>
       <n-form-item path="username" label="用户名">
         <n-input
           v-model:value="createModel.username"
           type="text"
           @keydown.enter.prevent
-          placeholder="输入数据库服务器用户名"
+          placeholder="输入用户名"
         />
       </n-form-item>
       <n-form-item path="password" label="密码">
@@ -91,15 +73,34 @@ const handleCreate = () => {
           v-model:value="createModel.password"
           type="password"
           @keydown.enter.prevent
-          placeholder="输入数据库服务器密码"
+          placeholder="输入密码"
         />
       </n-form-item>
+      <n-form-item path="host-select" label="主机">
+        <n-select
+          v-model:value="createModel.host"
+          @keydown.enter.prevent
+          placeholder="选择主机"
+          :options="hostType"
+        />
+      </n-form-item>
+      <n-form-item v-if="createModel.host === ''" path="host" label="指定主机">
+        <n-input
+          v-model:value="createModel.host"
+          type="text"
+          @keydown.enter.prevent
+          placeholder="输入受支持的主机地址"
+        />
+      </n-form-item>
+      <n-form-item path="privileges" label="授权">
+        <n-dynamic-input v-model:value="createModel.privileges" placeholder="输入数据库名" />
+      </n-form-item>
       <n-form-item path="remark" label="备注">
         <n-input
           v-model:value="createModel.remark"
           type="textarea"
           @keydown.enter.prevent
-          placeholder="输入数据库服务器备注"
+          placeholder="输入数据库用户备注"
         />
       </n-form-item>
     </n-form>

web/src/views/database/IndexView.vue

@@ -29,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

@@ -73,6 +73,35 @@ const columns: any = [
       })
     }
   },
+  {
+    title: '备注',
+    key: 'remark',
+    minWidth: 250,
+    resizable: true,
+    ellipsis: { tooltip: true },
+    render(row: any) {
+      return h(NInput, {
+        size: 'small',
+        value: row.remark,
+        onBlur: () => handleRemark(row),
+        onUpdateValue(v) {
+          row.remark = v
+        }
+      })
+    }
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+    render(row: any) {
+      return h(
+        NTag,
+        { type: row.status === 'valid' ? 'success' : 'error' },
+        { default: () => (row.status === 'valid' ? '有效' : '无效') }
+      )
+    }
+  },
   {
     title: '更新日期',
     key: 'updated_at',
@@ -165,6 +194,12 @@ const handleDelete = async (id: number) => {
   })
 }
 
+const handleRemark = (row: any) => {
+  database.serverRemark(row.id, row.remark).then(() => {
+    window.$message.success('修改成功')
+  })
+}
+
 onMounted(() => {
   window.$bus.on('database-server:refresh', () => {
     refresh()

web/src/views/database/UserList.vue

@@ -84,14 +84,26 @@ const columns: any = [
     render(row: any) {
       return h(NInput, {
         size: 'small',
-        value: row.remark
-        /*onBlur: () => handleRemark(row),
+        value: row.remark,
+        onBlur: () => handleRemark(row),
         onUpdateValue(v) {
           row.remark = v
-        }*/
+        }
       })
     }
   },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+    render(row: any) {
+      return h(
+        NTag,
+        { type: row.status === 'valid' ? 'success' : 'error' },
+        { default: () => (row.status === 'valid' ? '有效' : '无效') }
+      )
+    }
+  },
   {
     title: '更新日期',
     key: 'updated_at',
@@ -155,6 +167,12 @@ const handleDelete = async (id: number) => {
   })
 }
 
+const handleRemark = (row: any) => {
+  database.userRemark(row.id, row.remark).then(() => {
+    window.$message.success('修改成功')
+  })
+}
+
 onMounted(() => {
   window.$bus.on('database-user:refresh', () => {
     refresh()