From 8f9cef2a90c84e9501cc69d06b83fc6b26dfe713 Mon Sep 17 00:00:00 2001
From: sy2084 <yaoxiaoqiong@shiyue.com>
Date: Mon, 15 Jul 2024 11:54:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=92=8C=E8=A7=86=E5=9B=BE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   6 +
 .env.production                               |   4 +
 .env.staging                                  |   4 +
 components.d.ts                               |  18 ++
 index.html                                    |   2 +-
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 src/api/preview/index.js                      |  28 ++
 src/components/common/y-table.vue             | 136 +++++++++
 src/layout/components/Header.vue              |  32 +--
 src/layout/index.vue                          |  70 +++--
 src/router/guards.ts                          |   2 +-
 src/router/routes.ts                          |  50 ++--
 src/utils/request.ts                          |   6 +-
 .../module-cfg/components/create-modal.vue    | 132 +++++++++
 .../module-cfg/components/field-modal.vue     | 233 +++++++++++++++
 src/views/config-manage/module-cfg/config.ts  |  20 ++
 src/views/config-manage/module-cfg/index.vue  | 233 +++++++++++++++
 src/views/config-manage/module-cfg/service.js | 108 +++++++
 .../project-cfg/components/create-modal.vue   | 176 ++++++++++++
 src/views/config-manage/project-cfg/config.ts |   8 +
 src/views/config-manage/project-cfg/index.vue | 200 +++++++++++++
 .../config-manage/project-cfg/service.js      |  57 ++++
 .../view-cfg/components/create-modal.vue      | 110 +++++++
 src/views/config-manage/view-cfg/config.ts    |  10 +
 src/views/config-manage/view-cfg/index.vue    | 181 ++++++++++++
 src/views/config-manage/view-cfg/service.js   |  40 +++
 src/views/data-overview/index.vue             |   3 -
 src/views/flow-manager/create/index.vue       |   3 -
 src/views/flow-manager/list/index.vue         |   8 -
 .../view-all-manage/create-view/index.vue     | 268 ++++++++++++++++++
 .../view-all-manage/create-view/service.js    |  34 +++
 src/views/view-all-manage/view-list/config.ts |   5 +
 src/views/view-all-manage/view-list/index.vue | 165 +++++++++++
 .../view-all-manage/view-list/service.js      |  38 +++
 vite.config.ts                                |   5 +
 36 files changed, 2322 insertions(+), 81 deletions(-)
 create mode 100644 .env.development
 create mode 100644 src/api/preview/index.js
 create mode 100644 src/components/common/y-table.vue
 create mode 100644 src/views/config-manage/module-cfg/components/create-modal.vue
 create mode 100644 src/views/config-manage/module-cfg/components/field-modal.vue
 create mode 100644 src/views/config-manage/module-cfg/config.ts
 create mode 100644 src/views/config-manage/module-cfg/index.vue
 create mode 100644 src/views/config-manage/module-cfg/service.js
 create mode 100644 src/views/config-manage/project-cfg/components/create-modal.vue
 create mode 100644 src/views/config-manage/project-cfg/config.ts
 create mode 100644 src/views/config-manage/project-cfg/index.vue
 create mode 100644 src/views/config-manage/project-cfg/service.js
 create mode 100644 src/views/config-manage/view-cfg/components/create-modal.vue
 create mode 100644 src/views/config-manage/view-cfg/config.ts
 create mode 100644 src/views/config-manage/view-cfg/index.vue
 create mode 100644 src/views/config-manage/view-cfg/service.js
 delete mode 100644 src/views/data-overview/index.vue
 delete mode 100644 src/views/flow-manager/create/index.vue
 delete mode 100644 src/views/flow-manager/list/index.vue
 create mode 100644 src/views/view-all-manage/create-view/index.vue
 create mode 100644 src/views/view-all-manage/create-view/service.js
 create mode 100644 src/views/view-all-manage/view-list/config.ts
 create mode 100644 src/views/view-all-manage/view-list/index.vue
 create mode 100644 src/views/view-all-manage/view-list/service.js

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..150d4ef
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,6 @@
+# .env.development
+VITE_NODE_ENV = pre
+
+VITE_OA_BASEURL = https://oa-pre.shiyue.com
+
+VITE_YCODE_BASEURL = https://custom-chart-pre-api.shiyue.com
diff --git a/.env.production b/.env.production
index 563922c..e172bf4 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1,5 @@
+VITE_NODE_ENV = prod
+
 VITE_OA_BASEURL = https://oa.shiyuegame.com
+
+VITE_YCODE_BASEURL = https://custom-chart-api.shiyuegame.com
diff --git a/.env.staging b/.env.staging
index 3ff6516..0b2cd22 100644
--- a/.env.staging
+++ b/.env.staging
@@ -1 +1,5 @@
+VITE_NODE_ENV = pre
+
 VITE_OA_BASEURL = https://oa-pre.shiyue.com
+
+VITE_YCODE_BASEURL = https://custom-chart-pre-api.shiyue.com
diff --git a/components.d.ts b/components.d.ts
index 8b50715..5ef46c7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,12 +9,30 @@ declare module 'vue' {
   export interface GlobalComponents {
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
     AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASpace: typeof import('ant-design-vue/es')['Space']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATable: typeof import('ant-design-vue/es')['Table']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Table: typeof import('./src/components/common/table.vue')['default']
+    YTable: typeof import('./src/components/common/y-table.vue')['default']
   }
 }
