1 jaar geleden · a5e6ab65ab
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
 
				+# Logs
			
 
				+logs
			
 
				+*.log
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+lerna-debug.log*
			
 
				+
			
 
				+node_modules
			
 
				+dist
			
 
				+dist-ssr
			
 
				+*.local
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.vscode/*
			
 
				+!.vscode/extensions.json
			
 
				+.idea
			
 
				+.DS_Store
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
 
				+## hooks-vue-starter
			
 
				+
			
 
				+Use this template:
			
 
				+
			
 
				+```bash
			
 
				+npx degit https://github.com/midwayjs/hooks/examples/vue ./hooks-app
			
 
				+```
			
 
				+
			
 
				+Use `npm install` to install the dependencies
			
 
				+
			
 
				+## Commands
			
 
				+
			
 
				+- `npm run dev`: Starts the development server
			
 
				+- `npm run build`: Builds the application for production
			
 
				+- `npm run start`: Runs the application in production mode
			
 
				+
			
 
				+## File Structure
			
 
				+
			
 
				+- `src`: source code, include backend and frontend
			
 
				+  - `api`: backend code
			
 
				+  - `others`: frontend code
			
 
				+- `public`: static files
			
 
				+- `midway.config.ts`: project config
			
 
				+- `index.html`: entry file
			
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -0,0 +1,10 @@
 
				+/* eslint-disable */
			
 
				+/* prettier-ignore */
			
 
				+// @ts-nocheck
			
 
				+// noinspection JSUnusedGlobalSymbols
			
 
				+// Generated by unplugin-auto-import
			
 
				+export {}
			
 
				+declare global {
			
 
				+  const ElMessage: typeof import('element-plus/es')['ElMessage']
			
 
				+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
			
 
				+}
			
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,37 @@
 
				+/* eslint-disable */
			
 
				+/* prettier-ignore */
			
 
				+// @ts-nocheck
			
 
				+// Generated by unplugin-vue-components
			
 
				+// Read more: https://github.com/vuejs/core/pull/3399
			
 
				+export {}
			
 
				+
			
 
				+declare module 'vue' {
			
 
				+  export interface GlobalComponents {
			
 
				+    ElAside: typeof import('element-plus/es')['ElAside']
			
 
				+    ElButton: typeof import('element-plus/es')['ElButton']
			
 
				+    ElCard: typeof import('element-plus/es')['ElCard']
			
 
				+    ElCol: typeof import('element-plus/es')['ElCol']
			
 
				+    ElContainer: typeof import('element-plus/es')['ElContainer']
			
 
				+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
			
 
				+    ElForm: typeof import('element-plus/es')['ElForm']
			
 
				+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
			
 
				+    ElHeader: typeof import('element-plus/es')['ElHeader']
			
 
				+    ElIcon: typeof import('element-plus/es')['ElIcon']
			
 
				+    ElInput: typeof import('element-plus/es')['ElInput']
			
 
				+    ElMain: typeof import('element-plus/es')['ElMain']
			
 
				+    ElOption: typeof import('element-plus/es')['ElOption']
			
 
				+    ElPagination: typeof import('element-plus/es')['ElPagination']
			
 
				+    ElRow: typeof import('element-plus/es')['ElRow']
			
 
				+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
			
 
				+    ElSelect: typeof import('element-plus/es')['ElSelect']
			
 
				+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
			
 
				+    ElTable: typeof import('element-plus/es')['ElTable']
			
 
				+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
			
 
				+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
			
 
				+    ElTabs: typeof import('element-plus/es')['ElTabs']
			
 
				+    ElTag: typeof import('element-plus/es')['ElTag']
			
 
				+    ElText: typeof import('element-plus/es')['ElText']
			
 
				+    RouterLink: typeof import('vue-router')['RouterLink']
			
 
				+    RouterView: typeof import('vue-router')['RouterView']
			
 
				+  }
			
 
				+}
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <!--  class="dark" -->
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <link rel="icon" href="/favicon.ico" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+    <title>Mongodb GUI</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script type="module" src="/src/main.ts"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/midway.config.ts
+++ b/midway.config.ts
@@ -0,0 +1,24 @@
 
				+import vue from '@vitejs/plugin-vue';
			
 
				+import { defineConfig } from '@midwayjs/hooks-kit';
			
 
				+import AutoImport from 'unplugin-auto-import/vite';
			
 
				+import Components from 'unplugin-vue-components/vite';
			
 
				+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
			
 
				+export default defineConfig({
			
 
				+  vite: {
			
 
				+    plugins: [
			
 
				+      vue(),
			
 
				+      AutoImport({
			
 
				+        resolvers: [ElementPlusResolver()],
			
 
				+      }),
			
 
				+      Components({
			
 
				+        resolvers: [ElementPlusResolver()],
			
 
				+      }),
			
 
				+    ],
			
 
				+    server: {
			
 
				+      port: 27011,
			
 
				+      hmr: {
			
 
				+        overlay: false,
			
 
				+      },
			
 
				+    },
			
 
				+  },
			
 
				+});
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,34 @@
 
				+{
			
 
				+  "name": "midway-vue",
			
 
				+  "private": true,
			
 
				+  "version": "3.0.1",
			
 
				+  "scripts": {
			
 
				+    "dev": "hooks dev",
			
 
				+    "build": "hooks build",
			
 
				+    "start": "hooks start"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "@element-plus/icons-vue": "^2.1.0",
			
 
				+    "@midwayjs/hooks": "^3.1.0",
			
 
				+    "@midwayjs/hooks-kit": "^3.1.0",
			
 
				+    "@midwayjs/koa": "^3.10.6",
			
 
				+    "@midwayjs/rpc": "^3.1.0",
			
 
				+    "@midwayjs/serve": "^3.1.0",
			
 
				+    "element-plus": "^2.3.12",
			
 
				+    "isomorphic-unfetch": "^3.1.0",
			
 
				+    "lodash": "^4.17.21",
			
 
				+    "mongodb": "^6.0.0",
			
 
				+    "mongoose": "^7.5.0",
			
 
				+    "vue": "^3.2.25",
			
 
				+    "vue-router": "^4.2.4",
			
 
				+    "vue3-ace-editor": "^2.2.3"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@types/lodash": "^4.14.198",
			
 
				+    "@vitejs/plugin-vue": "^4.0.0",
			
 
				+    "sass": "^1.67.0",
			
 
				+    "typescript": "^4.9.4",
			
 
				+    "unplugin-auto-import": "^0.16.6",
			
 
				+    "unplugin-vue-components": "^0.25.2"
			
 
				+  }
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/logo.png
+++ b/public/logo.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,37 @@
 
				+<script setup lang="ts">
			
 
				+import { Sunny, Moon } from '@element-plus/icons-vue'
			
 
				+import { ref } from 'vue';
			
 
				+const mode = ref(true)
			
 
				+const modeChange = (data) => {
			
 
				+  const html = document.getElementsByTagName('html')[0]
			
 
				+  if (data) {
			
 
				+    html.className += ' dark'
			
 
				+  } else {
			
 
				+    html.className = html.className.replace(/(?:^|\s)dark(?!\S)/g, '')
			
 
				+  }
			
 
				+}
			
 
				+modeChange(mode.value)
			
 
				+document.oncontextmenu = (e) => {
			
 
				+  e.preventDefault()
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<template>
			
 
				+  <div class="app">
			
 
				+    <el-row justify="end">
			
 
				+      <el-col :span="4">
			
 
				+        <el-switch v-model="mode" @change="modeChange" :active-icon="Moon" :inactive-icon="Sunny" />
			
 
				+      </el-col>
			
 
				+    </el-row>
			
 
				+    <Suspense>
			
 
				+      <router-view></router-view>
			
 
				+    </Suspense>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style>
			
 
				+body {
			
 
				+  margin: 0;
			
 
				+
			
 
				+}
			
 
				+</style>
			
--- a/src/api/config/config.default.ts
+++ b/src/api/config/config.default.ts
@@ -0,0 +1,5 @@
 
				+import { MidwayConfig } from '@midwayjs/core';
			
 
				+export default {
			
 
				+  keys: '1666946133599_5073',
			
 
				+  connectCacheKey: 'connectCacheKey',
			
 
				+} as MidwayConfig;
			
--- a/src/api/configuration.ts
+++ b/src/api/configuration.ts
@@ -0,0 +1,20 @@
 
				+import { createConfiguration, hooks } from '@midwayjs/hooks';
			
 
				+import * as Koa from '@midwayjs/koa';
			
 
				+import configDefault from './config/config.default';
			
 
				+import { connectCacheKey } from '../util/util';
			
 
				+/**
			
 
				+ * setup midway server
			
 
				+ */
			
 
				+export default createConfiguration({
			
 
				+  imports: [Koa, hooks()],
			
 
				+  importConfigs: [{ default: configDefault }],
			
 
				+  onStop(container, app) {
			
 
				+    // 停止所有连接
			
 
				+    const connCacheObject: object = app.getAttr(connectCacheKey);
			
 
				+    if (!connCacheObject) return;
			
 
				+    for (const key in connCacheObject) {
			
 
				+      const conn = connCacheObject[key];
			
 
				+      conn.close();
			
 
				+    }
			
 
				+  },
			
 
				+});
			
--- a/src/api/curd.ts
+++ b/src/api/curd.ts
@@ -0,0 +1,51 @@
 
				+import { Api, Get, Post, Query } from '@midwayjs/hooks';
			
 
				+import { Collection, Document, MongoClient, MongoClientOptions } from 'mongodb';
			
 
				+import { getAppCache, getQuery, getDbConnectKey, getRandomString } from '../util/util';
			
 
				+import { omit, get, pick } from 'lodash';
			
 
				+import { ObjectId } from 'mongodb';
			
 
				+export interface collectionOptions {
			
 
				+  key: string;
			
 
				+  db: string;
			
 
				+  collection: string;
			
 
				+}
			
 
				+const getCollection = (options: collectionOptions) => {
			
 
				+  const conn: MongoClient = getAppCache(options.key, getDbConnectKey());
			
 
				+  if (!conn) return;
			
 
				+  const db = conn.db(options.db);
			
 
				+  if (!db) return false;
			
 
				+  const collection = db.collection(options.collection);
			
 
				+  return collection;
			
 
				+};
			
 
				+export const query = Api(Get(), Query<any>(), async () => {
			
 
				+  const query = getQuery();
			
 
				+  const options = pick(query, ['key', 'db', 'collection']);
			
 
				+  const collection = getCollection(options);
			
 
				+  if (!collection) return;
			
 
				+  const filter = omit(query, ['key', 'db', 'collection', 'skip', 'limit']);
			
 
				+  const skip = get(query, 'skip', 0);
			
 
				+  const limit = get(query, 'limit', 0);
			
 
				+  const data = await collection.find(filter).sort({ 'meta.createdAt': -1 }).skip(parseInt(skip)).limit(parseInt(limit)).allowDiskUse().toArray();
			
 
				+  const total = await collection.countDocuments(filter);
			
 
				+  return { data, total };
			
 
				+});
			
 
				+export const create = Api(Post(), async (data: object, options: collectionOptions) => {
			
 
				+  const collection = getCollection(options);
			
 
				+  if (!collection) return;
			
 
				+  const result = await collection.insertOne(data);
			
 
				+  return result;
			
 
				+});
			
 
				+export const updateOne = Api(Post(), async (data: Document, options: collectionOptions) => {
			
 
				+  const collection = getCollection(options);
			
 
				+  if (!collection) return;
			
 
				+  const _id= new ObjectId(data._id);
			
 
				+  delete data._id
			
 
				+  const result = await collection.updateOne({ _id }, { $set: data });
			
 
				+  return result;
			
 
				+});
			
 
				+export const deleteOne = Api(Post(), async (data: Document, options: collectionOptions) => {
			
 
				+  const collection = getCollection(options);
			
 
				+  if (!collection) return;
			
 
				+  const _id= new ObjectId(data._id);
			
 
				+  const result = await collection.deleteOne({ _id });
			
 
				+  return result;
			
 
				+});
			
--- a/src/api/db.ts
+++ b/src/api/db.ts
@@ -0,0 +1,64 @@
 
				+import { Api, Get, Post, Query } from '@midwayjs/hooks';
			
 
				+import { MongoClient, MongoClientOptions } from 'mongodb';
			
 
				+import { dbConnectInfo } from '../interface/interface';
			
 
				+import { setAppCache, getAppCache, getQuery, getDbConnectKey, getRandomString } from '../util/util';
			
 
				+/**
			
 
				+ * mongodb连接
			
 
				+ */
			
 
				+export const DBConnect = Api(Post(), async (info: dbConnectInfo) => {
			
 
				+  let url = `mongodb://`;
			
 
				+  const options: MongoClientOptions = { monitorCommands: true };
			
 
				+  if (info.authDb) options.authSource = info.authDb;
			
 
				+  if (info.username && info.password) {
			
 
				+    // 使用url作为连接缓存的key
			
 
				+    url = `${url}${info.username}:${info.password}@`;
			
 
				+    // options.auth = { username: info.username, password: info.password }; // 另一种连接方式
			
 
				+  }
			
 
				+  url = `${url}${info.ip}:${info.port}`;
			
 
				+  try {
			
 
				+    let conn: MongoClient = getAppCache(url) as MongoClient;
			
 
				+    if (!conn) {
			
 
				+      const connection = await MongoClient.connect(url, options);
			
 
				+      const key = getRandomString();
			
 
				+      setAppCache(key, connection, getDbConnectKey());
			
 
				+      conn = connection;
			
 
				+      return { url, key };
			
 
				+    }
			
 
				+  } catch (error) {
			
 
				+    console.error(error);
			
 
				+    return '数据库连接失败';
			
 
				+  }
			
 
				+});
			
 
				+
			
 
				+/**
			
 
				+ * 数据库查询
			
 
				+ */
			
 
				+export const DataBaseList = Api(
			
 
				+  Get(),
			
 
				+  Query<{
			
 
				+    key: string;
			
 
				+  }>(),
			
 
				+  async () => {
			
 
				+    const query = getQuery();
			
 
				+    const conn: MongoClient = getAppCache(query.key, getDbConnectKey()) as MongoClient;
			
 
				+    if (!conn) return;
			
 
				+    const db = conn.db('admin');
			
 
				+    const dataBaseList = await db.command({ listDatabases: 1 });
			
 
				+    return dataBaseList;
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+export const getCollectionList = Api(Get(), Query<{ key: string; dbName: string }>(), async () => {
			
 
				+  const query = getQuery();
			
 
				+  const conn: MongoClient = getAppCache(query.key, getDbConnectKey()) as MongoClient;
			
 
				+  const db = conn.db(query.dbName);
			
 
				+  const res = await db.collections();
			
 
				+  const data = [];
			
 
				+  for (const i of res) {
			
 
				+    const obj = { name: i.collectionName, total: 0 };
			
 
				+    const total = await i.countDocuments();
			
 
				+    obj.total = total;
			
 
				+    data.push(obj);
			
 
				+  }
			
 
				+  return data;
			
 
				+});
			
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1,8 @@
 
				+/// <reference types="vite/client" />
			
 
				+
			
 
				+declare module '*.vue' {
			
 
				+  import type { DefineComponent } from 'vue';
			
 
				+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
			
 
				+  const component: DefineComponent<{}, {}, any>;
			
 
				+  export default component;
			
 
				+}
			
--- a/src/interface/interface.ts
+++ b/src/interface/interface.ts
@@ -0,0 +1,7 @@
 
				+export class dbConnectInfo {
			
 
				+  ip?: string = '127.0.0.1';
			
 
				+  port?: string = '27017';
			
 
				+  authDb?: string = 'admin';
			
 
				+  username?: string;
			
 
				+  password?: string;
			
 
				+}
			
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,12 @@
 
				+import { createApp } from 'vue';
			
 
				+import App from './App.vue';
			
 
				+import router from './router';
			
 
				+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
			
 
				+import 'element-plus/theme-chalk/dark/css-vars.css';
			
 
				+import 'element-plus/theme-chalk/src/message-box.scss';
			
 
				+const app = createApp(App);
			
 
				+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
			
 
				+  app.component(key, component);
			
 
				+}
			
 
				+app.use(router);
			
 
				+app.mount('#app');
			
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,17 @@
 
				+import { createRouter, createWebHistory } from 'vue-router';
			
 
				+const router = createRouter({
			
 
				+  history: createWebHistory(import.meta.env.BASE_URL),
			
 
				+  routes: [
			
 
				+    {
			
 
				+      path: '/',
			
 
				+      name: 'index',
			
 
				+      component: () => import('../views/home.vue'),
			
 
				+    },
			
 
				+    {
			
 
				+      path: '/dataBaseList',
			
 
				+      name: 'dataBaseList',
			
 
				+      component: () => import('../views/dataBaseList.vue'),
			
 
				+    },
			
 
				+  ],
			
 
				+});
			
 
				+export default router;
			
--- a/src/util/util.ts
+++ b/src/util/util.ts
@@ -0,0 +1,95 @@
 
				+import { useContext, useConfig } from '@midwayjs/hooks';
			
 
				+import { Context } from '@midwayjs/koa';
			
 
				+import { head, set, get } from 'lodash';
			
 
				+import { randomBytes } from 'crypto';
			
 
				+/**数据库连接缓存key */
			
 
				+export const connectCacheKey = 'connectCacheKey';
			
 
				+/**操作枚举 */
			
 
				+enum operaEum {
			
 
				+  SET,
			
 
				+  GET,
			
 
				+}
			
 
				+/**获取路径数组 */
			
 
				+const getPathArray = (path) => {
			
 
				+  const arr = path.split('.');
			
 
				+  return arr;
			
 
				+};
			
 
				+/**处理有路径的存/储操作
			
 
				+ * @property object ctx/app
			
 
				+ * @property key 最后的属性值
			
 
				+ * @property path 到达key的路径
			
 
				+ * @property target 值
			
 
				+ * @property opera 操作
			
 
				+ */
			
 
				+const deal = (object: any, key: string, path: string, opera: operaEum, target?: any) => {
			
 
				+  const arr = getPathArray(path);
			
 
				+  const objectKey: string = head(arr);
			
 
				+  let obj: object = object.getAttr(objectKey);
			
 
				+  arr.shift();
			
 
				+  arr.push(key);
			
 
				+  const pathKey = arr.join('.');
			
 
				+  if (opera === operaEum.SET) {
			
 
				+    // 存
			
 
				+    if (obj) {
			
 
				+      obj = set(obj, pathKey, target);
			
 
				+    } else {
			
 
				+      obj = {};
			
 
				+      obj = set(obj, pathKey, target);
			
 
				+    }
			
 
				+    object.setAttr(objectKey, obj);
			
 
				+  } else if (opera === operaEum.GET) {
			
 
				+    // 取
			
 
				+    return get(obj, pathKey);
			
 
				+  }
			
 
				+};
			
 
				+
			
 
				+export const setAppCache = (key: string, target: any, path?: string) => {
			
 
				+  const ctx = useContext<Context>();
			
 
				+  const app = ctx.getApp();
			
 
				+  if (path) {
			
 
				+    deal(app, key, path, operaEum.SET, target);
			
 
				+  } else {
			
 
				+    app.setAttr(key, target);
			
 
				+  }
			
 
				+  return 'ok';
			
 
				+};
			
 
				+
			
 
				+export const getAppCache = (key: string, path?: string) => {
			
 
				+  const ctx = useContext<Context>();
			
 
				+  const app = ctx.getApp();
			
 
				+  if (path) {
			
 
				+    return deal(app, key, path, operaEum.GET);
			
 
				+  } else return app.getAttr(key);
			
 
				+};
			
 
				+
			
 
				+export const setCtxCache = (key: string, target: any, path?: string) => {
			
 
				+  const ctx = useContext<Context>();
			
 
				+  if (path) {
			
 
				+    deal(ctx, key, path, operaEum.SET, target);
			
 
				+  } else {
			
 
				+    ctx.setAttr(key, target);
			
 
				+  }
			
 
				+  return 'ok';
			
 
				+};
			
 
				+export const getCtxCache = (key: string, path?: string) => {
			
 
				+  const ctx = useContext<Context>();
			
 
				+  if (path) {
			
 
				+    return deal(ctx, key, path, operaEum.GET);
			
 
				+  } else return ctx.getAttr(key);
			
 
				+};
			
 
				+
			
 
				+export const getConfig = (key: string) => {
			
 
				+  return useConfig(key);
			
 
				+};
			
 
				+export const getDbConnectKey = () => {
			
 
				+  return useConfig('connectCacheKey');
			
 
				+};
			
 
				+
			
 
				+export const getQuery = () => {
			
 
				+  const ctx = useContext();
			
 
				+  return ctx.query;
			
 
				+};
			
 
				+
			
 
				+export const getRandomString = () => {
			
 
				+  return randomBytes(16).toString('hex').slice(0, 16);
			
 
				+};
			
--- a/src/views/dataBaseList.vue
+++ b/src/views/dataBaseList.vue
@@ -0,0 +1,80 @@
 
				+<template>
			
 
				+  <div id="dataBaseList">
			
 
				+    <el-container style="height:95vh;weight:100wh">
			
 
				+      <el-header>
			
 
				+        <el-row style="padding:20px" justify="space-around">
			
 
				+          <el-col :span="6"><el-button @click="toHome" style="margin-right:5px">返回</el-button><el-tag>{{ url }}</el-tag></el-col>
			
 
				+          <el-col :span="4">当前数据库: <el-tag>{{ dbName || '请选择数据库' }}</el-tag> </el-col>
			
 
				+          <el-col :span="4">数据库总大小: <el-tag>{{ totalSize }} MB</el-tag></el-col>
			
 
				+        </el-row>
			
 
				+      </el-header>
			
 
				+      <el-container>
			
 
				+        <el-aside width="200px">
			
 
				+          <el-table :data="dataBaseList" height="85vh" border stripe style="width: 100%" @row-click="toSearchCollections">
			
 
				+            <el-table-column prop="name" align="center">
			
 
				+              <template #header>
			
 
				+                <el-text class="mx-1" type="primary" @click="searchDataBaseList">
			
 
				+                  库
			
 
				+                  <el-icon>
			
 
				+                    <RefreshRight />
			
 
				+                  </el-icon>
			
 
				+                </el-text>
			
 
				+              </template>
			
 
				+            </el-table-column>
			
 
				+          </el-table>
			
 
				+        </el-aside>
			
 
				+        <el-main>
			
 
				+          <views :dbName="dbName" :list="collectionList"></views>
			
 
				+        </el-main>
			
 
				+      </el-container>
			
 
				+    </el-container>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { ref, reactive, computed, onMounted } from 'vue';
			
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+import { DataBaseList, getCollectionList } from '../api/db'
			
 
				+import views from './main/views.vue'
			
 
				+const route = useRoute();
			
 
				+const router = useRouter();
			
 
				+// #region 数据库操作部分
			
 
				+/**数据库连接地址 */
			
 
				+const url = computed(() => {
			
 
				+  return route.query.url;
			
 
				+})
			
 
				+const key = computed(() => {
			
 
				+  return route.query.key;
			
 
				+})
			
 
				+/**数据库列表 */
			
 
				+const dataBaseList = ref([]);
			
 
				+/**数据库占用磁盘大小(MB) */
			
 
				+const totalSize = ref(0);
			
 
				+/**查询数据库列表 */
			
 
				+const searchDataBaseList = async () => {
			
 
				+  const res = await DataBaseList({ query: { key: key.value as string } })
			
 
				+  if (res) {
			
 
				+    const { databases, totalSizeMb } = res;
			
 
				+    dataBaseList.value = [...databases]
			
 
				+    totalSize.value = totalSizeMb
			
 
				+  }
			
 
				+}
			
 
				+const dbName = ref();
			
 
				+const collectionList = ref([]);
			
 
				+const toSearchCollections = async ({ name }) => {
			
 
				+  const res = await getCollectionList({ query: { key: key.value as string, dbName: name } })
			
 
				+  collectionList.value = res
			
 
				+  dbName.value = name
			
 
				+}
			
 
				+// #endregion
			
 
				+onMounted(() => {
			
 
				+  searchDataBaseList()
			
 
				+})
			
 
				+
			
 
				+const toHome = () => {
			
 
				+  router.push('/')
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped></style>
			
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -0,0 +1,56 @@
 
				+<template>
			
 
				+  <div id="home">
			
 
				+    <el-row justify="center" style="margin-top:30vh">
			
 
				+      <el-col :span="8">
			
 
				+        <el-form :model="form" label-width="120px" ref="formRef" :rules="rules">
			
 
				+          <el-form-item label="ip" prop="ip">
			
 
				+            <el-input v-model="form.ip" />
			
 
				+          </el-form-item>
			
 
				+          <el-form-item label="port" prop="port">
			
 
				+            <el-input v-model="form.port" />
			
 
				+          </el-form-item>
			
 
				+          <el-form-item label="验证数据库" prop="authDb" required>
			
 
				+            <el-input v-model="form.authDb" />
			
 
				+          </el-form-item>
			
 
				+          <el-form-item label="用户名" prop="username" required>
			
 
				+            <el-input v-model="form.username" />
			
 
				+          </el-form-item>
			
 
				+          <el-form-item label="密码" prop="password" required>
			
 
				+            <el-input v-model="form.password" type="password" show-password />
			
 
				+          </el-form-item>
			
 
				+          <el-form-item>
			
 
				+            <el-button type="primary" @click="toSubmit">连接</el-button>
			
 
				+          </el-form-item>
			
 
				+        </el-form>
			
 
				+      </el-col>
			
 
				+    </el-row>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { ref } from 'vue';
			
 
				+import { useRouter } from 'vue-router'
			
 
				+import type { FormInstance, FormRules } from 'element-plus'
			
 
				+import { dbConnectInfo } from '../interface/interface'
			
 
				+import { DBConnect } from '../api/db'
			
 
				+import { get } from 'lodash'
			
 
				+const router = useRouter()
			
 
				+const formRef = ref<FormInstance>();
			
 
				+const form = ref<dbConnectInfo>(new dbConnectInfo());
			
 
				+const rules = ref<FormRules<dbConnectInfo>>({
			
 
				+  authDb: [{ required: true, trigger: 'blur', message: '请填写验证数据库' }],
			
 
				+  username: [{ required: true, trigger: 'blur', message: '请填写用户名' }],
			
 
				+  password: [{ required: true, trigger: 'blur', message: '请填写密码' }],
			
 
				+})
			
 
				+
			
 
				+const toSubmit = async () => {
			
 
				+  await formRef.value.validate(async (valid, fileds) => {
			
 
				+    if (valid) {
			
 
				+      const res = await DBConnect(form.value)
			
 
				+      if (res) router.push({ path: '/dataBaseList', query: { key: get(res, 'key'), url: get(res, 'url') } })
			
 
				+    }
			
 
				+  })
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped></style>
			
--- a/src/views/main/dataList.vue
+++ b/src/views/main/dataList.vue
@@ -0,0 +1,217 @@
 
				+<template>
			
 
				+  <div id="dataList" v-show="view === viewType.DATA">
			
 
				+    <el-row style="margin:10px 5px" justify="space-between">
			
 
				+      <el-col :span="4">
			
 
				+        <search-bar :fields="getFields()" @query-search="querySearch"></search-bar>
			
 
				+      </el-col>
			
 
				+      <el-col :span="4">
			
 
				+        <el-button type="success" plain @click="toAddPage">添加数据</el-button>
			
 
				+      </el-col>
			
 
				+      <el-col :span="4">
			
 
				+        <el-button type="primary" plain @click="changeShowFields">显示字段</el-button>
			
 
				+      </el-col>
			
 
				+      <el-col :span="8">
			
 
				+        <pages v-model:page="page" :limit="limit" :total="total" @page-search="pageSearch" />
			
 
				+      </el-col>
			
 
				+    </el-row>
			
 
				+    <el-table :data="list" height="70vh" border stripe style="width: 100%" @row-contextmenu="rightClick"
			
 
				+      @row-click="leftClick">
			
 
				+      <el-table-column v-for="i in getFields()" :key="i.prop" :prop="i.prop" :label="i.label" align="center" />
			
 
				+    </el-table>
			
 
				+  </div>
			
 
				+  <div v-if="view === viewType.EDIT">
			
 
				+    <json-editor :value="rightClickTarget" :fields="getFields()" @to-back="viewBack" @to-save="editorSave" />
			
 
				+  </div>
			
 
				+  <div v-show="showRightMenu" ref="rightMenu" class="rightMenu">
			
 
				+    <el-card class="box-card" body-style="padding:10px">
			
 
				+      <el-row>
			
 
				+        <el-col :span="24" v-for="i in opera" :key="i.label">
			
 
				+          <el-button :type="i.type" text @click.prevent="rightMenuBtnClick(i.event)">{{ i.label }}</el-button>
			
 
				+        </el-col>
			
 
				+      </el-row>
			
 
				+    </el-card>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { head } from 'lodash'
			
 
				+import { ref, defineProps, computed } from 'vue';
			
 
				+import { useRoute } from 'vue-router'
			
 
				+import { query, create, updateOne, deleteOne, collectionOptions } from '../../api/curd'
			
 
				+import searchBar from './searchBar.vue'
			
 
				+import pages from './pages.vue'
			
 
				+import jsonEditor from './jsonEditor.vue'
			
 
				+import { get } from 'lodash'
			
 
				+const route = useRoute();
			
 
				+const props = defineProps<{
			
 
				+  collection: string
			
 
				+  dbName: string
			
 
				+}>();
			
 
				+const key = computed(() => {
			
 
				+  return route.query.key;
			
 
				+})
			
 
				+
			
 
				+// #region 分页,查询,查询条件
			
 
				+/**当前页数 */
			
 
				+const page = ref(1);
			
 
				+/**分页大小 */
			
 
				+const limit = ref(100);
			
 
				+/**数据列表 */
			
 
				+const list = ref([]);
			
 
				+/**根据条件查询的数据总数 */
			
 
				+const total = ref(0)
			
 
				+// 获取列头
			
 
				+const getFields = () => {
			
 
				+  const obj = head(list.value);
			
 
				+  interface IField {
			
 
				+    prop: string
			
 
				+    label: string
			
 
				+  }
			
 
				+  const fields: Array<IField> = [];
			
 
				+  for (const key in obj) {
			
 
				+    fields.push({ prop: key, label: key })
			
 
				+  }
			
 
				+  if (fields.length > 0) {
			
 
				+    const i = fields.findIndex(f => f.prop === '_id')
			
 
				+    if (i > -1) {
			
 
				+      const r = fields.find(f => f.prop === '_id')
			
 
				+      fields.splice(i, 1)
			
 
				+      fields.unshift(r)
			
 
				+    }
			
 
				+  }
			
 
				+  return fields
			
 
				+}
			
 
				+/**查询数据必备的数据 */
			
 
				+const defaultQuery = computed(() => {
			
 
				+  const obj: collectionOptions = { key: key.value as string, db: props.dbName, collection: props.collection }
			
 
				+  return obj;
			
 
				+})
			
 
				+/**查询条件 */
			
 
				+const queryObject = ref({});
			
 
				+/**查询的执行函数 */
			
 
				+const toSearch = async (s = 0, l = limit.value) => {
			
 
				+  const qo = { skip: s, limit: l, ...defaultQuery.value, ...queryObject.value };
			
 
				+  const res = await query({ query: qo })
			
 
				+  list.value = get(res, 'data', []);
			
 
				+  total.value = get(res, 'total', 0);
			
 
				+}
			
 
				+/**默认初始化查 */
			
 
				+toSearch();
			
 
				+/**因条件修改查询 */
			
 
				+const querySearch = (q) => {
			
 
				+  queryObject.value = q;
			
 
				+  page.value = 1;
			
 
				+  toSearch()
			
 
				+}
			
 
				+/**因分页修改查询 */
			
 
				+const pageSearch = (skip: number) => {
			
 
				+  toSearch(skip)
			
 
				+}
			
 
				+// #endregion
			
 
				+
			
 
				+const changeShowFields = () => {
			
 
				+  ElMessage.error('没做呢!赶紧滴!')
			
 
				+}
			
 
				+
			
 
				+/**视图类型 */
			
 
				+enum viewType {
			
 
				+  DATA,
			
 
				+  EDIT
			
 
				+};
			
 
				+/**右键菜单 */
			
 
				+const opera = [
			
 
				+  {
			
 
				+    label: '修改',
			
 
				+    type: 'primary',
			
 
				+    event: 'rightMenuToUpdate'
			
 
				+  },
			
 
				+  {
			
 
				+    label: '删除',
			
 
				+    type: 'danger',
			
 
				+    event: 'rightMenuToDelete'
			
 
				+  }
			
 
				+]
			
 
				+/**是否显示右键菜单 */
			
 
				+const showRightMenu = ref(false);
			
 
				+/**当前视图变量 */
			
 
				+const view = ref(viewType.DATA)
			
 
				+/**去添加数据,进入编辑页面 */
			
 
				+const toAddPage = () => {
			
 
				+  view.value = viewType.EDIT
			
 
				+}
			
 
				+/**json编辑器返回 */
			
 
				+const viewBack = () => {
			
 
				+  view.value = viewType.DATA
			
 
				+}
			
 
				+/**json编辑器保存 */
			
 
				+const editorSave = async (data: object) => {
			
 
				+  let result;
			
 
				+  if ('_id' in data) {
			
 
				+    // update
			
 
				+    result = await updateOne(data, defaultQuery.value)
			
 
				+  } else {
			
 
				+    // create
			
 
				+    result = await create(data, defaultQuery.value)
			
 
				+  }
			
 
				+  if (result) {
			
 
				+    ElMessage.success('操作成功')
			
 
				+    viewBack();
			
 
				+    toSearch();
			
 
				+  }
			
 
				+}
			
 
				+/**右键菜单的实例 */
			
 
				+const rightMenu = ref()
			
 
				+/**右键菜单的数据 */
			
 
				+const rightClickTarget = ref()
			
 
				+/**表格右键事件-召唤菜单框 */
			
 
				+const rightClick = (row: object, column: object, e: any) => {
			
 
				+  let menu = rightMenu.value as HTMLElement;
			
 
				+  let x = e.clientX;
			
 
				+  let y = e.clientY;
			
 
				+  menu.style.top = `${y}px`
			
 
				+  menu.style.left = `${x}px`;
			
 
				+  showRightMenu.value = true;
			
 
				+  rightClickTarget.value = row;
			
 
				+}
			
 
				+/**右键菜单统一事件 */
			
 
				+const rightMenuBtnClick = (method) => {
			
 
				+  const fobj = { rightMenuToUpdate, rightMenuToDelete }
			
 
				+  fobj[method]()
			
 
				+}
			
 
				+/**表格右键事件-修改 */
			
 
				+const rightMenuToUpdate = () => {
			
 
				+  view.value = viewType.EDIT
			
 
				+  leftClick();
			
 
				+}
			
 
				+/**表格右键事件-删除 */
			
 
				+const rightMenuToDelete = () => {
			
 
				+  leftClick();
			
 
				+  ElMessageBox.confirm('确认删除数据?', '删除提示', {
			
 
				+    confirmButtonText: '删除',
			
 
				+    cancelButtonText: '取消',
			
 
				+    type: 'warning',
			
 
				+  }).then(async () => {
			
 
				+    // 删除
			
 
				+    const result = await deleteOne(rightClickTarget.value, defaultQuery.value)
			
 
				+    if (result) {
			
 
				+      ElMessage.success('操作成功');
			
 
				+      toSearch()
			
 
				+    }
			
 
				+  })
			
 
				+}
			
 
				+/**表格左键-关闭右键菜单 */
			
 
				+const leftClick = () => {
			
 
				+  showRightMenu.value = false
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.box-card {
			
 
				+  width: 80px;
			
 
				+}
			
 
				+
			
 
				+.rightMenu {
			
 
				+  position: fixed;
			
 
				+  z-index: 9999
			
 
				+}
			
 
				+</style>
			
--- a/src/views/main/jsonEditor.vue
+++ b/src/views/main/jsonEditor.vue
@@ -0,0 +1,102 @@
 
				+<template>
			
 
				+  <div id="jsonEditor">
			
 
				+    <el-row style="margin:10px">
			
 
				+      <el-col :span="4">
			
 
				+        <el-button @click="viewBack">返回</el-button>
			
 
				+      </el-col>
			
 
				+      <el-col :span="4">
			
 
				+        <el-button @click="editorSave" type="success">保存</el-button>
			
 
				+      </el-col>
			
 
				+    </el-row>
			
 
				+    <el-row :gutter="10">
			
 
				+      <el-col :span="20">
			
 
				+        <v-ace-editor v-model:value="ev" @init="initFail" lang="json" theme="chrome" :options="options"
			
 
				+          class="ace-editor" />
			
 
				+      </el-col>
			
 
				+      <el-col :span="4">
			
 
				+        <el-row>
			
 
				+          <el-col>所有字段:</el-col>
			
 
				+          <el-col v-for="i in fields" :key="i.prop">
			
 
				+            <el-button text type="primary" @click="addProp(i.prop)">{{ i.label }}</el-button>
			
 
				+          </el-col>
			
 
				+        </el-row>
			
 
				+      </el-col>
			
 
				+    </el-row>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { ref, defineEmits, defineProps, watch } from 'vue';
			
 
				+import { isObject } from 'lodash';
			
 
				+const ev = ref('{}')
			
 
				+interface field {
			
 
				+  label: string;
			
 
				+  prop: string
			
 
				+}
			
 
				+const props = defineProps<{
			
 
				+  value?: object
			
 
				+  fields: Array<field>
			
 
				+}>();
			
 
				+watch(props.value, (val, oval) => {
			
 
				+  if (isObject(val)) {
			
 
				+    ev.value = JSON.stringify(val, null, 2);
			
 
				+  }
			
 
				+}, { immediate: true })
			
 
				+import { VAceEditor } from 'vue3-ace-editor'
			
 
				+import ace from 'ace-builds';
			
 
				+import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
			
 
				+ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
			
 
				+import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
			
 
				+ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);
			
 
				+const options = ref({
			
 
				+  fontSize: 14,
			
 
				+  tabSize: 2,
			
 
				+  showPrintMargin: false,
			
 
				+  highlightActiveLine: true,
			
 
				+  showLineNumbers: true,
			
 
				+  showGutter: true
			
 
				+})
			
 
				+//init
			
 
				+const initFail = (editor: any) => {
			
 
				+  // console.log(editor)
			
 
				+}
			
 
				+const $emit = defineEmits(['toBack', 'toSave'])
			
 
				+const viewBack = () => {
			
 
				+  $emit('toBack')
			
 
				+}
			
 
				+const editorSave = () => {
			
 
				+  try {
			
 
				+    const data = JSON.parse(ev.value)
			
 
				+    $emit('toSave', data)
			
 
				+  } catch (error) {
			
 
				+    ElMessage.error('JSON 格式错误.请检查输入的内容!')
			
 
				+  }
			
 
				+}
			
 
				+const addProp = (prop) => {
			
 
				+  try {
			
 
				+    let nowValue: any = ev.value;
			
 
				+    nowValue = JSON.parse(nowValue);
			
 
				+    if (prop in nowValue) {
			
 
				+      console.log('line 80 in function:');
			
 
				+      ElMessage({
			
 
				+        message: `已存在 ${prop} 字段!`,
			
 
				+        type: 'warning'
			
 
				+      })
			
 
				+      return;
			
 
				+    }
			
 
				+    nowValue[prop] = ''
			
 
				+    ev.value = JSON.stringify(nowValue, null, 2);
			
 
				+  } catch (error) {
			
 
				+    ElMessage.error('JSON 格式错误.请检查输入的内容!')
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.ace-editor {
			
 
				+  width: 100%;
			
 
				+  height: 70vh;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/main/pages.vue
+++ b/src/views/main/pages.vue
@@ -0,0 +1,24 @@
 
				+<template>
			
 
				+  <div id="pages">
			
 
				+    <el-pagination :current-page="page" :page-size="limit" :background="true" layout="total, prev, pager, next"
			
 
				+      :total="total" @current-change="cc" />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { ref, defineEmits, defineProps } from 'vue';
			
 
				+const props = defineProps<{
			
 
				+  page: number
			
 
				+  limit: number
			
 
				+  total: number
			
 
				+}>();
			
 
				+const $emit = defineEmits(['update:page', 'pageSearch'])
			
 
				+const cc = (cp) => {
			
 
				+  $emit('update:page', cp)
			
 
				+  const skip = (cp - 1) * props.limit
			
 
				+  $emit('pageSearch', skip)
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped></style>
			
--- a/src/views/main/searchBar.vue
+++ b/src/views/main/searchBar.vue
@@ -0,0 +1,66 @@
 
				+<template>
			
 
				+  <div id="searchBar">
			
 
				+    <el-button @click="toShowDrawer">按条件查询</el-button>
			
 
				+    <el-drawer v-model="showDrawer" title="查询" direction="rtl">
			
 
				+      <el-button @click="addCondition" style="margin:10px 5px">添加查询条件</el-button>
			
 
				+      <el-form label-width="150px" style="margin-bottom:5px">
			
 
				+        <el-row>
			
 
				+          <el-col v-for="(i, index) in conditionList">
			
 
				+            <el-form-item :prop="i.prop">
			
 
				+              <template #label>
			
 
				+                <el-select v-model="i.prop" filterable allow-create placeholder="字段">
			
 
				+                  <el-option v-for="item in fields" :key="item.prop" :label="item.label" :value="item.prop" />
			
 
				+                </el-select>
			
 
				+              </template>
			
 
				+              <el-input v-model="i.value">
			
 
				+                <template #append>
			
 
				+                  <el-icon @click="removeCondition(index)" style="color:#F56C6C">
			
 
				+                    <CircleClose />
			
 
				+                  </el-icon>
			
 
				+                </template>
			
 
				+              </el-input>
			
 
				+            </el-form-item>
			
 
				+          </el-col>
			
 
				+          <el-col>
			
 
				+            <el-button @click="closeDrawer">取消</el-button>
			
 
				+            <el-button type="primary" @click="submit">查询</el-button>
			
 
				+          </el-col>
			
 
				+        </el-row>
			
 
				+      </el-form>
			
 
				+    </el-drawer>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { ref, defineEmits, defineProps } from 'vue';
			
 
				+const props = defineProps<{
			
 
				+  fields: Array<{ prop: string, label: string }>
			
 
				+}>();
			
 
				+const showDrawer = ref(false)
			
 
				+const toShowDrawer = () => {
			
 
				+  showDrawer.value = true
			
 
				+}
			
 
				+const closeDrawer = () => {
			
 
				+  showDrawer.value = false;
			
 
				+}
			
 
				+const conditionList = ref([]);
			
 
				+const addCondition = () => {
			
 
				+  conditionList.value.push({})
			
 
				+}
			
 
				+const removeCondition = (i) => {
			
 
				+  conditionList.value.splice(i, 1)
			
 
				+}
			
 
				+const $emit = defineEmits(['querySearch']);
			
 
				+
			
 
				+const submit = () => {
			
 
				+  const query = {}
			
 
				+  conditionList.value.map(i => {
			
 
				+    if (i.prop) query[i.prop] = i.value
			
 
				+  })
			
 
				+  closeDrawer()
			
 
				+  $emit('querySearch', query)
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped></style>
			
 
				+
			
--- a/src/views/main/views.vue
+++ b/src/views/main/views.vue
@@ -0,0 +1,63 @@
 
				+<template>
			
 
				+  <div id="views" style="padding:10px">
			
 
				+    <el-tabs v-model="view" type="card" @edit="tabsEdit">
			
 
				+      <el-tab-pane v-for="item in viewList" :key="item.name" :label="item.label" :name="item.name"
			
 
				+        :closable="item.name === 'COLLECTION' ? false : true">
			
 
				+        <template v-if="item.name === 'COLLECTION'">
			
 
				+          <el-table :data="list" height="75vh" border stripe style="width: 100%" @row-click="toSearchCollectionData">
			
 
				+            <el-table-column prop="name" label="表名" align="center" />
			
 
				+            <el-table-column prop="total" label="数据量" align="center" />
			
 
				+          </el-table>
			
 
				+        </template>
			
 
				+        <template v-else>
			
 
				+          <data-list :collection="item.name" :dbName="dbName"></data-list>
			
 
				+        </template>
			
 
				+      </el-tab-pane>
			
 
				+    </el-tabs>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import DataList from './dataList.vue'
			
 
				+import { ref, reactive, defineProps, computed } from 'vue';
			
 
				+import { useRoute } from 'vue-router'
			
 
				+const props = defineProps<{
			
 
				+  dbName?: string,
			
 
				+  list?: Array<object>
			
 
				+}>();
			
 
				+/**当前视图 */
			
 
				+const view = ref('COLLECTION')
			
 
				+const viewList = ref([{
			
 
				+  label: '表',
			
 
				+  name: 'COLLECTION'
			
 
				+}])
			
 
				+/**点击表列表事件:查询 */
			
 
				+const toSearchCollectionData = async ({ name }) => {
			
 
				+  const i = viewList.value.findIndex(f => f.name === name);
			
 
				+  if (i > -1) return
			
 
				+  viewList.value.push({ label: name, name })
			
 
				+  view.value = name
			
 
				+}
			
 
				+
			
 
				+const tabsEdit = (targetName, action) => {
			
 
				+  // 只有删除,添加关了
			
 
				+  const i = viewList.value.findIndex(f => f.name === targetName)
			
 
				+  if (i > -1) {
			
 
				+    viewList.value.splice(i, 1);
			
 
				+    // 删除后,需要处理当前视图位置
			
 
				+    const is_has = viewList.value[i];
			
 
				+    if (is_has) view.value = is_has.name
			
 
				+    else {
			
 
				+      const last = viewList.value[viewList.value.length - 1]
			
 
				+      if (last) view.value = last.name
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.el-col {
			
 
				+  margin: 2.5px 0;
			
 
				+}
			
 
				+</style>
			
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
 
				+{
			
 
				+  "compilerOptions": {
			
 
				+    "target": "esnext",
			
 
				+    "useDefineForClassFields": true,
			
 
				+    "module": "esnext",
			
 
				+    "moduleResolution": "node",
			
 
				+    "jsx": "preserve",
			
 
				+    "sourceMap": true,
			
 
				+    "resolveJsonModule": true,
			
 
				+    "esModuleInterop": true,
			
 
				+    "lib": ["esnext", "dom"],
			
 
				+    "skipLibCheck": true
			
 
				+  },
			
 
				+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts"],
			
 
				+  "ts-node": {
			
 
				+    "compilerOptions": {
			
 
				+      "module": "commonjs"
			
 
				+    }
			
 
				+  }
			
 
				+}