diff --git a/src/api/database.ts b/src/api/database.ts
new file mode 100644
index 00000000..9730337c
--- /dev/null
+++ b/src/api/database.ts
@@ -0,0 +1,93 @@
+import request from "@/utils/request";
+
+const DATABASE_BASE_URL = "/api/v1/databases";
+
+class DatabaseAPI {
+  /** 获取数据表分页列表 */
+  static getTablePage(params: TablePageQuery) {
+    return request<any, PageResult<TablePageVO[]>>({
+      url: `${DATABASE_BASE_URL}/table/page`,
+      method: "get",
+      params: params,
+    });
+  }
+
+  /** 获取代码生成预览数据 */
+  static getTableColumns(tableName: string) {
+    return request<any, TableColumnVO[]>({
+      url: `${DATABASE_BASE_URL}/${tableName}/columns`,
+      method: "get",
+    });
+  }
+
+  /** 获取代码生成预览数据 */
+  static getPreviewData(tableName: string) {
+    return request<any, GeneratorPreviewVO>({
+      url: `${DATABASE_BASE_URL}/table/${tableName}/generate-preview`,
+      method: "get",
+    });
+  }
+}
+
+export default DatabaseAPI;
+
+/** 代码生成预览对象 */
+export interface GeneratorPreviewVO {
+  /** 文件生成路径 */
+  path: string;
+  /** 文件名称 */
+  fileName: string;
+  /** 文件内容 */
+  content: string;
+}
+
+/**  数据表分页查询参数 */
+export interface TablePageQuery extends PageQuery {
+  /** 关键字(表名) */
+  keywords?: string;
+}
+
+/** 数据表分页对象 */
+export interface TablePageVO {
+  /** 表名称 */
+  tableName: string;
+
+  /** 表描述 */
+  tableComment: string;
+
+  /** 存储引擎 */
+  engine: string;
+
+  /** 字符集排序规则 */
+  tableCollation: string;
+
+  /** 创建时间 */
+  createTime: string;
+}
+
+/** 数据表字段VO */
+export interface TableColumnVO {
+  /** 字段名称 */
+  columnName: string;
+
+  /** 字段类型 */
+  dataType: string;
+
+  /** 字段描述 */
+  columnComment: string;
+
+  /** 字段长度 */
+  characterMaximumLength: number;
+
+  /** 是否主键(1-是 0-否) */
+  isPrimaryKey: number;
+
+  /** 是否可为空(1-是 0-否) */
+  isNullable: string;
+
+  /** 字符集 */
+  characterSetName: string;
+
+  /** 字符集排序规则 */
+  collationName: string;
+}
diff --git a/src/api/generator.ts b/src/api/generator.ts
deleted file mode 100644
index f1876e2a..00000000
--- a/src/api/generator.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import request from "@/utils/request";
-
-const USER_BASE_URL = "/api/v1/generators";
-
-class GeneratorAPI {
-  /**
-   * 获取代码生成预览数据
-   */
-  static getPreviewData(tableName: string) {
-    return request<any, GeneratorPreviewVO>({
-      url: `${USER_BASE_URL}/preview/${tableName}`,
-      method: "get",
-    });
-  }
-}
-
-export default GeneratorAPI;
-
-/** 代码生成预览对象 */
-export interface GeneratorPreviewVO {}
diff --git a/src/views/generator/index.vue b/src/views/generator/index.vue
index 4aef9e2e..f00703a9 100644
--- a/src/views/generator/index.vue
+++ b/src/views/generator/index.vue
@@ -1,8 +1,111 @@
 <template>
   <div class="app-container">
-    <el-alert type="info" show-icon class="text-lg font-bold">
-      前后端代码生成器开发中，敬请期待...
-    </el-alert>
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item prop="keywords" label="关键字">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="表名"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">
+            <i-ep-search />
+            搜索
+          </el-button>
+          <el-button @click="handleResetQuery">
+            <i-ep-refresh />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never" class="table-container">
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="pageData"
+        highlight-current-row
+        border
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="表名" prop="tableName" min-width="100" />
+        <el-table-column label="描述" prop="tableComment" width="150" />
+
+        <el-table-column label="存储引擎" align="center" prop="engine" />
+
+        <el-table-column
+          label="排序规则"
+          align="center"
+          prop="tableCollation"
+        />
+        <el-table-column label="创建时间" align="center" prop="createTime" />
+
+        <el-table-column fixed="right" label="操作" width="150">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="handlePreview(scope.row.tableName)"
+            >
+              <i-ep-View />
+              预览
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="handlePreview(scope.row.tableName)"
+            >
+              <i-ep-MagicStick />
+              生成
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
+
+    <el-drawer
+      v-model="dialog.visible"
+      :title="dialog.title"
+      @close="handleCloseDialog"
+      size="80%"
+    >
+      <el-row>
+        <el-col :span="6">123</el-col>
+        <el-col :span="18">
+          <Codemirror
+            v-model:value="code"
+            :options="cmOptions"
+            border
+            ref="cmRef"
+            height="400"
+            width="600"
+            @change="onChange"
+            @input="onInput"
+            @ready="onReady"
+          />
+        </el-col>
+      </el-row>
+
+      <template #footer>
+        <el-button @click="handleCloseDialog">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
@@ -10,6 +113,123 @@
 defineOptions({
   name: "Generator",
 });
+
+import "codemirror/mode/javascript/javascript.js";
+import Codemirror from "codemirror-editor-vue3";
+import type { CmComponentRef } from "codemirror-editor-vue3";
+import type { Editor, EditorConfiguration } from "codemirror";
+
+const code = ref(
+  `var i = 0;
+for (; i < 9; i++) {
+    console.log(i);
+    // more statements
+}
+`
+);
+const cmRef = ref<CmComponentRef>();
+const cmOptions: EditorConfiguration = {
+  mode: "text/javascript",
+};
+
+const onChange = (val: string, cm: Editor) => {
+  console.log(val);
+  console.log(cm.getValue());
+};
+
+const onInput = (val: string) => {
+  console.log(val);
+};
+
+const onReady = (cm: Editor) => {
+  console.log(cm.focus());
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    cmRef.value?.refresh();
+  }, 1000);
+
+  setTimeout(() => {
+    cmRef.value?.resize(300, 200);
+  }, 2000);
+
+  setTimeout(() => {
+    cmRef.value?.cminstance.isClean();
+  }, 3000);
+});
+
+onUnmounted(() => {
+  handleQuery();
+  cmRef.value?.destroy();
+});
+
+import DatabaseAPI, {
+  TablePageVO,
+  TableColumnVO,
+  TablePageQuery,
+  GeneratorPreviewVO,
+} from "@/api/database";
+
+const queryFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<TablePageQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+
+const pageData = ref<TablePageVO[]>([]);
+
+const formData = reactive<any>({});
+
+const dialog = reactive({
+  visible: false,
+  title: "",
+});
+
+/** 查询 */
+function handleQuery() {
+  loading.value = true;
+  DatabaseAPI.getTablePage(queryParams)
+    .then((data) => {
+      pageData.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+/** 重置查询 */
+function handleResetQuery() {
+  queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+function handlePreview(tableName: string) {
+  DatabaseAPI.getPreviewData(tableName).then((data) => {
+    dialog.title = `预览 ${tableName}`;
+    handleOpenDialog();
+  });
+}
+
+function handleCloseDialog() {
+  dialog.visible = false;
+}
+
+function handleOpenDialog() {
+  dialog.visible = true;
+}
+
+function handleSubmit() {}
+
+/* onMounted(() => {
+  handleQuery();
+}); */
 </script>
 
 <style lang="scss" scoped></style>