diff --git a/index.html b/index.html
index a888544..ee89f27 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>悦码后台</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package-lock.json b/package-lock.json
index 3330b53..4653259 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "y-code",
       "version": "0.0.0",
       "dependencies": {
-        "@vueuse/core": "^10.9.0",
+        "@vueuse/core": "^10.11.0",
         "ant-design-vue": "^4.1.2",
         "axios": "^1.6.7",
         "pinia": "^2.1.7",
@@ -1944,7 +1944,7 @@
     },
     "node_modules/@vueuse/core": {
       "version": "10.11.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.11.0.tgz",
+      "resolved": "http://sy-registry.shiyue.com/@vueuse/core/-/core-10.11.0.tgz",
       "integrity": "sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
@@ -6143,7 +6143,7 @@
     },
     "@vueuse/core": {
       "version": "10.11.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.11.0.tgz",
+      "resolved": "http://sy-registry.shiyue.com/@vueuse/core/-/core-10.11.0.tgz",
       "integrity": "sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==",
       "requires": {
         "@types/web-bluetooth": "^0.0.20",
diff --git a/package.json b/package.json
index af7018b..0480935 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.11.0",
     "ant-design-vue": "^4.1.2",
     "axios": "^1.6.7",
     "pinia": "^2.1.7",
diff --git a/src/api/preview/index.js b/src/api/preview/index.js
new file mode 100644
index 0000000..a46c8c6
--- /dev/null
+++ b/src/api/preview/index.js
@@ -0,0 +1,28 @@
+import { get, post } from "@/utils/request";
+
+// 预览
+export function preview({ modularId, fieldIds, page, perPage, filter }) {
+  return post({
+    url: "api/v1/preview/view",
+    data: {
+      modular_id: modularId,
+      field_ids: fieldIds,
+      page,
+      per_page: perPage,
+      filter,
+    },
+  });
+}
+
+// 查看视图
+export function searchInfo({ previewId, page, perPage, filter }) {
+  return get({
+    url: `/api/v1/preview/info`,
+    params: {
+      preview_id: previewId,
+      page,
+      per_page: perPage,
+      filter,
+    },
+  });
+}
diff --git a/src/components/common/y-table.vue b/src/components/common/y-table.vue
new file mode 100644
index 0000000..e6c0ae3
--- /dev/null
+++ b/src/components/common/y-table.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="y-table-container">
+    <div class="y-table-filter">
+      <div
+        v-for="(item, index) in filterConfig"
+        :key="index"
+        class="filter-item"
+      >
+        <span>{{ item.label }}：</span>
+        <a-select
+          v-if="item.type === 'select'"
+          class="input-item"
+          :options="item.options"
+          v-model:value="filterData[item.name]"
+          @change="toFilt"
+        ></a-select>
+        <a-input
+          v-if="item.type === 'text'"
+          class="input-item"
+          placeholder="请输入"
+          v-model:value="filterData[item.name]"
+          @change="toFilt"
+        />
+      </div>
+    </div>
+    <div class="y-table-content">
+      <a-table
+        :columns="columnConfig"
+        :data-source="dataList"
+        :pagination="false"
+        size="small"
+        bordered
+      ></a-table>
+      <a-pagination
+        v-model:current="pageState.page"
+        :total="total"
+        :page-size="pageState.perPage"
+        :hide-on-single-page="false"
+        size="small"
+        class="pagination-box"
+        @change="pageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+
+const props = defineProps({
+  filterConfig: {
+    type: Array,
+    default: () => [],
+  },
+  columnConfig: {
+    type: Array,
+    default: () => [],
+  },
+  dataList: {
+    type: Array,
+    default: () => [],
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+const emit = defineEmits(["handleFilt"]);
+
+const filterData = ref({});
+// const filterConfig = ref([]);
+// const columnConfig = ref([]);
+// const dataList = ref([]);
+
+const pageState = reactive({
+  page: 1,
+  perPage: 20,
+});
+
+watch(
+  () => props.filterConfig,
+  (newVal) => {
+    console.log("newVal", newVal);
+
+    newVal.forEach((item) => {
+      filterData.value[item.name] = undefined;
+    });
+
+    for (let i = 0; i < newVal.length; i++) {
+      console.log(
+        "props.filterConfig",
+        newVal[i].label,
+        newVal[i].name,
+        newVal[i].type
+      );
+    }
+  }
+);
+
+const getData = () => {
+  emit("toFilt", {
+    filter: filterData.value,
+    page: pageState.page,
+    perPage: pageState.perPage,
+  });
+};
+
+const toFilt = useDebounceFn(() => {
+  getData();
+}, 500);
+
+const pageChange = () => {
+  getData();
+};
+</script>
+
+<style lang="less" scoped>
+.y-table-filter {
+  display: flex;
+  flex-wrap: wrap;
+}
+.filter-item {
+  margin-right: 10px;
+  margin-bottom: 6px;
+}
+.input-item {
+  width: 180px;
+}
+.y-table-content {
+  margin-top: 10px;
+}
+.pagination-box {
+  text-align: center;
+}
+</style>
diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
index 407c10e..1e5e422 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
-import { HomeOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
-import { useUserInfoStore } from '@/stores/useUserInfoStore';
-import avatar from '@/assets/avatar.png';
-import { OA_BASEURL } from '@/utils/request';
-import { logout } from '@/api/common';
+import { useRoute } from "vue-router";
+import { HomeOutlined, FullscreenOutlined } from "@ant-design/icons-vue";
+import { useUserInfoStore } from "@/stores/useUserInfoStore";
+import avatar from "@/assets/avatar.png";
+import { YCODE_BASEURL } from "@/utils/request";
+import { logout } from "@/api/common";
 
-const emits = defineEmits(['requestFullscreen']);
+const emits = defineEmits(["requestFullscreen"]);
 
 const route = useRoute();
 const userInfoStore = useUserInfoStore();
 
 const handleLogout = () => {
   logout().then(() => {
-    window.location.href = `${OA_BASEURL}/login?redirect=${encodeURIComponent(window.location.href)}`;
+    window.location.href = `${YCODE_BASEURL}/login?redirect=${encodeURIComponent(
+      window.location.href
+    )}`;
   });
 };
 </script>
@@ -31,12 +33,10 @@ const handleLogout = () => {
       <div class="fullscreen-icon-area" @click="emits('requestFullscreen')">
         <FullscreenOutlined class="fullscreen-icon" />
       </div>
-      <a-dropdown
-        placement="bottom"
-      >
-        <div style="display: flex;align-items: center;cursor: pointer;">
+      <a-dropdown placement="bottom">
+        <div style="display: flex; align-items: center; cursor: pointer">
           <img :src="userInfoStore.userInfo?.avatar || avatar" class="avatar" />
-          <div>{{ userInfoStore.userInfo?.alias || '-' }}</div>
+          <div>{{ userInfoStore.userInfo?.alias || "-" }}</div>
         </div>
 
         <template #overlay>
@@ -45,9 +45,7 @@ const handleLogout = () => {
               <span>退出登录</span>
             </a-menu-item>
             <a-menu-item>
-              <a class="back-oa" :href="`${OA_BASEURL}/front/`">
-                返回OA
-              </a>
+              <a class="back-oa" :href="`${OA_BASEURL}/front/`"> 返回OA </a>
             </a-menu-item>
           </a-menu>
         </template>
@@ -63,7 +61,7 @@ const handleLogout = () => {
   align-items: center;
   padding: 0 30px;
   background-color: #fff;
-  box-shadow: 0 0 12px 0 rgba(0,0,0,.08);
+  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
   .user-area {
     display: flex;
     align-items: center;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c9b80ab..e5d7992 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,21 +1,25 @@
 <script setup lang="ts">
-import { useUserInfoStore } from '@/stores/useUserInfoStore';
-import { onMounted, ref } from 'vue';
-import Header from './components/Header.vue';
-import Sider from './components/Sider.vue';
-import { MenuFoldOutlined, MenuUnfoldOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
-import { useEventListener } from '@vueuse/core';
+import { useUserInfoStore } from "@/stores/useUserInfoStore";
+import { onMounted, ref } from "vue";
+import Header from "./components/Header.vue";
+import Sider from "./components/Sider.vue";
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  FullscreenExitOutlined,
+} from "@ant-design/icons-vue";
+import { useEventListener } from "@vueuse/core";
 
-const userInfoStore = useUserInfoStore();
+// const userInfoStore = useUserInfoStore();
 const isCollapsed = ref(false);
 const isFullscreen = ref(false);
 const container = ref<HTMLDivElement>();
 
 onMounted(() => {
-  userInfoStore.fetchUserInfo();
+  // userInfoStore.fetchUserInfo();
 });
 
-useEventListener(window, 'fullscreenchange', () => {
+useEventListener(window, "fullscreenchange", () => {
   isFullscreen.value = !!document.fullscreenElement;
 });
 
@@ -31,17 +35,32 @@ const handleExitFullscreen = () => {
 
 <template>
   <section class="root">
-    <header class="header">
-      <Header @requestFullscreen="handleFullscreen" />
-    </header>
-    <section class="left-aside" :class="{ 'left-aside-collapsed': isCollapsed }">
+    <section
+      class="left-aside"
+      :class="{ 'left-aside-collapsed': isCollapsed }"
+    >
       <Sider :inlineCollapsed="isCollapsed" />
       <div class="collapsed-icon">
-        <component :is="isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined" @click="isCollapsed = !isCollapsed" />
+        <component
+          :is="isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined"
+          @click="isCollapsed = !isCollapsed"
+        />
       </div>
     </section>
-    <section class="container" :class="{ 'container-fullscreen': isFullscreen, 'container-collapsed': isCollapsed }" ref="container">
-      <router-view />
+    <section
+      class="container"
+      :class="{
+        'container-fullscreen': isFullscreen,
+        'container-collapsed': isCollapsed,
+      }"
+      ref="container"
+    >
+      <header class="header">
+        <Header @requestFullscreen="handleFullscreen" />
+      </header>
+      <div class="i-container">
+        <router-view />
+      </div>
       <a-float-button @click="handleExitFullscreen" v-if="isFullscreen">
         <template #icon>
           <FullscreenExitOutlined />
@@ -62,21 +81,18 @@ const handleExitFullscreen = () => {
   .header {
     height: @header-height;
     position: fixed;
-    width: 100%;
+    width: calc(100% - 220px);
     z-index: 1;
     top: 0;
   }
   .left-aside {
     width: @aside-width;
     position: fixed;
-    top: @header-height;
     left: 0;
     z-index: 1;
-    height: calc(100% - @header-height - @header-margin);
+    height: 100vh;
     overflow-y: hidden;
-    margin-top: @header-margin;
-    border-radius: 8px;
-    box-shadow: 0 0 12px 0 rgba(0,0,0,.08);
+    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
     display: flex;
     flex-direction: column;
     background-color: #fff;
@@ -90,7 +106,7 @@ const handleExitFullscreen = () => {
     }
   }
   .container {
-    padding-left: @aside-width + 8px;
+    padding-left: @aside-width;
     padding-top: @header-height + @header-margin;
     height: calc(100% - @header-height - @header-margin);
     position: relative;
@@ -98,6 +114,9 @@ const handleExitFullscreen = () => {
     transition: padding 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
     margin-right: 8px;
   }
+  .i-container {
+    padding: 0 8px 8px 8px;
+  }
   .container-collapsed {
     padding-left: @aside-width-collapsed + 8px;
   }
@@ -105,7 +124,10 @@ const handleExitFullscreen = () => {
     padding: 0;
     height: 100%;
   }
-  :deep(:where(.css-dev-only-do-not-override-1hsjdkk).ant-menu-inline-collapsed), .left-aside-collapsed {
+  :deep(
+      :where(.css-dev-only-do-not-override-1hsjdkk).ant-menu-inline-collapsed
+    ),
+  .left-aside-collapsed {
     width: @aside-width-collapsed;
   }
 }
diff --git a/src/router/guards.ts b/src/router/guards.ts
index fff599f..0d50887 100644
--- a/src/router/guards.ts
+++ b/src/router/guards.ts
@@ -2,7 +2,7 @@ import type { NavigationGuardWithThis } from 'vue-router';
 
 const titleGuard: NavigationGuardWithThis<undefined> = (to, from, next) => {
   next();
-  document.title = to.meta.title ? `${to.meta.title} | 机制系统` : '机制系统';
+  document.title = to.meta.title ? `${to.meta.title} | 悦码` : '悦码';
 };
 
 export { titleGuard };
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 5d29010..75d15ca 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -28,41 +28,57 @@ const routeList: RouteType[] = [
         name: '-',
         meta: {},
         children: [],
-        redirect: '/flow-manager/list',
+        redirect: '/config-manage/project-cfg',
       },
       {
-        path: '/flow-manager',
-        name: 'flow-manager',
+        path: '/config-manage',
+        name: 'config-manage',
         isMenu: true,
-        meta: { title: '机制管理' },
+        meta: { title: '配置管理' },
         icon: () => h(HomeOutlined),
         children: [
           {
-            path: 'list',
-            name: 'list',
-            component: () => import('@/views/flow-manager/list/index.vue'),
-            meta: { title: '机制列表' },
+            path: 'project-cfg',
+            name: 'project-cfg',
+            component: () => import('@/views/config-manage/project-cfg/index.vue'),
+            meta: { title: '项目配置' },
             isMenu: true,
             children: [],
           },
           {
-            path: 'create',
-            name: 'create',
-            component: () => import('@/views/flow-manager/create/index.vue'),
-            meta: { title: '机制创建' },
+            path: 'module-cfg',
+            name: 'module-cfg',
+            component: () => import('@/views/config-manage/module-cfg/index.vue'),
+            meta: { title: '数据表配置' },
             isMenu: true,
             children: [],
           },
         ],
       },
       {
-        path: '/data-overview',
-        name: 'data-overview',
+        path: '/view-all-manage',
+        name: 'view-all-manage',
         isMenu: true,
-        meta: { title: '数据总览' },
-        children: [],
+        meta: { title: '视图管理' },
         icon: () => h(BarChartOutlined),
-        component: () => import('@/views/data-overview/index.vue'),
+        children: [
+          {
+            path: 'view-list',
+            name: 'view-list',
+            component: () => import('@/views/view-all-manage/view-list/index.vue'),
+            meta: { title: '视图列表' },
+            isMenu: true,
+            children: [],
+          },
+          {
+            path: 'create-view',
+            name: 'create-view',
+            component: () => import('@/views/view-all-manage/create-view/index.vue'),
+            meta: { title: '创建' },
+            isMenu: true,
+            children: [],
+          },
+        ],
       },
     ],
   },
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 857d318..2a03370 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -8,10 +8,10 @@ export interface ResopnseType<T> {
   data: T
   ts: string
 }
-export const OA_BASEURL: string = import.meta.env.VITE_OA_BASEURL;
+export const YCODE_BASEURL: string = import.meta.env.VITE_YCODE_BASEURL;
 
 const requestType  = {
-  base: OA_BASEURL,
+  base: YCODE_BASEURL,
 };
 
 const baseAxios: AxiosInstance = axios.create({
@@ -26,7 +26,7 @@ const errorHandle = (error: AxiosError) => {
     switch (status) {
       case 401:
         message.warning('请先登录');
-        window.location.href = `${OA_BASEURL}/login?redirect=${encodeURIComponent(window.location.href)}`;
+        window.location.href = `${YCODE_BASEURL}/login?redirect=${encodeURIComponent(window.location.href)}`;
         break;
       case 403:
         message.warning('权限不足');
diff --git a/src/views/config-manage/module-cfg/components/create-modal.vue b/src/views/config-manage/module-cfg/components/create-modal.vue
new file mode 100644
index 0000000..6cc602d
--- /dev/null
+++ b/src/views/config-manage/module-cfg/components/create-modal.vue
@@ -0,0 +1,132 @@
+<template>
+  <a-modal :open="open" @ok="handleOk">
+    <a-form
+      :model="formData"
+      ref="formRef"
+      :rules="formRules"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 20 }"
+    >
+      <a-form-item label="所属项目" name="project_id">
+        <a-select
+          placeholder="请选择所属项目"
+          v-model:value="formData.project_id"
+          :options="projectSelect"
+        />
+      </a-form-item>
+      <a-form-item label="数据表名称" name="modular_name">
+        <a-input
+          placeholder="请输入数据表名称"
+          v-model:value="formData.modular_name"
+        />
+      </a-form-item>
+      <a-form-item label="展示状态" name="is_show">
+        <a-switch
+          v-model:checked="formData.is_show"
+          :checkedValue="1"
+          :unCheckedValue="0"
+        />
+      </a-form-item>
+      <a-form-item label="展示类型" name="show_type_id">
+        <a-select
+          placeholder="请选择展示类型"
+          v-model:value="formData.show_type_id"
+          :options="showTypes"
+        />
+      </a-form-item>
+      <a-form-item label="sql数据源" name="original_sql">
+        <a-input
+          placeholder="请输入sql数据源"
+          v-model:value="formData.original_sql"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { getShowTypeSelect } from "@/views/config-manage/module-cfg/service";
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "add",
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  projectSelect: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["ok"]);
+const formRules = ref({
+  modular_name: [
+    { required: true, message: "请输入数据表名称", trigger: "submit" },
+  ],
+  show_type_id: [{ required: true, message: "请选择", trigger: "submit" }],
+  original_sql: [{ required: true, message: "请输入", trigger: "submit" }],
+});
+
+const showTypes = ref([]);
+const formRef = ref();
+const formData = ref({
+  project_id: undefined,
+  modular_name: undefined,
+  is_show: 0,
+  show_type_id: undefined,
+  original_sql: undefined,
+});
+
+watch(
+  () => props.data,
+  (newVal) => {
+    if (props.type === "add") {
+      resetFormData();
+    } else {
+      formData.value = {
+        modular_id: newVal.modular_id,
+        project_id: newVal.project_id,
+        modular_name: newVal.modular_name,
+        is_show: newVal.is_show,
+        show_type_id: newVal.show_type_id,
+        original_sql: newVal.original_sql,
+      };
+    }
+  }
+);
+
+onMounted(() => {
+  toGetShowType();
+});
+
+const toGetShowType = () => {
+  getShowTypeSelect().then((res) => {
+    showTypes.value = res.data;
+  });
+};
+
+const resetFormData = () => {
+  formData.value = {
+    project_id: undefined,
+    modular_name: undefined,
+    is_show: 0,
+    show_type_id: undefined,
+    original_sql: undefined,
+  };
+};
+
+const handleOk = () => {
+  formRef.value.validate().then(() => {
+    emit("ok", formData.value);
+  });
+};
+</script>
diff --git a/src/views/config-manage/module-cfg/components/field-modal.vue b/src/views/config-manage/module-cfg/components/field-modal.vue
new file mode 100644
index 0000000..e851e83
--- /dev/null
+++ b/src/views/config-manage/module-cfg/components/field-modal.vue
@@ -0,0 +1,233 @@
+<template>
+  <a-modal :open="open" title="字段管理" style="top: 30px" :footer="null">
+    <div class="field-manager">
+      <div class="header-box">
+        <a-space>
+          <a-input
+            v-model:value="fieldName"
+            placeholder="请输入字段名称"
+            allow-clear
+            style="width: 200px"
+            @change="search"
+          />
+          <a-button type="primary" @click="addField">新建</a-button>
+        </a-space>
+      </div>
+      <a-table
+        :columns="viewCfgCols"
+        :data-source="dataList"
+        :pagination="false"
+        size="small"
+        bordered
+      >
+        <template #bodyCell="{ column, record }">
+          <template
+            v-if="
+              [
+                'field_name',
+                'field_title',
+                'belong_to_table',
+                'original_sql',
+              ].includes(column.dataIndex)
+            "
+          >
+            <a-input
+              v-if="editableData[record.field_id]"
+              v-model:value="record[column.dataIndex]"
+              placeholder="请输入"
+            />
+            <template v-else>
+              {{ record[column.dataIndex] }}
+            </template>
+          </template>
+          <template v-if="column.dataIndex === 'field_type_name'">
+            <a-select
+              v-if="editableData[record.field_id]"
+              v-model:value="record.field_type_id"
+              :options="fieldTypeSel"
+              placeholder="请选择"
+              style="width: 160px"
+            >
+            </a-select>
+            <template v-else>
+              {{ record.field_type_name }}
+            </template>
+          </template>
+          <template v-if="column.dataIndex === 'is_search'">
+            <a-switch
+              v-if="editableData[record.field_id]"
+              v-model:checked="record.is_search"
+              :checkedValue="1"
+              :unCheckedValue="0"
+            />
+            <template v-else>
+              {{ record.is_search ? "是" : "否" }}
+            </template>
+          </template>
+          <template v-if="column.dataIndex === 'action'">
+            <a-space v-if="editableData[record.field_id]">
+              <a-button type="primary" size="small" @click="handleSave(record)"
+                >保存</a-button
+              >
+              <a-button size="small" @click="handleCancel(record)"
+                >取消</a-button
+              >
+            </a-space>
+            <a-button v-else type="link" @click="handleEdit(record)"
+              >修改</a-button
+            >
+          </template>
+        </template>
+      </a-table>
+      <a-pagination
+        :current="pageState.page"
+        :page-size="pageState.perPage"
+        :total="pageState.total"
+        class="pagination-box"
+        size="small"
+        @change="pageChange"
+      />
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { viewCfgCols } from "@/views/config-manage/module-cfg/config";
+import {
+  getFieldTypeSelect,
+  getFieldList,
+  // deleteField,
+  saveField,
+  // getFieldDetail,
+} from "@/views/config-manage/module-cfg/service";
+import { message } from "ant-design-vue";
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  modularId: {
+    type: Number,
+    default: 0,
+  },
+});
+const listLoading = ref(false);
+const fieldName = ref("");
+const dataList = ref([]);
+const fieldTypeSel = ref([]);
+const pageState = reactive({
+  page: 1,
+  perPage: 20,
+  total: 0,
+});
+const editableData = reactive({});
+
+watch(
+  () => props.open,
+  (newVal) => {
+    if (newVal) {
+      toGetList();
+    }
+  }
+);
+
+onMounted(() => {
+  toGetFieldTypes();
+});
+
+// 字段类型下拉
+const toGetFieldTypes = () => {
+  getFieldTypeSelect().then((res) => {
+    fieldTypeSel.value = res.data;
+  });
+};
+
+// 字段列表
+const toGetList = () => {
+  listLoading.value = true;
+  getFieldList({
+    fieldName: fieldName.value,
+    modularId: props.modularId,
+    page: pageState.page,
+    perPage: pageState.perPage,
+  }).then((res) => {
+    dataList.value = res.data.list;
+    pageState.total = res.data.total;
+  });
+};
+
+const pageChange = () => {
+  toGetList();
+};
+
+const search = () => {
+  pageState.page = 1;
+  toGetList();
+};
+
+const addField = () => {
+  const item = {
+    field_id: new Date().getTime() + "",
+    field_title: undefined,
+    field_name: undefined,
+    is_search: 0,
+    field_type_id: undefined,
+    belong_to_table: undefined,
+    original_sql: undefined,
+    sort: 0,
+  };
+  dataList.value.unshift(item);
+  editableData[item.field_id] = {
+    ...item,
+  };
+};
+
+const handleEdit = (record) => {
+  editableData[record.field_id] = {
+    ...record,
+  };
+};
+
+const handleCancel = (record) => {
+  if (typeof record.field_id === "string") {
+    dataList.value.shift();
+  } else {
+    delete editableData[record.field_id];
+  }
+};
+
+const handleSave = (record) => {
+  const params = {
+    field_title: record.field_title,
+    field_name: record.field_name,
+    is_search: record.is_search,
+    field_type_id: record.field_type_id,
+    belong_to_table: record.belong_to_table,
+    original_sql: record.original_sql,
+    modular_id: props.modularId,
+  };
+  if (typeof params.field_id === "string") {
+    // 新建
+    delete params.field_id;
+  } else {
+    params.field_id = record.field_id;
+  }
+  saveField(params).then(() => {
+    delete editableData[record.field_id];
+    message.success("保存成功");
+    toGetList();
+  });
+};
+</script>
+
+<style lang="less" scoped>
+.header-box {
+  margin-bottom: 10px;
+}
+
+.pagination-box {
+  text-align: center;
+}
+</style>
diff --git a/src/views/config-manage/module-cfg/config.ts b/src/views/config-manage/module-cfg/config.ts
new file mode 100644
index 0000000..56cbbfa
--- /dev/null
+++ b/src/views/config-manage/module-cfg/config.ts
@@ -0,0 +1,20 @@
+export const moduleCfgCols = [
+  { dataIndex: 'modular_id', title: '编号', align: 'center'},
+  { dataIndex: 'modular_name', title: '数据表名称', align: 'center'},
+  { dataIndex: 'project_name', title: '项目名称', align: 'center'},
+  { dataIndex: 'is_show', title: '展示状态', align: 'center'},
+  { dataIndex: 'show_type_handle', title: '展示类型', align: 'center'},
+  // { dataIndex: 'sort', title: '排序', align: 'center'},
+  { dataIndex: 'action', title: '操作', align: 'center'},
+];
+
+export const viewCfgCols = [
+  { dataIndex: 'field_name', title: '字段名称', align: 'center'},
+  { dataIndex: 'field_title', title: '字段标题', align: 'center'},
+  { dataIndex: 'field_type_name', title: '字段类型', align: 'center'},
+  { dataIndex: 'is_search', title: '是否可搜索', align: 'center'},
+  { dataIndex: 'sort', title: '排序', align: 'center'},
+  { dataIndex: 'belong_to_table', title: '所属表名称', align: 'center'},
+  { dataIndex: 'original_sql', title: 'sql数据源', align: 'center'},
+  { dataIndex: 'action', title: '操作', align: 'center'},
+];
diff --git a/src/views/config-manage/module-cfg/index.vue b/src/views/config-manage/module-cfg/index.vue
new file mode 100644
index 0000000..939e2a2
--- /dev/null
+++ b/src/views/config-manage/module-cfg/index.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="normal-container module-cfg-box">
+    <div class="header-box">
+      <a-space>
+        <a-input
+          v-model:value="modularName"
+          placeholder="请输入数据表名称"
+          allow-clear
+          style="width: 200px"
+          @change="search"
+        />
+        <a-select
+          placeholder="请选择项目"
+          v-model:value="projectId"
+          :options="projectSel"
+          allow-clear
+          style="width: 200px"
+          @change="search"
+        ></a-select>
+        <a-button type="primary" @click="openCreateModal">新建</a-button>
+      </a-space>
+    </div>
+    <div class="content-box">
+      <a-table
+        :columns="moduleCfgCols"
+        :data-source="dataList"
+        :pagination="false"
+        size="small"
+        bordered
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'is_show'">
+            <a-switch
+              :checked="record.is_show"
+              :checkedValue="1"
+              :unCheckedValue="0"
+              @change="toChangeStatus(record.modular_id, $event)"
+            />
+          </template>
+          <template v-if="column.dataIndex === 'action'">
+            <a-space>
+              <a-button type="link" size="small" @click="openFieldModal(record)"
+                >字段管理</a-button
+              >
+              <a-button
+                type="link"
+                size="small"
+                @click="toGetModularDetail(record.modular_id)"
+                >编辑</a-button
+              >
+              <a-popconfirm
+                title="确定删除吗？"
+                @confirm="toDelete(record.modular_id)"
+              >
+                <a-button type="link" size="small">删除</a-button>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+      <a-pagination
+        v-model:current="pageState.page"
+        :total="pageState.total"
+        :page-size="pageState.perPage"
+        :hide-on-single-page="false"
+        size="small"
+        class="pagination-box"
+        @change="toGetModularList"
+      />
+    </div>
+    <CreateModal
+      :width="700"
+      :open="modalState.visible"
+      :title="modalState.title"
+      :type="modalState.type"
+      :data="modalState.data"
+      :projectSelect="projectSel"
+      @cancel="modalState.visible = false"
+      @ok="toSave"
+    />
+    <FieldModal
+      title="字段管理"
+      width="80%"
+      :open="fieldModalState.visible"
+      :modularId="fieldModalState.modularId"
+      @cancel="fieldModalState.visible = false"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { message } from "ant-design-vue";
+import { moduleCfgCols } from "./config";
+import {
+  getModularList,
+  deleteModular,
+  getModularDetail,
+  getProjectSelect,
+  saveModular,
+  updateStatus,
+} from "./service";
+import CreateModal from "./components/create-modal.vue";
+import FieldModal from "./components/field-modal.vue";
+
+const dataList = ref([]);
+const listLoading = ref(false);
+const saveLoading = ref(false);
+const detailLoading = ref(false);
+const modularName = ref("");
+const projectId = ref();
+const projectSel = ref([]);
+const modalState = reactive({
+  title: "",
+  visible: false,
+  type: "", // add - 新建，edit - 编辑
+  data: {},
+});
+const fieldModalState = reactive({
+  visible: false,
+  title: "",
+  modularId: undefined,
+});
+
+const pageState = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+
+onMounted(() => {
+  toGetModularList();
+  toGetProjectSel();
+});
+
+const toGetProjectSel = () => {
+  getProjectSelect().then((res) => {
+    projectSel.value = res.data;
+  });
+};
+
+const toGetModularList = () => {
+  listLoading.value = true;
+  getModularList({
+    page: pageState.page,
+    perPage: pageState.pageSize,
+    modularName: modularName.value,
+    projectId: projectId.value,
+  }).then((res) => {
+    dataList.value = res.data.list;
+    pageState.total = res.data.total;
+    listLoading.value = false;
+  });
+};
+
+// 详情
+const toGetModularDetail = (modularId) => {
+  detailLoading.value = true;
+  modalState.visible = true;
+  modalState.title = "编辑";
+  modalState.type = "edit";
+  getModularDetail({ modularId })
+    .then((res) => {
+      modalState.data = res.data;
+    })
+    .finally(() => {
+      detailLoading.value = false;
+    });
+};
+
+// 保存
+const toSave = (data) => {
+  saveLoading.value = true;
+  saveModular(data)
+    .then(() => {
+      message.success("保存成功");
+      modalState.visible = false;
+      toGetModularList();
+    })
+    .finally(() => {
+      saveLoading.value = false;
+    });
+};
+
+// 删除
+const toDelete = (id) => {
+  deleteModular({ modular_id: id }).then(() => {
+    message.success("删除成功");
+    search();
+  });
+};
+
+const toChangeStatus = (id, status) => {
+  updateStatus({
+    modular_id: id,
+    status,
+  }).then(() => {
+    message.success("修改成功");
+    search();
+  });
+};
+
+// 点击新建
+const openCreateModal = () => {
+  modalState.visible = true;
+  modalState.title = "新建";
+  modalState.type = "add";
+  modalState.data = {};
+};
+
+const search = () => {
+  pageState.page = 1;
+  toGetModularList();
+};
+
+const openFieldModal = (record) => {
+  fieldModalState.visible = true;
+  fieldModalState.modularId = record.modular_id;
+};
+</script>
+
+<style lang="less">
+.header-box {
+  margin-bottom: 10px;
+}
+
+.ant-table-wrapper {
+  margin-bottom: 10px;
+}
+
+.pagination-box {
+  text-align: center;
+}
+</style>
diff --git a/src/views/config-manage/module-cfg/service.js b/src/views/config-manage/module-cfg/service.js
new file mode 100644
index 0000000..be564f8
--- /dev/null
+++ b/src/views/config-manage/module-cfg/service.js
@@ -0,0 +1,108 @@
+import { get, post } from "@/utils/request";
+
+// 获取数据表配置列表
+export function getModularList({ page, perPage, modularName, projectId }) {
+  return get({
+    url: "/api/v1/modular/list",
+    params: {
+      page,
+      per_page: perPage,
+      modular_name: modularName,
+      project_id: projectId,
+    },
+  });
+}
+
+// 获取数据表配置详情
+export function getModularDetail({ modularId }) {
+  return get({
+    url: "/api/v1/modular/info",
+    params: {
+      modular_id: modularId,
+    },
+  });
+}
+
+// 保存数据库配置
+export function saveModular(data) {
+  return post({
+    url: "/api/v1/modular/save",
+    data,
+  });
+}
+
+// 删除数据库配置
+export function deleteModular(data) {
+  return post({
+    url: "/api/v1/modular/del",
+    data,
+  });
+}
+
+// 修改数据表状态
+export function updateStatus(data) {
+  return post({
+    url: "/api/v1/modular/change-status",
+    data,
+  });
+}
+
+// 项目下拉
+export function getProjectSelect() {
+  return get({
+    url: `/api/v1/project/get-project-drop`,
+  });
+}
+
+// 展示类型下拉
+export function getShowTypeSelect() {
+  return get({
+    url: `/api/v1/modular/get-show-type-drop`,
+  });
+}
+
+// 字段类型下拉
+export function getFieldTypeSelect() {
+  return get({
+    url: `/api/v1/field/get-field-type-drop`,
+  });
+}
+
+// 获取字段列表
+export function getFieldList({ modularId, fieldName, page, perPage }) {
+  return get({
+    url: "/api/v1/field/list",
+    params: {
+      modular_id: modularId,
+      field_name: fieldName,
+      page,
+      per_page: perPage,
+    },
+  });
+}
+
+// 获取字段详情
+export function getFieldDetail({ fieldId }) {
+  return get({
+    url: "/api/v1/field/info",
+    params: {
+      field_id: fieldId,
+    },
+  });
+}
+
+// 保存字段
+export function saveField(data) {
+  return post({
+    url: "/api/v1/field/save",
+    data,
+  });
+}
+
+// 删除字段
+export function deleteField(data) {
+  return post({
+    url: "/api/v1/field/del",
+    data,
+  });
+}
diff --git a/src/views/config-manage/project-cfg/components/create-modal.vue b/src/views/config-manage/project-cfg/components/create-modal.vue
new file mode 100644
index 0000000..4afc6d9
--- /dev/null
+++ b/src/views/config-manage/project-cfg/components/create-modal.vue
@@ -0,0 +1,176 @@
+<template>
+  <a-modal :open="open" @ok="handleOk">
+    <a-form
+      :model="formData"
+      ref="formRef"
+      :rules="formRules"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 20 }"
+    >
+      <a-form-item label="项目名称" name="project_name">
+        <a-input
+          placeholder="请输入项目名称，例如：OA"
+          v-model:value="formData.project_name"
+        />
+      </a-form-item>
+      <a-form-item label="展示状态" name="is_show">
+        <a-switch
+          v-model:checked="formData.is_show"
+          :checkedValue="1"
+          :unCheckedValue="0"
+        />
+      </a-form-item>
+      <a-form-item label="数据库地址" name="database_address">
+        <a-input
+          placeholder="请输入数据库地址"
+          v-model:value="formData.database_address"
+        />
+      </a-form-item>
+      <a-form-item label="数据库端口" name="database_port">
+        <a-input-number
+          placeholder="请输入数据库端口"
+          v-model:value="formData.database_port"
+          style="width: 200px"
+        />
+      </a-form-item>
+      <a-form-item label="数据库名称" name="database_name">
+        <a-input
+          placeholder="请输入数据库名称"
+          v-model:value="formData.database_name"
+        />
+      </a-form-item>
+      <a-form-item label="数据库用户" name="database_username">
+        <a-input
+          placeholder="请输入数据库用户"
+          v-model:value="formData.database_username"
+        />
+      </a-form-item>
+      <a-form-item label="数据库密码" name="database_password">
+        <a-space>
+          <a-input
+            placeholder="请输入数据库密码"
+            v-model:value="formData.database_password"
+          />
+          <a-button type="primary" @click="toCheckDbConnect"
+            >检测数据库连接</a-button
+          >
+        </a-space>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { checkDbConnect } from "@/views/config-manage/project-cfg/service";
+import { message } from "ant-design-vue";
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "add",
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["ok"]);
+const formRules = {
+  project_name: [
+    { required: true, message: "请输入项目名称", trigger: "submit" },
+  ],
+  database_address: [
+    { required: true, message: "请输入数据库地址", trigger: "submit" },
+  ],
+  database_port: [
+    { required: true, message: "请输入数据库端口", trigger: "submit" },
+  ],
+  database_name: [
+    { required: true, message: "请输入数据库名称", trigger: "submit" },
+  ],
+  database_username: [
+    { required: true, message: "请输入数据库用户", trigger: "submit" },
+  ],
+  database_password: [
+    { required: true, message: "请输入数据库密码", trigger: "submit" },
+  ],
+};
+
+const formRef = ref();
+const formData = ref({
+  project_name: undefined,
+  is_show: 0,
+  database_address: undefined,
+  database_port: undefined,
+  database_name: undefined,
+  database_username: undefined,
+  database_password: undefined,
+});
+
+watch(
+  () => props.data,
+  (newVal) => {
+    if (props.type === "add") {
+      resetFormData();
+    } else {
+      formData.value = newVal;
+    }
+  }
+);
+
+// 检查数据库连接
+const toCheckDbConnect = () => {
+  if (validateConnect()) {
+    checkDbConnect({
+      database_name: formData.value.database_name,
+      database_port: formData.value.database_port,
+      database_address: formData.value.database_address,
+      database_username: formData.value.database_username,
+      database_password: formData.value.database_password,
+    }).then((res) => {
+      message.success(res.message);
+    });
+  }
+};
+
+const validateConnect = () => {
+  const fields = {
+    database_name: "请输入数据库名称",
+    database_port: "请输入数据库端口",
+    database_address: "请输入数据库地址",
+    database_username: "请输入数据库用户",
+    database_password: "请输入数据库密码",
+  };
+  for (const key in fields) {
+    if (!formData.value[key]) {
+      message.error(fields[key]);
+      return false;
+    }
+  }
+  return true;
+};
+
+const resetFormData = () => {
+  formData.value = {
+    project_name: undefined,
+    is_show: 0,
+    database_address: undefined,
+    database_port: undefined,
+    database_name: undefined,
+    database_username: undefined,
+    database_password: undefined,
+  };
+};
+
+const handleOk = () => {
+  formRef.value.validate().then(() => {
+    emit("ok", formData.value);
+  });
+};
+</script>
diff --git a/src/views/config-manage/project-cfg/config.ts b/src/views/config-manage/project-cfg/config.ts
new file mode 100644
index 0000000..2d44078
--- /dev/null
+++ b/src/views/config-manage/project-cfg/config.ts
@@ -0,0 +1,8 @@
+export const projectCfgCols = [
+  { dataIndex: 'project_id', title: '编号', align: 'center'},
+  { dataIndex: 'project_name', title: '项目名称', align: 'center'},
+  { dataIndex: 'database_name', title: '数据库名', align: 'center'},
+  { dataIndex: 'is_show', title: '展示状态', align: 'center'},
+  // { dataIndex: 'sort', title: '排序', align: 'center'},
+  { dataIndex: 'action', title: '操作', align: 'center'},
+];
diff --git a/src/views/config-manage/project-cfg/index.vue b/src/views/config-manage/project-cfg/index.vue
new file mode 100644
index 0000000..7490022
--- /dev/null
+++ b/src/views/config-manage/project-cfg/index.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="normal-container project-cfg-box">
+    <div class="header-box">
+      <a-space>
+        <a-input
+          v-model:value="projectName"
+          placeholder="请输入项目名称"
+          allow-clear
+          style="width: 200px"
+          @change="search"
+        />
+        <a-button type="primary" @click="openCreateModal">新建</a-button>
+      </a-space>
+    </div>
+    <div class="content-box">
+      <a-table
+        :columns="projectCfgCols"
+        :data-source="dataList"
+        :pagination="false"
+        size="small"
+        bordered
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'is_show'">
+            <a-switch
+              v-model:checked="record.is_show"
+              :checkedValue="1"
+              :unCheckedValue="0"
+              @change="toChangeStatus(record.project_id, $event)"
+            />
+          </template>
+          <template v-if="column.dataIndex === 'action'">
+            <a-space>
+              <a-button
+                type="link"
+                size="small"
+                @click="toGetDetail(record.project_id)"
+                >编辑</a-button
+              >
+              <a-popconfirm
+                title="确定删除？"
+                @confirm="toDelete(record.project_id)"
+              >
+                <a-button type="link" size="small">删除</a-button>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+      <a-pagination
+        v-model:current="pageState.page"
+        :total="pageState.total"
+        :page-size="pageState.perPage"
+        :hide-on-single-page="false"
+        size="small"
+        class="pagination-box"
+        @change="toGetProjectList"
+      />
+    </div>
+    <CreateModal
+      :width="700"
+      :open="modalState.visible"
+      :title="modalState.title"
+      :type="modalState.type"
+      :data="modalState.data"
+      :confirmLoading="saveLoading"
+      @cancel="modalState.visible = false"
+      @ok="toSave"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive } from "vue";
+import { message } from "ant-design-vue";
+import { projectCfgCols } from "./config";
+import {
+  getProjectList,
+  saveProject,
+  deleteProject,
+  getProjectDetail,
+  updateStatus,
+} from "./service";
+import CreateModal from "./components/create-modal.vue";
+
+const dataList = ref([]);
+const listLoading = ref(false);
+const saveLoading = ref(false);
+const detailLoading = ref(false);
+const projectName = ref("");
+
+const modalState = reactive({
+  title: undefined,
+  visible: false,
+  type: "", // add - 新建，edit - 编辑
+  data: {
+    project_name: undefined,
+    is_show: 0,
+    database_address: undefined,
+    database_port: undefined,
+    database_name: undefined,
+    database_username: undefined,
+    database_password: undefined,
+  },
+});
+
+const pageState = reactive({
+  page: 1,
+  perPage: 20,
+  total: 0,
+});
+
+onMounted(() => {
+  toGetProjectList();
+});
+
+// 获取列表
+const toGetProjectList = () => {
+  listLoading.value = true;
+  getProjectList({
+    page: pageState.page,
+    perPage: pageState.perPage,
+    projectName: projectName.value,
+  })
+    .then((res) => {
+      dataList.value = res.data.list;
+      pageState.total = res.data.total;
+    })
+    .finally(() => {
+      listLoading.value = false;
+    });
+};
+
+// 保存
+const toSave = (data) => {
+  saveLoading.value = true;
+  saveProject(data)
+    .then(() => {
+      message.success("保存成功");
+      modalState.visible = false;
+      toGetProjectList();
+    })
+    .finally(() => {
+      saveLoading.value = false;
+    });
+};
+
+// 获取详情
+const toGetDetail = (projectId) => {
+  detailLoading.value = true;
+  modalState.visible = true;
+  modalState.title = "编辑";
+  modalState.type = "edit";
+  getProjectDetail({ projectId }).then((res) => {
+    modalState.data = res.data;
+  });
+};
+
+// 删除
+const toDelete = (id) => {
+  deleteProject({ projectId: id }).then(() => {
+    message.success("删除成功");
+    search();
+  });
+};
+
+const toChangeStatus = (id, status) => {
+  updateStatus({ project_id: id, status }).then(() => {
+    message.success("修改成功");
+    search();
+  });
+};
+
+const search = () => {
+  pageState.page = 1;
+  toGetProjectList();
+};
+
+// 点击新建
+const openCreateModal = () => {
+  modalState.visible = true;
+  modalState.title = "新建";
+  modalState.type = "add";
+  modalState.data = {};
+};
+</script>
+
+<style lang="less" scope>
+.header-box {
+  margin-bottom: 10px;
+}
+
+.ant-table-wrapper {
+  margin-bottom: 10px;
+}
+
+.pagination-box {
+  text-align: center;
+}
+</style>
diff --git a/src/views/config-manage/project-cfg/service.js b/src/views/config-manage/project-cfg/service.js
new file mode 100644
index 0000000..f8d2342
--- /dev/null
+++ b/src/views/config-manage/project-cfg/service.js
@@ -0,0 +1,57 @@
+import { get, post } from "@/utils/request";
+
+// 获取项目列表
+export function getProjectList({ page, perPage, projectName }) {
+  return get({
+    url: `/api/v1/project/list`,
+    params: {
+      page,
+      per_page: perPage,
+      project_name: projectName,
+    },
+  });
+}
+
+// 获取项目详情
+export function getProjectDetail({ projectId }) {
+  return get({
+    url: `api/v1/project/info`,
+    params: {
+      project_id: projectId,
+    },
+  });
+}
+
+// 保存
+export function saveProject(data) {
+  return post({
+    url: `/api/v1/project/save`,
+    data,
+  });
+}
+
+// 删除
+export function deleteProject({ projectId }) {
+  return post({
+    url: `/api/v1/project/del`,
+    data: {
+      project_id: projectId,
+    },
+  });
+}
+
+// 检测数据库链接
+export function checkDbConnect(data) {
+  return post({
+    url: `/api/v1/project/check-database-connect`,
+    data,
+  });
+}
+
+// 修改展示状态
+export function updateStatus(data) {
+  return post({
+    url: `/api/v1/project/change-status`,
+    data,
+  });
+}
diff --git a/src/views/config-manage/view-cfg/components/create-modal.vue b/src/views/config-manage/view-cfg/components/create-modal.vue
new file mode 100644
index 0000000..02c48d2
--- /dev/null
+++ b/src/views/config-manage/view-cfg/components/create-modal.vue
@@ -0,0 +1,110 @@
+<template>
+  <a-modal @ok="handleOk">
+    <a-form
+      :model="formData"
+      ref="formRef"
+      :rules="formRules"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 20 }"
+    >
+      <a-form-item label="字段标题" name="field_title">
+        <a-input
+          placeholder="请输入字段标题"
+          v-model:value="formData.field_title"
+        />
+      </a-form-item>
+      <a-form-item label="字段名称" name="field_name">
+        <a-input placeholder="请输入字段名称" v-model="formData.field_name" />
+      </a-form-item>
+      <a-form-item label="搜索状态" name="is_search">
+        <a-switch
+          v-model:checked="formData.is_search"
+          :checkedValue="1"
+          :unCheckedValue="0"
+        />
+      </a-form-item>
+      <a-form-item label="字段类型" name="field_type_id">
+        <a-select
+          placeholder="请选择字段类型"
+          v-model:value="formData.field_type_id"
+        />
+      </a-form-item>
+      <a-form-item label="所属表名称" name="belong_to_table">
+        <a-input
+          placeholder="请输入所属表名称"
+          v-model="formData.belong_to_table"
+        />
+      </a-form-item>
+      <a-form-item label="sql数据源" name="original_sql">
+        <a-input
+          placeholder="请输入sql数据源"
+          v-model="formData.original_sql"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "add",
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["ok"]);
+const formRules = {
+  field_title: [
+    { required: true, message: "请输入字段标题", trigger: "submit" },
+  ],
+  field_name: [
+    { required: true, message: "请输入字段名称", trigger: "submit" },
+  ],
+  field_type_id: [
+    { required: true, message: "请选择字段类型", trigger: "submit" },
+  ],
+  belong_to_table: [
+    { required: true, message: "请输入所属表", trigger: "submit" },
+  ],
+  original_sql: [
+    { required: true, message: "请输入sql数据源", trigger: "submit" },
+  ],
+};
+
+const formRef = ref();
+const formData = ref({
+  field_title: undefined,
+  field_name: undefined,
+  is_search: 0,
+  field_type_id: undefined,
+  belong_to_table: undefined,
+  original_sql: undefined,
+  modular_id: undefined,
+});
+
+watch(
+  () => props.type,
+  (newVal) => {
+    if (newVal === "add") {
+      resetFormData();
+    } else {
+      formData.value = props.data;
+    }
+  }
+);
+
+const resetFormData = () => {};
+
+const handleOk = () => {
+  formRef.value.validate().then(() => {
+    emit("ok", formData.value);
+  });
+};
+</script>
diff --git a/src/views/config-manage/view-cfg/config.ts b/src/views/config-manage/view-cfg/config.ts
new file mode 100644
index 0000000..d7e2158
--- /dev/null
+++ b/src/views/config-manage/view-cfg/config.ts
@@ -0,0 +1,10 @@
+export const viewCfgCols = [
+  { dataIndex: 'field_name', title: '字段名称', align: 'center'},
+  { dataIndex: 'field_title', title: '字段标题', align: 'center'},
+  { dataIndex: 'field_type_name', title: '字段类型', align: 'center'},
+  { dataIndex: 'is_search', title: '是否可搜索', align: 'center'},
+  { dataIndex: 'sort', title: '排序', align: 'center'},
+  { dataIndex: 'belong_to_table', title: '所属表名称', align: 'center'},
+  { dataIndex: 'original_sql', title: 'sql数据源', align: 'center'},
+  { dataIndex: 'action', title: '操作', align: 'center'},
+];
diff --git a/src/views/config-manage/view-cfg/index.vue b/src/views/config-manage/view-cfg/index.vue
new file mode 100644
index 0000000..4afa2c2
--- /dev/null
+++ b/src/views/config-manage/view-cfg/index.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="normal-container view-cfg-box">
+    <div class="header-box">
+      <a-space>
+        <a-input
+          v-model:value="fieldName"
+          placeholder="请输入字段名称"
+          allow-clear
+          style="width: 200px"
+          @change="search"
+        />
+        <a-select
+          placeholder="请选择数据表id"
+          v-model:value="modularId"
+          allow-clear
+          style="width: 160px"
+          @change="search"
+        ></a-select>
+        <a-button type="primary" @click="openCreateModal">新建</a-button>
+      </a-space>
+    </div>
+    <div class="content-box">
+      <a-table
+        :columns="viewCfgCols"
+        :data-source="dataList"
+        :pagination="false"
+        size="small"
+        bordered
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'action'">
+            <a-space>
+              <a-button
+                type="link"
+                size="small"
+                @click="toGetDetail(record.field_id)"
+                >编辑</a-button
+              >
+              <a-popconfirm
+                title="确定删除？"
+                @confirm="toDelete(record.field_id)"
+              >
+                <a-button type="link" size="small">删除</a-button>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+      <a-pagination
+        v-model:current="pageState.page"
+        :total="pageState.total"
+        :page-size="pageState.perPage"
+        :hide-on-single-page="false"
+        size="small"
+        class="pagination-box"
+        @change="toGetFieldList"
+      />
+    </div>
+    <CreateModal
+      :width="700"
+      :open="modalState.visible"
+      :title="modalState.title"
+      :type="modalState.type"
+      :data="modalState.data"
+      @cancel="modalState.visible = false"
+      @ok="toSave"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive } from "vue";
+import { viewCfgCols } from "./config";
+import {
+  getFieldList,
+  deleteField,
+  saveField,
+  getFieldDetail,
+} from "./service";
+import CreateModal from "./components/create-modal.vue";
+import { message } from "ant-design-vue";
+
+const listLoading = ref(false);
+const saveLoading = ref(false);
+const dataList = ref([]);
+const fieldName = ref("");
+const modularId = ref("");
+const modalState = reactive({
+  title: undefined,
+  visible: false,
+  type: "", // add - 新建，edit - 编辑
+  data: {},
+});
+const pageState = reactive({
+  page: 1,
+  perPage: 20,
+  total: 0,
+});
+
+onMounted(() => {
+  toGetFieldList();
+});
+
+const toGetFieldList = () => {
+  listLoading.value = true;
+  getFieldList({
+    fieldName: fieldName.value,
+    modularId: modularId.value,
+    page: pageState.page,
+    perPage: pageState.perPage,
+  })
+    .then((res) => {
+      dataList.value = res.data.list;
+      pageState.total = res.data.total;
+    })
+    .finally(() => {
+      listLoading.value = false;
+    });
+};
+
+// 保存
+const toSave = (data) => {
+  saveLoading.value = true;
+  saveField(data)
+    .then(() => {
+      message.success("保存成功");
+    })
+    .finally(() => {
+      saveLoading.value = false;
+    });
+};
+
+// 获取详情
+const toGetDetail = (fieldId) => {
+  modalState.visible = true;
+  modalState.title = "编辑";
+  modalState.type = "edit";
+  getFieldDetail({ fieldId }).then((res) => {
+    modalState.data = res.data;
+  });
+};
+
+// 删除
+const toDelete = (fieldId) => {
+  deleteField({ field_id: fieldId }).then(() => {
+    message.success("删除成功");
+    search();
+  });
+};
+
+// 点击新建
+const openCreateModal = () => {
+  modalState.visible = true;
+  modalState.title = "新建";
+  modalState.type = "add";
+  modalState.data = {};
+};
+
+const handleEdit = (record) => {
+  console.log(record);
+};
+
+const search = () => {
+  pageState.page = 1;
+  toGetFieldList();
+};
+</script>
+
+<style lang="less" scoped>
+.header-box {
+  margin-bottom: 10px;
+}
+
+.ant-table-wrapper {
+  margin-bottom: 10px;
+}
+
+.pagination-box {
+  text-align: center;
+}
+</style>
diff --git a/src/views/config-manage/view-cfg/service.js b/src/views/config-manage/view-cfg/service.js
new file mode 100644
index 0000000..6c37617
--- /dev/null
+++ b/src/views/config-manage/view-cfg/service.js
@@ -0,0 +1,40 @@
+import { get, post } from "@/utils/request";
+
+// 获取列表
+export function getFieldList({ modularId, fieldName, page, perPage }) {
+  return get({
+    url: "/api/v1/field/list",
+    params: {
+      modularId,
+      fieldName,
+      page,
+      perPage,
+    },
+  });
+}
+
+// 获取详情
+export function getFieldDetail({ fieldId }) {
+  return get({
+    url: "/api/v1/field/info",
+    params: {
+      fieldId,
+    },
+  });
+}
+
+// 保存字段
+export function saveField(data) {
+  return post({
+    url: "/api/v1/field/save",
+    data,
+  });
+}
+
+// 删除字段
+export function deleteField(data) {
+  return post({
+    url: "/api/v1/field/del",
+    data,
+  });
+}
diff --git a/src/views/data-overview/index.vue b/src/views/data-overview/index.vue
deleted file mode 100644
index 1ab0fc6..0000000
--- a/src/views/data-overview/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  data
-</template>
\ No newline at end of file
diff --git a/src/views/flow-manager/create/index.vue b/src/views/flow-manager/create/index.vue
deleted file mode 100644
index 88b2c8e..0000000
--- a/src/views/flow-manager/create/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  create
-</template>
\ No newline at end of file
diff --git a/src/views/flow-manager/list/index.vue b/src/views/flow-manager/list/index.vue
deleted file mode 100644
index 86e937d..0000000
--- a/src/views/flow-manager/list/index.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="normal-container">
-    111
-  </div>
-  <div class="normal-container mt-16">
-    222
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/views/view-all-manage/create-view/index.vue b/src/views/view-all-manage/create-view/index.vue
new file mode 100644
index 0000000..788439f
--- /dev/null
+++ b/src/views/view-all-manage/create-view/index.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="normal-container">
+    <div class="view-create-box">
+      <div class="left-box">
+        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+          <a-form-item label="项目"
+            ><a-select
+              placeholder="请选择项目"
+              :options="projectSel"
+              v-model:value="projectId"
+              @change="onProjectChange"
+            ></a-select
+          ></a-form-item>
+          <a-form-item label="数据表">
+            <a-select
+              placeholder="请选择"
+              :options="modularSel"
+              v-model:value="modularId"
+              @change="onModularChange"
+            ></a-select>
+          </a-form-item>
+          <a-form-item label="字段">
+            <a-checkbox-group v-if="fieldList.length" v-model:value="fieldIds">
+              <a-checkbox
+                v-for="(item, index) in fieldList"
+                :key="index"
+                :value="item.value"
+                >{{ item.label }}</a-checkbox
+              >
+            </a-checkbox-group>
+            <a-empty v-else description="暂无字段数据" />
+          </a-form-item>
+        </a-form>
+        <div class="footer">
+          <a-button
+            class="preview-btn"
+            :loading="previewLoading"
+            @click="toPreview"
+            >预览</a-button
+          >
+          <a-button type="primary" @click="addViewName">点击保存</a-button>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="y-table-container" v-if="previewData.type === 'table'">
+          <div class="y-table-filter">
+            <div
+              v-for="(item, index) in previewData.filterConfig"
+              :key="item.name"
+              class="filter-item"
+            >
+              <span>{{ item.label }}：</span>
+              <a-select
+                v-if="item.type === 'select'"
+                class="input-item"
+                :options="item.options"
+                v-model:value="previewData.filterData[item.name]"
+                placeholder="请选择"
+                @change="toFilt"
+              ></a-select>
+              <a-input
+                v-else
+                class="input-item"
+                placeholder="请输入"
+                v-model:value="previewData.filterData[item.name]"
+                @change="
+                  (e) => {
+                    toFilt(item.name, e.target.value);
+                  }
+                "
+              />
+            </div>
+          </div>
+          <div class="y-table-content">
+            <a-table
+              :columns="previewData.columnConfig"
+              :data-source="previewData.dataList"
+              :pagination="false"
+              size="small"
+              bordered
+            ></a-table>
+            <a-pagination
+              v-model:current="previewData.page"
+              :total="previewData.total"
+              :page-size="previewData.perPage"
+              :hide-on-single-page="false"
+              size="small"
+              class="pagination-box"
+              @change="toPreview"
+            />
+          </div>
+        </div>
+      </div>
+      <a-modal
+        :open="nameVisible"
+        title="保存视图"
+        :bodyStyle="{ paddingTop: '20px' }"
+        @cancel="nameVisible = false"
+        @ok="toSaveView"
+      >
+        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+          <a-form-item label="视图名称">
+            <a-input placeholder="请输入视图名称" v-model:value="previewName" />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { getProModularField, preview, saveView } from "./service";
+import { message } from "ant-design-vue";
+
+const projectSel = ref([]);
+const modularSel = ref([]);
+const fieldList = ref([]);
+const projectId = ref();
+const modularId = ref();
+const fieldIds = ref([]);
+
+const previewLoading = ref(false);
+const nameVisible = ref(false);
+const previewName = ref();
+
+const previewData = reactive({
+  type: "",
+  filterConfig: [], // 筛选条件
+  columnConfig: [], // 表格表头
+  dataList: [], // 表格数据
+  filterData: {},
+  page: 1,
+  perPage: 20,
+  total: 0,
+});
+
+onMounted(() => {
+  toGetProModularField();
+});
+
+const toGetProModularField = () => {
+  getProModularField().then((res) => {
+    projectSel.value = res.data;
+  });
+};
+
+const onProjectChange = (val) => {
+  const target = projectSel.value.find((item) => item.value === val);
+  modularSel.value = target.child;
+  modularId.value = undefined;
+  fieldList.value = [];
+  fieldIds.value = [];
+};
+
+const onModularChange = (val) => {
+  const target = modularSel.value.find((item) => item.value === val);
+  fieldList.value = target.child;
+};
+
+const toPreview = () => {
+  previewLoading.value = true;
+  const filter = previewData.filterConfig.map((item) => {
+    return {
+      name: item.name,
+      type: item.type,
+      value: previewData.filterData[item.name],
+    };
+  });
+  preview({
+    modularId: modularId.value,
+    fieldIds: fieldIds.value.toString(),
+    page: previewData.page,
+    perPage: previewData.perPage,
+    filter,
+  })
+    .then((res) => {
+      previewData.type = res.data.type;
+      if (res.data.type === "table") {
+        previewData.filterConfig = res.data.filter;
+        previewData.filterConfig.forEach((item) => {
+          previewData.filterData[item.name] = previewData.filterData[item.name]
+            ? previewData.filterData[item.name]
+            : undefined;
+        });
+        console.log("filterData", previewData.filterData);
+        previewData.columnConfig = res.data.header;
+        previewData.dataList = res.data.data;
+        previewData.total = res.data.count;
+      }
+    })
+    .finally(() => {
+      previewLoading.value = false;
+    });
+};
+
+const addViewName = () => {
+  nameVisible.value = true;
+  previewName.value = null;
+};
+
+const toSaveView = () => {
+  if (!previewName.value) {
+    message.error("请输入名称");
+    return;
+  }
+  saveView({
+    modularId: modularId.value,
+    fieldIds: fieldIds.value.toString(),
+    previewName: previewName.value,
+  }).then(() => {
+    message.success("保存成功");
+    nameVisible.value = false;
+  });
+};
+
+const toFilt = (key, value) => {
+  previewData.filterData[key] = value;
+  previewData.page = 1;
+  toPreview();
+};
+</script>
+
+<style lang="less" scoped>
+.normal-container {
+  height: calc(100vh - 120px);
+}
+.view-create-box {
+  display: flex;
+  height: 100%;
+}
+.left-box {
+  width: 400px;
+  height: calc(100% - 20px);
+  padding: 10px;
+  border-right: 1px solid #ddd;
+
+  .footer {
+    text-align: right;
+    .preview-btn {
+      margin-right: 10px;
+    }
+  }
+}
+.right-box {
+  padding: 10px;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.y-table-filter {
+  display: flex;
+  flex-wrap: wrap;
+}
+.filter-item {
+  margin-right: 10px;
+  margin-bottom: 6px;
+}
+.input-item {
+  width: 180px;
+}
+.y-table-content {
+  margin-top: 10px;
+}
+.pagination-box {
+  text-align: center;
+}
+</style>
diff --git a/src/views/view-all-manage/create-view/service.js b/src/views/view-all-manage/create-view/service.js
new file mode 100644
index 0000000..b19fbc5
--- /dev/null
+++ b/src/views/view-all-manage/create-view/service.js
@@ -0,0 +1,34 @@
+import { get, post } from "@/utils/request";
+
+// 项目-表-字段下拉
+export function getProModularField() {
+  return get({
+    url: "/api/v1/field/get-project-modular-field-drop",
+  });
+}
+
+// 预览
+export function preview({ modularId, fieldIds, page, perPage, filter }) {
+  return post({
+    url: "api/v1/preview/view",
+    data: {
+      modular_id: modularId,
+      field_ids: fieldIds,
+      page,
+      per_page: perPage,
+      filter,
+    },
+  });
+}
+
+// 点击保存
+export function saveView({ modularId, fieldIds, previewName }) {
+  return post({
+    url: "api/v1/preview/save",
+    data: {
+      modular_id: modularId,
+      field_ids: fieldIds,
+      preview_name: previewName,
+    },
+  });
+}
diff --git a/src/views/view-all-manage/view-list/config.ts b/src/views/view-all-manage/view-list/config.ts
new file mode 100644
index 0000000..e0fcb79
--- /dev/null
+++ b/src/views/view-all-manage/view-list/config.ts
@@ -0,0 +1,5 @@
+export const viewListCols = [
+  { dataIndex: 'preview_name', title: '视图名称', align: 'center' },
+  { dataIndex: 'created_at', title: '创建时间', align: 'center' },
+  { dataIndex: 'action', title: '操作', align: 'center' },
+];
diff --git a/src/views/view-all-manage/view-list/index.vue b/src/views/view-all-manage/view-list/index.vue
new file mode 100644
index 0000000..439607f
--- /dev/null
+++ b/src/views/view-all-manage/view-list/index.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="normal-container">
+    <div class="view-list-box">
+      <div class="left-box">
+        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+          <a-form-item label="项目">
+            <a-select
+              :options="projectSel"
+              v-model:value="projectId"
+              placeholder="请选择项目"
+              @change="onProjectChange"
+            ></a-select>
+          </a-form-item>
+          <a-form-item label="数据表">
+            <a-select
+              :options="modularSel"
+              v-model:value="modularId"
+              placeholder="请选择数据表"
+              @change="onModularChange"
+            ></a-select>
+          </a-form-item>
+        </a-form>
+        <a-table
+          :data-source="dataList"
+          :columns="viewListCols"
+          :pagination="false"
+          :row-class-name="
+            (record) =>
+              record.preview_id === selectedRowId ? 'selected-row' : ''
+          "
+          :custom-row="
+            (record, index) => {
+              return {
+                onClick: () => {
+                  selectedRowId = record.preview_id;
+                  toGetViewInfo();
+                },
+              };
+            }
+          "
+          size="small"
+          bordered
+        ></a-table>
+        <a-pagination
+          v-model:current="pageState.page"
+          :total="pageState.total"
+          :page-size="pageState.perPage"
+          :hide-on-single-page="false"
+          size="small"
+          class="pagination-box"
+          @change="toGetList"
+        />
+      </div>
+      <div class="right-box">
+        <y-table
+          v-if="selectViewInfo.type === 'table'"
+          :filterConfig="selectViewInfo.filter"
+          :dataList="selectViewInfo.data"
+          :columnConfig="selectViewInfo.header"
+          :total="selectViewInfo.count"
+          @toFilt="
+            (params) => {
+              toGetViewInfo(params);
+            }
+          "
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive } from "vue";
+import { getProModular, getViewList, getViewInfo } from "./service";
+import { viewListCols } from "./config";
+import yTable from "@/components/common/y-table.vue";
+
+const projectSel = ref([]);
+const modularSel = ref([]);
+const projectId = ref();
+const modularId = ref();
+const dataList = ref([]);
+const selectedRowId = ref();
+const selectViewInfo = ref({
+  type: "",
+});
+
+const pageState = reactive({
+  page: 1,
+  perPage: 20,
+  total: 0,
+});
+
+onMounted(() => {
+  toGetProModular();
+});
+
+const toGetProModular = () => {
+  getProModular().then((res) => {
+    projectSel.value = res.data;
+  });
+};
+
+const toGetList = () => {
+  getViewList({
+    modularId: modularId.value,
+    page: pageState.page,
+    perPage: pageState.perPage,
+  }).then((res) => {
+    dataList.value = res.data.list;
+    pageState.total = res.data.total;
+  });
+};
+
+const toGetViewInfo = (params = {}) => {
+  getViewInfo({
+    previewId: selectedRowId.value,
+    ...params,
+  }).then((res) => {
+    selectViewInfo.value = res.data;
+  });
+};
+
+const onProjectChange = (val) => {
+  modularSel.value = projectSel.value.find((item) => item.value === val).child;
+  modularId.value = null;
+};
+
+const onModularChange = () => {
+  pageState.page = 1;
+  toGetList();
+};
+</script>
+
+<style lang="less" scoped>
+.normal-container {
+  height: calc(100vh - 120px);
+}
+
+.view-list-box {
+  display: flex;
+  height: 100%;
+}
+
+.left-box {
+  width: 400px;
+  height: calc(100% - 20px);
+  padding: 10px;
+  border-right: 1px solid #ddd;
+}
+
+.selected-row {
+  background-color: beige;
+}
+
+.pagination-box {
+  text-align: center;
+  margin-top: 10px;
+}
+.right-box {
+  padding: 10px;
+  flex-grow: 1;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/view-all-manage/view-list/service.js b/src/views/view-all-manage/view-list/service.js
new file mode 100644
index 0000000..9f68ffb
--- /dev/null
+++ b/src/views/view-all-manage/view-list/service.js
@@ -0,0 +1,38 @@
+import { get } from "@/utils/request";
+
+// 联动下拉
+export function getProModular() {
+  return get({
+    url: "/api/v1/field/get-project-modular-drop",
+  });
+}
+
+// 视图列表
+export function getViewList({ modularId, page = 1, perPage = 20 }) {
+  return get({
+    url: "/api/v1/preview/list",
+    params: {
+      modular_id: modularId,
+      page,
+      perPage: perPage,
+    },
+  });
+}
+
+// 查看视图
+export function getViewInfo({
+  previewId,
+  page = 1,
+  perPage = 20,
+  filter = {},
+}) {
+  return get({
+    url: "/api/v1/preview/info",
+    params: {
+      preview_id: previewId,
+      page,
+      perPage: perPage,
+      filter,
+    },
+  });
+}
diff --git a/vite.config.ts b/vite.config.ts
index 9ddb338..827a72e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import Components from 'unplugin-vue-components/vite';
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
+import { server } from 'typescript';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -21,4 +22,8 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  server: {
+    hmr: true,
+    host: '0.0.0.0',
+  },
 });